/*  libs\css\70_iframe.css  */
.iframe-blanket {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0, 0, 0, .8);
    z-index: 10000;
    height: 100%;
}

.iframe-blanket .iframe-holder {
    position: relative;
    width: 100%;
    max-width: 700px;
    height: 650px;
    max-height:100%;
    margin: -325px auto 0 auto;
    top: 50%;
    background: #FFF;
    border-radius: 5px;
    border: solid 1px #CCC;    
    overflow: hidden;
}

@media(max-height: 650px) {
    .iframe-blanket .iframe-holder {
        margin: 0 auto 0 auto;
        top: 0px;
        height:100%;
    }
}


    .big .iframe-holder {
        max-width: 1000px;
        height: 90%;
        margin: 0 auto 0 auto;
        top: 5%;
    }



.iframe-blanket .iframe-holder iframe {
    width: 100%;
    height: 650px;
    max-height: 100%;
}

    .big .iframe-holder iframe {
        height: 100%;
    }

    .iframe-blanket .closebutton {
        position: relative;
        width: 20px;
        height: 20px;
        top: 20px;
        right: 20px;
        float: right;
        color: #ffffff;
        font-size: 20px;
        cursor: pointer;
    }

    .iframe-holder iframe {
    }

    @media (max-width: 767px) {
        .iframe-blanket {
            padding: 20px;
        }

            .iframe-blanket .iframe-holder {
                top: 50px;
                margin: 0 auto 0 auto;
                width: 100%;
                max-width: 100%;
                height: 85%;
            }

                .iframe-blanket .iframe-holder iframe {
                    width: 100%;
                    height: 100%;
                }
    }

    @media(max-width: 420px) {
        .knop.inIframeWide {
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .iframemaintd .form-group .col-xs-3, .iframemaintd .form-group .col-xs-9 {
            width: 100%;
            padding-bottom: 8px;
        }
    }

    #iframetable th {
        background-color: #662d91;
        color: #FFF;
        height: 40px;
        padding-left: 20px;
        padding-right: 20px;
    }

    #iframetable td.footer {
        background-color: #ecedf0;
        height: 40px;
        text-align: right;
        padding-right: 20px;
        padding-left: 20px;
    }

    #iframetable .iframemaintd {
        padding: 20px;
    }

    #iframetable .closebutton {
        float: left;
        color: #777;
    }

    #iframefooter .knop-breed {
        display: inline-block;
        background-color: #662d91;
        color: #FFF;
    }

        #iframefooter .knop-breed * {
            color: #FFF;
        }
/*  libs\css\versie8en9.css  */
.form-group .formkolom .form-group label {
    display: none;
}

.form-group .formkolom .form-group {
    margin: 0px;
}

.form-group .form-group .formkolom{
    width: 100%;
    padding: 0px;
}




.smartbutton,
.smartbuttons .btn.btn-grey,
.smartbuttons .btn.dropdown-toggle,
.smartbuttons .btn.dropdown-toggle:focus {
    color: #393939;
    background-color: #eee;
    display: inline-block;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border-radius: 3px;
    border: solid 1px #cccccc;
    padding: 0px;
   margin:0px;
}

    .smartbuttons .smartbutton,
    .smartbuttons .btn.btn-grey,
    .smartbuttons .btn.dropdown-toggle,
    .smartbuttons .btn.dropdown-toggle:focus,
    .btn-group.smartbuttons {
        margin-bottom: 0px;
        margin-top: 0px;
        border-radius: 0px;
        
       
    }




/*.btn-group.smartbuttons {
    border-bottom: solid 1px #cccccc;
}*/



.btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group {
    margin-left: 0px;
}





.dropdown-menu .smartbutton,
.smartHorizontal .smartVertical .smartbutton,
.smartbutton{
    height: 32px;
    line-height: 32px;
}


.smartVertical .smartbutton {
    padding: 0px;
    height: 50px;
    line-height: 50px;
}

.smartHorizontal .dropdown-toggle,
.smartHorizontal .smartbuttons .btn.dropdown-toggle {
    background-color: #FFF;
    border: 1px solid rgba(197,214,222,.7);
}


.smartbutton.brown .font-icon,
.smartbutton.brown .glyphicon,
.smartbutton.brown .fa {
    color: #cd6724;
}

.smartbutton.brown.opened a,
.smartbutton.brown.opened > span,
.smartbutton.brown.opened.with-sub > span,
.smartbutton.brown .with-sub > span {
    border-left-color: #cd6724;
}

.smartbutton.green .font-icon,
.smartbutton.green .glyphicon,
.smartbutton.green .fa {
    color: #46c35f;
}

.smartbutton.green.opened a,
.smartbutton.green.opened > span,
.smartbutton.green .with-sub > span {
    border-left-color: #46c35f;
}

.smartbutton.gold .font-icon,
.smartbutton.gold .glyphicon,
.smartbutton.gold .fa {
    color: #f29824;
}

.smartbutton.gold.opened a,
.smartbutton.gold.opened > span,
.smartbutton.gold .with-sub > span {
    border-left-color: #f29824;
}

.smartbutton.blue .font-icon,
.smartbutton.blue .glyphicon,
.smartbutton.blue .fa {
    color: var(--kopkleur);
}

.smartbutton.blue.opened a,
.smartbutton.blue.opened > span,
.smartbutton.blue .with-sub > span {
    border-left-color: var(--kopkleur);
}

.smartbutton.purple .font-icon,
.smartbutton.purple .glyphicon,
.smartbutton.purple .fa {
    color: #ac6bec;
}

.smartbutton.purple.opened a,
.smartbutton.purple.opened > span,
.smartbutton.purple .with-sub > span {
    border-left-color: #ac6bec;
}

.smartbutton.orange-red .font-icon,
.smartbutton.orange-red .glyphicon,
.smartbutton.orange-red .fa {
    color: #ff561c;
}

.smartbutton.orange-red.opened a,
.smartbutton.orange-red.opened > span,
.smartbutton.orange-red .with-sub > span {
    border-left-color: #ff561c;
}

.smartbutton.grey .font-icon,
.smartbutton.grey .glyphicon,
.smartbutton.grey .fa {
    color: #adb7be;
}

.smartbutton.grey.opened a,
.smartbutton.grey.opened > span,
.smartbutton.grey .with-sub > span {
    border-left-color: #adb7be;
}

.smartbutton.red .font-icon,
.smartbutton.red .glyphicon,
.smartbutton.red .fa {
    color: #fa424a;
}

.smartbutton.red.opened a,
.smartbutton.red.opened > span,
.smartbutton.red .with-sub > span {
    border-left-color: #fa424a;
}

.smartbutton.aquamarine .font-icon,
.smartbutton.aquamarine .glyphicon,
.smartbutton.aquamarine .fa {
    color: #21a788;
}

.smartbutton.aquamarine.opened a,
.smartbutton.aquamarine.opened > span,
.smartbutton.aquamarine .with-sub > span {
    border-left-color: #21a788;
}

.smartbutton.magenta .font-icon,
.smartbutton.magenta .glyphicon,
.smartbutton.magenta .fa {
    color: #b348ae;
}

.smartbutton.magenta.opened a,
.smartbutton.magenta.opened > span,
.smartbutton.magenta .with-sub > span {
    border-left-color: #b348ae;
}

.smartbutton.blue-dirty .font-icon,
.smartbutton.blue-dirty .glyphicon,
.smartbutton.blue-dirty .fa {
    color: #1b99cf;
}

.smartbutton.blue-dirty.opened a,
.smartbutton.blue-dirty.opened > span,
.smartbutton.blue-dirty .with-sub > span {
    border-left-color: #1b99cf;
}

.smartbutton.coral .font-icon,
.smartbutton.coral .glyphicon,
.smartbutton.coral .fa {
    color: #fe664c;
}

.smartbutton.coral.opened a,
.smartbutton.coral.opened > span,
.smartbutton.coral .with-sub > span {
    border-left-color: #fe664c;
}

.smartbutton.pink-red .font-icon,
.smartbutton.pink-red .glyphicon,
.smartbutton.pink-red .fa {
    color: #f5465e;
}

.smartbutton.pink-red.opened a,
.smartbutton.pink-red.opened > span,
.smartbutton.pink-red .with-sub > span {
    border-left-color: #f5465e;
}

