:root {
    --bodybackground: aliceblue;
    --errorcolor: orangered;
    --headingcolor: cornflowerblue;
    --firstlevelcolor: wheat;
    --secondlevelcolor: khaki;
    --backgroundcolor: #f0f5ff;
    --backgroundcolor2: #aec9ff;
    --bookheading: saddlebrown;
}

html {
    height: 100%; /*zie displayframediv, #displaysmallframediv, #displaywaitframediv*/
    width: 100%; /*zie displayframediv, #displaysmallframediv, #displaywaitframediv*/
    /*overflow-x: hidden*/
}

.error {
    background-color: var(--errorcolor) !important;
}

.errorlabel {
    color: var(--errorcolor) !important;
}

.information {
    display: block;
    background-color: var(--headingcolor);
    color: white;
    padding: 10px;
    margin-top: 10px;
    margin-left: 10px;
    font-size: larger;
}

.notinuse .oldlinkheading {
    background-image: url("../images/Givi_logo.jpg");
    background-repeat: no-repeat;
    height: 95px;
    background-color: var(--headingcolor);
}

.notinuse .oldlinkdiv {
    background-color: var(--headingcolor);
    height: 70%;
    width: 70%;
    margin: auto;
    top: 15%;
    position: absolute;
    color: white;
    font-size: x-large;
    left: 15%;
}

.notinuse .oldlinkdiv span {
    display: block;
    height: 33%;
    align-content: center;
    text-align: center;
    border-bottom: 1px solid;
}

.notinuse .oldlinkdiv span a {
    color: white;
}

.maintenance .maintenanceheading {
    background-image: url("../images/Givi_logo.jpg");
    background-repeat: no-repeat;
    height: 95px;
    background-color: var(--headingcolor);
}


.maintenance img {
    position: fixed;
    bottom: 0px;
    right: 0px;
    height: 225px;
    z-index: -1;
}

.maintenance .maintenancediv {
    background-color: var(--headingcolor);
    height: 50%;
    width: 50%;
    margin: auto;
    top: 25%;
    position: absolute;
    color: white;
    font-size: x-large;
    left: 25%;
}

.maintenance span {
    display: block;
    height: 33%;
    align-content: center;
    text-align: center;
    border-bottom: 1px solid;
}


body {
    height: 100%; /*zie displayframediv, #displaysmallframediv, #displaywaitframediv*/
    min-height: 98%; /*zie displayframediv, #displaysmallframediv, #displaywaitframediv*/
    background-color: #FFF;
    position: relative;
    font-size: 12px;
    overflow: hidden;
    background-color: var(--bodybackground);
}

form {
    height: 100%;
    overflow: auto
}

#contentplaceholder {
    height: 100%;
    position: absolute;
    width: 100%;
}

.contentjpanelhead {
    color: var(--headingcolor);
    font-size: large !important;
    min-height: 30px !important;
    line-height: 30px !important;
    margin-left: 10px !important;
}

a {
    text-decoration: none;
}

.loginbox {
    position: relative;
    top: 75px;
    right: 5px;
    float: right;
}

.authorisationbox {
    display: block;
    width: 400px;
    margin: auto;
    background-color: var(--backgroundcolor2);
    height: 125px;
    border: 1px solid;
    line-height: 25px;
    top: 15%;
    position: relative;
    padding: 10px;
}

.displaywaitframetable {
    height: 100%;
    width: 100%;
    top: 0%;
}

/*menu*/
.usermenu {
    position: fixed;
    /* width: 100%; */
    height: 67px;
    left: 5px;
    top: 5px;
    background-color: var(--headingcolor);
    line-height: 50px;
    border-radius: 15px;
    /* margin-left: 10px; */
    /* margin-right: 65px; */
    right: 5px;
}

.usermenu .version, .courseselection .version {
    position: absolute;
    top: 25px;
    left: 25px;
    font-size: xx-small;
    color: white;
    font-style: italic;
}

.courseselection .version {
    bottom: 0px;
    left: 76%;
    top: 35px;
    color: var(--headingcolor);
}

.loggedinuser {
    right: 10px;
    position: absolute;
    background-color: var(--firstlevelcolor);
    top: 15px;
    line-height: 2em;
    border-radius: 5px;
    padding: 0px 10px;
    color: var(--headingcolor);
    font-size: large;
}

.mainframepanel {
    position: fixed;
    top: 75px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.mainframe {
    width: 100%;
    height: 100%;
    border: 0px;
}

.menuitem {
    color: white;
    width: auto;
    display: inline-block;
    font-size: x-large;
    margin-left: 25px;
    text-decoration: none;
}

.menuitem:after {
    content: "|";
    color: gainsboro;
    margin-left: 15px;
}

.menuMyScenarios:after {
    content: "";
}


/*openlibrary*/
.logonlibrary {
    background-color: var(--backgroundcolor2);
    border: 1px solid var(--headingcolor);
    display: block;
    width: 30%;
    left: 35%;
    top: 10%;
    position: absolute;
    height: 30%;
}

    .logonlibrary .loginbox {
        top: 40px;
        margin: auto;
        float: initial;
        right: initial;
        left: 5%;
        width: 100%;
        position: inherit;
    }

        .logonlibrary .loginbox span {
            margin-right: 10px;
        }

        .logonlibrary .loginbox input#txtFullname {
            width: 80%;
        }

    .logonlibrary .tobooksbutton {
        display: block;
        position: absolute;
        top: 50%;
        width: 40%;
        left: 30%;
        color: var(--headingcolor);
        background-color: var(--backgroundcolor);
    }


/*books*/
.books .loginbox {
    top: 0px;
    background-color: var(--headingcolor);
    float: initial;
    height: 60px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0px;
    padding-right: 0px;
    width: 80%;
    left: 10%;
}

.library {
    margin-top: 10px;
    width: 80%;
    margin: auto;
    background-image: url("img/library/shelve.png");
    background-repeat: repeat;
    display: block;
    position: absolute;
    top: 30px;
    left: 10%;
    bottom: 10px;
    border-top: 4px white solid;
}

.book {
    width: 140px;
    background-repeat: no-repeat;
    height: 118px;
    /* background-color: var(--backgroundcolor); */
    background-color: white;
    background-position-x: 85px;
    background-position-y: 60px;
    float: left;
    margin-right: 20px;
    margin-top: 10px;
    margin-left: 5px;
    margin-bottom: 7px;
    cursor: pointer;
    background-size: 50%;
}

    .book .heading {
        line-height: 30px;
        font-size: 21px;
        padding-left: 5px;
        font-style: italic;
        background: var(--firstlevelcolor);
    }

        .book .heading span {
            background: var(--firstlevelcolor);
            color: var(--bookheading);
        }

    .book .detail span {
        color: black;
        font-size: 15px;
        padding-left: 5px;
        font-style: italic;
    }

        .book .detail span.switchlang {
            display: none;
        }

/*player*/
.player {
    background-color: dimgray
}

    .player iframe {
        height: 95%;
        display: block;
        width: 700px;
        margin-top: 75px;
        /* background-color: whitesmoke; */
        border: 0px;
        margin: auto;
        padding: 25px;
        background-image: url(../images/player_background.png);
        background-size: contain;
        padding-left: 75px;
    }

    .player #buttons {
        position: fixed;
        background-color: aliceblue;
        height: 55px;
    }

        .player #buttons a {
            display: inline-block;
            width: 50px;
            background-color: cornflowerblue;
            margin-left: 3px;
            text-align: center;
            color: white;
            font-size: x-large;
            text-decoration: none;
            height: 50px;
            line-height: 50px;
        }


.selectcourse .loginbox {
    position: absolute;
    top: 6px;
    right: 0px;
    /* float: right; */
    margin-left: 14px;
    /* width: 100%; */
    left: 65px;
    height: 55px;
    /* background-color: red; */
}

.loginbox span, .pnllogin span, .authorisationbox span {
    color: white;
    /*    font-size: large;*/
}

.selectcourse .loginbox span, .saveselection .loginbox span, .pnllogin span, .authorisationbox span {
    font-size: large;
}

.authorisationbox span {
    width: 120px;
    display: inline-block;
}

