html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;
}

.htmlNew {
    background-color: #fff;
}

body {
    background-color: #fff;
    color: #333;
    font-size: .85em;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

a {
    color: #333;
    outline: none;
    padding-left: 3px;
    padding-right: 3px;
    text-decoration: underline;
}

    a:link, a:visited,
    a:active, a:hover {
        color: #333;
    }

    a:hover {
        background-color: #c7d1d6;
    }

header, footer, hgroup,
nav, section {
    display: block;
}

mark {
    background-color: #a6dbed;
    padding-left: 5px;
    padding-right: 5px;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

h1, h2, h3,
h4, h5, h6 {
    color: #000;
    margin-bottom: 0;
    padding-bottom: 0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

    h5 a:link, h5 a:visited, h5 a:active {
        padding: 0;
        text-decoration: none;
    }

/* Forms
----------------------------------------------------------*/
fieldset {
    border: 1px;
    margin: 0;
    padding: 15px;
    border: 1px solid #e2e2e2;
}

    fieldset legend {
        font-weight: 600;
        font-size: 1.2em;
    }

    fieldset ol {
        padding: 0;
        list-style: none;
    }

        fieldset ol li {
            padding-bottom: 5px;
        }

label {
    font-weight: 600;
}

    label.checkbox {
        display: inline;
    }

input, textarea {
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #16195B;
    padding: 3px;
    width: 300px;
}

textarea { /* Font van textarea gelijk maken aan input textbox controls. */
    font: caption;
    font-size: 1.153em;
}

    input:focus, textarea:focus {
        border: 1px solid #7ac0da;
    }

input[type="checkbox"],
input[type="radio"] {
    background: transparent;
    border: inherit;
    width: auto;
}

input[type="submit"],
input[type="button"],
button {
    background-color: #97bf0e;
    color: #fff;
    border: 1px solid #97bf0e;
    cursor: pointer;
    font-weight: 600;
    padding: 3px;
    margin-right: 6px;
    width: auto;
}

td input[type="submit"],
td input[type="button"],
td button {
    /* padding: 4px; */ /* uitgeschakeld omdat zoeken knop in werknemers overzicht te hoog werd */
    margin-right: 2px;
}

    td button.ui-datepicker-trigger {
        padding: 1px;
        margin-left: 1px;
    }

/* Styles for editor and display helpers
----------------------------------------------------------*/
.required {
    color: #97BF0E;
}

.editTable {
}

    .editTable th {
        text-align: left;
    }

.width-normal input.stringeditor {
    width: 300px;
}

.width-narrow input.stringeditor {
    width: 300px;
}

.width-narrower input.stringeditor {
    width: 300px;
}

.width-wide input.stringeditor {
    width: 300px;
}

.width-wider input.stringeditor {
    width: 300px;
}

.width-normal select.dropdowneditor {
    width: 308px;
}

.width-narrow select.dropdowneditor {
    width: 300px;
}

.width-narrower select.dropdowneditor {
    width: 300px;
}

.width-wide select.dropdowneditor {
    width: 300px;
}

.width-wider select.dropdowneditor {
    width: 300px;
}

.width-normal input.datetimeeditor {
    width: 280px;
}

.width-narrow input.datetimeeditor {
    width: 300px;
}

.width-narrower input.datetimeeditor {
    width: 300px;
}

.width-wide input.datetimeeditor {
    width: 300px;
}

.width-wider input.datetimeeditor {
    width: 300px;
}

.width-normal input.text-box {
    width: 280px;
}

.width-narrow input.text-box {
    width: 300px;
}

.width-narrower input.text-box {
    width: 300px;
}

.width-wide input.text-box {
    width: 300px;
}

.width-wider input.text-box {
    width: 300px;
}

.width-wider textarea.text-box {
    width: 600px;
}

.display-label,
.editor-label {
    margin: 1px 0 0 0;
    font-size: 0.85em;
    padding: 2px 10px 0 0;
    vertical-align: top;
}

.display-label-underline {
    margin: 1px 0 0 0;
    font-size: 0.85em;
    padding: 2px 10px 0 0;
    text-decoration: underline;
}

.editor-field {
    margin: 0 5px 0 0;
    font-size: 0.85em;
    color: #16195B;
}

.dropdowneditor {
    margin: 0 5px 0 0;
    color: #16195B;
}

.display-field {
    padding: 2px 2px 0px 10px;
    color: #16195B;
    margin: 1px 5px 0 0;
    font-size: 1em;
}

.display-field-underline {
    padding: 2px 2px 0px 10px;
    color: #16195B;
    margin: 1px 5px 0 0;
    font-size: 0.85em;
    text-decoration: underline;
}

.editor-field > input[type=checkbox] {
    margin: 0.6em 1.5em 0 0;
}

.display-label-dialog,
.editor-label-dialog,
.editor-label-dialog-hor,
.display-label-dialog-hor {
    padding: 0.3em 0.5em 0 0;
    height: 2em;
}

.editor-field-dialog {
    padding: 0em 1.5em 0 0;
    height: 2em;
}

.display-field-dialog {
    color: #444;
    padding: 0.2em 1.5em 0 0;
    height: 2em;
}

.text-box {
    width: 300px; /* 30em; */
}

    .text-box.multi-line {
        height: 6.5em;
    }

.tri-state {
    width: 6em;
}


/* styles for validation helpers */
.field-validation-error {
    color: #e80c4d;
    font-weight: bold;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #e80c4d;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid {
    display: none;
}


/* tables
----------------------------------------------------------*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0.75em;
    border: 0 none;
}

    table.itemlijst {
        border: 1px;
        border-color: #dfd9c3;
        border-style: solid;
        padding: 10px;
    }

        table.itemlijst th {
            font-size: 1.0em;
            text-align: left;
            border: none 0px;
            padding: 5px 15px 5px 5px;
            color: #16195B;
        }

        table.itemlijst td {
            padding-right: 5px;
            vertical-align: baseline;
        }

            table.itemlijst td.iconLink {
                padding: 0px;
                vertical-align: middle;
            }

    table.dossier td {
        font-size: 0.9em;
    }

    table.zebra tr:nth-child(odd) {
        background-color: #f2f2f2;
    }

th a {
    display: block;
    position: relative;
}

    th a:link, th a:visited, th a:active, th a:hover {
        color: #333;
        font-weight: 600;
        text-decoration: none;
        padding: 0;
    }

    th a:hover {
        color: #000;
    }

th.asc a, th.desc a {
    margin-right: .75em;
}

    th.asc a:after, th.desc a:after {
        display: block;
        position: absolute;
        right: 0em;
        top: 0;
        font-size: 0.75em;
    }

    th.asc a:after {
        content: '▲';
    }

    th.desc a:after {
        content: '▼';
    }

td {
    padding: 2px 5px 2px 5px;
    border: 0 none;
}

tr.pager td {
    padding: 0 0.25em 0 0;
}

/* main layout
----------------------------------------------------------*/
.content-wrapper {
    margin: 0 auto;
    max-width: 960px;
}

.content-wrapperNew { /*todo: deze moet blijven*/
    background: #fff;
    /*margin: 0 auto;*/
}

#body {
    background-color: #fff;
    clear: both;
    /*padding-top: 6.8vh;*/
}

#newBody { /*todo: deze moet blijven*/
    padding-bottom: 35px;
    padding-top: 6.8vh;
    padding-left: max(15.5em, 12.71vw);
    position: relative;
    background: none;
}

.main-content {
    background: url("../images/accent.png") no-repeat;
    padding: 15px;
    min-height: 500px;
}

.newMain-title { /*todo: laten staan*/
    margin-top: 0;
    text-align: left;
    color: #7C7C7C;
    font-size: 2.6em;
    display: inline-block;
}

.main-title {
    margin-top: -5px;
    text-align: left;
    color: #999999;
}

.featured + .main-content {
    background: url("../images/IrisA-Accent.png") no-repeat;
}

header .content-wrapper {
    padding-top: 20px;
}

footer {
    clear: both;
    background-color: #FFF;
    font-size: .8em;
    height: 100px;
}


/* site title
----------------------------------------------------------*/
.site-title {
    color: #c8c8c8;
    font-family: Trebuchet MS, Rockwell, Consolas, "Courier New", Courier, monospace;
    font-size: 2.3em;
    margin: 0;
}

    .site-title a, .site-title a:hover, .site-title a:active {
        background: none;
        color: #c8c8c8;
        outline: none;
        text-decoration: none;
    }

#box1 {
    box-shadow: -8px -8px 15px 2px #404040;
}

#box2 {
    box-shadow: 8px -8px 15px 2px #404040;
}

#box3 {
    box-shadow: -8px 8px 15px 2px #404040;
}

#box4 {
    box-shadow: 8px 8px 15px 2px #404040;
}


a.Verzuim-logo-png, a.Verzuim-logo-png:hover, a.Verzuim-logo-png:active {
    display: block;
    background: url("../images/img_logo_Verzuim.png") no-repeat center;
    background-size: 115px 62px;
    width: 115px;
    height: 62px;
}

a.Verzuim-logo-pngNew, a.Verzuim-logo-pngNew:hover, a.Verzuim-logo-pngNew:active {
    display: block;
    background: url("../images/img_logo_Verzuim.png") no-repeat center;
    background-size: max(4.3256em, 11.398vh) max(2.332em, 6.1455vh);
    width: max(4.3256em, 11.398vh);
    height: max(2.332em, 6.1455vh);
    position: relative;
    z-index: 10;
}

a.BMW-logo-png, a.BMW-logo-png:hover, a.BMW-logo-png:active {
    display: block;
    background: url("../images/img_logo_BMW.png") no-repeat center;
    background-size: 115px 62px;
    width: 115px;
    height: 62px;
}

a.BMW-logo-pngNew, a.BMW-logo-pngNew:hover, a.BMW-logo-pngNew:active {
    display: block;
    background: url("../images/img_logo_BMW.png") no-repeat center;
    background-size: max(4.3256em, 11.398vh) max(2.332em, 6.1455vh);
    width: max(4.3256em, 11.398vh);
    height: max(2.332em, 6.1455vh);
    position: relative;
    z-index: 10;
}


/* login
----------------------------------------------------------*/
#login {
    display: block;
    font-size: .85em;
    margin: 0 0 10px;
    text-align: right;
}

    #login a {
        background-color: #d3dce0;
        margin-left: 10px;
        margin-right: 3px;
        padding: 2px 3px;
        text-decoration: none;
    }

        #login a.username {
            background: none;
            margin: 0;
            padding: 0;
            text-decoration: underline;
        }

    #login ul {
        margin: 0;
    }

    #login li {
        display: inline;
        list-style: none;
    }

#loginNew {
    display: block;
    font-size: .85em;
    text-align: right;
    min-height: 14em;
    height: 16vh;
    min-width: 25em;
    width: 15vw;
    position: absolute;
    background: #DFDFDF;
    border-radius: 2.5em;
    margin-right: 2.8vw;
    /*margin-top: 5.8em;*/
    top: 6.8%;
    right: 0;
    align-items: center;
    align-content: center;
    /*display: flex;*/
    /*z-index: 10;*/
}

    #loginNew a {
        background-color: transparent;
        margin-right: 3px;
        padding: 2px 3px;
        text-decoration: none;
    }

        #loginNew a:hover {
            background-color: transparent;
            margin-right: 3px;
            padding: 2px 3px;
            text-decoration: none;
        }

        #loginNew a.usernameNew {
            color: #16195B;
            font-size: 1.6em;
            background: none;
            position: relative;
            display: block;
            margin-left: 8%;
            z-index: 10;
        }

            #loginNew a.usernameNew + .hoverPopup {
                font-size: 1.2em;
                margin-top: max(5.7em, 7.8vh);
                margin-right: 3em;
                text-align: center;
                z-index: 102;
            }

    #MessageIndicatorLight, .SaveForEffect {
        -webkit-mask-image: linear-gradient(-75deg, rgba(104,168,222,1) 43%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, rgba(104,168,222,1) 57%);
        -webkit-mask-size: 200%;
        animation: shine 3s infinite;
        width: 5em;
        height: 5em;
        background: transparent;
        border: solid 0.5em #68A8DE;
        border-radius: 5em;
        position: absolute;
        float: right;
        display: none;
    }

    @-webkit-keyframes shine {
        from {
            -webkit-mask-position: 150%;
        }

        to {
            -webkit-mask-position: -50%;
        }
    }

        #MessageIndicator {
            width: 3.53em;
            height: 3.53em;
            background: #DFDFDF;
        }

            #MessageIndicator > a.message_btn, a.message_btn:hover, a.message_btn:active {
                margin: 0.2vh auto;
            }

    #countDownNew {
        color: #16195b;
        font-size: 2.1em;
        /*font-weight: bold;*/
        margin: 0 auto;
    }

    #SessieVerlengen, #SessieVerlengen:hover {
        background: none;
        color: inherit;
        z-index: 101;
        position: relative;
    }

        #SessieVerlengen + .hoverPopup {
            font-size: 0.6em;
            margin-top: max(1.3em, 2vh);
            margin-left: min(-3em, -2vh);
            text-align: center;
            z-index: 102;
        }

                /*#SessieVerlengen > span {
                    min-width: 81.47px;
                    display: inline-block;
                    margin-right: 6px;
                }*/

    #loginNew ul {
        margin: 0;
    }

    #loginNew li {
        display: inline;
        list-style: none;
    }

    #ExtendSessionLogout {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 40%;
        border-radius: 2.5em;
        background-color: #DFDFDF;
        z-index: 101;
        position: absolute;
    }

    .loginRol {
        color: #16195B;
        font-size: 1.4em;
        font-style: italic;
        position: relative;
        margin-left: 10%;
    }

    .uitlogIcon, .uitlogIcon:hover, .uitlogIcon:active {
        background: url("../Icons/Logout.png") no-repeat center;
        height: max(4.4vh, 3.84em);
        width: max(4.2vh, 3.667em);
        display: inline-block;
        background-size: max(4.2vh, 3.667em) max(4.4vh, 3.84em); /*eerste is breedte de tweede is voor de hoogte*/
        z-index: 101;
        position: relative;
    }

        .uitlogIcon + .hoverPopup {
            font-size: 1.2em;
            margin-top: max(7.5em, 10.3vh);
            left: 72%;
            transform: translateX(-29%);
            z-index: 101;
        }

/* menu
----------------------------------------------------------*/
ul#menu {
    font-size: 1.1em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: right;
    float: left;
    display: flex;
}

    ul#menu li {
        display: inline;
        list-style: none;
        padding-left: 13px;
    }

        ul#menu li a {
            background: none;
            color: #999;
            text-decoration: none;
        }

            ul#menu li a:hover {
                color: #333;
                text-decoration: none;
            }

.navNew {
    width: 7.1vw;
    min-width: 10em;
    height: 85.7vh;
    display: block;
    /*position: -webkit-sticky;*/
    position: absolute;
    border-radius: 2.6vh;
    margin-left: 2.8vw;
    margin-top: 6.8vh;
    background: #16195B;
    z-index: 10;
}

ul#menuNew {
    font-size: 1.1em;
    font-weight: 600;
    /*margin: 0 0 5px;*/
    padding: 0;
    text-align: left;
    width: 100%;
    height: 90%;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    margin: 0;
    position: relative;
}

    ul#menuNew li {
        display: flex;
        list-style: none;
        /*padding-left: 13px;*/
        height: auto;
        align-items: center;
    }

        ul#menuNew li a {
            /*color: #BEBEBE;*/
            text-decoration: none;
            height: 4.795vh;
            width: 4.2vh;
            display: inline-block;
            margin: auto;
            z-index: 2;
        }

            ul#menuNew li a:hover {
                /*color: #16195B;*/
                background-color: #fff;
                border-radius: 15em;
                text-decoration: none;
            }


#itemHome {
    background: url("../Icons/Home_btn.png") no-repeat center;
    background-size: 4.2vh;
}

    #itemHome:hover, #itemHome.menuItemSelected {
        background: url("../Icons/Home_btn_active.png") no-repeat center;
        background-size: 4.4vh;
    }

#itemAgenda {
    background: url("../Icons/Agenda_btn.png") no-repeat center;
    background-size: 4.4vh;
}

    #itemAgenda:hover, #itemAgenda.menuItemSelected {
        background: url("../Icons/Agenda_btn_active.png") no-repeat center;
        background-size: 4.4vh;
    }

#itemWerknemers, #itemMijn_werknemers {
    background: url("../Icons/Werknemers_btn.png") no-repeat center;
    background-size: 4.4vh;
}

    #itemWerknemers:hover, #itemWerknemers.menuItemSelected, #itemMijn_werknemers:hover, #itemMijn_werknemers.menuItemSelected {
        background: url("../Icons/Werknemers_btn_active.png") no-repeat center;
        background-size: 4.4vh;
    }

#itemWerkgevers, #itemWerkgever {
    background: url("../Icons/Werkgevers_btn.png") no-repeat center;
    background-size: 4.4vh;
}

    #itemWerkgevers:hover, #itemWerkgevers.menuItemSelected, #itemWerkgever:hover, #itemWerkgever.menuItemSelected {
        background: url("../Icons/Werkgevers_btn_active.png") no-repeat center;
        background-size: 4.4vh;
    }