.smartbutton.pink .font-icon,
.smartbutton.pink .glyphicon,
.smartbutton.pink .fa {
    color: #e84f9a;
}

.smartbutton.pink.opened a,
.smartbutton.pink.opened > span,
.smartbutton.pink .with-sub > span {
    border-left-color: #e84f9a;
}

.smartbutton.blue-darker .font-icon,
.smartbutton.blue-darker .glyphicon,
.smartbutton.blue-darker .fa {
    color: #1280d0;
}

.smartbutton.blue-darker.opened a,
.smartbutton.blue-darker.opened > span,
.smartbutton.blue-darker .with-sub > span {
    border-left-color: #1280d0;
}

.smartbutton.blue-sky .font-icon,
.smartbutton.blue-sky .glyphicon,
.smartbutton.blue-sky .fa {
    color: #23b9e2;
}

.smartbutton.blue-sky.opened a,
.smartbutton.blue-sky.opened > span,
.smartbutton.blue-sky .with-sub > span {
    border-left-color: #23b9e2;
}

.mydropdown{
    width:100%;
}

.mydropdown a{
    
    color: #000;
    background-color: #FFF;

}

.smartbuttons .dropdown-menu{
    border-radius: 0px;
    padding:0px;
}

.smartbuttons .dropdown-menu a{
    margin: 0px;
}

.smartVertical a, .smartVertical .btn-group {
    width: 100%;
    display: block;    
    border-bottom: none;
}

.smartHorizontal .btn-group > .btn, .btn-group > .btn {
    float: right;
}

    .smartHorizontal.btn-group > .btn:first-child,
    .smartHorizontal a {
        margin-left: 5px;
    }


.smartHorizontal.btn-group > a,
.smartHorizontal>.smartbuttons>a {
    border-radius: 5px !important;
}

.smartVertical>a:first-of-type:not(.dropdown-toggle){
    border-top-left-radius: 5px!important;
    border-top-right-radius: 5px!important;
}

.smartVertical .smartVertical>a {
    border-bottom-left-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}

.ddcaret {
    float: right;
    height: 100%;
    width: 32px;
    background-color: rgba(197,214,222,.7);
    
}

.smartbuttons .titel{
    padding-left: 15px;
    padding-right: 15px;
}

.ddcaret .fa{
    margin: 0px;
}

.smartbuttons .btn .fa{
    font-size: 18px;
    margin-right: 4px;
    margin-top:2px;
}


.smartbuttons .dropdown-toggle::after{
    content:none;
}

.white a.btn{
    background-color:#FFF;
}


.alert {
    text-align:center;
}

@media (max-width:500px) {
    .dropdown-menu{
        position: relative;
    }
}

.formkolom .date-picker-control {
    font-size: 12px;
    position: relative;
    left: -30px;
    top:2px;
    margin-right: -24px!important;
    
}

.date-picker-control i.fa.fa-calendar{
    font-size: 14px!important;
    color:#000;
    margin-top:5px;
}

input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
    line-height: unset;
}

.afwijkingicoon:hover {
    color: var(--kopkleur)!important;
}

.afwijkingicoon{
    color:#CCC!important;
}

.grijs {
    margin-left: 10px;
    background-color: #DDD !important;
    border-color: #DDD !important;
    color: #333!important;
    font-weight:normal!important;
}


.fa {
    font-weight: 200 !important;
}



    .treetable tbody tr:hover, .table.hover tbody tr:hover {
        background-color: #EEE;
    }

    .side-menu .spacer{
        height:50px;
    }

.side-menu .title h2 {
    margin-bottom: 0px;
    margin-top: 30px;
    padding-left: 20px;
    text-transform: uppercase;
    color: var(--kopkleur);
    font-size:16px;
}

#toolbarlinks .submenu .submenuitem{
    width:unset;
    font-size:unset;
    padding-right:10px;
}

    #toolbarlinks .submenu .submenuitem:hover, #toolbarlinks .submenu .submenuitem.actief {
        border-bottom: 3px solid #61027C;
  
        }

.btn-group-vertical .dropdown-menu {
    width:100%;
}

.btn.dropdown-toggle, .btn.dropdown-toggle:focus, .btn.btn-grey {
    background-color: #f6f8fa;
    font-weight:normal;
}

table.breed{
    width:100%;
}

/*  libs\css\versiex.css  */
/*  libs\css\00_main-layout\00_overrule.css  */
*, .form-control{
    font-size: 14px;
}
.tabs.tabs-bottom .nav-tabs li.active a, .tabs.tabs-bottom .nav-tabs li.active a:hover, .tabs.tabs-bottom .nav-tabs li.active a:focus{
    background: white;
    border-left-color: #eeeeee;
    border-right-color: #eeeeee;
    border-bottom: 3px solid #662d91;
    color: #555555;


}
.nav-tabs li.active a, .nav-tabs li.active a:hover, .nav-tabs li.active a:focus, .panel-heading {
    background: white;
    border-left-color: #eeeeee;
    border-right-color: #eeeeee;
    border-top: 3px solid #662d91;
    color: #555555;
}

.panel-heading, .panel .panel-heading {
    line-height: 1.42857143;
    padding-top: 7px;
    padding-bottom: 7px;
}

.swlabel {
    font-weight: normal;
}

.alert a {
    color: inherit;
}

a .fa {
    margin-left: 3px;
}

.tab a .fa {
    margin-right: 5px;
    margin-left: 0px;
}

.nav-tabs li.active a, .nav-tabs li.active {
}

.panel .panel-heading h6 {
    height: inherit;
}



.login-box .header img,
.register-box .header img {
    padding: 0px;
    max-width: 400px;
    margin:15px;
}


.tabs{
    padding-left: 15px;
    padding-right: 15px;
}

.tabs .panel-group .panel-accordion {
    margin-top: 0px;
    border-top: none;
    border-radius: 0px;
    border: 1px solid #ddd;
    overflow: hidden;
    min-height: 40px;
}


.tabs .panel-group .panel-accordion:first-of-type{
    border: 1px solid #ddd;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.tabs .panel-group .panel-accordion:last-of-type{
    border: 1px solid #ddd;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}



.tabs .panel-group .panel-accordion  .panel-heading{
    border-radius: 0px;
    border: none;
}

.tabs .panel-group .panel-accordion .panel-body{
    border-radius: 0px;
}

 .tabs .panel-group .panel-accordion .bk-bg-white{
     border-bottom: 1px solid #ddd;
 }

 .tabs .accordion-toggle{
     overflow:hidden;
     max-height: 40px;
 }

 .tooltip-inner {
    text-align: left;
    white-space:pre-wrap;
}

 .bootstrap-table .table a, .fixed-table-body .table a, .table a {
        border-bottom: none;
    }

 .btn.btn-default {
    background-color: #FAFAFA;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #343434!important;
    font-weight:normal;
}

.nav-tabs li a {
    font-size: 16px;
    display: inline-block;
}

a, a:focus, a:hover {
    color: #662d91;
    text-decoration: none;
    cursor: pointer;
}

    .bootstrap-table .table td, .fixed-table-body .table td, .table td {
        height: unset;
    }

h1 {
    padding-top: 10px;
    font-weight: 600;
    border-bottom: solid 2px var(--kopkleur);
    padding-bottom: 5px;
}

h1, h2 {
    font-size: 18px;
    letter-spacing: inherit;
}

.side-menu-list li i {
    color: #818181 !important;
    font-weight: 200 !important;
    width:24px;
    margin-left:0px!important;
    opacity: 0.7;
   
}

.side-menu-list li .lbl {
    font-weight: 400 !important;
    color: #343434;
}

.fa-geen, .panel-title i{
    display: none !important;
}



    /*  libs\css\00_main-layout\50_print.css  */
@page {
    size: A4;
    margin: 0;
}

@media print {
    html, body, .page-content {
        width: 210mm;
        height: 297mm;
        margin: 0px;
    }

    * {
        font-size: 10px !important;
        font-weight: normal !important;
        
    }

    h1, h2, h3, h4, h5, h6, .tab a {
        font-size: 12px !important;
        font-weight: bold !important;
        padding: 5px;
        border-bottom-width: 1px;
        border-bottom-color: #CCC;
    }



    

    .page-content {
        margin: 0px!important;
        padding: 0px!important;        
    }

    #maincontent, .tab-content, .panel-body, .col-md-12, .col-sm-12, .col-xs-12, .container-fluid, .card {
        margin: 0px;
        padding: 0px;
        border:none;
    }



    a[href]:after {
        content: none !important;
    }

    .knop, #toolbar, .knop-breed, .dataTables_filter, .panel-actions, header, .control-panel-container, .noprint {
        display: none;
    }

    .nav-tabs li {
        display: none;
    }

        .nav-tabs li.active {
            display: block;
        }

            .nav-tabs li.active a, .nav-tabs li.active a:hover, .nav-tabs li.active a:focus, input, select, .panel-heading {
                border: none;
                padding: 0px;
            }

    .tab-content {
        border: none;
    }
    
    .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{padding: 0px;}        
}
/*  libs\css\00_main-layout\datatables.css  */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    border-color: #d8e2e7;
    color: #6c7a86;
    border-radius: .25rem;
}