.saveselection .loginbox {
    top: 0px;
    background-color: var(--headingcolor);
    padding: 5px;
    float: initial;
    right: 0px;
    height: 60px;
}

    .saveselection .loginbox input, .books .loginbox input {
        display: inline-block;
        width: 19%;
        margin-bottom: 10px;
    }

    .saveselection .loginbox span, .books .loginbox span {
        display: inline-block;
    }

    .saveselection .loginbox #lblVia, .saveselection .loginbox #txtVia {
        display: none;
    }

.saveselection .overview {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

.saveselection #pnlselected {
    position: absolute;
    top: 75px;
    left: 0px;
    right: 0px;
    /* height: 50%; */
    overflow: auto;
    border: 1px solid;
    border: var(--headingcolor) 1px solid;
    bottom: 40%;
}


.pnllogin {
    background-color: var(--headingcolor);
    padding-left: 5px;
    min-height: 50px;
    padding-top: 20px;
}

.login .pnllogin span {
    margin-right: 5px
}

.login .pnllogin input#txtEmail {
    width: 80%;
}

/*.pnldata {
    border: var(--headingcolor) 3px solid;
    margin-top: 10px;
    padding: 5px;
    min-height: 240px;
    position: fixed;
    width: 90%;
    height: 60%;
}*/

.pnldata span, .pnldata input {
    color: var(--headingcolor);
    font-weight: bold;
}

.saveselection #txtFullname, .saveselection #txtCompany, .saveselection #txtPhone, .saveselection #txtEmail,
.selectcourse #txtFullname, .selectcourse #txtCompany, .selectcourse #txtVia, .selectcourse .selectedtime {
    display: block;
    font-size: medium;
    background-color: var(--backgroundcolor);
    color: var(--headingcolor);
    font-weight: bold;
    font-style: italic;
    border-radius: 7px;
    width: 23%;
    z-index: 4000;
    position: absolute;
}

.selectcourse #txtCompany {
    left: 25%;
}

.selectcourse #txtVia {
    left: 50%;
}

.saveselection #txtEmail {
    left: 25%
}

.saveselection #txtCompany {
    left: 50%
}

.saveselection #txtPhone {
    left: 75%
}


.selectcourse .loginbox#txtFullname {
    top: 23px;
    left: 0px;
}

.selectcourse .loginbox#txtCompany {
    top: 23px;
    left: 25%;
}

.selectcourse .loginbox#txtVia {
    top: 23px;
    left: 50%;
}

.selectcourse .loginbox #lblFullName {
    position: relative;
    top: 0px;
    z-index: 4000;
}

.selectcourse .loginbox #lblCompany {
    position: absolute;
    top: 0px;
    left: 25%;
    z-index: 4000;
}

.selectcourse .loginbox #lblVia {
    position: absolute;
    top: 0px;
    left: 50%;
    z-index: 4000;
}

.saveselection .loginbox #lblEmail {
    position: absolute;
    top: 5px;
    left: 25%;
    z-index: 4000;
}

.saveselection .loginbox #lblCompany {
    position: absolute;
    top: 5px;
    left: 50%;
    z-index: 4000;
}

.saveselection .loginbox #lblPhone {
    position: absolute;
    top: 5px;
    left: 75%;
    z-index: 4000;
}







.selectcourse .pnlinfo {
    visibility: hidden
}

.displaylanguage {
    top: 10px;
    display: block;
    z-index: 4000;
    position: absolute;
    right: 25px;
    font-size: medium;
    background-color: var(--backgroundcolor2);
    color: var(--headingcolor);
    font-weight: bold;
    font-style: italic;
    width: 320px;
    border-radius: 5px;
}

.pnldata {
    border: var(--headingcolor) 3px solid;
    margin-top: 10px;
    padding: 5px;
    min-height: 240px;
}

    .pnldata input {
        width: 97%;
        margin-top: 1px;
    }

    .pnldata span {
        margin-top: 10px;
    }

#btnNew, #btnRegister, #btnConfirm {
    display: block;
    width: 95%;
    border: 0px;
    margin-top: 15px;
    background-color: var(--headingcolor);
    float: right;
    border-radius: 15px;
    font-size: x-large;
    margin-right: 1%;
    padding-right: 0%;
    padding-top: 1%;
    padding-bottom: 1%;
    text-align: center;
    box-sizing: content-box;
    color: white;
    position: absolute;
    bottom: 1px;
}

.pnlbottombutton {
}


#lblUserFound, #lblNotRegistered {
    display: block;
    color: var(--headingcolor);
    border-bottom: var(--headingcolor) solid 3px;
    font-size: larger;
    font-style: italic;
    font-weight: bolder;
}

#lblMissinginformation, #lblNotVerified, #lblUserNotFound, #lblWrongpassword {
    display: block;
    color: var(--errorcolor);
    font-size: larger;
    font-style: italic;
    font-weight: bolder;
    width: 100%
}


.courseselection {
    background-color: var(--headingcolor);
    position: absolute;
    top: 0%;
    height: 100px;
    padding: 5px;
    display: block;
    left: 0px;
    right: 0px;
    background-image: url("../images/Givi_logo.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    padding-left: 80px;
}


    .courseselection select, .courseselection span {
        width: 24%;
        margin-right: 1%;
        display: inline-block;
        border-radius: 7px;
        top: 50px;
        position: relative;
    }

    .courseselection span {
        font-size: large;
        color: white;
    }

    .courseselection select, .showscenario .cbopencalendar, .showscenario .cbshowasimage, .showscenario .ddlstatus, .showscenario .enddate, .filterblock select {
        padding-left: 10px;
        color: var(--headingcolor);
        font-weight: bold;
        font-size: initial;
    }

.showscenario .cbopencalendar {
    bottom: 73px;
    position: fixed;
    left: 71%;
    right: 8px;
    padding-left: 0px;
}

.showscenario .cbshowasimage {
    bottom: 73px;
    position: fixed;
    /*left: 80%;*/
    right: 8px;
    padding-left: 0px;
}

.showscenario .ddlstatus {
    /* height: 5%; */
    /* width: 100%; */
    /* margin-top: 1%; */
    bottom: 45px;
    position: fixed;
    left: 71%;
    right: 8px;
}

.showscenario .enddate {
    bottom: 45px;
    position: fixed;
    right: 8px;
    width:170px;
    display:none;
    height:15px;
}

.ddlstatus:has(option[value="1"]:checked) ~ .enddate {
    display: inline-block;
    width: 170px;
}

.ddlstatus:has(option[value="1"]:checked) {
    display: inline-block;
    right: 200px;
}

.courseselection span:last-of-type, .courseselection select:last-of-type {
    display: none;
}

.chapterselection {
    display: inline-flex;
    position: absolute;
    top: 110px;
    bottom: 0px;
    width: 100%
}

.chapterselectionpanel {
    width: 100%
}

#ShowChapters {
    display: none;
}





@media screen and (max-width: 16000px) and (min-width: 1001px) {
    .scrolllinks {
        background-color: var(--backgroundcolor);
        height: 90%;
        overflow: auto;
        /*border: #0000cc 1px solid;*/
        padding-left: 0px;
        padding-top: 5px;
        width: 55%;
        float: left;
        margin-right: 1%;
    }


    .scrollrechts, .paneloverview {
        background-color: var(--backgroundcolor);
        height: 50%;
        overflow: auto;
        padding-left: 0px;
        padding-top: 5px;
        width: 41%;
        margin-top: 5px;
        border-radius: 22px;
        border: solid 1px darkgray;
        padding: 10px;
        /*padding-left: 2%;
        padding-top: 1%;
        padding-bottom: 1%;*/
    }

    .filterpanel {
        width: 54%;
        margin-top: 4px;
        border: 1px solid darkgray;
    }
}


