/* LOGIN */

body {
    font-weight: normal !important;
    -webkit-font-smoothing: antialiased;
}

:root {
    --king_back_d: #252830;
    --king_color_d: #f5f5f5;
    --king_head_back_d: #525256;
    --king_head_color_d: #fff;
    --king_textfield_back_d: #525256;
    --king_textfield_color_d: #fff;
}

input[type="button"]:focus,
button:focus:not(.swal2-cancel),
table:focus {
    outline: none !important;
}

p,
div,
span,
a,
form,
img,
h1 {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

p {
    overflow-wrap: break-word;
    white-space: normal;
}

.pl-5 {
    padding-left: 5px;
}

.pl-10 {
    padding-left: 10px;
}

select {
    /*webkit browsers */
    -moz-appearance: menulist;
    /*Firefox */
    appearance: menulist;
    border-radius: var(--borderradius_compact); /* MW 13-02-2021, ALG-1117 */
    border: 1px solid var(--king_border); /* HBO 17-2-2021 UX-13 */
}

.material-icons {
    vertical-align: sub !important;
}
.righttop{float: right;}
/* JIRA:AC-41  */
.jqx-fill-state-normal {
    font-family: inherit !important;
}

.table_hoofdscherm {
    width: 100vw;
    padding: 0px;
    height: 100vh;
    display: flex;
}

.loginwrapper {
    width: 100%;
    height: 100%;
    display: inline-block;
    position: absolute;
}

.logintitle {
    border: 0px;
    width: 50%;
    height: 100%;
    float: left;
    background-color: #EDF2FA;
    display: inline-block;
    overflow: hidden;
}

.login_titleback {
    background-image: url(../img/picture/illustratie_login.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 80vh;
    height: 74vh;
    position: relative;
    top: calc(10vh);
}

.login_logo {
    position: fixed;
    left: 10px;
    top: 0px;
    padding: 40px;
    background-image: url(../img/logo/logo_bjorn_lunden.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 580px;
    height: 100px;
}

/*DD: 25-02-21: ALG-1128*/
.login_logo_form {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.login_logo_dark {
    background-image: url(../img/logo/logo_king_software_dark.svg);
    background-repeat: no-repeat;
}

.menuknopking_darkblue {
    font-family: Roboto;
    font-size: 16px !important;
    background-color: var(--kingblauw) !important;
    color: #fff !important;
    height: 33px !important;
}

.menuknopking_alert {
    font-family: Roboto;
    font-style: normal !important;
    background-color: var(--king_alert) !important;
    color: #fff !important;
}

.menuknopking_darkblueout {
    font-family: Roboto;
    font-size: 16px !important;
    background-color: var(--kingblauw) !important;
    color: #fff !important;
    height: 33px !important;
}

.menuknopking_greyout {
    font-family: Roboto;
    font-size: 16px !important;
    background-color: #999 !important;
    color: #fff !important;
    height: 33px !important;
}

/*DD: 19-3-21: ALG-1142: button revamp;*/
.login_button {
    font-family: Roboto;
    width: 400px;
    font-size: 16px;
    height: 33px;
    background-color: var(--kingblauw);
    color: #fff;
    border: 0px;
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
}

    .login_button:hover {
        border: 1px solid #EDF2FA;
    }

.logout_button {
    width: 400px;
    font-size: 16px;
    height: 33px;
    background-color: #999;
    color: #fff;
    border: 0px;
}

    .logout_button:hover {
        border: 1px solid #EDF2FA;
    }

.loginwrap {
    width: 100%;
    height: 100%;
    display: flex;
}

/* ALG-1121 DD: 26-03-21: 100vw ging niet goed in sommige schermen */
.loginbody {
    width: auto;
    height: 100vh;
}

/* ALG-648 DD: 28-03-19: border-radius meegeven van 6px */
/* HBO: UX-12 22-12-2020 nieuw login-scherm */
.loginwrapperinner {
    width: 50%;
    height: 100%;
    float: right;
    margin: 0 auto;
    text-align: center;
    min-width: 600px;
    padding: 10px;
}

.loginwrapper_content {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 75%;
    transform: translate3d(-50%, -50%, 0);
}

.btn-default {
    background: #3b6998;
    color: #fff;
    text-shadow: 1px 1px rgba(0,0,0,0.1);
    background: -moz-linear-gradient(top, #3b6998 0%, #0b4073 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b6998), color-stop(100%,#0b4073));
    background: -webkit-linear-gradient(top, #3b6998 0%,#0b4073 100%);
    background: -o-linear-gradient(top, #3b6998 0%,#0b4073 100%);
    background: -ms-linear-gradient(top, #3b6998 0%,#0b4073 100%);
    background: linear-gradient(to bottom, #3b6998 0%,#0b4073 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b6998', endColorstr='#0b4073',GradientType=0 );
}

.btn2 {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.text-left {
    text-align: left !important;
}

.waves-effect {
    position: relative;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    vertical-align: middle;
    z-index: 1;
    will-change: opacity, transform;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    -ms-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}

.loginwrapper button.btn {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

/* KCO, 24-10-2018, Jira: ALG-461, Ondertekstjes oa gebruikersbeheer.*/
.small {
    font-size: 80%;
    color: var(--king_small_text);
}

.smallblack {
    font-size: 80%;
    color: black;
}

.fontsize06 {
    font-size: 0.5rem !important;
}

.fontsize06 {
    font-size: 0.6rem !important;
}

#s_sessiecodescherm,
#s_licentiescherm {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    margin: 2px;
    padding: 5px;
}

#div_adm_pagina {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    margin: 2px;
    padding: 5px;
}

.btn {
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    height: auto;
}

    .btn:first-child {
        margin-left: 0;
    }

    .btn:focus {
        outline: thin dotted #333;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
    }

    .btn.active,
    .btn:active {
        background-image: none;
        outline: 0;
        -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
        -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    }

    .btn.disabled,
    .btn[disabled],
    .menuknop[disabled] {
        cursor: default;
        background-image: none;
        opacity: .65;
        filter: alpha(opacity=65);
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

.btn-large {
    padding: 10px;
    font-size: 14px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px
}

    .btn-large[class^="icon-"],
    .btn-large[class*=" icon-"] {
        margin-top: 4px;
    }

.btn-medium {
    padding: 2px 17px;
    font-size: 12px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-weight: normal;
}

.primary.btn:active {
    background-image: none;
    background-color: #3072b3; /* Old browsers */
    -webkit-box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2);
    box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2);
}

::-webkit-input-placeholder {
    letter-spacing: 1px;
    font-size: 12px;
    font-family: Arial,Microsoft Sans Serif,Helvetica,Tahoma,Trebuchet MS;
    color: var(--gen_placeholder_text) !important;
}

::-moz-placeholder {
    color: var(--gen_placeholder_text) !important;
    opacity: 1;
}

:-moz-placeholder {
    color: var(--gen_placeholder_text) !important;
    opacity: 1;
}

:-ms-input-placeholder {
    color: var(--gen_placeholder_text) !important;
}

.primary_blue.btn {
    color: #FFFFFF;
    padding-top: 5px;
    background-image: none;
    background-color: #428bca; /* Old browsers */
    border: 1px solid #428bca;
}

    .primary_blue.btn:active {
        background-image: none;
        background-color: #428bca; /* Old browsers */
        border: 1px solid #428bca;
    }

    .primary_blue.btn:hover {
        border: none;
    }

.primary_red.btn {
    color: #FFFFFF;
    padding-top: 3px;
    background-image: none;
    background-color: #FF0000; /* Old browsers */
    -webkit-box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2);
    box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2);
}

    .primary_red.btn:active {
        background-image: none;
        background-color: #FF0000; /* Old browsers */
        -webkit-box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2);
        -moz-box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2);
        box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2);
    }

.primary_yellow.btn {
    color: #000000;
    padding-top: 3px;
    background-image: none;
    background-color: #f4f77c; /* Old browsers */
    -webkit-box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2);
    box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2);
}

    .primary_yellow.btn:active {
        background-image: none;
        -webkit-box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2);
        -moz-box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2);
        box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2);
    }

.primary_yellow_small.btn {
    color: #000000;
    text-decoration: none;
    text-shadow: 0px;
    background-image: none;
    background-color: #f4f77c; /* Old browsers */
    -webkit-box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2);
    box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2);
}

.primary_green.btn {
    color: #fff;
    text-decoration: none;
    text-shadow: 0px;
    background-repeat: repeat-x; /* Repeat the gradient */
    background-color: #4ba614;
    border: 1px solid #4ba614;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .2);
    background-image: linear-gradient(to bottom, #4ba614, #008c00);
}

    .primary_green.btn:active {
        background-image: none;
        background-color: #4ba614; /* Old browsers */
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .2);
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .2);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .2);
    }
/* Jira: INCURA-66  */
.primary_orange.btn {
    /*padding-top: 7px;*/
    color: #000000;
    text-decoration: none;
    text-shadow: 0px;
    background-color: #FFCC33;
    border: 1px solid #c0c0c0;
}

    .primary_orange.btn:active {
        background-image: none;
        background-color: #FFCC33; /* Old browsers */
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .2);
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .2);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .2);
    }

.primary_outline.btn {
    padding: 5px;
    text-decoration: none;
    text-shadow: 0px;
    border: 1px solid #c0c0c0;
}

select {
    background: var(--king_background);
    color: var(--king_text_color);
}

/* http://codepen.io/BandarRaffah/pen/ibwje */
input[type="checkbox"].ios {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    margin: 0px;
}
    input[type="checkbox"].ios.small {
        width: 24px;
        height: 12px;
    }
    input[type="checkbox"].ios {
         width: 34px; 
         height: 18px; 
    }
    input[type="checkbox"].ios.small + div {
        width: 24px;
        height: 12px;
    }
    input[type="checkbox"].ios + div { /*vierkant om de cirkel*/
        vertical-align: middle;
        border: 1px solid rgba(0, 0, 0, .4);
        border-radius: 999px;
        background-color: rgba(0, 0, 0, 0.1);
        -ms-transition-duration: 0.4s;
        -ms-transition-property: background-color, box-shadow;
        -webkit-transition-duration: 0.4s;
        -webkit-transition-property: background-color, box-shadow;
        box-shadow: inset 0 0 0 0px rgba(0, 0, 0, 0.4);
        width: 34px;
        height: 18px;
        cursor: pointer;
    }

    input[type="checkbox"].ios:checked + div {
        background-position: 0 0;
        background-color: #01a9da;
        border: 1px solid #01a9da;
        box-shadow: inset 0 0 0 10px rgba(66, 139, 202, 1); /*rgba(1, 169, 218, 1)*/
        cursor: pointer;
    }
    input[type="checkbox"].ios.small + div > div {
        width: 10px;
        height: 10px;
    }
    input[type="checkbox"].ios + div > div { /*cirkel links (niet aangevinkt)*/
        float: left;
        width: 16px;
        height: 16px;
        border-radius: inherit;
        background: #ffffff;
        cursor: pointer;
        -ms-transition-timing-function: cubic-bezier(.54, 1.85, .5, 1);
        -ms-transition-duration: 0.4s;
        -ms-transition-property: transform, background-color, box-shadow;
        -webkit-transition-timing-function: cubic-bezier(.54, 1.85, .5, 1); /*kan ook: ease-in-out; */
        -webkit-transition-duration: 0.4s;
        -webkit-transition-property: transform, background-color, box-shadow;
        -moz-transition-timing-function: cubic-bezier(.54, 1.85, .5, 1);
        -moz-transition-duration: 0.4s;
        -moz-transition-property: transform, background-color;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(0, 0, 0, 0.4);
        pointer-events: none;
        margin-top: 1px;
        margin-left: 1px;
    }

    input[type="checkbox"].ios.small:checked + div > div {
        -webkit-transform: translate3d(10px, 0, 0);
        width: 10px;
        height: 10px;
    }

    input[type="checkbox"].ios:checked + div > div { /* cirkel rechts (aangevinkt) */
        cursor: pointer;
        -webkit-transform: translate3d(16px, 0, 0);
        -moz-transform: translate3d(16px, 0, 0);
        -ms-transform: translate3d(16px, 0, 0);
        background-color: #ffffff;
        width: 16px;
        height: 16px;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(66, 139, 202, 1); /*rgba(8, 80, 172, 1);*/
    }

    input[type="checkbox"].ios:disabled + div { /* AVD JIA:AI-89 21-11-16  licht grijs ook als is het checked*/
        cursor: pointer;
        background-position: 0 0;
        background-color: rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(0, 0, 0, .4);
        box-shadow: inset 0 0 0 0px rgba(0, 0, 0, 0.4);
    }

        input[type="checkbox"].ios:disabled + div > div { /* AVD JIA:AI-89 21-11-16  cirkel licht grijs */
            cursor: pointer;
            background-color: rgb(224, 224, 224);
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(0, 0, 0, 0.4);
        }

.box {
    padding: 5px;
    margin: 0 auto;
    background-color: #fff;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}

    .box:before,
    .box:after {
        position: absolute;
        width: 40%;
        height: 10px;
        content: ' ';
        left: 12px;
        bottom: 12px;
        background: transparent;
        -webkit-transform: skew(-5deg) rotate(-5deg);
        -moz-transform: skew(-5deg) rotate(-5deg);
        -ms-transform: skew(-5deg) rotate(-5deg);
        -o-transform: skew(-5deg) rotate(-5deg);
        transform: skew(-5deg) rotate(-5deg);
        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        z-index: -1;
    }

    .box:after {
        left: auto;
        right: 12px;
        -webkit-transform: skew(5deg) rotate(5deg);
        -moz-transform: skew(5deg) rotate(5deg);
        -ms-transform: skew(5deg) rotate(5deg);
        -o-transform: skew(5deg) rotate(5deg);
        transform: skew(5deg) rotate(5deg);
    }

.onoffswitch {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    background: inherit;
}

.onoffswitch-checkbox {
    display: none;
}

.onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #adaaad;
    border-radius: 3px;
}

.onoffswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s;
    -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s;
    transition: margin 0.3s ease-in 0s;
}

    .onoffswitch-inner:before,
    .onoffswitch-inner:after {
        display: block;
        float: left;
        width: 50%;
        height: 24px;
        padding: 0;
        line-height: 23px;
        font-size: 12px;
        color: white;
        font-family: Inherit;
        font-weight: normal;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 2px;
        box-shadow: 0px 15px 0px rgba(0,0,0,0.08) inset;
    }

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
}

.onoffswitch-inner:before {
    content: "In periode";
    padding-left: 15px;
    background-color: #FFFFFF;
    color: #000000;
    border-radius: 3px 0 0 3px;
    /*background:#00adef;*/
    color: black;
}

.onoffswitch-inner:after {
    content: "T/m periode";
    padding-right: 15px;
    background-color: #FFFFFF;
    color: #000000;
    text-align: right;
    border-radius: 3px 0 0 3px;
    color: black;
}

.onoffswitch-nl:before {
    content: "In periode";
    background: inherit; /*#00adef;*/
    color: inherit; /* KCO, 21-07-17 17:02: Jira: STYL-52,  Niet white maar inherit*/
}

.onoffswitch-en:before {
    content: "In period";
    background: inherit; /*#00adef;*/
    color: inherit; /* KCO, 21-07-17 17:02: Jira: STYL-52,  Niet white maar inherit*/
}

.onoffswitchWeek-nl:before {
    content: "In Week";
    background: inherit; /*#00adef;*/
    color: inherit; /* KCO, 02-04-2019, Jira: FD-43, Salesdashboard */
}

.onoffswitchWeek-en:before {
    content: "In Week";
    background: inherit; /*#00adef;*/
    color: inherit; /* KCO, 02-04-2019, Jira: FD-43, Salesdashboard.*/
}

.onoffswitch-nl:after {
    content: "T/m periode";
    background: inherit; /*#00adef;*/
    color: inherit; /* KCO, 21-07-17 17:02: Jira: STYL-52,  Niet white maar inherit*/
}