.paginate_button i {
    color: rgba(173, 183, 190, 0.7)!important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: none;
}

     .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: none;
        background-color: var(--kopkleur);
        color:#FFF;
        
    }

table.dataTable tbody td {   
    overflow: hidden;
    border-bottom: solid 1px #c5d6de;
    padding: 10px 18px;
}

table.dataTable thead th, table.dataTable thead td {
    background: #F4F8FB;
    overflow: hidden;
    border-bottom: solid 2px #DDD;
}

table.dataTable.no-footer {
    border-bottom: solid 2px #DDD;
}

table.dataTable tbody tr:hover {
    background: #F4F8FB;
}

table.dataTable .klikmij{
    cursor:pointer;


}

    table.dataTable .klikmij:hover {
        /*font-weight: bold;*/
        color:#000;
    }


/*  libs\css\00_main-layout\formulieren.css  */
.editformulier{
   position:absolute;
   right: 15px; 
   margin-top: -12px;
   
}

.form-control-label{
    padding-top: 0.5rem;
}

.form-group {
    margin-top: 1rem;
    margin-bottom: 0px;
}

.swFormulierVerborgen{
    display:none;
}

.swFormulier50{
    opacity: 0.5;
}



.enableOnClick {
    background-color: transparent;    
    width: 75px;
}

.enableOnClickFocus {
    width: 75px;
}

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.userfout, .form-control.userfout:focus {
    border-color: #F00;
    
}

#userfout{
    color: #F00;
    padding-top: 5px;
}


.formkolom .date-picker-control i.fa.fa-calendar {
    
    margin-top: 0px;
}

/*  libs\css\00_main-layout\knoppen.css  */
.btn-producten-samenvoegen {
    width: 100%;
}

[class*="knop"] {
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: solid 1px #662d91;
    background: #662d91;
    color: #fff;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    padding: .5rem 1rem;
    font-size: 1rem;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

    [class*="knop"] .fa{
        margin-right: 5px;
    }

    [class*="knop"]:hover{
        color:#FFF;
        opacity: 0.8;
    }

    .knop-breed {
        display: inline-block;
    }

.knop-100 {
    display: block;
}

.knop-groot{
    width:250px;
    display: block;
}

.knop-rechts{
    float:right;
}

.btn-group, .dropdown-item {
    color: #6c7a86;
}

.neptab {
    color: var(--kopkleur);
    border-left-color: #d8e2e7;
    border-right-color: #d8e2e7;
    background: #fff;
    color: #343434;
    border-bottom-color: #fff;
}

.formkolom .date-picker-control{
    position:relative;
    left:-30px;
    top: 3px;

}

.tabs-section-nav {    
    border-right: solid 1px #d8e2e7;
}

    .tabs-section-nav .tbl{
        width:unset;
    }

    .tabs-section-nav.tabs-section-nav-icons .font-icon, .tabs-section-nav.tabs-section-nav-icons .glyphicon, .tabs-section-nav.tabs-section-nav-icons .fa {
        display: inline-block;
        margin-right: 5px;
    }

    .tabs-section-nav .nav-item .nav-link {
        border-right: solid 1px #d8e2e7;
    }

    .tabs-section-nav .nav-item .fa{
        display:none;
    }

.fake-tab {
    padding: 0;
    display: block;
    color: #6c7a86;
    font-weight: 600;
    border: solid 1px #d8e2e7;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top: none;
    border-right-color: #d8e2e7;
}

li.nav-item:first-of-type .fake-tab {
    border-left-color: #d8e2e7;
}

.btn.btn-warning, .btn-warning {
    background-color: #fdf4e6;
}

.btn, .btn.btn-default {
    background-color: #f6f8fa;    
    border: solid 1px #d8e2e7 !important;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #6c7a86;
}

.btn:hover{
    background-color: var(--kopkleur)!important;
    color:#FFF!important;
    
}

.btn::first-letter{
    text-transform:uppercase;
}

#toolbar *, #toolbar .fa, #toolbarholder .fa {
    color: #273A46;
}

#toolbarlinks{
    position:relative;
    padding-left:15px;
    
}

    #toolbarlinks a, #toolbar .back {
        width: 38px;
        height: 38px;
        border: none;
        padding: none;
        border-right: solid 1px #c5d6de;
        background-color: inherit !important;
        display: inline-block;
        float: left;
        white-space: nowrap;
        line-height: 38px;
        overflow: hidden;
        font-size: 0px;
        text-align: center;
    }

        #toolbarlinks a .fa, #toolbar .back .fa {
            margin: 0px;
            width: 38px;
            font-size: 18px;
            line-height: inherit !important;
        }

.btn {
    font-size: 13px;
}

#toolbarlinks .bigSaveButton {
    display: none;
}


/*  libs\css\00_main-layout\knoppen_slim.css  */
/*  libs\css\00_main-layout\layout.css  */
:root {
    --kopkleur: #662d91;
}
.site-header .site-logo {
    width:140px;
    display:table-cell;
    vertical-align:middle;
    text-align:left;
    margin-right: 10px;
}
    .site-header .site-logo img {
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 40px;    
        float:unset;
        position: unset;
    }
.side-menu {
    width: 300px;
}

.side-menu-list .menuitemholder {
    padding-left: 26px !important;
}

.side-menu-list ul li {
    padding-left: 15px;
}

.side-menu-list .fa {
    position: relative;
    left: -10px;
    top: 0px;
}

.with-side-menu .page-content{
    padding-left:300px;
    padding-right: 0px;
    padding-top: 81px;
}

#toolbar {
    height: 52px;
    box-sizing: border-box;
    padding: 15px;
    background: #F4F8FB;
    overflow: hidden;
    border-bottom: solid 1px #c5d6de;
    margin-bottom: 15px;
}

#toolbar div{
    display: inline-block;
}

#helemaalrechts{
    float:right;
}

#toolbarrechts{
    float:right;
}



@media (max-width: 1056px){
    .with-side-menu .page-content {
        padding-left: 0px !important;
        padding-right: 0px !important;

    }

    .control-panel-container{
        display: none;
    }

}

#toolbar {
}

@media (max-width: 767px) {
    .site-header .site-logo{
        width:28px;
    }
}
.site-header .site-header-collapsed .site-header-collapsed-in {
    margin-right: 256px;
}

.site-header .site-header-collapsed {
    margin-right: -256px;
}

#select2-keuzelijst-container{
    padding-bottom:0px;
    padding-top:0px;
    line-height:36px;
}

.select2-selection__arrow{
    height:38px!important;
    
}


#keuzelijst, .select2-container{
    height: 38px!important;
    
}

.keuzelijsttable{
    width: 180px;
}

.select2-container--default .select2-selection--single{
    height: 40px!important;
}

.pull-left{
    position:absolute;
    left: 10px;
}

.dropdown-menu-notif-item{
    padding-left: 36px!important;
}

.site-header .dropdown.dropdown-notification {
    margin-left: 15px;
}

.site-header .dropdown.user-menu .fa {
    color: #adb7be;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    width: 20px;
    margin-right: 5px;
}

.site-header .dropdown.user-menu a:hover .fa {
    color: #662d91;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.dropdown-item .font-icon {
    width: 20px;
    margin-right: 5px;
}

#template_companykeuze .keuzelijsttable .select2 {
    max-width: 180px;
}

.SWTimeInput {
    padding: 6px .75rem;
    width: 75px;
    border-radius: .25rem;
}

#toolbar{
    padding:0px;
    height:40px;
}