@media screen and (max-width: 1000px) and (min-width: 0px) {
    body {
        overflow: hidden;
    }

    .scrolllinks {
        background-color: var(--backgroundcolor);
        /* height: 100%; */
        /* overflow: auto; */
        /* border: #0000cc 1px solid; */
        padding-left: 0px;
        padding-top: 5px;
        /* width: 95%; */
        /* float: left; */
        /* margin-right: 1%; */
    }

    .scrollrechts, .paneloverview {
        background-color: var(--backgroundcolor);
        /* height: 50%; */
        /* overflow: auto; */
        /* width: 41%; */
        margin-top: 5px;
        border-radius: 22px;
        border: solid 1px darkgray;
        padding-left: 2%;
        padding-top: 1%;
        padding-bottom: 1%;
        position: fixed;
        bottom: 40px;
        top: 60%;
        overflow: scroll;
        left: 50%;
        right: 0px;
    }

    .selectcourse .chapterselectionpanel #btnSubmit {
        position: fixed;
        bottom: 1px;
        right: 0px;
        top: initial;
        height: 5px;
        left: 50%;
        width: auto;
    }

    .filterpanel {
        width: auto;
        margin-top: 4px;
        border: 1px solid darkgray;
    }
}

/*.filter {
    width: 50%;
    display: block;
    position: fixed;
    border: 2px solid var(--firstlevelcolor);*/
/* background-color: var(--firstlevelcolor); */
/*top: 3px;
    padding: 3px;
}*/

.savebutton, .submitbutton, .btnsearch, .btncancel, .btnok, .btnnok, .selectscenariobutton, .newscenariobutton, .editbutton, .logbutton, .mailbutton, .printbutton, .tobooksbutton,
.markactivebutton, .marktreatedbutton, .markclosedbutton, .markdeletedbutton, .btnselect, .exportbutton, .excelsheetbutton, .printmultiplebutton {
    cursor: pointer;
    color: white;
}

    .savebutton[disabled].submitbutton[disabled], .btnsearch[disabled], .btnok[disabled], .btncancel[disabled], .selectscenariobutton[disabled], .newscenariobutton[disabled], .editbutton[disabled], .tobooksbutton[disabled] {
        color: gainsboro;
    }

.savebutton, .submitbutton, .btnsearch, .btncancel, .btnok, .btnnok, .selectscenariobutton, .newscenariobutton, .editbutton, .logbutton, .mailbutton, .printbutton, .tobooksbutton,
.markactivebutton, .marktreatedbutton, .markclosedbutton, .markdeletedbutton, .btnselect, .exportbutton, .excelsheetbutton, .printmultiplebutton {
    /*    width: 40%;
    border: 0px;
    margin-top: 15px;
    background-color: var(--headingcolor);
    float: right;
    border-radius: 15px;
    font-size: x-large;
    margin-right: 1%;
    padding-right: 2%;
    padding-top: 1%;
    padding-bottom: 1%;
    text-align: right;
    box-sizing: content-box;*/
    width: auto;
    border: 0px;
    margin-top: 15px;
    background-color: var(--headingcolor);
    border-radius: 15px;
    font-size: large;
    padding: 10px;
    text-align: right;
    box-sizing: content-box;
}

.showlog .btncancel {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

/*.companybuttons input, .viabuttons input, .
buttons input, .personbuttons input {
    float: left;
    position: relative;
    width: 44%;
    margin-left: 3%;
    margin-top: 20px;
}*/

.guidbuttons input, .companybuttons input, .userbuttons input, .viabuttons input, .personbuttons input {
    position: absolute;
    width: 44%;
    margin-left: 3%;
    margin-top: 0px;
}

.guidbuttons #btnSave, .companybuttons #btnSave, .userbuttons #btnSave, .viabuttons #btnSave, .personbuttons #btnSave {
    left: 0px;
    bottom: 15px;
}

.guidbuttons #btnCancel, .companybuttons #btnCancel, .userbuttons #btnCancel, .viabuttons #btnCancel, .personbuttons #btnCancel {
    right: 15px;
    bottom: 15px;
}

.startlink {
    width: 20px;
    display: inline-block;
    /* background-color: red; */
    height: 15px;
    background-image: url(img/triangle.gif);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    margin-right: 10px;
    left: 0px;
    position: absolute;
}

    .startlink:hover {
        background-color: var(--headingcolor);
    }

.selectcourse .submitbutton {
    width: 41%;
    position: relative;
    top: +10px;
    text-align: center;
}

.selectedtime {
    position: absolute;
    width: 18%;
}

.editscenario .selectedtime {
    margin-top: 12px;
}

.selectcourse .selectedtime {
    width: 41%;
    position: relative;
    right: -10px;
    top: +10px;
    text-align: right !important;
    border: none
}

.btnselect, .markactivebutton {
    position: fixed;
    bottom: 10px;
    right: 10px;
}


.markclosedbutton {
    position: fixed;
    bottom: 10px;
    right: 435px;
}

.marktreatedbutton {
    position: fixed;
    bottom: 10px;
    right: 185px;
}

.markdeletedbutton {
    position: fixed;
    bottom: 10px;
    right: 635px;
}

.printmultiplebutton {
    position: fixed;
    bottom: 10px;
    left: 445px;
}

.myparticipants .markdeletedbutton {
    left: 300px;
    right: initial
}


.showscenario .editbutton {
    left: 10%;
    position: fixed;
    left: 210PX;
    bottom: 10PX;
    width: 150px;
}

.editscenario .editbutton {
    left: inherit;
    position: fixed;
    top: inherit;
    width: 18%;
    right: 30px;
}

.editscenario .tasks, .editscenario .infobutton {
    display: none !important;
}


.login .btnsearch, .login .btncancel, .confirmation .btnok, .confirmation .btncancel, .authorisationbox .btnok, .authorisationbox .btncancel {
    width: 43%;
    float: initial;
    text-align: center;
}

.confirmation .btncancel {
    position: absolute;
    right: 0px;
}

.confirmation .btnok, .confirmation .btnnok, .confirmation .btncancel {
    width: 40%;
    float: initial;
    text-align: center;
}


.yesnocancel .btnnok {
    left: 34%;
    position: absolute;
}

.yesnocancel .btnok, .yesnocancel .btncancel, .yesnocancel .btnnok {
    width: 29%;
}

.confirmation .label {
    display: block;
    height: 60px;
    border: 1px solid var(--headingcolor);
    line-height: 60px;
    font-size: x-large;
    margin-top: 10px;
    color: var(--secondlevelcolor);
    background-color: var(--headingcolor);
    text-align: center;
}

.authorisationbox .btnok, .authorisationbox .btncancel {
    position: absolute;
    bottom: 10px;
    left: 1%;
}

.authorisationbox .btncancel {
    right: 1%;
    left: inherit;
}

.btnsearch {
    margin-right: 6px;
}

.overview .submitbutton {
    width: 48%;
    border: 0px;
    margin-top: 15px;
    background-color: var(--headingcolor);
    float: right;
    border-radius: 15px;
    font-size: x-large;
    margin-right: 1%;
    padding-right: 0%;
    /* padding-top: 1%; */
    /* padding-bottom: 1%; */
    text-align: center;
    box-sizing: content-box;
    position: absolute;
    bottom: 0px;
    right: -20px;
}

.overview #btnSave {
    left: 0px;
}

.overview .course {
    margin-top: 5px;
    padding: 10px;
}

.overviewcheckboxes {
    float: right;
}

    .overviewcheckboxes div {
        display: inline-block;
    }

    .overviewcheckboxes label {
        width: auto;
        display: inline-block;
        font-size: small;
    }

    .overviewcheckboxes input[type="text"] {
        /*visibility:hidden;*/
        border: none;
        background-color: transparent;
        width: 110px;
    }

.moduleheading .overviewcheckboxes div {
    width: 134px;
}

.chapterselection .scrolllinks .course,
.chapterselection .scrollrechts .course,
.paneloverview .course,
.overview .course {
    /*    display:inline-block;
padding: 2px;
width: 100%;
margin-left: 0%;
margin-bottom: 0px;
cursor:pointer;*/
    font-size: large;
}

.chapterselection .scrolllinks .courseheading,
.chapterselection .scrollrechts .courseheading,
.paneloverview .courseheading,
.overview .courseheading {
    background-color: var(--firstlevelcolor);
}

.chapterselection .scrolllinks .module,
.chapterselection .scrollrechts .module {
    display: inline-block;
    padding: 2px;
    width: 98%;
    margin-left: 1%;
    margin-bottom: 0px;
    cursor: pointer;
}

    .chapterselection .scrolllinks .module:last-of-type::after,
    .chapterselection .scrollrechts .module:last-of-type::after {
        content: "";
        height: 500px;
        display: block;
    }