.onoffswitch-en:after {
    content: " Through period"; /*cumulative*/
    background: inherit;
    color: inherit; /* KCO, 21-07-17 17:02: Jira: STYL-52,  Niet white maar inherit*/
    padding-right: 10px;
}

.onoffswitch-switch {
    display: block;
    width: 20px;
    margin: 0px;
    background-color: #d6d3d6 /* #d6d3d6; */ /* Old browsers */
    background-repeat: repeat-x; /* Repeat the gradient */
    background-color: #d6d3d6; /* Old browsers */
    background-repeat: repeat-x; /* Repeat the gradient */
    background-image: -moz-linear-gradient(top, #d6d3d6 0%, #d6d3d6 100%); /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d6d3d6), color-stop(100%,#d6d3d6)); /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top, #d6d3d6 0%,#d6d3d6 100%);
    background-image: -ms-linear-gradient(top, #d6d3d6 0%,#d6d3d6 100%); /* IE10+ */
    background-image: -o-linear-gradient(top, #d6d3d6 0%, #d6d3d6 100%); /* Opera 11.10+ */
    border: 1px solid #adaaad;
    border-radius: 2px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100px;
    -moz-transition: all 0.3s ease-in 0s;
    -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s;
    transition: all 0.3s ease-in 0s;
    background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
    background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
    background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
    background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
    box-shadow: 0px;
    /*background: #1292C5;*/
}

.linkStyle {
    cursor: pointer;
    text-decoration: underline;
}

    .linkStyle:hover {
        color: blue;
    }

.trOff {
    color: rgb(204, 204, 204);
}

    .trOff td div,
    .trOff td:nth-child(2) div,
    .trOff td:nth-child(3) div {
        background-color: rgb(204, 204, 204) !important;
    }

    .trOff td:last-child {
        cursor: default !important;
    }

#d_jrselect,
#d_jrselectsales,
#d_pnselect {
    cursor: pointer !important;
}

.highlightableRow {
    background-color: transparent !important;
}

    .highlightableRow:hover {
        background-color: rgba(210, 210, 210, 0.9) !important;
    }

.legendaSymbol {
    opacity: 0.8;
}

    .legendaSymbol:hover {
        opacity: 1;
    }

/*DBI 07-11-2016*/
#bankkaslegend .linkStyle {
    margin-left: 10px;
    font-size: 11px;
    padding-right: 20px;
    height: 25px;
}

#bankkaslegend .squareStyle {
    min-width: 25px;
    max-width: 25px;
    height: 25px;
}

.jqx-group-button-normal {
    background-color: #f7f7f7; /*#FFFFFF;*/
    color: black;
}

/*De default legenda symbolen moeten ook cursor als pointer hebben */
.highcharts-legend-item {
    cursor: pointer;
}

.label,
.highcharts-axis-labels,
.highcharts-xaxis-labels,
.highcharts-axis-labels span,
.highcharts-xaxis-labels span {
    z-index: 1 !important;
}

.highcharts-tooltip {
    opacity: 1;
    z-index: 9999 !important;
}

    .highcharts-tooltip > span {
        background-color: white;
        opacity: 1;
    }

.highcharts-tooltip {
    z-index: 9999 !important;
}

.fintab td:nth-child(2) {
    font-weight: bold;
    float: right;
    text-align: right;
}

#tabbankkas,
#tabomzet,
#tabkosten,
#tabsalesdash,
#tabresultaat {
    padding: 10px 18px;
    /*border-bottom: solid 2px #aaa;*/
    border: solid 1px #dadada;
    border-radius: 5px;
}

.hideTabsLabelBtns > div:first-child {
    display: none;
}

.fullScreenBorder {
    border: 1px solid rgba(210, 210, 210, 0.7);
}

/* DBI standaard pijl (arrow, line, point) */
.arrow {
    margin: 6px 5px;
    float: right;
    transform-origin: 50%;
}

.line {
    margin-top: 0.2em;
    width: 0.5em;
    height: 0.1em;
    float: left;
}

.point {
    width: 0;
    height: 0;
    border-top: 0.25em solid transparent;
    border-bottom: 0.25em solid transparent;
    float: right;
    border-left-width: 0.4em;
    border-left-style: solid;
}

.arrowup {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.arrowdown {
    padding-top: 1px;
    margin-right: 5px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.arrowred .line {
    background: Red;
}

.arrowred .point {
    border-left-color: Red;
}

.arrowgreen .line {
    background: green;
}

.arrowgreen .point {
    border-left-color: green;
}


/* DASHBOARD SNELMENU*/
#tableDiv {
    border-radius: 10px;
    font-size: 12px;
    border-spacing: 4px;
    border-collapse: separate;
    height: inherit;
    width: inherit;
}

    #tableDiv i:first-child {
        font-size: 30px;
        margin: 5px;
    }

#meldingen {
    text-align: right;
}

    #meldingen > i {
        color: Red;
        float: right;
        font-size: 25px;
    }

        #meldingen > i > span {
            color: White;
            font-size: 17px;
        }

#tableDiv tr td {
    color: white;
    text-align: center;
    position: relative;
}

#tableDiv tr:after {
    background-color: white;
}

#tableDiv tr:first-child td {
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

#tableDiv tr:last-child td {
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

#tableDiv tr:first-child {
    background-color: #00adef;
    opacity: 1;
}

    #tableDiv tr:first-child td i {
        color: yellow;
    }

#tableDiv tr:nth-child(2), #tableDiv tr:nth-child(3), #tableDiv tr:nth-child(4) {
    background-color: #00adef;
}

.selectedRow td {
    font-weight: bold;
}

.pinMenu {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
}

.pinned {
    -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
}

.pinMenu i {
    font-size: 15px !important;
    color: white !important;
}

.deleteBtnDiv,
.pinMenu {
    width: auto;
    height: auto;
    position: absolute;
    bottom: 0;
    right: 0;
}

.deleteBtnDiv {
    display: none;
}

#item a:hover {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

.fa-arrow-circle-right {
    color: #00adef;
}

.fa-arrow-circle-right-white {
    color: white;
}

/* DD: 07-06-19: ALG-712: verkord en inkord intro dialoog te groot  */
#div_verkord_intro {
    height: auto !important;
}

#d_div_verkord_intro_content {
    height: auto !important;
}

/*.fa-list-alt {
    margin-left: 3px;*/
    /* BRO, 23-07-2018, marge top gegeven ivm uitlijning aan de bovenkant. */
    /* KCO, 27-10-2018, Jira: ALG-388, marge-top weer verwijderd ivm uitlijnen andere aplicaties */
    /* margin-top: 2px; */
    /*cursor: pointer;
    font-size: 20px;
    vertical-align: middle;
    border-radius: 3px;
    font-family: Font Awesome\ 5 Free !important;
    font-weight: normal !important;
    margin-top: -3px !important;
}*/

/* KCO, 27-07-2018, Jira: ALG-388 fa-list-alt-0-right/left verwijderd. */

i,
#badge {
    margin-right: 15px;
}

#badge {
    display: inline-block;
    border-radius: 25px;
    background-color: red;
    /*display:block;
    float:left;*/
    margin: 10px auto;
    width: 25px;
    height: 25px;
    color: black;
    font-size: 12;
    font-weight: bold;
    padding: 0 !important;
    text-align: center;
}

    #badge span {
        margin-top: 3px;
        display: block;
    }

.tr_grid_0 {
    background-color: #FFFFFF;
    color: #000000;
}

.tr_grid_1 {
    background-color: #F4F4F4;
    color: #000000;
}

.nws_link {
    color: #000000;
    text-decoration: none;
    font-weight: bold;
}

/* AVD JIRA:UC-41 21-02-2017 Geeft ongewenst effect in UBL, standaard wordt de hoogte gezet en komen er scrolbalken als dat nodig is.  
 .jqx-tabs-content
 {
    height: 100% !important;   
 }
 */

.highcharts-container {
    height: auto;
}

#ajaxloaderimg {
    width: 80px;
    position: absolute;
    margin: auto;
    display: block;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

#findashtable,
#topDiv, #topDivsalesdash {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

#fintab tr:nth-child(2),
#fintab tr:nth-child(6) {
    height: 23px;
}

#fintab tr:nth-child(3),
#fintab tr:nth-child(7) {
    height: 20px;
}

#fintab tr:nth-child(4),
#fintab tr:nth-child(8) {
    height: 28px;
}

#fintab tr:nth-child(9) {
    height: 27px;
}

.tileClass {
    vertical-align: middle !important;
    position: relative;
}

#topDiv, #topDivsalesdash {
    position: relative;
}

#topDivJrSelect,
#d_pnselect,
#topLeftDiv {
    position: relative;
    z-index: 10;
}

.legendaSymbol {
    width: 15px;
    height: 15px;
}

.titelstijl tr td {
    font-weight: bold;
    font-size: 14px;
    text-align: right;
}

.fa-circle {
    /* -webkit-transition: 1s ease-in-out; */
    /* transition: 1s ease-in-out; */
    /* transform: translateY(100px); */
    /* position: relative; */
    /* opacity: 0; */
    /* transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53); */
    /* transition-duration: 500ms; */
}

#dashbusyoverlay, #gridadm_busyoverlay { /* AVD 02-01-19 AD-178*/
    z-index: 9999; /* DD: FD-40: 11-03-19 Van 99999 naar 9999 zodat het menu weer bruikbaar wordt maar de functie nog wel werkt */
    background: gray;
    opacity: 0.3;
    position: absolute;
    width: 100%; /*AVD 22-04-2021 JIRA:FD-60 was 99.5*/
    height: 100%;
}

.grafiekbericht {
    cursor: pointer;
}

#nivoSelectBx {
    position: absolute;
    top: 50px;
    left: 10px;
    z-index: 99999;
    padding: 3px;
    border-radius: 3px;
}

/* LAAD SCHERM */
.loaded {
    opacity: 0;
    display: none;
}

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

#loader {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -90px 0 0 -75px;
    border: 3px solid #3498db;
    z-index: 1500;
    border: 3px solid transparent;
    border-top-color: #3498db;
    border-radius: 50%;
    /*-webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;*/
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

    #loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border: 3px solid #e74c3c;
        border: 3px solid transparent;
        border-top-color: #e74c3c;
        border-radius: 50%;
        /*-webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;*/
        -webkit-animation: spin 3s linear infinite;
        animation: spin 3s linear infinite;
    }

    #loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border: 3px solid #f9c922;
        border: 3px solid transparent;
        border-top-color: #f9c922;
        border-radius: 50%;
        -webkit-animation: spin 1.5s linear infinite;
        animation: spin 1.5s linear infinite;
    }

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg); /* IE 9 */
        transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
    }

    100% {
        -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg); /* IE 9 */
        transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg); /* IE 9 */
        transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
    }

    100% {
        -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg); /* IE 9 */
        transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
    }
}

@media screen and (max-width: 1600px) {
    #dashbusyoverlay {
        height: 95%;
    }

    #tabbankkas,
    #tabomzet,
    #tabkosten,
    #tabsalesdash,
    #tabresultaat {
        padding: 2px 10px;
    }

    #topDiv, #topDivsalesdash {
        height: 80px !important;
        padding: 2px 10px !important;
    }

    #customlegenddiv td {
        padding: 0 0 1px 0;
        white-space: nowrap;
    }

    .legendaSymbol {
        width: 13px;
        height: 13px;
    }

    #findashtable {
        /*width:1094px !important;*/ /*auto !important; AVD JIRA:FD-18 27-02-17 was te breed 1100px*/
        /*DD: 22-03-21: FD-59: Schalen ging niet goed van dashboard*/
    }

    #fintabs table {
        width: 100%;
    }

    #jqxChartTabsOmzet,
    #jqxChartTabsKosten {
        height: auto !important;
    }

        #jqxChartTabsOmzet li,
        #jqxChartTabsKosten li {
            height: 17px !important;
        }

    .tabullist li {
        height: 12px !important;
    }

    .fintab td:first-child {
        font-size: 10px;
    }

    #tabomzet td:nth-child(2),
    #tabkosten td:nth-child(2),
    #tabsalesdash td:nth-child(2),
    #tabresultaat td:nth-child(2) {
        font-size: 12px;
    }

    #actueelsaldo,
    #batenTotaalJr,
    #batenTotaalVj,
    #lastenTotaalJr,
    #lastenTotaalVj,
    #resultaatTotaalJr,
    #resultaatTotaalVj,
    #omzetVerschil,
    #kostenVerschil,
    #resultaatVerschil,
    #salesdashbrutobedr,
    #salesdashnettobedr {
        font-size: 14px !important;
    }

    .fintab td:first-child {
        font-size: 10px;
    }

    #chartsdiv {
        width: 100%;
        height: 350px;
        position: relative;
    }

    #leftDiv {
        width: 218px;
    }

    #tr_chartTabsKosten ul table td:first-child, #tr_chartTabsOmzet ul table td:first-child,
    #tr_chartTabsKosten ul li:nth-child(3) div > div:first-child,
    #tr_chartTabsOmzet ul li:nth-child(3) div > div:first-child {
        font-size: 11px;
    }

    #tr_chartTabsKosten .jqx-tabs-titleWrapper,
    #tr_chartTabsOmzet .jqx-tabs-titleWrapper {
        margin-top: -2px !important;
    }

    #tr_chartTabsKosten ul table img,
    #tr_chartTabsOmzet ul table img {
        width: 18px;
    }

    #actueelsaldoStr {
        font-size: 11px;
    }
}

@media screen and (max-height: 900px) {
    #topDiv, #topDivsalesdash {
        height: 60px !important;
        padding: 2px 10px !important;
    }

    #leftDiv {
        width: 198px;
    }


    .onoffswitch-inner:before,
    .onoffswitch-inner:after {
        height: 20px;
        font-size: 10px;
    }

    #tabbankkas,
    #tabomzet,
    #tabkosten,
    #tabsalesdash,
    #tabresultaat {
        padding: 2px 10px;
    }
}

@media screen and (min-height: 901px) {
    #topDiv, #topDivsalesdash {
        height: 90px !important;
        padding: 10px !important;
    }

    #leftDiv {
        width: 218px;
    }

    #chartsdiv {
        width: 100%;
        height: 400px;
        position: relative;
    }
}

@media screen and (min-width: 1601px) {
    #topDiv, #topDivsalesdash {
        height: 90px !important;
        padding: 10px !important;
    }

    #findashtable {
        /*width:1294px;*/ /* AVD JIRA:FD-18 27-02-17 te breed 1300px; */
        /*DD: 22-03-21: FD-59: Schalen ging niet goed van dashboard*/
    }

    #fintabs table {
        width: 100%; /*300px; */
    }

    .fintab td:first-child {
        font-size: 12px;
    }

    .fintab tr:last-child td:first-child {
        font-size: 11px;
    }

    #tabomzet td:nth-child(2),
    #tabkosten td:nth-child(2),
    #tabsalesdash td:nth-child(2),
    #tabresultaat td:nth-child(2) {
        font-size: 12px;
    }

    #actueelsaldo,
    #batenTotaalJr,
    #batenTotaalVj,
    #lastenTotaalJr,
    #lastenTotaalVj,
    #resultaatTotaalJr,
    #resultaatTotaalVj,
    #omzetVerschil,
    #kostenVerschil,
    #resultaatVerschil,
    #salesdashbrutobedr,
    #salesdashnettobedr {
        font-size: 17px !important;
    }

    #actueelsaldoStr {
        font-size: 12px;
    }

    #leftDiv {
        width: 215px;
    }

    #tr_chartTabsKosten ul table td:first-child,
    #tr_chartTabsOmzet ul table td:first-child,
    #tr_chartTabsKosten ul li:nth-child(3) div > div:first-child,
    #tr_chartTabsOmzet ul li:nth-child(3) div > div:first-child {
        font-size: 12px;
    }

    #tr_chartTabsKosten ul table img,
    #tr_chartTabsOmzet ul table img {
        width: 20px;
    }

    .legendaSymbol {
        width: 15px;
        height: 15px;
    }
}