#knoppen {   
    float: right;
}




    #knoppen input {
        float: left;
        width: 110px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        text-align: left;
        padding: 2px;
        position:relative;
        top:4px;
        left:4px;
        padding-left:15px;
    }

    #knoppen a.date-picker-control{
   margin-left:-24px!important;
   margin-right:5px!important;
    }

    #knoppen a, a.toolbarrechts {
        box-sizing: border-box;
        display: block;
        width: 30px;
        height: 39px;
        line-height: 39px;
        text-decoration: none;
        border-left: solid 1px #c5d6de;
        text-align: center;
        float: left;
    }

#toolbar .date-picker-control {
    border-left: solid 1px #c5d6de!important;
}

#knoppen #datumpicker {
    padding-top: 10px;
    border-left: solid 1px #c5d6de !important;
}




#knoppen .date-picker-control {
    padding-left: 5px !important;
    margin-right: -5px !important;
}

        #knoppen a.date-picker-control:link, #knoppen a.date-picker-control:visited #knoppen .fa, #mobileknoppen .fa {
            border-left: none !important;
        }

.toolbarrechts {
    text-align: center;
    overflow: hidden;
    display: block;
    line-height: 30px;
    float: right;
    margin-left: 10px;
    color: #343434;
}

input, select {
    border: solid 1px rgba(197, 214, 222, 0.7);
    border-radius: .25rem;
    line-height: 1.25;
    padding: .5rem .75rem;
}

@media (max-width: 1056px) {
    .site-header .site-header-content .site-header-collapsed {
        margin-right: 0px !important; 
    }
}

#helemaalrechts{
    text-align: right;
}

#helemaalrechts #submenus{
    float:right;
}

#helemaalrechts #submenus a{
    margin-left: 10px;
}

.card-block ol, card-block ul{
    padding-left:2em;

}



.site-header .dropdown a.dropdown-toggle .topalert {
    top: -40px;
    left: 8px;
    font-size: 0.5rem;
    z-index: 100;
}

.site-header .header-alarm.active:after{
    display:none;
}

.noteholder{
    display: inline-block;
    height: 40px;
}

#toolbarlinks{
    padding-left:0px;
}

div.foutmelding, .foutmelding pre {
    font-size: 10px;
    font-family: 'Proxima Nova', sans-serif;

}

div.foutmelding {
    margin: 20px;
   padding:20px;
    border-radius: 4px;
    background: #FFFFFF88;
    border: solid 1px #d8e2e7;
    margin: 0 0 20px;
}

.foutmelding h2{
    font-size:12px;
    fot
}




/*  libs\css\00_main-layout\panels.css  */
.actie-header .dropdown {
    margin-right: -10px;
    margin-top: 1px;
}

.actie-header .panel-heading .dropdown {
    display: inline-block;
    float: right;
    position: relative;
}

.actie-header .panel-heading .panel-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    padding: 0;
    margin-top: 5px;
}

.actie-header .panel-heading .dropdown .dropdown-menu {
    position: static;
    display: inline-block;
    border: none;
    padding: 0;
    margin: 0;
    min-width: initial;
    width: auto;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: 0 0;
}

.actie-header .panel-heading .panel-title {
    float: left;
    max-width: calc(100% - 30px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    padding-left: 0px;
    margin-top: 0px;
}

.actie-header .panel-heading .dropdown .dropdown-menu {
    left: auto;
    right: 0;
    min-width: initial;
    margin-top: 0;
    border-radius: 0;
}

.actie-header .panel-heading a {
    display: inline-block;
    vertical-align: top;
    border: none;
    background: 0 0;
    margin: 0;
}

.actie-header .panel-heading a i {
    color: #adb7be;
    font-size: .8rem;
    line-height: 18px;
}

@media screen and (min-width: 768px) {
    .actie-header .panel-heading .panel-title {
        max-width: calc(100% - 180px);
    }

    .actie-header .panel-heading .dropdown .dropdown-menu {
        position: static;
        display: inline-block;
        border: none;
        padding: 0;
        margin: 0;
        min-width: initial;
        width: auto;
        -webkit-box-shadow: none;
        box-shadow: none;
        background: 0 0;
    }

    .actie-header .panel-heading .dropdown .dropdown-menu > li {
        display: inline-block;
    }

    .actie-header .panel-heading .dropdown .dropdown-menu > li > a {
        cursor: pointer;
        color: inherit;
        padding: 0;
        outline: 0;
        text-align: center;
        width: 30px;
        font-size: 14px;
        -webkit-transition: all .2s;
        -o-transition: all .2s;
        transition: all .2s;
    }

    .actie-header .panel-heading .dropdown .dropdown-menu > li > a .fa {
        top: 0;
        line-height: 20px;
        font-size: 18px;
    }
}

.nav-item .tab-pane{
    display:none;
}

.ui-accordion-header-icon{
    display:none;
}

.ui-accordion-header i  {
    margin-right:10px;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: 1px solid #c5c5c5;
    background: #f6f6f6;
    font-weight: normal;
    color: var(--kopkleur);
}/*  libs\css\00_main-layout\submenu.css  */
.sub1, .subholder{
    display:none;
    width:280px;
    
}

body.sidebar-hidden .subholder {
    width: 299px;
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    display: block;
    height: 100vh;
    background-color: #FFF;
    border-right: solid 1px #c5d6de;
    color: #6c7a86;
    padding:20px;
    padding-top:90px;
    
}

.sub1 a {
    color: #6c7a86;
}

body.sidebar-hidden .sub1 {  
    z-index:60;
    display:block;
    
    float: left;
    
}

.sub1 li, .skop{
    padding-bottom:8px;
    padding-top: 8px;
}





 .laag1{
    display:block;
    
}



.skop {
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: solid 1px #c5d6de;
    margin-right: 20px;
}

.skop i{
    display:none; 
    
}

.backlink, .backlink:hover {
    border-radius: 10px;
    display: block;
    padding: 10px;
    
    background-color: var(--kopkleur);
    color: #FFF;
    text-align: center;
}

/*@media(min-width:500px){
    body.sidebar-hidden .subholder, body.sidebar-hidden .sub1{
        width: 60px;
        font-size:0px;
    }

    body.sidebar-hidden .skop{
        display:none;
        
    }

    body.sidebar-hidden .subholder .fa{
        font-size:14px;
    }

    .backlink{
        position:relative;
        width:32px;
        left:-10px;
    }
}*//*  libs\css\00_main-layout\SWZoekveld.css  */
.zoekveldkeuze .table {
    border-left: solid 1px #d8e2e7;
    border-right: solid 1px #d8e2e7!important;
    border-bottom: solid 1px #d8e2e7;
   border-top:none;
}

.zoekveldkeuze tr td:last-child, .zoekveldkeuze tr th:last-child {
    border-right: solid 1px #d8e2e7 !important;
}

.zoekveldkeuze tbody tr:hover, .zoekveldkeuze tbody tr.actief {
    cursor: pointer;
    background-color: #f6f8fa;
    font-weight: bold;
}

.zoekveldkeuze{
    z-index:100;
}
.form-control.openzoekveld{
    border-bottom-left-radius:0px;
    border-bottom-right-radius: 0px;
    border-bottom:none;
}

#keuzebord {
    position: absolute;
    background-color: rgba(197,214,222,.7);
    right: 15px;
    top: 0px;
    width: 32px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.closekeuze {
   
    float: right;
   
}

.zoekveldkeuze{
    position:absolute;
   
}

.swzoekveld:before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    
    font-weight: 900;
    content: 'h';
}

#voorinput {
    height: 38px;
    border: solid 1px rgba(197, 214, 222, 0.7);
    background-color: rgba(197, 214, 222);
    border-radius: .25rem;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    line-height: 18px;
    padding: 10px;
    display: inline-block;
    position: relative;
    top: 1px;
    left: 4px;
}

#kies_keuzelijst{
    margin-top:39px;
}

/*  libs\css\00_main-layout\tabellen.css  */
.table-producten .hidden {
    -webkit-transition: height 0.5s linear;
    -moz-transition: height 0.5s linear;
    -ms-transition: height 0.5s linear;
    -o-transition: height 0.5s linear;
    transition: height 0.5s linear;
}