.paneloverview .module,
.overview .module {
    display: inline-block;
    padding-top: 2px;
    width: 99%;
    margin-left: 1%;
    margin-bottom: 0px;
    cursor: inherit;
}

.overview #pnlremarks {
    border: 1px solid var(--headingcolor);
    position: absolute;
    bottom: 60px;
    left: 0px;
    right: 0px;
    /* bottom: 25%; */
    top: 65%;
    height: auto;
}

.overview #lblremarks {
    position: absolute;
    font-size: large;
    /* margin: 20px 0px 4px 0px; */
    display: block;
    font-style: italic;
    font-weight: bold;
    color: slategray;
    top: 60%;
}

.overview #txtremarks {
    font-size: large;
    display: block;
    font-style: italic;
    color: slategray;
    padding-left: 10px;
    padding: 5px 5px 0px 10px;
    border: unset;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

.chapterselection .scrolllinks .moduleheading,
.chapterselection .scrollrechts .moduleheading,
.paneloverview .moduleheading,
.overview .moduleheading {
    background-color: var(--secondlevelcolor);
    min-height: 25px;
    overflow: auto;
    line-height: 27px;
}

.blocktitle.moduletitle {
    display: inline-block;
}

#toggleStyleButton {
    display:none;
}

.chapterselection .scrolllinks .moduleheading.hidden::before,
.myscenarios .contentjpanelhead.hidden::before {
    content: "+";
    color: var(--headingcolor);
    display: inline-block;
    width: 15px;
    font-weight: bold;
    color: var(--headingcolor);
}

.chapterselection .scrolllinks .moduleheading.shown::before,
.myscenarios .contentjpanelhead.shown::before {
    content: "-";
    color: var(--headingcolor);
    display: inline-block;
    width: 15px;
    font-weight: bold;
    color: var(--headingcolor);
    position: relative;
    left: 5px;
}

.myvisualscenarios .contentjpanelhead:has(.button_plus) span:before,
.myscenarios .contentjpanelhead:has(.button_plus) span:before {
    content: " + ";
    display: inline-block;
    width: 15px;
}

.myscenarios .contentjpanelhead:has(.button_min) span:before {
    content: " - ";
    display: inline-block;
    width: 15px;
}

.myscenarios .datafield:first-of-type {
    width: 70% !important;
}

.myscenarios .datafield {
    width: 10% !important;
}


.chapterheading {
    width: 100%;
    display: block;
    /*background-color: #dbdbdb;*/
    height: 25px;
}

.chapterpanel {
    cursor: pointer;
    padding-left: 15px;
    overflow: auto;
    display: block;
}

.overtime {
    color: gray !important;
}

.chapterpanel:hover {
    background-color: antiquewhite
}

.chapterpanel:first-child {
    margin-top: 5px;
}

.chaptertime {
    float: right
}

.chaptercheckbox {
    float: left;
    padding-left: 20px;
    text-indent: -23px;
}

.scrollrechts .chaptercheckbox {
    text-indent: -20px;
}

.saveselection .chaptercheckbox {
    text-indent: -0px;
    padding-left: 0px;
}

.chapterselection .scrolllinks .chaptercheckbox input,
.paneloverview .chaptercheckbox input,
.overview .chaptercheckbox input {
    /*disablen van de linker checkbox, want onclick event gebeurt op chapterpanel */
    pointer-events: none;
    margin-right: 5px;
}

.chaptercheckbox label {
    /*
    display: inline-block;
    padding-left: 25px;
    text-indent: 0px;
    position: relative;
*/
}

.filterheader {
    /* display: none; */
    float: left;
    font-size: 18px;
}

.selectcourse .filterheader {
    content: " : ";
}


.SELECTION_LEVEL {
    font-size: 18px;
    margin-right: 50px;
    display: inline-block;
}

    .level1, .SELECTION_LEVEL[waarde~="1"] {
        color: green
    }

    .level2, .SELECTION_LEVEL[waarde~="2"] {
        color: black
    }

    .level3, .SELECTION_LEVEL[waarde~="3"] {
        color: blue
    }

    .level4, .SELECTION_LEVEL[waarde~="4"] {
        color: red
    }

.infobutton {
    display: block;
    width: 20px;
    height: 20px;
    background-image: url("../images/infobutton.png");
    float: right;
    background-position: center;
    background-size: contain;
    position: relative;
    top: 25px;
    left: -5px;
    cursor: help;
    background-color: blue;
    border-radius: 100%;
}

    .infobutton .tooltiptext {
        visibility: hidden;
        /* width: 500px; */
        background-color: antiquewhite;
        padding: 5px 0;
        border-radius: 6px;
        position: fixed;
        z-index: 4000;
        border: 1px solid;
        overflow: auto;
        left: 55%;
        top: 140px;
        bottom: 20px;
        right: 10px;
        padding: 10px;
        opacity: 0;
        transition: opacity 0.2s;
        box-shadow: var(--headingcolor) 5px 5px;
        z-index: 5000;
    }

    .infobutton:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

.chapterselection .scrolllinks .tasks {
    display: inline-block;
    width: 86%;
    margin-left: 60px;
    font-size: large;
    font-style: oblique;
    margin-bottom: 15px;
    margin-top: 5px;
}

span.tasks {
    counter-reset: list-number;
}

    span.tasks div {
        padding-left: 20px;
        text-indent: -15px;
    }

        span.tasks div:before {
            content: "\2022";
            display: inline-flex;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
            border-radius: 50%;
            width: 15px;
        }

.emptyblock {
    display: none;
    min-height: 35px;
    line-height: 35px;
    padding-left: 15px;
    font-size: small;
    font-style: oblique;
}

.paneloverview .module:has(.modulecontent):not(:has(.chapterpanel[style="display: block;"])),
.overview .module:has(.modulecontent):not(:has(.chapterpanel[style="display: block;"])),
.scrollrechts .module:has(.modulecontent):not(:has(.chapterpanel[style="display: block;"])) {
    display: none;
}

.scrolllinks .module:has(.modulecontent):not(:has(.chapterpanel[style="display: block;"])) .emptyblock {
    display: block;
}

.scrolllinks .module:has(.modulecontent):has(.chapterpanel[style="display: block;"]) .emptyblock {
    display: none;
}


.paneloverview .course:has(.coursecontent):has(.module):has(.modulecontent):not(:has(.chapterpanel[style="display: block;"])),
.overview .course:has(.coursecontent):has(.module):has(.modulecontent):not(:has(.chapterpanel[style="display: block;"])),
.scrollrechts .course:has(.coursecontent):has(.module):has(.modulecontent):not(:has(.chapterpanel[style="display: block;"])) {
    display: none;
}

.overview .chapterpanel,
.paneloverview .chapterpanel {
    cursor: initial;
}

#content {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.showimage #content {
    overflow: auto;
}

.deleteditems #content, .closeditems #content {
    bottom: 60px;
    overflow: auto
}

.showlog #content {
    bottom: 60px;
    overflow: auto
}


#dynamicdiv, #DynamicDiv, #smalldynamicdiv, SmallDynamicDiv, #waitDiv, WaitDiv {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

#displayframediv, #displaysmallframediv, #displaywaitframediv {
    /*BACKGROUND-IMAGE: url(img/fadeBG.png);*/
    /* Z-INDEX: -1; */
    POSITION: absolute;
    TEXT-ALIGN: center;
    TOP: -1%;
    LEFT: -1%;
    bottom: -2%;
    right: -1%;
    overflow: hidden;
}

#displayframediv, #displaysmallframediv {
    BACKGROUND-IMAGE: url(img/fadeBG.png);
    Z-INDEX: -1;
}

#displayframetable {
    border: 0;
    border-width: 5px;
    border-style: solid;
    border-color: #dadada;
    background-color: #fff;
    margin: 0 auto;
    position: relative;
}

.displayframetablebig {
    height: 90%;
    width: 96%;
    top: 5%;
}

