@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,400;1,600;1,700&display=swap');

:root {
    --primary-color: #91D14F;
    --secondary-color: #262626;
    --primary-color-purple-light: #68398a;
    --secondary-color-blue: #00A0DF;
    --secondary-color-green: #4DA67B;
    --heading: var(--primary-color);
    --blue: #111C4E;
    --blue-light: #494666;
    --blue-super-light: #7E7790;
    --blue-highlight: #B9B6C4;
    --blue-highlight-light: #F0EFF3;
    --text: var(--secondary-color);
    --orange-color: #F2AB25;
    --dark-orange-color: #EA7F28;
    --light-bg: #f4f4f4;
}

h1, h2, h3, h4, h5, h6, .card-header, .h1 {
    text-transform: inherit !important;
}

h2, h3, h4, h5, h6 {
    color: var(--heading);
    font-family: 'Nunito Sans', sans-serif;
}

body {
    font-size: 10pt;
    -webkit-font-smoothing: antialiased;
    background-color: #ffffff;
    font-family: 'Nunito Sans', sans-serif;
    color: var(--text) !important;
}

#wrapper {
    max-width: 1590px;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
}

.panel-grey,
.panel-grey > .panel-heading,
.dropdown-menu,
.btn,
.pagination,
.modal-dialog,
.modal-content,
.model-header-email,
.model-header,
pre,
.popover,
.tile,
.alert,
.h-closed,
.h-open,
::-webkit-scrollbar-track,
.well,
.goup-container,
.sidebar-button-container > a,
.ui-dialog {
    border-radius: 10px;
}


::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #7e7e7e;
}

/*
    ICON&FONTS
*/

.icon-large {
    font-size: 40px;
}

#popupDialogText {
    font-size: 14px
}

#page-wrapper {
    padding-top: 75px;
    background-color: #ffffff;
}

.text-muted > .btn {
    color: #fff !important;
    font-style: normal;
    height: 25px;
}


.top-title {
    max-width: 500px;
    margin-left: 140px;
    height: 30px;
    font-size: 25px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: bold;
}

    .top-title > a > small {
        font-size: 14pt
    }

.tile .title {
    color: #fff;
}
/*
    NAVBAR TOP
*/
img.place-left {
    display: none;
}

.navbar-static-top, .navbar.fixed-top {
    position: fixed;
    left: 0px;
    right: 0px;
}

.navbar-fixed-top, .navbar-static-top, .navbar.fixed-top {
    background: var(--primary-color);
}

.navbar-header, .navbar-logo {
    position: fixed;
    top: 0px;
    z-index: 100;
    background-image: url('images/logos/SMB-logo.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 200px;
    height: 100px;
    overflow: auto;
    border-radius: 0px;
    overflow: hidden;
    margin: 15px 0 15px 15px;
}

.navbar-static-side {
    overflow-y: auto;
    position: fixed;
}

    .navbar-static-side ul li {
        border-bottom: 0px
    }

a.navbar-brand {
    color: var(--text) !important;
    width: 500px;
}

.page-header {
    display: none;
    z-index: 10000;
}

/*
    NAVBAR SIDE
*/

#side-menu > li > a {
    color: var(--secondary-color);
    font-weight: 500;
}

    #side-menu > li > a > i {
        display: none
    }

#side-menu > li > .nav > li > a i {
    width: 20px;
    text-align: center;
}

    #side-menu > li > .nav > li > a i.fad {
        font-size: 0 !important;
    }

        #side-menu > li > .nav > li > a i.fad::before,
        #side-menu > li > .nav > li > a i.fad::after {
            font-size: 16px !important;
        }

#side-menu > li > .nav > li > a {
    color: var(--secondary-color);
    border: #707070;
    font-weight: bold;
    font-size: 13px;
    border-left: 3px solid var(--light-bg);
}

    #side-menu > li > .nav > li > a:hover, #side-menu > li > .nav > li > a:active {
        color: var(--primary-color);
        margin-left: 0px;
        border-left: 3px solid var( --primary-color);
        background-color: rgba(255,255,255, 0.1);
    }

        #side-menu > li > .nav > li > a:hover .popupopen {
            color: var(--primary-color);
        }

#side-menu > li > .nav > li:focus {
    transform: scale(0.900);
    transition: 0.3s;
}

@media only screen and (min-width:768px) {
    .navbar-static-side {
        overflow-y: auto;
        position: fixed;
        background-color: var(--light-bg);
    }

    div.navbar-default.navbar-static-side.sidebar-collapse {
        overflow-y: auto;
        position: fixed;
        margin-top: 95px;
        height: -moz-calc(100% - 90px) !important;
        /* WebKit */
        height: -webkit-calc(100% - 90px) !important;
        /* Opera */
        height: -o-calc(100% - 90px) !important;
    }

    .left-menu-fix {
        background-color: var(--light-bg);
    }
}

