html {
    font-family: 'leo_body_font', Arial, sans-serif;
    font-size: 1rem;

    color: #000;
}

strong, b
{
    font-weight: bold;
}

@media screen and (max-width: 680px) {

}

@media screen and (min-width: 1280px) {
html
{
    font-size:1.2rem;
}
}

@media screen and (min-width: 1400px) {
    html
    {
        font-size:1.4rem;
    }
}






h1, h2, h3 {
    font-family: 'leo_head_font', Arial, sans-serif;
    font-weight: bold;
}

h1 {
    font-size: 2rem;
    color:#642382;
    float:none;
    clear:left;
}

h2 {
    font-size: 1.4rem;
    margin-bottom:0.5rem;
}

h3 {
    font-size: 1.2rem;
}

h1.lesson_title
{
    margin-top:4vh;
    font-size:4.5vh;
}

body {
    background-color: #fff;
    margin:0;
    line-height: 1.5rem;
}
label{
    line-height: 1.5rem;
}
a.leo_button
{
    background-color: #c8005a;
    color:#fff;
    text-align: center;
    font-family: leo_head_font;
    text-decoration: none;
    border-radius: 1.5rem;
    padding-left:2rem;
    padding-right:2rem;
    font-size: 1rem;
    margin-left:1rem;
    margin-right:1rem;
    padding-top:0.25vh;
    padding-bottom:0.25vh;
}

a.leo_button_dashboard_big
{
    background-color: #c8005a;
    color:#fff;
    text-align: center;
    height:3vh;
    width:3vh;
    border-radius:calc(1.5vh + 0.5rem);
    padding:0.5rem;
    margin-left:0.5rem;
    margin-bottom:0.5rem;
    display: inline-block;
    float:left;
    background-image: url("/player/assets/images/research.svg");
    background-size: contain;
}


a.leo_button_dashboard_medium
{
    background-color: #c8005a;
    color:#fff;
    text-align: center;
    height:0.8rem;
    width:0.8rem;
    border-radius:calc(0.4rem + 0.4rem);
    padding:0.4rem;
    margin-right:0.5rem;

    display: inline-block;
    float:left;

    background-image: url("/player/assets/images/research.svg");
    background-size: contain;
}

a.leo_button_dashboard_small
{
    background-color: #c8005a;
    color:#fff;
    text-align: center;
    height:1vh;
    width:1vh;
    border-radius:calc(0.5vh + 0.5rem);
    padding:0.5rem;
    margin-left:0.5rem;
    display: inline-block;
    float:left;
    margin-bottom:0.5rem;
    background-image: url("/player/assets/images/research.svg");
    background-size: contain;
}


a.leo_button:disabled,
a.leo_button[disabled]{
    border: 1px solid #999999;
    background-color: #cccccc;
    color: #666666;
    font-family: leo_head_font;
}

a.leo_button_small
{
    background-color: #c8005a;
    color:#fff;
    text-align: center;
    font-family: leo_head_font;
    text-decoration: none;
    border-radius: 1.5rem;
    padding-left:1rem;
    padding-right:1rem;
    font-size: 1rem;
    margin-left:0.25rem;
    margin-right:0.25rem;
    padding-top:0.15vh;
    padding-bottom:0.15vh;
}


a.leo_button_previous
{
    float:left;
}
a.leo_button_next
{
    float:right;
}

a.leo_button_edit
{
    float:right;
}

#leo_player_wrapper
{
    width:calc(100% - 4rem);
    margin-left:auto;
    margin-right:auto;
    max-width: 1400px;
}

.player__wrapper
{



}

.player__header {
    float:left;
    width: calc(100% - 3rem);

    background-color: #fff;

    height:calc(13.5vh - 1.5vh);
    padding-top:1.5vh;
    padding-left:1.5rem;
    padding-right:1.5rem;

    margin-left:auto;
    margin-right:auto;
    max-width: 1400px;
    z-index:1000;




}

.player__footer {
    float:left;
    width: calc(100% - 1.2rem);
    padding:0.5rem;
    background-color: #fff;


    margin-left:auto;
    margin-right:auto;
    max-width: 1400px;
    padding-top:0.5vh;
    padding-bottom:0.5vh;
    height:calc(5.5vh - 0.2rem);
    border: 0.1rem solid;

    border-radius: 0 0  1rem 1rem;
}

.player__content
{
    float:left;
    padding:1rem;
    padding-top:15px;
    padding-bottom:1vh;
    width: calc(100% - 2.2rem);
    height:calc(74vh -  0.1rem - 15px);
    background-color: #fff;
    border: 0.1rem solid;

    border-radius: 1rem 1rem 0 0;
    overflow: hidden;
    border-bottom:0;
}

