.tokenHidden {

	border-bottom: thin dotted #000000;
}

body {
/*	width: 500px;*/
	font-family: sans-serif;
	background-color: grey;
	margin: auto;
position:relative;
	min-height: 100vh;
        height: 100%;
}

.choiceBox {

	border: thin dotted #000;
	border-radius: 5px;
}

.row {
display: flex;
text-align:center;
align:center;
vertical-align:middle;
}

.col {
display: table-cell;
vertical-align:middle;
}

.button {
	border: 1.5px solid black;
  border-radius: 5px;
vertical-align:middle;
	background-color: #cdcdcd;
	font-size: 200%;
	padding: 10px;
	width: 30px;
	height: 30px;
}



.feedback {
  width:300px ;
display:inline-block;
	font-size: 125%;
  border-radius: 5px;
	border: 1.5px solid black;
  height:20px;
}

.feedbackFill {
	margin:0pt;
	padding:0pt;
	background-color: #abcdab;
	height:20px;
}

#seconds {

	font-size: 200%;
	height: 30px;

}

#timer {

/*  display: flex;
  justify-content: center;
  align-items: center; */
   padding: 10px;
	border: 1.5px solid black;
  border-radius: 5px;
	width: 40px;
	height: 30px;
}

.footer{
	font-size:80%;
	background-color: #cdcdcd;
	padding: 10px;
	margin-left: 20px ;
	margin-right: 20px ;
	margin-top: 0px ;
	margin-bottom: 20px;
	min-height: 22px;
}
.footerLeft {
	float:left;
	text-align:left ;
}
.footerRight {
	float:right;
	text-align:right;
}


.header{
	background-color: #cdcdcd;
	padding: 10px;
        height: 25px;
	margin-left: 20px ;
	margin-right: 20px ;
	margin-top: 20px ;
	margin-bottom: 0px;
/*	text-align: right;*/
}
.content {
	text-align: center;
	background-color: white;
	padding: 20px;
	margin-left: 20px ;
	margin-right: 20px ;
	margin-top: 0px ;
	margin-bottom: 0px;
    height: 100%;
    min-height: 100%;
}

a {
text-decoration: none;
}

.clues {
     margin-top: 0px;
}

.clue {
	cursor: pointer;
	font-size: 175%;
	border: 1.5px solid black;
	background-color: #bababa;
	padding: 5px;
  border-radius: 5px;
  font-family: monospace;
box-shadow: 10px 5px 5px #dcdcdc;
}


.teksti {
	font-size: 150%;
}


.correct {
	color: green;
}

/* .incorrect {
	color: red;
} */

.cb{
	border: 1.5px solid black;
	padding: 5px;
  border-radius: 5px;
  font-family: monospace;
  font-size: 90%;
/*box-shadow: 10px 5px 5px #dcdcdc;*/
}

.inputTextBox {
font-size: 110%;
border: 2px dotted #000;
border-radius: 5px;
}

label > input[type="checkbox"] {
/*  display: none;*/
  margin:2pt;
}



.thumb{
	border: 1.5px solid black;
	padding: 5px;
  border-radius: 5px;
  font-family: monospace;
/*box-shadow: 10px 5px 5px #dcdcdc;*/
}

.modaldiv {
  float:left;
}
.open-modal {
  background: white;
  border: 1.5px solid black;
  padding: 5px;
  border-radius: 5px;
  float:left;
  color: black;
  /*padding: 5px;*/
}


.wordGuessIncorrect{
	border: 1.5px solid red;
	background-color: #ba3333;
        color: white;
	padding: 5px;
  border-radius: 5px;
  font-family: monospace;
box-shadow: 10px 5px 5px #dcdcdc;
	font-size: 150%;
}


.wordGuessCorrect{
	border: 1.5px solid green;
	background-color: #33ba33;
        color: white;
	padding: 5px;
  border-radius: 5px;
  font-family: monospace;
box-shadow: 10px 5px 5px #dcdcdc;
	font-size: 150%;
}

.wordGuess{
	border: 1.5px solid black;
	background-color: #bababa;
	padding: 5px;
  border-radius: 5px;
  font-family: monospace;
box-shadow: 10px 5px 5px #dcdcdc;
	font-size: 150%;
}

.targetBox {
	cursor: pointer;
padding: 2px;
text-align:center;
border: 2px solid black;
  border-radius: 5px;

}

.incorrect-dz {
	background-color: white;
	animation-name: incorrect-pulse;
	animation-duration: 1s;
	animation-iteration-count: 1;
}

@keyframes incorrect-pulse {
  0% {
    background-color: white;
	 color:red;
  }
  50% {
    background-color: red;
	 color:white;
  }
  100 {
    background-color: white;
	 color:red;
  }
}

/*********************/

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: white;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: all 0.35s ease-in;
}

.modal-dialog {
  position: relative;
  max-width: 300px;
  max-height: 40vh;
  border-radius: 5px;
  background: white;
  overflow: auto;
  cursor: default;
}

.modal.is-visible {
  visibility: visible;
  opacity: 0.5;
}
