@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');

body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    background-color: #EEF1F6;
    font-size: 10pt;
    -webkit-font-smoothing: antialiased
}

#wrapper {
    max-width: 1600px;
    margin: 0;
}

.sticker {
    margin-left: 1325px;
}

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

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

/* Track */
::-webkit-scrollbar-track {
    border-radius: 0px;
}

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

/*
    ICON&FONTS
*/

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

h1, h2, h3, h4, h5, h6 {
    font-family: 'Source Sans Pro', sans-serif;
}

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

.text-muted > a {
    color: #fff !important;
}

.top-title > a {
    top: 2px;
    color: #4B444B !important;
    font-size: 18pt;
}

/*
    NAVBAR TOP
*/

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

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

a.navbar-brand {
    color: #3C4858 !important
}

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

/*
    NAVBAR SIDE
*/

#side-menu > li > .nav > li > a:hover, #side-menu > li > .nav > li > a:focus, #side-menu > li > .nav > li > a:active {
    background-color: #d8d8d8;
}

@media only screen and (min-width:768px) {
    div.navbar-default.navbar-static-side.sidebar-collapse {
        top: 4px;
        /* Firefox */
        height: -moz-calc(100% - 51px) !important;
        /* WebKit */
        height: -webkit-calc(100% - 51px) !important;
        /* Opera */
        height: -o-calc(100% - 51px) !important;
        height: calc(100% - 51px) !important;
        overflow-y: auto;
        position: fixed;
    }
}

@media only screen and (max-width:768px) {
    div.navbar-default.navbar-static-side {
        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 {
        z-index: 10
    }
}
/*
    PANELS
*/

.panel {
    border-radius: 0;
    -webkit-box-shadow: 0px 0px 32px -28px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 32px -28px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 32px -28px rgba(0,0,0,0.75);
}


.panel-default > .panel-heading {
    font-size: 18px;
    background-color: #fff;
    color: #0080C3;
    padding-top: 12px;
    padding-bottom: 10px;
    left: 20px;
    margin-right: 0;
    border: 0;
    padding-left: 15px;
    height: auto !important;
}

    .panel-default > .panel-heading a {
        color: #0080C3
    }

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

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

.panel.panel-default.Details > .panel-heading {
    background-color: #EBEBEB
}

.panel.panel-default.Details > .panel-body {
    background: linear-gradient(180deg, #EBEBEB 40%, #fff 40%, #fff 100%, #EBEBEB 60%);
}

    .panel.panel-default.Details > .panel-body > div > .space, .panel.panel-default.Details > .panel-body > #Details > div > .space {
        background-color: #fff;
        padding-top: 0px;
        padding-bottom: 0px;
    }

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

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

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

.place-left {
    height: 40px !important;
    margin-top: -10px !important;
}

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

.panel-heading.mains {
    background-color: #EBEBEB
}

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

.panel-default {
    border: solid 0px #e0e6ed;
    background-color: #EEF1F6;
}

    .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: 0px;
    border-bottom-right-radius: 0px;
}

/*
    TABS
*/

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

ul.tab li a {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px
}

/*
    NAVBAR
*/

.nav-tabs > li > a {
    border-radius: 0px 0px 0 0;
}

.navbar-default .navbar-toggle {
    border-color: #fff;
}

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

.navbar-static-top, .navbar.fixed-top {
    height: 55px;
    padding-top: 3px;
}

.navbar-light, .navbar-default {
    border-bottom: 1px solid #e0e0e0
}

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

ul.navbar-top-links a {
    color: #3C4858;
    background-color: transparent
}

.navbar-top-links a:hover, .navbar-top-links a:focus {
    color: #3C4858;
    background-color: transparent
}

.nav > li > a:hover, .nav > li > a:focus, .nav > li > a:active {
    background-color: transparent
}

    .nav > li > a:focus > .fa-caret-down, .nav > li > a:active > .fa-caret-down {
        color: #499B4D;
    }

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    background-color: transparent
}

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

    .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-menu > li > a:active {
        color: #fff;
        text-decoration: none;
        background-color: #3C4858;
        border-radius: 0px;
    }