/*DBI 28-10-2016*/
@media screen and (min-width: 981px) and (max-width: 1200px) {
    #findashtable {
        width: 980px !important; /*auto !important;*/
    }
}

.tooltip {
    position: relative;
    display: inline-block;
    /* border-bottom: 1px dotted black; */
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: auto;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 3px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        opacity: 0;
        transition: opacity 1s;
    }

        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            /* margin-left: -5px; */
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

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

.versienummer_label {
    font-family: Roboto;
    width: calc(50vw - 40px);
}

.versienummer_tag {
    display: block;
    position: fixed;
    bottom: 0px;
    color: #666;
    z-index: 100000;
    margin: 0 auto;
    padding: 20px;
}

.login_label_title {
    color: var(--king_dark);
    font-family: Roboto;
    font-weight: 700;
}

/*DD: 23-03-21: ALG-1128*/
/*input[type="button"],
input[type="button"]:active,
input[type="button"]:focus,
input[type="submit"],
input[type="reset"],
.menuknop {
    color: #333;
    height: auto;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #adadad; 
    border-radius: var(--borderradius);
    background-color: #ebebeb;
    padding-top: 0px !important;
}*/

#btn_info_alg2_sluiten {
    padding: 2px !important;
}

.primary_blue {
    color: #fff;
    text-decoration: none;
    text-shadow: 0px;
    background-repeat: repeat-x; /* Repeat the gradient */
    background-color: #428bca;
    font-size: 12px;
}

.dot_blue {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 5px;
    border-radius: 50%;
    position: relative;
    margin-top: 2px;
    background: radial-gradient(circle at 50% 120%, #017ee3, #6dc2ff 40%);
}

/* SYS-9 */
.dot_empty {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 0px; /* DD: 12-06-18: 0px ipv 5px tbv firefox */
    border-radius: 50%;
    position: relative;
    margin-top: 2px;
}

.dot_gray {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 5px;
    border-radius: 50%;
    position: relative;
    margin-top: 2px;
    background: radial-gradient(circle at 50% 120%, #808080, #bfbdbd 40%);
}

/* ALG-141 */
.dot_green {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 0px; /* DD: 12-06-18: 0px ipv 5px tbv firefox */
    border-radius: 50%;
    position: relative;
    margin-top: 2px;
    background: radial-gradient(circle at 50% 120%, #008000, #01bc00 40%);
    vertical-align: text-top; /* KCO, 06-01-2022, WI-6733, LoketNL-Nmbrs-regel-legenda. */
}

.dot_orange {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 0px; /* DD: 12-06-18: 0px ipv 5px tbv firefox */
    border-radius: 50%;
    vertical-align: sub;
    position: relative;
    margin-top: 2px;
    background: radial-gradient(circle at 50% 120%, #ff9900, #fcc670 40%);
    vertical-align: text-top; /* DD: 12-06-18: ++ tbv firefox */
}

/* SYS-9 */
.dot_olive {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 0px; /* DD: 12-06-18: 0px ipv 5px tbv firefox */
    border-radius: 50%;
    position: relative;
    vertical-align: middle; /* HBO: WI-7073 24-1-2022 alle iconen centeren ivm hoogte regel */
    background: radial-gradient(circle at 50% 120%, #556B2F, #556B2F 40%);
}

.dot_purple {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 0px; /* Broebie: 05-07-18: margin weg gehaald voor de uitlijning van de dots*/
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    background: radial-gradient(circle at 50% 120%, #663399, #663399 40%);
}

.dot_red {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 0px; /* DD: 12-06-18: 0px ipv 5px tbv firefox */
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    background: radial-gradient(circle at 50% 120%, #ff0000, #fe5a5e 40%);
    vertical-align: text-top; /* DD: 12-06-18: ++ tbv firefox */
}

.dot_white {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 0px; /* Broebie: 05-07-18: margin weg gehaald voor de uitlijning van de dots*/
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    background: radial-gradient(circle at 50% 120%, #FFFFFF, #FFFFFF 40%);
}

.dot_yellow {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 0px; /* Broebie: 05-07-18: margin weg gehaald voor de uitlijning van de dots*/
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    background: radial-gradient(circle at 50% 120%, #f4f77c, #f4f77c 40%);
}

.dialogcorner {
    border-radius: 2px;
}

.corner {
    border-radius: 4px;
}

.bs {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* AVD 09-11-18 JIRA:ALG-504 van 5 naar 8 ivm focus rand sweetalert */
.marginright {
    margin-right: 8px;
}

/*.primary_green {
  color: #fff!important;
  text-decoration: none;
  text-shadow: 0px;
  background-repeat: repeat-x;  Repeat the gradient 
  background-color: #00adef!important;
}*/

#s_titelimuisonline {
    height: 155px;
}

#s_logos {
    position: absolute;
    left: 134px;
    border: solid 1px #999999;
    top: 38px;
    height: 84px;
    border-radius: 10px;
    padding: 0px;
    background-color: #FFFFFF; /*DD: 31-05-18: padding: 1px; > padding: 0px; tbv passend maken plaatje */
    <!-- [if IE]> width: 245px;
    < ![endif] -->
    <!-- [if !IE]> width: 220px;
    < ![endif] -->
}

#imuislogotrans,
#imuislogotrans2 {
    background-color: transparent;
    height: 82px;
    border-radius: 10px;
    margin-left: -6px;
    width: 100%;
}
/*DD: 31-05-18: height: 84px; > height: 82px; tbv passend maken plaatje; DD: 08-06-18: margin-left: -6px; width: 100%; background: transparent ipv #fff */

#robothand {
    position: absolute;
    left: 20px;
}

#duo_iframe {
    width: 340px;
    height: 415px;
    background: transparent;
}

#d_messagegroup {
    width: 800px;
    background: linear-gradient(to bottom, rgba(237,237,237,1) 0%,rgba(222,222,222,1) 100%);
    padding: 5px;
    line-height: 21px;
    border: 1px solid #bbb;
    font-size: 18px;
    color: #666;
    border-bottom: none;
    opacity: 1;
    height: 45px;
}

.glasspanel {
    background: var(--king_background);
    padding: 5px;
    line-height: 21px;
    border: 1px solid var(--king_menu_border);
    font-size: 14px;
    color: var(--king_text_color);
    border-radius: var(--borderradius_compact);
    opacity: 1;
}

.centerbox {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 50%;
    margin: -1px; /*#10526 drive 1px omhoog */
}

.valigncenter {
    /* display: flex; */
    align-items: center;
    height: 100%;
}

#i_faqframe {
    height: calc(100vh - 145px);
}

#i_helpframe,
#i_nieuwsframe,
#i_teamviewerframe,
#i_mijnkennisbankframe {
    width: 780px;
    overflow: auto;
    height: calc(100vh - 125px);
}

.messagepanel_outer {
    background: linear-gradient(to bottom, rgba(237,237,237,1) 0%,rgba(222,222,222,1) 100%);
    padding: 10px;
    line-height: 21px;
    border: 1px solid #bbb;
    font-size: 18px;
    color: #666;
    opacity: 1;
}

.message {
    display: none;
    padding: 10px;
    border-radius: 3px;
    background: #444;
    opacity: 0.95;
    margin: 5px;
    font-family: "Source Sans Pro",Helvetica,Arial,sans-serif;
    font-size: 12pt;
}

#helppanel {
    margin: 10px;
    border-radius: 3px;
    display: block;
    height: calc(100vh - 10px);
    overflow: hidden;
    position: fixed;
    right: -950px;
    font-size: 15px;
    top: 0;
    width: 800px;
    z-index: 10001;
    transition: right 0.3s ease-in-out 0s;
    -webkit-transition: right 0.3s ease-in-out 0s;
    -moz-transition: right 0.3s ease-in-out 0s;
    -o-transition: right 0.3s ease-in-out 0s;
}

.nav-expanded #helppanel {
    right: 0;
}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

    /* Style the buttons inside the tab */
    .tab span {
        width: 14%;
        background-color: inherit;
        float: left;
        border: 1px solid #bbb;
        border-radius: 3px;
        outline: none;
        cursor: pointer;
        padding: 5px;
        margin: 5px;
        transition: 0.3s;
        font-size: 15px;
        font-family: "Source Sans Pro",Helvetica,Arial,sans-serif;
        color: #000000;
    }

#a_helppanel_close {
    padding: 8px 15px 8px 15px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 0px;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes side2side {
    0%, 100% {
        transform: translateX(-50%);
    }

    50% {
        transform: translateX(150%);
    }
}

.servicepagina {
    padding: 21px;
    line-height: 21px;
    font-size: 14px;
    border-radius: 3px;
    color: #666;
    text-align: left;
    opacity: 0.9;
    overflow: auto;
    height: fit-content;
    height: -moz-fit-content;
}

.servicemessage {
    padding: 5px;
    border-radius: 3px;
    opacity: 0.95;
    margin: 3px;
    font-family: Roboto;
    font-weight: 500;
    font-size: 10pt;
    text-align: left;
}

.servicecontent {
    padding-top: 20px;
}

.closebutton {
    float: right;
    padding-right: 4px;
    top: 10px;
    right: 10px;
    cursor: pointer;
    height: 16px;
}

.fi-settings {
    background-image: url(../img/flaticon/settings.png);
    background-repeat: no-repeat;
}

.fi-coins {
    background-image: url(../img/flaticon/kas.png);
    background-repeat: no-repeat;
}

.fi-exit {
    background-image: url(../img/flaticon/exit.png);
    background-repeat: no-repeat;
}

/* 03-12-18 JIRA:INCURA-72 */
.fi-clipboard_tr {
    background-image: url(../img/flaticon/clipboard_tr.png);
    background-repeat: no-repeat;
}

.fi-bank_transp {
    background-image: url(../img/flaticon/bank_transp.png);
    background-repeat: no-repeat;
}

.fi-wallet_inkomend {
    background-image: url(../img/flaticon/wallet_inkomend.png);
    background-repeat: no-repeat;
}

.fi-graph_up {
    background-image: url(../img/flaticon/graph_up.png);
    background-repeat: no-repeat;
}

.fi-verkoopboek {
    background-image: url(../img/flaticon/verkoopboek.png);
    background-repeat: no-repeat;
}

.fi-inkoopboek {
    background-image: url(../img/flaticon/inkoopboek.png);
    background-repeat: no-repeat;
}

.fi-wallet_outgoing {
    background-image: url(../img/flaticon/wallet_outgoing.png);
    background-repeat: no-repeat;
}

.fi-memoriaalboekingen {
    background-image: url(../img/flaticon/memoriaalboekingen.png);
    background-repeat: no-repeat;
}

.fi-handcoin {
    background-image: url(../img/flaticon/handcoin_tr.png );
    background-repeat: no-repeat;
}

.fi-stamtabellen {
    background-image: url(../img/flaticon/stamtabellen.png);
    background-repeat: no-repeat;
}

.png-help {
    background-image: url(../img/style/helpbox.12x12.png);
    background-repeat: no-repeat;
    height: 12px;
    width: 12px;
}

.bg30 {
    background-size: 30px 30px;
}

.bg40 {
    background-size: 40px 40px;
}

.bg60 {
    background-size: 60px 60px;
}

.bg80 {
    background-size: 80px 80px;
}

.raleway {
    font-family: 'Raleway';
}

header {
    max-width: 100%;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
}

.c-menu .nav ul {
    list-style: none;
    padding: 0;
}

.c-menu .nav li {
    text-align: left;
}

.c-menu .nav a,
.c-menu .nav label {
    display: block;
    padding: .85rem;
    color: #fff;
    background-color: #151515;
    box-shadow: inset 0 -1px #1d1d1d;
    -webkit-transition: all .25s ease-in;
    transition: all .25s ease-in;
    text-decoration: none;
}

    .c-menu .nav a:focus,
    .c-menu .nav a:hover,
    .c-menu .nav label:focus,
    .c-menu .nav label:hover {
        color: rgba(255, 255, 255, 0.5);
        background: #030303;
    }

.c-menu .nav label {
    cursor: pointer;
}

.c-menu .group-list a,
.c-menu .group-list label {
    padding-left: 2rem;
    background: #252525;
    box-shadow: inset 0 -1px #373737;
}

    .c-menu .group-list a:focus,
    .c-menu .group-list a:hover,
    .c-menu .group-list label:focus,
    .c-menu .group-list label:hover {
        background: #131313;
    }

.c-menu .sub-group-list a,
.c-menu .sub-group-list label {
    padding-left: 4rem;
    background: #353535;
    box-shadow: inset 0 -1px #474747;
}

    .c-menu .sub-group-list a:focus,
    .c-menu .sub-group-list a:hover,
    .c-menu .sub-group-list label:focus,
    .c-menu .sub-group-list label:hover {
        background: #232323;
    }

.c-menu .sub-sub-group-list a,
.c-menu .sub-sub-group-list label {
    padding-left: 6rem;
    background: #454545;
    box-shadow: inset 0 -1px #575757;
}

    .c-menu .sub-sub-group-list a:focus,
    .c-menu .sub-sub-group-list a:hover,
    .c-menu .sub-sub-group-list label:focus,
    .c-menu .sub-sub-group-list label:hover {
        background: #333333;
    }

.c-menu .group-list,
.c-menu .sub-group-list,
.c-menu .sub-sub-group-list {
    height: 100%;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height .5s ease-in-out;
    transition: max-height .5s ease-in-out;
}

.c-menu .nav__list input[type=checkbox]:checked + label + ul {
    max-height: 1000px;
}

.c-menu label > span {
    float: right;
    -webkit-transition: -webkit-transform .65s ease;
    transition: transform .65s ease;
}

.c-menu .nav__list input[type=checkbox]:checked + label > span {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

#d_globalsearch {
    position: absolute;
    top: 30px;
    right: 320px;
}

/* AVD 30-05-18 JIRA:AC-41 */
#switchbedragperc .jqx-switchbutton-label {
    font-size: inherit;
    font-family: inherit;
    text-align: center;
    text-transform: inherit;
    font-weight: inherit;
    cursor: pointer;
}

#switchbedragperc .jqx-fill-state-pressed {
    background: #428bca;
}

.main-appstore {
    /* width: calc(100vw - 25px);  ALG-1005   eruit */
    /* margin: auto; */
    margin: 5px;
    margin-bottom: 0px;
    border: solid 1px #d2d7da;
    background-color: #FFFFFF;
}

.content-appstore {
    margin: 0px 15px 15px 0px;
    padding: 30px 20px;
    border: 1px solid #dbdbdb;
    height: 275px;
    width: 265px;
    background-color: #fff;
    text-align: center;
    box-shadow: 5px 5px 15px #dbdbdb;
}

.content-appstore-image {
    height: 80px;
    min-height: 80px;
    width: auto;
    margin: 10px auto 0;
    max-width: 150px;
}

.content-appstore-hr {
    border: none;
    border-top: 1px solid #d2d7da;
}

/* The "show" class is added to the filtered elements */
.show {
    display: block;
}

/* Style the buttons */
.btn-appstore {
    border: solid 1px #d2d7da;
    outline: none;
    padding: 12px 16px;
    background-color: white;
    cursor: pointer;
    width: 200px;
    margin-bottom: 5px;
    border-radius: 0px;
    height: 38px;
}

    .btn-appstore:hover {
        background-color: #ddd;
    }

.btn-appstore-active {
    background-color: #488BC5;
    color: #FFFFFF;
    border: solid 1px #d2d7da;
    outline: none;
    padding: 12px 16px;
    cursor: pointer;
    width: 200px;
    margin-bottom: 5px;
    border-radius: 0px;
    height: 38px;
}

.row-appstore {
    display: flex;
    flex-wrap: wrap;
}

#d_mailmerge_stap2 {
    top: 30px !important;
}

#s_closezoekterm .img_close_grey {
    margin-top: -17px !important;
}

/* DD Aanpassingen */
.is-hover {
    overflow-x: hidden;
}

span#s_getzoek_kvk {
    margin-left: 10px;
}