@media only screen and (max-width:768px) {
    ul.nav-second-level {
        padding-bottom: 0px;
    }

    div.navbar-default.navbar-static-side {
        background-color: var(--primary-color);
        top: 0px;
        /* Firefox */
        height: -moz-calc(100% - 90px) !important;
        /* WebKit */
        height: -webkit-calc(100% - 90px) !important;
        /* Opera */
        height: -o-calc(100% - 90px) !important;
        /* Standard */
        height: calc(100% - 0px) !important;
        overflow-y: auto;
        position: fixed;
        overflow-y: auto;
    }

    #nav-icon {
        margin-top: 0px;
        z-index: 10;
        margin-right: 0px;
    }

        #nav-icon span {
            background-color: var(--secondary-color);
        }

    .navbar-light, .navbar-default {
        background-size: 60px !important;
        background-repeat: no-repeat !important;
        background-position: 5px 5px !important;
    }

    .navbar-fixed-top, .navbar-static-top, .navbar.fixed-top, .btn-primary .badge {
        background: linear-gradient(90deg, var(--light-bg) 250px, rgba(255,255,2555, 0.9) 0%);
        background-image: url('images/logos/SMB-logo.png') !important;
        background-size: 185px !important;
        background-position-x: 15px !important;
        background-position-y: 15px !important;
    }

    .navbar-header, .navbar-logo {
        position: fixed;
        right: 0;
        top: 0px;
        z-index: 100;
        background-image: none;
        background-color: transparent;
        width: 80px;
        height: 50px;
        overflow: no-content;
        box-shadow: none;
        border-radius: 0;
    }

    #side-menu > li > .nav > li > a, #side-menu > li > a {
        color: #fff;
    }

    .navbar-static-top, .navbar.fixed-top {
        height: 70px !important;
    }
}
/*
    PANELS
*/

.panel, .panel-grey, .well, .tooltip-inner {
    border: solid 0px #e0e6ed;
    background-color: #FEFEFE;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    border-radius: 10px !important;
}

    .well.widget {
        padding: 0;
    }

        .well.widget h4 {
            margin-left: 15px;
        }

.tooltip-inner {
    color: #000;
    border: solid 1px var(--text);
}

.panel-default {
    border-radius: 10px;
}

    .panel-default > .panel-heading {
        font-weight: bold;
        color: var(--primary-color);
        background-color: #fff;
        padding-top: 12px;
        padding-bottom: 10px;
        left: 20px;
        border: 0;
        height: auto !important;
        border-radius: inherit;
        font-family: 'Nunito Sans', sans-serif;
    }

        .panel-default > .panel-heading.mains {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0
        }

        .panel-default > .panel-heading a {
            color: var(--text);
            font-weight: bold
        }

        .panel-default > .panel-heading > .btn-group > a {
            color: var(--text)
        }

.blockcat-image, i[class^="tocolor-"] {
    display: none !important
}

.panel-heading > i[class^="bbicon-"] {
    display: none !important
}

.panel-grey > .panel-heading {
    color: #333;
    background-color: #fff;
    border-color: #ddd;
    border: 0;
}

.search > .panel {
    height: 425px !important
}

    .search > .panel > .panel-heading {
        text-align: left;
    }

.place-left {
    height: 45px !important;
    margin-top: -10px !important;
    padding-left: 5px;
}

.panel-body {
    padding: 0;
    background-color: #fff;
    border-radius: inherit
}

.panel-heading > a {
    padding-left: 5px;
}

.panel-default > .panel-body {
    background-color: #fff;
}

.panel-footer {
    position: relative;
    padding: 10px 15px;
    background-color: #fff;
    border-top: 0px solid #ddd;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.panel > .panel-body > #NativeAzureBlock > .panel {
    padding: 0;
    margin: 0;
}

    .panel > .panel-body > #NativeAzureBlock > .panel > .panel-body {
        padding: 0;
        margin: 0;
        box-shadow: none
    }


/* Omdat we natuurlijk geen class hebben die aangeeft welke pagina het is */
.panel.Details .panel-heading,
.panel.Afspraak .panel-heading,
.panel.Polis .panel-heading,
.panel.Offerte .panel-heading,
.panel.Archief .panel-heading,
.panel.Agenda .panel-heading,
.panel.Memo .panel-heading,
.panel.DVO .panel-heading {
    border-bottom: 1px solid #E5E5E5;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    font-size: 16px;
}

    .panel.Details .panel-heading .badge,
    .panel.Afspraak .panel-heading .badge,
    .panel.Polis .panel-heading .badge,
    .panel.Offerte .panel-heading .badge,
    .panel.Archief .panel-heading .badge,
    .panel.Agenda .panel-heading .badge,
    .panel.Memo .panel-heading .badge,
    .panel.DVO .panel-heading .badge {
        border-radius: 10px;
        font-weight: normal;
    }

    .panel.Afspraak .panel-heading .btn-group pull-right,
    .panel.Details .panel-heading .btn-group pull-right,
    .panel.Polis .panel-heading .btn-group pull-right,
    .panel.Offerte .panel-heading .btn-group pull-right,
    .panel.Archief .panel-heading .btn-group pull-right,
    .panel.Agenda .panel-heading .btn-group pull-right,
    .panel.Memo .panel-heading .btn-group pull-right,
    .panel.DVO .panel-heading .btn-group pull-right {
        border-bottom: 1px solid #E5E5E5;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        font-size: 16px;
    }