#itemOpdrachtgevers {
    background: url("../Icons/Opdrachtgevers_btn.png") no-repeat center;
    background-size: 4.4vh;
}

    #itemOpdrachtgevers:hover, #itemOpdrachtgevers.menuItemSelected {
        background: url("../Icons/Opdrachtgevers_btn_active.png") no-repeat center;
        background-size: 4.4vh;
    }

#itemGebruikers {
    background: url("../Icons/Gebruikers_btn.png") no-repeat center;
    background-size: 4.4vh;
}

    #itemGebruikers:hover, #itemGebruikers.menuItemSelected {
        background: url("../Icons/Gebruikers_btn_active.png") no-repeat center;
        background-size: 4.4vh;
    }

#itemBeheer {
    background: url("../Icons/Mijn_gegevens_btn.png") no-repeat center;
    background-size: 4.4vh;
}

    #itemBeheer:hover, #itemBeheer.menuItemSelected {
        background: url("../Icons/Mijn_gegevens_btn_active.png") no-repeat center;
        background-size: 4.4vh;
    }

#itemBackoffice {
    background: url("../Icons/Backoffice_btn.png") no-repeat center;
    background-size: 4.4vh;
}

    #itemBackoffice:hover, #itemBackoffice.menuItemSelected {
        background: url("../Icons/Backoffice_btn_active.png") no-repeat center;
        background-size: 4.4vh;
    }

#itemSupport {
    background: url("../Icons/Support_btn.png") no-repeat center;
    background-size: 4.4vh;
}

    #itemSupport:hover, #itemSupport.menuItemSelected {
        background: url("../Icons/Support_btn_active.png") no-repeat center;
        background-size: 4.4vh;
    }

.menuItem:hover + .hoverPopup {
    margin-top: 4.5vh;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.9em;
    font-weight: bolder;
}

#menuSelection {
    position: absolute;
    /*top: 25%;*/
    /*margin-left: 2.2em;*/
    right: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.selectionPointerBase {
    height: 2.45vh;
    width: 4.9vh;
    background: none;
    position: relative;
    align-self: flex-end;
}

    .selectionPointerBase.boven::before {
        height: 2.45vh;
        width: 4.9vh;
        border-bottom-right-radius: 2.4vh;
        background: #16195B;
        display: block;
        vertical-align: middle;
        content: '';
    }

    .selectionPointerBase.onder::before {
        height: 2.45vh;
        width: 4.9vh;
        border-top-right-radius: 2.4vh;
        background: #16195B;
        display: block;
        vertical-align: middle;
        content: '';
    }

#selectionPointer {
    height: 4.9vh;
    width: 5.56vw;
    min-width: 7.8em;
    border-top-left-radius: 10em;
    border-bottom-left-radius: 10em;
    background: #fff;
    align-items: center;
    position: relative;
}

.menuItemSelected {
    color: #16195B !important;
    border-radius: 10em;
    text-decoration: none;
}

#submenu {
    width: 0;
    /*min-width: 7.059em;*/
    height: 100%;
    right: 0;
    z-index: 1;
    position: absolute;
    display: none;
    margin-right: 2px;
}

ul#submenuContent {
    width: 2.2vw;
    min-width: 2.7941em;
    height: 99.5%;
    margin: auto 0;
    right: 0;
    background-color: #fff;
    border-right: 2px solid #16195B;
    border-radius: 0 2.6vh 2.6vh 0;
    font-size: 1.1em;
    font-weight: 600;
    padding: 0;
    text-align: left;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
}

    ul#submenuContent li {
        display: flex;
        list-style: none;
        height: auto;
        align-items: center;
    }

        ul#submenuContent li a {
            text-decoration: none;
            height: 4.795vh;
            width: 4.2vh;
            display: inline-block;
            margin: auto;
            cursor: pointer;
        }

#itemAdressen.submenuItem {
    background: url("../Icons/Adres_btn.png") no-repeat center;
    background-size: 4.2vh;
}

    #itemAdressen.submenuItem:hover, #itemAdressen.submenuItem.menuItemSelected {
        background: url("../Icons/Adres_btn_active.png") no-repeat center;
        background-size: 4.4vh;
    }

#itemWerkgevers.submenuItem {
    background: url("../Icons/Werkgevers_btn_active.png") no-repeat center;
    background-size: 4.2vh;
}

    #itemWerkgevers.submenuItem:hover, #itemWerkgevers.submenuItem.menuItemSelected {
        background: url("../Icons/Werkgevers_Submenu_btn_active.png") no-repeat center;
        background-size: 4.4vh;
    }

#itemDossier.submenuItem, #itemRapportage.submenuItem {
    background: url("../Icons/Dossier_btn.png") no-repeat center;
    background-size: 4.2vh;
}

    #itemDossier.submenuItem:hover, #itemDossier.submenuItem.menuItemSelected, #itemRapportage.submenuItem:hover, #itemRapportage.submenuItem.menuItemSelected {
        background: url("../Icons/Dossier_btn_active.png") no-repeat center;
        background-size: 4.4vh;
    }

#itemGespreksnotities.submenuItem {
    background: url("../Icons/Gespreksnotities_btn.png") no-repeat center;
    background-size: 4.2vh;
}

    #itemGespreksnotities.submenuItem:hover, #itemGespreksnotities.submenuItem.menuItemSelected {
        background: url("../Icons/Gespreksnotities_btn_active.png") no-repeat center;
        background-size: 4.2vh;
    }

#itemAfspraken.submenuItem {
    background: url("../Icons/Agenda_btn_active.png") no-repeat center;
    background-size: 4.2vh;
}

    #itemAfspraken.submenuItem:hover, #itemAfspraken.submenuItem.menuItemSelected {
        background: url("../Icons/Agenda_Homescreen_icon.png") no-repeat center;
        background-size: 4.4vh;
    }

#itemFormulieren.submenuItem {
    background: url("../Icons/Formulieren_btn.png") no-repeat center;
    background-size: 4.2vh;
}

    #itemFormulieren.submenuItem:hover, #itemFormulieren.submenuItem.menuItemSelected {
        background: url("../Icons/Formulieren_btn_active.png") no-repeat center;
        background-size: 4.4vh;
    }

#itemExterne_documenten.submenuItem {
    background: url("../Icons/Externe_Documenten_btn.png") no-repeat center;
    background-size: 4.2vh;
}

    #itemExterne_documenten.submenuItem:hover, #itemExterne_documenten.submenuItem.menuItemSelected {
        background: url("../Icons/Externe_Documenten_btn_active.png") no-repeat center;
        background-size: 4.4vh;
    }

#itemBegeleidingsperiodes.submenuItem, #itemTrajecten.submenuItem {
    background: url("../Icons/Begeleidingsperiodes_btn.png") no-repeat center;
    background-size: 4.2vh;
}

    #itemBegeleidingsperiodes.submenuItem:hover, #itemBegeleidingsperiodes.submenuItem.menuItemSelected, #itemTrajecten.submenuItem:hover, #itemTrajecten.submenuItem.menuItemSelected {
        background: url("../Icons/Begeleidingsperiodes_btn_active.png") no-repeat center;
        background-size: 4.4vh;
    }

#itemOdisRapporten.submenuItem {
    background: url("../Icons/OdisRapporten_btn.png") no-repeat center;
    background-size: 4.2vh;
}

    #itemOdisRapporten.submenuItem:hover, #itemOdisRapporten.submenuItem.menuItemSelected {
        background: url("../Icons/OdisRapporten_btn_active.png") no-repeat center;
        background-size: 4.4vh;
    }

#itemZiekteperiodes.submenuItem {
    background: url("../Icons/Ziekteperiodes_btn.png") no-repeat center;
    background-size: 4.2vh;
}

    #itemZiekteperiodes.submenuItem:hover, #itemZiekteperiodes.submenuItem.menuItemSelected {
        background: url("../Icons/Ziekteperiodes_btn_active.png") no-repeat center;
        background-size: 4.4vh;
    }

#itemWerkgever_Informatie.submenuItem {
    background: url("../Icons/WerkgeverInformatie_btn.png") no-repeat center;
    background-size: 4.2vh;
}

    #itemWerkgever_Informatie.submenuItem:hover, #itemWerkgever_Informatie.submenuItem.menuItemSelected {
        background: url("../Icons/WerkgeverInformatie_btn_active.png") no-repeat center;
        background-size: 4.4vh;
    }

#itemE-consult.submenuItem {
    background: url("../Icons/E-consult_btn.png") no-repeat center;
    background-size: 4.2vh;
}

    #itemE-consult.submenuItem:hover, #itemE-consult.submenuItem.menuItemSelected {
        background: url("../Icons/E-consult_btn_active.png") no-repeat center;
        background-size: 4.4vh;
    }

    #itemE-consult.submenuItem + .hoverPopup {
        white-space: nowrap;
    }



/*#itemHome {
    background: "~/Content/images/btn_home.png";
    color: #fff;
}*/

.infoContainer {
    width: 30vw;
    min-height: 3em;
    color: #16195B;
    background-color: #DFDFDF;
    font-size: 1.3em;
    font-weight: bold;
    border-radius: 2em;
    text-align: center;
    margin: 0.5em;
    display: inline-block;
    justify-content: center;
    position: absolute;
}

    .infoContainer.Hoofdvestigingsadres {
        background-color: #E5EFC3;
    }

#extraInfo {
    width: 15vw;
    min-width: 16.3em;
    height: 62.1vh;
    max-height: calc(10vh-100em);
    background: #DFDFDF;
    border-radius: 2em;
    text-align: center;
    top: max(30.3vh, 14.55em);
    right: 0;
    margin-right: 2.8vw;
    position: absolute;
    color: #16195B;
    font-size: 1.3em;
    font-weight: bold;
    text-align: center;
}

#extraInfoContainer {
    position: relative;
    width: 100%;
    margin: 2vh auto;
}

    #extraInfoContainer * > #userContainer {
        overflow-y: auto;
        height: 55vh;
        scrollbar-color: #7C7C7C transparent;
        scrollbar-width: thin;
    }

        #extraInfoContainer * > #userContainer::-webkit-scrollbar {
            width: 0.6vw;
        }

        #extraInfoContainer * > #userContainer::-webkit-scrollbar-track {
            margin-top: 0.5em;
            margin-bottom: 0.5em;
            background: #7C7C7C;
            border: 0.3em solid rgba(0, 0, 0, 0);
            background-clip: padding-box;
        }

        #extraInfoContainer * > #userContainer::-webkit-scrollbar-thumb {
            border-radius: 10em;
            background-clip: padding-box;
            border: 0.225em solid rgba(0, 0, 0, 0);
            background-color: #7C7C7C;
        }

/* page elements
----------------------------------------------------------*/
/* featured */

.mainContent {
    width: min(calc(100vw - 43.5em), 66vw);
}

.ParameterContainer {
    width: min(calc(100vw - 43.5em), 66vw);
}

table.ParameterContainer {
    /*position: absolute;*/
    margin-top: 0;
    table-layout: fixed;
}

.ParameterEntry {
    padding: 0;
    position: relative;
}

.pageLines {
    position: relative;
    width: min(calc(100vw - 43.5em), 66vw);
    margin-left: -0em;
    margin-top: 1.8vh;
    color: #7C7C7C;
}

/*****************/
/**** Buttons ****/
/*****************/
.toevoegen_btn, .toevoegen_btn:hover, .toevoegen_btn:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    background: url("../Icons/Toevoegen_btn.png") no-repeat center;
    background-size: 4em;
    height: 2.4em;
    width: 2.4em;
    border-radius: 20em;
    border: 0.3em solid #97BF0E;
    padding: 0;
    display: flex;
    cursor: pointer;
}

    .toevoegen_btn:disabled {
        display: flex;
        background: url("../Icons/Toevoegen_btn_disabled.png") no-repeat center;
        background-size: 4em;
        height: 3em;
        width: 3em;
        border-radius: 20em;
        border: 0.3em solid #DFDFDF;
        cursor: default;
    }

    .toevoegen_btn.formButtons {
        background-size: 2.5em;
        border-color: transparent;
    }

#WelkomsberichtToevoegen {
    left: 50%;
    transform: translateX(-50%);
    bottom: 3.8vh;
    background-size: 3em;
    width: 1.708em;
    height: 1.708em;
    margin-top: 1em;
    position: absolute;
}



.toevoegen_btn_tegenhanger, .toevoegen_btn_tegenhanger:hover, .toevoegen_btn_tegenhanger:active {
    /*text-decoration: none !important;
        text-decoration-line: none !important;*/
    background: none;
    background-size: 3em;
    border: none;
    height: 3em;
    width: 3em;
    display: flex;
}

.removeParameters_btn, .removeParameters_btn:hover, .removeParameters_btn:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    background: url("../Icons/Filter_icon.png") no-repeat center;
    background-color: #DFDFDF;
    background-size: 2.8em;
    background-position: -1px 0px;
    height: 2.4em;
    width: 2.4em;
    border-radius: 20em;
    border: 0.3em solid #E80C4D;
    padding: 0;
    display: flex;
    position: relative;
    cursor: pointer;
}

    .removeParameters_btn:before {
        position: absolute;
        content: "";
        left: -0.15em;
        top: 43%;
        right: -0.2em;
        border-top: 0.3em solid;
        border-color: inherit;
        -webkit-transform: rotate(-35deg);
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
        transform: rotate(-35deg);
    }

.delete_btn, .delete_btn:hover, .delete_btn:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    background: url("../Icons/Annuleren_Delete_btn.png") no-repeat center;
    background-size: 2.5em;
    height: 3em;
    width: 3em;
    /*margin-top: -1em;*/
    cursor: pointer;
    float: right;
    padding: 0;
}

#extraInfo .delete_btn {
    background-size: 2em;
    height: 2.308em;
    width: 2.308em;
}

.delete_btn.inactive + .hoverPopup {
    width: 12em;
    top: 41.5vh;
    right: 1vw;
}

    .delete_btn.inactive + .hoverPopup:before {
        content: 'Stop eerst het E-consult';
    }

.save_btn, .save_btn:hover, .save_btn:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    background: url("../Icons/Accepteren_Opslaan_btn.png") no-repeat center;
    background-size: 2.5em;
    height: 3em;
    width: 3em;
    /*margin-top: -1em;*/
    cursor: pointer;
    float: right;
    padding: 0;
}

    #extraInfo .save_btn {
        background-size: 2em;
        height: 2.308em;
        width: 2.308em;
    }


    .save_btn.inactive + .hoverPopup {
        width: 12em;
        top: 41.5vh;
        right: 1vw;
    }

        .save_btn.inactive + .hoverPopup:before {
            content: 'Stop eerst het E-consult';
        }

.multiple_save_btn, .multiple_save_btn:hover, .multiple_save_btn:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    background: url("../Icons/Accepteren_Opslaan_btn(meerdere).png") no-repeat center;
    background-size: 2.5em;
    height: 3em;
    width: 3em;
    /*margin-top: -1em;*/
    cursor: pointer;
    float: right;
    padding: 0;
}

.supervision_save_btn, .supervision_save_btn:hover, .supervision_save_btn:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    background: url("../Icons/Accepteren_Opslaan_btn(supervisie).png") no-repeat center;
    background-size: 2.5em;
    height: 3em;
    width: 3em;
    /*margin-top: -1em;*/
    cursor: pointer;
    float: right;
    padding: 0;
}

.save_withTraject_btn, .save_withTraject_btn:hover, .save_withTraject_btn:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    background: url("../Icons/Begeleidingsperiodes_toevoegen_btn.png") no-repeat center;
    /*content: url("../Icons/Accepteren_Opslaan_btn.png") no-repeat center);*/
    background-size: 2.5em;
    height: 3em;
    width: 3em;
    /*margin-top: -1em;*/
    cursor: pointer;
    float: right;
    padding: 0;
}

    .save_withTraject_btn.inactive + .hoverPopup {
        width: 12em;
        top: 41.5vh;
        right: 1vw;
    }

        .save_withTraject_btn.inactive + .hoverPopup:before {
            content: 'Stop eerst het E-consult';
        }

.recover_btn, .recover_btn:hover, .recover_btn:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    background: url("../Icons/Herstellen_Recover_btn.png") no-repeat center;
    background-size: 2.5em;
    height: 3em;
    width: 3em;
    /*margin-top: -1em;*/
    cursor: pointer;
    float: right;
    padding: 0;
}

#extraInfo .recover_btn {
    background-size: 2em;
    height: 2.308em;
    width: 2.308em;
}

.send_btn, .send_btn:hover, .send_btn:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    background: url("../Icons/Verzenden_btn.png") no-repeat center;
    background-size: 2.5em;
    height: 3em;
    width: 3em;
    /*margin-top: -1em;*/
    cursor: pointer;
    float: right;
    padding: 0;
}

#extraInfo .send_btn {
    background-size: 2em;
    height: 2.308em;
    width: 2.308em;
}

.remove_btn, .remove_btn:hover, .remove_btn:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    background: url("../Icons/Verwijderen_btn.png") no-repeat center;
    background-size: 2.5em;
    height: 3em;
    width: 3em;
    cursor: pointer;
    display: flex;
    padding: 0;
}