.displayframetablesmall {
    height: 350px;
    width: 60%;
    top: 15%;
    border: 0;
    border-width: 5px;
    border-style: solid;
    border-color: #dadada;
    background-color: #fff;
    margin: 0 auto;
    position: relative;
}

.displayframetablesmallest {
    /*
    min-height:25%; 
    min-width:25%; 
    */
    top: 30%;
    border: 0;
    border-width: 5px;
    border-style: solid;
    border-color: #dadada;
    background-color: #fff;
    margin: 0 auto;
    position: relative;
}

    .displayframetablesmallest table {
        height: auto !important;
        width: auto !important
    }

#displaysmallframetable {
    margin: auto;
    position: relative;
}

#closebutton {
    background-image: url(../images/closeButton.jpg);
}

/*editguid*/
.guidlabel, .headinglabel {
    background-color: var(--headingcolor);
    display: block;
    height: auto;
    color: white;
    font-size: xx-large;
    padding: 10px;
    margin-bottom: 10px;
}

.editguid .guidlabel, .editcompany .heading, .editvia .heading {
    position: fixed;
    top: 0px;
    left: 8px;
    right: 8px;
}

.editguid .guidchildren, .editcompany .companychildren, .editvia .viachildren, .manageuser .userchildren, .manageparticipant .userchildren {
    position: fixed;
    top: 60px;
    bottom: 75px;
    left: 8px;
    right: 8px;
    overflow: auto;
}

.editcompany .companychildren, .editvia .viachildren, .manageuser .userchildren, .manageparticipant .userchildren {
    top: 35px;
}

.editguid .guidbuttons, .editcompany .companybuttons, .editvia .viabuttons, .manageuser .userbuttons, .manageparticipant .userbuttons {
    position: fixed;
    left: 0px;
    right: 8px;
    bottom: 0px;
    overflow: auto;
    height: 75px;
}

.manageuser .heading span, .manageparticipant .heading span {
    float: initial;
}

.manageuser input[type="password"], .manageparticipant input[type="password"] {
    margin-bottom: 5px;
}

.pnldates.editblock {
    line-height: 25px;
}

.guidchild, .editblock, .filterblock {
    /* display: block; */
    /* width: 30%; */
    /* float: left; */
    /* margin-bottom: 20px; */
    background-color: var(--firstlevelcolor);
    /* margin-right: 10px; */
    /* min-height: 80px; */
    padding-top: 4px;
    font-size: medium;
    border-top: 3px white solid;
    padding-bottom: 4px;
    color: var(--headingcolor);
    font-weight: bold;
}

.filterblock {
    float: left;
    width: 20%;
    height: 25px;
}

.guids .filterblock {
    width: 25%;
}

.filterblock .button {
    width: 26px;
    height: 22px;
    margin-left: 2px;
}

.guidchild span, .editblock span, .filterblock span {
    background-color: var(--firstlevelcolor);
    width: 28%;
    display: block;
    float: left;
    color: var(--headingcolor);
    padding-left: 2%;
    font-weight: bold;
    font-size: medium;
}

.filterblock span {
    width: initial;
    margin-right: 10px
}



.editmail .editblock span {
    width: 160px;
}

.guidchild.text span {
    width: 95%;
    float: initial;
}

.editblock input[type="checkbox"] {
    margin-left: 2%;
    width: auto;
}

.guidchild select,
.editblock select, .editblock textarea, .editblock input
.filterblock select, .filterblock textarea, .filterblock input {
    display: inline-block;
    width: 50%;
    color: cornflowerblue;
    font-size: medium;
    font-weight: bold;
}

.filterblock select {
    width: 68%
}

.guiddropdown input {
    margin-left: 5px;
}

/*mails*/
.mails #tblmails {
    right: 0px;
    position: fixed;
    overflow: auto;
    top: 36px;
    left: 0px;
    bottom: 80px;
}

.mails .submitbutton {
    position: fixed;
    z-index: 1;
    bottom: 10px;
    left: 10px;
}

/*courses*/
.courses #tblcourses {
    right: 0px;
    position: fixed;
    overflow: auto;
    top: 36px;
    left: 0px;
    bottom: 80px;
}

.courses .filter {
    position: inherit;
    /* width: 100%; */
    right: 0px;
    /* left: 0px; */
    background-color: var(--firstlevelcolor);
}
.courses .filterblock {
    width: 16%;
    border-top:0px;
}

.courses .filterblock select {
    width: 50%;
}

.courses .exportbutton {
    position: fixed;
    left: 10px;
    bottom: 10px;
}

/*guid*/
.guids #tblguids {
    right: 0px;
    position: fixed;
    overflow: auto;
    top: 36px;
    left: 0px;
    bottom: 80px;
}

.guids .submitbutton {
    position: fixed;
    z-index: 1;
    bottom: 10px;
    left: 10px;
}

.guids .exportbutton {
    position: fixed;
    left: 200px;
    bottom: 10px;
}

/*scenarios*/
.selectscenarios #tblscenarios,
.scenarios #tblscenarios,
.myparticipants #tblscenarios,
.myscenarios #tblscenarios,
.myvisualscenarios #tblscenarios {
    right: 0px;
    position: fixed;
    overflow: auto;
    top: 36px;
    left: 0px;
    bottom: 80px;
}

.myscenarios #tblscenarios, 
.myvisualscenarios #tblscenarios  {
    top: 0px;
    bottom: 2px;
}

.myscenarios .contentjpanel .contentjpanel:last-of-type .contentjpanel:last-of-type {
    margin-bottom: 250px;
}

nieuw, nietactief {
    color: red;
    font-weight: bold;
}

in {
    color: darkorange ;
    font-weight: bold;
}


actief {
    color: green;
    font-weight: bold;
}

gesloten {
    /*
    color: inherit ;
    font-weight: bold;
    */
}

duplicate {
    color: red;
    font-weight: bold;
}

.myparticipants .selectscenariobutton, .scenarios .newscenariobutton {
    position: fixed;
    z-index: 1;
    bottom: 10px;
    left: 10px;
}

.scenarios .exportbutton {
    position: fixed;
    left: 225px;
    bottom: 10px;
}

.showlog .exportbutton {
    position: fixed;
    left: 10px;
    bottom: 10px;
}


.scenarios .excelsheetbutton {
    position: fixed;
    left: 300px;
    bottom: 10px;
}


.heading, .heading span {
    background: var(--headingcolor);
    color: wheat;
}


.editblock .mail {
    display: grid;
    width: 50%;
}

    .editblock .mail #txtMail {
        min-height: 250px;
        width: 100%
    }

.editblock textarea, .editblock input,
.filterblock textarea, .filterblock input {
    width: 50%;
    color: var(--headingcolor);
    font-weight: bold;
    font-size: medium;
}

.edittask .editblock textarea,
.edittask .editblock input,
.editmodule .editblock textarea,
.editmodule .editblock input,
.editchapter .editblock textarea,
.editchapter .editblock input {
    width: 65%;
}

.editchapter .editblock input[type="radio"] {
    width: auto;
}

.editblock textarea {
    height: 50px;
}

.pnlremarks #txtRemarks {
    height: 125px;
}

.maxtime select {
    width: 50px;
    margin-right: 3px;
}

    .maxtime select:last-of-type {
        margin-left: 10px;
    }

.tooltip {
    cursor: pointer;
}

input.helpbutton.switchlang.button {
    position: absolute;
    top: 42px;
    right: 25px;
    border: none;
    background: transparent;
    background-image: url("../images/infobutton.png");
    height: 26px;
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
    padding-left: 35px;
    /* line-height: 50px; */
    /* vertical-align: bottom; */
    background-color: transparent;
    /* background-position-y: -10px; */
    color: white;
    border-radius: 10%;
    font-weight: bold;
    font-size: 15px;
    font-family: Tahoma;
}

.showscenario .loginbox,
.editscenario .loginbox {
    position: absolute;
    top: 6px;
    /* right: 18px; */
    /* float: right; */
    margin-left: 14px;
    width: 23%;
    left: 65px;
    /* background-color: red; */
}