.panel.panel-default.Details > .panel-heading > .btn-group,
.panel.panel-default.Afspraak > .panel-heading > .btn-group,
.panel.panel-default.Polis > .panel-heading > .btn-group,
.panel.panel-default.Offerte > .panel-heading > .btn-group,
.panel.panel-default.Archief > .panel-heading > .btn-group,
.panel.panel-default.Agenda > .panel-heading > .btn-group,
.panel.panel-default.Memo > .panel-heading > .btn-group,
.panel.panel-default.DVO > .panel-heading > .btn-group {
    border-radius: 10px;
    padding: 5px;
    margin-top: -5px;
}

    .panel.panel-default.Details > .panel-heading > .btn-group:hover,
    .panel.panel-default.Afspraak > .panel-heading > .btn-group:hover,
    .panel.panel-default.Polis > .panel-heading > .btn-group:hover,
    .panel.panel-default.Offerte > .panel-heading > .btn-group:hover,
    .panel.panel-default.Archief > .panel-heading > .btn-group:hover,
    .panel.panel-default.Agenda > .panel-heading > .btn-group:hover,
    .panel.panel-default.Memo > .panel-heading > .btn-group:hover,
    .panel.panel-default.DVO > .panel-heading > .btn-group:hover {
        background: #F1F4F9;
    }

    .panel.panel-default.Afspraak > .panel-heading > .btn-group > a:after,
    .panel.panel-default.Details > .panel-heading > .btn-group > a:after,
    .panel.panel-default.Polis > .panel-heading > .btn-group > a:after,
    .panel.panel-default.Offerte > .panel-heading > .btn-group > a:after,
    .panel.panel-default.Archief > .panel-heading > .btn-group > a:after,
    .panel.panel-default.Agenda > .panel-heading > .btn-group > a:after,
    .panel.panel-default.Memo > .panel-heading > .btn-group > a:after,
    .panel.panel-default.DVO > .panel-heading > .btn-group > a:after {
        color: var(--text);
        font-size: 12px;
        font-weight: 600;
        padding-left: 5px;
        display: table-cell;
        float: right;
        margin-top: 2px;
    }

    .panel.panel-default.Afspraak > .panel-heading > .btn-group > a,
    .panel.panel-default.Details > .panel-heading > .btn-group > a,
    .panel.panel-default.Polis > .panel-heading > .btn-group > a,
    .panel.panel-default.Offerte > .panel-heading > .btn-group > a,
    .panel.panel-default.Archief > .panel-heading > .btn-group > a,
    .panel.panel-default.Agenda > .panel-heading > .btn-group > a,
    .panel.panel-default.Memo > .panel-heading > .btn-group > a,
    .panel.panel-default.DVO > .panel-heading > .btn-group > a {
        color: var(--text);
    }

        .panel.panel-default.Afspraak > .panel-heading > .btn-group > a:after {
            content: 'Nieuwe afspraak';
        }

        .panel.panel-default.Details > .panel-heading > .btn-group > a:after {
            content: 'Wijzig gegevens';
        }

        .panel.panel-default.Polis > .panel-heading > .btn-group > a:after {
            content: 'Nieuwe polis';
        }

        .panel.panel-default.Offerte > .panel-heading > .btn-group > a:after {
            content: 'Nieuwe offerte';
        }

        .panel.panel-default.Memo > .panel-heading > .btn-group > a:after {
            content: 'Nieuwe memo';
        }

        .panel.panel-default.Agenda > .panel-heading > .btn-group > a:after {
            content: 'Nieuwe agenda';
        }

        .panel.panel-default.Archief > .panel-heading > .btn-group > a:after {
            content: 'Nieuw archiefstuk';
        }

        .panel.panel-default.DVO > .panel-heading > .btn-group > a:after {
            content: 'Nieuwe DVO';
        }

/*
    TABS
*/

.nav.nav-tabs {
    border-bottom: 2px solid #E5E5E5
}

    .nav.nav-tabs > li > a {
        color: #687281;
        font-size: 14px;
        padding-left: 7px;
        padding-right: 7px;
        border-bottom: 2px solid #E5E5E5;
        margin-right: 0;
        font-weight: bold;
    }

        .nav.nav-tabs > li > a:hover {
            color: var(--text);
            border-bottom: 2px solid #E5E5E5
        }

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: var(--text);
    border: 1px solid #fff;
    border-bottom: 2px solid var(--text);
}

tab-content, .tab-content {
    position: relative;
    background-color: #fff;
    margin: 0;
}

ul.tab li a:hover {
    color: #7F7F7F;
    background-color: #e4e4e4;
}

ul.tab li a.active {
    color: var(--text) !important;
    border-bottom: 2px solid var(--text)
}

    ul.tab li a.active:hover {
        background-color: #fff !important;
    }

/*
    NAVBAR
*/

.nav-tabs {
    border-bottom: none;
}

    .nav-tabs > li > a {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        color: #fff;
        background-color: transparent
    }

        .nav-tabs > li > a:hover {
            border-color: transparent;
            color: #B5B5B5
        }

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}

.navbar-static-top, .navbar.fixed-top {
    height: 55px;
    margin-top: 0px;
    border-bottom: none;
    background: linear-gradient(90deg, var(--light-bg) 250px, rgba(255,255,2555, 0.9) 0%);
    -webkit-backdrop-filter: blur(10px);
}

.navbar-brand > .hidden-xs {
    display: none
}

ul.navbar-top-links a {
    top: 2px;
    color: var(--text);
    background-color: transparent
}

.navbar-top-links a:hover, .navbar-top-links a:focus {
    color: var(--text);
    background-color: transparent
}