.multiple_remove_btn, .multiple_remove_btn:hover, .multiple_remove_btn:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    background: url("../Icons/Verwijderen_btn(meerdere).png") no-repeat center;
    background-size: 2.5em;
    height: 3em;
    width: 3em;
    cursor: pointer;
    display: flex;
    padding: 0;
}

.edit_btn, .edit_btn:hover, .edit_btn:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    background: url("../Icons/Agenda_Wijziging_Homescreen_icon.png") no-repeat center;
    background-size: 2.5em;
    height: 3em;
    width: 3em;
    cursor: pointer;
    display: flex;
    padding: 0;
}

.show_btn, .show_btn:hover, .show_btn:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    background: url("../Icons/Formulier_inzien_btn.png") no-repeat center;
    background-size: 2.5em;
    height: 3em;
    width: 3em;
    cursor: pointer;
    display: flex;
    padding: 0;
}

.communication_btn, .communication_btn:hover, .communication_btn:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    background: url("../Icons/VerzendenTerugkoppeling_btn.png") no-repeat center;
    background-size: 2.5em;
    height: 3em;
    width: 3em;
    cursor: pointer;
    display: flex;
    padding: 0;
}

.start_btn, .start_btn:hover, .start_btn:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    background: url("../Icons/Start_btn.png") no-repeat 80% 50%;
    background-size: 2.5em;
    height: 3em;
    width: 3em;
    cursor: pointer;
    display: flex;
    padding: 0;
}

.message_btn, .message_btn:hover, .message_btn:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    background: url("../Icons/Bericht_icon.png") no-repeat center;
    background-size: 2.5em;
    height: 3em;
    width: 3em;
    cursor: pointer;
    float: right;
    padding: 0;
}

#EconsultStarten.hoverPopupShow:hover + .hoverPopup {
    margin: 0.5em auto;
    font-size: 1em;
    width: 10em;
    left: -2em;
}

#EconsultStarten.inactive + .hoverPopup:before {
    content: 'Werknemer is nog niet aanwezig';
}

#EconsultStarten + .hoverPopup:before {
    content: 'Werknemer zit klaar';
}

.CameraPermission_btn, .CameraPermission_btn:hover, .CameraPermission_btn:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    background: url("../Icons/Camera_toestemming_btn.png") no-repeat 50% 50%;
    background-size: 2.5em;
    height: 3em;
    width: 3em;
    cursor: pointer;
    display: flex;
    padding: 0;
}

.MicrophonePermission_btn, .MicrophonePermission_btn:hover, .MicrophonePermission_btn:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    background: url("../Icons/Microfoon_toestemming_btn.png") no-repeat 50% 50%;
    background-size: 2.5em;
    height: 3em;
    width: 3em;
    cursor: pointer;
    display: flex;
    padding: 0;
}

#addMenuContainer {
    position: absolute;
    background: transparent;
    width: 1px;
    height: 1px;
    display: none;
    margin-top: -3em;
    z-index: 20;
}

.addMenu {
    border: 1px solid #fff;
    border-radius: 3em;
    height: 3em;
    width: 3em;
    cursor: pointer;
    position: absolute;
    background-color: #DFDFDF !important;
}

#addMenuContainer:hover .addMenu:not(.Submenu) {
    opacity: 0.3;
}

#addMenuContainer:hover .addMenu:hover {
    opacity: 1;
}

.addMenu.hoverPopupShow + .hoverPopup {
    text-align: center;
}

.addMenu.original {
    -webkit-transform: rotate(330deg) translate(4em) rotate(-330deg);
    -moz-transform: rotate(330deg) translate(4em) rotate(-330deg);
    -ms-transform: rotate(330deg) translate(4em) rotate(-330deg);
    -o-transform: rotate(330deg) translate(4em) rotate(-330deg);
    transform: rotate(330deg) translate(4em) rotate(-330deg);
}

.addMenu.twee-twee {
    -webkit-transform: rotate(150deg) translate(4em) rotate(-150deg);
    -moz-transform: rotate(150deg) translate(4em) rotate(-150deg);
    -ms-transform: rotate(150deg) translate(4em) rotate(-150deg);
    -o-transform: rotate(150deg) translate(4em) rotate(-150deg);
    transform: rotate(150deg) translate(4em) rotate(-150deg);
}

    .addMenu.twee-twee.hoverPopupShow + .hoverPopup {
        margin-top: 4em;
        margin-left: -5em;
    }

.addMenu.twee-drie {
    -webkit-transform: rotate(90deg) translate(4em) rotate(-90deg);
    -moz-transform: rotate(90deg) translate(4em) rotate(-90deg);
    -ms-transform: rotate(90deg) translate(4em) rotate(-90deg);
    -o-transform: rotate(90deg) translate(4em) rotate(-90deg);
    transform: rotate(90deg) translate(4em) rotate(-90deg);
}

.addMenu.drie-drie {
    -webkit-transform: rotate(210deg) translate(4em) rotate(-210deg);
    -moz-transform: rotate(210deg) translate(4em) rotate(-210deg);
    -ms-transform: rotate(210deg) translate(4em) rotate(-210deg);
    -o-transform: rotate(210deg) translate(4em) rotate(-210deg);
    transform: rotate(210deg) translate(4em) rotate(-210deg);
}

.addMenu.twee-vijf {
    -webkit-transform: rotate(42deg) translate(4em) rotate(-42deg);
    -moz-transform: rotate(42deg) translate(4em) rotate(-42deg);
    -ms-transform: rotate(42deg) translate(4em) rotate(-42deg);
    -o-transform: rotate(42deg) translate(4em) rotate(-42deg);
    transform: rotate(42deg) translate(4em) rotate(-42deg);
}

.addMenu.drie-vijf {
    -webkit-transform: rotate(114deg) translate(4em) rotate(-114deg);
    -moz-transform: rotate(114deg) translate(4em) rotate(-114deg);
    -ms-transform: rotate(114deg) translate(4em) rotate(-114deg);
    -o-transform: rotate(114deg) translate(4em) rotate(-114deg);
    transform: rotate(114deg) translate(4em) rotate(-114deg);
}

.addMenu.vier-vijf {
    -webkit-transform: rotate(186deg) translate(4em) rotate(-186deg);
    -moz-transform: rotate(186deg) translate(4em) rotate(-186deg);
    -ms-transform: rotate(186deg) translate(4em) rotate(-186deg);
    -o-transform: rotate(186deg) translate(4em) rotate(-186deg);
    transform: rotate(186deg) translate(4em) rotate(-186deg);
}

.addMenu.vijf-vijf {
    -webkit-transform: rotate(258deg) translate(4em) rotate(-258deg);
    -moz-transform: rotate(258deg) translate(4em) rotate(-258deg);
    -ms-transform: rotate(258deg) translate(4em) rotate(-258deg);
    -o-transform: rotate(258deg) translate(4em) rotate(-258deg);
    transform: rotate(258deg) translate(4em) rotate(-258deg);
}

/*.addMenu.light-green {
        background-color: #E5EFC3 !important;
    }

    .addMenu.green {
        background-color: #CBDF87 !important;
    }

    .addMenu.light-yellow {
        background-color: #FCE8C2 !important;
    }

    .addMenu.yellow {
        background-color: #F8D184 !important;
    }

    .addMenu.light-blue {
        background-color: #DBE7F1 !important;
    }

    .addMenu.blue {
        background-color: #B6CEE2 !important;
    }

    .addMenu.light-orange {
        background-color: #FEE0CD !important;
    }

    .addMenu.light-purple {
        background-color: #E2CFE0 !important;
    }*/

/*.addMenu.Submenu {
    visibility: hidden;
}

    #addMenuContainer .addMenu.SelectedMenu {
        visibility: visible;*/
/*opacity: 1;*/
/*}*/

.buttonContainer {
    position: absolute;
    width: 94%;
}

.modalButtonBackground {
    background: #fff;
    border-radius: 2em;
    height: 3em;
    width: 3em;
    float: right;
    justify-content: center;
    margin-top: 0.3em;
    margin-left: 0.5em;
    position: relative;
}

    .modalButtonBackground > .hoverPopup.annuleren {
        left: -0.3vw;
        top: 4.5vh;
    }

    .modalButtonBackground > .hoverPopup.opslaan {
        left: -0.05vw;
        top: 4.5vh;
    }

        .modalButtonBackground > .hoverPopup.dezeOpslaan, .modalButtonBackground > .hoverPopup.allenOpslaan {
            left: -0.8vw;
            top: 4.5vh;
            white-space: nowrap;
        }

    .modalButtonBackground > .hoverPopup.verwijderen {
        left: -0.6vw;
        top: 4.5vh;
    }
    
        .modalButtonBackground > .hoverPopup.dezeVerwijderen, .modalButtonBackground > .hoverPopup.allenVerwijderen {
            left: -1.3vw;
            top: 4.5vh;
            white-space: nowrap;
        }

    .modalButtonBackground > .hoverPopup.toevoegen, .modalButtonBackground > .hoverPopup.herstellen {
        left: -0.4vw;
        top: 4.5vh;
    }

    .modalButtonBackground > .hoverPopup.terug {
        left: 0.33vw;
        top: 4.5vh;
    }

    .modalButtonBackground > .hoverPopup.verzenden {
        left: -0.3vw;
        top: 4.5vh;
    }

    .modalButtonBackground > .hoverPopup.wijzigen {
        left: -0.1vw;
        top: 4.5vh;
    }

    .modalButtonBackground > .hoverPopup.opslaanSupervisie {
        left: -1.4vw;
        top: 4.5vh;
        white-space: nowrap;
    }

.ExtraInfoButtonBackground {
    background-color: #DFDFDF;
    border-radius: 2em;
    height: 2.308em;
    width: 2.308em;
    float: right;
    justify-content: center;
    bottom: 0;
    margin-top: 0.3em;
    margin-left: 0.5em;
}

    .ExtraInfoButtonBackground > .hoverPopup.opslaan {
        right: 2.2vw;
        top: 4.9vh;
    }

    .ExtraInfoButtonBackground > .hoverPopup.herstellen {
        right: -0.9vw;
        top: 4.9vh;
    }

#extraInfo .buttonContainer {
    position: absolute;
    bottom: -1em;
    width: 87%;
}

.email_btn, .email_btn:hover, .email_btn:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    background: url("../Icons/Email_btn.png") no-repeat scroll;
    background-size: 2em;
    height: 2em;
    width: 2em;
    cursor: pointer;
    display: flex;
    padding: 0;
}

/**************/
/* New Input  */
/**************/
.newInput, .newInput:-internal-autofill-selected {
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    font-size: 1.3em;
    font-weight: bold;
    color: #16195B !important;
    height: 1.55em;
    width: 22.328em;
    background-color: #DFDFDF !important;
    border-width: 0.21em;
    border-style: solid;
    border-color: #7C7C7C;
    border-radius: 0.47em;
    margin: 0.4em 0;
    padding-left: 0.45vw;
    display: block;
}

    .newInput:-webkit-autofill, /*Voor de achtergrondkleur als de autofill optie wordt gebruikt (aanpassen kleuren + plaatje verdwijnt + input wordt korter?)*/
    .newInput:-internal-autofill-selected,
    .newInput:-webkit-autofill:hover,
    .newInput:-webkit-autofill:focus,
    .newInput:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px #DFDFDF inset !important;
        -webkit-text-fill-color: #16195B !important;
    }

    .newInput:-webkit-autofill { /*Voor de tekstkleur als de autofill optie wordt gebruikt (kan dit niet samen met hierboven?)*/
        /*-webkit-text-*/
    }

    .newInput:focus {
        outline: none;
        border-width: 0.21em;
        border-style: solid;
        border-color: #16195B;
        border-radius: 0.47em;
    }

    .newInput.disabled {
        cursor: default;
        border-width: 0.21em;
        border-style: solid;
        border-color: #DFDFDF;
        border-radius: 0.47em;
    }

        .newInput.disabled:not(.newCheckbox), newInput.disabled:not(.newRadioButton) {
            pointer-events: none;
        }

    .newInput.mini {
        width: 3.5em;
    }

#extraInfo .newInput {
    width: 69%;
    font-size: 1.01em;
    margin: 1.5vh auto;
}

.ParameterEntry .newInput {
    width: 88.87%;
}

.newInputDisplay {
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    font-size: 1.3em;
    font-weight: bold;
    color: #16195B !important;
    height: 1.55em;
    width: 22.328em;
    background-color: transparent !important;
    border-width: 0.21em;
    border-style: solid;
    border-radius: 0.47em;
    border-color: transparent;
    margin: 0.4em 0;
    padding-left: 0.45vw;
    display: block;
    pointer-events: none;
}

.ParameterEntry .autoSearch {
    padding-right: 1.6em;
    width: 85.825% !important;
}

.InputOpdrachtgever, .InputOpdrachtgever:-internal-autofill-selected {
    background: url("../Icons/Opdrachtgevers_btn_active.png") no-repeat scroll 0vh;
    padding-left: 2.3em;
    background-size: contain;
}

.InputGebruiker, .InputGebruiker:-internal-autofill-selected {
    background: url("../Icons/Gebruikers_btn_active.png") no-repeat scroll 0vh;
    padding-left: 2.3em;
    background-size: contain;
}

.InputTelefoon, .InputTelefoon:-internal-autofill-selected {
    background: url("../Icons/Telefoon_btn.png") no-repeat scroll 0vh;
    padding-left: 2.3em;
    background-size: contain;
}

.InputEmail, .InputEmail:-internal-autofill-selected {
    background: url("../Icons/Email_btn.png") no-repeat scroll 0vh;
    padding-left: 2.3em;
    background-size: contain;
}

.InputWerkgever, .InputWerkgever:-internal-autofill-selected {
    background: url("../Icons/Werkgevers_btn_active.png") no-repeat scroll 0vh;
    padding-left: 2.3em;
    background-size: contain;
}

.InputDossier {
    background: url("../Icons/Dossier_btn.png") no-repeat scroll 0vh;
    padding-left: 2.3em;
    background-size: contain;
}

.InputAfspraak {
    background: url("../Icons/Agenda_btn_active.png") no-repeat scroll 0vh;
    padding-left: 2.3em;
    background-size: contain;
}

.InputAfspraakTijd {
    background: url("../Icons/Tijd_btn.png") no-repeat scroll 0vh;
    padding-left: 2.3em;
    background-size: contain;
}

.InputZiektePeriode {
    background: url("../Icons/Ziekteperiodes_btn.png") no-repeat scroll 0vh;
    padding-left: 2.3em;
    background-size: contain;
}

.InputTraject {
    background: url("../Icons/Begeleidingsperiodes_btn.png") no-repeat scroll 0vh;
    padding-left: 2.3em;
    background-size: contain;
}

.InputGegevens {
    background: url("../Icons/Gegevens_btn.png") no-repeat scroll 0vh;
    padding-left: 2.3em;
    background-size: contain;
}

.InputGeschiedenis {
    background: url("../Icons/Geschiedenis_btn.png") no-repeat scroll 0vh;
    padding-left: 2.3em;
    background-size: contain;
}

.InputFormulier, .InputOnderwerp, .InputDocument {
    background: url("../Icons/Formulier_inzien_btn.png") no-repeat scroll 0vh;
    padding-left: 2.3em;
    background-size: contain;
}

.InputLocatie {
    background: url("../Icons/Adres_btn.png") no-repeat scroll 0vh;
    padding-left: 2.3em;
    background-size: contain;
}

.InputPlanner {
    background: url("../Icons/Agenda_Vandaag_inactive_icon.png") no-repeat scroll 0vh;
    padding-left: 2.3em;
    background-size: contain;
}

.InputIndent {
    padding-left: 2.3em;
}

.AdresEditIcon, .AdresEditIcon:hover, .AdresEditIcon:active {
    display: inline-block;
    background: url("../Icons/Adres_btn.png") no-repeat center;
    background-size: contain;
    width: 3em;
    height: 3em;
    margin-top: -0.8em;
    cursor: pointer;
    /*margin-left: auto; margin-right: 0.2em;*/
}

    .AdresEditIcon.disabled {
        cursor: default;
    }

    .AdresEditIcon + .hoverPopup {
        margin-top: 1.8em !important;
        width: 5em !important;
        left: 32.5% !important;
    }

.werkgeverLinkIcon, .werkgeverLinkIcon:hover, .werkgeverLinkIcon:active {
    display: inline-block;
    background: url("../Icons/werkgevers_btn_active.png") no-repeat center;
    background-size: contain;
    width: 3em;
    height: 3em;
    cursor: pointer;
}

    .werkgeverLinkIcon + .hoverPopup {
        margin-top: 2.3em !important;
        width: 9em !important;
        white-space: nowrap;
        left: 45% !important;
    }

.werkgeversSelect {
    text-align: center !important;
    cursor: pointer !important;
    caret-color: transparent;
}

.InputWerkgever.werkgeversSelect {
    padding-left: 0;
}

.werkgeversSelect.selected {
    color: #97BF0E !important;
}

#viewbtn.newInput.dag {
    background: url("../Icons/Agenda_Dag_icon.png") no-repeat scroll 0vh;
    padding-left: 1em;
    padding-right: 0.5em;
    background-size: contain;
}

#viewbtn.newInput.maand {
    background: url("../Icons/Agenda_Maand_icon.png") no-repeat scroll 0vh;
    padding-left: 1em;
    padding-right: 0.5em;
    background-size: contain;
}