.table-producten .show {
    -webkit-transition: height 0.5s linear;
    -moz-transition: height 0.5s linear;
    -ms-transition: height 0.5s linear;
    -o-transition: height 0.5s linear;
    transition: height 0.5s linear;
}

.table-producten-samenvoegen .kader {
    border: 1px solid #d8e2e7;
    padding: 10px;
    border-radius: 3px;
}

.table-producten-samenvoegen .kader-holder {
    vertical-align: top;
}

.table-producten-samenvoegen .no-style td {
    border: none;
    height: auto;
    padding: 0;
}

.table-producten-samenvoegen .midden {
    text-align: center;
    vertical-align: top;
    padding-top: 22px;
}

.box-typical-header .tbl-cell-title span.table-header-rechts {
    float: right;
    padding-right: 15px;
}

tr.kop {
    border-bottom: 2px solid #DDD;
    padding-top: 10px;
    padding-bottom: 9px;
    background: #f6f8fa;
    font-weight: bold;
}

table.no100 {
    width: auto;
}

.ui-state-highlight {
    height: 1.5em;
    line-height: 1.2em;
    content: 'Plaats hier'
}

.verberg {
    max-height: 80px;
    height: 80px;
    overflow: hidden;
    margin-top:20px;
}

/*  libs\css\00_main-layout\tekstblokken.css  */
.tekst-border-top {
    border-top: solid 1px #d8e2e7;
    padding: 20px;
    padding-top: 16px;
    padding-bottom: 16px;
}
/*  libs\css\30_agenda\10_agenda.css  */
#agendacontent{
    padding:10px;
    background-color:#FFF;    
    border-radius: 0 0 4px 4px;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.04);
    border: 1px solid #eeeeee;
    border-top: 0;
    

}

.agendatable{
    table-layout: fixed;
    
}

.agendatable td{
    border-right: solid 1px #FFF;
}



.kolom {
    float: left;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;     
    box-sizing: border-box;     
}

.dagdiv {
    float: left;
    border-right: solid 1px #DDD;
}

.dagdiv:first-of-type{
    border-left: solid 1px #DDD;
}



    .dagdiv h1 {
        margin: 0px;
        padding: 3px;
        font-size: 12px;
        text-align: center;
        color: #FFF;
        background: var(--kopkleur);
    }

    .dagdiv h1 img{
        top: 1px !important;
    }



        .dagdiv h1.kop, .dagkop h1.kop {
            line-height: 34px;
            height: 34px;
            overflow: hidden;
            padding: 0 15px;
            min-height: 34px;
            -webkit-border-radius: 4px 4px 0 0;
            -moz-border-radius: 4px 4px 0 0;
            border-radius: 4px 4px 0 0;
            position: relative;
            border-bottom: 1px solid #ddd;
            margin: 0px;
            font-size: 14px !important;
            text-align: center;
            color: #FFF;
            background: var(--kopkleur);
        }

.agendatable td.dagkop {
    border-bottom: 1px solid #ddd;
    border-radius: 4px 4px 0 0;
    background: var(--kopkleur);
}

.agendatable td.dagkop h1.kop {
    border-bottom: none;
}

.behandelaardiv h2 {
    margin: 0px;
    padding: 2px;
    text-align:center;
    font-size:12px;
}

.behandelaardiv{
    position:relative;
}

.agendaregel {
    padding-left: 2px;
    border-top: solid 1px #DDD;
    cursor:pointer;
    text-align:center;
}
    .agendaregel:hover {
        color: #FFF;
        background: #AAA;
    }


.bezet {
    border-top: solid 1px #FFF;
    color:#CCC;    
}

   
.afspraken {
    position: absolute;
    display:block;
    width:100%;
}

.afspraak {
    width:100%;
    position: absolute;      
    border: solid 1px #DDD;
    overflow:hidden;
    cursor:pointer;    
    z-index:1;
    border-radius: 3px;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.04);
    
}

    .afspraak:hover, .afspraak .open{
        overflow: visible;
        height:auto;
        z-index:1000;

    }

    .afspraak ul {
        padding:0px;  
        padding-left:20px;      
        margin: 0px;
        border-bottom: dotted 1px #666; 
        font-size:14px;     
        
    }

    .afspraak .comment {
        font-style: italic;
        border-bottom: dotted 1px #666;   
    }

       

    
    


.afspraak h1 {  
    font-weight:normal;
    color:#FFF;
    background: #662d91;
    text-align: center;
    margin:0px;
    padding:0px;
    overflow-y: hidden;
    
}

    .afspraak img {
        position: relative;
        top: -1px;
    }


#swdatum{
    float: right;
}   

#swdatum a, #swdatum div{
    float: left;
} 


#datumholder, #datumholder *{
    border-radius: 0px;
    height: 32px;
    margin: 0px;
    box-shadow: none;
    border-right:none;
    width:100px;

}

#vandaag{
    /*background-image: url(/assets/design/icons/calendar24.png);*/
    background-repeat: no-repeat;
    background-position-x: 70px;
    background-position-y: center;
    
}

#agendatabs{
    /*overflow: hidden;*/
}

#agendatabbar{
    border-top: none;
    border-left:none;
    border-right:none;
    padding: 0px;
    background-color:#EEE;
    height: 44px;

}

#tabjes a{
    float: left;
    display: block ;
    height: 44px;
    line-height: 44px;
    padding-left: 15px;
    padding-right: 15px;
   

    background: #f4f4f4;
    border-bottom: none;
    border-left: 1px solid #eeeeee;
    border-right: 1px solid #eeeeee;
    border-top: 3px solid #dddddd;
    color: #555555;
    border-radius: 5px 5px 0 0;
    font-size: 13px;
   
    margin-right: 1px;

}

#tabjes a.actief{
    background: white;
    border-left-color: #eeeeee;
    border-right-color: #eeeeee;
    border-top: 3px solid #662d91;
    color: #555555;
    text-decoration: none;
}

#tabjes a:hover{
    background: white;
    border-left-color: #eeeeee;
    border-right-color: #eeeeee;
    border-top: 3px solid #662d91;
    color: #555555;

}

.behandelaar-dag .behandelaardiv h2 {
    height: 20px;
    line-height: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-group.smartbuttons{
    display: inline-block;
}

h6.bk-margin-off{
    display:inline-block;
    margin-left:5px;
}

.panel-heading {
    padding: 10px;
    border-bottom: solid 1px rgba(197, 214, 222, 0.7);
    margin-bottom:10px;
    line-height: 37px;
}
.panel-heading .row{
    margin:0px;
}

.panel-body{
    padding:15px;
}


#toolbarlinks .btn-group{
    margin-left: 15px;
}

 #toolbarlinks .btn-group a {
    width: unset;
    float: left;
    height: 26px;
    margin-top: 6px;
}

#toolbarlinks .btn-group .btn {
    float: left;
    height: 26px;
    line-height: 26px;
    padding: 0px;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: normal;
    font-size: 14px;
    font-size: 14px;

    background-color: #FAFAFA!important;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #343434 !important;
}

#toolbarrechts .btn:hover {
    background-color: #F00;
}

#toolbarrechts .btn-group a:hover {
    background-color: var(--kopkleur) !important;
}

#toolbar a:hover, #toolbar a:hover i{
    color: var(--kopkleur)!important;
}


#toolbar .btn.active, #toolbar .btn:hover {
    background-color: var(--kopkleur) !important;
    color: #FFF !important;
}


@media(max-width:700px) {
    #helemaalrechts {
        width: 100%;
        position: absolute;
        left: 0;
        margin-top: 40px;
        background: #F4F8FB;
        border-bottom: solid 1px #c5d6de;
    }

    #toolbar{
        margin-bottom:65px;
    }

    #knoppen {
        margin-left:auto;
        margin-right:auto;
    }
}

.behandelaardiv .warning{
    position:absolute;
    right:0;
    bottom:0;
    text-align:right;
    padding-right:3px;
   

}

.behandelaardiv .warning .fa {
    font-size: 8px!important;
    color: var(--kopkleur);
}

.behandelaardiv #backslash{
    position:absolute;
    margin-left:-8px;
    top:5px;
}

#agendakoptable td{
    border-right: solid 1px #FFF;
}

#agendakoptable {
    position: sticky;
    top: 80px;
    background-color: #FFF;
    z-index: 10;
    width: 100%;
    table-layout: fixed;
}

    #agendakoptable:not(:stuck) {
        display:none;
    }
   