.nav > li > a:hover, .nav > li > a:focus, .nav > li > a:active {
    color: var(--text);
    background-color: transparent
}

    .nav > li > a:focus > .fa-caret-down, .nav > li > a:active > .fa-caret-down {
        color: var(--text);
    }

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    background-color: transparent;
    -webkit-box-shadow: 0px 0px 55px -22px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 0px 55px -22px rgba(0,0,0,0.45);
    box-shadow: 0px 0px 55px -22px rgba(0,0,0,0.45);
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus, .dropdown-menu {
    background-color: #fff;
}

    .dropdown-menu > li > a {
        color: var(--text);
    }

        .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-menu > li > a:active {
            color: var(--text);
            text-decoration: none;
            background-color: var(--blue-highlight-light);
        }

.navbar-top-links .dropdown-menu li a {
    padding: 10px 10px;
    font-weight: 500;
}

.dropdown-menu {
    content: '\e133';
    -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    max-height: 0;
    display: block;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    top: 39px;
    padding: 0
}

    .dropdown-menu .divider {
        margin: 0
    }

    .dropdown.open .dropdown-menu, [data-role="dropdown"].open .dropdown-menu, .dropdown-menu.show {
        -webkit-transition: opacity 0.3s;
        -moz-transition: opacity 0.3s;
        -ms-transition: opacity 0.3s;
        -o-transition: opacity 0.3s;
        transition: opacity 0.3s;
        max-height: 400px;
        opacity: 1;
        visibility: visible;
    }


li[data-role="dropdown"], li.dropdown {
    height: 30px;
    line-height: 30px;
    margin: 10px;
}

    li[data-role="dropdown"]:hover a.dropdown-toggle, li.dropdown:hover a.dropdown-toggle, li[data-role="dropdown"].open a.dropdown-toggle, li.dropdown.open a.dropdown-toggle {
        background-color: var(--blue-highlight-light);
    }

    li[data-role="dropdown"] .dropdown-menu, li.dropdown .dropdown-menu {
        z-index: 99;
        margin-top: -5px;
    }

a.dropdown-toggle {
    position: relative;
    min-height: 20px !important;
    padding: 7px 10px !important;
    line-height: 20px;
    top: 0 !important;
    border-radius: 10px !important;
    z-index: 100;
    font-weight: 500;
}

    a.dropdown-toggle .fa-user {
        font-family: 'Font Awesome 5 Pro', sans-serif !important;
        font-weight: 900 !important;
    }

        a.dropdown-toggle .fa-user:before {
            content: '\f2bd' !important;
        }

.dropdown > a > .fa-caret-down:after {
    font-family: 'fontawesome', sans-serif;
    content: '\f078';
}

.dropdown.open > a > .fa-caret-down:after {
    font-family: 'fontawesome', sans-serif;
    content: '\f077';
}

.dropdown > a > .fa-caret-down:before {
    display: none
}

.nav.navbar-top-links > li > a > .fa-caret-down:before {
    display: none
}

.nav.navbar-top-links > [data-role="dropdown"] > a > .fa-caret-down:after {
    font-family: 'fontawesome', sans-serif;
    content: "\f078";
}

.nav.navbar-top-links > [data-role="dropdown"].open > a > .fa-caret-down:after {
    font-family: 'fontawesome', sans-serif;
    content: "\f077";
}

#TijdschrijvenInfo, #TijdschrijvenRelatie {
    color: var(--text) !important
}

/*
    BUTTONS
*/

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

.btn, .btn-default {
    background-color: var(--primary-color);
    font-size: 14px;
    height: 40px;
    border: none;
    color: #fff;
    box-shadow: none !important;
    padding: 7px;
    padding-left: 14px;
    padding-right: 14px;
    transition: 0.3s;
    border-radius: 10px !important;
}

.btn-primary {
    background-color: var(--secondary-color);
    border: none;
    color: var(--primary-color);
    box-shadow: none !important;
    padding: 7px !important;
    transition: 0.3s;
}

    .btn-primary:hover, .btn-primary:active, .btn-primary:focus {
        background-color: #88BC9D;
    }


    .btn-default:focus, .btn-primary:focus {
        outline: none;
        opacity: 0.4;
        transform: scale(0.950);
        transition: 0.3s;
    }

.tile:focus, .list-group-item:focus, .table-hover > tbody > tr:active {
    opacity: 0.4 !important;
    transition: 0.3s !important;
}

.btn-default:hover, .btn-default:active, .btn-default:focus {
    color: var(--primary-color);
    background-color: var(--secondary-color);
}

.productselectie .btn-default, .hasAgenda .btn-default {
    width: 50px !important;
}

p > span.btn, span.btn {
    background-color: #fff;
    color: #c6c6c6;
    border: 1px solid #b6b6b6;
    transition: 0.2s;
}

    p > span.btn.active, span.btn.active {
        background-color: #000000;
        border: 1px solid var(--text);
        color: #fff;
        transition: 0.2s;
    }

.btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] {
    color: #000
}

.btn-default.active {
    border-color: #000000;
    border: 1px solid var(--text);
    color: #000000;
    background-color: #fff;
}

.bb-icon, .btn-primary.btn-outline, .pagination > li > a, .pagination > li > span, .sidebar-nav, a:hover, a:focus, a:hover, a:focus, .btn-link:hover, .btn-link:focus {
    color: #000000;
}