/* nu de exercise grids op basis van de afbeelding */
.lessonpart__right_10
{
    display: grid;
    grid-template-columns: 9fr 1fr;
    grid-template-areas: "lessonpart_content_area lessonpart_image_area";
}
.lessonpart__right_25
{
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-areas: "lessonpart_content_area lessonpart_image_area";
}
.lessonpart__right_33
{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "lessonpart_content_area lessonpart_image_area";
}

.lessonpart__right_40
{
    display: grid;
    grid-template-columns: 6fr 4fr;
    grid-template-areas: "lessonpart_content_area lessonpart_image_area";
}

.lessonpart__right_50
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "lessonpart_content_area lessonpart_image_area";
}

.lessonpart__right_60
{
    display: grid;
    grid-template-columns: 4fr 6fr;
    grid-template-areas: "lessonpart_content_area lessonpart_image_area";
}

.lessonpart__right_66
{
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas: "lessonpart_content_area lessonpart_image_area";
}

.lessonpart__right_75
{
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "lessonpart_content_area lessonpart_image_area";
}

.lessonpart__left_10
{
    display: grid;
    grid-template-columns: 1fr 9fr;
    grid-template-areas: "lessonpart_image_area lessonpart_content_area";
}

.lessonpart__left_25
{
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "lessonpart_image_area lessonpart_content_area";
}

.lessonpart__left_33
{
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas: "lessonpart_image_area lessonpart_content_area";
}

.lessonpart__left_40
{
    display: grid;
    grid-template-columns: 4fr 6fr;
    grid-template-areas: "lessonpart_image_area lessonpart_content_area";
}

.lessonpart__left_50
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "lessonpart_image_area lessonpart_content_area";
}

.lessonpart__left_60
{
    display: grid;
    grid-template-columns: 6fr 4fr;
    grid-template-areas: "lessonpart_image_area lessonpart_content_area";
}

.lessonpart__left_66
{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "lessonpart_image_area lessonpart_content_area";
}

.lessonpart__left_75
{
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-areas: "lessonpart_image_area lessonpart_content_area";
}





/* deze is altijd het zelfde aangezien de gridcontainer het verder regelt */
.lessonpart__content
{

    width: 98%;
    padding-left:1%;
    padding-right:1%;
    background-color: #fff;
    grid-area: lessonpart_content_area;
}

.lessonpart__image
{
    width: 100%;
    background-color: #fff;
    grid-area: lessonpart_image_area;
    overflow: hidden;
}

.leo_lesson_part_title
{
    color:#cc396f;
}

.leo_lesson_part_intro
{
    color:#641c76;
    font-family: leo_head_font;

}

.lessonpart__exercise_wrapper_100
{
    float:left;
    width:100%;


    margin-bottom:0.5rem;
}

.lessonpart__exercise_wrapper_75
{
    float:left;
    width:74%;
    margin-right:1%;
    margin-bottom:0.5rem;
}

.lessonpart__exercise_wrapper_66
{
    float:left;
    width:65%;
    margin-right:1%;
    margin-bottom:0.5rem;
}

.lessonpart__exercise_wrapper_50
{
    float:left;
    width:49%;
    margin-right:1%;
    margin-bottom:0.5rem;
}

.lessonpart__exercise_wrapper_33
{
    float:left;
    width:32%;

    margin-right:1%;
    margin-bottom:0.5rem;
}

.lessonpart__exercise_wrapper_25
{
    float:left;
    width:24%;

    margin-right:1%;
    margin-bottom:0.5rem;
}

p.exercise_question
{
    color:#641c76;
    padding-top:0.2rem;

    margin-bottom:0.2rem;
    clear: both;
}

p.questionset__question
{
    color:#641c76;
    padding-top:0.2rem;

    margin-bottom:0rem;
    clear: both;
}

p.exercise_waarom
{
    color:#641c76;
    padding-top:0.2rem;

    margin-bottom:0rem;
    clear: both;
}

.image_choice__half
{
    float:left;
    margin:1%;
    width:48%;
    border: 1px solid #c8005a;
    border-radius: 20px;
}

.image_choice__third
{
    float:left;
    margin:1%;
    width:31%;
    border: 1px solid #c8005a;
    border-radius: 20px;
}

.image_choice__fourth
{
    float:left;
    margin:1%;
    width:23%;
    border: 1px solid #c8005a;
    border-radius: 20px;
}