#viewbtn.newInput.week {
    background: url("../Icons/Agenda_Week_icon.png") no-repeat scroll 0vh;
    padding-left: 1em;
    padding-right: 0.5em;
    background-size: contain;
}

/*************/
/* New Label */
/*************/
.newLabel {
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    font-size: 1.3em;
    font-weight: bold;
    color: #16195B !important;
    height: 1.55em;
    /*width: 22.328em;*/
    background-color: transparent !important;
    border-width: 0.21em;
    border-style: solid;
    border-radius: 0.47em;
    border-color: transparent;
    margin: 0.4em 0;
    padding-left: 0.45vw;
    display: block;
    pointer-events: none;
}

/****************/
/* New Textarea */
/****************/
.newTextArea, .newTextArea:-internal-autofill-selected {
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    font-size: 1.3em;
    font-weight: bold;
    color: #16195B !important;
    width: 22.328em;
    height: auto;
    background: #DFDFDF !important;
    border-width: 0.21em;
    border-style: solid;
    border-color: #7C7C7C;
    border-radius: 0.47em;
    margin: 0.4em 0;
    padding-left: 0.45vw;
    display: block;
    overflow: hidden;
    resize: none;
}

    .newTextArea:focus {
        outline: none;
        border-width: 0.21em;
        border-style: solid;
        border-color: #16195B;
        border-radius: 0.47em;
    }

    .newTextArea.disabled {
        cursor: default;
        border-width: 0.21em;
        border-style: solid;
        border-color: #DFDFDF;
        border-radius: 0.47em;
        pointer-events: none; /*Deze is nodig voor review en supervisie*/
    }

.newTextAreaDisplay {
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    font-size: 1.3em;
    font-weight: bold;
    color: #16195B !important;
    width: 22.328em;
    height: auto;
    background: transparent !important;
    border-width: 0.21em;
    border-style: solid;
    border-color: transparent;
    border-radius: 0.47em;
    margin: 0.4em 0;
    padding-left: 0.45vw;
    display: block;
    overflow: hidden;
    resize: none;
    pointer-events: none;
}

/****************/
/* New Checkbox */
/****************/
.newCheckbox {
    text-align: center;
    /*text-decoration: line-through;*/
    text-decoration-thickness: 0.1em;
    text-decoration-color: #16195b;
    cursor: pointer !important;
}

    .newCheckbox.selected {
        /*text-decoration: none;*/
        color: #97BF0E !important;
    }

.newInput.selected {
    /*color: #97BF0E !important;*/
    text-align: center;
}

.terugkoppeling + .newCheckbox {
    width: 30em;
}

.newCheckbox.unselectable {
    cursor: default !important;
    border: none;
    text-decoration: line-through;
}

/*******************/
/* New RadioButton */
/*******************/
.newRadioButton {
    text-align: center;
    /*text-decoration: line-through;*/
    text-decoration-thickness: 0.1em;
    text-decoration-color: #16195b;
    cursor: pointer !important;
    border-color: #DFDFDF;
}

    .newRadioButton.selected {
        /*text-decoration: none;*/
        color: #97BF0E !important;
    }

.newInput.selected {
    /*color: #97BF0E !important;*/
    text-align: center;
}

.terugkoppeling + .newRadioButton {
    width: 30em;
}

.newRadioButton.unselectable {
    cursor: default !important;
    border: none;
    text-decoration: line-through;
}

/*************/
/*Colorpicker*/
/*************/
.color-picker {
    display: inline-block;
    height: 2.55em;
    width: 2.55em;
    border: solid #7C7C7C;
    border-radius: 0.8em;
    position: relative;
    cursor: pointer !important;
}
    
    #selectedColor {
        height: 2.55em;
        width: 2.55em;
        border-radius: 0.5em;
    }

    .colors {
        display: none;
        height: 9.08em;
        width: 12.11em;
        padding-left: 0.2em;
        padding-top: 0.25em;
        position: absolute;
        right: 0;
        background: #DFDFDF;
        margin-top: 0.75em;
        z-index: 1;
        border: solid #7C7C7C 0.2px;
        border-radius: 0.5em;
    }

        .colors.open {
            display: block;
        }

        .colorpickerItem {
            width: 19%;
            height: 25.34%;
            margin: 1%;
            float: left;
            border-radius: 0.8em;
            border: solid transparent;
        }

            .colorpickerItem:hover, .colorpickerItem.selected {
                border: solid #97BF0E;
            }


/**************/
/* New Modal  */
/**************/
.newModal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 100;
    /*opacity: 0;*/
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
}

.newModalBody {
    background: #fff;
    width: -moz-fit-content;
    width: fit-content;
    position: relative;
    margin: 10% auto;
    padding: 2em;
    border-radius: 2em;
    align-content: center;
}

    .newModalBody:has(> .newModalContent.Formulier) {
        margin: 5% auto;
    }

#clientDossierModal .newModalContent {
    /*max-height: 50em;
            overflow-y: auto;*/
    scrollbar-color: #7C7C7C transparent;
    scrollbar-width: thin;
}

.newModalContent.Formulier {
    max-height: 70vh;
    max-width: 60vw;
    overflow-y: auto;
    scrollbar-color: #7C7C7C transparent;
    scrollbar-width: thin;
}

.newModalContent.Wide {
    max-width: 62vw;
}

.newModalContent::-webkit-scrollbar {
    width: 0.55vw;
}

.newModalContent::-webkit-scrollbar-track {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    /*margin-right: 1em;*/
    background: #7C7C7C;
    border: 0.3em solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    /*background-size: 0;*/
}

.newModalContent::-webkit-scrollbar-thumb {
    /*outline: 1px solid #7C7C7C;*/
    border-radius: 10em;
    /*height: 5em;*/
    background-clip: padding-box;
    border: 0.225em solid rgba(0, 0, 0, 0);
    /*border: 0.225em solid rgba(0, 0, 0, 0);*/
    background-color: #7C7C7C;
}

.newModalTitle {
    font-size: 1.8em;
    color: #16195B;
    font-weight: bold;
}

.ModalBackground {
    overflow: hidden;
}

/**************/
/*New DropDown*/
/**************/
select.newDropDown {
    display: none;
}

.newDropDown {
    width: fit-content;
    display: flex;
    /*appearance: none;*/
    cursor: pointer;
    user-select: none;
    margin-right: 0;
}

    .newDropDown.disabled {
        pointer-events: none;
    }

.ParameterContainer .newDropDown {
    width: 10vw;
}

#extraInfo .newDropDown {
    width: 74.7%;
    font-size: 0.8em;
    margin: 1.5vh auto;
}

.select-wrapper {
    position: relative;
    user-select: none;
    width: 50%;
}

.select {
    position: relative;
    display: flex;
    flex-direction: column;
    /*width: 20em;*/
    /*border-width: 0 2px 0 2px;
    border-style: solid;
    border-color: #394a6d;*/
}

#extraInfo .select {
    width: 100%;
}

.newDropDown *, .newDropDown *:after, .newDropDown *:before {
    box-sizing: border-box;
}

.select__trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.1em;
    font-weight: bold;
    color: #16195B;
    height: 2.5em;
    width: 25em;
    /*line-height: 60px;*/
    background: #DFDFDF;
    cursor: pointer;
    border-width: 0.2em;
    border-style: solid;
    border-color: #7C7C7C;
    border-radius: 0.5em;
}

    .newDropDown.mid > .select > .select__trigger {
        width: 16.75vw !important;
    }

    .newDropDown.disabled > .select > .select__trigger {
        border-color: #DFDFDF;
    }

    #extraInfo .select__trigger {
        display: block;
        width: 100%;
        height: 2.404em;
        padding: 0.35em 0;
        /*font-size: 0.8em;*/
    }

.ParameterContainer .select__trigger {
    width: 18vw;
}

.selectedOption, .selectedOption:focus {
    margin: 0 0.5vw;
    cursor: pointer;
}

#extraInfo .selectedOption, #extraInfo .selectedOption:focus {
    padding: 0.35em 0;
}

.custom-options {
    position: absolute;
    display: block;
    width: 25em;
    padding-left: 0.5vw;
    top: 100%;
    left: 0;
    right: 0;
    border-radius: 0.5em;
    border-top: 0;
    background: #DFDFDF;
    border-style: solid;
    border-color: #7C7C7C;
    border-width: 0.01em;
    transition: all 0.5s;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow-y: auto;
    max-height: 25em;
    z-index: 3;
}

.ParameterContainer .custom-options {
    width: 18vw;
}

#extraInfo .custom-options {
    width: 100%;
}

.select.open .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    scrollbar-color: #7C7C7C transparent;
    scrollbar-width: thin;
}

    .select.open .custom-options::-webkit-scrollbar {
        width: 0.55vw; /*todo: Stond voorheen 0.7vw heeft dit effect op een dropdown buiten een modal? */
        /*width: 0.15vw;*/
    }

    .select.open .custom-options::-webkit-scrollbar-track {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        margin-right: 1em;
        background: #7C7C7C;
        border: 0.3em solid rgba(0, 0, 0, 0);
        background-clip: padding-box;
        /*background-size: 0;*/
    }

    .select.open .custom-options::-webkit-scrollbar-thumb {
        /*outline: 1px solid #7C7C7C;*/
        border-radius: 10em;
        /*height: 5em;*/
        background-clip: padding-box;
        border: 0.225em solid rgba(0, 0, 0, 0);
        /*border: 0.225em solid rgba(0, 0, 0, 0);*/
        background-color: #7C7C7C;
    }

.custom-option {
    position: relative;
    display: block;
    cursor: pointer;
    transition: all 0.5s;
}

    .custom-option:hover {
        cursor: pointer;
        background-color: #97BF0E;
        color: #ffffff;
    }

    .custom-option.defaultValue {
        color: #ffffff;
        background-color: #6D9DC5;
    }

    .custom-option.selected {
        color: #ffffff;
        background-color: #97BF0E;
    }

.selectPerson {
    float: right;
    background: url("../Icons/Gebruikers_btn_active.png") no-repeat center;
    background-size: contain;
    width: 2.3em;
    height: 2.3em;
    margin-top: -0em;
}

    .newInput.selectPerson { /*todo: deze verplaatsen naar de input eigenschappen + classnaam veranderen naar .InputPerson?.parameterEntry omdat dan alleen background right hoeft te worden veranderd*/
        background: url("../Icons/Gebruikers_btn_active.png") no-repeat right;
        background-size: contain;
        width: auto;
        height: 1.55em;
    }

.selectClient {
    float: right;
    background: url("../Icons/Werknemers_btn_active.png") no-repeat center;
    background-size: contain;
    width: 2.3em;
    height: 2.3em;
    margin-top: -0em;
}

.selectForward {
    float: right;
    background: url("../Icons/Doorsturen_Forward_btn.png") no-repeat center;
    background-size: contain;
    width: 2.3em;
    height: 2.3em;
    margin-top: -0em;
}

.selectOpdrachtgever {
    float: right;
    background: url("../Icons/Opdrachtgevers_btn_active.png") no-repeat center;
    background-size: contain;
    width: 2.3em;
    height: 2.3em;
    margin-top: -0em;
}

.selectBegeleidingsperiode {
    float: right;
    background: url("../Icons/Begeleidingsperiodes_btn.png") no-repeat center;
    background-size: contain;
    width: 2.3em;
    height: 2.3em;
    margin-top: -0em;
}

#extraInfo .selectBegeleidingsperiode {
    padding: 0;
    margin-top: -0.55em;
}

.selectLocation {
    float: right;
    background: url("../Icons/adres_btn.png") no-repeat center;
    background-size: contain;
    width: 2.3em;
    height: 2.3em;
    margin-top: -0em;
}

.selectExclamation {
    float: right;
    background: url("../Icons/adres_btn.png") no-repeat center; /*todo: uitroepteken toevoegen in donkerblauw en dan meegeven aan ernst van traject dropdown*/
    background-size: contain;
    width: 2.3em;
    height: 2.3em;
    margin-top: -0em;
}

.selectWerkgever {
    float: right;
    background: url("../Icons/Werkgevers_btn_active.png") no-repeat center;
    background-size: contain;
    width: 2.3em;
    height: 2.3em;
    margin-top: -0em;
}

.selectArrow {
    position: relative;
    height: 15px;
    width: 15px;
}

    .selectArrow::before, .selectArrow::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 0.155rem;
        height: 100%;
        transition: all 0.5s;
    }

    .selectArrow::after {
        left: -2px;
        transform: rotate(45deg);
        background-color: #16195B;
    }

    .selectArrow::before {
        left: -14px;
        transform: rotate(-45deg);
        background-color: #16195B;
    }

.open .selectArrow::after {
    left: -2px;
    transform: rotate(-45deg);
}

.open .selectArrow::before {
    left: -14px;
    transform: rotate(45deg);
}

.newDropDown *:not(.FieldAdd) {
    padding: 0.5em 0 0.5em 0;
    color: #16195B;
    font-size: 1.1em;
    font-weight: bold;
}

.newDropDown option:checked, .newDropDown option:hover {
    background-color: #97BF0E !important;
    background: #97bf0e !important;
    border-radius: 0.5em;
}

.dropdownSwitch {
    background: #BEBEBE;
    border: #7C7C7C solid 0.23em;
    border-radius: 3em;
    height: 2.5em;
    width: 5em;
    text-align: center;
    padding-left: 0.8em !important;
    position: absolute;
    right: -3.5em;
}

.autoSearch.Dropdown, .autoSearch.Dropdown:focus {
    position: absolute;
    border: none;
    background: transparent;
    padding: 0.4em 0.5em;
    width: 20em;
    outline: none;
}

/****************/
/*New HoverPopup*/
/****************/
.hoverPopup {
    display: none;
    z-index: 10;
    padding: 0.1em;
    background: #fff;
    color: #16195B !important;
    font-size: 0.8em;
    font-weight: bold !important;
    border-radius: 0.3em;
    top: 2.5em;
    position: absolute;
}

    .hoverPopup.Wide {
        width: 30em;
    }

.hoverPopupShow:hover + .hoverPopup, tr.hoverPopupShow:hover + .hoverPopup {
    display: block;
}

/*********************************/
/*New DatePicker / New TimePicker*/
/*********************************/
.date-picker, .time-picker {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.28em;
    font-weight: bold;
    color: #16195B;
    height: 2em;
    width: 23.234em;
    background: #DFDFDF;
    margin: 0.44em 0;
    /*cursor: pointer;*/
    border-width: 0.2em;
    border-style: solid;
    border-color: #7C7C7C;
    border-radius: 0.47em;
    /*box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);*/
    cursor: pointer;
    user-select: none;
}

    .date-picker.mid {
        width: 16.5vw !important;
    }

.ParameterEntry .date-picker {
    width: auto;
}

.date-picker .selectedDate, .time-picker .selectedTime {
    /*position: relative;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding-left: 0.5vw;
}

.date-picker span.selectedDate:empty::before, .time-picker span.selectedTime:empty::before {
    content: attr(data-placeholder);
    color: #7C7C7C;
}

.date-picker input.selectedDate, .time-picker input.selectedTime {
    display: none;
}

.selectDate, .selectTime {
    float: right;
    width: 2.3em;
    height: 2.3em;
    margin-top: -0em;
    margin-right: 0.1em;
}

.selectDate {
    background: url("../Icons/Agenda_btn_active.png") no-repeat center;
    background-size: 2.3em;
}

.selectTime {
    background: url("../Icons/Tijd_btn.png") no-repeat center;
    background-size: 2.3em;
}

.date-picker .dates, .time-picker .times {
    display: none;
}

    .date-picker .dates.open, .time-picker .times.open {
        display: block;
        position: absolute;
        width: 23.5em;
        /*padding-left: 0.5vw;*/
        top: 100%;
        left: -0.16em;
        right: 0;
        border-radius: 0.5em;
        border-top: 0;
        background: #DFDFDF;
        border-style: solid;
        border-color: #7C7C7C;
        border-width: 0.01em;
        transition: all 0.5s;
        margin-top: 0.5em;
        /*opacity: 0;*/
        /*visibility: hidden;*/
        /*pointer-events: none;*/
        cursor: auto;
        z-index: 2;
    }

    .time-picker .times.open {
        height: 19em;
        width: 19em;
        margin-left: 4.3em;
    }

    .date-picker .dates .month {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        /*border-bottom: 2px solid #97BF0E;*/
    }

        .date-picker .dates .month .arrows {
            width: 35px;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #97BF0E;
            font-size: 20px;
            cursor: pointer;
        }

.prev-month {
    background: url("../Icons/Terug_Back_btn.png") no-repeat center;
    background-size: 1.5em;
    width: 1em;
    height: 1em;
}

.next-month {
    background: url("../Icons/Volgende_Next_btn.png") no-repeat center;
    background-size: 1.5em;
    width: 1em;
    height: 1em;
}

.prev-year {
    background: url("../Icons/Omlaag_Down_btn.png") no-repeat center;
    background-size: 1.5em;
    width: 1em;
    height: 1em;
    transform: translateX(10%);
}

.next-year {
    background: url("../Icons/Omhoog_Up_btn.png") no-repeat center;
    background-size: 1.5em;
    width: 1em;
    height: 1em;
    transform: translateX(10%);
}

