@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

body{
	font-family: 'Noto Sans JP', serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
	background-color:#F9F9F9;
}
.spanish{
    font-family: Verdana;
}
.editor-sentence{
    margin-left: 20px;
    margin-bottom: 20px;
    padding: 10px;
    border-left: #6366f1 6px solid;
    background: #EEE;
}
.editor-sentence .sentence-text{
    font-size: 25px;
    margin-bottom: 5px;
}
.editor-sentence .sentence-text strong{
    color: #6366f1
}
.note{
    margin-left: 20px;
    margin-bottom: 20px;
    padding: 10px;
    border-left: #fcd34d 6px solid;
    background: #EEE;
}

.main-container{
    background: #FFF;
    border-radius: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.navbar{
	margin-bottom:20px;
}
#test-app div{
	text-align: center;
}
.hide{
	display:none;
}

.text{
	font-size:20pt;
}
.description{
	font-size:20pt;
}
.Order .order-options,.Order .order-result{
	margin-right:10px;
}

.Choose .choose-options{
	margin-bottom:10px;
}
@media screen {
	.test-app strong{
		color: #5cd08d;
	}
}


.table-fit {
	width: 1px;
	white-space: nowrap;
}

.table-vertical td{
	vertical-align: bottom;
}

blockquote{
	border: #555 dashed 3px;
	padding: 10px;
	display: inline-block;
}

blockquote p:last-child{
	margin-bottom: 0!important;
}
.nav.flex-column .active{
	color: #555;
}
/*
GAME CSS
 */
#g-footer{
    background-color: rgba(221,221,221,0.1);
    border-top: solid 1px #555;
}
.g-footer-element{
    margin: 5px 0;
    border: solid 1px #555;
    border-radius: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    /* Pull out the header and footer */
    #g-footer {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1030;
    }
    .g-footer-element{
        margin: 5px 10px;
    }
}

.g-footer-right{
    background-color: rgba(209,250,229,0.7);
}
.g-footer-wrong{
    background-color: rgba(254,226,226, 0.8);
}
#g-verify-container{
    background-color: white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 5px;
    border: 1px #CCC solid;
}
.night-mode #g-verify-container{
    background-color: #333;
    border: 1px #444 solid;
}
.bg-night{
    background-color: #333;
}
/*
#g-extra-help{
    border: 1px #CCC solid;
    margin-top: 20px;
}
#g-extra-help strong{
    color: #f92672;
}
*/
#g-extra-help .eh-box{
    padding: 10px 0;
    margin-bottom: 10px;
    border-radius: 5px;
}

.eh-k-components{
    font-size: 25px;
    padding: 15px 0;
}

.eh-box{
    background-color: #DDD;
}

.night-mode .eh-box{
    background-color: #555;
}

.write-game #result{
    font-size: 50px;
}
.write-game #verify{
     font-size: 50px;
 }
.write-game #g-question{
    font-size: 80px;
}
.choose-game #g-question{
    font-size: 80px;
}
.sentence {
    font-size: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.sentence-question {
    color: #f92672;
}
.sentence-question rt, .sentence-hide rt{
    display: none;
}

.game-pending-new{
    color: darkblue;
}
.game-pending-learning{
   color: darkred;
}
.game-pending-review{
    color: #1d643b
}

.night-mode .game-pending-new{
    color: lightblue;
}
.night-mode .game-pending-learning{
    color: lightcoral;
}
.night-mode .game-pending-review{
    color: lightgreen;
}

/* color coding */
.particles {
    color: #06c;
}
.translation {
    color: #46a546;
}
.onyomi {
    color: #f89406;
}
.component {
    color: #9d261d;
}

.kanji-input{
    font-size: 40px;
}

.kd_components img, .eh-k-components img{
    height: 30px;
}

#g-extra-help .key {
    color: #f92672;
    font-weight: bold;
    text-transform: uppercase;
}

#g-extra-help-mnemonic, #g-extra-help-story{
    font-size: 20px;
    background-color: #555;
    border-radius: 5px;
    padding: 10px 5px;
    margin: 20px 0 20px 0;
}

#g-extra-help-story{
    background-color: #557;
}
.eh-word, .eh-keyword, .eh-kanji{
    font-size: 30px;
}
.eh-word, .eh-kanji{
    margin-left: 20px;
    margin-bottom: 20px;
    background-color: #555;
    border-radius: 5px;
    display: inline-block;
}
.eh-word .jp, .eh-kanji .jp{
    background-color: #855;
    display: inline-block;
    padding: 10px 5px;
    border-radius: 5px 0 0 5px;
}
.eh-kanji .jp{
    background-color: #585;
}

.eh-word .eh-meaning, .eh-kanji .eh-meaning{
    padding: 10px;
}




#g-extra-help-mnemonic .key, #kanji-mnemonic .key{
    color: #D606A0;
    font-weight:bold;
    text-transform: uppercase;
}

#g-extra-help-mnemonic .key{
    text-transform: uppercase;
}

.night-mode #g-extra-help .key {
    color: #F9BBD2;
}

#g-extra-help .dmak-svg{
    background-color: #FFF;
}
#g-subquestion{
    padding-bottom: 20px;
    font-size: 20px;
}
@media (max-width: 575.98px) {
    .sentence {
        font-size: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .write-game #g-question{
        font-size: 30px;
    }
    .choose-game #g-question{
        font-size: 45px;
        padding: 30px 0 30px 0;
    }
    .write-game #result{
        font-size: 30px;
    }
    .write-game #verify{
        font-size: 30px;
    }
    #g-help{
        font-size: 12px;
    }
    .kanji-input{
        font-size: 30px;
    }
}
.tablet-device .btn-choose{
    min-height: 100px;
}



.ivl{
    border:solid #555 1px; padding: 5px 10px 5px 10px
}
.ivl-, .ivl- a:link, .ivl- a:visited{
    background-color: #FFFFFF;
    color: #AAA;
}
.ivl-0, .ivl-0 a:link, .ivl-0 a:visited{
    background-color: #FFFFFF;
    color: #555;
}
.ivl-1, .ivl-1 a:link, .ivl-1 a:visited{
    background-color: #E85C90;
    color: #FFF;
}
.ivl-2, .ivl-2 a:link, .ivl-2 a:visited{
    background-color: #EBA069;
    color: #FFF;
}
.ivl-3, .ivl-3 a:link, .ivl-3 a:visited{
    background-color: #EDE342;
    color: #555;
}
.ivl-4, .ivl-4 a:link, .ivl-4 a:visited{
    background-color: #A5CB59;
    color: #555;
}
.ivl-learned, .ivl-learned a:link, .ivl-learned a:visited{
    background-color: #5CB270;
    color: #FFFFFF;
}

.ivl-suspended, .ivl-suspended a:link, .ivl-suspended a:visited{
    background-color: #555;
    color: #FFFFFF;
}

.k-detail-reading strong{
    color: #A5CB59;
}

.k-detail-component img{
    max-height: 50px;
    margin-top:-10px
}