.agendatable thead, .agendatable .behandelaardiv>h2 {
    display:none;
}

.ui-state-hover{
    background-color:#555555!important;
    color:#FFF!important;
    text-align:left;
    z-index:100;
}





/*  libs\css\30_agenda\10_table.css  */
.dt-buttons .fa{
    margin-right: 0px;
}

.dataTables_wrapper .dataTables_filter label {
    width: auto;
}

.tableIcon{
    margin-left: 3px;
}

.tableIcon:first-child{
    margin-left: 0px;
}

.isDisabledForLanding{
     position:absolute!important;
     left: -4000px;
}

.swDropIcon *{
    color: #662d91;
}

.dataTables_scrollHeadInner, .dataTables_scrollHeadInner table  {
    width: 100%!important;
    max-width: none; 
}



    
    /* Force table to not be like tables anymore */
	.my-no-more-table table, 
     table.my-no-more-table, 
	.my-no-more-table thead, 
	.my-no-more-table tbody, 
	.my-no-more-table th, 
	.my-no-more-table td, 
	.my-no-more-table tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	.my-no-more-table thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	.my-no-more-table tr { border: 1px solid #ccc; }
 
	.my-no-more-table td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
	}
 
	.my-no-more-table td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}
 
	/*
	Label the data
	*/
	.my-no-more-table td:before { content: attr(data-title); }

    tr.grijs, tr.grijs td{
        vertical-align: bottom;
        background-color: #DDD;
        font-weight: bold;
    }

    table.breed{
        min-width: 75%;
    }

    table.dataTable th.focus,table.dataTable td.focus {
    outline: inherit;
    outline-offset: inherit;
}


    div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type="checkbox"], div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Field input[type="checkbox"] {
    width: inherit;

}

    tr.bgkop, tr.bgkop td, h1.bgkop{
        background-color:#662d91;
        color: #FFF;
        height: 34px;
        padding: 8px;

    }

    tr.grijs h1{
        margin-bottom: -6px;
        font-weight: 500;
        line-height: 1.1;
    }

    tr.grijs h1, tr.grijs h2{
        margin: 0px;
        padding: 0px;

    }

    .kop td, .kop th{
        vertical-align: bottom;
    border-bottom: 2px solid #ddd;
    font-weight: bold;

    }

    table.smal{
        width:auto;
    }

th.koptotaal, th.kopprijs {
    width: 45px !important;
}   

td span.ap-table-content-holder {
    line-height: 1.42857143;
    height: 1.42857143;
    overflow: hidden;
    white-space: nowrap;
}

.sw_pd_rubrieken table.treetable {
    table-layout: fixed;
}

.sw_pd_rubrieken table.treetable tr th:last-child {
    width: 130px !important;
    min-width: 130px !important;
}

.sw_pd_rubrieken table.treetable tr td:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sw_pd_rubrieken table .naam-holder {
    padding-left: 0px;
}/*  libs\css\30_agenda\20_afspraak.css  */
.winkelwagen table {
    width: 100%;
}

.winkelwagen .tijd {
    width: 50px;
}

#zoekproduct, #zoekoptie {
    width:300px;
    float:left;    
}

#zoeklabel {
    width: 114px;
    display:inline-block;
    float:left;
    height: 23px;
    line-height:23px;
}

.winkelwagen input {
    height: 20px;
    line-height: 20px;
    width: 50px;
    position:relative;
    top:-1px;
}


#zoekproducten, #zoekopties {
    width: 100%;
}

#zoekproducten tr {
    cursor: pointer;
}

#zoekproducten .kop {
    cursor: default;
}

#zoekproducten .nowrap {
    white-space: nowrap;
}

#zoekcontainer .reset  {
    position: relative;
    width: 16px;
    height: 16px;
    left: -25px;
    top:7px;
}

a.datumpicker {
    position: relative;
    top: -22px;
    right: 2px;
    float: right;
}

#acties .knop-breed {
    margin-right: 10px;
    box-sizing: border-box;
    display: inline-block;
    width: 20%;
    width: -moz-calc(25% - 10px);
    width: -webkit-calc(25% - 10px);
    width: -o-calc(25% - 10px);
    width: calc(25% - 10px);
}

#pop {
    width: 100%;
    height: 400px;
}

body.popup header, body.popup #toolbar, body.popup .tabkop, body.popup .tabs-section-nav {
    display: none;
}

body.popup .page-content{
    padding:0px;
}

body.popup .container-fluid{
    padding:0px;
}

.modal-dialog.breder {
    width: 700px!important;
    max-width:700px;
}

body.popup{
    background-color:#FFF;
}

body.popup .col-xs-12{
    width:100%!important;
    max-width:100%!important;
   
    position:absolute;
    padding:0px;
    margin-left:15px;

}

    body.popup .tab-content, body.popup .tabs-section-nav, body.popup .nav-link, body.popup .tabs-section-nav .nav-link.active .nav-link-in{
        border: none !important;
        border-color: #FFF;
    }

/*  libs\css\30_agenda\30_afrekenen.css  */


/*  libs\css\99_externals\bootstrap-switch.css  */
/* ========================================================================
 * bootstrap-switch - v3.3.2
 * http://www.bootstrap-switch.org
 * ========================================================================
 * Copyright 2012-2013 Mattia Larentis
 *
 * ========================================================================
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ========================================================================
 */

.bootstrap-switch {
    display: inline-block;
    direction: ltr;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid;
    border-color: #cccccc;
    position: relative;
    text-align: left;
    overflow: hidden;
    line-height: 8px;
    z-index: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle;
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

    .bootstrap-switch .bootstrap-switch-container {
        display: inline-block;
        top: 0;
        border-radius: 4px;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .bootstrap-switch .bootstrap-switch-handle-on,
    .bootstrap-switch .bootstrap-switch-handle-off,
    .bootstrap-switch .bootstrap-switch-label {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        cursor: pointer;
        display: inline-block !important;
        height: 100%;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 20px;
    }

    .bootstrap-switch .bootstrap-switch-handle-on,
    .bootstrap-switch .bootstrap-switch-handle-off {
        text-align: center;
        z-index: 1;
    }

        .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
        .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
            color: #fff;
            background: #337ab7;
        }

        .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info,
        .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info {
            color: #fff;
            background: #5bc0de;
        }

        .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
        .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
            color: #fff;
            background: #5cb85c;
        }

        .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning,
        .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning {
            background: #f0ad4e;
            color: #fff;
        }

        .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger,
        .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger {
            color: #fff;
            background: #d9534f;
        }

        .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
        .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
            color: #000;
            background: #eeeeee;
        }

    .bootstrap-switch .bootstrap-switch-label {
        text-align: center;
        margin-top: -1px;
        margin-bottom: -1px;
        z-index: 100;
        color: #333333;
        background: #CCC;
    }

    .bootstrap-switch .bootstrap-switch-handle-on {
        border-bottom-left-radius: 3px;
        border-top-left-radius: 3px;
    }

    .bootstrap-switch .bootstrap-switch-handle-off {
        border-bottom-right-radius: 3px;
        border-top-right-radius: 3px;
    }

    .bootstrap-switch input[type='radio'],
    .bootstrap-switch input[type='checkbox'] {
        position: absolute !important;
        top: 0;
        left: 0;
        margin: 0;
        z-index: -1;
        opacity: 0;
        filter: alpha(opacity=0);
    }

    .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
    .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
    .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
        padding: 1px 5px;
        font-size: 12px;
        line-height: 1.5;
    }

    .bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
    .bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
    .bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
        padding: 5px 10px;
        font-size: 12px;
        line-height: 1.5;
    }

    .bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
    .bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
    .bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
        padding: 6px 16px;
        font-size: 18px;
        line-height: 1.3333333;
    }

    .bootstrap-switch.bootstrap-switch-disabled,
    .bootstrap-switch.bootstrap-switch-readonly,
    .bootstrap-switch.bootstrap-switch-indeterminate {
        cursor: default !important;
    }

        .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,
        .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,
        .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,
        .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,
        .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,
        .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,
        .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,
        .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label,
        .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
            opacity: 0.5;
            filter: alpha(opacity=50);
            cursor: default !important;
        }

    .bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
        -webkit-transition: margin-left 0.5s;
        -o-transition: margin-left 0.5s;
        transition: margin-left 0.5s;
    }

    .bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        border-bottom-right-radius: 3px;
        border-top-right-radius: 3px;
    }

    .bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 3px;
        border-top-left-radius: 3px;
    }

    .bootstrap-switch.bootstrap-switch-focused {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
    }

    .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label,
    .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
        border-bottom-right-radius: 3px;
        border-top-right-radius: 3px;
    }

    .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label,
    .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
        border-bottom-left-radius: 3px;
        border-top-left-radius: 3px;
    }