.date-picker .dates .month .selectedMonth {
    text-align: center;
    width: 5em;
}

.date-picker .dates .month .yearContainer {
    display: block;
}

.date-picker .dates .days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /*height: 16.2em;*/
    height: auto;
    margin: 0 0.4em;
    border-top: 1px solid #7C7C7C;
}

    .date-picker .dates .days .date-picker-day {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 3em;
        width: 3em;
        border-radius: 3em;
        cursor: pointer;
    }

        .date-picker .dates .days .date-picker-day:hover,
        .date-picker .dates .days .date-picker-day.selected,
        .time-picker .times .hours .time-picker-hour:hover,
        .time-picker .times .hours .time-picker-hour.selected,
        .time-picker .times .minutes .time-picker-minute:hover,
        .time-picker .times .minutes .time-picker-minute.selected {
            background-color: #97BF0E;
        }

        .date-picker .dates .days .date-picker-day.today,
        .time-picker .times .hours .time-picker-hour.now,
        .time-picker .times .minutes .time-picker-minute.now {
            color: #FFF;
        }

    .date-picker .dates .days .weekDay {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 3em;
    }

.hours, .minutes {
    /*width: 0.001em;
                height: 0.001em;
                border-radius: 23.5em;
                margin: 10.2em;*/
    padding: 8em;
}

.time-picker-hour, .time-picker-minute {
    height: 3em;
    width: 3em;
    border-radius: 3em;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

    .time-picker-hour.hourTwelve, .time-picker-minute.minuteZero {
        transform: rotate(270deg) translate(8em) rotate(-270deg);
    }

    .time-picker-hour.hourOne, .time-picker-minute.minuteFive {
        transform: rotate(300deg) translate(8em) rotate(-300deg);
    }

    .time-picker-hour.hourTwo, .time-picker-minute.minuteTen {
        transform: rotate(330deg) translate(8em) rotate(-330deg);
    }

    .time-picker-hour.hourThree, .time-picker-minute.minuteFifteen {
        transform: rotate(0deg) translate(8em) rotate(-0deg);
    }

    .time-picker-hour.hourFour, .time-picker-minute.minuteTwenty {
        transform: rotate(30deg) translate(8em) rotate(-30deg);
    }

    .time-picker-hour.hourFive, .time-picker-minute.minuteTwentyfive {
        transform: rotate(60deg) translate(8em) rotate(-60deg);
    }

    .time-picker-hour.hourSix, .time-picker-minute.minuteThirty {
        transform: rotate(90deg) translate(8em) rotate(-90deg);
    }

    .time-picker-hour.hourSeven, .time-picker-minute.minuteThirtyfive {
        transform: rotate(120deg) translate(8em) rotate(-120deg);
    }

    .time-picker-hour.hourEight, .time-picker-minute.minuteFourty {
        transform: rotate(150deg) translate(8em) rotate(-150deg);
    }

    .time-picker-hour.hourNine, .time-picker-minute.minuteFourtyfive {
        transform: rotate(180deg) translate(8em) rotate(-180deg);
    }

    .time-picker-hour.hourTen, .time-picker-minute.minuteFifty {
        transform: rotate(210deg) translate(8em) rotate(-210deg);
    }

    .time-picker-hour.hourEleven, .time-picker-minute.minuteFiftyfive {
        transform: rotate(240deg) translate(8em) rotate(-240deg);
    }

    .time-picker-hour.hourZero {
        transform: rotate(270deg) translate(5em) rotate(-270deg);
    }

    .time-picker-hour.hourThirteen {
        transform: rotate(300deg) translate(5em) rotate(-300deg);
    }

    .time-picker-hour.hourFourteen {
        transform: rotate(330deg) translate(5em) rotate(-330deg);
    }

    .time-picker-hour.hourFifteen {
        transform: rotate(0deg) translate(5em) rotate(-0deg);
    }

    .time-picker-hour.hourSixteen {
        transform: rotate(30deg) translate(5em) rotate(-30deg);
    }

    .time-picker-hour.hourSeventeen {
        transform: rotate(60deg) translate(5em) rotate(-60deg);
    }

    .time-picker-hour.hourEightteen {
        transform: rotate(90deg) translate(5em) rotate(-90deg);
    }

    .time-picker-hour.hourNineteen {
        transform: rotate(120deg) translate(5em) rotate(-120deg);
    }

    .time-picker-hour.hourTwenty {
        transform: rotate(150deg) translate(5em) rotate(-150deg);
    }

    .time-picker-hour.hourTwentyone {
        transform: rotate(180deg) translate(5em) rotate(-180deg);
    }

    .time-picker-hour.hourTwentytwo {
        transform: rotate(210deg) translate(5em) rotate(-210deg);
    }

    .time-picker-hour.hourTwentythree {
        transform: rotate(240deg) translate(5em) rotate(-240deg);
    }

.time-picker-Dummie {
    width: 30.181em;
    height: 3em;
    margin: 0.565em 0;
    display: none;
}

.FieldRemove, .FieldRemove:hover, .FieldAdd, .FieldAdd:hover {
    position: absolute;
    height: 0.8em;
    width: 0.8em;
    background-size: 1.5em;
    top: -0.65em;
    right: -0.65em;
    background-color: #DFDFDF;
    border-radius: 0.8em;
    border: solid 0.15em #7C7C7C;
}

    .FieldAdd.DropDown, .FieldAdd.DropDown:hover {
        height: 1.28em;
        width: 1.28em;
        top: -0.05em;
        right: -0.5em;
        border-radius: 0.8em;
        z-index: 1;
    }

.vrijveldItem, input:focus.vrijveldItem {
    border: none;
    border-color: transparent;
    outline-color: transparent;
    outline-style: none;
    background-color: transparent;
    color: #16195B;
    margin-top: 0.2em;
    font-size: 1.3em;
    font-weight: bold;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
}


/***********/
/*New Table*/
/***********/
.newTable {
    color: #16195B;
    border-spacing: 0px 10px;
    border-collapse: separate;
    width: 100%;
}

    .newTable tr td {
        /*min-height: 3em;
        height: 3em;*/
    }

.newTableHeader {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 1.2em;
}

.newTableRow {
    background-color: #DFDFDF;
    height: 3em;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

    .newTableRow td:first-child {
        border-top-left-radius: 1em;
        border-bottom-left-radius: 1em;
    }

    .newTableRow td:last-child {
        border-top-right-radius: 1em;
        border-bottom-right-radius: 1em;
    }

.newTableData {
    min-height: 3em;
}

/************/
/*Autosearch*/
/************/
.autosearchContainer {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 50;
}

.autosearch-options {
    position: absolute;
    display: block;
    width: auto;
    padding: 0.5em 0 0.5em 0;
    top: 100%;
    left: 0;
    right: 0;
    border-radius: 0.5em;
    border-top: 0;
    background: #DFDFDF;
    border-style: solid;
    border-color: #999;
    border-width: 0.01em;
    font-size: 1.28em; /*1.1em?*/
    font-weight: bold;
    color: #16195B;
    transition: all 0.5s;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 2;
}

.autoselect.open .autosearch-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    max-height: 25em;
    overflow-y: auto;
    scrollbar-color: #7C7C7C transparent;
    scrollbar-width: thin;
}

    .autoselect.open .autosearch-options::-webkit-scrollbar {
        width: 0.7vw;
        /*width: 0.15vw;*/
    }

    .autoselect.open .autosearch-options::-webkit-scrollbar-track {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        margin-right: 1em;
        background: #7C7C7C;
        border: 0.3em solid rgba(0, 0, 0, 0);
        background-clip: padding-box;
        /*background-size: 0;*/
    }

    .autoselect.open .autosearch-options::-webkit-scrollbar-thumb {
        /*outline: 1px solid #7C7C7C;*/
        border-radius: 10em;
        /*height: 5em;*/
        background-clip: padding-box;
        border: 0.225em solid rgba(0, 0, 0, 0);
        /*border: 0.225em solid rgba(0, 0, 0, 0);*/
        background-color: #7C7C7C;
    }

.autosearch-option {
    position: relative;
    display: block;
    cursor: pointer;
    transition: all 0.5s;
    padding: 0.5em 0 0.5em 0;
}

    .autosearch-option:hover {
        cursor: pointer;
        background-color: #97BF0E;
        color: #ffffff;
    }

    .autosearch-option.selected {
        color: #ffffff;
        background-color: #97BF0E;
    }

.autosearch-legenda {
    position: absolute;
    display: block;
    width: auto;
    padding: 0.5em;
    left: 0;
    right: 0;
    border-radius: 0.5em;
    border-top: 0;
    background: #DFDFDF;
    border-style: solid;
    border-color: #999;
    border-width: 0.01em;
    font-size: 0.9em;
    font-weight: bold;
    color: #16195B;
    transition: all 0.5s;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 2;
}

.autoselect.open .autosearch-legenda {
    opacity: 1;
    visibility: visible;
}

/****************/
/*GeslachtSlider*/
/****************/
.GeslachtSlider {
    -webkit-appearance: none;
    width: 60px;
    height: 10px;
    border-radius: 10px;
    border: none;
    background: #F8D184;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    padding: 0;
}

input.GeslachtSlider:focus {
    border: none;
}


.GeslachtSlider:hover {
    opacity: 0.9;
}

.GeslachtSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #F1A208;
    cursor: pointer;
    margin-top: -0.8em;
}

.Man.GeslachtSlider::-webkit-slider-thumb {
    background: #6D9DC5;
}

.Vrouw.GeslachtSlider::-webkit-slider-thumb {
    background: #E80C4D;
}

.GeslachtSlider:hover + .hoverPopup {
    display: block;
    margin: 0.5em auto;
}

.GeslachtSlider + .hoverPopup:before {
    content: 'Non-binair';
}

.Man + .hoverPopup:before {
    content: 'Man';
}

.Vrouw + .hoverPopup:before {
    content: 'Vrouw';
}

.GeslachtSlider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: #F1A208;
    cursor: pointer;
}

.Man.GeslachtSlider::-moz-range-thumb {
    background: #6D9DC5;
}

.Vrouw.GeslachtSlider::-moz-range-thumb {
    background: #E80C4D;
}

.GeslachtSlider.Man {
    background: #B6CEE2;
}

.GeslachtSlider.Vrouw {
    background: #FAC3D3;
}

/*.GeslachtSlider + #Non {
        display: none;
    }*/



#Non {
    display: none;
    justify-content: center;
    margin-top: -0.635em;
    height: 5px;
    z-index: 2;
}

    #Non > div {
        content: '';
        width: 5px;
        height: 5px;
        background: #7C7C7C;
        border-radius: 50%;
        z-index: 2;
    }

.GeslachtSlider.Man ~ #Non, .Vrouw.GeslachtSlider ~ #Non {
    display: flex;
}

/*************/
/*Add-buttons*/
/*************/






/************/
/*Oude Style*/
/************/
.featured {
    background-color: #fff;
}

    .featured .content-wrapper {
        background-color: #97BF0E;
        background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
        background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        color: #16195B;
        padding: 10px 40px 30px 40px;
    }

    .featured hgroup.title h1, .featured hgroup.title h2 {
        color: #fff;
    }

    .featured p {
        font-size: 1.1em;
    }

/* page titles */
hgroup.title {
    margin-bottom: 10px;
}

    hgroup.title h1, hgroup.title h2 {
        display: inline;
    }

    hgroup.title h2 {
        font-weight: normal;
        margin-left: 3px;
    }

/* features */
section.feature {
    width: 300px;
    float: left;
    padding: 10px;
}

/* ordered list */
ol.round {
    list-style-type: none;
    padding-left: 0;
}

    ol.round li {
        margin: 25px 0;
        padding-left: 45px;
    }

        ol.round li.zero {
            background: url("../images/orderedList0.png") no-repeat;
        }

        ol.round li.one {
            background: url("../images/orderedList1.png") no-repeat;
        }

        ol.round li.two {
            background: url("../images/orderedList2.png") no-repeat;
        }

        ol.round li.three {
            background: url("../images/orderedList3.png") no-repeat;
        }

        ol.round li.four {
            background: url("../images/orderedList4.png") no-repeat;
        }

        ol.round li.five {
            background: url("../images/orderedList5.png") no-repeat;
        }

        ol.round li.six {
            background: url("../images/orderedList6.png") no-repeat;
        }

        ol.round li.seven {
            background: url("../images/orderedList7.png") no-repeat;
        }

        ol.round li.eight {
            background: url("../images/orderedList8.png") no-repeat;
        }

        ol.round li.nine {
            background: url("../images/orderedList9.png") no-repeat;
        }

        ol.round li.btn_aanmeld {
            background: url("../images/btn_aanmeld.png") no-repeat center center;
            background-size: 100px 100px;
        }

/* content */
article {
    float: left;
    width: 70%;
}

aside {
    float: right;
    width: 25%;
}

    aside ul {
        list-style: none;
        padding: 0;
    }

        aside ul li {
            background: url("../images/bullet.png") no-repeat 0 50%;
            padding: 2px 0 2px 20px;
        }

.label {
    font-weight: 700;
}

/* login page */
#loginForm {
    border-right: solid 2px #c8c8c8;
    float: left;
    width: 55%;
}

    #loginForm .validation-error {
        display: block;
        margin-left: 15px;
    }

    #loginForm .validation-summary-errors ul {
        margin: 0;
        padding: 0;
    }

    #loginForm .validation-summary-errors li {
        display: inline;
        list-style: none;
        margin: 0;
    }

    #loginForm input {
        width: 250px;
    }

        #loginForm input[type="checkbox"],
        #loginForm input[type="submit"],
        #loginForm input[type="button"],
        #loginForm button {
            width: auto;
        }

#socialLoginForm {
    margin-left: 40px;
    float: left;
    width: 40%;
}

    #socialLoginForm h2 {
        margin-bottom: 5px;
    }

#socialLoginList button {
    margin-bottom: 12px;
}

#logoutForm {
    display: inline;
}

/* contact */
.contact h3 {
    font-size: 1.2em;
}

.contact p {
    margin: 5px 0 0 10px;
}

.contact iframe {
    border: 1px solid #333;
    margin: 5px 0 0 10px;
}



/* info and errors */
.message-info {
    border: 1px solid;
    clear: both;
    padding: 10px 20px;
}

.message-error {
    clear: both;
    color: #e80c4d;
    font-size: 1.1em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.message-success {
    color: #7ac0da;
    font-size: 1.3em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.error {
    color: #e80c4d !important;
}

.success {
    color: #97BF0E !important;
}

.warning {
    color: #FA8334 !important;
}

.no-info {
    font-style: italic;
}

/* Status */
.green {
    color: green;
}

.red {
    color: red;
}

/********************
*   Mobile Styles   *
********************/
@media only screen and (max-width: 850px) {

    /* header
    ----------------------------------------------------------*/
    header .float-left,
    header .float-right {
        float: none;
    }

    /* logo */
    header .site-title {
        margin: 10px;
        text-align: center;
    }

    /* login */
    #login {
        font-size: .85em;
        margin: 0 0 12px;
        text-align: center;
    }

        #login ul {
            margin: 5px 0;
            padding: 0;
        }

        #login li {
            display: inline;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        #login a {
            background: none;
            color: #999;
            font-weight: 600;
            margin: 2px;
            padding: 0;
        }

            #login a:hover {
                color: #333;
            }

    /* menu */
    nav {
        margin-bottom: 5px;
    }

    ul#menu {
        margin: 0;
        padding: 0;
        text-align: center;
    }

        ul#menu li {
            margin: 0;
            padding: 0;
        }


    /* main layout
    ----------------------------------------------------------*/
    .main-content,
    .featured + .main-content {
        background-position: 10px 0;
    }

    .content-wrapper {
        padding-right: 10px;
        padding-left: 10px;
    }

    .featured .content-wrapper {
        padding: 10px;
    }

    /* page content */
    article, aside {
        float: none;
        width: 100%;
    }

    /* ordered list */
    ol.round {
        list-style-type: none;
        padding-left: 0;
    }

        ol.round li {
            padding-left: 10px;
            margin: 25px 0;
        }

            ol.round li.zero,
            ol.round li.one,
            ol.round li.two,
            ol.round li.three,
            ol.round li.four,
            ol.round li.five,
            ol.round li.six,
            ol.round li.seven,
            ol.round li.eight,
            ol.round li.nine {
                background: none;
            }

    /* features */
    section.feature {
        float: none;
        padding: 10px;
        width: auto;
    }

        section.feature img {
            color: #999;
            content: attr(alt);
            font-size: 1.5em;
            font-weight: 600;
        }

    /* forms */
    input {
        width: 90%;
    }

    /* login page */
    #loginForm {
        border-right: none;
        float: none;
        width: auto;
    }

        #loginForm .validation-error {
            display: block;
            margin-left: 15px;
        }

    #socialLoginForm {
        margin-left: 0;
        float: none;
        width: auto;
    }


    /* footer
    ----------------------------------------------------------*/
    footer .float-left,
    footer .float-right {
        float: none;
    }

    footer {
        text-align: center;
        height: auto;
        padding: 10px 0;
    }

        footer p {
            margin: 0;
        }
}

a.editIconLink {
    background-image: url("../images/edit.png");
}

    a.editIconLink:hover {
        background-image: url("../images/edit2.png");
    }