.showscenario #txtFullname,
.editscenario #txtFullname {
    display: block;
    z-index: 4000;
    font-size: medium;
    background-color: var(--backgroundcolor);
    color: var(--headingcolor);
    font-weight: bold;
    font-style: italic;
    border-radius: 7px;
    width: 97%;
}


.showscenario .chapterselection .scrolllinks .tasks,
.showscenario .infobutton,
.showscenario chapterselection .scrollrechts .tasks {
    display: none;
}

.showscenario .scrolllinks,
.showscenario .filterpanel {
    display: none;
}

/*.showscenario .scrollrechts {
    width: 70%;
    height: 80%;
    border-radius: 0px;
    float: left;
    margin-right: 1%;
}
*/
.showscenario .paneloverview,
.showscenario .scrollrechts {
    border-radius: 0px;
    position: fixed;
    top: 110px;
    bottom: 45PX;
    height: auto;
    right: 30%;
    width: auto;
    left: 8PX;
}

.editscenario .paneloverview {
    display: none;
}

.showscenario .scrollrechts {
    display: none
}

.showscenario .pnlinfo {
    width: auto;
    height: auto;
    position: fixed;
    right: 25px;
    left: 71%;
    bottom: 85PX;
    top: 110px;
}

.showscenario .pnlsubinfo {
    height: 50px;
    width: 100%;
}

.editscenario .pnlinfo,
.editscenario #btnMail,
.editscenario #btnLog,
.editscenario #btnSubmit,
.editscenario #btnSave,
.editscenario #btnPrint,
.editscenario #btnCancel {
    display: none
}

.overview .chaptercheckbox input,
.showscenario .chaptercheckbox input {
    display: none;
}


.showscenario .pnlinfo textarea {
    width: 100%;
    height: calc((100% - 50px)/2);
    margin-top: 2%;
    display: block;
    font-size: large;
    display: block;
    font-style: italic;
    color: slategray;
    padding-left: 10px;
    padding: 5px 5px 0px 10px;
    /* border: unset; */
    border: 1px solid var(--headingcolor);
}

.chapterselectionpanel .button {
    height: 15px;
    line-height: 15px;
    font-size: 15px;
    text-align: center;
    width: 100px;
    padding: 5px;
}

.selectcourse .chapterselectionpanel .button {
    font-size: x-large;
    text-align: center;
    width: 41%;
    padding-bottom: 20px
}


.showscenario #TxtSelectedTime {
    position: fixed;
    left: 10px;
    bottom: 10px;
    width: 150PX;
}

.showscenario #btnSubmit {
    position: fixed;
    bottom: 11px;
    right: 140px;
    width: 100px;
}

.showscenario #btnSave {
    position: fixed;
    bottom: 11px;
    right: 280px;
    width: 100px;
}

.showscenario #btnCancel {
    position: fixed;
    bottom: 11px;
    right: 10px;
    width: 100px;
}


.showscenario a#btnMail {
    position: fixed;
    right: 410PX;
    bottom: 10px;
    width: 100px;
}

.showscenario a#btnPrint {
    position: fixed;
    right: 560PX;
    bottom: 10px;
    width: 100px;
}

.showscenario a#btnLog {
    position: fixed;
    bottom: 10px;
    width: 100px;
    right: 700px;
}

.processing span,
.processed span {
    display: block;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: var(--backgroundcolor);
    color: var(--headingcolor);
    text-align: center;
    padding: 10%;
    font-size: medium;
    font-weight: bolder;
}


.processed .submitbutton {
    z-index: 5000;
    position: absolute;
    bottom: 0px;
    margin: auto;
    display: block;
    width: 30%;
    left: 35%;
    text-align: center;
}

.columnheading {
    color: var(--headingcolor);
    font-weight: bold;
    font-size: 1.2em;
}

.manual {
    overflow: initial;
    font-family: Calibri;
    font-size: x-large;
    font-weight: bolder;
    font-style: italic;
}

    .manual img {
        /*width: 75%;*/
        display: block;
        /*margin:30px;*/
        max-width: 100%
    }

    .manual div {
        padding-top: 25px;
        text-indent: -25px;
        padding-left: 25px;
        color: dodgerblue;
    }


        .manual div:last-of-type {
            padding-bottom: 50%;
        }

    .manual .closebutton {
        position: fixed;
        bottom: 0px;
        right: 10px;
        /* width: 100%; */
        border: none;
        background: var(--bodybackground);
        height: 60px;
        text-align: right;
        width: 100%;
        vertical-align: bottom;
        line-height: 20px;
    }

        .manual .closebutton input[type="button"] {
            background-color: var(--headingcolor);
            border-radius: 15px;
            color: white;
            height: 30px;
            width: 120px;
            border: none;
            font-size: large
        }

/*Tabs*/
.editmail .ui-state-active,
.editmail .ui-widget-content .ui-state-active,
.editmail .ui-widget-header .ui-state-active,
.editmail a.ui-button:active,
.editmail.ui-button:active,
.editmail ui-button.ui-state-active:hover,
.editchapter .ui-state-active,
.editchapter .ui-widget-content .ui-state-active,
.editchapter .ui-widget-header .ui-state-active,
.editchapter a.ui-button:active,
.editchapter.ui-button:active,
.editchapter ui-button.ui-state-active:hover {
    border: 1px solid var(--headingcolor) !important;
    background: var(--headingcolor) !important;
    font-weight: normal !important;
}

.editmail .ui-state-default,
.editmail .ui-widget-content .ui-state-default,
.editmail .ui-widget-header .ui-state-default,
.editmail .ui-button,
.editmail html .ui-button.ui-state-disabled:hover,
.editmail html .ui-button.ui-state-disabled:active,
.editchapter .ui-state-default,
.editchapter .ui-widget-content .ui-state-default,
.editchapter .ui-widget-header .ui-state-default,
.editchapter .ui-button,
.editchapter html .ui-button.ui-state-disabled:hover,
.editchapter html .ui-button.ui-state-disabled:active {
    border: 1px solid var(--firstlevelcolor);
    background: var(--firstlevelcolor);
    font-weight: normal;
}

.editmail table {
    width: 100%;
    margin-top: 6px;
    padding: 10px 1px;
    background-color: var(--firstlevelcolor);
}

.editchapter table {
    width: 65%;
    margin-top: 0px;
    padding: 0px 1px;
    background-color: var(--firstlevelcolor);
}

.editmail table table,
.editchapter table table {
    padding: 0px;
    background-color: initial;
    margin: 0px;
}

.editmail table table,
.editchapter table table {
    border-collapse: collapse;
    position: fixed;
    bottom: 70px;
    left: 10px;
    right: 10px;
    width: -webkit-fill-available !important;
}

.editmail table table:first-of-type,
.editchapter table table:first-of-type {
    position: initial;
}

.editmail table table table,
.editchapter table table table {
    position: initial;
}

table tbody tr td div:last-of-type > table {
    position: fixed !important;
}

.editmail td,
.editchapter  td {
    background-color: var(--firstlevelcolor) !important;
}

.editmail img[src="/WebResource.axd?d=fMLnXqUlqNNDyWPK291Ycn5bYuOx6DqND-NTimj5eJhxgLcF1M2gMBCjLSN9Pt6sJ0Vf4LQYtLYnjbSdWF7Q2HJq5mdKP3B7CNQiIPEpNRZQfQ6Y7sxtKirIu1jJQ8dYB67Un9-AFicSsWzeBo56PJNI6vfkIysWZjvrR4T2Xf9qyCtGDczE1DbcnzpU-5YU0&t=638633035410019532"],
.editmail img[src="/WebResource.axd?d=Y-ssfcFAF6zlOb9w1OVO2tXnJNaiXAFui7UzYIA9mW42p7334CTh2Vq189H4oVqpf8E7752fqYwIQhKyIbAWv7haoZ7fmcOIzKAeinC55rrz9NhYCaM1smxTjJZbWC1H4lDV151dXoMqdVrUfSYe4SPUvStRqlhTn6bs0D7qRU0SXWJhuwMdm4hNKqxtUiD60&t=638633035410019532"],
.editchapter  img[src="/WebResource.axd?d=fMLnXqUlqNNDyWPK291Ycn5bYuOx6DqND-NTimj5eJhxgLcF1M2gMBCjLSN9Pt6sJ0Vf4LQYtLYnjbSdWF7Q2HJq5mdKP3B7CNQiIPEpNRZQfQ6Y7sxtKirIu1jJQ8dYB67Un9-AFicSsWzeBo56PJNI6vfkIysWZjvrR4T2Xf9qyCtGDczE1DbcnzpU-5YU0&t=638633035410019532"],
.editchapter  img[src="/WebResource.axd?d=Y-ssfcFAF6zlOb9w1OVO2tXnJNaiXAFui7UzYIA9mW42p7334CTh2Vq189H4oVqpf8E7752fqYwIQhKyIbAWv7haoZ7fmcOIzKAeinC55rrz9NhYCaM1smxTjJZbWC1H4lDV151dXoMqdVrUfSYe4SPUvStRqlhTn6bs0D7qRU0SXWJhuwMdm4hNKqxtUiD60&t=638633035410019532"] {
    display: none !important;
}