span#s_getzoek_btwnr {
    margin-left: 5px;
}

span#s_getzoek_iban {
    margin-left: 3px;
}

#d_d_opengebr_content #d_tabuser_EIGENSCHAPPEN #SMTPBUTTON,
#d_d_opengebr_content #d_tabuser_EIGENSCHAPPEN #knop_aanpassen {
    margin-top: -2px !important;
}

#checkopboekstuk_opboeken,
#checkopboekstuk_koppel,
#checkopboekstuk_verwijder {
    width: 153px !important;
}

#cd_prechat_button {
    margin-left: -10px;
}

#d_regel #object1 .fa-list-alt {
    margin-bottom: -2px;
    margin-top: -1px !important;
}

#table_docqueue input {
    height: 18px !important;
    padding: 0px 2px 0px 2px !important;
}

.counter_blue_imuis a,
.counter_blue_imuis a:hover,
.counter_blue_imuis a:focus,
.counter_blue_imuis a:visited,
.counter_blue_imuis a:active,
.counter_blue_imuis a:hover:focus {
    color: #fff !important;
}

#knop_mmt_aanpassen,
#knop_mmt_beheren,
knop_mmt_verversen,
#knop_editfactuur,
#knop_editdebiteur {
    margin-bottom: 0px !important;
}

.swal2-container {
    z-index: 2147400000 !important;
}
/*  KCO 03-09-18 Jira: STYL-57, z-index aangepast default uit sweetalert (=1060) bleef achter schermen staan */
/*  AVD 31-05-17 z-index aangepast 1060 bleef achter schermen staan */


/*  AVD 09-11-18 JIRA:ALG-504 focus op de buttons */
/*.swal2-cancel.primary_gray.btn-large:focus,
.swal2-confirm.primary_blue.marginright.btn-large:focus {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(50,100,150,.4);
}*/

/*DD: 23-03-21: ALG-1128*/
/*.swal2-cancel.btn-secondary.btn-large,
.swal2-confirm.btn-success.marginright.btn-large {
    height: 40px !important;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 4px;
}*/
/*.primary_green:hover,
    .primary_blue:hover,
    .swal2-cancel.btn-secondary.btn-large:hover,
    .swal2-confirm.btn-success.marginright.btn-large:hover {
        opacity: 0.75;
    }*/

#form_GOEDONTVInkoopGrid_GOEDONTVCREInv_dialog,
#form_INKFACTInkoopGrid_INKFACTCREInv_dialog {
    padding-left: 0px;
    font-size: 20px;
    vertical-align: sub;
}

#form_GOEDONTVInkoopGrid_GOEDONTVCREInv_dialog {
    padding-left: 5px;
}

#form_INKFACTInkoopGrid_INKFACTCREInv_dialog {
    margin-right: 5px;
}

#table_grideditor_menu #huidigeperiode {
    font-size: 100% !important;
    margin-top: 4px !important; /* BOE-44 DD: 09-04-19: uitlijning BOE*/
}

#d_form_editregel_TEKSTINV {
    margin-top: 30px;
}

/*##ZDDoButtonDefaultID, tbbetuit_verzamel, #knop_toonwdd, #TAB_INKOOPORD, #TAB_LOGO, #TAB_DOSSIER DD: 22-03-21: ALG-1142: knop meer padding*/

#button_mailmerge {
    padding: 0px !important;
}

/* KCO, 03-08-2018, Jira: UC-199, ublupload erbij en alfabet. */
/*#knop_createPDF,
#knop_kolomtonen,
#knop_ok,
#knop_previewPDF,
#knop_sluiten,
#knop_sessiecode_opnieuwaanvragen,
#knop_ublupload {
    margin-right: 5px !important;
}*/

/* KCO, 17-05-2019, Jira: UC-212, UBL-Factuur kunnen koppelen aan inkooporder/inkoopfactuur. (d_inkfact_toonpdf) */
#d_bstadv_main_kolommen,
#d_bstadv_main_f5,
#d_bstadv_main_sluiten,
#d_goedontv_main_kolommen,
#d_goedontv_main_f5,
#d_goedontv_main_sluiten,
#d_inkfact_main_kolommen,
#d_inkfact_toonpdf,
#d_inkfact_main_f5,
#d_inkfact_main_sluiten,
#btn_savegenereerctr,
#btn_closegenereerctr,
#d_vrdart_main_printvrd,
#d_vrdart_main_kolommen,
#d_vrdart_main_f5,
#d_vrdart_main_sluiten,
#btn_artsamen_main_kolommen,
#btn_artsamen_main_verwijderen,
#btn_artsamen_main_verkoopsam,
#btn_artsamen_main_f5,
#btn_artsamen_main_sluiten {
    margin-top: -10px !important;
}

#SELKPL {
    margin-left: 5px !important;
}

#RADIO_SHOWINKRG {
    vertical-align: sub !important;
}

#button_extrabijlage {
    margin-top: 5px;
}

.jqx-cell.jqx-grid-cell.jqx-item > span.geel.inline {
    margin-left: 1px !important;
}

#knop_opslaanenvolgend {
    width: 170px !important;
}

/* AVD 01-06-18 JIRA:AC-41   */
/*.jqx-fill-state-hover:not(.jqx-splitter-splitbar-horizontal) {
 cursor : pointer !important;
}*/


#d_div_gridgrb_totalen_jaar_content_grid .jqx-checkbox-check-indeterminate {
    background: transparent !important;
}

.jqx-tree-item {
    border: 0px !important;
}

#d_div_docqueue_content {
    /*height: auto !important; AVD 22-08-19 JIRA:UC-326 viewport gebruiken  */
}

#d_d_ZDTabelKopieerAfs_contentwrapper {
    height: auto !important;
}

/* Jira: ALG-742 Dialoog speedbooks op loage schermen. (MGH) */
.dialogcontent {
    min-height: calc(100% - 45px);
    overflow: auto;
    max-height: calc(100% - 45px);
    padding: 10px;
}

.dialogfooter {
    height: 45px;
    border-top: dashed 1px #c0c0c0;
    padding: 5px;
}

/* JIRA:ALG-537 03-12-18 fix header align left */
.jqx-grid-column-header[aria-sort=ascending] > div > div,
.jqx-grid-column-header[aria-sort=descending] > div > div {
    width: calc(100% - 20px);
}

.margintop-alt {
    margin-top: 1px !important; /* BRO, 04-12-2018, JIRA: ALG-541, margin-top op 0 voor de fa-list-alt lookup voor de invoer velden */
}

.dashed-border {
    border: 2px dashed #AAAAAA !important;
}

/* Jira: ZKN-50, KvK check wijzigingen. Noty. */
.marginright5 {
    margin-right: 5px;
}

#knop_ok_adm_newtab {
}

/* ALG-937 */
#d_portalcreditshist .jqx-rangeselector-labels {
    font-size: 9px !important;
}

/* BOE-72 */
.zkn-icon-openhaak {
    background-image: url('../img/style/openhaak.16x16.png');
}

.zkn-icon-sluithaak {
    background-image: url('../img/style/sluithaak.16x16.png');
}

.zkn-icon-close {
    background-image: url('../img/style/delete.16x16.png');
}

.zkn-icon-plus {
    background-image: url('../img/style/plus.16x16.png');
}

.zoekboek {
    cursor: pointer !important;
    display: inline-block;
    vertical-align: top;
    height: 13px;
    width: 17px;
    margin-left: 5px !important;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

    .zoekboek > div {
        zoom: 0.9;
        width: 16px;
        height: 16px;
        background-repeat: no-repeat;
        background-position: center;
        margin-left: 1px;
    }

.swal2-popup .swal2-select {
    padding: 0px !important;
    font-size: inherit !important;
}

.melding_domein {
    margin-bottom: 20px;
}

.login_service {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 60vh;
    background-color: #fff;
    color: var(--king_dark);
}

@media (max-width: 1210px) {
    .loginwrapperinner {
        width: 100%;
    }

    .login_titleback {
        display: none;
    }

    .logintitle {
        width: 0%;
    }

    .loginwrapper_content {
        left: 50%;
    }
}

@media (max-width: 768px) {
    .loginwrapperinner .float_editor {
        width: 200px !important;
    }

    .login_button {
        width: 200px;
    }

    .versienummer_tag {
        display: none;
    }

    .logintitle {
        width: 0px;
        height: 0px;
    }

    .login_titleback {
        display: none;
    }

    .login_logo {
        display: none;
    }
    /*DD: 25-02-21: ALG-1128*/
    .login_logo_form {
        display: none;
    }

    .table_hoofdscherm {
        height: 100%;
    }

    .loginwrapperinner {
        font-family: Roboto;
        width: 100%;
        height: 100%;
        display: inline-block;
        margin: 0 auto;
        text-align: center;
        min-width: 0px;
    }

    .loginwrapper_content {
        margin: 0;
        position: relative;
        top: 0;
        left: 0;
        transform: translate3d(0, 0, 0);
        width: 100%;
    }

    .login_service {
        display: none !important;
    }
}

.login_btns_adm {
    /* display: inline-block; MW 15-02-2021, ALG-1117 */
    /*DD: 25-02-21: ALG-1129*/
    /*width: 600px;*/
}

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

    .login_btns_adm {
        /* display: inline-block; MW 15-02-2021, ALG-1117 */
        /*DD: 25-02-21: ALG-1129*/
        width: 600px;
    }
}

.login_url {
    font-family: Roboto;
    font-weight: normal !important;
    color: #999 !important;
    line-height: 25px;
}

.language_icon {
    background-color: #1D1D1B;
    mask: url(../img/style/globe.svg);
    -webkit-mask: url(../img/style/globe.svg);
    -webkit-mask-repeat: no-repeat;
    width: 18px;
    height: 18px;
    float: left;
}

.login_language {
    padding: 10px;
    display: inline-block;
}

.float_option {
    background-color: var(--king_header_back);
    color: var(--king_header_color);
}

.float_editor {
    position: relative;
    display: inline-block;
    font-family: "Roboto";
    font-size: 16px;
    line-height: 1.5;
    width: 400px;
    margin-bottom: 25px;
}

    .float_editor > input,
    .float_editor > select,
    .float_editor > textarea {
        box-sizing: border-box;
        margin: 0;
        border: solid 1px; /* Safari */
        border-color: var(--king_border);
        border-top-color: transparent;
        border-radius: 4px;
        padding: 13px 13px 10px !important;
        width: 100%;
        height: 48px;
        color: var(--king_dark);
        background-color: transparent;
        box-shadow: none; /* Firefox */
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        caret-color: var(--kingblauw);
        transition: border 0.2s, box-shadow 0.2s;
    }

        .float_editor > input + label,
        .float_editor > input + span + label,
        .float_editor > select + label,
        .float_editor > textarea + label {
            position: absolute;
            top: -6px;
            left: 0;
            display: flex;
            border-color: var(--king_border);
            width: 100%;
            max-height: 100%;
            color: var(--king_dark);
            font-size: 75%;
            line-height: 15px;
            cursor: text;
            transition: color 0.2s, font-size 0.2s, line-height 0.2s;
        }

            .float_editor > select + label::before,
            .float_editor > select + label::after,
            .float_editor > input + label::before,
            .float_editor > input + label::after,
            .float_editor > input + span + label::before,
            .float_editor > input + span + label::after,
            .float_editor > textarea + label::before,
            .float_editor > textarea + label::after {
                content: "";
                display: block;
                box-sizing: border-box;
                margin-top: 6px;
                border-top: solid 1px;
                border-top-color: var(--king_border);
                min-width: 10px;
                height: 8px;
                pointer-events: none;
                box-shadow: inset 0 1px transparent;
                transition: border-color 0.2s, box-shadow 0.2s;
            }

            .float_editor > input + label::before,
            .float_editor > input + span + label::before,
            .float_editor > select + label::before,
            .float_editor > textarea + label::before {
                margin-right: 4px;
                border-left: solid 1px transparent;
                border-radius: 4px 0;
            }

            .float_editor > input + label::after,
            .float_editor > input + span + label::after,
            .float_editor > select + label::after,
            .float_editor > textarea + label::after {
                flex-grow: 1;
                margin-left: 4px;
                border-right: solid 1px transparent;
                border-radius: 0 4px;
            }

    .float_editor:hover > input,
    .float_editor:hover > select,
    .float_editor:hover > textarea {
        border-color: var(--king_dark);
        border-top-color: transparent;
    }

        .float_editor:hover > select + label::before,
        .float_editor:hover > input + label::before,
        .float_editor:hover > input + span + label::before,
        .float_editor:hover > textarea + label::before,
        .float_editor:hover > select + label::after,
        .float_editor:hover > input + label::after,
        .float_editor:hover > input + span + label::after,
        .float_editor:hover > textarea + label::after {
            border-top-color: var(--king_dark);
        }

        .float_editor:hover > input:not(:focus):placeholder-shown,
        .float_editor:hover > textarea:not(:focus):placeholder-shown {
            border-color: var(--king_dark);
        }

    .float_editor > input:not(:focus):placeholder-shown,
    .float_editor > textarea:not(:focus):placeholder-shown {
        border-top-color: var(--king_border);
    }

        .float_editor > input:not(:focus):placeholder-shown + label,
        .float_editor > input:not(:focus):placeholder-shown + span + label,
        .float_editor > textarea:not(:focus):placeholder-shown + label {
            font-size: inherit;
            line-height: 60px;
        }

            .float_editor > input:not(:focus):placeholder-shown + label::before,
            .float_editor > input:not(:focus):placeholder-shown + span + label::before,
            .float_editor > textarea:not(:focus):placeholder-shown + label::before,
            .float_editor > input:not(:focus):placeholder-shown + label::after,
            .float_editor > input:not(:focus):placeholder-shown + span + label::after,
            .float_editor > textarea:not(:focus):placeholder-shown + label::after {
                border-top-color: transparent;
            }

    .float_editor > input:focus,
    .float_editor > select:focus,
    .float_editor > textarea:focus {
        border-color: var(--kinglichtblauw);
        border-top-color: transparent !important;
        outline: none;
    }

        .float_editor > input:focus + label,
        .float_editor > input:focus + span + label,
        .float_editor > select:focus + label,
        .float_editor > textarea:focus + label {
            color: var(--kinglichtblauw);
        }

            .float_editor > input:focus + label::before,
            .float_editor > input:focus + label::after,
            .float_editor > input:focus + span + label::before,
            .float_editor > input:focus + span + label::after,
            .float_editor > select:focus + label::before,
            .float_editor > select:focus + label::after,
            .float_editor > textarea:focus + label::before,
            .float_editor > textarea:focus + label::after {
                border-top-color: var(--kinglichtblauw) !important;
            }

    .float_editor > input:disabled,
    .float_editor > input:disabled + label,
    .float_editor > input:disabled + span + label,
    .float_editor > select:disabled,
    .float_editor > select:disabled + label,
    .float_editor > textarea:disabled,
    .float_editor > textarea:disabled + label {
        border-color: rgba(0,0,0,0.38) !important;
        border-top-color: transparent !important;
        color: var(--king_dark);
        pointer-events: none;
    }

        .float_editor > input:disabled + label::before,
        .float_editor > input:disabled + label::after,
        .float_editor > input:disabled + span + label::before,
        .float_editor > input:disabled + span + label::after,
        .float_editor > select:disabled + label::before,
        .float_editor > select:disabled + label::after,
        .float_editor > textarea:disabled + label::before,
        .float_editor > textarea:disabled + label::after {
            border-top-color: rgba(0, 0, 0, 0.38) !important;
        }

        .float_editor > input:disabled:placeholder-shown,
        .float_editor > input:disabled:placeholder-shown + label,
        .float_editor > input:disabled:placeholder-shown + span + label,
        .float_editor > textarea:disabled:placeholder-shown,
        .float_editor > textarea:disabled:placeholder-shown + label {
            border-top-color: rgba(0, 0, 0, 0.38) !important;
        }

            .float_editor > input:disabled:placeholder-shown + label::before,
            .float_editor > input:disabled:placeholder-shown + label::after,
            .float_editor > input:disabled:placeholder-shown + span + label::before,
            .float_editor > input:disabled:placeholder-shown + span + label::after,
            .float_editor > textarea:disabled:placeholder-shown + label::before,
            .float_editor > textarea:disabled:placeholder-shown + label::after {
                border-top-color: transparent !important;
            }