/*  libs\css\99_externals\datepicker.css  */
/* This is a very basic stylesheet for the date-picker. Feel free to create your own. */

/* Hide the input by using a className */
input.fd-hidden-input,
select.fd-hidden-input
        {
        display:none;
        }
/* Screen reader class - hides it from the visual display */
.fd-screen-reader
        {
        position:absolute;
        left:-999em;
        top:0;
        width:1px;
        height:1px;
        overflow:hidden; 
        outline: 0 none;
	-moz-outline: 0 none;
        } 
/* Disabled datePicker and activation button */
a.dp-disabled,
.dp-disabled table
        {
        opacity:.3 !important;           
        filter:alpha(opacity=40);           
        }
.dp-disabled,
.dp-disabled td,
.dp-disabled th,
.dp-disabled th span
        {
        cursor:default !important;          
        }
a.date-picker-control:focus,
div.datePicker table td:focus 
        {
        overflow:hidden;
        outline:0 none;
	-moz-outline: 0 none;
	color:rgb(100,130,170) !important;
        }
/* The wrapper div */
div.datePicker
        {
        position:absolute;        
        z-index:9999;
        text-align:center;

        /* Change the font-size to suit your design's CSS. The following line is for the demo that has a 12px font-size defined on the body tag */
        font:900 0.8em/1em Verdana, Sans-Serif;

        /* For Example: If using the YUI font CSS, uncomment the following line to get a 10px font-size within the datePicker */
        /* font:900 77%/77% Verdana, sans-serif; */
        
        /* Or, if you prefer a pixel precision */
        /* font:900 12px/12px Verdana, sans-serif; */
        
        background:transparent;

        /* Mozilla & Webkit extensions to stop text-selection. */
        -moz-user-select:none;
        -khtml-user-select:none;                 
        }  
/* Styles for the static datePickers */
div.static-datepicker
        {
        position:relative;        
        top:5px;
        left:0;
        }
div.datePicker table
        {
        width:auto;
        height:auto;
        border-collapse:separate;         
        } 
/* Draggable datepickers */
div.datePicker tfoot th.drag-enabled,
div.datePicker thead th.drag-enabled,
div.datePicker thead th.drag-enabled span
        {
        cursor:move;
        }
/* The iframe hack to cover selectlists in Internet Explorer <= v6 */
iframe.iehack
        {
        position:absolute;
        background:#fff;
        z-index:9998;
        padding:0;
        border:0;
        display:none;
        margin:0;
        }
/* The "button" created beside each input for non-static datePickers */
a.date-picker-control:link,
a.date-picker-control:visited
        {
        position:relative;
        /* Moz & FF */
        display: -moz-inline-stack;
        border:0 none;
        padding:0;
        margin:0 0 0 4px;
        background: transparent url(/libs/date-picker-v5/media/cal-grey.png) no-repeat 50% 50%;
        min-width:16px;
        line-height:1;
        cursor:pointer;
        visibility:visible;
        text-decoration:none;
        vertical-align:top;         
        }
a.date-picker-control:hover,
a.date-picker-control:active,
a.date-picker-control:focus,
a.dp-button-active:link,
a.dp-button-active:visited,
a.dp-button-active:hover,
a.dp-button-active:active,
a.dp-button-active:focus
        {
        background: transparent url(/libs/date-picker-v5/media/cal-grey.png) no-repeat 50% 50% !important;
        }
/* Feed IE6 the following rule, IE7 should handle the min-width declared above */
* html a.date-picker-control
        {
        width:16px;
        }
/* IE, Safari & Opera. Seperate CSS rule seems to be required. */
a.date-picker-control
        {
        display:inline-block;
        }
a.date-picker-control span
        {
        display:block;
        width:16px;
        height:16px;
        margin:auto 0;
        margin-top: 8px;
        }
/* Default "button" styles */
div.datePicker thead th span
        {
        display:block;
        padding:0;
        margin:0;
        text-align:center;
        line-height:1em;
        border:0 none;
        background:transparent;
        font-weight:bold;
        cursor:pointer;
        }
/* The "month, year" display */
div.datePicker th span.month-display,
div.datePicker th span.year-display
        {
        display:inline;
        text-transform:uppercase;
        letter-spacing:1px;
        font:normal 1.2em Verdana, Sans-Serif;
        cursor:default;          
        }
/* Next & Previous (month, year) buttons */
div.datePicker th span.prev-but,
div.datePicker th span.next-but
        {
        font-weight:lighter;
        font-size:2.4em;
        font-family: georgia, times new roman, palatino, times, bookman, serif;
        cursor:pointer !important;
        }
/* Hover effect for Next & Previous (month, year) buttons */
div.datePicker th span.prev-but:hover,
div.datePicker th span.next-but:hover,
div.datePicker th span.today-but:hover
        {
        color:#a84444;
        }
/* Today button */
div.datePicker th span.today-but
        {
        text-align:center;
        margin:0 auto;
        font:normal 1em Verdana, Sans-Serif;
        width:100%;
        text-decoration:none;
        padding-top:0.3em;
        text-transform:uppercase;
        vertical-align:middle;
        cursor:pointer !important          
        }
/* Disabled buttons */ 
div.dp-disabled th span.prev-but,
div.dp-disabled th span.next-but,
div.dp-disabled th span.today-but,
div.dp-disabled th span.prev-but:hover,
div.dp-disabled th span.next-but:hover,
div.dp-disabled th span.today-but:hover,
div.datePicker th span.prev-but.fd-disabled:hover,
div.datePicker th span.next-but.fd-disabled:hover,
div.datePicker thead th span.fd-disabled,
div.datePicker th span.fd-disabled:hover
        {
        color:#aaa;
        cursor:default !important; 
        opacity:1;        
        }   
/* The mon, tue, wed etc day buttons */
div.datePicker th span.fd-day-header
        {mplates/v71/date-picker-v5/
        text-align:center;
        margin:0 auto;
        font:900 1em Verdana, Sans-Serif;
        text-decoration:none;
        text-transform:lowercase;
        cursor:pointer;          
        }
/* The table */
div.datePicker table
        {               
        margin:0;
        padding:0;
        border:1px solid #ccc;        
        background:#fff url(/assets/temedia/gradient-e5e5e5-ffffff.gif) repeat-x 0 -20px;
        text-align:center;
        border-spacing:2px;
        padding:0.3em; 
        width:auto;             
        empty-cells:show;   
        border-radius:0.8em;             
        -moz-border-radius:0.8em;
        -moz-box-shadow:0px 0px 5px #aaa;               
        }
/* Common TD & TH styling */
div.datePicker table td,
div.datePicker table tbody th
        {                 
        border:0 none;
        padding:0;
        text-align:center;
        vertical-align:middle;               
        cursor:pointer;
        background:#fff url(/assets/temedia/gradient-e5e5e5-ffffff.gif) repeat-x 0 -40px;
        width:3em;
        height:3em;   
        overflow:hidden;      
        outline:transparent none 0px;        
        border:1px solid #ccc;
        text-transform:none;         
        -moz-border-radius:2px;         
        border-radius:2px;
        }
div.datePicker table td:focus,
div.datePicker table td:active
        {
        outline:0 none red;
        }
div.datePicker table th
        {
        border:0 none;
        padding:0;        
        font-weight:bold;
        color:#222;
        text-align:center;
        vertical-align:middle; 
        text-transform:none;        
        }
div.datePicker table thead th
        {
        height:auto !important;
        }
div.datePicker table tbody th
        {                          
        border:1px solid #dcdcdc;        
        }
/* Week number display */
div.datePicker table thead th.date-picker-week-header,
div.datePicker table tbody th.date-picker-week-header
        {
        font-style:oblique;  
        background:transparent;
        cursor:default;         
        }
div.datePicker table thead th.date-picker-week-header
        {
        cursor:help;
        border:0 none;
        padding:0 0 0.2em 0;
        }