.editmail .ui-widget-header,
.editchapter  .ui-widget-header {
    border: 0px;
    background: transparent;
}

.editmail .ui-tabs .ui-tabs-panel,
.editchapter  .ui-tabs .ui-tabs-panel {
    padding: 0em;
}

.editmail .ui-state-default a,
.editmail .ui-state-default a:link,
.editmail .ui-state-default a:visited,
.editmail a.ui-button,
.editmail a:link.ui-button,
.editmail a:visited.ui-button,
.editmail .ui-button,
.editchapter .ui-state-default a,
.editchapter .ui-state-default a:link,
.editchapter .ui-state-default a:visited,
.editchapter a.ui-button,
.editchapter a:link.ui-button,
.editchapter a:visited.ui-button,
.editchapter .ui-button {
    color: var(--headingcolor);
    font-size: large;
    font-weight: bold
}

.editmail .ui-state-active a,
.editmail .ui-state-active a:link,
.editmail .ui-state-active a:visited,
.editchapter  .ui-state-active a,
.editchapter  .ui-state-active a:link,
.editchapter  .ui-state-active a:visited {
    color: #ffffff;
}

.editmail iframe, .editmail textarea,
.editchapter  iframe, .editchapter textarea {
    width: 100% !important;
}

.editmail iframe, .editmail textarea,
.editchapter iframe, .editchapter  textarea {
    /* width: 100% !important; */
    position: fixed;
    bottom: 0px;
    top: 200px;
    right: 10px;
    left: 10px;
    width: -webkit-fill-available !important;
    height: -webkit-fill-available !important;
    bottom: 95px;
    padding:10px !important ;
}

.editchapter iframe, .editchapter textarea {
    top: 260px !important;
}

.editmail .ui-widget.ui-widget-content,
.editchapter .ui-widget.ui-widget-content {
    border: 0px;
    background-color: transparent;
}


.myscenarios .contentjpanel .contentjpanel .contentjpanelhead {
    background-color: var(--firstlevelcolor);
}

.myscenarios .contentjpanel .contentjpanel .contentjpanel .contentjpanelhead {
    background-color: var(--secondlevelcolor);
}

.myscenarios .dataheaderdiv {
    display: none;
}

.myscenarios .contentjpanel .contentjpanel .contentjpanel .contentjpanelpanel,
.myscenarios .contentjpanel .contentjpanel .contentjpanelpanel,
.myscenarios .contentjpanel .contentjpanelpanel {
    border: 0px
}

/*myscenarios*/
.myscenarios .datafield {
    background-image:url("");

}

.myscenarios .contentjpanel {
    font-size: large !important;
}

div#overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(169, 169, 169, 0.5);
    z-index: 9999;
    display: none;
    align-content:center
}

span.overlayspan {
    color: white;
    margin: 0px auto;
    display: block;
    width: 100%;
    align-items: center;
    font-size: xxx-large;
    cursor: pointer;
    position: absolute;
    text-align: center;
}


.startmanual, .startbrillekes, .finished {
    /*
    display: inline-block;
    border: 1px solid white;
    padding: 0px 20px 0px 10px;
    background-color: gainsboro;
    /* margin-bottom: 8PX; */
    /*font-size: large;
    font-weight: bold;*/
    line-height: 25px;
    cursor: pointer;    
    width: 30px;
    height: 30px;
    background-size: contain;
    background-color: inherit;
}

.startmanual:hover, .startbrillekes:hover {
    /*
    border-top: 2px solid white;
    border-left: 2px solid white;
    border-bottom: 0px solid white;
    border-right: 0px solid white;
    */
}

.startmanual {
    background-image: url("../style/img/boekske.png");
    background-repeat : no-repeat ;
}

.startbrillekes {
    background-image: url("../style/img/brilleke.png");
    background-repeat: no-repeat;
}

.finished {
    background-image: url("../style/img/finishedTransparent.png");
    background-repeat: no-repeat;
    background-size: contain;
    height: 30px;
    width: 30px;
    background-position-y: 0px;
    position: fixed;
    left: 0px;
}

.pnlmanual, .pnlbrillekes, .pnlfinished
{
    margin-bottom: 10px;
    /* width: 50px; */
    display: initial;
}


/*openbook*/
.bookshown #content .mainframepanel {
    display: block !important;
}

.bookshown #content .mainframepanel {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(169, 169, 169, 0.5);
    z-index: 9999;
    display: none;
    align-content: center;
}

.myscenarios .datadiv {
    display: block;
    overflow: auto;
    margin-left: 40px;
}

.myscenarios #displayframetable, .myvisualscenarios #displayframetable {
    width: 100% !important;
    height: 100% !important;
    top: 0px !important;
}

.myscenarios .displayframetable tr:first-of-type, .myvisualscenarios .displayframetable tr:first-of-type {
    display: none;
}

.myscenarios .finished {
    background-image: url("../style/img/finishedTransparent.png");
    background-repeat: no-repeat;
    background-size: contain;
    height: 30px;
    width: 30px;
    background-position-y: 0px;
    position: absolute ;
    left: 15px;
}

.openbook .mastercontent {
    position: absolute;
    width: 100%;
    top: 0px;
    bottom: 70px;
}

.openbook #pnlthumbnails {
    /* position: absolute; */
    /* top: 0px; */
    /* bottom: 0px; */
    /* left: 0px; */
    width: 90px;
    float: left;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: transparent;
    padding-right: 10px;
}

.openbook #pnlthumbnails img {
    width: 100%;
    border: transparent solid 2px;
}

.openbook img:hover {
    border: var(--backgroundcolor2) solid 2px !important;
}

.openbook img.selected {
    border: 2px var(--backgroundcolor2) solid !important;
}

.openbook #pnlpdf {
    background-color: transparent;
    height: 100%;
    width: calc(100% - 100px);
    float: left;
    position: absolute;
    left: 100px;
}
/*.openbook #pnlpdf {
    background-color: transparent;
    height: 100%;
    width: calc(100% - 130px); 
    float: left;
    position: relative; 
}*/

.openbook #pnlpdf iframe {
    width: 100%;
    height: 100%;
    border: none; /* Optional: Removes the iframe border */
    position: absolute;
    top: 0;
    left: 0;
}

.openbook .buttons {
    position: absolute;
    bottom: 15px;
    height: 40px;
    left: 50px;
    width: calc(100% - 50px);
    text-align: center;
    align-content: normal;
}

.openbook .buttons input {
    width: 15%;
    max-width: 125px;
    background-color: var(--backgroundcolor2);
    height: 80%;
    cursor: pointer;
}

.openbook #pnlprevious, .openbook #pnlnext {
    width: 100px;
    position: absolute;
    height: 100%;
    z-index: 5000;
    background-color: transparent; /*rgb(100,100,100,0.4);*/
    color: transparent;
    align-content: center;
    font-size: xx-large;
    font-weight: 800;
    text-align: center;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    cursor:pointer;
}

.openbook #pnlprevious:hover, .openbook #pnlnext:hover {
    background-color: rgba(100, 100, 100, 0.4); /* Semi-transparent background on hover */
    color: var(--backgroundcolor2); /* Make text visible on hover */
}

.openbook #pnlprevious {
    float: left;
    left: 100px;
    text-shadow: -1px 2px 1px white;
}