/* Faster transition in Safari for less noticable fractional font-size issue */
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        .float_editor > input,
        .float_editor > input + label,
        .float_editor > input + span + label,
        .float_editor > textarea,
        .float_editor > textarea + label,
        .float_editor > input + label::before,
        .float_editor > input + label::after,
        .float_editor > input + span + label::before,
        .float_editor > input + span + label::after,
        .float_editor > textarea + label::before,
        .float_editor > textarea + label::after {
            transition-duration: 0.1s;
        }
    }
}


/* DD: 22-03-21: ALG-1142: iets meer ruimte voor de buttons*/
.footerbar #knop_ocr {
    width: auto;
    padding: 0;
}

/* Danny */

h4 {
    font-size: 1.4rem;
}

h6 {
    font-weight: bold !important;
    margin-bottom: 0px;
}

.container-fluid a {
    color: inherit !important;
}

.mt-30 {
    margin-top: 30px;
}

.mt-60 {
    margin-top: 60px;
}

.cml-5 {
    margin-left: 5px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-15 {
    margin-left: 15px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-30 {
    margin-bottom: 30px;
}

.cml-15 {
    margin-left: -15px;
}

.pt-3 {
    padding-top: 3px;
}

.pt-5 {
    padding-top: 5px;
}

.pb-15 {
    padding-bottom: 15px;
}

.pb-25 {
    padding-bottom: 25px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pl-10 {
    padding-left: 10px;
}

.m0auto {
    margin: 0 auto;
}

.centerDiv {
    display: flex;
    align-items: center;
    justify-content: center;
}

.centerDivLeft {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.sticky-bottom {
    position: sticky;
    position: -webkit-sticky; /*BRO, 04-10-2018, Safari verwacht -webkit-sticky ipv alleen sticky*/
    bottom: 0;
    padding-top: 5px;
    padding-bottom: 30px;
}

.form-control:focus {
    box-shadow: none;
}

.borderRadius {
    border-radius: .25rem;
}

.quickfix2 > label {
    margin-bottom: 0px;
}

.animate6 .btn:focus {
    box-shadow: none;
}

.navbar-toggler {
    margin-left: auto;
}

.label {
    font-weight: 100 !important;
}

.affix {
    top: 0;
    width: 100%;
    z-index: 9999 !important;
}

.table > tbody > tr > td:last-child {
    border-bottom: 1px solid #ddd;
}

.form-control {
    background-color: transparent;
    font-size: 9pt !important;
}

.customTop {
    top: 20px;
}

.tableTitle {
    font-weight: bold;
    font-size: 20px;
    padding-top: 2px;
}

input[type="checkbox"].ios + div > div {
    margin-top: 0px !important;
}

/*DD 25-03-21: ALG-670 */
input[type="radio"] {
    margin-top: 1px !important;
}

/*
    JIRA:AD-181 overbodig en zorgde voor tijdvertraging
    #cardholder > :nth-last-child(1) {
    margin-bottom:15px;
}*/

.card .card-body .row:nth-of-type(Odd) {
    background-color: rgba(0,0,0,.05);
}

.awesomplete {
    width: 100% !important;
}

.footer-text {
    display: inline-block;
    padding-left: 10px;
}

.text-left {
    text-align: left;
}

b {
    font-weight: bold !important;
}

input[type="button"], input[type="button"]:active, input[type="button"]:focus, input[type="submit"], input[type="reset"], button, .menuknop {
    /*DD: 19-3-21: ALG-1142: button revamp; padding: 0px 10px !important;*/
}

/*JIRA:ALG-501 styling sweetalert*/
/*button.swal2-confirm.swal2-styled {
    padding: 10px 32px !important;
}*/
/*DD: 23-03-21: ALG-1128*/
/*.swal2-confirm.btn-success.btn-large.showmsg {
    padding: 10px 32px !important;
}

*:focus:not(.swal2-cancel) {
    outline: none !important;
}*/
/* HBO: UX-12 22-12-2020 nieuw login-scherm */
/*#username {
    padding: 1px 2px 0px 30px !important;
}

#password {
    padding: 1px 2px 0px 30px !important;
}
*/
.img_google_maps_icon {
    width: 19px !important;
    height: 19px !important;
    background-size: 100% !important;
    vertical-align: bottom;
}

.jqx-tooltip-main {
    text-align: left !important;
}

/*.loginwrapper input {
    font-size: 9pt !important;
}
*/
.br-3 {
    border-radius: 3px;
}

    .br-3:focus {
        box-shadow: 0 0 0 0.2rem rgba(23,162,184,.5);
    }

/*DD: 23-03-21: ALG-1128*/
/*button.swal2-confirm.btn-success.marginright.btn-large.w50,
button.swal2-confirm.primary_green.marginright.btn-large.w50,
button.swal2-cancel.btn-secondary.btn-large.w50
button.swal2-cancel.primary_red.btn-large.w50 {
    height: 40px !important;
}*/

input#knop_grbzoek {
    padding: 0px 5px !important;
}

input#knop_grbrefresh {
    padding: 0px 4px !important;
}

#ZDKnop_InkVrk,
#ZDKnop_CreArt,
#ZDKnop_Regels,
#ZDKnop_VoorkGrb,
#ZDKnop_FacVrk,
#ZDKnop_Prijsafs,
#ZDKnop_AanvAdres,
#ZDKnop_Contactp {
    /* DD: 19-3-21: ALG-1142: button revamp; padding: 0px !important;*/
}

label.valignmiddle.pointer {
    margin-bottom: 0px;
}

#c-menu--push-right .c-menu__close {
    padding: 12px 24px !important;
}




/* MEDIA QUERIES */
@media (min-width: 768px) {
    .form-horizontal .control-label {
        text-align: left;
    }
    /* HBO WI-14516 2022-11-02 globale textarea maakte veel dingen stuk */
/*    textarea {
        width: 450px;
        min-height: 70px;
        padding-right: 2px;
        border: 1px solid var(--king_menu_border);
        background-color: var(--king_textfield_back);
        color: var(--king_textfield_color);
    }
*/
    .flex-column {
        flex-direction: initial !important;
    }

    .semicolon {
        display: none;
    }

    .spanLabelAdministratie,
    .spanLabelGebruiker {
        display: inline-block;
    }

    .extraInfoLabel {
        display: inline-block;
        margin-left: 10px;
    }

    .centerDivLeftMDHigher {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
}

@media (min-width: 1200px) {
    .navbar-dark {
        border: none;
        margin: 1px;
    }

    .centerDivLeftXL {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .centerDivRightXL {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
}

@media (max-width: 576px) {
    .text-left-xs {
        text-align: left;
    }

    .text-right-xs {
        text-align: right;
    }

    .d-xs-block {
        display: block !important;
    }

    .d-xs-none {
        display: none !important;
    }

    #sticky-bottom-edittabel_formEMLFIN_EDIT #knop_sluiten {
        margin-bottom: 5px;
    }

    #knop_overnemen {
        margin-top: 5px;
    }
}

@media (max-width: 768px) {
    .form-control {
        border: none;
    }

    /* HBO WI-14516 2022-11-02 globale textarea maakte veel dingen stuk */
/*    textarea {
        height: 90px !important;
    }

    textarea {
        box-sizing: border-box;
        width: 100% !important;
    }
*/    /* HBO-UX-16-10-2-2021 */
    [name='quickfix2'] > input[type="text"] {
        box-sizing: border-box;
        width: 90% !important;
    }

    .navbar-toggler {
        margin-left: 0px;
    }

    .quickfix1 {
        border: 1px solid var(--king_mneu_border);
        border-bottom: none;
    }

    .quickfix2 {
        border: 1px solid var(--king_menu_border);
        border-top: none;
        border-radius: unset;
    }

        .quickfix2:last-child {
            border-bottom: none;
        }

    .text-xs-center {
        text-align: center;
    }

    .mtb-5 {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .divider {
        width: 100% !important;
        border-bottom: 1px solid #fff;
        display: inline-block;
        height: 0 !important;
        border-left: none !important;
    }

    .semicolon {
        display: inline-block;
    }

    .spanLabelAdministratie,
    .spanLabelGebruiker {
        display: none;
    }

    .jcFe-sm {
        justify-content: flex-end;
    }

    .card-body {
        padding-bottom: 0px;
    }

    .awesomplete {
        width: 100% !important;
    }

    .fa-list-alt {
        margin-right: 0px !important;
    }
}

@media (max-width: 992px) {
    #sticky-bottom-edittabel_formEMLFIN_EDIT #knop_sluiten,
    #knop_smtpinfo {
        margin-top: 5px;
    }
}

/* Standard syntax */
@keyframes mymove {
    0% {
        background-color: #F4F77C;
    }

    100% {
        background-color: initial;
    }
}


#row00d_div_gridinfo_content_grid .jqx-input {
    height: 21px !important;
    box-sizing: border-box !important;
}

/* STYLE */
/* NOTY */
.noty_layout_mixin, #noty_layout__top, #noty_layout__topLeft, #noty_layout__topCenter, #noty_layout__topRight, #noty_layout__bottom, #noty_layout__bottomLeft, #noty_layout__bottomCenter, #noty_layout__bottomRight, #noty_layout__center, #noty_layout__centerLeft, #noty_layout__centerRight {
    position: absolute;
    margin: 0;
    padding: 0;
    z-index: 9999999;
    -webkit-transform: translateZ(0) scale(1, 1);
    transform: translateZ(0) scale(1, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    filter: blur(0);
    -webkit-filter: blur(0);
    max-width: 90%;
}

#noty_layout__top {
    top: 0;
    left: 5%;
    width: 90%;
}

#noty_layout__topLeft {
    top: 20px;
    left: 20px;
    width: 325px;
}

#noty_layout__topCenter {
    top: 5%;
    left: 50%;
    width: 325px; 
    -webkit-transform: translate(-webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
    transform: translate(calc(-50% - .5px)) translateZ(0) scale(1, 1);
}

#noty_layout__topRight {
    top: 20px;
    right: 20px;
    width: 325px; 
}

#noty_layout__bottom {
    bottom: 0;
    left: 5%;
    width: 90%;
}

#noty_layout__bottomLeft {
    bottom: 20px;
    left: 20px;
    width: 325px;
}

#noty_layout__bottomCenter {
    bottom: 5%;
    left: 50%;
    width: 325px;
    -webkit-transform: translate(-webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
    transform: translate(calc(-50% - .5px)) translateZ(0) scale(1, 1);
}

#noty_layout__bottomRight {
    bottom: 20px;
    right: 20px;
    width: 325px;
}

#noty_layout__center {
    top: 50%;
    left: 50%;
    width: 325px;
    -webkit-transform: translate(-webkit-calc(-50% - .5px), -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
    transform: translate(calc(-50% - .5px), calc(-50% - .5px)) translateZ(0) scale(1, 1);
}

#noty_layout__centerLeft {
    top: 50%;
    left: 20px;
    width: 325px;
    -webkit-transform: translate(0, -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
    transform: translate(0, calc(-50% - .5px)) translateZ(0) scale(1, 1);
}

#noty_layout__centerRight {
    top: 50%;
    right: 20px;
    width: 325px;
    -webkit-transform: translate(0, -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
    transform: translate(0, calc(-50% - .5px)) translateZ(0) scale(1, 1);
}

.noty_progressbar {
    display: none;
}

.noty_has_timeout.noty_has_progressbar .noty_progressbar {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background-color: #646464;
    opacity: 0.2;
    filter: alpha(opacity=10);
}

.noty_bar {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate(0, 0) translateZ(0) scale(1, 1);
    -ms-transform: translate(0, 0) scale(1, 1);
    transform: translate(0, 0) scale(1, 1);
    -webkit-font-smoothing: subpixel-antialiased;
    overflow: hidden;
}