.badge {
    color: #A9A9A9;
    background-color: #F2F2F2;
    border: 0 !important;
    border-radius: 10px;
}

#Details > div > div > .btn {
    position: relative;
    bottom: 6px;
    border: inherit solid 1px;
}

.badge.blockTotalRecords {
    color: #A9A9A9;
    background-color: #F2F2F2;
    border: 0 !important;
    border-radius: 10px;
}

.input-group-btn > .btn-default {
    border: 1px solid var(--text);
    background-color: #000000;
    color: #fff
}

.sidebar-button-container {
    padding: 35px 0 10px 0;
    text-align: center;
}

    .sidebar-button-container > a {
        margin: 0px;
        color: #fff;
        background-color: var(--primary-color);
        border: unset;
    }

        .sidebar-button-container > a:hover {
            background-color: var(--primary-color);
            color: var(--text);
            -webkit-box-shadow: 0px 0px 55px -22px rgba(0,0,0,0.45);
            -moz-box-shadow: 0px 0px 55px -22px rgba(0,0,0,0.45);
            box-shadow: 0px 0px 55px -22px rgba(0,0,0,0.45);
        }

        .sidebar-button-container > a:focus {
            background-color: var(--text);
            color: #fff;
            border-color: var(--text);
            opacity: 0.7;
            transition: 0.2s;
        }

.Afspraak > div > .btn-group {
    color: var(--text)
}

em {
    padding-left: 10px;
}

button.btn.btn-primary.btn-circle.btn-lg.modules, .btn.btn-primary.btn-circle.btn-lg.modules:hover, .btn.btn-primary.btn-circle.btn-lg.modules:active {
    position: fixed;
    top: 0px;
    left: 10px;
    height: 100px;
    width: 220px;
    font-size: 25px;
    border-radius: 0px;
    padding: 0;
    color: transparent;
    background-color: transparent
}

/*
    FORMS
*/

.form-group input:not([type="button"]) {
    background-color: #F2F2F2;
    border: 1px solid#F2F2F2 !important;
    padding-left: 14px;
}

    .form-group input:not([type="button"]):focus, .infotable .text-box:focus .form-group, .form-group input:not([type="button"]):focus::-webkit-input-placeholder {
        color: #000 !important;
        background-color: #fff;
        opacity: 1;
    }

#SoftRulesPanel .form-control {
    margin-bottom: 5px !important;
}

input::-webkit-input-placeholder {
    padding-left: 5px;
}

.infotable {
    color: #031C34
}

#select-bedrijf {
    width: 185px;
    background-color: #F2F2F2
}

.slider-track-low, .slider-track-high, .slider-selection {
    background: #E9DEE9 !important;
    box-shadow: none !important;
}

.slider-handle {
    background: var(--text);
    margin-top: -9px !important;
}

.slider-track {
    height: 2px !important;
}

/*
    PAGINATION
*/

.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
    color: var(--text);
    background-color: #eee;
    border-color: #ddd
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: var(--text);
    border-color: var(--text)
}

/*
    DATEPICKER
*/

.datepicker.dropdown-menu {
    max-height: 100%;
    opacity: 1;
    overflow: visible;
    visibility: visible;
    transition: none;
    top: 0;
}

.datepicker td.active,
.datepicker td.active:hover {
    color: #fff;
    background-color: var(--text);
    background-image: none;
    border-radius: 10px
}

.datepicker td span.active {
    color: #fff;
    background-color: var(--text);
    background-image: none;
    border-radius: 10px
}

.datepicker:before {
    content: '';
    display: inline-block;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #fff;
    border-bottom-color: #EEEEEE;
    position: absolute;
    top: -7px;
    left: 6px;
}

.datepicker:after {
    content: '';
    display: inline-block;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff; /* Arrow color datepicker*/
    position: absolute;
    top: -6px;
    left: 7px;
}

.dropdown-menu .datepicker {
    background-color: #eee;
}

/*
    WAIT&.waitS
*/

.background-drop, .modal-backdrop.in, .ui-widget-overlay {
    background-color: rgba(148, 148, 148, 0.25);
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0px;
    backdrop-filter: blur(2px);
    -webkit-filter: blur(10px);
    opacity: 1;
}

.modal {
    text-align: center;
}

@media screen and (min-width: 768px) {
    .modal:before {
        display: inline-block;
        vertical-align: middle;
        content: " ";
        height: 50%;
    }
}

.modal-dialog {
    display: inline-block;
    text-align: left;
}

.wait {
    background-image: url('images/loader_nyenborgh1.css.gif');
    background-size: 150px
}

.modal-content {
    -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    border: 1px solid #cfcfcf;
    overflow: initial
}

.modal {
    overflow: auto
}

#TijdschrijvenDialog {
    height: auto !important
}

.popover-content > h3, .popover-body > h3 {
    display: none;
}

/*
    TABLES
*/

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    line-height: 1.42857;
    vertical-align: top;
    padding: 12px;
}

.table > tbody > tr > td {
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
}

#Memotable > tbody > tr > td,
#Agendatable > tbody > tr > td {
    white-space: nowrap;
    max-width: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
    background-color: var(--blue-highlight-light) !important;
    color: var(--text);
    transition: all .3s ease-in-out;
}

.table-striped > tbody > tr {
    border-left: 3px solid #fff;
}

    .table-striped > tbody > tr:nth-child(odd) > td, tr.found {
        background-color: #fff;
    }