.openbook #pnlnext {
    left: calc(100% - 115px);
    text-shadow: 2px 2px 1px white;
}

.openbook #pnlbuttonstop {
    position: absolute;
    height: 50px;
    width: 50px;
    background-color: white;
    left: calc(100% - 70px);
    top:5px;
    z-index: 5001;
    border: 1px solid gainsboro;
}

.openbook #pnlbuttonstop #btnclosetop, 
.openbook #pnlbuttonstop #btnsaveandclosetop {
    width: 100%;
    height: 100%;
    font-size: x-large;
    box-shadow: 5px 5px 10px gainsboro;
}

.closechapter #main {
    align-content: center;
    height: 100%;
    width: 100%;
    text-align: center;
}

/*test*/
.myvisualscenarios .contentjpanelpanel, 
.myvisualscenarios .dataheaderdiv, 
.myvisualscenarios .contentjpanelhead 
{
    border: 0px !important
}

.myvisualscenarios .contentjpanel .contentjpanelhead span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    COLOR: saddlebrown;
    font-size: larger;
}

.myvisualscenarios .contentjpanel .contentjpanel .contentjpanel .contentjpanelhead span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--firstlevelcolor);
    font-size: initial
}

.myvisualscenarios #content {
    overflow:auto;
}

.myvisualscenarios .columnheading,
.myvisualscenarios .dataheaderdiv  {
    display: none;
}

.myvisualscenarios .contentjpanel .contentjpanel .contentjpanelpanel {
    background-image: url(img/library/shelve250.png);
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
}

.myvisualscenarios .contentjpanel .contentjpanel .contentjpanel .contentjpanelpanel {
    background-image: url();
}

.myvisualscenarios .contentjpanel .contentjpanel {
    margin-right: 15px;
    margin-left: 0px;
    background-color: burlywood;
    margin-left: 10px;
    box-shadow: 10px 10px 5px gainsboro;
    margin-bottom: 25px;
    display:none;
}

.myvisualscenarios .contentjpanel .contentjpanel:has(.startmanual) {
    display: block;
}

.myvisualscenarios .contentjpanel .contentjpanel .contentjpanel {
    width: contain;
    float: left;
    min-height: auto;
    margin: 0px;
    padding: 0px;
    min-height: 250px;
    /*max-height: 250px;
    overflow:hidden;*/
    margin-right: 20px;
    background-color: transparent;
    box-shadow: initial;
    display:none;
}

.myvisualscenarios .contentjpanel .contentjpanel .contentjpanel:has(.startmanual) {
    display: inline-block;
}

.myvisualscenarios .contentjpanel .contentjpanel .contentjpanel .SORT {
    /* background-color: red; */
    width: 100px;
    float: left;
    min-height: 205px;
    border: 0px solid black;
    margin-right: 5px;
    margin-top: 5px;
    /* border: 0px; */
}

.myvisualscenarios .contentjpanel .contentjpanel .contentjpanel .SORT:last-of-type {
    /*background-position-x: 100%; 
    background-repeat: no-repeat; 
    margin-right: 0px;
    background-image: url(img/library/bookstop.png);*/
    width: 125px;
}

.myvisualscenarios .contentjpanel .contentjpanelhead {
    padding-right: 35px;
}

.myvisualscenarios .contentjpanel .datadiv {
    background-image: url(img/library/bookstop.png);
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 100%;
}

.myvisualscenarios .contentjpanel .contentjpanel .contentjpanel .SORT.second-row {
    padding-top: 35px;
    padding-bottom: 10px;
}


.myvisualscenarios .datafield {
    /* float: left; */
    display: block;
    background-position-x: left;
    /* background-repeat: no-repeat; */
    line-height: 1.7em;
    overflow: hidden;
    background-image: url('');
    background-position: right;
    background-repeat: repeat-y;
    width: 100% !important;
}

.myvisualscenarios .datarowdiv {
    display: block;
    line-height: 16px;
    font-style: italic;
    border: none;
    padding: 5px  0px 0px 0px;
    /* margin-bottom: 11px; */
    /* padding-bottom: 10px; */
    /*background-image: url("../player/excel/39/ne/0101ne/mypage_1.png");*/
    background-size: contain;
}


.myvisualscenarios .datafield:first-of-type {
    background-color: var(--backgroundcolor2);
    height: 135px;
    overflow: auto;
    font-size: small;
    background-image: url("../pdf/excel/39/ne/0101ne/mypage_1.png");
    background-size: cover;
    width: 95px !important;
    display: block;
}
/*
.myvisualscenarios .datafield:first-of-type span {
     display: none; 
    background-color: white;
    height: 100%;
}

.myvisualscenarios .firstrow:hover .datafield:first-of-type span {
    display:block;
}
*/

.myvisualscenarios .datafield:first-of-type span {
    display: none;
    background-color: white;
    height: 100%;
    word-break: break-word;
    font-size: xx-small;
}

.myvisualscenarios .firstrow:hover .datafield:first-of-type span {
    display: block;
}



.myvisualscenarios .datafield:has(.pnlmanual) {
    position: relative;
    top: -155px;
    height: 137px;
    background-color: rgba(128, 128, 128, 0.7);
    width: 95px !important;
}

.myvisualscenarios .datafield:has(.pnlfinished):has(.finished) {
    background-color: transparent;
    height: inherit !important;
    background-image: url("../style/img/finishedTransparent.png");
    background-repeat: no-repeat;
    background-position-x: 80%;
    background-position-y: 60%;
}

.myvisualscenarios .datafield:has(.pnlmanual):has(.startmanual) {
    background-color: transparent;
    height: inherit !important;
}

.myvisualscenarios .datafield .pnlmanual {
    width : 100px;
    height:120px;
    display:inline-block;
}

.myvisualscenarios .contentjpanel .contentjpanel .contentjpanel .SORT:has(.pnlmanual) {
    display: none;
}

.myvisualscenarios .contentjpanel .contentjpanel .contentjpanel .SORT:has(.pnlmanual):has(.startmanual) {
    display: inline-block ;
}


.myvisualscenarios .datafield:has(.pnlbrillekes) span {
    margin-left: 0px;
    display: inline-block;
    width: 100%;
    background-position-x: center
}

.myvisualscenarios .datafield:has(.pnlbrillekes) span.finished {
    display: none;
}

.myvisualscenarios .datafield div.pnlbrillekes:has(.startbrillekes) {
    /*
    background: whitesmoke;
    margin: 0px;
    box-shadow: 10px 10px 5px gainsboro
    */
}

.myvisualscenarios .datafield:has(.pnlbrillekes) span.startbrillekes {
    background-color: white;
    border: 1px solid;
    box-shadow: gainsboro 1px 1px 5px;
    width: 30px;
    /* float: right; */
    height: 25px;
}

.myvisualscenarios .datacontentdiv > div:hover {
    background-color: transparent;
}

.myvisualscenarios .firstrow,
.myvisualscenarios .secondrow {
    max-height : 175px;
}

.myvisualscenarios .pnlmanual {
    margin-bottom: 10px;
    min-height: 30px;
}


.myvisualscenarios .startmanual {
    width:100px;
    height:135px;
    background-image:url("");
}


.myvisualscenarios .datafield:first-of-type + .datafield {
    position: relative;
    top: -26px;
    width: 10;
    width: 100%;
    left: 5px;
}

.menuManual {
    background-image: url("../images/infobutton.png");
    position: absolute;
    right: 10px;
    width: 31px;
    text-overflow: ellipsis;
    background-position-x: left;
    margin-left: 25px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    color: transparent;
    top: 19px;
}

.menuEvalution {
    background-image: url("../images/evaluation2.png");
    position: absolute;
    right: 45px;
    width: 0px;
    text-overflow: ellipsis;
    background-position-x: left;
    margin-left: 25px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    color: transparent;
    top: 18px;
    /* background-color: var(--firstlevelcolor); */
    border-radius: 5px;
    background-position: center;
    padding: 0px 0px;
    background-size: contain;
    padding: 0px 20px;
}

.usermenu:has(.menuManual) .loggedinuser {
    right: 90px;
}


hide {
    visibility: hidden;
}