.noty_effects_open {
    opacity: 0;
    -webkit-transform: translate(50%);
    -ms-transform: translate(50%);
    transform: translate(50%);
    -webkit-animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.noty_effects_close {
    -webkit-animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.noty_fix_effects_height {
    -webkit-animation: noty_anim_height 75ms ease-out;
    animation: noty_anim_height 75ms ease-out;
}

.noty_close_with_click {
    cursor: pointer;
}

.noty_close_button {
    position: absolute;
    top: 2px;
    right: 2px;
    font-weight: bold;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 2px;
    cursor: pointer;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

    .noty_close_button:hover {
        background-color: rgba(0, 0, 0, 0.1);
    }

.noty_modal {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 10000;
    opacity: .3;
    left: 0;
    top: 0;
}

    .noty_modal.noty_modal_open {
        opacity: 0;
        -webkit-animation: noty_modal_in .3s ease-out;
        animation: noty_modal_in .3s ease-out;
    }

    .noty_modal.noty_modal_close {
        -webkit-animation: noty_modal_out .3s ease-out;
        animation: noty_modal_out .3s ease-out;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }

@-webkit-keyframes noty_modal_in {
    100% {
        opacity: .3;
    }
}

@keyframes noty_modal_in {
    100% {
        opacity: .3;
    }
}

@-webkit-keyframes noty_modal_out {
    100% {
        opacity: 0;
    }
}

@keyframes noty_modal_out {
    100% {
        opacity: 0;
    }
}

@keyframes noty_modal_out {
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes noty_anim_in {
    100% {
        -webkit-transform: translate(0);
        transform: translate(0);
        opacity: 1;
    }
}

@keyframes noty_anim_in {
    100% {
        -webkit-transform: translate(0);
        transform: translate(0);
        opacity: 1;
    }
}

@-webkit-keyframes noty_anim_out {
    100% {
        -webkit-transform: translate(50%);
        transform: translate(50%);
        opacity: 0;
    }
}

@keyframes noty_anim_out {
    100% {
        -webkit-transform: translate(50%);
        transform: translate(50%);
        opacity: 0;
    }
}

@-webkit-keyframes noty_anim_height {
    100% {
        height: 0;
    }
}

@keyframes noty_anim_height {
    100% {
        height: 0;
    }
}

.noty_theme__relax.noty_bar {
    margin: 4px 0;
    overflow: hidden;
    border-radius: 2px;
    position: relative;
}

    .noty_theme__relax.noty_bar .noty_body {
        padding: 10px;
    }

    .noty_theme__relax.noty_bar .noty_buttons {
        border-top: 1px solid #e7e7e7;
        padding: 5px 10px;
    }

.noty_theme__relax.noty_type__alert,
.noty_theme__relax.noty_type__notification {
    background-color: #fff;
    border: 1px solid #dedede;
    color: #444;
}

.noty_theme__relax.noty_type__warning {
    background-color: #FFEAA8;
    border: 1px solid #FFC237;
    color: #826200;
}

    .noty_theme__relax.noty_type__warning .noty_buttons {
        border-color: #dfaa30;
    }

.noty_theme__relax.noty_type__error {
    background-color: #FF8181;
    border: 1px solid #e25353;
    color: #FFF;
}

    .noty_theme__relax.noty_type__error .noty_buttons {
        border-color: darkred;
    }

.noty_theme__relax.noty_type__info,
.noty_theme__relax.noty_type__information {
    background-color: #78C5E7;
    border: 1px solid #3badd6;
    color: #FFF;
}

    .noty_theme__relax.noty_type__info .noty_buttons,
    .noty_theme__relax.noty_type__information .noty_buttons {
        border-color: #0B90C4;
    }

.noty_theme__relax.noty_type__success {
    background-color: #BCF5BC;
    border: 1px solid #7cdd77;
    color: darkgreen;
}

    .noty_theme__relax.noty_type__success .noty_buttons {
        border-color: #50C24E;
    }

.noty_theme__metroui.noty_bar {
    margin: 4px 0;
    overflow: hidden;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.298039) 0 0 5px 0;
}

    .noty_theme__metroui.noty_bar .noty_progressbar {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 3px;
        width: 100%;
        background-color: #000;
        opacity: 0.2;
        filter: alpha(opacity=20);
    }

    .noty_theme__metroui.noty_bar .noty_body {
        padding: 1.25em;
        font-size: 14px;
    }

    .noty_theme__metroui.noty_bar .noty_buttons {
        padding: 0 10px .5em 10px;
    }

.noty_theme__metroui.noty_type__alert,
.noty_theme__metroui.noty_type__notification {
    background-color: #fff;
    color: #1d1d1d;
}

.noty_theme__metroui.noty_type__warning {
    background-color: #FA6800;
    color: #fff;
}

.noty_theme__metroui.noty_type__error {
    background-color: #CE352C;
    color: #FFF;
}

.noty_theme__metroui.noty_type__info,
.noty_theme__metroui.noty_type__information {
    background-color: #1BA1E2;
    color: #FFF;
}

.noty_theme__metroui.noty_type__success {
    background-color: #60A917;
    color: #fff;
}

.noty_theme__mint.noty_bar {
    margin: 4px 0;
    overflow: hidden;
    border-radius: 2px;
    position: relative;
}

    .noty_theme__mint.noty_bar .noty_body {
        padding: 10px;
        font-size: 14px;
    }

    .noty_theme__mint.noty_bar .noty_buttons {
        padding: 10px;
    }

.noty_theme__mint.noty_type__alert,
.noty_theme__mint.noty_type__notification {
    background-color: #fff;
    border-bottom: 1px solid #D1D1D1;
    color: #2F2F2F;
}

.noty_theme__mint.noty_type__warning {
    background-color: #FFAE42;
    border-bottom: 1px solid #E89F3C;
    color: #fff;
}

.noty_theme__mint.noty_type__error {
    background-color: #DE636F;
    border-bottom: 1px solid #CA5A65;
    color: #fff;
}

.noty_theme__mint.noty_type__info,
.noty_theme__mint.noty_type__information {
    background-color: #7F7EFF;
    border-bottom: 1px solid #7473E8;
    color: #fff;
}

.noty_theme__mint.noty_type__success {
    background-color: #AFC765;
    border-bottom: 1px solid #A0B55C;
    color: #fff;
}

.noty_theme__sunset.noty_bar {
    margin: 4px 0;
    overflow: hidden;
    border-radius: 2px;
    position: relative;
}

    .noty_theme__sunset.noty_bar .noty_body {
        padding: 10px;
        font-size: 14px;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    }

    .noty_theme__sunset.noty_bar .noty_buttons {
        padding: 10px;
    }

.noty_theme__sunset.noty_type__alert,
.noty_theme__sunset.noty_type__notification {
    background-color: #073B4C;
    color: #fff;
}

    .noty_theme__sunset.noty_type__alert .noty_progressbar,
    .noty_theme__sunset.noty_type__notification .noty_progressbar {
        background-color: #fff;
    }

.noty_theme__sunset.noty_type__warning {
    background-color: #FFD166;
    color: #fff;
}

.noty_theme__sunset.noty_type__error {
    background-color: #EF476F;
    color: #fff;
}

    .noty_theme__sunset.noty_type__error .noty_progressbar {
        opacity: .4;
    }

.noty_theme__sunset.noty_type__info,
.noty_theme__sunset.noty_type__information {
    background-color: #118AB2;
    color: #fff;
}

    .noty_theme__sunset.noty_type__info .noty_progressbar,
    .noty_theme__sunset.noty_type__information .noty_progressbar {
        opacity: .6;
    }

.noty_theme__sunset.noty_type__success {
    background-color: #06D6A0;
    color: #fff;
}

.noty_theme__bootstrap-v3.noty_bar {
    margin: 4px 0;
    overflow: hidden;
    position: relative;
    border: 1px solid transparent;
    border-radius: 4px;
}

    .noty_theme__bootstrap-v3.noty_bar .noty_body {
        padding: 15px;
    }

    .noty_theme__bootstrap-v3.noty_bar .noty_buttons {
        padding: 10px;
    }

    .noty_theme__bootstrap-v3.noty_bar .noty_close_button {
        font-size: 21px;
        font-weight: 700;
        line-height: 1;
        color: #000;
        text-shadow: 0 1px 0 #fff;
        filter: alpha(opacity=20);
        opacity: .2;
        background: transparent;
    }

        .noty_theme__bootstrap-v3.noty_bar .noty_close_button:hover {
            background: transparent;
            text-decoration: none;
            cursor: pointer;
            filter: alpha(opacity=50);
            opacity: .5;
        }

.noty_theme__bootstrap-v3.noty_type__alert,
.noty_theme__bootstrap-v3.noty_type__notification {
    background-color: #fff;
    color: inherit;
}

.noty_theme__bootstrap-v3.noty_type__warning {
    background-color: #fcf8e3;
    color: #8a6d3b;
    border-color: #faebcc;
}

.noty_theme__bootstrap-v3.noty_type__error {
    background-color: #f2dede;
    color: #a94442;
    border-color: #ebccd1;
}

.noty_theme__bootstrap-v3.noty_type__info,
.noty_theme__bootstrap-v3.noty_type__information {
    background-color: #d9edf7;
    color: #31708f;
    border-color: #bce8f1;
}

.noty_theme__bootstrap-v3.noty_type__success {
    background-color: #dff0d8;
    color: #3c763d;
    border-color: #d6e9c6;
}

.noty_theme__bootstrap-v4.noty_bar {
    margin: 4px 0;
    overflow: hidden;
    position: relative;
    border: 1px solid transparent;
    border-radius: .25rem;
}

    .noty_theme__bootstrap-v4.noty_bar .noty_body {
        padding: .75rem 1.25rem;
    }

    .noty_theme__bootstrap-v4.noty_bar .noty_buttons {
        padding: 10px;
    }

    .noty_theme__bootstrap-v4.noty_bar .noty_close_button {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1;
        color: #000;
        text-shadow: 0 1px 0 #fff;
        filter: alpha(opacity=20);
        opacity: .5;
        background: transparent;
    }

        .noty_theme__bootstrap-v4.noty_bar .noty_close_button:hover {
            background: transparent;
            text-decoration: none;
            cursor: pointer;
            filter: alpha(opacity=50);
            opacity: .75;
        }

.noty_theme__bootstrap-v4.noty_type__alert,
.noty_theme__bootstrap-v4.noty_type__notification {
    background-color: #fff;
    color: inherit;
}

.noty_theme__bootstrap-v4.noty_type__warning {
    background-color: #fcf8e3;
    color: #8a6d3b;
    border-color: #faebcc;
}

.noty_theme__bootstrap-v4.noty_type__error {
    background-color: #f2dede;
    color: #a94442;
    border-color: #ebccd1;
}

.noty_theme__bootstrap-v4.noty_type__info,
.noty_theme__bootstrap-v4.noty_type__information {
    background-color: #d9edf7;
    color: #31708f;
    border-color: #bce8f1;
}

.noty_theme__bootstrap-v4.noty_type__success {
    background-color: #dff0d8;
    color: #3c763d;
    border-color: #d6e9c6;
}

.noty_theme__semanticui.noty_bar {
    margin: 4px 0;
    overflow: hidden;
    position: relative;
    border: 1px solid transparent;
    font-size: 1em;
    border-radius: .28571429rem;
    box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.22) inset, 0 0 0 0 transparent;
}

    .noty_theme__semanticui.noty_bar .noty_body {
        padding: 1em 1.5em;
        line-height: 1.4285em;
    }

    .noty_theme__semanticui.noty_bar .noty_buttons {
        padding: 10px;
    }

.noty_theme__semanticui.noty_type__alert,
.noty_theme__semanticui.noty_type__notification {
    background-color: #f8f8f9;
    color: rgba(0, 0, 0, 0.87);
}

.noty_theme__semanticui.noty_type__warning {
    background-color: #fffaf3;
    color: #573a08;
    box-shadow: 0 0 0 1px #c9ba9b inset, 0 0 0 0 transparent;
}

.noty_theme__semanticui.noty_type__error {
    background-color: #fff6f6;
    color: #9f3a38;
    box-shadow: 0 0 0 1px #e0b4b4 inset, 0 0 0 0 transparent;
}

.noty_theme__semanticui.noty_type__info,
.noty_theme__semanticui.noty_type__information {
    background-color: #f8ffff;
    color: #276f86;
    box-shadow: 0 0 0 1px #a9d5de inset, 0 0 0 0 transparent;
}

.noty_theme__semanticui.noty_type__success {
    background-color: #fcfff5;
    color: #2c662d;
    box-shadow: 0 0 0 1px #a3c293 inset, 0 0 0 0 transparent;
}

.noty_theme__nest.noty_bar {
    margin: 0 0 15px 0;
    overflow: hidden;
    border-radius: 2px;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.098039) 5px 4px 10px 0;
}

    .noty_theme__nest.noty_bar .noty_body {
        padding: 10px;
        font-size: 14px;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    }

    .noty_theme__nest.noty_bar .noty_buttons {
        padding: 10px;
    }

.noty_layout .noty_theme__nest.noty_bar {
    z-index: 5;
}

    .noty_layout .noty_theme__nest.noty_bar:nth-child(2) {
        position: absolute;
        top: 0;
        margin-top: 4px;
        margin-right: -4px;
        margin-left: 4px;
        z-index: 4;
        width: 100%;
    }

    .noty_layout .noty_theme__nest.noty_bar:nth-child(3) {
        position: absolute;
        top: 0;
        margin-top: 8px;
        margin-right: -8px;
        margin-left: 8px;
        z-index: 3;
        width: 100%;
    }

    .noty_layout .noty_theme__nest.noty_bar:nth-child(4) {
        position: absolute;
        top: 0;
        margin-top: 12px;
        margin-right: -12px;
        margin-left: 12px;
        z-index: 2;
        width: 100%;
    }

    .noty_layout .noty_theme__nest.noty_bar:nth-child(5) {
        position: absolute;
        top: 0;
        margin-top: 16px;
        margin-right: -16px;
        margin-left: 16px;
        z-index: 1;
        width: 100%;
    }

    .noty_layout .noty_theme__nest.noty_bar:nth-child(n+6) {
        position: absolute;
        top: 0;
        margin-top: 20px;
        margin-right: -20px;
        margin-left: 20px;
        z-index: -1;
        width: 100%;
    }

#noty_layout__bottomLeft .noty_theme__nest.noty_bar:nth-child(2),
#noty_layout__topLeft .noty_theme__nest.noty_bar:nth-child(2) {
    margin-top: 4px;
    margin-left: -4px;
    margin-right: 4px;
}

#noty_layout__bottomLeft .noty_theme__nest.noty_bar:nth-child(3),
#noty_layout__topLeft .noty_theme__nest.noty_bar:nth-child(3) {
    margin-top: 8px;
    margin-left: -8px;
    margin-right: 8px;
}

#noty_layout__bottomLeft .noty_theme__nest.noty_bar:nth-child(4),
#noty_layout__topLeft .noty_theme__nest.noty_bar:nth-child(4) {
    margin-top: 12px;
    margin-left: -12px;
    margin-right: 12px;
}

#noty_layout__bottomLeft .noty_theme__nest.noty_bar:nth-child(5),
#noty_layout__topLeft .noty_theme__nest.noty_bar:nth-child(5) {
    margin-top: 16px;
    margin-left: -16px;
    margin-right: 16px;
}

#noty_layout__bottomLeft .noty_theme__nest.noty_bar:nth-child(n+6),
#noty_layout__topLeft .noty_theme__nest.noty_bar:nth-child(n+6) {
    margin-top: 20px;
    margin-left: -20px;
    margin-right: 20px;
}

.noty_theme__nest.noty_type__alert,
.noty_theme__nest.noty_type__notification {
    background-color: #073B4C;
    color: #fff;
}

    .noty_theme__nest.noty_type__alert .noty_progressbar,
    .noty_theme__nest.noty_type__notification .noty_progressbar {
        background-color: #fff;
    }

.noty_theme__nest.noty_type__warning {
    background-color: #FFD166;
    color: #fff;
}

.noty_theme__nest.noty_type__error {
    background-color: #EF476F;
    color: #fff;
}

    .noty_theme__nest.noty_type__error .noty_progressbar {
        opacity: .4;
    }

.noty_theme__nest.noty_type__info,
.noty_theme__nest.noty_type__information {
    background-color: #118AB2;
    color: #fff;
}

    .noty_theme__nest.noty_type__info .noty_progressbar,
    .noty_theme__nest.noty_type__information .noty_progressbar {
        opacity: .6;
    }

.noty_theme__nest.noty_type__success {
    background-color: #06D6A0;
    color: #fff;
}

.noty_theme__light.noty_bar {
    margin: 4px 0;
    overflow: hidden;
    border-radius: 2px;
    position: relative;
}

    .noty_theme__light.noty_bar .noty_body {
        padding: 10px;
    }

    .noty_theme__light.noty_bar .noty_buttons {
        border-top: 1px solid #e7e7e7;
        padding: 5px 10px;
    }

.noty_theme__light.noty_type__alert,
.noty_theme__light.noty_type__notification {
    background-color: #fff;
    border: 1px solid #dedede;
    color: #444;
}

.noty_theme__light.noty_type__warning {
    background-color: #FFEAA8;
    border: 1px solid #FFC237;
    color: #826200;
}

    .noty_theme__light.noty_type__warning .noty_buttons {
        border-color: #dfaa30;
    }

.noty_theme__light.noty_type__error {
    background-color: #ED7000;
    border: 1px solid #e25353;
    color: #FFF;
}

    .noty_theme__light.noty_type__error .noty_buttons {
        border-color: darkred;
    }

.noty_theme__light.noty_type__info,
.noty_theme__light.noty_type__information {
    background-color: #78C5E7;
    border: 1px solid #3badd6;
    color: #FFF;
}

    .noty_theme__light.noty_type__info .noty_buttons,
    .noty_theme__light.noty_type__information .noty_buttons {
        border-color: #0B90C4;
    }

.noty_theme__light.noty_type__success {
    background-color: #57C880;
    border: 1px solid #7cdd77;
    color: darkgreen;
}

    .noty_theme__light.noty_type__success .noty_buttons {
        border-color: #50C24E;
    }


/*DD: 23-03-21: ALG-1128*/
.primary_grey_small { 
    padding:2px 10px;
    font-size:11.9px; 
    font-size: 12px; 
    font-weight: normal; 
    white-space: nowrap; 
    vertical-align: middle; 
    cursor: pointer; 
    border: 1px solid #adadad; 
    border-radius: 4px; 
    background-color: #ebebeb; 

} 
.primary_green_small { 
    color: #FFFFFF; 
    padding:2px 10px;
    font-size:11.9px; 
    font-size: 12px; 
    font-weight: normal; 
    white-space: nowrap; 
    vertical-align: middle; 
    cursor: pointer; 
    border: 1px solid #4ba614; 
    border-radius: 4px; 
    background-color: #4ba614; 

} 
.primary_red_small { 
    color: #FFFFFF; 
    padding:2px 10px;
    font-size:11.9px; 
    font-size: 12px; 
    font-weight: normal; 
    white-space: nowrap; 
    vertical-align: middle; 
    cursor: pointer; 
    border: 1px solid #adadad; 
    border-radius: 4px; 
    background-color: #FF0000; 

}