a.createIconLink {
    background-image: url("../images/create.png");
}

    a.createIconLink:hover {
        background-image: url("../images/create2.png");
    }

a.deleteIconLink {
    background-image: url("../images/delete.png");
}

    a.deleteIconLink:hover {
        background-image: url("../images/delete2.png");
    }

a.dossierIconLink {
    background-image: url("../images/dossier.png");
}

    a.dossierIconLink:hover {
        background-image: url("../images/dossier2.png");
    }

a.factuurIconLink {
    background-image: url("../images/folder_invoices_24.png");
}

a.factuurpostIconLink {
    background-image: url("../images/factuurpost.png");
}

    a.factuurpostIconLink:hover {
        background-image: url("../images/factuurpost2.png");
    }

a.factuurverrichtingIconLink {
    background-image: url("../images/factuurverrichting.png");
}

    a.factuurverrichtingIconLink:hover {
        background-image: url("../images/factuurverrichting2.png");
    }

a.factuurformulierIconLink {
    background-image: url("../images/factuurformulier.png");
}

    a.factuurformulierIconLink:hover {
        background-image: url("../images/factuurformulier2.png");
    }

a.factuurhandelingIconLink {
    background-image: url("../images/factuurhandeling.png");
}

    a.factuurhandelingIconLink:hover {
        background-image: url("../images/factuurhandeling2.png");
    }

a.factuurstatusIconLink {
    background-image: url("../images/factuurstatus.png");
}

    a.factuurstatusIconLink:hover {
        background-image: url("../images/factuurstatus2.png");
    }

a.factuuropnieuwIconLink {
    background-image: url("../images/factuuropnieuw.png");
}

    a.factuuropnieuwIconLink:hover {
        background-image: url("../images/factuuropnieuw2.png");
    }

a.factuurcorrectieIconLink {
    background-image: url("../images/factuurcorrectie.png");
}

    a.factuurcorrectieIconLink:hover {
        background-image: url("../images/factuurcorrectie2.png");
    }

a.factuurpdfIconLink {
    background-image: url("../images/factuurpdf.png");
}

    a.factuurpdfIconLink:hover {
        background-image: url("../images/factuurpdf2.png");
    }

a.dossierOverzichtIconLink {
    background-image: url("../images/dossier-overzicht.png");
}

    a.dossierOverzichtIconLink:hover {
        background-image: url("../images/dossier-overzicht2.png");
    }

a.communicationIconLink {
    background-image: url("../images/communication.png");
}

    a.communicationIconLink:hover {
        background-image: url("../images/communication2.png");
    }

a.viewIconLink {
    background-image: url("../images/bekijken.png");
}

    a.viewIconLink:hover {
        background-image: url("../images/bekijken.png");
    }

a.viewIconIll {
    background-image: url("../images/Thermometer.png");
}

a.viewIconNotIll {
    background-image: url("../images/Therm_not_ill.png");
}

a.iconLink {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px 20px;
    width: 24px;
    height: 24px;
    display: block;
    text-decoration: none;
    clear: none;
}

    a.iconLink:hover {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 24px 24px;
        width: 24px;
        height: 24px;
    }

a.bijlageLink, a.bijlageLink:hover, .bijlageLink:active {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
    text-decoration: none;
    clear: none;
    width: 87%;
}


a.dossierLink, a.dossierLink:hover, a.dossierLink:active {
    display: inline-block;
    width: 9%;
    background-size: 100%;
    float: none;
    position: relative;
    top: 1vh;
    background-color: transparent;
    display: inline-block;
    text-decoration: none;
    clear: none;
}



/* UWV views
----------------------------------------------------------*/
table.uwvTable th {
    text-align: left;
}

table.uwvTable td {
    vertical-align: top;
}

.uwvToelichting {
    font-style: italic;
}

/* Agenda - legenda
----------------------------------------------------------*/
table.legenda {
    border-collapse: separate;
    border-spacing: 1px;
    font-size: 0.85em;
}

    table.legenda caption {
        text-align: left;
    }

    table.legenda td:first-child {
        border: 1px solid;
    }

    table.legenda td.afspraak-eigen {
        border-color: #327E04;
        background-color: #97BF0E;
        color: white;
    }

    table.legenda td.afspraak-ander {
        border-color: #327E04;
        background-color: #97BF0E;
        color: black;
    }

    table.legenda td.afspraak-derde {
        border-color: #327E04;
        background-color: #CCCCCC;
        color: black;
    }


/***********/
/* Filters */
/***********/
/*Home page
----------------*/
#homeParameterContainer {
    display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-flex;
    display: -ms-flexbox; /* MID: IE 10 */
    display: -webkit-flex; /* NEW, Chrome 21+ */
    display: flex; /* NEW: Opera 12.1, Firefox 22+ */
    min-width: 1px;
    max-height: 12em;
    margin-top: 6.2vh;
}

.homeParameter {
    width: 5em;
    height: 6em;
    padding: 1em;
    margin: 0 1em;
    background: #BEBEBE;
    border: solid 5px #7C7C7C;
    border-radius: 2em;
}

    .homeParameter.disabled {
        border-color: #DFDFDF;
    }

.homeParameterIcon {
    height: 3.5em;
    width: 3.5em;
    border-radius: 15em;
    margin: auto;
    background: #DFDFDF;
}

/*#parameterAlgemeen {
            background: #97BF0E;
            border: solid 5px #97BF0E;
            border-radius: 2em;*/
/*#327E04*/
/*}*/

/*#parameterAlgemeen.disabled {
                border: solid 5px #E5EFC3;
            }

            #parameterAlgemeenIconContainer {
                background: #E5EFC3;
            }*/

#parameterAlgemeenIcon {
    background: url("../Icons/Algemeen_Homescreen_icon.png") no-repeat center;
    display: block;
    width: 3.5em;
    height: 3.5em;
    background-size: 3em 3em;
}

/*#parameterAgenda {
            background: #F1A208;
            border: solid 5px #F1A208;
            border-radius: 2em;
        }*/

/*#parameterAgenda.disabled {
                border: 5px solid #FCE8C2;
            }

            #parameterAgendaIconContainer {
                background: #FCE8C2;
            }*/

#parameterAgendaIcon {
    background: url("../Icons/Agenda_Homescreen_icon.png") no-repeat center;
    display: block;
    width: 3.5em;
    height: 3.5em;
    background-size: 3em 3em;
}

/*#parameterGebruiker {
            background: #FFC0FF;
            border: solid 5px #FFC0FF;
            border-radius: 2em;
        }

            #parameterGebruiker.disabled {
                border: 5px solid #FFF2FF;
            }

            #parameterGebruikerIcon {
                background: #fff2FF;
            }*/

/*#parameterGebruiker {
            background: #6D9DC5;
            border: solid 5px #6D9DC5;
            border-radius: 2em;
        }*/

/*#parameterGebruiker.disabled {
                border: 5px solid #DBE7F1;
            }

            #parameterGebruikerIconContainer {
                background: #DBE7F1;
            }*/

#parameterGebruikerIcon {
    background: url("../Icons/Gebruikers_Homescreen_icon.png") no-repeat center;
    display: block;
    width: 3.5em;
    height: 3.5em;
    background-size: 3em 3em;
}

/*#parameterWetPoortwachter {
            background: #FA8334;
            border: solid 5px #FA8334;
            border-radius: 2em;
        }*/

/* #parameterWetPoortwachter.disabled {
                border: 5px solid #FEE0CD;
            }

            #parameterWetPoortwachterIconContainer {
                background: #FEE0CD;
            }*/

.parameterWetPoortwachterIcon {
    background: url("../Icons/WetPoortwachter_Homescreen_icon.png") no-repeat center;
    display: block;
    width: 3.5em;
    height: 3.5em;
    background-size: 3em 3em;
}

/*#parameterFacturatie {
            background: #885284;
            border: solid 5px #885284;
            border-radius: 2em;
        }*/

/*#parameterFacturatie.disabled {
                border: 5px solid #E2CFE0;
            }*/


#parameterFacturatie.unavailable {
    /*background: #E2CFE0;*/
    background: #DFDFDF;
}

/*#parameterFacturatieIconContainer {
                background: #E2CFE0;
            }*/

#parameterFacturatieIcon {
    background: url("../Icons/Facturatie_Homescreen_icon.png") no-repeat center;
    display: block;
    width: 3.5em;
    height: 3.5em;
    background-size: 3em 3em;
}

.HomeSwitchContainer {
    padding: 1em 0.6em;
}

.Homeswitch {
    position: relative;
    display: inline-block;
    width: 3.75em;
    height: 1.75em;
}

    .Homeswitch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider { /*todo: naar een algemenere plek*/
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*border: 5px solid #DFDFDF;*/
    background-color: #DFDFDF;
    -webkit-transition: .4s;
    transition: .4s;
    border: 2px solid #DFDFDF;
}

.Homeswitch > .slider {
    background-color: #8B8CAD;
}

.slider.green {
    background-color: #E5EFC3;
}
/*.slider.homeAgenda {
                background-color: #FCE8C2;
            }

            .slider.homeGebruiker {
                background-color: #DBE7F1;
            }

            .slider.homeWetPoortwachter {
                background-color: #FEE0CD;
            }

            .slider.homeFacturatie {
                background-color: #E2CFE0;
            }*/

.slider:before {
    position: absolute;
    content: "";
    height: 1.25em;
    width: 1.25em;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    top: 1.5px;
}

.Homeswitch > input:checked + .slider {
    background-color: #515384;
    border: 2px solid #8B8CAD;
}

    .Homeswitch > input:checked + .slider:before {
        background-color: #16195B;
    }

input:checked + .slider.green {
    background-color: #CBDF87;
    border: 2px solid #E5EFC3;
}

input:checked + .green.slider:before {
    background-color: #97BF0E;
}

/*input:checked + .slider.homeAgenda {
                    background-color: #F8D184;
                    border: 2px solid #FCE8C2;
                }

                input:checked + .homeAgenda.slider:before {
                    background-color: #F1A208;
                }*/

/*input:checked + .slider.homeGebruiker {
                    background-color: #FFD9FF;
                }

                input:checked + .homeGebruiker.slider:before {
                    background-color: #FFC0FF;
                }*/

/*input:checked + .slider.homeGebruiker {
                    background-color: #B6CEE2;
                    border: 2px solid #DBE7F1;
                }

                input:checked + .homeGebruiker.slider:before {
                    background-color: #6D9DC5;
                }
                
                input:checked + .slider.homeWetPoortwachter {
                    background-color: #FDC19A;
                    border: 2px solid #FEE0CD;
                }

                input:checked + .homeWetPoortwachter.slider:before {
                    background-color: #FA8334;
                }

                input:checked + .slider.homeFacturatie {
                    background-color: #C49EC1;
                    border: 2px solid #E2CFE0;
                }

                input:checked + .homeFacturatie.slider:before {
                    background-color: #885284;
                    right: 2px;
                }*/


input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.homeParameter > .hoverPopup {
    position: relative;
    font-weight: bold;
    top: -0em;
    /*margin-top: 6.3em;*/
    left: 50%;
    transform: translateX(-50%);
    width: -moz-fit-content;
    width: fit-content;
    white-space: nowrap;
}


/**********/
/*  Body  */
/**********/
/*Home page
----------------*/
#WelkomsberichtenBody {
    width: calc(100vw - 49em);
}

.infoContainer.Welkomsberichten {
    display: none;
    background: #DFDFDF;
}

#WelkomsberichtenBerichtTaak, #DossierHistory {
    height: 83%;
    margin-top: 0.3em;
    margin-bottom: 10vh;
    overflow-y: auto;
    scrollbar-color: #7C7C7C transparent;
    scrollbar-width: thin;
}

    #WelkomsberichtenBerichtTaak::-webkit-scrollbar, #DossierHistory::-webkit-scrollbar {
        width: 0.7vw;
        /*width: 0.15vw;*/
    }

    #WelkomsberichtenBerichtTaak::-webkit-scrollbar-track, #DossierHistory::-webkit-scrollbar-track {
        margin-top: 1.5em;
        margin-bottom: 0.5em;
        margin-right: 1em;
        background: #7C7C7C;
        border: 0.3em solid rgba(0, 0, 0, 0);
        background-clip: padding-box;
        /*background-size: 0;*/
    }

    #WelkomsberichtenBerichtTaak::-webkit-scrollbar-thumb, #DossierHistory::-webkit-scrollbar-thumb {
        /*outline: 1px solid #7C7C7C;*/
        border-radius: 10em;
        /*height: 5em;*/
        background-clip: padding-box;
        border: 0.225em solid rgba(0, 0, 0, 0);
        /*border: 0.225em solid rgba(0, 0, 0, 0);*/
        background-color: #7C7C7C;
    }

/*#WelkomsberichtenBerichtTaak > table {
            width: calc(100% + 17px);
            height: 100%;
            overflow-y: scroll;
            padding-right: 17px;*/ /* Increase/decrease this value for cross-browser compatibility */
/*box-sizing: border-box;
        }*/

.infoContainer.Welkomsberichten.visible {
    display: inline-block !important;
}

.infoContainer > p > span {
    width: 2em;
    height: 2em;
    padding: 1em;
    cursor: pointer;
}

.infoContainer > p > .hoverPopup {
    font-weight: bold !important;
    width: 9em;
    height: 1.25em;
    padding: 0;
    margin-top: 0.5em;
    left: 58%;
    transform: translateX(-42%);
}

#WelkomsberichtenBody .infoContainer > p > .hoverPopup:before {
    content: 'Gelezen berichten';
}

.infoContainer > p > .Gelezen + .hoverPopup {
    width: 10em;
}

#WelkomsberichtenBody .infoContainer > p > .Gelezen + .hoverPopup:before {
    content: 'Ongelezen berichten';
}

.infoContainer > p > .Gelezenberichten {
    background: url("../Icons/NietGezien_btn.png") no-repeat center;
    background-size: 1.5em;
}

    .infoContainer > p > .Gelezenberichten.Gelezen {
        background: url("../Icons/Gezien_btn.png") no-repeat center;
        background-size: 1.5em;
    }

/*#AlgemeenGelezen {
                background: url("../Icons/Algemeen_NietGezien_Homescreen_icon.png") no-repeat center;
                background-size: 2em;
            }

                #AlgemeenGelezen.Gelezen {
                    background: url("../Icons/Algemeen_Gezien_Homescreen_icon.png") no-repeat center;
                    background-size: 2em;
                }

            #AgendaGelezen {
                background: url("../Icons/Agenda_NietGezien_Homescreen_icon.png") no-repeat center;
                background-size: 2em;
            }

                #AgendaGelezen.Gelezen {
                    background: url("../Icons/Agenda_Gezien_Homescreen_icon.png") no-repeat center;
                    background-size: 2em;
                }

            #GebruikerGelezen {
                background: url("../Icons/Gebruikers_NietGezien_Homescreen_icon.png") no-repeat center;
                background-size: 2em;
            }

                #GebruikerGelezen.Gelezen {
                    background: url("../Icons/Gebruikers_Gezien_Homescreen_icon.png") no-repeat center;
                    background-size: 2em;
                }

            #FacturatieGelezen {
                background: url("../Icons/Facturatie_NietGezien_Homescreen_icon.png") no-repeat center;
                background-size: 2em;
            }

                #FacturatieGelezen.Gelezen {
                    background: url("../Icons/Facturatie_Gezien_Homescreen_icon.png") no-repeat center;
                    background-size: 2em;
                }*/

/*#AlgemeenWelkomsberichten {
            background: #CBDF87;
        }

        #AgendaWelkomsberichten {
            background: #F8D184;
        }

        #GebruikerWelkomsberichten {
            background-color: #B6CEE2;
        }

        #WetPoortwachterWelkomsberichten {
            background-color: #FDC19A;
        }

        #FacturatieWelkomsberichten {
            background-color: #C49EC1;
        }*/

.WelkomsberichtRow {
    padding: 0.5em;
    margin: 0.8em 1em;
    border-radius: 0.7em;
    align-content: center;
    position: relative;
}

/*#WelkomsberichtenBerichtTaak > .WelkomsberichtRow {
                border: 0.2em solid #BEBEBE;
            }*/

#WelkomsberichtenBerichtTaak > .WelkomsberichtRow > [class^="WelkomsberichtBoodschap-"] {
    max-width: 9.7vw;
    line-height: 1.4rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.WelkomsberichtSoort {
    float: left;
    margin-top: -0.4em;
}

#WelkomsberichtenAgenda > .WelkomsberichtRow > .WelkomsberichtSoort.Nieuw {
    background: url("../Icons/Agenda_Toegevoegd_Homescreen_icon.png") no-repeat center;
    background-size: 2.3em;
    width: 2.3em;
    height: 2.3em;
    margin-top: 0.2em;
    margin-left: 0.35em;
}

#WelkomsberichtenAgenda > .WelkomsberichtRow > .WelkomsberichtSoort.Gewijzigd {
    background: url("../Icons/Agenda_Wijziging_Homescreen_icon.png") no-repeat center;
    background-size: 2.3em;
    width: 2.3em;
    height: 2.3em;
    margin-top: 0.2em;
    margin-left: 0.35em;
}

