.matrixActivity {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
}
.matrixActivity .activityRight {
	flex-basis: 560px;
	flex-grow: 1;
	height: 520px;
	padding-right: 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.matrixActivity .activityLeft {
	flex-basis: 460px;
	padding-top: 20px;
	flex-grow: 3;
	padding-bottom: 20px;
}
.matrixPage .dropZones {
	width: 400px;
	height: 400px;
	border: 1px dotted #ccc;
	position: relative;
	margin-top: 20px;
	margin-bottom: 100px;
	margin-left: 105px;
}
.matrixPage .dropZones .matrixImage {
	width: 415px;
	height: 415px;
	margin-left: -15px;
	margin-bottom:-15px;
	background: url("./../image/matrix.svg");
	background-repeat: none;
	background-size: contain;
}
/* --------------- labels ----------------- */
.matrixPage .dropZones .label {
	position: absolute;
	width: 100px;
	color: #BBB;
	font-style: italic;
}
.matrixPage .dropZones .label.labelExpensive {
	left: -110px;
	top: -15px;
	text-align: right;
}
.matrixPage .dropZones .label.labelInexpensive {
	left: -120px;
	top: 365px;
	text-align: right;
}
.matrixPage .dropZones .label.labelCasual {

}
.matrixPage .dropZones .label.labelFine {
	text-align: right;
	right: 0px;
}
.matrixPage .dropZones .label.labelOne {
	text-align: center;
	width: 50px;
	left: -90px;
	top: 345px;
}
.matrixPage .dropZones .label.labelThree {
	text-align: center;
	width: 50px;
	left: -73px;
	top: 8px;
}
/* --------------- drop zone and tokens ----------------- */
.matrixPage .dropZones .drop {
	width: 196px;
	height: 198px;
	border: 1px solid red;
	display: inline-block;
	vertical-align: top;
}

.matrixPage .token {
	width: 35px;
	height: 35px;
	border-radius: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
}

.activityLeft .token {
	width: 30px;
	height: 30px;
  margin-left: auto;
}

.matrixPage .token.bg_white {
  border: 1px solid #37453c;
}
.path2 .token.bg_white {
	border: 1px solid #37453c;
}

.matrixPage .token p {
	padding: 0;
	margin: 0;
}
.matrixPage .drag.token {
	position: absolute;
	left: calc(400px + 10px);
	top: 0px;
	cursor: pointer;
  box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.4);
}

.drag.token.bg_white {
	box-shadow: 0px px 5px 0px rgba(0,0,0,0.4);
}

.matrixPage .drag.token[name="token0"]{
	/* 2ind * (35size + 5gutter) */
	top: 0px;
	background-image: url("./../image/green_location.svg");
	background-size: contain;
	background-repeat: no-repeat;
}

.matrixPage.path2 .drag.token[name="token0"]{
	background-image: url("./../image/blue_location.svg");
}
.matrixPage .drag.token[name="token1"]{
	/* 2ind * (35size + 5gutter) */
	top: 60px;
}
.matrixPage .drag.token[name="token2"]{
	/* 2ind * (35size + 5gutter) */
	top: 120px;
}
.matrixPage .drag.token[name="token3"]{
	/* 2ind * (35size + 5gutter) */
	top: 180px;
}
.matrixPage .drag.token[name="token4"]{
	/* 2ind * (35size + 5gutter) */
	top: 240px;
}
.matrixPage .drag.token[name="token5"]{
	/* 2ind * (35size + 5gutter) */
	top: 300px;
}
.matrixPage .drag.token[name="token6"]{
	top: 360px;
}

.matrixPage table {
	background-color: #FFF;
}