/* CSS Document */



#spinner:not([hidden]) {
  position: absolute;
  top: -100px;
  left: 0;
  right: 40px;;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#spinner::after {
  content: "";
  width: 180px;
  height: 180px;
  border: 2px solid #f3f3f3;
  border-top: 3px solid #f25a41;
  border-radius: 100%;
  will-change: transform;
  animation: spin 1s infinite linear
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
 }

.questbox
{ 
	margin: auto;
  	width: 80%;
  	padding: 0px;
  	
	
}

#questwrap
{
width: 100%;
min-height: 2em;
text-align: center;
margin-top: .1em;
margin-bottom: .1em;
background-color: #fff;
justify-content: center;
align-items: center;
max-height:275px;
}

#questwrap .ask
{
padding:0.5em;
font-size:2em;
text-align:center;
color:#333333;
}
#answerwrap .question
{
padding:1em;
padding-bottom:.5em;
padding-top:.5em;
	text-align:center;
}

#quest_uc
{
 display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
}

#answerwrap
{ display:none;}

#answerwrap.show
{ display:block;}

#next, #show
{ background-color:#0066FF; color:#FFFFFF;padding:.8em; font-size:2em; text-align:center; clear:both;}

.hint
{ float:left;}

.pad
{ padding:.5em;}
.activ
{ background-color:#FFFFFF; color:#0066FF;}

.question
{ font-size:1.5em;}

.char_hiragana
{ background-color:#0099CC;}
.char_kanji
{ background-color:#99CC66; color:#000000;}
.char_katakana
{ background-color:#FFCC33; color:#000000;} 
.char_latin
{ background-color:#CCCCCC;}
.wordtype
{ padding:.5em; background-color:#3399FF; color:#fff; margin:.5em; font-size:.6em;;}

@media only screen and (min-width: 0px) and (max-width: 500px) {

.CmsAppAction
{ width:100%; clear:both;

}

.questbox
{ width:100%; padding-top:3em;}


}