body{
    background-image: url('./img/back.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
.main {
    margin-top: 20px;
    font-size: 16px;
    background-color: #21618C;
    border-radius: 3vw;
    border: solid 2px #3498DB;
    box-shadow: black 0 0 5px;
    padding: 20px;
    background-color: rgba(33, 97, 140 , 0.4);
    backdrop-filter: blur(5px);
}



.title {
    font-size: 25px;
    text-shadow: rgba(0,0,50,1) 0 7px 10px;
    padding: 10px;
    text-align: center;

}

.btn_start{
    margin-top: 20px;
    min-width: 150px;
    background-color: #196F3D;
    border-radius: 1vw;
    border: solid 2px #58D68D;
    font-size: 18px;
    padding: 10px 15px 10px ;
    cursor: pointer;
    text-align: center;
}

.btn_load{
    margin-top: 15px;
    min-width: 150px;
    background-color: #9C640C;
    border-radius: 1vw;
    border: solid 2px #F4D03F;
    padding: 3px 5px 3px;
    cursor: pointer;
    text-align: center;
}

.about_section{
    margin-top: 30px;

}
.about_btn{
    margin-right: 5px;
    margin-left: 5px;
    background-color: #154360;
    border-radius: 1vw;
    border: solid 2px #1B4F72;
    padding: 3px 5px 3px;
    cursor: pointer;
    text-align: center;
}

.Copyright{
    margin-top: 10px;
    font-size: 14px;
}
.contact{
    margin-top: 20px;
    font-size: 12px;
    border: solid 2px #5DADE2;
    padding: 5px;
    cursor: pointer;
    border-radius: 1vw;
}

.exam_menu{
    background-color: #154360;
    padding: 15px;
    border-radius: 1vw;
}
.exam_menu_info{
    margin: 0 15px 10px;
    font-size: 14px;
}

.exam_menu_q{
    margin-top: 10px;
    font-size: 16px;
}
.exam_menu_q .keyword{
    font-weight: bold;
}

.exam_menu_answer{
    border: solid 2px #707B7C;
    border-radius: 1vw;
    margin: 10px;
    padding: 5px 15px 5px;
    box-shadow: black 0 0 5px;
    cursor: pointer;
}

.exam_menu_answer.yes{
    background-color: #145A32;
    border-color: #229954;
}

.exam_menu_answer.no{
    background-color: #78281F;
    border-color: #CB4335;
}

.results_menu{
    margin-top: 10px;
}

.results_menu_title{
    font-size: 18px;
}

.results_menu_row{
    font-size: 14px;
    background-color: #154360;
    border-radius: 1vw;
    padding: 10px;
    margin-top: 10px;
}

.results_menu_row.darker{
    filter: brightness(0.5);

}

.results_menu_lesion{

}

.results_menu_score{
    margin-right: 15px;
    font-size: 14px;
}

.progress_bar{
    margin-top: 5px;
}

.multi_option_notice{
    font-size: 14px;
    color: lightgray;
    margin-top: 5px
}
.multi_option {
    border: 0;
}

.multi_option.selected{
    border: 3px gold solid;
}


.dialog{
    background-color: #34495E;
    min-width: 250px;
    padding: 20px;
    border-radius: 1vw;
    border: 2px #D4AC0D solid;

}
.dialog .title{
    font-size: 20px;
    font-weight: bold;
    color: gold;
    align-items: center;
    text-shadow: rgba(0,0,0,1) 0 0px 0px;
}
.dialog .msg{
    margin-top: 10px;
    font-size: 16px;
    color: white;
    text-align: center;

}

.dialog .ok_button{
    background-color: #196F3D;
    padding: 5px;
    border: solid 2px #58D68D;
    border-radius: 1vw;
    box-shadow: black 0 0 5px;
    cursor: pointer;
    margin-top: 10px;
}

.dialog .close{
    max-width: 30px;
    max-height: 30px;
    margin-right: 5px;
    cursor: pointer;
}


.switch_box{
    margin-top: 3px;
    margin-bottom: 10px;
}
.switch{
    user-select: none;
    cursor: pointer;
    color: white;
    padding: 5px 10px 5px;
    background-color: #515A5A;
    box-shadow: black 0 0 5px;
    border-top-left-radius: 1vw;
    border-bottom-left-radius: 1vw;
    border: solid 2px  #515A5A;

}
.switch.right{
    margin-left: 1px;
    border-top-left-radius: 0vw;
    border-bottom-left-radius: 0vw;
    border-top-right-radius: 1vw;
    border-bottom-right-radius: 1vw;
}
.switch.on{
    background-color: #1D8348;
    border: solid 2px #2ECC71;

}

.ltr{
    direction: ltr;
}

.error{
    color: #E74C3C;
}


.lesion_list_scroll{
    padding: 20px;
    max-height: 500px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.lesion_list_input{
    margin-top: 10px;
    max-width: 300px;
}
.lesion_list_row{
    box-shadow: black 0 0 5px;
    padding: 10px;
    text-align: center;
    margin-top: 10px;
    border-radius: 1vw;

}
.lesion_list_row_en{
    font-size: 14px;
}
.lesion_list_row_fa{
    font-size: 14px;
}
.support_img{
    width: 25px;
    height: 25px;
    margin: 5px;
}

.support_btn{
    align-content: center;
    background-color: #1A5276;
    padding: 5px 10px 5px;
    border: dotted 2px #5DADE2;
    border-radius: 1vw;
    box-shadow: black 0 0 5px;
    cursor: pointer;
    margin: 10px;
}

.load_button{
    margin-top: 10px;
    background-color: #145A32;
    padding: 5px 10px 5px;
    border: solid 2px #239B56;
    border-radius: 1vw;
    box-shadow: black 0 0 5px;
    cursor: pointer;
}

.btn_end{
    margin-top: 10px;
    background-color: #212F3C;
    padding: 5px 10px 5px;
    border: solid 2px #943126;
    border-radius: 2vw;
    font-size: 12px;
    box-shadow: black 0 0 5px;
    cursor: pointer;
}

.dialog .msg.warning{
    color: #F5B041;
}