#WelkomsberichtenAgenda > .WelkomsberichtRow > .WelkomsberichtSoort.Verwijderd {
    background: url("../Icons/Agenda_Verwijderd_Homescreen_icon.png") no-repeat center;
    background-size: 2.3em;
    width: 2.3em;
    height: 2.3em;
    margin-top: 0.2em;
    margin-left: 0.35em;
}

#WelkomsberichtenGebruiker > .WelkomsberichtRow > .WelkomsberichtSoort {
    background: url("../Icons/Gebruiker_Toegevoegd_Homescreen_icon.png") no-repeat center;
    background-size: 3em;
    width: 3em;
    height: 3em;
    margin-top: -0.2em;
}

#WelkomsberichtenWetPoortwachter > .WelkomsberichtRow > .WelkomsberichtSoort {
    background: url("../Icons/WetPoortwachter_Homescreen_icon.png") no-repeat center;
    display: block;
    width: 3.5em;
    height: 3.5em;
    background-size: 3em;
}

.WelkomsberichtRow.Ziektemelding > .WelkomsberichtSoort {
    margin-top: 0.35em;
}

#WelkomsberichtenFacturatie > .WelkomsberichtRow > .WelkomsberichtSoort.Nieuw {
    background: url("../Icons/Facturatie_Toegevoegd_Homescreen_icon.png") no-repeat center;
    background-size: 2.3em;
    width: 2.3em;
    height: 2.3em;
    margin-top: 0.2em;
    margin-left: 0.35em;
}

#WelkomsberichtenFacturatie > .WelkomsberichtRow > .WelkomsberichtSoort.Start {
    background: url("../Icons/Facturatie_Start_Homescreen_icon.png") no-repeat center;
    background-size: 3em;
    width: 3em;
    height: 3em;
    margin-top: -0.2em;
}

#WelkomsberichtenFacturatie > .WelkomsberichtRow > .WelkomsberichtSoort.Klaar {
    background: url("../Icons/Facturatie_Klaar_Homescreen_icon.png") no-repeat center;
    background-size: 3em;
    width: 3em;
    height: 3em;
    margin-top: -0.2em;
}

#WelkomsberichtenBerichtTaak > .WelkomsberichtRow > .WelkomsberichtSoort {
    width: 2em;
    height: 2em;
    /*margin: 0.3em auto;*/
    display: flex;
    justify-content: center;
    cursor: pointer;
}

#WelkomsberichtenBerichtTaak > .WelkomsberichtRow.Bericht > .WelkomsberichtSoort {
    background: url("../Icons/Bericht_Homescreen_icon.png") no-repeat center;
    background-size: 2em;
}

#WelkomsberichtenBerichtTaak > .WelkomsberichtRow.Taak > .WelkomsberichtSoort {
    background: url("../Icons/Taak_Homescreen_icon.png") no-repeat center;
    background-size: 2em;
}

[class^="WelkomsberichtBoodschap-"] {
    width: auto;
    max-width: 15vw;
    white-space: pre-line;
    text-align: center;
    display: inline-block;
}

.WelkomsberichtBoodschap-Algemeen {
    max-width: 24vw;
}

.WetPoortwachterClientLink, .WetPoortwachterClientLink:hover, .WetPoortwachterClientLink:active {
    float: right;
    background: url("../Icons/Gebruikers_btn_active.png") no-repeat center;
    background-size: 3em;
    width: 3em;
    height: 3em;
    margin-top: -0.2em;
}

.WelkomsberichtRow.Ziektemelding > .WetPoortwachterClientLink {
    margin-top: 0.5em;
}

.WetPoortwachterClientLink + .hoverPopup {
    right: 0;
    top: 3.8em;
}

.WelkomsberichtGelezen {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 0.15em;
    margin-right: 0.15em;
    /*background-color: #F1A208;
                border: 0.3em solid #F1A208;*/
    border-radius: 3em;
    width: 1.5em;
    height: 1.5em;
    /*background-size: 0.8em;
                width: 0.8em;
                height: 0.8em;*/
    cursor: pointer;
}

    .WelkomsberichtGelezen.Algemeen {
        background: url("../Icons/Algemeen_Melding_NietGezien_Homescreen_icon.png") no-repeat center;
        background-size: 1.5em;
    }

        .WelkomsberichtGelezen.Algemeen.Berichtgelezen {
            background: url("../Icons/Algemeen_Melding_Gezien_Homescreen_icon.png") no-repeat center;
            background-size: 1.5em;
        }

    .WelkomsberichtGelezen.Agenda, .WelkomsberichtGelezen.Bericht {
        background: url("../Icons/Agenda_Melding_NietGezien_Homescreen_icon.png") no-repeat center;
        background-size: 1.5em;
    }

        .WelkomsberichtGelezen.Agenda.Berichtgelezen, .WelkomsberichtGelezen.Bericht.Berichtgelezen {
            background: url("../Icons/Agenda_Melding_Gezien_Homescreen_icon.png") no-repeat center;
            background-size: 1.5em;
        }

    .WelkomsberichtGelezen.Gebruiker, .WelkomsberichtGelezen.Taak {
        background: url("../Icons/Gebruikers_Melding_NietGezien_Homescreen_icon.png") no-repeat center;
        background-size: 1.5em;
    }

        .WelkomsberichtGelezen.Gebruiker.Berichtgelezen, .WelkomsberichtGelezen.Taak.Berichtgelezen {
            background: url("../Icons/Gebruikers_Melding_Gezien_Homescreen_icon.png") no-repeat center;
            background-size: 1.5em;
        }

    .WelkomsberichtGelezen.Facturatie {
        background: url("../Icons/Facturatie_Melding_NietGezien_Homescreen_icon.png") no-repeat center;
        background-size: 1.5em;
    }

        .WelkomsberichtGelezen.Facturatie.Berichtgelezen {
            background: url("../Icons/Facturatie_Melding_Gezien_Homescreen_icon.png") no-repeat center;
            background-size: 1.5em;
        }

    .WelkomsberichtGelezen.WetPoortwachter {
        background: none;
    }

.opnieuwToewijzenTaak {
    position: absolute;
    top: 0.95em;
    right: 0;
    margin-top: 0.15em;
    margin-right: 0.15em;
    background: url("../Icons/Doorsturen_Forward_btn.png") no-repeat center;
    background-size: 0.8em;
    width: 0.8em;
    height: 0.8em;
}

.Forward.hoverPopup {
    right: 0;
    margin-top: 0.2em;
}

.taakAfronden_btn, .taakAfronden_btn:hover, .taakAfronden_btn:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    background-color: transparent;
    background: url("../Icons/Taak_Afgerond_icon.png") no-repeat center;
    background-size: 2.5em;
    height: 3em;
    width: 3em;
    /*margin-top: -1em;*/
    cursor: pointer;
    float: right;
    padding: 0;
}

.taakAfgerondOp {
    float: right;
    background: url("../Icons/Taak_Afgerond_icon2.png") no-repeat center;
    background-size: 2.3em;
    width: 2.3em;
    height: 2.3em;
    margin-top: -0em;
    margin-right: 0.1em;
}

#WelkomsberichtenAlgemeen > .WelkomsberichtRow {
    background: #E5EFC3;
}

#WelkomsberichtenAgenda > .WelkomsberichtRow {
    background: #FCE8C2;
}

#WelkomsberichtenGebruiker > .WelkomsberichtRow {
    background: #DBE7F1;
}

#WelkomsberichtenWetPoortwachter > .WelkomsberichtRow {
    background: #FEE0CD;
}

#WelkomsberichtenFacturatie > .WelkomsberichtRow {
    background: #E2CFE0;
}

#WelkomsberichtenBerichtTaak > .WelkomsberichtRow {
    background: #CBDF87;
    /*line-height: 0.8em;*/
}

    #WelkomsberichtenBerichtTaak > .WelkomsberichtRow.Bericht {
        background: #FCE8C2;
    }

    #WelkomsberichtenBerichtTaak > .WelkomsberichtRow.Taak {
        background: #DBE7F1;
    }

        #WelkomsberichtenBerichtTaak > .WelkomsberichtRow.Taak.Doorgestuurd, #WelkomsberichtenBerichtTaak > .WelkomsberichtRow.Taak.Klaar {
            background: #BEBEBE;
        }

        #WelkomsberichtenBerichtTaak > .WelkomsberichtRow.Taak > .WelkomsberichtBoodschap-Taak.Klaar {
            text-decoration: line-through;
            text-decoration-thickness: 2px;
            cursor: text;
        }

.links {
    float: left;
}

.rechts {
    float: right;
}

/*Opdrachtgever
----------------*/
#OpenNewOpdrachtgever {
    background: url("../Icons/Opdrachtgevers_btn_active.png") no-repeat center;
    background-size: 2.5em;
}

    #OpenNewOpdrachtgever.hoverPopupShow + .hoverPopup {
        margin-top: -1.1em;
        margin-left: 3em;
    }

#OpenNewAdres {
    background: url("../Icons/Adres_btn.png") no-repeat center;
    background-size: 3em;
}

#OpenAddWerkgever {
    background: url("../Icons/Werkgevers_btn_active.png") no-repeat center;
    background-size: 2.8em;
}

.parameterRuimteOpdrachtgever {
    height: 8vh;
}

#addLogo {
    background: url("../Icons/Open_File_btn.png") no-repeat center;
    background-size: 2.5em;
}

.addLogo {
    height: 2.308em;
    width: 2.308em;
    background-size: 2.308em;
    border: solid 0.21em #7C7C7C;
    background: url("../Icons/Open_File_btn.png") no-repeat center;
    background-size: 2.5em;
}



/*Client
--------*/
#OpenAddWerknemer {
    background: url("../Icons/Gebruikers_btn_active.png") no-repeat center;
    background-size: 2.5em;
}

    #OpenAddWerknemer.hoverPopupShow + .hoverPopup {
        margin-top: -1.2em;
        margin-left: 3.4em;
    }

#OpenAddTraject {
    background: url("../Icons/Begeleidingsperiodes_btn.png") no-repeat center;
    background-size: 2.5em;
}

#AddGespreksnotitie {
    background: url("../Icons/Gespreksnotities_btn.png") no-repeat center;
    background-size: 2.5em;
}

#AddFormulier {
    background: url("../Icons/Formulieren_btn.png") no-repeat center;
    background-size: 2.5em;
}

#AddAfspraak {
    background: url("../Icons/Agenda_btn_active.png") no-repeat center;
    background-size: 2.5em;
}

#AddE-consult {
    background: url("../Icons/E-consult_btn.png") no-repeat 45% 70%;
    background-size: 2.5em;
}

#Clientgegevens.hoverPopupShow + .hoverPopup {
    margin-top: 0.7vh;
    margin-left: 1.8vw;
}

#Anamnese.hoverPopupShow + .hoverPopup {
    margin-top: 0.7vh;
    margin-left: 11.5vw;
}

#TrajectOorzaken.hoverPopupShow + .hoverPopup {
    margin-top: 15.7em;
    margin-left: 50%;
    transform: translateX(-50%);
    width: 80%;
}

#TrajectOorzaken ~ div > .GeslachtSlider.hoverPopupShow + .hoverPopup {
    margin-top: 23em;
    margin-left: 50%;
    transform: translateX(-50%);
}

.Indicatie {
    width: 0.35em;
    height: 0.8em;
    border-radius: 0.35em;
    margin-bottom: -0.05em;
    display: inline-block;
}

.ReviewStatus, .SupervisieStatus {
    width: 1em;
    height: 1.8em;
    border-radius: 1em;
    margin-bottom: -0.05em;
    display: inline-block;
}

    /*[class^="Indicatie geslacht-"] {
        width: 0.3em;
        height: 0.7em;
        border-radius: 0.3em;
    }*/

    .Indicatie.geslacht-Man, .ReviewStatus.Nieuw {
        background: #B6CEE2;
    }

    .SupervisieStatus.Nieuw {
        background: #68A8DE;
    }

        .ReviewStatus.Nieuw + .hoverPopup, .SupervisieStatus.Nieuw + .hoverPopup {
            left: -2vw;
        }

            .ReviewStatus.Nieuw + .hoverPopup:before, .SupervisieStatus.Nieuw + .hoverPopup:before {
                content: 'Nieuw document';
                white-space: nowrap;
            }

    .Indicatie.geslacht-Vrouw {
        background: #FAC3D3;
    }

    .Indicatie.geslacht-Nonbinair, .ReviewStatus.Review {
        background: #f8d184;
    }

    .ReviewStatus.Review + .hoverPopup {
        left: -3.4vw;
    }

        .ReviewStatus.Review + .hoverPopup:before {
            content: 'Document wordt gereviewd';
            white-space: nowrap;
        }

    .SupervisieStatus.OnderSupervisie {
        background: #FDC19A;
    }

        .SupervisieStatus.OnderSupervisie.Verzuim + .hoverPopup {
            left: -4vw;
        }

            .SupervisieStatus.OnderSupervisie.Verzuim + .hoverPopup:before {
                content: 'Document wordt gesuperviseerd';
                white-space: nowrap;
            }

        .SupervisieStatus.OnderSupervisie.BMW + .hoverPopup {
            left: -3vw;
        }

            .SupervisieStatus.OnderSupervisie.BMW + .hoverPopup:before {
                content: 'Document is onder regie';
                white-space: nowrap;
            }

    .Indicatie.InDienst, .ReviewStatus.Akkoord {
        background: #97BF0E;
    }

        .ReviewStatus.Akkoord + .hoverPopup {
            left: -1.9vw;
        }

        .ReviewStatus.Akkoord + .hoverPopup:before {
            content: 'Cliënt is akkoord';
            white-space: nowrap;
        }

    .SupervisieStatus.Akkoord {
        background: #795;
    }

        .SupervisieStatus.Akkoord.Verzuim + .hoverPopup {
            left: -2.5vw;
        }

            .SupervisieStatus.Akkoord.Verzuim + .hoverPopup:before {
                content: 'Supervisor is akkoord';
                white-space: nowrap;
            }
        .SupervisieStatus.Akkoord.BMW + .hoverPopup {
            left: -2.7vw;
        }

            .SupervisieStatus.Akkoord.BMW + .hoverPopup:before {
                content: 'Regievoerder is akkoord';
                white-space: nowrap;
            }

    .selected .Indicatie.InDienst, .autosearch-option:hover .Indicatie.InDienst {
        border: 0.1px solid #DFDFDF;
        width: 0.3em;
        height: 0.75em;
    }

    .Indicatie.NietInDienst, .ReviewStatus.Afgekeurd {
        background: #E80C4D;
    }

        .ReviewStatus.Afgekeurd + .hoverPopup {
            left: -4.1vw;
        }

            .ReviewStatus.Afgekeurd + .hoverPopup:before {
                content: 'Cliënt heeft document afgekeurd';
                white-space: nowrap;
            }

    .SupervisieStatus.Afgekeurd {
        background: #885284;
    }

        .SupervisieStatus.Afgekeurd.Verzuim + .hoverPopup {
            left: -4.7vw;
        }
        
            .SupervisieStatus.Afgekeurd.Verzuim + .hoverPopup:before {
                content: 'Supervisor heeft document afgekeurd';
                white-space: nowrap;
            }

        .SupervisieStatus.Afgekeurd.BMW + .hoverPopup {
            left: -5.1vw;
        }

            .SupervisieStatus.Afgekeurd.BMW + .hoverPopup:before {
                content: 'Regievoerder heeft document afgekeurd';
                white-space: nowrap;
            }

    .Indicatie.Ziek, .ReviewStatus.Ondervoorbehoud {
        background: #FA8334;
    }

        .ReviewStatus.Ondervoorbehoud + .hoverPopup {
            left: -5.2vw;
        }

            .ReviewStatus.Ondervoorbehoud + .hoverPopup:before {
                content: 'Cliënt is akkoord onder voorbehoud';
                white-space: nowrap;
            }

    .SupervisieStatus.Ondervoorbehoud {
        background: #F1A208;
    }

        .SupervisieStatus.Ondervoorbehoud.Verzuim + .hoverPopup {
            left: -5.1vw;
        }

            .SupervisieStatus.Ondervoorbehoud.Verzuim + .hoverPopup:before {
                content: 'Supervisor is akkoord onder voorbehoud';
                white-space: nowrap;
            }

        .SupervisieStatus.Ondervoorbehoud.BMW + .hoverPopup {
            left: -5.3vw;
        }

            .SupervisieStatus.Ondervoorbehoud.BMW + .hoverPopup:before {
                content: 'Regievoerder is akkoord onder voorbehoud';
                white-space: nowrap;
            }

    .Indicatie.NietZiek {
        background: #6D9DC5;
    }

    .ReviewStatus.Definitief {
        background: #16195B;
    }

    .SupervisieStatus.Definitief {
        background: #050;
    }

        .ReviewStatus.Definitief + .hoverPopup:before, .SupervisieStatus.Definitief + .hoverPopup {
            left: -3.8vw;
        }

            .ReviewStatus.Definitief + .hoverPopup:before, .SupervisieStatus.Definitief + .hoverPopup:before {
                content: 'Dit is het definitieve document';
                white-space: nowrap;
            }

.dossierSwitch {
    position: relative;
    display: inline-block;
    width: 2.885em;
    height: 1.346em;
    top: -0.8em;
}

    .dossierSwitch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .dossierSwitch .slider:before {
        height: 0.962em;
        width: 0.962em;
        left: 2px;
        bottom: 2px;
        top: 1px;
    }