.table_input__container
{

}

.table_input__row
{
    float:left;
    width:100%;

}

.table_input__cell
{
    float:left;

}

.table_input__cell_header
{
    font-weight: bold;
    background-image: url("./../images/back_groen.svg");
    background-size: cover;
}

.table_input__cell_number, .table_input__cell_euro, .table_input__cell_input, .table_input__cell_textarea
{
    float:left;
    background-image: url("./../images/back_grijs.svg");
    background-size: cover;
}

.exercise_feedback
{
    float:left;
    width:90%;

}

.exercise_feedback img
{
    float:left;
    height:60vh;
}

input[type=text]
{
    font-size:1rem;
}

input[type=number]
{
    font-size:1rem;
}

textarea
{
    font-size: 1rem;
}



input[type=checkbox] {
    /* Double-sized Checkboxes */
    -ms-transform: scale(1.5); /* IE */
    -moz-transform: scale(1.5); /* FF */
    -webkit-transform: scale(1.5); /* Safari and Chrome */
    -o-transform: scale(1.5); /* Opera */
    transform: scale(1.5);
    padding: 10px;
    padding-left: 0px;
    margin-right: 10px;

}

input[type=radio] {
    /* Double-sized radio */
    -ms-transform: scale(1.5); /* IE */
    -moz-transform: scale(1.5); /* FF */
    -webkit-transform: scale(1.5); /* Safari and Chrome */
    -o-transform: scale(1.5); /* Opera */
    transform: scale(1.5);
    padding: 10px;
    padding-left: 0px;
    margin-right: 10px;

}


.niveau
{
    height:11vh;
    width: 11vh;
    background-image: url("./../images/niveau.svg?v=2");
    background-repeat: no-repeat;
    background-size: contain;
    float:right;
    display:flex;
    align-items: center;
    justify-content: center;
    font-size: 6vh;
    color: #fff;
    font-family: leo_head_font;
    padding-top:1vh;
    padding-left:0.1rem;
}

input[type=text].input_name, input[type=text].input_secret
{
    margin-left:10%;
    width:80%;
    text-align: center;
    font-size:4vh ;
    line-height:4vh;
    font-weight: bold;
    border-radius:0.5rem;
    border-color:#000;
    border-style: solid;
}

input[type=text].input_wordweb
{
    font-size:1.8rem;
    margin:0.1rem;
}

.input-symbol-euro {
    position: relative;
}
.input-symbol-euro input {
    padding-left:18px;
}
.input-symbol-euro:before {
    position: absolute;
    top: 0;
    content:"€";
    left: 5px;
}

.login_err
{
    width:100%;
    margin-top:0.5rem;
    margin-bottom:0.5rem;
    text-align: center;
    font-family: leo_body_font;
    font-size:1.5rem;
    color:#FF0000;
}

a.leo_button_undo
{
    background-color: #c8005a;
    color:#fff;
    text-align: center;
    height:0.8rem;
    width:0.8rem;
    border-radius:calc(0.4rem + 0.4rem);
    padding:0.4rem;
    margin-right:0.5rem;
    margin-left:0.5rem;
    display: inline-block;


    background-image: url("/player/assets/images/undo.svg");
    background-size: contain;
}

a.leo_button_trash
{
    background-color: #c8005a;
    color:#fff;
    text-align: center;
    height:0.8rem;
    width:0.8rem;
    border-radius:calc(0.4rem + 0.4rem);
    padding:0.4rem;
    margin-right:0.5rem;
    margin-left:0.5rem;
    display: inline-block;


    background-image: url("/player/assets/images/trash.svg");
    background-size: contain;
}

#leo_details_popup {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index:100000;
}


#leo_details_popup_content_wrapper
{
    border-radius: 1rem;

    width:calc(100% - 4rem);
    max-width:1440px;
    margin-left:auto;
    margin-right:auto;
    margin-top:5vh;
    height:80vh;
    padding:2rem;
    padding-top:1rem;
    background-color: #fff;
}

.dashboard_paars
{

    background-image: url("./../images/back_paars.svg");
    background-size: cover;
}

.dashboard_groen
{

    background-image: url("./../images/back_groen.svg");
    background-size: cover;
}

.dashboard_grijs
{

    background-image: url("./../images/back_grijs.svg");
    background-size: cover;
}

.dashboard_roze
{

    background-image: url("./../images/back_roze.svg");
    background-size: cover;
}



.dashboard_name
{
    font-weight: bold;
    color: #cc396f;
}