/* tfoot status bar */
div.datePicker tfoot th
        {
        cursor:default;
        font-weight:normal;
        text-transform:uppercase;
        letter-spacing:0.1em;
        border:0 none;
        background:#fff;
        height:2.8em;
        }
/* TD cell that is _not_ used to display a day of the month */
div.datePicker table tbody td.date-picker-unused
        {
        background:#fff url(/assets/temedia/backstripes.gif);
        border-color:#dcdcdc;          
        cursor:default !important;
        }

/* The TH cell used to display the "month, year" title */
div.datePicker table thead th.date-picker-title
        {
        width:auto;
        height:auto;
        padding:0.4em 0;
        }
/* The "mon tue wed etc" day header styles */
div.datePicker table thead th.date-picker-day-header
        {
        text-transform:lowercase;
        cursor:help;
        height:auto;
        }

div.datePicker table tbody td.month-out.date-picker-highlight 
        {
        color:#aa8866 !important;
        }
/* The "highlight days" style */
div.datePicker table tbody td.date-picker-highlight,
div.datePicker table thead th.date-picker-highlight
        {
        color:#a86666 !important;
        }
/* The "active cursor" style */
div.datePicker table tbody td.date-picker-hover
        {
        background:#fff url(/assets/temedia/bg_header.jpg) no-repeat 0 0;
        cursor:pointer;
        border-color:rgb(100,130,170) !important;
        color:rgb(100,130,170); 
        text-shadow: 0px 1px 1px #fff;                
        }

/* The "todays date" style */
div.datePicker table tbody td.date-picker-today
        {
        background:#fff url(/assets/date-picker-v5/media/bullet2.gif) no-repeat 0 0;
        color:rgb(100,100,100) !important;
        }

/* The "disabled days" style */
div.datePicker table tbody td.day-disabled
        {          
        background:#fff url(/assets/temedia/backstripes.gif) no-repeat 0 0;
        color:#aaa !important;
        cursor:default;
        text-decoration:line-through;
        } 
div.datePicker table tbody td.month-out 
        {
        border-color:#dce0e0;
        color:#aaa !important;
        background:#fff url(/assets/temedia/gradient-e5e5e5-ffffff.gif) repeat-x 0 -40px;                             
        } 
/* The "selected date" style */
div.datePicker table tbody td.date-picker-selected-date
        {
        color:#333 !important;
        border-color:#333 !important;
        }
/* The date "out of range" style */
div.datePicker table tbody td.out-of-range,
div.datePicker table tbody td.not-selectable
        {           
        color:#ccc !important;
        font-style:oblique;
        background:#fcfcfc !important;
        cursor:default !important;              
        } 
/* Week number "out of range" && "month-out" styles */
div.datePicker table tbody th.month-out,
div.datePicker table tbody th.out-of-range
        {
        color:#aaa !important;
        font-style:oblique;
        background:#fcfcfc !important;          
        }
/* week numbers "out of range" */
div.datePicker table tbody th.out-of-range
        {
        opacity:0.6;
        filter:alpha(opacity=60);
        }  
/* Used when the entire grid is full but the next/prev months dates cannot be selected */
div.datePicker table tbody td.not-selectable
        {         
        opacity:0.8;
        filter:alpha(opacity=80);        
        }
div.datePicker table tbody tr
        {
        display:table-row;
        }
div.datePicker table tfoot sup
        {
        font-size:0.86em;
        letter-spacing:normal;
        text-transform:none;
        height: 0;
	line-height: 1;
	position: relative;
	top: -0.2em;	
	vertical-align: baseline !important;
	vertical-align: top;  
        }
div.datePicker table thead th.date-picker-day-header,
div.datePicker table thead span.month-display,
div.datePicker table thead span.year-display
        {            
        text-shadow: 0px 1px 1px #fff;                            
        }
/* You can add focus effects (for everything but IE6) like so: */

div.datepicker-focus table.datePickerTable
        {
        border-color:#999 !important;         
        }
div.datePicker table tbody tr td:focus,
div.datePicker table tbody td.date-picker-hover 
        {
        overflow:hidden;
        outline:0px solid #ff0000;        
	-moz-outline: 0 none;
	-o-highlight:0 none;
	color:rgb(100,130,170) !important;        	
        }
div.static-datepicker table
        {
        -moz-box-shadow:0 0 0 transparent;
        
        }               
div.datepicker-focus table
        {
        /* Naughty, naughty - but we add a highlight using the table's border colour */
        outline:none;
         -moz-box-shadow:0px 0px 5px #aaa;         
        }    
       *:-o-prefocus{outline : -o-highlight-border;}
 
/* INTERNET EXPLORER WOES
   ======================
   
   Hover Effects
   -------------
   
   IE cannot deal with :focus on the TR so the datePicker script adds the class "dp-row-highlight" to the
   row currently being hovered over. This should enable you to add hover effects if desired.
   
   e.g. the following rule will highlight the cell borders in another colour when a row is moused over,
   it looks like crap though so I didn't include the rule within the demo:
   
div.datePicker table tbody tr.dp-row-highlight td
        {
        border-color:#aaa;
        }
*/

/* Remove the images for Internet Explorer <= v6 using the "* html" hack  
   This is a workaround for a nasty IE6 bug that never caches background images on dynamically created DOM nodes
   which means that they are downloaded for every cell for every table - nasty! */    
* html div.datePicker table td
        {
        background-image:none;
        }
* html div.datePicker table td.date-picker-unused
        {
        background:#f2f2f2;
        }
body.fd-drag-active 
        {
        -webkit-user-select:none;
        }
/* Chrome has problems with the -webkit-box-shadow and -webkit-border-radius styles together 
   Remove one or the other to get things looking less ugly */       
@media screen and (-webkit-min-device-pixel-ratio:0) {
        div.datePicker table
                {
                border-spacing:0.3em;
                /* Naughty, naughty */
                -webkit-box-shadow:0px 0px 5px #aaa;                 
                -webkit-border-radius:0.8em;                
                }          
        div.static-datepicker table
                {
                -webkit-box-shadow:0 0 0 transparent;
                } 
        div.datepicker-focus table
                {        
                -webkit-box-shadow:0px 0px 5px #aaa;       
                }       
        div.datePicker table td,
        div.datePicker table tbody th
                {
                padding:0.1em;
                -webkit-border-radius:2px;
                }
        div.datePicker table tbody td.date-picker-hover
                {                
                -webkit-box-shadow:0px 0px 1px rgb(100,130,170);
                }       
}















#knoppen a.date-picker-control:link,
#knoppen a.date-picker-control:visited
        {
        position:relative;
        /* Moz & FF */
        display: -moz-inline-stack;
        border:0 none;
        padding:0;
        margin:0 0 0 4px;
        background: url(/libs/date-picker-v5/media/cal.png) no-repeat 50% 50%;
        min-width:16px;
        line-height:1;
        cursor:pointer;
        visibility:visible;
        text-decoration:none;
        vertical-align:top;         
        }
#knoppen a.date-picker-control:hover,
#knoppen a.date-picker-control:active,
#knoppen a.date-picker-control:focus,
#knoppen a.dp-button-active:link,
#knoppen a.dp-button-active:visited,
#knoppen a.dp-button-active:hover,
#knoppen a.dp-button-active:active,
#knoppen a.dp-button-active:focus
        {
        background: url(/libs/date-picker-v5/media/cal.png) no-repeat 50% 50% !important;
        }
/*  libs\css\pages\klanten.css  */
#klantenlijst{
    max-width:100%;
    width:100%!important;
}

#klantenlijst th::first-letter{
    text-transform:uppercase;
}

.klantenpagina .panel-body{
    padding:0px;
}

.klantenpagina .panel-heading{
    margin-bottom:0px;
}

.klantenpagina .panel-heading .row {
    display: block;
}

#klantenlijst_length{
    float:right;
    height:36px;
    margin-right:15px;
}

#klantenlijst_filter{
    display:inline-block;
    float:left;
    margin-left:15px;
    margin-top:-5px;
}

#klantenlijst_info{
    padding-left:15px;
}

#klantenlijst_wrapper {
    padding-top: 10px;
    padding-bottom: 10px;
}

.panel-heading .row{
    position:relative;
    top:10px;
    
}

#klantenlijst tr:hover{
    cursor:pointer;
}