/* CSS Document */
@media only screen
{

.questbox
{  margin: auto;
  width: 40%;
  padding: 0px;
  background-color:#ECFDFF;

}
.lernresult, .form
{ background-color:#ECFDFF;}

.questbox
{ overflow:auto;}

.quest
{ background-color:#fff; max-width:400px; overflow:auto;text-align:center; display: block;
width: 75%; float:left;}

.quest .quests
{ width:100%; background-color:#3399FF; overflow:auto;height:9em;}
.quest .question
{  width:70%; min-height:2em; font-size:3em; text-align:center; margin-top:.8em;}
.quest .lerninfo
{  width:33%; min-height:2em; font-size:1em; text-align:center; float:right; color:#FFFFFF; overflow:auto; background-color:#0033FF; height:9em; }

.debug 
{ background-color:#99FFFF}
/**/


#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);
  }
}

.quest .lerninfolvl
{   }



.quest .head
{
font-size:1.2em; font-weight:bold;

}

.allend {
    font-size: 2em;
    padding: 1em;
    padding-bottom: .1em;
}

.quest .answers .item
{
	float:left;
	width:50%;
	background-color:#00CCFF;
	min-height:2em; 
	border-bottom:#0099FF solid 2px; border-top:#0099FF solid 2px;
}
.quest .answers.advanced .item
{
	
	width:33.333333%;
}



.resolution
{ visibility:hidden;}
.show
{ visibility:visible;}

.resolution
{ font-size:1.5em; min-height:32px;}

.quest .answer
{   min-height:1.2em; font-size:3em; text-align:center;   padding-bottom:0.1em; padding-top:.3em;}

.quest .answer
{ clear:both;}


.quest .answers .item
{
min-height:120px;
}

.quest .item.hand
{
	cursor:pointer;
}

.quest .item:hover
{
border-top:#ff0000 solid 2px;
border-bottom:#ff0000 solid 2px;
background-color:#66CCFF;
}


.quest .item.false, .quest .item.false:hover
{
background-color:#ff0000;
}

.quest .item.true, .quest .item.true:hover
{
background-color:#009900;
}
.hidden
{ display:none;}

.btnhide
{ visibility:hidden;}

.btn
{ width:100%; height:3em; background-color:#0099FF; font-size:2em;} 

.levelinfo
{ float:right; width:65px; background-color:#999999; overflow:auto; display: block; 
width: 25%;
margin: 0;}

.lvlstatus .ok
{ background-color:#00CC00;}
.lvlstatus .fail
{ background-color:#FF9900;}

.lernresult
{ min-height:.5em;}

.answers 
{ overflow:auto;}

.lvlresult
{ padding-top:.5em; padding-bottom:.5em; }

.lvlstatustotal
{ border-top: #FFFFFF solid 1px;}

.levelinfo
{ text-align:center;}

.levelinfo div
{ padding-left:10px; background-color:#ff0000; }
.levelinfo div.c1
{ background-color:#FF9900;}
.levelinfo div.c0
{ background-color:#00CC00;}
.levelinfo div.x0
{ background-color:#fff; height:22px;}


.moras, .lvlgroup
{

width:100%;
}
.lvlgroup
{
overflow:auto;
}

.changeTbl
{ float:right; padding-bottom:1em; }
.changeTbl a
{
background-color:#0066FF; color:#FFFFFF;
padding-top:.1em;
padding-left:.5em;
padding-right:.5em;
cursor:pointer;
border-bottom:#00FFFF solid 2px;
}
.hiragana, .katakana
{
cursor:pointer;
}
.hiragana:hover, .katakana:hover
{
background-color:#0066FF;
color:#FFFFFF;
}

.mora
{ width:20%; float:left; padding-bottom:.8em; text-align:center; border-bottom:#CCCCCC solid 1px; min-height:120px; padding-top:1.5em;}

.mora .hiragana, .mora .katakana
{ font-size:3em; }

.romaji
{ font-size:1.5em;}

.mora.lvl-1
{ background-color:#CCCCCC;}

.displayProp
{ float:left; width:300px}

.prop1display
{ background-color:#ECFFF5}
.prop2display
{ background-color:#FDFCEA}
.prop3
{ background-color:#0000FF; color:#FFFFFF;}

.prop-1,.prop22
{ background-color:#f8bff0; color:#000000;}

.lettercount_h
{ font-size: .2em; color: #b6b7b8; text-align: right; margin-right: 1em;}
.lettercount_k
{ font-size: .2em; color: #b6b7b8; text-align: right; margin-right: 1em;}

.hastooltip
{
color:#0099FF; }



div.svgdouble
{
overflow:auto;

} 

div.svgdouble div.jpnsvg
{
width:50%;
text-align:center;
}

div.svgsingle div.jpnsvg
{
width:100%;
text-align:center;
}


.titlelvlgroup
{ text-align:right; font-size:1.1em; color:#999999;}
}

@media only screen and (min-width: 0px) and (max-width: 600px) {
.questbox
{ 
  width: 100%;
 
}
.mora .hiragana, .mora .katakana
{ font-size:2em;}

.mora
{ width:20% }


}