/** Add css rules here for your application. */
.siftaword-body {
	background-color: #fcfab4;
}

.siftaword-simulation-body {
	background-color: pink;
}

.heading {
	margin-bottom: 30px;
	border-bottom: 5px solid red;
	border-bottom-width: 100%;
	background-color: tan;
}

.starterWordCaption {
	font-size: 24pt;
	margin-bottom: 10px;
	font-family: serif;
}

.starterWord {
	font-size: 50pt;
	margin-bottom: 25px;
	font-family: sans-serif;
}

.starterWord table {
	margin-left: auto;
	margin-right:auto;
}

.simulationCaption {
	font-size: 24pt;
	margin-left: 50px;
	margin-top: 0;
	margin-bottom: -10px;
	font-family: sans-serif;
}

.instructionCaption {
	font-size: 16pt;
	margin-left: 60px;
	margin-top: 0;
	font-family: sans-serif;
	margin-bottom: 24px;
}

.hidden {
	display: none;
}

.intermediateGrid {
	margin-left: auto;
	margin-right: auto;
	width: 660px;
	padding: 18px;
	border: 2px solid;
}

.intermediateRow tr {
	height: 30px;
}

.letterBox {
	font-size: 14pt;
	width: 3em;
	text-align: center;
	margin-right: 3px;
	border: 2px solid;
	border-width: 0 0 2px 0;
	border-color: black;
}

.transparent {
	background-color: inherit;
}

.siftaword-body .letterBox:focus {
	background-color: orange;
}

.siftaword-simulation-body .letterBox:focus {
	background-color: fuschia;
}

.dummyLetterBox {
	border-width: 0 0 0 0;
}

.answerLetterBox {
	background-color: lightblue;
	margin-left: 1em;
}

.answerLabel {
	font-style: italic;
	font-family: serif;
	margin-right: 10px;
	font-size: 16pt;
}

.answerPanel {
	margin-top: 2em;
}

.previousSolution {
	font-size: 16pt;
	margin-left: auto;
	margin-right: auto;
	margin-top: 60px;
	padding: 20px;
	border: solid 3px red;
	background-color: lightblue;
	width: 500px;
}

.previousSolutionHeadline {
	margin: 0 0 5px 0;
	font-weight: bold;
	font-style: italic;
	font-family: serif;
	font-size: 20pt;
}

.previousSolutionSubline {
	margin-top: 0;
	margin-left: +20;
	margin-bottom: 0;
	font-style: italic;
	font-family: serif;
	font-size: 12pt;
}

.checkSolutionPanel {
	margin-left: auto;
	margin-right: auto;
	width: 20%;
}

.checkSolutionButton {
	margin-top: 15px;
	margin-left: 3em;
	text-align: center;
	height: 2em;
	width: 16em;
	font-size: 12pt;
}

.checkSolutionButton:disabled {
	background-color: pink;
}

.checkSolutionButton:enabled {
	background-color: lightgreen;
}

.checkSolutionButton:focus {
	border-color: red;
	border-width: 4px;
}

.dialogLabel {
	font-size: 16pt;
}

.dialogError .dialogContent {
	background-color: pink;
}

.dialogInformation .dialogContent {
	background-color: lightgreen;
}

.dialogPanel {
	display: flex;
	justify-content: center;
}

.tutorialLabel {
	width: 350px;
	font-size: 12pt;
	background-color: palegreen;
	padding: 10px;
}