.dropdown-menu {
    content: "\e133";
    margin-top: 7px;
    -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,.0);
    box-shadow: 0 0px 0px rgba(0,0,0,.0)f;
    border-radius: 0px;
    border: 1px solid #c4c4c4
}



.navbar-fixed-top, .navbar-static-top, .navbar.fixed-top, .btn-primary .badge {
    background: linear-gradient(270deg, #e8e8e8 30px, #fff 95%);
}

/*
    BUTTONS
*/

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

.btn {
    background-color: #0080C3;
    border-color: #0080C3;
    border: none;
    color: #fff;
    border-radius: 0px;
    border: 1px solid #0080C3;
    padding: 7px 7px 7px 7px !important;
    box-shadow: none !important;
}

.btn-default:focus, .btn-primary:focus {
    color: #0080C3;
    background-color: #fff;
    border: 1px solid #0080C3;
    outline: none;
    opacity: 0.4;
    transform: scale(0.900);
    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-primary:hover, .btn-primary:active {
    color: #0080C3;
    background-color: #fff;
    border: 1px solid #0080C3;
}

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: #0080C3;
        border: 1px solid #0080C3;
        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: #0080C3;
    border: 1px solid #0080C3;
    color: #0080C3;
    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: #0080C3;
}

.badge {
    color: #fff;
    background-color: #0080C3;
}

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

.badge.blockTotalRecords {
    color: #fff;
    background-color: #0080C3
}

.input-group-btn > .btn-default {
    border: 1px solid #222E3A;
    background-color: #0080C3;
    color: #fff
}

    .input-group-btn > .btn-default:hover, .btn-primary:hover, .btn-primary:active {
        border: 1px solid #0080C3;
        background-color: #fff;
        color: #0080C3
    }

.sidebar-button-container > a {
    background-color: #EBEAEA;
    color: #0080C3
}

    .sidebar-button-container > a:hover {
        background-color: #EBEAEA;
        color: #0080C3;
        border-color: #0080C3
    }

    .sidebar-button-container > a:focus {
        background-color: #EBEAEA;
        color: #0080C3;
        border-color: #0080C3;
        opacity: 0.7;
        transition: 0.2s;
    }

em {
    padding-left: 10px;
}


/*
    PAGINATION
*/

.pagination {
    border-radius: 0px;
}

    .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
        color: #0080C3;
        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: #0080C3;
        border: #DDDDDD solid 2px;
    }

/*
    DATEPICKER
*/