input[type="button"]:not(.img_nav_left_15):not(.img_nav_right_15):not(#grbmutnav_begin):not(#grbmutnav_previous):not(#grbmutnav_next):not(#grbmutnav_end) {
    border-radius: var(--borderradius);
    border: 1px solid var(--king_btn_out_border_hover);
    color: var(--king_btn_out_text);
    cursor: pointer;
    min-width: 50px;
    max-width: 100%;
    min-height: 12px;
    max-height: 100%;
    padding: 4px 10px;
    text-decoration: none;
    text-shadow: 0px;
    white-space: nowrap;
    font-weight: bold;
    background-color: var(--king_btn_out_back);
    box-shadow: none;
    font-size: inherit;
}
    input[type="button"]:not(.img_nav_left_15):not(.img_nav_right_15):not(#grbmutnav_begin):not(#grbmutnav_previous):not(#grbmutnav_next):not(#grbmutnav_end):hover {
        background-color: var(--king_btn_out_hover);
        border: 1px solid var(--king_btn_out_border_hover);
        color: var(--king_btn_out_text);
        box-shadow: none;
    }
    input[type="button"]:not(.img_nav_left_15):not(.img_nav_right_15):not(#grbmutnav_begin):not(#grbmutnav_previous):not(#grbmutnav_next):not(#grbmutnav_end):active,
    input[type="button"]:not(.img_nav_left_15):not(.img_nav_right_15):not(#grbmutnav_begin):not(#grbmutnav_previous):not(#grbmutnav_next):not(#grbmutnav_end):focus,
    input[type="button"]:not(.img_nav_left_15):not(.img_nav_right_15):not(#grbmutnav_begin):not(#grbmutnav_previous):not(#grbmutnav_next):not(#grbmutnav_end):not(:disabled):not(.disabled):active,
    input[type="button"]:not(.img_nav_left_15):not(.img_nav_right_15):not(#grbmutnav_begin):not(#grbmutnav_previous):not(#grbmutnav_next):not(#grbmutnav_end):not(:disabled):not(.disabled):active:focus {
        background-color: var(--king_btn_out_hover);
        border: 1px solid var(--king_btn_out_border_hover);
        border-color: var(--king_btn_out_border_hover);
        color: var(--king_btn_out_text);
        box-shadow: none;
        outline: none;
    }
    input[type="button"]:not(.img_nav_left_15):not(.img_nav_right_15):not(#grbmutnav_begin):not(#grbmutnav_previous):not(#grbmutnav_next):not(#grbmutnav_end):visited {
        background-color: var(--king_btn_out_back_visited);
        border: 1px solid var(--king_btn_out_border_hover);
        color: var(--king_btn_out_text);
        box-shadow: none;
    }
    input[type="button"]:not(.img_nav_left_15):not(.img_nav_right_15):not(#grbmutnav_begin):not(#grbmutnav_previous):not(#grbmutnav_next):not(#grbmutnav_end):disabled {
        opacity: 0.4;
        cursor: not-allowed;
        box-shadow: none;
    }

input[type="button"].kingButton,
.btn-success,
.swal2-confirm,
.kingButton {
    border-radius: var(--borderradius);
    border: 1px solid var(--king_btn_border);
    color: var(--king_btn_text);
    cursor: pointer;
    min-width: 50px;
    max-width: 100%;
    min-height: 12px;
    max-height: 100%;
    padding: 4px 10px;
    text-decoration: none;
    text-shadow: 0px;
    white-space: nowrap;
    background-color: var(--king_btn_back);
    box-shadow: none;
    font-size: inherit;
}

        input[type="button"].kingButton:hover,
        .btn-success:hover,
        .swal2-confirm:hover,
        .kingButton:hover {
            background: var(--king_btn_hover);
            border: 1px solid var(--king_btn_border);
            border-color: var(--king_btn_border);
            box-shadow: none;
        }

        input[type="button"].kingButton:active,
        .btn-success:active,
        .swal2-confirm:active,
        .kingButton:active,
        input[type="button"].kingButton:focus,
        .btn-success:focus,
        .swal2-confirm:focus,
        .kingButton:focus,
        input[type="button"].kingButton:not(:disabled):not(.disabled):active,
        .btn-success:not(:disabled):not(.disabled):active,
        .swal2-confirm:not(:disabled):not(.disabled):active,
        .kingButton:not(:disabled):not(.disabled):active,
        input[type="button"].kingButton:not(:disabled):not(.disabled):active:focus,
        .btn-success:not(:disabled):not(.disabled):active:focus,
        .swal2-confirm:not(:disabled):not(.disabled):active:focus,
        .kingButton:not(:disabled):not(.disabled):active:focus {
            background-color: var(--king_btn_hover);
            border: 1px solid var(--king_btn_border);
            box-shadow: none;
            outline: none;
        }

    input[type="button"].kingButton:visited,
    .btn-success:visited,
    .swal2-confirm:visited,
    .kingButton:visited {
        background: var(--king_btn_back_visited);
        box-shadow: none;
    }

    input[type="button"].kingButton:disabled,
    .btn-success:disabled,
    .swal2-confirm:disabled,
    .kingButton:disabled {
        background: var(--king_btn_back_disable);
        cursor: not-allowed;
        box-shadow: none;
    }

.btn,
.btn-secondary,
.swal2-cancel,
.kingButtonOutline {
    border-radius: var(--borderradius);
    border: 1px solid var(--king_btn_out_border);
    color: var(--king_btn_out_text);
    cursor: pointer;
    min-width: 50px;
    max-width: 100%;
    min-height: 12px;
    max-height: max-content;
    padding: 4px 10px;
    text-decoration: none;
    text-shadow: 0px;
    white-space: nowrap;
    font-weight: bold;
    background-color: var(--king_btn_out_back);
    box-shadow: none;
    font-size: inherit;
    /*will-change: opacity,transform;
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    -ms-transition: all .1s ease-out;
    transition: all .1s ease-out;*/
}

    .btn:hover,
    .btn-secondary:hover,
    .swal2-cancel:hover,
    .kingButtonOutline:hover {
        background: var(--king_btn_out_hover);
        border: 1px solid var(--king_btn_out_border);
        color: var(--king_btn_out_text);
        box-shadow: none;
    }

    .btn:active,
    .btn-secondary:active,
    .swal2-cancel:active,
    .kingButtonOutline:active,
    .btn:focus,
    .btn-secondary:focus,
    .swal2-cancel:focus,
    .kingButtonOutline:focus,
    .btn:not(:disabled):not(.disabled):active,
    .btn-secondary:not(:disabled):not(.disabled):active,
    .swal2-cancel:not(:disabled):not(.disabled):active,
    .kingButtonOutline:not(:disabled):not(.disabled):active,
    .btn:not(:disabled):not(.disabled):active:focus,
    .btn-secondary:not(:disabled):not(.disabled):active:focus,
    .swal2-cancel:not(:disabled):not(.disabled):active:focus,
    .kingButtonOutline:not(:disabled):not(.disabled):active:focus {
        background: var(--king_btn_out_hover);
        background-color: var(--king_btn_out_hover);
        border: 1px solid var(--king_btn_out_border);
        border-color: var(--king_btn_out_border);
        color: var(--king_btn_out_text);
        box-shadow: none;
        outline: none;
    }

    .btn:visited,
    .btn-secondary:visited,
    .swal2-cancel:visited,
    .kingButtonOutline:visited {
        background: var(--king_btn_out_back_visited);
        border: 1px solid var(--king_btn_out_border);
        color: var(--king_btn_out_text);
        box-shadow: none;
    }

    .btn:disabled,
    .btn-secondary:disabled,
    .swal2-cancel:disabled,
    .kingButtonOutline:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        box-shadow: none;
    }


.navbar tr:first-child {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    box-shadow: 1px 1px 1px #666666;
    -webkit-box-shadow: 1px 1px 1px #666666;
    -moz-box-shadow: 1px 1px 1px #666666;
    background: #8B8B8B;
    background: linear-gradient(top, #A9A9A9, #7A7A7A);
    background: -ms-linear-gradient(top, #A9A9A9, #7A7A7A);
    background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));
    background: -moz-linear-gradient(top, #A9A9A9, #7A7A7A);
    border: solid 1px #6D6D6D;
}

.laaddiv_heading {
    background-color: var(--king_header_back);
    border-top: 3px solid var(--king_accent_back);
    font-size: 12px;
    font-weight: bold;
    padding: 8px 4px 8px 8px;
    vertical-align: middle;
    color: var(--king_header_color);
}

.gen_dialog_titlebar {
    background-color: var(--gen_titlebar);
    color: #FFF;
    color: var(--gen_titlebar_text);
    padding: 4px;
    height: 45px;
    border-bottom: 1px;
    border-color: var(--gen_border);
    border-style: solid;
    width: 100%;
    border-top: 3px solid var(--king_accent_back) !important;
}

.caption_icon {
    width: 25px;
    height: 25px;
    cursor: pointer;
    margin-left: 0px;
    margin-top: -3px;
    margin-right: 5px;
    background-color: var(--king_icon_color);
    -webkit-mask-repeat: no-repeat;
    float: right;
    position: static;
}

.caption_icon:hover {
    background-color: var(--king_icon_hover);
}

.table50fixed, .tablelayout {
    width: 50%;
    table-layout: fixed;
    border-collapse: collapse;
}

.table100fixed, .tablelayout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.tablelayout > tbody > tr:first-child > td {
    background-color: var(--king_background) !important;
    color: var(--king_text_color) !important;
    color: var(--gen_titlebar_text) !important;
    border-bottom: 1px;
    border-color: var(--gen_border);
    border-style: solid none solid none;
    border-top: 3px solid var(--king_accent_back);
}

.laaddiv_heading table > tbody > tr:first-child > td:first-child,
.tablelayout > tbody > tr:first-child > td:first-child {
    /*overflow: hidden;*/
}

#tr_rapvoorb_buttons #knop_submit {
    width: 50% !important;
}
#i_addtofavdivrapport_voorbereiding_basis {
    margin-top: -10px;
    margin-right: 5px !important;
}

#createADMButton, #createFileButton, .buttongroupWizard_primary {
    border-radius: var(--borderradius);
    border: 1px solid var(--king_btn_border);
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-right: none;
    color: var(--king_btn_text);
    cursor: pointer;
    min-width: 50px;
    max-width: 100%;
    min-height: 12px;
    max-height: 100%;
    text-decoration: none;
    text-shadow: 0px;
    white-space: nowrap;
    background: var(--king_btn_back);
    box-shadow: none;
    font-size: inherit;
}
#createADMButton div
{
    margin: 0px !important;
}

#createFileButton div {
    margin: 0px !important;
}

.buttongroupWizard div {
    margin: 0px !important;
}

#refreshADMButton, #createFolder, .buttongroupWizard_secondary {
    border-radius: var(--borderradius);
    border: 1px solid var(--king_btn_out_border);
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-left: none;
    color: var(--king_btn_out_text);
    cursor: pointer;
    min-width: 50px;
    max-width: 100%;
    min-height: 12px;
    max-height: max-content;
    text-decoration: none;
    text-shadow: 0px;
    white-space: nowrap;
    font-weight: bold;
    background-color: var(--king_btn_out_back);
    box-shadow: none;
    font-size: inherit;
}
#refreshADMButton div {
    margin: 0px !important;
}

#createFolder div {
    margin: 0px !important;
}

#AanmeldingenButton {
    border-radius: 0px;
    border: 1px solid var(--king_btn_out_border);
    border-left: none;
    color: var(--king_btn_out_text);
    cursor: pointer;
    min-width: 50px;
    max-width: 100%;
    min-height: 12px;
    max-height: max-content;
    text-decoration: none;
    text-shadow: 0px;
    white-space: nowrap;
    font-weight: bold;
    background-color: var(--king_btn_out_back);
    box-shadow: none;
    font-size: inherit;
}

#AanmeldingenButton div {
    margin: 0px !important;
}

#ActiverenButton {
    border-radius: 0px;
    border: 1px solid var(--king_btn_out_border);
    border-left: none;
    color: var(--king_btn_out_text);
    cursor: pointer;
    min-width: 50px;
    max-width: 100%;
    min-height: 12px;
    max-height: max-content;
    text-decoration: none;
    text-shadow: 0px;
    white-space: nowrap;
    font-weight: bold;
    background-color: var(--king_btn_out_back);
    box-shadow: none;
    font-size: inherit;
}

#ActiverenButton div {
    margin: 0px !important;
}

.buttongroupWizard_secondary div {
    margin: 0px !important;
}

/* DD:06-04-21: Rode knop toevoegen  */
.knopRood {
    border-radius: var(--borderradius);
    border: 1px solid var(--king_btn_border);
    color: var(--king_btn_text);
    cursor: pointer;
    min-width: 50px;
    max-width: 100%;
    min-height: 12px;
    max-height: 100%;
    padding: 4px 10px;
    text-decoration: none;
    text-shadow: 0px;
    white-space: nowrap;
    background-color: #ED4F47;
    box-shadow: none;
    font-size: inherit;
}
.knopRood:hover {
    background: #ED4F47;
    border: 1px solid var(--king_btn_border);
    border-color: var(--king_btn_border);
    box-shadow: none;
}
.knopRood:active,
.knopRood:focus,
.knopRood:not(:disabled):not(.disabled):active:focus {
    background-color: #ED4F47;
    border: 1px solid var(--king_btn_border);
    box-shadow: none;
    outline: none;
}
.knopRood:visited {
    background: #ED4F47;
    box-shadow: none;
}
.knopRood:disabled {
    background: #ED4F47;
    cursor: not-allowed;
    box-shadow: none;
}
/* DD: 12-04-21: FD-60: Venieuwing periode selectie*/
#d_dashboard_tabs .dropdown-item:focus, .dropdown-item:hover,
#d_dashboard_tabs .show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--king_btn_out_text);
}
#d_dashboard_tabs .dropdown-menu {
    padding: 0;
}

#knop_TerugCreateErrorDocument {
    height: 25px;
    width: 100px;
}

/* DD: 16-04-21: ALG-1142: UBL cloud buttons */
div[id*="filterd_ubl_overzicht"] button ~ button,
div[id*="filterd_ubl_overzicht"] button ~ button:hover{
    height: 20px;
    margin: 0px;
    padding: 0px 10px !important;
    border: 1px solid;
    border-left: 0px;
    border-radius: 0px;
}
div[id*="filterd_ubl_overzicht"] button:first-child {
    height: 20px;
    margin: 0px;
    padding: 0px 10px !important;
    border: 1px solid;
    border-left: 1px solid;
    border-radius: 0px;
    border-top-left-radius: var(--borderradius);
    border-bottom-left-radius: var(--borderradius);
}
div[id*="filterd_ubl_overzicht"] button ~ button:last-child {
    height: 20px;
    margin: 0px;
    padding: 0px 10px !important;
    border: 1px solid;
    border-left: 0px;
    border-radius: 0px;
    border-top-right-radius: var(--borderradius);
    border-bottom-right-radius: var(--borderradius);
}

div[id*="filterd_ubl_overzicht"] button:first-child:last-child {
    height: 20px;
    margin: 0px;
    padding: 0px 10px !important;
    border: 1px solid;
    border-left: 1px solid;
    border-radius: var(--borderradius);
}
div[id*="toolbard_ubl_overzicht_"] button:first-child {
    height: 20px;
    margin: 0px;
    padding: 0px 10px !important;
    border: 1px solid;
    border-left: 1px solid;
    border-radius: 0px;
    border-top-left-radius: var(--borderradius);
    border-bottom-left-radius: var(--borderradius);
}

div[id*="toolbard_ubl_overzicht_"] button:last-child {
    height: 20px;
    margin: 0px;
    padding: 0px 10px !important;
    border: 1px solid;
    border-left: 0px;
    border-radius: 0px;
    border-top-right-radius: var(--borderradius);
    border-bottom-right-radius: var(--borderradius);
}

#buttonRow button ~ button {
    height: 20px;
    margin: 0px;
    padding: 0px 10px !important;
    border: 1px solid;
    border-left: 0px;
    border-radius: 0px;
}

#buttonRow button:first-child {
    height: 20px;
    margin: 0px;
    padding: 0px 10px !important;
    border: 1px solid;
    border-left: 1px solid;
    border-radius: 0px;
    border-top-left-radius: var(--borderradius);
    border-bottom-left-radius: var(--borderradius);
}