.table-hover tr:hover > td a {
    color: #4B444B;
}

.table-hover > tbody > tr {
    border-left: 3px solid #fff
}

    .table-hover > tbody > tr:hover {
        border-left: 3px solid var(--text)
    }

.tab-pane > .table-responsive {
    padding: 10px
}

tbody {
    border: none
}

.SoftRulesPanel table td {
    height: 30px;
}

@media (max-width: 1300px) {
    .table-responsive {
        margin-bottom: 0;
    }

    .top-title {
        display: none
    }
}

.infotable tr td:nth-child(odd) {
    text-align: left;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.infotable tr td:nth-child(even) {
    padding-left: 5px;
    border-bottom: 1px #fff solid;
}

.infotable .left {
    width: 20%;
    min-width: 175px;
    font-weight: bold;
}

    .infotable .left b {
        font-size: larger;
    }

.infotable .right {
    width: 30%;
}

.infotable .text-box {
    background-color: #F2F2F2;
    border: 1px solid #F2F2F2;
    padding: 2px 2px 2px 10px;
    margin-top: 2px;
}

.infotable input {
    border: solid 1px #AAA;
    padding: 2px;
    margin-top: 2px;
}

.infotable select {
    border: solid 1px #AAA;
    padding: 2px;
    margin-top: 2px;
}

.infotable textarea {
    border: solid 1px #AAA;
    padding: 2px;
    margin-top: 2px;
}

.infotable.form tr td:nth-child(even) {
    border-bottom: 0px #ccc solid;
}

.infotable.form.dash-right tr td:nth-child(even) {
    border-bottom: 0px #ccc solid;
}

/*
    ON/OFF SLIDER
*/

.onoffswitch {
    position: relative;
    width: 80px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.onoffswitch-checkbox {
    display: none;
}

.onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 25px;
}

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

    .onoffswitch-inner:before, .onoffswitch-inner:after {
        display: block;
        float: left;
        width: 50%;
        height: 26px;
        padding: 0;
        line-height: 26px;
        font-size: 14px;
        color: white;
        box-sizing: border-box;
    }

    .onoffswitch-inner:before {
        content: "Aan";
        padding-left: 10px;
        background-color: #0C8303;
    }

    .onoffswitch-inner:after {
        content: "Uit";
        padding-right: 10px;
        background-color: #FF4C50;
        text-align: right;
    }

.onoffswitch-switch {
    display: block;
    width: 20px;
    height: 20px;
    margin-top: 2.5px;
    margin-bottom: 2.5px;
    margin-right: 5px;
    background: #fff;
    position: absolute;
    top: 2px;
    bottom: 0;
    right: 50px;
    border-radius: 25px;
    transition: all 0.3s ease-in 0s;
}

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

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

/*
    OTHER
*/

#theform > .panel-body > .row > div {
    vertical-align: middle
}

.weather-image {
    background-image: url('images/rotterdam.jpg');
    background-size: cover;
    -khtml-opacity: .70;
    -moz-opacity: .70;
    -ms-filter: "alpha(opacity=70)";
    filter: alpha(opacity=70);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.7);
    opacity: .70;
    min-height: 240px;
}

.rowActive {
    background-color: #000000 !important;
    color: #fff;
}

    .rowActive td {
        background-color: #000000 !important;
    }


.module-wrapper {
    width: 100%;
    color: #fff;
    display: inline-block;
    padding: 5px;
    border-radius: 10px;
    background-color: var(--text) !important;
    border: 1px solid #470A5A;
    padding-top: 60px;
    padding-bottom: 20px;
    margin-bottom: 10px;
}


div > .module-wrapper {
    margin-left: unset;
    margin-right: unset
}

.module-wrapper:before {
    position: absolute;
    font-style: inherit;
    font-size: 18pt;
    font-weight: bold;
    top: 15px;
    left: 35px;
    content: "Welkom terug!";
}

.module-wrapper > a > div {
    width: 200px;
    padding-right: 0;
}

    .module-wrapper > a > div > div {
        background-color: var(--text) !important;
        border: 1px solid var(--text);
        position: relative;
        margin: 0;
        padding: 2px;
    }

.module-wrapper > a:first-child > div > div {
    border: 1px solid #fff
}

.module-wrapper > a > div > div:hover {
    background-color: #7D3C7E !important;
    border: 1px solid white;
    position: relative;
    margin: 0;
    padding: 2px;
}

.module-wrapper > a > div > div > div > div:nth-of-type(2) {
    display: none;
}

.module-wrapper > a > div > div > div > div {
    height: 100%;
}

.module-wrapper > a > div > div > div > .col-lg-8 {
    width: 100%
}

.module-wrapper > a > div > div > div > div > .title {
    padding-left: 5px;
    margin: 2px;
    font-size: 18px;
    font-weight: bold;
    text-align: center
}

.module-wrapper > a > div > div > div > div > .ico-tile {
    font-size: 25pt;
}


.list-group {
    margin: 0;
}

    .list-group > a {
        background-color: #fff;
    }

.list-group-item {
    color: #7F7F7F !important;
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #fff;
    border: 0px solid #ddd;
    border-left: 2px solid #fff
}

    .list-group-item:hover, .list-group-item:focus {
        border-left: 2px solid var(--text)
    }

pre {
    padding: 10px;
    font: inherit;
}