.datepicker td.active,
.datepicker td.active:hover {
    color: #ffffff;
    background-image: -moz-linear-gradient(top, #0080C3, #0080C3);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0080C3), to(#0080C3));
    background-image: -webkit-linear-gradient(top, #0080C3, #0080C3);
    background-image: -o-linear-gradient(top, #0080C3, #0080C3);
    background-image: linear-gradient(to bottom, #0080C3, #0080C3);
    border-color: #0080C3 #0080C3 #0080C3;
}

.datepicker td span.active {
    color: #ffffff;
    background-image: -moz-linear-gradient(top, #0080C3, #0080C3);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0080C3), to(#0080C3));
    background-image: -webkit-linear-gradient(top, #0080C3, #0080C3);
    background-image: -o-linear-gradient(top, #0080C3, #34A9b4);
    background-image: linear-gradient(to bottom, #0080C3, #0080C3);
    border-color: #0080C3 #0080C3 #0080C3;
    *background-color: #0080C3;
}

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

/*
    WAIT&MODALS
*/

.background-drop {
    background-color: rgba(0, 0, 0, 0.25);
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0px;
    opacity: 0.8
}

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

.loader {
    padding-top: 15%;
}

.modal-dialog {
    position: relative;
    border: 3px;
}

.modal-content {
    border-radius: 0px;
    -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;
}

.modal {
    overflow: auto
}

/*
    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-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
    background-color: #efefef;
    color: #000;
    transition: all .3s ease-in-out
}

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

.infotable tr td:nth-child(even) {
    border-bottom-color: #E0E0E0
}

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

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

/*
    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 #E0E0E0;
    border-radius: 16px;
}

.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: 15px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        box-sizing: border-box;
    }

    .onoffswitch-inner:before {
        content: "Aan";
        padding-left: 10px;
        background-color: #EEEEEE;
        color: #133F61;
    }

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

.onoffswitch-switch {
    display: block;
    width: 25px;
    margin: 0.5px;
    background: #A1A1A1;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 50px;
    border: 2px solid #E0E0E0;
    border-radius: 16px;
    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: 0px;
    background-color: #133F61;
}

/*
    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: "progid:DXImageTransform.Microsoft.Alpha(opacity=0.7)";
    filter: alpha(opacity=70);
    opacity: .70;
    min-height: 240px;
}

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

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

.modules, .modules:hover, .modules:active, .modules:focus {
    position: fixed;
    color: #0080C3 !important;
    background-color: #fff;
    border: none;
    left: 205px;
}

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

pre {
    border-radius: 0px;
    padding: 10px
}

.popover {
    -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
    -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
    border-radius: 0px;
}

.tile {
    border-radius: 0px;
    transition: 0.2s;
}

    .tile:active, .tile:focus, .tile::after  {
        transform: scale(1.06);
        -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;
    }

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

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

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

.h-open {
    border-radius: 0px;
    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;
    background-color: #0080C3 !important
}

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

.modal-header {
    color: #fff;
    background-color: #0D4266;
    margin: -1px;
    padding: 15px;
    border: 0;
}

.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: #0080C3;
    border-radius: 0px !important
}


.well {
    background-color: #fff;
    border-left: 5px solid #0080C3;
    border-radius: 0px
}

.alert {
    border-radius: 0px
}

/*
    ACCOUNT/LOGIN
*/

#login-left {
    position: fixed;
    width: 100%;
    background-position: left;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    background-color: #0080C3;
}

#login-right {
    width: 100%;
    margin: 0 auto;
    height: 50vh !important;
    display: flex;
    justify-content: center;
    opacity: 0.985
}

#login-main {
    position: relative;
    width: 500px;
    height: 350px;
    background-color: #fff;
    background-image: url('images/logos/zicht_logo.png');
    background-size: 180px;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 35px;
    border-radius: 0.25rem;
    padding: 40px;
    margin: auto;
    vertical-align: middle;
    padding-top: 150px;
    border: 1px solid #EBEBEB;
    border-radius: 0.25rem;
    background-color: #FEFEFE;
    box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.1);
    opacity: 0.99
}

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

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

form#loginForm > .btn.btn-primary {
    background-color: #00A765
}

    form#loginForm > .btn.btn-primary:hover, .btn.btn-primary:focus {
        color: #fff;
    }

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

.form-control, .text-box {
    height: 40px;
    border-radius: 0;
    box-shadow: none;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #DDDDDD;
    transition: width 2s;
    max-width: unset;
}

    .form-control:focus, .infotable .text-box:focus, .text-box:focus {
        -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,.0), 0 0 0 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-bottom: 1px solid #0080C3 !important;
        transition: width 2s;
        outline: none;
    }

#login-logo {
    background-image: none
}


#login-logo-small {
    height: 150px;
    background-image: url('images/logos/zicht_logo.png');
    background-size: 200px;
    background-repeat: no-repeat;
    background-position: center 40px;
}

.wait_login {
    background-image: url('images/zicht1.css.gif');
    background-size: 35px;
    background-repeat: no-repeat
}

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

    #login-main {
        width: 100%
    }
}

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

    #login-title {
        display: contents !important
    }

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

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


/*
    NATIVE AZURE
*/

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

    #NativeAzureBlock > .panel > .space {
        padding: 0px;
    }


/*
    LEGACY
*/

.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 {
    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;
            padding: 11px 18.40px;
            text-decoration: none;
            transition: 0.3s;
        }

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

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

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

a.tablinks {
    height: 43.18px;
}

div#consumentaccount_dialog .form-group {
    margin: 1.5rem 0;
    height: auto !important;
}

.select2-selection.select2-selection--single.text-box {
    height: 40px;
    margin: 0;
    border-radius: 0px;
    border: 1px solid #DDDDDD;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 2px;
    right: 10px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 100%;
    line-height: 35px;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #0080C3;
}

span.select2.select2-container {
    width: 100% !important;
}