
body {
    color: #423906;
    background-color: #D3EDFB;

    text-align: center;
    -webkit-text-size-adjust: 100%;
}



a:link { color: #423906; }
a:visited { color: #423906; }


hr {
    clear: both;
}

h1{
    font-size: 1em;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: normal;
}
.myhead{
	text-align: left;
}
.myhead img{
	margin: 5px;
	cursor : pointer;
    float: left;
}

#cb_sound{
	font-size: 1em;
	max-height: 100%;
}

#q_title{
	font-size: 1em;
	margin: 0.25em 0em;
	max-height: 100%;

}


.myhide{
    display: none;
    /*
    visibility:hidden;
    */
}

#clear_panel {
    position: relative;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;


    width: 100%;
    height: 100%;

    font-size: 1em;
    color: #333333;

    background-color: #ff8ce8;

}

#clear_panel img{
    cursor : pointer;
    float: right;
    position: relative;
    top:4px;
    right: 4px;
}

#result_table{
    width: 100%;
    margin: 0 auto;
}
#result_table td:nth-of-type(odd){
    width: 55%;
    text-align: right;
    cursor : pointer;
}
#result_table td:nth-of-type(even){
    width: 45%;
    text-align: left;
    cursor : pointer;
}

#pnl_lvl{
    
    display: flex;
    /*flex-direction: column;*/
    flex-wrap:wrap;
    width: 100%;
    justify-content: center;
    align-items: center;

	margin: auto;
    margin-top: 0.5em;
    
}
#pnl_lvl .mybtn{
    width: 90%;
    
}

.mybtn{
    display: flex;
    
    justify-content: center;
    align-items: center;
    border: #639ef7 solid 2px;
    border-radius: 1em;
 
    padding-top: 0.25em;
    padding-bottom: 0.25em;

    user-select: none;
    font-size: 1.25em;
    margin: 0.25em;

    background-color: white;
    
    cursor : pointer;
}
.btn_lvl {
    background-color: #ecda30;
}
.btn_answerd {
	background-image: url("../img/check.png");
	background-repeat: no-repeat ;
	background-size:  auto;
	background-position: 12px center;
	background-color: #ddffbb;
}

#dmybtn{
	visibility:hidden;
}


.col_btn{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}
.col_btn .mybtn{
    border: #423906 solid 1px;

}
.col_btn .mybtn:first-child{
    display: none;
}
.col_btn .mybtn:last-child{
    width: 100%;

}


.btn_disable {
    background-color: grey;
}

.myrow{
    display: flex;
    flex-direction: row;
    

    width: 90%;
    font-size: 1.5em;
    max-width: 26em;

    margin: auto;
    align-items: center;
}
#text_Q{
    text-align: left;
    
    

    width: 100%;

    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding: 0.25em;

    
    border: #423906 solid 1px;
    background-color: white;

}
#btn_speak{
    display: block;
    margin: 5px;
	cursor : pointer;
}