.popover {
    padding-top: 25px;
    color: #000000;
    background-color: #F9F9F9;
    border: 1px #E7E7E7 solid;
    box-shadow: none;
}

.popupopen {
    color: var(--secondary-color);
}

.popover.bottom .arrow {
    margin-left: 8px;
}

h3 > .popover-title {
    position: relative;
    background-color: red;
    height: 200px;
    width: 399px;
}

.tile {
    transition: 0.2s;
}

    .tile:active, .tile:focus, .tile::after {
        transform: scale(0.96);
        -webkit-box-shadow: 0px 0px 32px -28px rgba(0,0,0,0.75) !important;
        -moz-box-shadow: 0px 0px 32px -28px rgba(0,0,0,0.75) !important;
        box-shadow: 0px 0px 32px -28px rgba(0,0,0,0.75) !important;
    }

    .tile.blueDark {
        background-color: var(--primary-color);
    }

    .tile.greenDark {
        background-color: var(--secondary-color);
    }

    .tile.orangeDark {
        background-color: var(--dark-orange-color);
    }

    .tile.orange {
        background-color: var(--orange-color);
    }

    .tile.darken {
        background: #bfbfbf;
    }

.blockcat-image, i[class^="tocolor-"] {
    display: none !important
}

.title, .value {
    padding: 5px;
    padding-left: 20px
}

.h-closed {
    padding-bottom: 10px;
    margin-bottom: 0px
}

.h-open {
    top: 20px;
    padding-bottom: 0px;
    margin-bottom: 0px
}

.mce-menu-item:hover, .mce-menu-item.mce-selected, .mce-menu-item:focus {
    text-decoration: none;
    color: #fff;
}

.model-header-email {
    position: fixed;
    width: calc(100% + 1px);
    height: 50px;
    left: -1px;
    color: #fff;
    background-color: var(--text);
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.modal-header {
    color: #fff;
    background-color: var(--text);
    margin: -1px;
    padding: 15px;
    border: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px
}

.close, .close:hover {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.nospace {
    padding: 0px;
}

.space {
    padding: 15px 15px 15px 15px;
}

.goup-container {
    background-color: var(--secondary-color);
    width: 50px !important;
    height: 50px !important;
    padding-top: 8px;
    padding-left: 13px;
}

    .goup-container:before {
        font-family: 'fontawesome', sans-serif;
        font-weight: 100;
        font-size: 25px;
        top: 20px;
        color: #fff;
        content: "\f062";
        -webkit-font-smoothing: antialiased;
    }

/*
    ACCOUNT/LOGIN
*/
.login-small {
    display: none;
}

#login-left {
    width: 100%;
    animation: bgcolor 10s forwards infinite;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url(images/voc_background.svg);
    height: 100vh;
}

#login-right {
    width: 100%;
    margin: 0 auto;
    height: auto !important;
    display: flex;
    justify-content: center;
    margin-top: -75px;
    top: 215px;
}

#login-main {
    position: relative;
    color: #000;
    width: 400px;
    height: auto;
    background-size: 240px;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 40px;
    padding: 20px;
    margin: auto;
    border: 1px solid #EBEBEB;
    border-radius: 10px;
    background-color: #FEFEFE;
    box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.1);
    vertical-align: bottom;
}

    #login-main::before {
        font-size: 14pt;
        font-weight: 800;
        content: "Login";
        display: inline-block;
    }


    #login-main > form#loginForm {
        margin-top: 10px;
    }

        #login-main > form#loginForm::before {
            font-size: 10pt;
            color: #7F7F7F;
            content: "Log hieronder in en vraag gemakkelijk uw polissen aan. Heeft u geen account en wenst u er een te krijgen. Neem dan contact met ons op. We helpen u graag verder.";
            display: inline-block;
            padding-top: 10px;
            padding-bottom: 20px;
            font-family: 'Nunito Sans', sans-serif;
        }

.login {
    position: relative;
    width: 100%;
    background-color: #Fff;
}

form#loginForm > .form-group > .form-control {
    width: 100% !important
}

.infotable .right {
    padding: 7px;
    margin-bottom: 9px;
}

.infotable > tbody > tr > td > span > b {
    color: #031C34
}

#login-main > form > .btn-primary {
    font-weight: 400;
    width: 100%;
    border: none;
    background-color: var(--secondary-color);
    box-shadow: none !important;
    padding: 7px !important;
}

#login-main > form > .btn-default {
    color: #7F7F7F;
    font-weight: unset;
    text-decoration: underline;
    width: 100%;
    background-color: transparent;
    border: none;
    box-shadow: none !important;
    padding: 7px !important;
    transition: 0.3s;
}

    #login-main > form > .btn-default:hover {
        text-decoration: underline
    }

.placeholder span {
    position: absolute;
    padding-top: 12px;
    z-index: 1;
    cursor: text;
    pointer-events: none;
    color: #999;
    line-height: 17px;
    margin-left: 2px;
    padding-left: 20px;
}

.form-control, .text-box, .connection-configuration input[type="password"] {
    height: 40px;
    box-shadow: none;
    border: 1px solid #F2F2F2;
    transition: width 2s;
    border-radius: 5px;
}

    .form-control:focus, .infotable .text-box:focus, .text-box:focus {
        background-color: #fff;
        -webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,.0), 0 0 0px rgba(0,0,0.0);
        box-shadow: inset 0 0px 0px rgba(0,0,0,.0), 0 0 8px rgba(0,0,0,.0);
        border: 1px solid #F2F2F2 !important;
        transition: width 2s;
        outline: none;
    }