.E-consultContainer {
    width: 50vw;
    height: 50vh;
    position: relative;
    margin: auto;
    margin-top: 1vh;
}

.ownCamera {
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}

.E-consultBehandelaar {
    background: #000;
    border: #fff solid 0.23em;
    border-radius: 2em;
    width: 10vw;
    height: 10vh;
    overflow: hidden;
    color: #BBB;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
}

    .E-consultBehandelaar.inactive {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        top: 60vh;
        right: -20vw;
    }

.E-consultClient {
    background: #000;
    border: #fff solid 0.23em;
    border-radius: 2.3em;
    overflow: hidden;
    color: #BBB;
    width: 46.5vw;
    height: 46.5vh;
    transform: translatex(-50%);
    left: 50%;
    bottom: 0;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.VideoControlContainer {
    position: absolute;
    width: 12em;
    top: 60%;
    right: 7%;
    background: #fff;
    border-radius: 2em;
}

.VideoControlButtons {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 1.5em;
}

.VideoControlButton, .VideoControlButton:hover, .VideoControlButton:active {
    height: 3em;
    width: 3em;
    cursor: pointer;
    text-decoration: none;
    margin: 0.5em;
}

#VideoMicrophone {
    background: url("../Icons/Microfoon_btn.png") no-repeat center;
    background-size: 2.5em;
}

    #VideoMicrophone + .hoverPopup:before {
        content: 'Microfoon aanzetten';
        white-space: nowrap;
    }

    #VideoMicrophone.active {
        background: url("../Icons/Microfoon_active_btn.png") no-repeat center;
        background-size: 2.5em;
    }

        #VideoMicrophone.active + .hoverPopup:before {
            content: 'Microfoon uitzetten';
            white-space: nowrap;
        }

#VideoCamera {
    background: url("../Icons/Camera_btn.png") no-repeat center;
    background-size: 2.5em;
}

    #VideoCamera + .hoverPopup:before {
        content: 'Video aanzetten';
        white-space: nowrap;
    }

    #VideoCamera.active {
        background: url("../Icons/Camera_active_btn.png") no-repeat center;
        background-size: 2.5em;
    }

        #VideoCamera.active + .hoverPopup:before {
            content: 'Video uitzetten';
            white-space: nowrap;
        }

#VideoClose {
    background: url("../Icons/Ophangen_btn.png") no-repeat center;
    background-size: 2.5em;
}

.E-consultParticipantContainer {
    width: 100vw;
    height: 100vh;
    position: relative;
}

.E-consultParticipantClient {
    background: #000;
    border: #fff solid 0.23em;
    border-radius: 2em;
    width: 20vw;
    height: 20vh;
    overflow: hidden;
    color: #BBB;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
}

    .E-consultParticipantClient.inactive {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        top: 60vh;
        right: -8vw;
    }

.E-consultParticipantBehandelaar {
    background: #000;
    border: #fff solid 0.23em;
    border-radius: 2.3em;
    overflow: hidden;
    color: #BBB;
    width: 93vw;
    height: 93vh;
    transform: translatex(-50%);
    left: 50%;
    bottom: 0;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ParticipantVideoControlContainer {
    position: absolute;
    top: 60%;
    right: 0.1%;
    background: #fff;
    border-radius: 0 2em 2em 0;
}

    .ParticipantVideoControlContainer.mobile {
        top: 40%;
    }

.ParticipantVideoControlButtons {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 1.5em 0;
}

.ParticipantVideoControlContainer.mobile > .ParticipantVideoControlButtons {
    padding: 0.5em 0;
}

    .ParticipantVideoControlContainer.mobile > .ParticipantVideoControlButtons > div > .VideoControlButton {
        width: 1.5em;
        height: 1.5em;
        background-size: 1.2em;
    }

/*Agenda
--------*/
#dateSelector {
    font-size: 1.28em;
    font-weight: 700;
    color: #16195b;
}

.dateSelectorUnit {
    display: none;
    line-height: 3em;
}

    .dateSelectorUnit.active {
        display: flex;
    }

    .dateSelectorUnit > .next {
        background: url(../Icons/Volgende_Next_btn.png) no-repeat center;
        background-size: 3em;
        width: 3em;
        height: 3em;
        cursor: pointer;
    }

    .dateSelectorUnit > .prev {
        background: url(../Icons/Terug_Back_btn.png) no-repeat center;
        background-size: 3em;
        width: 3em;
        height: 3em;
        cursor: pointer;
    }

    .dateSelectorUnit > .selectedDay {
        width: 6.5em;
    }

    .dateSelectorUnit > .selectedWeek {
        width: 4.1em;
    }

    .dateSelectorUnit > .selectedMonth {
        width: 4.9em;
    }

.yearContainer, .dateSelectorUnit {
    text-align: center;
}

    .yearContainer > .nextYear {
        background: url(../Icons/Omhoog_Up_btn.png) no-repeat center;
        background-size: 3em;
        width: 3em;
        height: 3em;
        cursor: pointer;
    }

    .yearContainer > .prevYear {
        background: url(../Icons/Omlaag_Down_btn.png) no-repeat center;
        background-size: 3em;
        width: 3em;
        height: 3em;
        cursor: pointer;
    }

#today.vandaag {
    background: url("../Icons/Agenda_Vandaag_inactive_icon.png") no-repeat center;
    background-size: 2.5em;
    position: absolute;
    right: 1em;
}

    #today.vandaag.selected {
        background: url("../Icons/Agenda_Vandaag_icon.png") no-repeat center;
        background-size: 2.5em;
    }

#showDag {
    background: url("../Icons/Agenda_Dag_icon.png") no-repeat center;
    background-size: 2.5em;
}

#showMaand {
    background: url("../Icons/Agenda_Maand_icon.png") no-repeat center;
    background-size: 2.5em;
}

#showWeek {
    background: url("../Icons/Agenda_Week_icon.png") no-repeat center;
    background-size: 2.5em;
}

#heleDagbtn {
    margin-top: 0.7vh;
    margin-left: 0.5vw;
    position: relative;
    background: url("../Icons/Agenda_Dag_icon.png") no-repeat center;
    background-size: 2.5em;
}

    #heleDagbtn.selected {
        background: url("../Icons/Agenda_Dag_active_icon.png") no-repeat center;
        background-size: 2.5em;
    }

#afspraakHerhalingbtn {
    margin-top: 0.7vh;
    margin-left: 0.5vw;
    position: relative;
    background: url("../Icons/Agenda_Herhaling_inactive_icon.png") no-repeat center;
    background-size: 2.5em;
}

    #afspraakHerhalingbtn.selected {
        background: url("../Icons/Agenda_Herhaling_icon.png") no-repeat center;
        background-size: 2.5em;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important
    }

#afspraakHerhalingbtn_extend {
    margin-top: 0.7vh;
    margin-left: 0.5vw;
    position: relative;
    /*background: url("../Icons/Agenda_Herhaling_inactive_icon.png") no-repeat center; Deze lijkt niet nodig*/
    background-size: 2.5em;
    height: 5.7vh;
    top: -1.5vh;
    border-top-color: transparent;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    display: none;
}

    #afspraakHerhalingbtn_extend.selected {
        display: block;
        margin-bottom: -1vh;
    }

#PriveAfspraak {
    background: url("../Icons/Gezien_btn.png") no-repeat center;
    background-size: 2.5em;
}

    #PriveAfspraak + .hoverPopup:before {
        content: "Publiekelijk";
    }

    #PriveAfspraak.selected {
        background: url("../Icons/Algemeen_Melding_NietGezien_Homescreen_icon.png") no-repeat center;
        background-size: 2.5em;
    }

        #PriveAfspraak.selected + .hoverPopup:before {
            content: "Privé";
        }

        #PriveAfspraak.selected.AfspraakBanner {
            background: url("../Icons/NietGezien_btn.png") no-repeat center;
            background-size: 2.5em;
        }

        #addParticipant {
            background: url("../Icons/Gebruiker_Toevoegen_btn.png") no-repeat center;
            background-size: 2.5em;
        }

#downloadAppointment {
    background: url("../Icons/Download_btn.png") no-repeat center;
    background-size: 2.5em;
}

    #downloadAppointment.unselectable {
        background: url("../Icons/Download_unselectable_btn.png") no-repeat center;
        background-size: 2.5em;
        background-color: #7C7C7C !important;
        cursor: default;
    }

#stuurMailNotificatiebtn {
    background: url("../Icons/Email_btn.png") no-repeat center;
    background-size: 2.5em;
}

    #stuurMailNotificatiebtn.selected {
        background: url("../Icons/Email_active_btn.png") no-repeat center;
        background-size: 2.5em;
    }

    #stuurMailNotificatiebtn.unselectable {
        background: url("../Icons/Email_unselectable_btn.png") no-repeat center;
        background-size: 2.5em;
        background-color: #7C7C7C !important;
    }

#POBtaakdelegatiebtn {
    background: url("../Icons/Formulier_inzien_btn.png") no-repeat center;
    background-size: 2.5em;
}

    #POBtaakdelegatiebtn.selected {
        background: url("../Icons/Formulier_active_btn.png") no-repeat center;
        background-size: 2.5em;
    }

    #POBtaakdelegatiebtn.unselectable {
        background: url("../Icons/Formulier_unselectable_btn.png") no-repeat center;
        background-size: 2.5em;
        background-color: #7C7C7C !important;
    }

.itemIcon {
    float: left;
    height: 1.89em;
    width: 1.89em;
    display: inline-block;
    padding: 0.1697em;
}

    .itemIcon.Werkgever {
        background: url("../Icons/Werkgevers_btn_active.png") no-repeat center;
        background-size: 1.89em;
    }

    .itemIcon.ContactpersoonWerkgever {
        background: url("../Icons/Werkgevers_btn_active.png") no-repeat center;
        background-size: 1.89em;
    }

    .itemIcon.Werknemer {
        background: url("../Icons/Werknemers_btn_active.png") no-repeat center;
        background-size: 1.89em;
    }

    .itemIcon.Bedrijfsarts, .itemIcon.BMW {
        background: url("../Icons/Gebruikers_btn_active.png") no-repeat center;
        background-size: 1.89em;
    }

    .itemIcon.WerknemerRelatie {
        background: url("../Icons/Relaties_btn.png") no-repeat center;
        background-size: 1.89em;
    }

.tableDeelnemers {
    max-height: 30vh;
    overflow-y: auto;
    scrollbar-color: #7C7C7C transparent;
    scrollbar-width: thin;
}

    .tableDeelnemers::-webkit-scrollbar {
        width: 0.55vw;
    }

    .tableDeelnemers::-webkit-scrollbar-track {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        /*margin-right: 1em;*/
        background: #7C7C7C;
        border: 0.3em solid rgba(0, 0, 0, 0);
        background-clip: padding-box;
        /*background-size: 0;*/
    }

    .tableDeelnemers::-webkit-scrollbar-thumb {
        /*outline: 1px solid #7C7C7C;*/
        border-radius: 10em;
        /*height: 5em;*/
        background-clip: padding-box;
        border: 0.225em solid rgba(0, 0, 0, 0);
        /*border: 0.225em solid rgba(0, 0, 0, 0);*/
        background-color: #7C7C7C;
    }

.newParticpantContainer, .herhaalAfspraakContainer {
    position: absolute;
    width: fit-content;
    padding: 1.5em;
    padding-bottom: 1.9em;
    top: 30%;
    right: 2.5%;
    background: #fff;
    border-radius: 2em;
    height: 45.696vh;
}

.newParticpantControls {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 16.75vw;
}

#ParticipantTypeChange {
    position: relative;
    background: transparent;
    width: 1px;
    height: 1px;
    display: none;
    margin-top: -3em;
    z-index: 20;
}

.deelnemerItemContainer.Werknemer {
    cursor: pointer;
}

#showBehandelaar {
    background: url("../Icons/Gebruikers_btn_active.png") no-repeat center;
    background-size: 2.5em;
}

#showWerkgever {
    background: url("../Icons/Werkgevers_btn_active.png") no-repeat center;
    background-size: 2.5em;
}

#showWerknemer {
    background: url("../Icons/Werknemers_btn_active.png") no-repeat center;
    background-size: 2.5em;
}

#showWerknemerrelatie {
    background: url("../Icons/Relaties_btn.png") no-repeat center;
    background-size: 2.5em;
}

#Participantbtn {
    text-align: right;
    margin: 0 auto !important;
}

    #Participantbtn.Werknemer {
        width: 6em;
        background: url("../Icons/Werknemers_btn_active.png") no-repeat left;
        background-size: contain;
        padding-left: 1.8em;
    }

    #Participantbtn.Werknemerrelatie {
        width: 10em;
        background: url("../Icons/Relaties_btn.png") no-repeat left;
        background-size: contain;
        padding-left: 1.8em;
    }

    #Participantbtn.Werkgever {
        width: 6em;
        background: url("../Icons/Werkgevers_btn_active.png") no-repeat left;
        background-size: contain;
        padding-left: 1.8em;
    }

    #Participantbtn.Bedrijfsarts {
        width: 8em;
        background: url("../Icons/Gebruikers_btn_active.png") no-repeat left;
        background-size: contain;
        padding-left: 1.8em;
    }

    #Participantbtn.Bedrijfsmaatschappelijkwerker {
        width: 15em;
        background: url("../Icons/Gebruikers_btn_active.png") no-repeat left;
        background-size: contain;
        padding-left: 1.8em;
    }

.deelnemersaddtabel {
    overflow-y: auto;
    height: 36.3vh;
    scrollbar-color: #7C7C7C transparent;
    scrollbar-width: thin;
}

    .deelnemersaddtabel.werk {
        height: 31.5vh;
    }

    .deelnemersaddtabel::-webkit-scrollbar {
        width: 0.55vw;
    }

    .deelnemersaddtabel::-webkit-scrollbar-track {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        /*margin-right: 1em;*/
        background: #7C7C7C;
        border: 0.3em solid rgba(0, 0, 0, 0);
        background-clip: padding-box;
        /*background-size: 0;*/
    }

    .deelnemersaddtabel::-webkit-scrollbar-thumb {
        /*outline: 1px solid #7C7C7C;*/
        border-radius: 10em;
        /*height: 5em;*/
        background-clip: padding-box;
        border: 0.225em solid rgba(0, 0, 0, 0);
        /*border: 0.225em solid rgba(0, 0, 0, 0);*/
        background-color: #7C7C7C;
    }

.deelnemerDetailsContainer {
    margin-top: 2.5vh;
    border: 1px solid #7C7C7C;
    border-radius: 1em;
}

.deelnemerDetails {
    color: #7C7C7C;
    padding: 0 0.5em;
    font-size: 1.3em;
    white-space: nowrap;
    /*display: list-item;*/
}

.addParticipantsDropdown {
    width: 15.8vw !important;
}






.ElementInline-block {
    display: inline-block;
}

.notClickable {
    cursor: auto;
}

.inactive {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    cursor: default;
}

@media all and (max-width:1780px) {
    /*Home page
    ----------------*/
    .infoContainer {
        width: 29vw;
    }

    [class^="WelkomsberichtBoodschap-"] {
        max-width: 13vw;
    }

    .WelkomsberichtBoodschap-Algemeen {
        max-width: 18vw;
    }
}

@media all and (max-width:1650px) {
}

@media all and (max-width:1550px) {
}

@media all and (max-width: 1400px) {
    #SelectedEntity {
        padding-left: 1em;
    }

    #subtitle {
        padding-left: 1em;
    }

    /*Home page
    ----------------*/
    .infoContainer {
        width: 25vw;
    }

    .WelkomsberichtBoodschap-WetPoortwachter {
        max-width: 10vw;
        margin-left: -0.4em;
    }

    #WelkomsberichtenWetPoortwachter > .WelkomsberichtRow > .WelkomsberichtSoort {
        margin-left: -0.2em;
    }

    #WelkomsberichtenBerichtTaak > div > .WelkomsberichtSoort {
        /*margin-left: 0;*/
    }

    .newModalContent::-webkit-scrollbar {
        width: 0.9vw;
    }
}

@media all and (max-height: 850px) {

    #extraInfo {
        height: 58.5vh;
    }

    .date-picker > .selectedDate:not(input[name="Zoekfilters.Geboortedatum"]) + .dates.open {
        left: 26em;
        top: -17.8em;
    }

    .select.open:not(#MeldingSoortList-dropdown) .custom-options {
        left: 27.5em;
        top: -2.8em;
        max-height: 15em;
        overflow-y: auto;
    }

    .newModalBody.SelectionActive {
        margin-left: 15%;
    }

    /*Home page
    ----------------*/
    #WelkomsberichtToevoegen {
        bottom: 2.3vh;
    }

    .parameterRuimteOpdrachtgever {
        height: 5vh;
    }
}

@media all and (max-height: 750px) {
    #extraInfo {
        height: 55vh;
    }

    /*Home page
    ----------------*/
    #WelkomsberichtToevoegen {
        bottom: 1.3vh;
    }

    .newModalBody {
        margin-top: 5%;
    }

    .parameterRuimteOpdrachtgever {
        height: 6.5vh;
    }
}

@media all and (max-height: 650px) {
    #extraInfo {
        height: 52.5vh;
    }
}