.squareTilesCategory {
	background-color: var(--dt-button-background-color4);
	border:none;
	display: table;
}

.squareTilesCategoryText {
	color: var(--dt-colored-text2);
	font-family: sans-seriff;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 1.75em;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.stagePrevButton {
	background: url("dtt-backbutton_normal.png") no-repeat;
	background-size: contain;
	border: none;
	z-index: 1;
}

.stagePrevButton:hover {
	background: url("dtt-backbutton_hover.png") no-repeat;
	background-size: contain;
	border: none;
	z-index: 1;
	cursor: pointer;
}

.stagePrevButton:focus {
	background: url("dtt-backbutton_hover.png") no-repeat;
	background-size: contain;
	border: none;
	z-index: 1;
	cursor: pointer;
	border: 2px solid var(--dt-button-focus-color1-inside);
	outline: 2px solid var(--dt-button-focus-color1-outside);
}

.stageNextButton {
	background: url("dtt-smallbutton_normal.png") no-repeat;
	background-size: contain;
	border: none;
	z-index: 1;
}

.stageNextButton:hover {
	background: url("dtt-smallbutton_hover.png") no-repeat;
	background-size: contain;
	border: none;
	z-index: 1;
	cursor: pointer;
}

.stageNextButton:focus {
	background: url("dtt-smallbutton_hover.png") no-repeat;
	background-size: contain;
	border: none;
	z-index: 1;
	cursor: pointer;
	border: 2px solid var(--dt-button-focus-color1-inside);
	outline: 2px solid var(--dt-button-focus-color1-outside);
}

.stageNextButtonRight {
	background: url("dtt-nextbutton_normal.png") no-repeat;
	background-size: contain;
	border: none;
	z-index: 1;
}

.stageNextButtonRight:hover {
	background: url("dtt-nextbutton_hover.png") no-repeat;
	background-size: contain;
	border: none;
	z-index: 1;
	cursor: pointer;
}

.stageNextButtonRight:focus {
	background: url("dtt-nextbutton_hover.png") no-repeat;
	background-size: contain;
	border: none;
	z-index: 1;
	cursor: pointer;
	border: 2px solid var(--dt-button-focus-color1-inside);
	outline: 2px solid var(--dt-button-focus-color1-outside);
}

.stageNextButtonStart {
	background: url("dtt-startbutton_normal.png") no-repeat;
	background-size: contain;
	border: none;
	z-index: 1;
}

.stageNextButtonStart:hover {
	background: url("dtt-startbutton_hover.png") no-repeat;
	background-size: contain;
	border: none;
	z-index: 1;
	cursor: pointer;
}

.stageNextButtonStart:focus {
	background: url("dtt-startbutton_hover.png") no-repeat;
	background-size: contain;
	border: none;
	z-index: 1;
	cursor: pointer;
	border: 2px solid var(--dt-button-focus-color1-inside);
	outline: 2px solid var(--dt-button-focus-color1-outside);
}

.trainingSquare {
	background-color: var(--dt-button-background-color2);
	border:none;
	text-align: center;
	display: flex;
	justify-content: center;
	border: 1px solid var(--dt-button-border-color1);
}

.squareTiles {
	background-color: var(--dt-button-background-color1);
	border:none;
	text-align: center;
	display: flex;
	justify-content: center;
}

.squareTilesText {
	color: var(--dt-colored-text2);
	font-family: sans-seriff;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 2.5em;
	margin-top: 10%;
}

.squareTileQuestion {
	color: var(--dt-colored-text2);
	background-color: var(--dt-button-background-color2);
	border: 1px solid var(--dt-button-border-color1);
	text-align: center;
	display: flex;
	justify-content: center;
}

.squareTilesCorrect {
	background-color: var(--dt-button-background-color3) !important;
	background: url("dtt-gameboard_fs-correct.png") no-repeat;
	background-position: center;
	background-size: 55%;
	border: none;
}

.squareTilesIncorrect {
	background-color: var(--dt-button-background-color4) !important;
	background: url("dtt-gameboard_fs-incorrect.png") no-repeat;
	background-position: center;
	background-size: 55%;
	border: none;
}

.feedbackText {
	color: white !important;
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 2em;
	padding-left: 0%;
	padding-right: 10%;
}


#feedbackText1 {
	margin-bottom: 0;
}

#feedbackText2 {
	margin-top: 0;
}


.tutorialText {
	color: var(--dt-colored-text2) !important;
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 2.5em;
	padding-left: 0%;
	padding-right: 10%;
}

.tutorialTextStandout {
	color: var(--dt-colored-text4) !important;
}

.introText {
	color: var(--dt-colored-text2) !important;
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 2.25em;
	padding-left: 0%;
	padding-right: 10%;
}


.feedbackBox {
	background-color: var(--dt-text-background-color1);
	color: var(--dt-colored-text2);
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 1.75em;
	margin-left: 10%;
	margin-right: 10%;
}

#feedbackBoxText1 {
	margin-bottom: 0;
}

#feedbackBoxText2 {
	margin-top: 0;
}

.feedbackQuestionDiv {
	color: var(--dt-colored-text1);
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 2em;
	margin: 1.5%;
}