#login-logo {
    top: 10px;
    left: calc(50% - 200px);
    width: 400px;
    height: 120px;
    background-image: url(images/logos/smb-white.png);
    background-size: 105px;
    background-repeat: no-repeat;
    background-position: center;
    padding: 20px;
    margin: auto;
    vertical-align: middle;
    cursor: pointer;
}

#login-logo-small {
    top: 5px;
    left: 0;
    height: 150px;
    background-image: url('images/logos/SMB-logo.png');
    background-size: 180px;
    background-repeat: no-repeat;
    background-position: center;
}

@media only screen and (max-width:1000px) {
    #login-title {
        display: inline
    }
}

@media only screen and (max-width: 768px) {
    #login-main, #login-title {
        display: contents !important
    }

    #login-title {
        display: contents !important
    }

    .sidebar-button-container {
        padding: 10px 0 0px 10px;
        text-align: left;
    }

    .navbar-light, .navbar-default {
        background-color: #fff
    }
}

/*
    NIEUWS
*/

#archiefKnop.btn {
    height: 25px;
}

.text-muted > a {
    color: #000;
    font-style: normal;
    left: 0 !important;
    margin-left: 10px !important;
}

.pull-left.text-muted.small {
    font-style: normal !important;
    color: #7F7F7F !important;
    padding: 0px !important
}

.collapse-group > p {
    padding-left: 10px !important;
}

/*
    NATIVE AZURE FIX
*/

#Details > div > .space {
    padding: 0;
}

#NativeAzureBlock > .btn-toolbar {
    padding: 0 !important;
}

#NativeAzureBlock > .panel {
    box-shadow: unset
}

    #NativeAzureBlock > .panel > .panel-body {
        margin-top: 2px;
        padding: 0
    }

.load_texts {
    position: relative;
    width: 100%;
}

.load_text {
    position: absolute;
    width: 100%;
    text-align: center;
}

.text_1 {
    opacity: 1;
}

.text_2 {
    opacity: 0;
}

ul.tab {
    background-color: #fff !important;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ebebeb;
    height: 43.18px;
}

    ul.tab li {
        float: left;
    }

        ul.tab li a {
            display: inline-block;
            color: black;
            text-align: center;
            font-size: 14px !important;
            background-color: inherit !important;
            padding: 11px 18.40px;
            text-decoration: none;
            transition: 0 !important;
        }

            ul.tab li a:focus, .tab .active {
                background-color: #fff;
            }

.tabcontent {
    display: none;
    padding: 6px 12px;
    border-bottom: none;
}

a.tablinks {
    height: 43.18px;
    font-weight: 500;
}

#SearchOptions {
    color: #7F7F7F !important;
}

    #SearchOptions .list-group-item:first-child,
    #SearchOptions .list-group-item:last-child {
        border-radius: 0;
    }

    #SearchOptions .fa-link {
        font-family: 'Font Awesome 5 Pro', sans-serif !important;
        font-weight: 900 !important;
    }

#KnopAnnuleren, input[type="button"][name="Cancel"] {
    background-color: transparent;
    color: var(--text);
}

.panel .row .col-xs-5 {
    font-weight: bold;
}

.panel .row .col-xs-7:not(.form-group) {
    border: none !important;
}

#Screenbuilder .row .col-xs-5 {
    line-height: 40px;
}

#Screenbuilder .row .col-xs-7:not(.form-group) {
    min-height: 40px;
    margin-bottom: 15px;
    line-height: 40px;
}

#Screenbuilder #OpslaanPanel .panel-heading,
#Screenbuilder #OpslaanAgendaPanel .panel-heading {
    display: none;
}

#Screenbuilder #OpslaanPanel,
#Screenbuilder #Opslaan,
#Screenbuilder #OpslaanAgendaPanel,
#Screenbuilder #OpslaanAgenda {
    background-color: transparent;
    box-shadow: none;
}

    #Screenbuilder #Opslaan .col-md-6,
    #Screenbuilder #OpslaanAgenda .col-md-6 {
        text-align: right;
        padding-right: 0;
    }

        #Screenbuilder #Opslaan .col-md-6 .row,
        #Screenbuilder #OpslaanAgenda .col-md-6 .row {
            border: none !important;
            width: auto;
            display: inline-block;
        }

#WerkvoorraadContent ~ .panel-footer .btn {
    width: auto !important;
}

.dataTables_wrapper .dt-bootstrap .col-md-6 {
    line-height: 45px;
}

#NativeAzure .table > thead > tr > td {
    border-bottom: 2px solid #ddd;
    font-weight: bold;
}

#attachmentOptionContainer .btn {
    line-height: 26px;
}

.dataTables_paginate {
    padding-right: 10px;
}

.form-group.bb-question .btn {
    margin-bottom: 10px;
}

.onoffswitch > input[type="checkbox"]:disabled ~ .onoffswitch-label {
    opacity: 0.3;
}

/* MAILBOX */
.mailbox .input-group-addon.left,
.mailbox .input-group-addon.right,
.mailbox input,
.mailbox .form-group input:not([type="button"]) {
    border: none !important;
}