@font-face {
    font-family: 'OpenSans';
    src: url('OpenSans.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSans';
    src: url('OpenSans.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/*@font-face {
    font-family: 'OpenSans';
    src: url('OpenSans.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}*/
@font-face {
    font-family: 'OpenSans';
    src: url('OpenSans.svg#OpenSans') format('svg');
    font-weight: normal;
    font-style: normal;
}

body
{
    font-family: "OpenSans";
    font-size: 1rem;
    line-height: 1.2rem;
}

strong, b
{
    font-weight:bold;
}



h1
{
    font-size:1.4rem;
    margin-bottom:0.5rem;
    font-weight: bold;
}

h2
{
    font-size:1.2rem;
    margin-bottom:0.5rem;
    font-weight: bold;
}

h3
{
    font-size:1.0rem;
    margin-bottom:0.5rem;
    font-weight: bold;
}

p
{
    margin-bottom:1rem;
}

.tool__wrapper
{
    float:left;
    width:100%;
    height:100vh;
    background-color: #75CC75;
}

.tool_wrapper__logo_top
{
    position:absolute;
    left:0.5vw;
    top:0px;
    width:20vw;
}

.tool_wrapper__logo_bottom
{
    position:absolute;
    left:0vw;
    bottom:2vh;
    width:20vw;
}

.tool__fasenav
{
    position:absolute;
    left: 0.5vw;
    top:19vh;
    width: 20vw;
}



.tool__fasenav__button_wrapper_full_active
{
    display: flex;
    align-items: center;
    width:100%;
    background-color: #fff;
    margin-bottom:1rem;
    cursor:pointer;
}

.tool__fasenav__button_wrapper_full
{
    display: flex;
    align-items: center;
    width:100%;
    background-color: #dfecd6;
    margin-bottom:1rem;
    cursor:pointer;
}

.tool__fasenav__no
{


    width: calc(2.25vw - 0.5rem);
    padding-left: 0.5rem;
    padding-top: 0.5rem;
    height:2rem;
    font-weight: bold;
    font-size: 1.2rem;
    color: #314b95;


}

.tool__fasenav__button_icon
{


    width: calc(3.25vw - 0.5rem);
    height: calc(3.25vw - 0.5rem);
    background-size: contain;
    padding-left: 0.5rem;
    padding-top: 0.5rem;
    background-repeat:no-repeat;
    background-position:center;


}

.tool__fasenav__button_label
{


    width:calc(100% - 6.5vw);
    height:2rem;

    line-height: 1.4rem;
    padding:0.25rem;
    color: #314b95;
}



.tool__topbuttonbar__wrapper
{
    flex:1;
    position: absolute;
    top:4vh;
    right:12vw;

}

.tool__topbuttonbar__logboek_btn
{
    float:left;
    width:6.25vw;
}

.tool__topbuttonbar___divider
{
    float:left;
    width:0.81vw;
}


.tool__topbuttonbar__instellingen_btn
{
    float:left;
    width:8.4vw;
}

.tool__topbuttonbar__uitloggen_btn
{
    float:right;
    width:5.68vw;
}

.tool__topbuttonbar__popup_close_btn
{
    float:right;
    width:3vw;
    margin-top:3vh;
}

.fullscreen_btn
{
    position: absolute;
    width:2vw;
    right:3vw;
    top:4vh;
    cursor: pointer;

}


.tool__content__wrapper
{
    position:absolute;
    bottom:2.5vh;
    right:1.5vw;
    height:95vh;
    width:76vw;
    background-color: #fff;
    border-radius: 1rem;
}

.tool__content__page__wrapper
{
    float:left;
    width: calc(100% - 6rem);
    margin-top:6vh;
    margin-left:2rem;
    margin-right:1rem;
    height:calc(82vh - 4rem);
    overflow: auto;

}

.tool__content__page__content_teacher
{
    float:left;
    width:100%;
    margin-bottom:1rem;
    font-size: 1rem;
}

.tool__content__page__content_pupil
{
    float:left;
    width:100%;
    margin-bottom:1rem;
    font-size: 1.2rem;
    line-height: 1.4rem;
}

.tool__content__page__textarea, .tool__content__page__input
{
    font-size: 1rem;
    line-height: 130%;
    padding:0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius:  0.5rem;
    border-radius:  0.5rem;
    border: 1px solid #75CC75;
    background: #e9f7fe;
    margin-bottom:0.5rem;
    width:80%;
}

.tool__content__page__textarea
{
    height: 10rem;
}


.tool__content__login__wrapper
{
    float:left;
    width: calc(100% - 2rem);
    margin-top:6vh;
    margin-left:1rem;
    margin-right:1rem;
    height:calc(82vh - 4rem);
    overflow: auto;

}

.tool__content__login__content
{
    float:left;
    width:100%;
    margin-bottom:1rem;
}
.tool__content__login__input
{
    font-size: 1rem;
    line-height: 130%;
    padding:0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius:  0.5rem;
    border-radius:  0.5rem;
    border: 1px solid #75CC75;
    background: #e9f7fe;
    margin-bottom:0.5rem;
}

.location_select
{
    font-size:3rem;
    min-width:35vw;
}

a.button
{
    margin-top: 0.25rem;
    margin-right:1rem;
    min-height: 1.5rem;
    background-color: #75CC75;
    color: #ffffff !important;
    text-align: center;
    padding-top: 0.5rem;
    text-decoration: none !important;
    font-size: 1rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius:  0.5rem;
    border-radius:  0.5rem;
    border: solid 1px #75CC75;
    text-align: left;
    padding-left:  1rem;
    padding-right:1rem;

    display: inline-block;
    font-weight: bold;
}

a.button:hover
{
    background-color: #FFF;
    color: #75CC75 !important;
    border: solid 1px #75CC75;
}

a.button_session_selection
{

}

a.button_session_delete
{
    background-color: #FF0000;
    border-color:#FF0000;
}

a.button_session_delete:hover
{
    background-color: #FFF !important;
    color:#FF0000 !important;
    border-color:#FF0000 !important;
}

a.button_session_download
{

}



a.button_disabled
{
    background-color: #ccc;
    border: solid 1px #ccc;
}


a.button_toggle
{
    margin-top: 0.25rem;
    margin-right:1rem;
    min-height: 1.5rem;
    background-color: #75CC75;
    color: #ffffff !important;

    text-decoration: none !important;
    font-size: 1rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius:  0.5rem;
    border-radius:  0.5rem;
    border: solid 1px #75CC75;
    text-align: left;
    padding: 0.5rem 1rem;

    display: inline-block;
    font-weight: bold;
}

a.button_toggle:hover
{
    background-color: #FFF;
    color: #75CC75 !important;
    border: solid 1px #75CC75;
}


.error
{
    font-style: italic;
    color:#FF0000;
}



.tool__pagenavbar__wrapper
{
    position: absolute;
    left:22.65vw;
    top:90vh;
    width:75.39vw;
    height: 7.36vh;

}

.tool__pagenavbar__terug_btn
{
    position: absolute; /* t.o.v. parent */
    left:31.17vw;
    height:3.05vh;
    top:2.5vh;
}

.tool__pagenavbar__verder_btn
{
    position: absolute; /* t.o.v. parent */
    left:40.07vw;
    height:3.05vh;
    top:2.5vh;
}
.tool__pagenavbar__leerkracht_btn
{
    position: absolute; /* t.o.v. parent */
    left:54.92vw;
    height:3.88vh;
    top:2.08vh;
}

.tool__pagenavbar__background_btn
{
    position: absolute; /* t.o.v. parent */
    left:64.92vw;
    height:3.88vh;
    top:2.08vh;
}

.tool_pagenavbar__fase
{
    position: absolute; /* t.o.v. parent */
    left:36.09vw;
    height:6.25vh;
    top:0.41vh;
}


.tool__content__session__selection__wrapper
{
    float:left;
    width: calc(100% - 2rem);
    margin-top:6vh;
    margin-left:1rem;
    margin-right:1rem;
    height:calc(82vh - 4rem);
    overflow: auto;

}

.tool__content__session__selection__table
{
    float:left;
    width:100%;
    height: 40vh;
    overflow: scroll;
}

.tool__content__groupbuilder__wrapper
{
    float:left;
    width: calc(100%);

    /*height:calc(82vh - 4rem);*/
    overflow: auto;

}

.tool__content__groupbuilder__content
{
    float:left;
    width:calc(100% - 300px);
    margin-bottom:1rem;
}

.tool__content__groupbuilder__add_button_wrapper
{

    float:left;
}

.tool__content__groupbuilder__content__group__wrapper
{
    float:left;
    width:calc(100% - 200px);
    margin-bottom:0.5rem;
    background-color: #e9f7fe;
    /*height:calc(348px - 0.5rem);
    overflow:scroll;*/
}


.tool__content__groupbuilder__scroll_buttons_wrapper
{
    float:left;
    margin-left:20px;
}

.tool__content__groupbuilder__content__group
{

    float:left;
    width:252px;
    height:328px;
    border: 1px solid black;
    margin:0px;
    padding:0px;
    margin-right: 5px;
    background-color: #e9f7fe;
    color:#fff;
    position: relative;
}

.tool__content__groupbuilder__content__group_head
{
    position: absolute;
    top:0px;

    width:calc(100% - 1rem);
    height:25px;
    padding:0.5rem;
    background-color: #75CC75;
    opacity: 0.9;
    color:#000;
}
.tool__content__groupbuilder__content__group_image
{
    float: left;
    width:100%;
    height:165px;
}


.tool__content__groupbuilder__content__group__pupils
{
    float:left;
    width:100%;
    padding-top:5px;
    height:190px;
}





.tool__content__groupbuilder__content__nogroup__pupils
{
    float:left;
    width:calc(100% - 6px);
    padding:2px;
    border: 1px solid #000;
    height:156px;
    background-color: #e9f7fe;
}

.draggable_pupil_wrapper
{
    margin:0px;
    padding:0px;
    border:0px;
    position: relative;
    touch-action: none;

}

.draggable_pupil
{
    position:relative;
    float:left;
    width:75px;
    height:75px;
    margin:0px;
    padding:0px;
    margin-left:0px;
    margin-bottom:0px;
    background-color: #fff;

}
.draggable_pupil_name
{
    position: absolute;
    bottom:0;
    left:0;
    width:100%;

    height:15px;
    background-color: #75CC75;
    color:#000000;
    text-align: center;
    padding-top:4px;
}


.tool__content__location__wrapper
{
    float:left;
    width: calc(100% - 4rem);
    margin-left:1rem;
    margin-right:1rem;
    padding:1rem;
    background-color: #e9f7fe;
    border-radius:1rem;
}

.tool__content__location__content
{
    float:left;
    width:100%;
    margin-bottom:1rem;
}


.tool__content__pupil__wrapper
{
    float:left;
    width: calc(100% - 4rem);
    margin-top:1vh;
    margin-left:1rem;
    margin-right:1rem;
    padding:1rem;
    background-color: #e9f7fe;
    border-radius:1rem;
}

.tool__content__pupil__content
{
    float:left;
    width:100%;
    margin-bottom:1rem;
}



.tool__content__groupshow__wrapper
{
    float:left;
    width: calc(100% - 2rem);
    margin-top:2vh;
    margin-left:1rem;
    margin-right:1rem;
    /*height:calc(82vh - 4rem);*/
    overflow: auto;

}

.tool__content__groupshow__group
{
    float:left;
    width:200px;
    height:160px;
    margin:10px;

}

.tool__content__groupshow__group__label
{
    float: left;
    width:calc(100% - 1rem);
    padding:0.5rem;
    background-color: #75CC75;
    color:#000;
}


.tool__popup__wrapper
{
    z-index:10000;
    position:fixed;
    width:90vw;
    height:90vh;
    padding: 5vh 5vw;
    background-color: rgba(0,0,0,0.7);

    left:0px;
    top:0px;
}

.tool__popup__header
{
    float:left;
    width:calc(100% - 2rem);
    height:75px;
    background-color: #75CC75;
    padding-right:2rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    text-align: center;
    color:#fff;
}
.tool__popup__header h2
{
    font-size:2rem;
    line-height: 75px;
    display: inline-block;
}

.tool__popup__content
{
    float:left;
    width:calc(100% - 4rem);
    height:calc(90vh - 3rem - 75px);
    padding: 1rem 2rem 2rem;
    background-color: #fff;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    overflow: auto;
}

.tool__popup__close_btn
{
    margin-top:7px;
    float:right;
    width:50px;
}

.tool__formpopup__wrapper
{
    z-index:10000;
    position:fixed;
    width:50vw;
    height:50vh;
    padding: 25vh 25vw;
    background-color: rgba(0,0,0,0.7);

    left:0px;
    top:0px;
}

.tool__formpopup__header
{
    float:left;
    width:calc(100% - 2rem);
    height:65px;
    background-color: #75CC75;
    padding-right:2rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    text-align: center;
    color:#fff;
}
.tool__formpopup__header h2
{
    font-size:1.5rem;
    line-height: 65px;
    display: inline-block;
}

.tool__formpopup__content
{
    float:left;
    width:calc(100% - 4rem);
    height:calc(50vh - 3rem - 50px);
    padding: 1rem 2rem 2rem;
    background-color: #fff;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    overflow: auto;
}

.tool__formpopup__close_btn
{
    margin-top:7px;
    float:right;
    width:30px;
}


.tool__leerkrachtinfo__wrapper
{
    z-index:10000;
    position:fixed;
    width:90vw;
    height:90vh;
    padding: 5vh 5vw;
    background-color: rgba(0,0,0,0.7);

    left:0px;
    top:0px;
}

.tool__leerkrachtinfo__header
{
    float:left;
    width:calc(100% - 2rem);
    height:75px;
    background-color: #75CC75;
    padding-right:2rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    text-align: center;
    color:#fff;
}

.tool__leerkrachtinfo__header h2
{
    font-size:2rem;
    line-height: 75px;
    display: inline-block;

}


.tool__leerkrachtinfo__content
{
    float:left;
    width:calc(100% - 6rem);
    height:calc(90vh - 3rem - 75px - 75px);
    padding: 2rem 3rem 2rem;
    background-color: #e9f7fe;
    font-size:1.2rem;
    line-height: 2rem;



}

.tool__leerkrachtinfo__popup_close_btn
{
    margin-top:7px;
    float:right;
    width:50px;

}

.tool__leerkrachtinfonavbar__wrapper
{
    float:left;
    background-color: #e9f7fe;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    height:75px;
    width:100%;
}

.tool__leerkrachtinfonavbar__terug_btn
{
    position: absolute; /* t.o.v. parent */
    right:45%;
    height:50px;

}

.tool__leerkrachtinfonavbar__verder_btn
{
    position: absolute;
   left:55%;
    height:50px;

}

.tool__backgroundinfo__wrapper
{
    z-index:10000;
    position:fixed;
    width:90vw;
    height:90vh;
    padding: 5vh 5vw;
    background-color: rgba(0,0,0,0.7);

    left:0px;
    top:0px;
}

.tool__backgroundinfo__header
{
    float:left;
    width:calc(100% - 2rem);
    height:75px;
    background-color: #75CC75;
    padding-right:2rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    text-align: center;
    color:#fff;
}

.tool__backgroundinfo__header h2
{
    font-size:2.2rem;
    line-height: 75px;
    display: inline-block;

}


.tool__backgroundinfo__content
{
    float:left;
    width:calc(100% - 6rem);
    height:calc(90vh - 3rem - 75px - 75px);
    padding: 2rem 3rem 2rem;
    background-color: #e9f7fe;
    font-size:1.2rem;
    line-height: 2rem;


}

.tool__backgroundinfo__popup_close_btn
{
    margin-top:7px;
    float:right;
    width:50px;

}

.tool__backgroundinfonavbar__wrapper
{
    float:left;
    background-color: #e9f7fe;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    height:75px;
    width:100%;
}

.tool__backgroundinfonavbar__terug_btn
{
    position: absolute; /* t.o.v. parent */
    right:45%;
    height:50px;

}

.tool__backgroundinfonavbar__verder_btn
{
    position: absolute;
    left:55%;
    height:50px;

}

.qrcode_image
{
    float:left;
    width:20vw;
    height:20vw;
    min-height:200px;
    min-width:200px;
}

.ui_icon
{
    display: inline-block;
    width:2vw;
    margin:0.5rem;
}

.ui_icon_small
{
    display: inline-block;
    width:1.10vw;
    margin:0.15rem;
}


/*
 * Voor de tabellen werken we met div blokken, met de style html-tag wordt de hoogte van de table geregeld
 */

/*
 * locations
 */
.tool__locations__table
{
    float:left;
    width:100%;
    overflow: scroll;
}

.tool__locations__table__row
{

    padding: 0rem;
    margin:0.25rem;
    float:left;
    width:calc(20% - 0.5rem - 2px);
    height:120px;
    background-color: #fff;
}

.tool__locations__table__cell__is_active
{
    float:left;
    width:40px;
    padding:0.25rem;
}

.tool__locations__table__cell__image
{
    float:left;
    width:calc(100px);
    height:67px;
    padding:0.25rem;
}

.tool__locations__table__cell__title
{
    float:left;
    width:calc(100% - 1rem);
    padding:0.5rem;
    height:25px;
    background-color: #75CC75;
}

.tool__locations__table__cell__buttons
{
    float:left;

    padding:0.5rem;
}


/*
 * pupils
 */

.tool__pupils__table
{
    float:left;
    width:100%;
    overflow: scroll;
}

.tool__pupils__table__row
{
    margin:0.25rem;
    float:left;
    width:calc(16% - 0.5rem);
    background-color: #fff;
}

.tool__pupils__table__cell__is_active
{
    float:left;
    width:40px;
    padding:0.25rem;
}

.tool__pupils__table__cell__image
{
    float:left;
    width:calc(75px - 1rem);
    height:calc(75px - 1rem);
    padding:0.25rem;
}

.tool__pupils__table__cell__name
{
    float:left;
    width:calc(100% - 1rem);
    padding:0.5rem;
    height: 25px;
    background-color: #75CC75;
}

.tool__pupils__table__cell__buttons
{
    float:left;
    padding:0.5rem;
}

.location_select_location_wrapper
{
    float:left;
    margin:1rem;
    width:200px;
    border-radius:10px;
    border: solid 1px #75CC75;
    height: calc(150px + 2rem)
}

.location_select_location_img
{
    float:left;
    width:100%;
    height:150px;
    background-repeat: no-repeat;
}

.location_select_location_title
{
    float:left;
    width:100%;
    height:60px;
    text-decoration: none;
    color:#000;
    padding:0.25rem;
}

.pupil_select_pupil_wrapper
{
    float:left;
    margin:1rem;
    width:150px;
    border-radius:10px;
    border: solid 1px #75CC75;
    height: calc(150px + 2rem)
}

.pupil_select_pupil_img
{
    float:left;
    width:100%;
    height:150px;
    background-repeat: no-repeat;
}

.pupil_select_pupil_title
{
    float:left;
    width:100%;
    height:60px;
    text-decoration: none;
    color:#000;
    padding:0.25rem;
}

.logger_buttons
{
    float: left;
    padding:1rem;
    margin-bottom:1rem;
    margin-top:1rem;
    width: calc(100% - 2rem);
    border-top: 1px solid #ccc;
}

.logger__entry__wrapper
{
    float:left;
    border-radius:10px;
    border: solid 1px #75CC75;
    background-color: #FFF;
    padding:1rem;
    margin-bottom:1rem;
    margin-top:1rem;
    width: calc(100% - 2rem);

}

.logger__textarea, .logger__input
{
    font-size: 1rem;
    line-height: 130%;
    padding:0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius:  0.5rem;
    border-radius:  0.5rem;
    border: 1px solid #75CC75;
    background: #e9f7fe;
    margin-bottom:0.5rem;
    width:80%;
}


.tool__smallpopup__wrapper
{
    z-index:10000;
    position:fixed;
    width:100vw;
    height:100vh;
    background-color: rgba(0,0,0,0.7);

    left:0px;
    top:0px;
}

.tool__smallpopup__inner
{
    width:40vw;
    height:40vh;
    margin:auto;
    margin-top:25vh;

}

.tool__smallpopup__header
{
    float:left;
    width:calc(100% - 2rem);
    height:75px;
    background-color: #ef9c2c;
    padding-right:2rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    text-align: center;
    color:#fff;
}
.tool__smallpopup__header h2
{
    font-size:2rem;
    line-height: 75px;
    display: inline-block;
}

.tool__smallpopup__content
{
    float:left;
    width:calc(100% - 4rem);
    height:calc(40vh - 3rem - 75px);
    padding: 1rem 2rem 2rem;
    background-color: #fff;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    overflow: auto;
}

.tool__smallpopup__close_btn
{
    margin-top:7px;
    float:right;
    width:50px;
}