#buttonRow button:nth-last-child(2),
#buttonRow button:last-child {
    height: 20px;
    margin: 0px;
    padding: 0px 10px !important;
    border: 1px solid;
    border-left: 1px solid;
    border-radius: var(--borderradius);
}

.dropdown-menu {
    z-index: 999999;
}

div[id*="filterd_ubl_overzicht"] {
    overflow: visible;
}

#drpdwnBtn {
    color: var(--king_btn_out_text) !important;
    background-color: var(--king_btn_out_back) !important;
}

.cdis a,
.cdis div{
    font-size: 12px;
}

.nav-link { font-weight: bold; }

smart-tabs {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

smart-tab-item .smart-container {
    overflow: hidden;
}
/* ------------ */
.smart-demo-container {
    margin: 0 !important;
}

#materialWindowContainer {
    line-height: 24px;
    font-size: 13px;
    margin: 5% 10%;
}

    #materialWindowContainer section h2 {
        font-weight: 400;
        font-size: 24px;
        line-height: 40px;
        margin-bottom: 30px;
        color: #764ebe;
    }

    #materialWindowContainer section h2 {
        border-top: 1px solid rgba(0,0,0,.12);
        font-weight: 400;
        font-size: 24px;
        line-height: 40px;
        margin-bottom: 30px;
        color: #3949ab;
    }

    #materialWindowContainer smart-tabs-window {
        --smart-window-default-width: 80%;
        --smart-window-default-height: 80%;
    }

        #materialWindowContainer smart-tabs-window smart-tab-item div h2 {
            border-top: initial;
            font-size: 30px;
        }

    #materialWindowContainer section:first-of-type h2 {
        font-size: 34px;
        border-top: initial;
    }

    #materialWindowContainer #appearance h2 {
        border-top: initial;
    }

    #materialWindowContainer section:first-of-type div h2 {
        font-size: 20px;
    }

    #materialWindowContainer section {
        margin-top: 80px;
    }

        #materialWindowContainer section:first-of-type {
            margin-top: 0;
        }

        #materialWindowContainer section div h2 {
            color: #212121;
            font-size: 20px;
            font-weight: 400;
            line-height: 32px;
            margin-bottom: 30px;
            max-width: 940px;
        }

    #materialWindowContainer nav {
        display: block;
        border-left: 5px #3949ab solid;
        padding-left: 20px;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
        -webkit-font-smoothing: antialiased;
        font: inherit;
        margin-top: 60px;
    }

        #materialWindowContainer nav ul {
            list-style: none;
            margin-top: 0;
            padding-left: 0;
            margin: 0;
            padding: 0;
            border: 0;
            font: inherit;
            vertical-align: baseline;
            display: block;
            list-style-type: disc;
        }

        #materialWindowContainer nav li {
            list-style: none;
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
            font-size: 20px;
            line-height: 40px;
        }

            #materialWindowContainer nav li a {
                text-decoration: none;
            }

        #materialWindowContainer nav h2 {
            font-size: 15px;
            line-height: 16px;
            padding-bottom: 12px;
            font-weight: 400;
            color: #757575;
            margin: 0;
            padding: 0;
            border: 0;
            font: inherit;
            vertical-align: baseline;
            -webkit-margin-before: 1em;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 0px;
            -webkit-margin-end: 0px;
        }

.module {
    width: calc(100% / 4);
    display: inline-block;
    font: inherit;
    margin-right: 40px;
    min-width: 355px;
    vertical-align: top;
}

    .module.gestures {
        width: calc(100% / 2);
    }

    .module h3 {
        font-size: 13px;
    }

    .module p {
        margin-bottom: 20px;
    }

    .module img {
        width: 100%;
    }

    .module h2 {
        font-weight: 400;
    }


#materialWindowContainer #appearance .module:nth-child(4),
#materialWindowContainer #appearance .module:nth-child(5),
#materialWindowContainer #behavior .module:nth-child(5),
#materialWindowContainer #behavior .module:nth-child(6),
#materialWindowContainer #behavior .module:nth-child(7),
#materialWindowContainer #behavior .module:nth-child(8),
#materialWindowContainer #behavior .module:nth-child(9),
#materialWindowContainer #behavior .module:nth-child(10),
#materialWindowContainer #behavior .module:nth-child(11),
#materialWindowContainer #behavior .module:nth-child(12),
#materialWindowContainer #types .module {
    margin-top: 50px;
}

#materialWindowContainer #appearance .module:nth-child(3),
#materialWindowContainer #appearance .module:nth-child(5),
#materialWindowContainer #appearance .module:nth-child(7) {
    width: calc(100% / 2);
}

#materialWindowContainer #appearance .module:nth-child(5),
#materialWindowContainer #appearance .module:nth-child(7) {
    height: 400px;
}

#materialWindowContainer .headerTemplateContainer {
    display: flex;
    align-items: center;
    justify-content: center;
}

    #materialWindowContainer .headerTemplateContainer i {
        margin-right: 5px;
        font-size: 16px;
    }

#materialWindowContainer smart-window:first-of-type {
    --smart-window-default-height: 250px;
    --smart-window-default-width: 250px;
}

#materialWindowContainer smart-window {
    --smart-window-default-width: 400px;
    --smart-window-default-height: 200px;
}

    #materialWindowContainer smart-window.content-window smart-list-box {
        height: 100%;
        width: 100%;
        box-shadow: initial;
        background-color: initial;
    }


#materialWindowContainer #appearance .module:nth-child(5) p {
    margin-top: 350px;
    padding-left: 125px;
}

#materialWindowContainer #appearance .module:nth-child(7) p {
    margin-top: 365px;
    padding-left: 300px;
}

#materialWindowContainer .confirmation-window {
    background-image: url(../../images/components-windows-confirmation.png); /*CHO: no such image in project  */
    height: 725px;
    width: 405px;
    background-size: cover;
}

#materialWindowContainer .confirmation-window2 {
    height: 725px;
    width: 405px;
    background-color: #E0E0E0;
}

    #materialWindowContainer .confirmation-window2 smart-window {
        --smart-window-default-width: 300px;
        --smart-window-default-height: 225px;
    }

#materialWindowContainer .confirmation-window smart-window {
    --smart-window-default-width: 317px;
    --smart-window-default-height: 588px;
    top: 55px;
    left: 45px;
}

#materialWindowContainer #appearance .module:nth-child(8),
#materialWindowContainer .confirmation-window,
#materialWindowContainer .confirmation-window2,
#materialWindowContainer .window-themes {
    margin-top: 50px;
}

    #materialWindowContainer .confirmation-window smart-window,
    #materialWindowContainer .confirmation-window2 smart-window {
        --smart-window-header-height: 55px;
        --smart-window-footer-height: 55px;
    }

    #materialWindowContainer .confirmation-window .smart-header-section,
    #materialWindowContainer .confirmation-window2 .smart-header-section {
        background-color: initial;
        font-size: 23px;
        padding: 20px;
        font-weight: 600;
    }

    #materialWindowContainer .confirmation-window smart-list-item .smart-input:after,
    #materialWindowContainer .confirmation-window smart-list-items-group .smart-input:after,
    #materialWindowContainer .confirmation-window2 smart-list-item .smart-input:after,
    #materialWindowContainer .confirmation-window2 smart-list-items-group .smart-input:after {
        line-height: 15px;
    }

    #materialWindowContainer .confirmation-window smart-list-item .smart-input,
    #materialWindowContainer .confirmation-window smart-list-items-group .smart-input,
    #materialWindowContainer .confirmation-window2 smart-list-item .smart-input,
    #materialWindowContainer .confirmation-window2 smart-list-items-group .smart-input {
        font-size: inherit;
    }



    #materialWindowContainer .confirmation-window .smart-footer,
    #materialWindowContainer .confirmation-window2 .smart-footer {
        background-color: initial;
        display: flex;
        justify-content: flex-end;
    }

        #materialWindowContainer .confirmation-window .smart-footer smart-button,
        #materialWindowContainer .confirmation-window2 .smart-footer smart-button {
            height: 100%;
        }


    #materialWindowContainer .confirmation-window p,
    #materialWindowContainer .confirmation-window2 p {
        margin-top: 750px;
    }

#materialWindowContainer smart-list-box.material smart-list-item {
    border-bottom: initial;
}

#materialWindowContainer .window-themes {
    margin-top: 100px;
}

#materialWindowContainer .window-themes1,
#materialWindowContainer .window-modal,
#materialWindowContainer .window-types {
    height: 500px;
}

#materialWindowContainer .window-with-header-themes1,
#materialWindowContainer .window-with-header-themes2 {
    background-image: url('../../images/components-windows-header.png'); /*CHO: no such image in project  */
    background-size: cover;
    height: 665px;
}

    #materialWindowContainer .window-with-header-themes1 smart-window,
    #materialWindowContainer .window-with-header-themes2 smart-window {
        left: 40px;
        top: 165px;
        --smart-window-default-width: 295px;
        --smart-window-default-height: 300px;
        --smart-window-header-height: 70px;
        --smart-window-footer-height: 50px;
    }

        #materialWindowContainer .window-with-header-themes1 smart-window .smart-header-section,
        #materialWindowContainer .window-with-header-themes2 smart-window .smart-header-section {
            font-size: 20px;
            padding: 20px;
            color: white;
            background-color: initial;
        }

        #materialWindowContainer .window-with-header-themes1 smart-window .smart-footer,
        #materialWindowContainer .window-with-header-themes2 smart-window .smart-footer {
            background-color: initial;
        }

            #materialWindowContainer .window-with-header-themes1 smart-window .smart-footer button,
            #materialWindowContainer .window-with-header-themes2 smart-window .smart-footer button {
                color: #2693E5;
            }

        #materialWindowContainer .window-with-header-themes2 smart-window .smart-header-section {
            color: black;
            background-color: initial;
        }

        #materialWindowContainer .window-with-header-themes1 smart-window > .smart-container > .smart-content,
        #materialWindowContainer .window-with-header-themes2 smart-window > .smart-container > .smart-content {
            padding: 20px;
        }


#materialWindowContainer .window-themes1 > p,
#materialWindowContainer .window-themes2 > p {
    margin-top: 525px;
}

#materialWindowContainer .window-with-header-themes1 > p,
#materialWindowContainer .window-with-header-themes2 > p {
    margin-top: 685px;
}

#materialWindowContainer .window-themes1 smart-window smart-button,
#materialWindowContainer .window-themes2 smart-window smart-button,
#materialWindowContainer .window-modal smart-window smart-button {
    height: 100%;
}

#materialWindowContainer .header-controls > smart-button,
#materialWindowContainer .window-types > smart-button {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

#materialWindowContainer .window-modal.header-controls.dark {
    background-color: black;
}

#materialWindowContainer .header-controls smart-window img {
    height: 100%;
}

#materialWindowContainer .window-modal.header-controls smart-window.material {
    --smart-window-header-height: 50px;
    --smart-window-default-width: 250px;
    --smart-window-default-height: 300px;
}

#materialWindowContainer .window-modal.header-controls smart-window.material-dark {
    --smart-window-header-height: 50px;
    --smart-window-default-width: 250px;
    --smart-window-default-height: 300px;
}

    #materialWindowContainer .window-modal.header-controls smart-window.material-dark smart-tabs {
        width: 100%;
        height: 100%;
    }

    #materialWindowContainer .window-modal.header-controls smart-window.material-dark smart-tab-item {
        overflow: initial;
    }

    #materialWindowContainer .window-modal.header-controls smart-window.material-dark .smart-tabs-content-section {
        margin: initial;
    }

#materialWindowContainer .header-controls smart-window .smart-content {
    height: 100%;
}

#materialWindowContainer .window-themes1 smart-window .smart-content p,
#materialWindowContainer .window-themes2 smart-window .smart-content p,
#materialWindowContainer .window-modal smart-window .smart-content p {
    width: 100%;
    margin-left: 35px;
    margin-top: 0;
}

#materialWindowContainer .window-modal.unpinned .smart-header-section,
#materialWindowContainer .window-modal.scrollable-content .smart-header-section,
#materialWindowContainer .window-modal.header-controls .smart-header-section {
    display: flex;
}

.scrollable-content smart-window {
    width: 250px;
    left: 0px;
}

#materialWindowContainer .window-modal.scrollable-content smart-window .smart-content {
    overflow: scroll;
}

#materialWindowContainer .window-modal.scrollable-content .smart-content > div {
    height: 100%;
}

#materialWindowContainer .window-modal.scrollable-content .smart-container > .smart-content {
    padding: 10px;
}

#materialWindowContainer .window-modal.unpinned smart-window,
#materialWindowContainer .window-modal.scrollable-content smart-window {
    --smart-window-header-height: 50px;
    --smart-window-default-height: 200px;
}

#materialWindowContainer .window-modal.scrollable-content smart-window {
    --smart-window-default-height: 350px;
    --smart-window-default-width: 600px;
    min-width: 150px;
}

#materialWindowContainer .window-modal.scrollable-content,
#materialWindowContainer .window-types.tabs-window {
    width: calc(100% / 2);
}

    #materialWindowContainer .window-types.tabs-window:last-of-type {
        background-color: black;
    }

#materialWindowContainer .window-modal.header-controls smart-window .smart-header-section smart-button {
    display: initial;
}

#materialWindowContainer .window-modal.unpinned .smart-content p {
    text-align: center;
    margin: initial;
}

#materialWindowContainer .window-themes2 {
    background-color: black;
    height: 500px;
}

@media (max-width: 1026px) {
    #materialWindowContainer .window-modal.scrollable-content,
    #materialWindowContainer .window-types.tabs-window {
        width: 96% !important;
    }
}

div.sticky {
    position: -webkit-sticky;
    position: sticky;
}

/*div.center {
    left: 50%;
    width: 325px;
    -webkit-transform: translate(-webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
    transform: translate(calc(-50% - .5px)) translateZ(0) scale(1, 1);
}*/

div.topBar, div.topBar * {
    font-family: inherit;
    box-sizing: border-box;
    text-decoration: none;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
}

@media all and (min-width: 10px) {
    div.topBar {
        display: flex;
        position: fixed;
        top: -100px;
        left: 50px;
        width: calc(100vw - 100px);
        padding: 5px 10px;
        min-height: 30px;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        font-size: .9rem;
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3);
        -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3);
        z-index: 4;
        background: var(--king_menu_border);
        padding: 5px;
        line-height: 21px;
        border-left: 2px solid var(--king_accent_back);
        font-size: 14px;
        color: var(--king_text_color);
        border-radius: 3px;
        opacity: 1;
    }

    @media all and (min-width: 850px) {
        div.topBar {
            left: 150px;
            width: calc(100vw - 300px);
            padding: 5px 60px;
            justify-content: center;
            -webkit-justify-content: center;
            -moz-justify-content: center;
            align-items: center;
            -webkit-align-items: center;
            -moz-align-items: center;
        }
    }

    div.topBar .button {
        display: flex;
        position: absolute;
        margin: 0px 0px 0px 5px;
        padding: 2px 4px;
        font-size: inherit;
        font-family: inherit;
        background: none;
        color: var(--king_text_color);
        border: none;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        cursor: pointer;
        right: 50px;
        font-weight: normal;
        text-decoration: underline;
    }

        div.topBar .button:hover {
        }

    div.topBar .close {
        display: flex;
        position: absolute;
        top: 50%;
        right: 10px;
        width: 25px;
        height: 25px;
        font-size: 1.5rem;
        border-radius: 360px;
        color: inherit;
        border: 1px solid white;
        background-color: transparent;
        transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        -o-transform: translate(0, -50%);
        justify-content: center;
        align-items: center;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

        div.topBar .close:hover {
            color: black;
            background-color: white;
        }

    .topBar .close span {
        display: block;
        height: 100%;
        font-size: 1.5rem;
        line-height: calc(1.5rem - 3px);
        text-align: center;
        max-height: calc(1.5rem - 3px);
        transition: all 0s;
        -webkit-transition: all 0s;
        -moz-transition: all 0s;
        -o-transition: all 0s;
    }