/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */
@font-face {
    font-family: 'kix';
    src: url("kix.ttf") format("truetype");
}

html{
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}
::-moz-selection{
    background: #b3d4fc;
    text-shadow: none;
}
::selection{
    background: #b3d4fc;
    text-shadow: none;
}
hr{
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
audio,
canvas,
iframe,
img,
svg,
video{
    vertical-align: middle;
}
fieldset{
    border: 0;
    margin: 0;
    padding: 0;
}
textarea{
    resize: vertical;
}
.browserupgrade{
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

input[type=text], input[type=button], input[type=password], input[type=submit], textarea, select{
    -webkit-appearance:none;
}
option{
    font-family: Arial;
    font-size: 13px;
}
.kix{
    font-family:'kix';
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html{
    font-family:'f_r';
    font-size:13px;
}
b, strong{
    font-family:'f_b';
}
body{
    background:#F7F9FC;
    padding:0;
    margin:0 0 0 0;
}
a{
    text-decoration:none;
    color:#3695F4;
}
a:hover{
    color:#000;
}

h3{
    font-family:'f_sb';
    font-size:24px;
    margin:0 0 15px 0;
    padding:0;
}

h4{
    font-family:'f_sb';
    font-size:18px;
    margin:0 0 15px 0;
    padding:0;
}

#form.loginform{
    margin-left:auto;
    margin-right:auto;
    border:1px solid #3695F4;
    padding:10px;
    width:300px;
    background:#FFF;
}
#form.loginform input{
    font-size:14px;
    padding:5px;
    border-radius:0;
    border:none;
    border-bottom:1px solid #B0D2F4;
    margin-bottom:10px;
    font-family:'f_r';
    background:#F7F9FC;
}
#form.loginform input[type=submit]{
    background:#3695F4;
    color:#FFF;
    border:none;
    font-family:'f_sb';
    padding:5px;
}
#form.loginform input[type=submit]:hover{
    background:#03509E;
    cursor:pointer;
}

.box{
    font-family:'f_r';
    color:#FFF;
    padding:7px 5px 7px 5px;
    margin-top:5px;
    margin-bottom:5px;
}
.box a{
    color:#FFF;
    text-decoration:underline;
}
.box a:hover{
    color:#FFF;
    text-decoration: none;
}
.error{
    background:#FF7474;
}
.warning{
    background:#FFE5BA;
    color:#E28F00;
}
.valid{
    background:#2FB592;
}
.info{
    background:#53A0BC;
}
.box .grijs{
    color:#000 !important;
}

.belastingdienst tr td:nth-child(1){
    font-family:'f_sb';
    padding:5px;
}

#navigatie{
    width:100%;
    min-height:40px;
    background:#062535;
    top:0;
    padding-bottom:10px;
}
#save{
    position:absolute;
    top:5px;
    right:5px;
    width:10px;
    height:10px;
    background:rgba(255,255,255,0.2);
    border-radius:20px;
}

#navigatie ul{
    list-style-type:none;
    padding:0;
    margin:0 0 0 15px;
}
#navigatie ul li{
    padding:0;
    margin:7px 5px 0 0;
    display:inline-block;
}
#navigatie ul li a {
    color: #fff;
    display: inline-block;
    font-size: 14px;
    font-family:'f_sb';
    position: relative;
    padding:5px 7px 5px 7px;
    border-radius:3px;
}
#navigatie ul li a.active{
    background:#3A76C9;
}
#navigatie ul li a:hover{
    background:#03509E;
}

td.nummer, td.selected, td.punten{
    width:27px;
    height:27px;
    text-align:center;
    font-size:12px;
    cursor:pointer;
    font-family:'f_sb';
}
td.nummer, td.punten{
    background:rgba(54, 149, 244, 0.2);
}
td.nummer:hover, td.punten:hover{
    background:#8ABAEA;
}
td.nummer:hover a, td.punten:hover a{
    color:#FFF;
}
td.selected{
    background:#3695F4;
}
td.nummer a, td.punten a{
    color:#3695F4;
    text-decoration:none;
    display:inline-block;
    width:100%;
}
td.selected a{
    color:#FFF;
    text-decoration:none;
    display:inline-block;
    width:100%;
}
td.pagina{
    padding-right:5px;
    font-family:'f_b';
}



@media all and (min-width:1241px){
    #content{
        width:1200px;
        padding:10px 20px 10px 20px;
    }
}
@media all and (max-width:1210px){
    #content{
        width:calc(100% - 20px);
        padding:10px;
    }
}
h1{
    margin:0 0 10px 0;
    padding:0;
}
h2{
    margin:0 0 10px 0;
    padding:0 0 3px 0;
    font-size:24px;
    font-family:'f_sb';
    color:#3695F4;
    border-bottom:2px solid #3695F4;
}

.button{
    padding:5px;
    font-family:'f_sb';
    color:#FFF;
    cursor:pointer;
    border:none;
}
.button:active{
    position:relative;
    top:2px;
}
.button:not(.buttonGroen):not(.buttonRood):not(.buttonZwart):not(.buttonIng){
    background:#3695F4;
}
.button:not(.buttonGroen):not(.buttonRood):not(.buttonIng):hover{
    background:#03509E;
    cursor:pointer;
    color:#FFF;
}
.buttonGroen{
    background:#2FB592;
}
.buttonGroen:hover{
    background:#16896A;
    color:#FFF;
}
.buttonRood{
    background:#FF7474;
}
.buttonRood:hover{
    background:#C43636;
    color:#FFF;
}
.buttonZwart{
    background:#000;
}
.buttonIng{
    font-size:13px !important;
    background:#FF6600;
    padding:3px 5px 3px 5px;
    border-bottom:none !important;
}
.buttonIng:hover{
    background:#DC5901;
    color:#FFF;
}
.rood{
    color:#FF7474;
    font-family:'f_sb';
}
a.rood:hover{
    color:#C43636;
}
.groen{
    color:#2FB592;
    font-family:'f_sb';
}
a.groen:hover{
    color:#C43636;
}
.buttonSmall{
    padding:2px 3px 2px 2px;
    font-size:12px;
}

.factuurForm{
    padding:10px;
    background:#FFF;
    box-shadow:3px 3px 15px rgba(0,0,0,0.1);
    margin-bottom:35px;
}
.factuurForm .form{
    width:100%;
}
table.form tr:not(item) td:nth-child(1){
    font-size:14px;
    font-family:'f_sb';
    vertical-align:top;
    padding:5px;
}
table.form input[type=text]{
    font-size:14px;
    padding:5px;
    border-radius:0;
    border:none;
    border-bottom:1px solid #B0D2F4;
    font-family:'f_r';
    background:#F7F9FC;
}
table.form tr.kop:not(item) td{
    font-size:18px;
    font-family:'f_l';
    padding-bottom:10px;
}
.cpersonen{
    width:100%;
}
.cpersoon{
    display:inline-block;
    font-family:'f_l';
    font-size:12px;
    margin:0 10px 10px 0px;
    box-shadow:0px 0px 5px rgba(0,0,0,0.1);
    padding:5px;
}

.filter{
    padding:3px 10px 3px 5px;
    border:2px solid #000;
    color:#000;
}
.filter i{
    color:#FF7474;
}
.filter:hover{
    background:#FF7474;
    color:#FFF;
    border:2px solid #FF7474;
}
.filter:hover i{
    color:#FFF;
}
table.overzicht{
    margin:10px 0 10px 0;
    width:100%;
}
table.overzicht tr td{
    padding:5px;
    vertical-align: top;
}
table.overzicht tr:not(.kop) td{
    border-bottom:1px solid #E1E8F1;
    padding-bottom:15px;
}
table.overzicht tr.kop td{
    font-weight:800;
    border-bottom:2px solid #3695F4;
}
table.overzicht tr td .button{
    padding:3px;
}
table.overzicht tr td .kix{
    font-size:9px;
}

.linkBold{
    font-family:'f_sb';
    color:#000;
}
.linkBold a{
    color:#000;
}
.linkBold a:hover{
    color:#3695F4;
}
.factuur_offerte tr:nth-of-type(even) td{
    background:#FFF;
}


.factuur_offerte{
    table-layout:fixed;
}

.factuur_offerte tr td:nth-child(1){
    width:80px;
    font-family:'f_sb';
}
.factuur_offerte tr td:nth-child(2){
    width:35%;
}
.factuur_offerte tr td:nth-child(3){
    width:65%;
}
.factuur_offerte tr td:nth-child(4){
    width:80px;
}
.factuur_offerte tr td:nth-child(5){
    width:80px;
    text-align:right;
    font-family:'f_sb';
}
.factuur_offerte tr td:nth-child(6){
    width:90px;
    text-align:center;
}
.factuur_offerte tr td:nth-child(7){
    width:30px;
}

.factuur_offerte tr td:nth-child(2) a, 
.factuur_offerte tr td:nth-child(3) a{
    color:#000;
    font-family:'f_r';
}
.factuur_offerte tr td:nth-child(2) a:hover,
.factuur_offerte tr td:nth-child(3) a:hover{
    color:#3695F4;
}

.status{
    padding:4px;
    color:#FFF;
    letter-spacing:-0.025em;
    font-family:'f_sb';
    font-size:10px;
    cursor:pointer;
}
.aangemaakt{
    background:#3695F4;
}
.aangemaakt:hover{
    background:#1669BC;
}
.openstaand{
    background:#FFCD3A;
    text-shadow:0px 0px 3px rgba(0,0,0,0.2);
}
.openstaand:hover{
    background:#CC9D1E;
}
.verzonden, .betaald{
    background:#2FB592;
}
.verzonden:hover, .betaald:hover{
    background:#16896A;
}
.verlopen{
    background:#E0502E;
}
.verlopen:hover{
    background:#B5371B;
}
.oninbaar{
    background:#494949;
}
.oninbaar:hover{
    background:#000;
}
.overzichtTitel{
    font-size:18px;
    font-family:'f_sb';
    margin-bottom:-10px;
}
.status:hover{
    color:#FFF;
}

.small{
    font-size:10px;
    font-family:'f_l';
}

textarea{
    font-family:roboto;
    font-size:14px;
    padding:5px;
    border-radius:0;
    border:none;
    border-bottom:1px solid #B0D2F4;
    font-family:'f_l';
    background:#F7F9FC;
}

.nieuwContactpersoon td:nth-child(1){
    vertical-align: top;
}
.nieuwContactpersoon td:nth-child(2) table{
    background:rgba(247, 249, 252,0.5);
    padding:5px;
}
/* ==========================================================================
   Actiescherm
   ========================================================================== */

.actiecontainer{
    width:100%;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    z-index:998;
    background:rgba(7,63,119,0.8);
}
.actiesluit{
    position:fixed;
    top:20px;
    right:40px;
    background:#FF7474;
    color:#FFF;
    padding:5px;
    cursor:pointer;
}
.actiesluit:hover{
    background:#C43636;
}
.actiescherm{
    width:calc(100% - 80px);
    background:#FFF;
    height:calc(100vh - 80px);
    padding:10px;
    box-shadow:0px 0px 10px rgba(0,0,0,0.2);
    margin-top:20px;
    margin-left:20px;
    overflow-y:auto;
}

/* ==========================================================================
   Confirmscherm
   ========================================================================== */

.confirmcontainer{
    width:100%;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    z-index:998;
    background:rgba(7,63,119,0.8);
}
@media all and (min-width:601px){
    .confirmscherm{
        width:580px;
    }
}
@media all and (max-width:600px){
    .confirmscherm{
        width:calc(100% - 20px);
    }
}
.confirmscherm{
    position:relative;
    background:#FFF;
    padding:10px 10px 15px 10px;
    box-shadow:0px 0px 10px rgba(0,0,0,0.2);
    margin-left:auto;
    margin-right:auto;
}

.confirmscherm .confirmKop{
    font-size:20px;
    font-family:'f_l';
    color:#3695F4;
}

.confirmVraag{
    padding:10px;
    font-family:'f_l';
    font-size:14px;
    margin-bottom:15px;
}
.confirmVraag::before{
    content:'';
    font-family:'FontAwesome';
    padding-right:10px;
    color:#000;
    font-size:16px;
}
.confirmscherm table{
    width:100%;
}
.confirmscherm tr td:nth-child(1){
    font-family:'f_sb';
    width:150px;
    font-size:14px;
    vertical-align: top;
}
.confirmscherm tr td label{
    padding-bottom:10px;
}

.actie{
    color:#FFF;
    font-size:20px;
    font-family:'f_l';
    padding:5px;
    margin:5px 0 5px 0;
}
.actie_verzend{
    background:#3695F4;
}
.actie_verzend:hover{
    background:#1669BC;
}
.actie_betaling{
    background:#2FB592;
}
.actie_betaling:hover{
    background:#16896A;
}

/* 
   Laden
            */

#laden{
    width:100%;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    z-index:998;
    background:rgba(7,63,119,0.8);
}
#laden div{
    position:absolute;
    top:calc(50% - 45px);
    text-align:center;
    width:100%;
    color:#FFF;
    font-family:'f_b';
    font-size:18px;
}

/* ==========================================================================
   Dropdown
   ========================================================================== */

/* .dropdown{
    position:relative;
}
.dropdown div{
    top:0;
    left:0;
    z-index:1000;
    width:310px;
    position:absolute;
    box-shadow:2px 2px 10px rgba(0,0,0,0.2);
    background:#3CC4A8;
} 
.dropdown div ul{
    list-style-type:none;
    margin:0;
    padding:0;
}
.dropdown div ul li{
    width:calc(100% - 10px);
    padding:5px;
    cursor:pointer;
}
.dropdown div ul li:not(.dropdownSelected):nth-of-type(odd){
    background:#F0F5FA;
}
.dropdown div ul li:not(.dropdownSelected):nth-of-type(even){
    background:#F7F9FC;
}
.dropdown div ul li.dropdownSelected{
    background:#3695F4;
    color:#FFF;
}*/
span.dropdown::after{
    content: attr(data-content);
    font-family:'FontAwesome';
    font-size:16px;
    color:#3695F4;
    position:relative;
    left:-15px;
}
/* ==========================================================================
   Afwijkend adres
   ========================================================================== */

span.afwijkend::after{
    content: attr(data-content);
    font-family:'f_r';
    position:relative;
    left:5px;
    cursor:pointer;
    color:#3695F4;
}
span.afwijkend:hover::after{
    color:#000;
}
.afwijkend_veld{
    font-family:'f_l';
    color:#3695F4;
    opacity:0.3;
    cursor:pointer;
}
.afwijkend_veld:hover{
    opacity:1;
}

/* ==========================================================================
   Datepicker
   ========================================================================== */

.ui-datepicker{
    background:#FFF;
    box-shadow:1px 1px 10px rgba(0,0,0,0.15);
}
.ui-datepicker i.fa:hover{
    color:#279BDD;
    cursor:pointer;
}
.ui-datepicker-header{
    background:#262930;
    color:#FFF;
    padding:5px;
    text-align:center;
}
.ui-icon-circle-triangle-w, .ui-icon-circle-triangle-e{
    color:#FFF !important;
}
.ui-icon-circle-triangle-w{
    position:absolute;
    left:5px;
}
.ui-icon-circle-triangle-e{
    position:absolute;
    right:5px;
}
.ui-corner-all:hover{
    text-decoration:none;
}
.ui-datepicker-calendar{
    padding:5px;
}
.ui-datepicker-calendar td{
    width:25px;
    height:25px;
    text-align:center;
    vertical-align:center;
}
.ui-datepicker-calendar td a{
    text-decoration:none;
    display:inline-block;
    width:25px;
    height:22px;
    background:#FFF;
    padding-top:3px;
}
.ui-datepicker-today a{
    background:#262930 !important;
    color:#FFF;
}
.ui-datepicker-today:hover a{
    background:#FFF !important;
    color:#279BDD;
}
.ui-datepicker-current-day a{
    background:#279BDD !important;
    color:#FFF;
}
.ui-state-default:hover{
    background:#BAE5FC;
}

/* ==========================================================================
   Factuur
   ========================================================================== */

.factuurnummer_jaar{
    color:#999;
    padding:5px;
    background:#EAEAEA;
    border-bottom:#999 1px solid;
    font-size:14px;
}
.factuurConcept, .offerteConcept{
    background:#74879C;
    padding:5px;
    font-size:14px;
    color:#FFF;
    display:inline-block;
}
.factuurConcept:hover, .offerteConcept:hover{
    background:#3CC4A8;
    cursor:pointer;
}
table.adres tr:not(.item) td:nth-child(1){
    width:20px;
    vertical-align: top;
}
table.adres tr:nth-child(1) td:nth-child(1), table.adres tr:nth-child(3) td:nth-child(1){
    background:#F7F9FC;
    padding:2px 3px 2px 3px;
    border-bottom:1px solid #B0D2F4;
}
table.adres tr:nth-child(1) td:nth-child(2), table.adres tr:nth-child(3) td:nth-child(2){
    background:#F7F9FC;
    padding:3px 10px 5px 3px;
    font-size:11px;
    font-family:'f_l';
    border-bottom:1px solid #B0D2F4;
}
table.adres .kix{
    font-size:8px;
}
label{
    cursor:pointer;
}

.items{
    width:100%;
    margin-top:-10px;
    margin-bottom:10px;
}
.item .button{
    padding:2px;
}
.items tr:nth-child(1) td{
    border-bottom:2px solid #E2E8F2;
    padding-bottom:2px;
}
.item td{
    border-bottom:1px solid #F7F9FC;
}
.item input{
    font-size:12px !important;
    padding:3px !important;
    font-family:'f_r' !important;
}
.item td{
    padding:10px 15px 10px 3px !important;
    font-size:12px !important;
}
.item_datum{
    width:65px;
}
.item_datum input{
    width:100%;
}
.item_omschrijving input{
    width:calc(100% - 30px);
}
.item_tarief{
    width:70px;
}
.item_tarief input{
    width:calc(100% - 20px);
}
.item_aantal{
    width:90px;
}
.item_aantal input{
    width:calc(100% - 60px);
}
.item_aantal select, .factuurForm select{
    border:none;
    border-bottom:1px solid #B0D2F4;
    background:#F7F9FC;
    padding:3px;
    font-family:'f_sb';
}
.item_totaal{
    width:60px;
}
.item_btw{
    width:40px;
}
.item_btw input{
    width:calc(100% - 20px);
}
.item_acties{
    width:90px;
    text-align: right;
    padding: 0;
}
.subtotaal td{
    border-top:2px solid #E2E8F2;
    background:#F4F7FC;
    padding-left:5px !important;
}
.subtotaal_btw td{
    background:#F4F7FC;
    padding-left:5px !important;
}
.totaal td{
    background:#E2E8F2 !important;
    padding-left:5px !important;
}
.right{
    text-align:right;
}
option{
    font-size:12px;
}

table.factuurBijlage, table.offerteBijlage{
    background:#F7F9FC;
    border-bottom:2px solid #C0DBF5;
    min-width:300px;
}
table.factuurBijlage td, table.offerteBijlage td{
    font-size:11px !important;
    padding:5px;
}
table.factuurBijlage td select, table.offerteBijlage td select{
    border:none;
    border-bottom:1px solid #B0D2F4;
    background:#FFF;
    padding:3px;
    font-family:'f_sb';
}

div.sneltekst{
    margin-top:5px;
}
span.sneltekst::before{
    content:'';
    font-family:'FontAwesome';
    padding-right:5px;
}
span.sneltekst{
    background:#03509E;
    padding:2px 5px 2px 5px;
    color:#FFF;
    font-family:'f_l';
    cursor:pointer;
}
span.sneltekst:hover{
    background:#3695F4;
}

.pdfTable{
    width:100%;
}
.pdfTable tr:nth-child(1) td{
    font-family:'f_sb';
    border-bottom:2px solid #3695F4;
}
.pdfTable .pdfItem td{
    font-weight:300 !important;
}
.pdfTable tr td:nth-child(1){
    width:160px;
}
.pdfTable tr td:nth-child(2){
    width:140px;
}
.pdfTable tr td:nth-child(4){
    width:210px;
}
.pdfTable tr td:nth-child(5){
    width:160px;
}

/* ==========================================================================
   Tarieven
   ========================================================================== */

.tarieven{
    width:100%;
    margin-top:-10px;
    margin-bottom:10px;
}
.tarief .button{
    padding:2px;
}
.tarieven tr:nth-child(1) td{
    border-bottom:2px solid #E2E8F2;
    padding-bottom:2px;
    font-family:'f_sb';
}
.tarief td{
    border-bottom:1px solid #F7F9FC;
}
.tarief input{
    font-size:12px !important;
    padding:3px !important;
    font-family:'f_r' !important;
}
.tarief td{
    padding:10px 15px 10px 3px !important;
    font-size:12px !important;
}
.tarief_omschrijving input{
    width:calc(100% - 30px);
}
.tarief_tarief{
    width:70px;
}
.tarief_tarief input{
    width:calc(100% - 20px);
}
.tarief_soort{
    width:90px;
}
.tarief_soort input{
    width:calc(100% - 60px);
}
.tarief_soort select{
    border:none;
    border-bottom:1px solid #B0D2F4;
    background:#F7F9FC;
    padding:3px;
    font-family:'f_sb';
}
.tarief_totaal{
    width:60px;
}
.tarief_btw{
    width:40px;
}
.tarief_btw input{
    width:calc(100% - 20px);
}
.tarief_acties{
    width:75px;
}

/* ==========================================================================
   CSV
   ========================================================================== */

.csv{
    width:100%;
}
.csv td{
    padding:5px;
    vertical-align:top;
    border-bottom:1px solid #0F4F8F;
}
.csv tr td:nth-child(1){
    width:150px;
}
.csv tr td:nth-child(2){
    width:150px;
}
.csv tr:nth-child(1) td{
    font-family:'f_sb';
    border-bottom:2px solid #0F4F8F;
}

.csv_import{
    background:#F7F9FC;
}
.csv_import tr:not(.onderkant) td{
    font-size:10px !important;
    border-bottom:none !important;
}
.csv_import tr td:nth-child(1){
    width:25px !important;
}
.csv_import tr td:nth-child(2){
    width:70px !important;
}
.csv_import tr.onderkant td{
    border-top:2px solid #0F4F8F;
    border-bottom:2px solid #0F4F8F;
}

/* ==========================================================================
   Bankafschriften
   ========================================================================== */

.bank_overzicht tr td:nth-child(1){
    font-family:'f_b';
    padding-right:10px;
}
.bank_overzicht tr td:nth-child(2){
    text-align: right;
}

.bankItems{
    width:calc(100% - 10px);
    border-top:1px solid #D7E1F1;
    border-left:1px solid #D7E1F1;
    border-right:1px solid #D7E1F1;
    border-radius:3px;
    margin:25px 0 15px 0px;
    box-shadow:0px 0px 20px rgba(0,0,0,0.1);
}
.bankItem{
    width:calc(100% - 30px);
    border-bottom:1px solid #D7E1F1;
    padding:15px;
}
.bankItem table{
    width:100%;
}
.bankItem table td{
    vertical-align: top;
}
.bankItemDatum{
    width:100px;
    font-family:'f_l';
}
.bankItemInfo{
    padding-left:20px;
    cursor:text;
}
.bankItemInfo i:not(.fa-credit-card){
    color:#3695F4;
}
.bankItemInfo i.fa-credit-card{
    color:#FF6600;
}
.bankItemNaam{
    font-family:'f_r';
}
.bankItemSoort{
    padding-left:20px;
    width:40px;
}
.bankItemBedrag{
    width:100px;
    text-align:right;
    font-family:'f_sb';
}
.bankItemStatus{
    width:100px;
    text-align:right;
    font-family:'f_sb';
}
.status_check, .status_gecheckt{
    font-family:'f_l';
    padding:2px 4px 2px 4px;
}
.status_check{
    background:#3695F4;
    color:#FFF;
}
.status_gecheckt{
    background:#2FB592;
    color:#FFF;
}
.bankItem:hover{
    background:#FFF;
    cursor:pointer;
}
.bankItemProp{
    width:calc(100% - 30px);
    border-bottom:1px solid #D7E1F1;
    padding:15px;
    display:none;
    background:#FFF;
}

.toevoegen i{
    color:#2FB592;
}
.toevoegen:hover i{
    color:#FFF;
}
.status_checked{
    background:#2FB592;
    color:#FFF;
    border:1px solid #2FB592;
}
.factuurGekoppeld{
    background:#2FB592;
    color:#FFF;
    border:1px solid #2FB592;
}
.factuurGekoppeld:before{
    color:#FFF !important;
    content:'';
    font-family:'FontAwesome';
    padding-right:10px;
}
.koppelFactuur{
    padding:5px;
    font-size:12px;
    font-family:'f_sb';
    display:inline-block;
    box-shadow:0px 0px 10px rgba(0,0,0,0.1);
    margin-right:5px;
}
.koppelFactuur:not(.factuurGekoppeld){
    background:#FFF;
    border:1px solid #D7E1F1;
}
.koppelFactuur:not(.toevoegen):not(.factuurGekoppeld):before{
    content:'';
    font-family:'FontAwesome';
    padding-right:10px;
    color:#2FB592;
}
.koppelFactuur:hover{
    border:1px solid #3695F4;
    background:#3695F4;
    color:#FFF;
    cursor: pointer;
}
.koppelFactuur:not(.toevoegen):hover:before{
    color:#FFF;
}
.koppelFactuurTotaalBedrag{
    background:#D7E1F1;
    border:1px solid #D7E1F1;
    color:#000;
    padding:5px;
    font-size:12px;
    font-family:'f_sb';
    display:inline-block;
    box-shadow:0px 0px 10px rgba(0,0,0,0.1);
    margin-right:5px;
}
.koppelFactuurTotaalBedrag i.fa-check{
    color:#2FB592;
}
.koppelFactuurTotaalBedrag i.fa-exclamation-triangle{
    color:#FE7B7B;
}
.overigeInkomsten{
    margin-top:5px;
    padding:5px;
    font-size:12px;
    font-family:'f_sb';
    display:inline-block;
    box-shadow:0px 0px 10px rgba(0,0,0,0.1);
    margin-right:5px;
    border:1px solid #D7E1F1;
}
.overigeInkomsten i{
    color:#3695F4;
}
.overigeInkomsten:hover{
    background:#3695F4;
    color:#FFF;
    border:1px solid #3695F4;
    cursor:pointer;
}
.overigeInkomsten:hover i{
    color:#FFF;
}
.overigeInkomstenSelected{
    margin-top:5px;
    padding:5px;
    font-size:12px;
    font-family:'f_sb';
    display:inline-block;
    box-shadow:0px 0px 10px rgba(0,0,0,0.1);
    margin-right:5px;
    border:1px solid #2FB592;
    background:#2FB592;
    color:#FFF;
    cursor:pointer;
}
.overigeInkomstenSelected i{
    color:#FFF;
}
.mollieKoppeling{
    margin-top:5px;
    padding:5px;
    font-size:12px;
    font-family:'f_sb';
    display:inline-block;
    box-shadow:0px 0px 10px rgba(0,0,0,0.1);
    margin-right:5px;
    border:1px solid #D7E1F1;
}
.mollieKoppeling i{
    color:#3695F4;
}
.mollieKoppeling:hover{
    background:#3695F4;
    color:#FFF;
    border:1px solid #3695F4;
    cursor:pointer;
}
.mollieKoppeling:hover i{
    color:#FFF;
}
.mollieKoppelingSelected{
    margin-top:5px;
    padding:5px;
    font-size:12px;
    font-family:'f_sb';
    display:inline-block;
    box-shadow:0px 0px 10px rgba(0,0,0,0.1);
    margin-right:5px;
    border:1px solid #2FB592;
    background:#2FB592;
    color:#FFF;
    cursor:pointer;
}
.mollieKoppelingSelected i{
    color:#FFF;
}


.kosten{
    margin-top:5px;
    padding:5px;
    font-size:12px;
    font-family:'f_sb';
    display:inline-block;
    box-shadow:0px 0px 10px rgba(0,0,0,0.1);
    margin-right:5px;
    border:1px solid #D7E1F1;
    width:140px;
}
.kosten i{
    color:#3695F4;
}
.kosten:hover{
    background:#3695F4;
    color:#FFF;
    border:1px solid #3695F4;
    cursor:pointer;
}
.kosten:hover i{
    color:#FFF;
}

.kostenProp{
    position:absolute;
    left:160px;
    top:5px;    
    padding:5px;
    font-size:12px;
    box-shadow:0px 0px 10px rgba(0,0,0,0.1);
    border:1px solid #D7E1F1;
    width:calc(100% - 170px);
    height:155px;
}

.kostenPropKosten, .kostenPropPrive, .kostenPropBelastingdienst{
    display:none;
}
.kostenPropSelected{
    margin-top:5px;
    padding:5px;
    font-size:12px;
    font-family:'f_sb';
    display:inline-block;
    box-shadow:0px 0px 10px rgba(0,0,0,0.1);
    margin-right:5px;
    border:1px solid #2FB592;
    background:#2FB592;
    color:#FFF;
    cursor:pointer;
}
.kostenPropSelected i{
    color:#FFF;
}
.kostenTabSelected{
    display:block;
}
.kostenTab table tr td:nth-child(1){
    padding-right:5px;
}
.kostenTab table tr td:nth-child(2){
    font-family:'f_sb';
    padding-right:25px;
}
.kostenTab table input[type=text]{
    font-family:roboto;
    font-size:11px;
    padding:3px;
    border-radius:0;
    border:none;
    border-bottom:1px solid #B0D2F4;
    font-family:'f_l';
    background:#F7F9FC;
}
.kostenTab table input[type=file]{
    font-family:roboto;
    font-size:11px;
}
input[name^="kosten_btw_"]{
    margin-left:3px;
}
.kostenTab table{
    width:100%;
}
.kostenTab table tr td:nth-child(4), .kostenTab table tr td:nth-child(6), .kostenTab table tr td:nth-child(8){
    font-family:'f_sb';
    padding-left:5px;
}
.kostenTab table tr:nth-child(1) td:nth-child(4){
    vertical-align: top;
    width:300px;
}
.kostenTab table tr:nth-child(1) td:nth-child(4) div.kostenBijlage{
    width:calc(100% - 00px);
    height:150px;
    overflow-y:auto;
}
.kostenTab table tr:nth-child(1) td:nth-child(4) input{
    margin-top:5px;
}
.kostenBijlageItem{
    width:calc(100% - 15px);
    margin:3px 0 3px 5px;
    padding:5px 3px 5px 3px;
    box-shadow:0px 0px 5px rgba(0,0,0,0.2);
    position:relative;
}
.kostenBijlageItem a i{
    color:#000;
}
.kostenBijlageItemVerwijder{
    position:absolute;
    top:3px;
    right:3px;
    padding:3px;
    background:#FF7474;
    color:#FFF;
    cursor:pointer;
}
.kostenBijlageItemVerwijder:hover{
    background:#C43636;
}

.bankSelectieTool{
    padding:10px;
    border:1px solid #D7E1F1;
    background:#3695F4;
    color:#FFF;
    display:inline-block;
    box-shadow:0px 0px 5px rgba(0,0,0,0.1);
    cursor:pointer;
    font-family:'f_r';
    vertical-align: top;
}
.bankSelectieTool i{
    color:#FFF;
}
.bankSelectieTool:hover{
    background:#03509E;
}
.bankSelectie{
    display:none;
    width:calc(100% - 30px);
    padding:10px;
    margin-top:5px;
    border:1px solid #D7E1F1;
    background:#FFF;
    box-shadow:0px 0px 5px rgba(0,0,0,0.1);
    font-family:'f_r';
}
.bankSelectie table td{
    vertical-align: top;
}
.bankSelectie table tr.bankKop td{
    font-size:15px;
    font-family:'f_l';
    padding-bottom:0px;
}
.bankSelectie table tr:not(.bankKop) td:nth-child(1){
    font-family:'f_sb';
    padding-right:15px;
    padding-top:2px;
}
.bankSelectie table tr:not(.bankKop) td:nth-child(2){
    padding-right:25px;
    font-family:'f_l';
}
.bankSelectie table tr td input, .bankSelectie table tr td select{
    font-size:13px;
    padding:2px 5px 2px 5px;
    font-family:Roboto;
    font-family:'f_r';
    border:1px solid #D7E1F1;
}
.bankSelectie table tr td input[type=submit]{
    border:none;
}
.bankTotalen{
    display:inline-block;   
    border:1px solid #D7E1F1;
    background:#F0F5FA;
    box-shadow:0px 0px 5px rgba(0,0,0,0.1);
    font-family:'f_r';
    padding:1px 10px 1px 10px;
}
.bankTotalen div.groen{
    display:inline-block;
    width:30px;
}
.bankTotalen div.rood{
    display:inline-block;
    width:30px;
}
.bankTotalen div.af, .bankTotalen div.bij{
    padding-left:10px;
    font-family:'f_sb';
    display:inline-block;
    width:100px;
    text-align:right;
}
.bankTotalen div.verschil, .bankTotalen div.bankGetVerschil, .bankTotalen div.bankVerschil{
    display:inline-block;
}
.bankTotalen div.verschil{
    padding-left:20px;
    font-family:'f_sb';
    color:#3695F4;
}
.bankTotalen div.verschil::before{
    content: '=';
    padding-right:5px;
}
.bankTotalen div.bankGetVerschil, .bankTotalen div.bankVerschil{
    width:100px;
    font-family:'f_sb';
    text-align:right;
}

.opdrachtBedrag{
    width:100%;
    background:#F7F9FC;
    overflow:hidden;
    box-shadow:0px 0px 5px rgba(0,0,0,0.1);
}
.opdrachtBedragInfo{
    width:100%;
    text-align:center;
    padding:3px 0 3px 0;
}
.opdrachtBedragOffertes{
    width:100%;
    background: #FFFFFF;
    box-shadow:0px 0px 5px rgba(0,0,0,0.2);
}
.opdrachtBedragOfferte{
    display:inline-block;
    height:25px;
    background:#3695F4;
    border-right:1px solid #FFF;
    position:relative;
}
.opdrachtBedragFacturen{
    height:25px;
    margin:0;
    background: #FFFFFF;
    box-shadow:0px 0px 5px rgba(0,0,0,0.2);
}
.opdrachtBedragFactuur{
    display:inline-block;
    height:25px;
    background:#1C9B71;
    border-right:1px solid #FFF;
    z-index:5;
    position:relative;
}
.opdrachtBedragOfferte:hover{
    background:#88C2FC;
}
.opdrachtBedragOfferte:hover:after{
    content:attr(data-content);
    position:absolute;
    top:10px;
    left:calc(50% - 75px);
    z-index:99;
    width:100px;
    text-align:center;
    padding:5px;
    background:#FFF;
    box-shadow:0px 0px 5px rgba(0,0,0,0.2);
    white-space: pre;
    font-size:10px;
    font-family:'f_sb';
}
.opdrachtBedragFactuur:hover{
    background:#11D896;
}
.opdrachtBedragFactuur:hover:after{
    content:attr(data-content);
    position:absolute;
    top:10px;
    left:calc(50% - 75px);
    z-index:99;
    width:100px;
    text-align:center;
    padding:5px;
    background:#FFF;
    box-shadow:0px 0px 5px rgba(0,0,0,0.2);
    white-space: pre;
    font-size:10px;
    font-family:'f_sb';
}

.btw_in tr td:nth-child(1){
    width:115px;
}
.btw_in tr td:nth-child(2){
    width:115px;
}
.btw_in tr:not(.kop) td:nth-child(4){
    width:100px;
    text-align:right;
    background:#CDE6FF;
    padding-right:15px;
    border-bottom:1px solid #FFF !important;
}
.btw_in tr:not(.kop) td:nth-child(5){
    width:100px;
    text-align:right;
    background:#9CCEFF;
    border-right:3px #FFF solid;
    padding-right:15px;
    border-bottom:1px solid #FFF !important;
}
.btw_in tr:not(.kop) td:nth-child(6){
    width:100px;
    text-align:right;
    background:#CDE6FF;
    padding-right:15px;
    border-bottom:1px solid #FFF !important;
}
.btw_in tr.kop td:nth-child(4),
.btw_in tr.kop td:nth-child(5),
.btw_in tr.kop td:nth-child(6){
    text-align:right;
    padding-right:15px;
}
.btw_in tr:last-child td,
.btw_uit tr:last-child td{
    background:#14579B;
    color:#FFF;
    font-family:'f_sb';
}
.btw_in tr:last-child td:nth-child(2){
    text-align:right;
    width:100px;
    padding-right:15px;
}
.btw_in tr:last-child td:nth-child(3){
    text-align:right;
    width:100px;
    padding-right:15px;
    border-right:3px solid #FFF;
}
.btw_in tr:last-child td{
    background:#14579B !important;
}

.btw_uit tr:not(.totalen):not(.kop) td:nth-child(5){
    background:#CDE6FF;
    border-bottom:1px solid #FFF;
}
.btw_uit tr td:nth-child(5){
    text-align:right;
    width:70px;
    padding-right:15px;
}
.btw_uit tr:not(.totalen):not(.kop) td:nth-child(6){
    background:#9CCEFF;
    border-bottom:1px solid #FFF;
    border-right:3px solid #FFF;
}
.btw_uit tr td:nth-child(6){
    text-align:right;
    width:70px;
    padding-right:15px;
}
.btw_uit tr:not(.totalen):not(.kop) td:nth-child(7){
    background:#CDE6FF;
    border-bottom:1px solid #FFF;
}
.btw_uit tr td:nth-child(7){
    text-align:right;
    width:70px;
    padding-right:15px;
}
.btw_uit tr:not(.totalen):not(.kop) td:nth-child(8){
    background:#9CCEFF;
    border-bottom:1px solid #FFF;
}
.btw_uit tr td:nth-child(8){
    text-align:right;
    width:70px;
    padding-right:15px;
}
.btw_uit tr:last-child td:nth-child(3){
    text-align:right;
    padding-right:15px;
}
.btw_uit tr:last-child td:nth-child(4){
    text-align:right;
    padding-right:15px;
    border-right:3px solid #FFF;
}
.btw_uit_btw_soorten{
    width:25px;
    font-size:8px;
}
.btw_uit_btw_soorten span{
    background:#3695F4;
    color:#FFF;
    margin-right:2px;
    padding:2px;
}

.btw_overzicht tr.subkop td{
    font-family:'f_sb';
}
tr.subkop td{
    text-align:right;
}

.btw_overzicht tr:not(.kop):not(.totalen) td:nth-child(2){
    border-right:1px solid #FFF;
}
.btw_overzicht tr:not(.kop):not(.totalen) td:nth-child(2),
.btw_overzicht tr:not(.kop):not(.totalen) td:nth-child(3),
.btw_overzicht tr:not(.kop):not(.totalen) td:nth-child(5),
.btw_overzicht tr:not(.kop):not(.totalen) td:nth-child(7),
.btw_overzicht tr:not(.kop):not(.totalen) td:nth-child(9){
    background:#CDE6FF;
    border-bottom:1px solid #FFF;
    text-align:right;
    padding-right:15px;
    width:90px;
}
.btw_overzicht tr:not(.kop):not(.totalen) td:nth-child(4),
.btw_overzicht tr:not(.kop):not(.totalen) td:nth-child(6),
.btw_overzicht tr:not(.kop):not(.totalen) td:nth-child(8){
    background:#9CCEFF;
    border-bottom:1px solid #FFF;
    text-align:right;
    padding-right:15px;
    width:90px;
}
.btw_overzicht tr:not(.kop):not(.totalen) td:nth-child(4),
.btw_overzicht tr:not(.kop):not(.totalen) td:nth-child(8){
    border-right:3px solid #FFF;
}
.btw_overzicht tr.totalen td{
    background:#14579B;
    color:#FFF;
    font-family:'f_sb';
}
.btw_overzicht tr.totalen td:nth-child(3),
.btw_overzicht tr.totalen td:nth-child(5),
.btw_overzicht tr.totalen td:nth-child(7),
.btw_overzicht tr.totalen td:nth-child(9){
    text-align:right;
    padding-right:15px;
}
.btw_overzicht tr.totalen td:nth-child(2),
.btw_overzicht tr.totalen td:nth-child(4),
.btw_overzicht tr.totalen td:nth-child(6),
.btw_overzicht tr.totalen td:nth-child(8){
    text-align:right;
    padding-right:15px;
}
.btw_overzicht tr.totalen td:nth-child(4),
.btw_overzicht tr.totalen td:nth-child(8){
    border-right:3px solid #FFF;
}


.jarenoverzicht tr.subkop td{
    font-family:'f_sb';
}
tr.subkop td{
    text-align:right;
}
.jarenoverzicht tr.kop td{
    border-bottom:2px solid #3695f4;
    font-weight:bold;
}
.jarenoverzicht tr.kop td:nth-child(n+2){
    text-align: right;
}
.jarenoverzicht tr td{
    padding:10px;
}
.jarenoverzicht tr:not(.kop) td:nth-child(1){
    min-width:90px;
}
.jarenoverzicht tr:not(.kop) td:nth-child(2),
.jarenoverzicht tr:not(.kop) td:nth-child(3),
.jarenoverzicht tr:not(.kop) td:nth-child(4),
.jarenoverzicht tr:not(.kop) td:nth-child(5){
    background:#cde6ff;
    border-right:1px solid #FFF;
    border-bottom:1px solid #FFF;
    text-align:right;
    width:100px;
}
.jarenoverzicht tr:not(.kop) td:nth-child(6){
    background:#9cceff;
    border-left:2px solid #FFF;
    border-bottom:1px solid #FFF;
    width:100px;
    text-align: right;
}
/* ==========================================================================
   Overzicht
   ========================================================================== */

@media all and (min-width:1001px){
    .overzichtVak{
        width:calc(calc(100% / 4) - 40px);
        height:250px;
    }
}
@media all and (min-width:701px) and (max-width:1000px){
    .overzichtVak{
        width:calc(calc(100% / 2) - 20px);
        height:200px;
    }
}
@media all and (min-width:501px) and (max-width:700px){
    .overzichtVak{
        width:calc(calc(100% / 2) - 20px);
        height:200px;
    }
}
@media all and (max-width:500px){
    .overzichtVak{
        width:calc(100% - 10px);
        height:200px;
    }
}
.grijs{
    color:rgba(0,0,0,0.6);
}
.overzichtVak{
    margin-right:10px;
    margin-bottom:10px;
    display:inline-block;
    box-shadow:0px 0px 5px rgba(0,0,0,0.1);
    background:#FFF;
    text-align:center;
    vertical-align: top;
}
.overzichtVak .groot{
    font-size:18px;
    font-family:'f_sb';
    letter-spacing:-0.025em;
}
.overzichtVak a{
    text-decoration: none;
}
.overzichtVak a div.link{
    border-bottom:2px solid #3695F4;
    width:calc(100% - 20px);
    margin-left:auto;
    margin-right:auto;
    margin-top:5px;
    margin-bottom:0px;
}
.overzichtVak a:hover div{
    border-bottom:2px solid #000;
}


.overzichtVak div:not(.link){
    width:100%;
    text-align:center;
    padding-top:10px;
}
.overzichtVak .openstaand{
    background:#FFCD3A;
    color:#FFF;
    text-shadow:0px 0px 5px rgba(0,0,0,0.1);
    padding:3px 5px 3px 5px;
    font-family:'f_sb';
}
.overzichtVak .verlopen{
    background:#E0502E;
    color:#FFF;
    padding:3px 5px 3px 5px;
    font-family:'f_sb';
}
.overzichtVak a{
    font-size:20px;
    font-family:'f_b';
    border-bottom:2px solid #3695F4;
    text-decoration:none;
}
.overzichtVak .aangemaakt{
    color:#FFF;
    padding:3px 5px 3px 5px;
    background:#3695F4;
    font-family:'f_sb';
}
.overzichtVak .btw_small td{
    padding:5px;
}
.overzichtVak .btw_small td:nth-child(1){
    text-align:left;
}
.overzichtVak .btw_small td:nth-child(2){
    text-align:right;
    padding-left:25px;
}
.overzichtVak .btw_small{
    margin-left:auto;
    margin-right:auto;
    position:relative;
    top:-10px;
}
.overzichtVak .btw_small .groot{
    font-size:16px;
    font-family:'f_sb';
}

/* ==========================================================================
   Tijd keuze
   ========================================================================== */

.tijdKeuze{
    position:absolute;
    padding:5px;
    background:#FFF;
    box-shadow:0px 0px 10px rgba(0,0,0,0.1);
}
.tijdKeuze table .tijdKop td{
    font-family:'f_sb';
    border-bottom:1px solid #CCC;
}
.tijdKeuze table td{
    padding:4px;
}
.tijdKeuze table .tijdRij td{
    width:20px !important;
}
.tijdKeuze table .tijdRij td:hover{
    background:#3695F4;
    cursor:pointer;
    color:#FFF;
}
.tijdRij td.tijdSelected{
    background:#3695F4;
    color:#FFF;
}
.tijdRij td{
    font-weight:300 !important;
}

/* ==========================================================================
   Kalender
   ========================================================================== */

.kalender{
    width:100%;
}
.kalenderTitel td{
    font-family:'f_sb';
    font-size:24px;
    padding:10px;
    text-align:center;
    color:#3695F4;
}
.kalenderDagen td{
    font-family:'f_b';
    font-size:13px;
    padding:10px;
    border-bottom:2px solid #3695F4;
}
.kalenderDag td{
    width:14%;
    height:150px;
    vertical-align: top;
    padding:10px 0px 0px 10px;
}
.kalenderDag:nth-of-type(odd) td.dag:nth-of-type(odd),
.kalenderDag:nth-of-type(even) td.dag:nth-of-type(even){
    background:rgba(0,0,0,0.02);
}
.kalenderDag:nth-of-type(odd) td.dag:nth-of-type(even),
.kalenderDag:nth-of-type(even) td.dag:nth-of-type(odd){
    background:rgba(0,0,0,0.05);
}
.kalenderDag td.dag:hover{
    background:#DCE9F7 !important;
}
.kalenderDagNummer{
    font-size:24px;
    color:#3695F4;
    position:relative;
    top:-10px;
    font-family:'f_sb';
}
.kalenderItems{
    width:calc(100% - 10px);
    position:relative;
    top:-12px;
}
.kalenderItem .kalenderTijd{
    font-family:'f_r';
}
.kalender .dag{
    cursor:cell;
}
.kalenderItem{
    width:100%;
    overflow:hidden;
    background:#16896A;
    color:#FFF;
    padding:3px;
    font-size:10px;
    line-height:0.95em;
    font-weight:200;    
    cursor:pointer;
    margin-bottom:3px;
}
.weeknummer{
    font-family:'f_sb';
    border-left:2px solid #3695F4;
    width:100px;
    text-align:center;
}
.urentotaal{
    line-height:0.90em;
}
.kalenderMaand td:nth-child(1){
    text-align: right;
    font-family:'f_sb';
}
.kalenderMaand td{
    border-top:2px solid #3695F4;
    padding:10px;
    line-height:0.90em;
    vertical-align: top;
}
.weeknr{
    margin-bottom:10px;
    background:#3695F4;
    color:#FFF;
    text-align:center;
    padding:2px;
}

.kostenoverzicht, 
.investeringen{
    margin-top:-15px;
}
.kostenoverzicht td,
.investeringen td{
    padding:5px 15px 5px 5px;
}
.kostenoverzicht tr td:nth-child(1){
    font-family:'f_r';
    width:400px;
}
.investeringen tr td:nth-child(1){
    font-family:'f_r';
}
.kostenoverzicht tr.kop td{
    font-weight:600;
    font-size:18px;
    border-bottom:2px solid #03509E;
}
.investeringen tr.subkop td{
    font-weight:600;
    border-bottom:2px solid #03509E;
    text-align:left;
}
.kostenoverzicht tr:not(.kop) td,
.investeringen tr:not(.subkop) td{
    border-bottom:1px solid rgba(0,0,0,0.1);
}
.kostenoverzicht tr td:nth-child(2){
    text-align:right;
    width:150px;
    padding-right:5px;
}
.kostenoverzicht tr.totaal td,
.investeringen tr.totaal td{
    border-top:1px solid rgba(0,0,0,0.1);
    border-bottom:2px solid rgba(0,0,0,0.1);
    background:#FFF !important;
    font-weight:600;
}
.investeringen tr td:nth-child(4),
.investeringen tr.totaal td:nth-child(2){
    text-align:right;
    padding-right:5px;
}

/* ====
    Autocomplete
    ==== */

div.autocomplete-container{
    position:relative;
    background:none;
    display:inline-block;
}
div.autocomplete{
    position:absolute;
    left:0;
    border:1px solid #FFF;
    background:#FFF;
    z-index:2000;
    top:28px;
    box-shadow:0px 0px 10px rgba(0,0,0,0.3);
}
@media all and (max-width:440px){
    div.autocomplete{
        width:300px;
    }
}
@media all and (min-width:441px) and (max-width:640px){
    div.autocomplete{
        width:400px;
    }
}
@media all and (min-width:641px){
    div.autocomplete{
        width:600px;
    }
}
div.autocomplete-top:hover{
    opacity:0.05;
}

div.autocomplete-divider{
    background:#062535;
    color:#FFF;
    font-family:'f_b';
    width:calc(100% - 10px);
    padding:5px;
}
div.autocomplete-item{
    width:calc(100% - 10px);
    padding:5px;
    cursor:pointer;
}
div.autocomplete-item-odd{
    background:#FFF;
}
div.autocomplete-item-even{
    background:rgba(230,247,255,0.5);
}
div.autocomplete-item:hover{
    background:#00aced;
    color:#FFF;
}
div.autocomplete-item-selected{
    background:#00aced;
    color:#FFF;
}
div.autocomplete-item-selected:hover{
    background:#00aced;
    color:#FFF;
}
div.autocomplete-item .aantal{
    font-family:'f_b';
    letter-spacing:.1em;
    font-size:10px;
    padding-left:5px;
}
input.has-value{
    border:1px solid #2FB592;
    color:#2FB592;
    font-family:'f_sb' !important;
}
input.has-value:hover{
    border:1px solid #217F65;
    color:#217F65;
}
.autocomplete-veld{
    width:300px;
}

.svfw-media-button{
    background:#FFF;
    padding:5px;
    box-shadow:0px 0px 5px rgba(0,0,0,0.2);
    margin-bottom:5px;
}
.svfw-media-button img{
    width:15px;
    height:15px;
    border: 1px solid #FFF;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    margin-right: 5px;
}
.svfw-media-button:hover{
    background:#e3f2fd;
    cursor:pointer;
}
.svfw-media-afnemer-naam:hover{
    color:#3695f4;
}
.svfw-media-button table{
    width:100% !important;
}
.svfw-media-button table tr td:nth-child(3){
    width:80px !important;
}
.svfw-media-button table tr:not(.kop) td{
    padding:2px !important;
    margin:0 !important;
    font-size:12px !important;
    vertical-align: top !important;
    font-weight:300 !important;
}
.svfw-media-button table tr.kop td{
    padding:2px !important;
    margin:0 !important;
    font-size:12px !important;
    vertical-align: top !important;
    font-family:'f_b';
}
.svfw-media-button table tr td:nth-child(5),
.svfw-media-button table tr td:nth-child(6),
.svfw-media-button table tr td:nth-child(7){
    width:65px !important;
    text-align:right !important;
}

.beeldbank-set{
    background:#FFF;
    padding:5px;
    box-shadow:0px 0px 5px rgba(0,0,0,0.2);
    margin-bottom:5px;
}
.beeldbank-set:hover{
    background:#e3f2fd;
    cursor:pointer;
}
.beeldbank-set-titel:hover{
    color:#3695f4;
}
.beeldbank-set .set-thumbs img{
    width:50px;
    height:auto;
    margin:0 0px 3px 0;    
    transition:all 0.1s linear;
    -moz-transition:all 0.1s linear;
    -o-transition:all 0.1s linear;
    -webkit-transition:all 0.1s linear;
}
.beeldbank-set .set-thumbs img.staand{
    width:auto;
    height:33px;
    margin:0 0 3px 0;
}
.beeldbank-set .set-thumbs img:hover{
    transform:scale(2);
    box-shadow:0 0 10px rgba(0,0,0,0.5);
}
.beeldbank-foto{
    font-size:9px;
    display:inline-block;
    font-weight:200;
    text-align:center;
    margin:0 5px 5px 0;
}
.beeldbank-set .set-thumbs table{
    border-spacing: 0;
    border-collapse: collapse;
    margin:5px 0 5px 0;
}
.beeldbank-set .set-thumbs table tr td{
    font-size:10px;
}
.beeldbank-set .set-thumbs table tr td:nth-child(1){
    padding:0 20px 0 0;
    font-size:10px;
    font-family:'f_r';
}

.beeldbank-set .set-thumbs table tr td:nth-child(2){
    opacity:0.5;
}
.beeldbank-set .set-thumbs table tr td:nth-child(2),
.beeldbank-set .set-thumbs table tr td:nth-child(3){
    padding:0 10px 0 0;
    font-family:'f_l';
    text-align:right;
}

/* ==========================================================================
    BTW afdracht
   ========================================================================== */

.btw-afdracht-batch{
    min-height:100px;
    padding:5px;
    margin:5px;
    border-radius:10px;
    border:3px dashed rgba(0,0,0,0.2);
    transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    -webkit-transition:all 0.2s linear;
}
.btw-afdracht-bevat-items{
    border:3px dashed #81d4fa;
    background:#e0f7fa;
}

.btw-afdracht-batch-item{
    padding:5px;
    width:calc(100% - 20px);
    margin:15px 5px 15px 5px;
    box-shadow:0 0 5px rgba(0,0,0,0.2);
    cursor:grab;
    background:#FFF;
}
.btw-afdracht-batch-item:hover{
    background:#f7f9fc;
}

.btw-afdracht-batch-table td{
    padding:5px;
}
.btw-afdracht-batch-table tr:nth-child(1) td{
    font-family:'f_b';
    border-bottom:2px solid #3695f4;
}
.btw-afdracht-batch-table tr:nth-child(n+2) td{
    border-bottom:1px solid #CCC;
}
.btw-afdracht-batch-table tr:last-child td{
    padding-top:10px;
    border-bottom:none !important;
}
.btw-afdracht-nieuwe-batch-items{
    box-shadow:0 0 5px rgba(0,0,0,0.2);
    width:300px;
    padding:5px;
    background:rgba(0,0,0,0.05);
    border:1px solid #FFF;
    margin-bottom:10px;
    display:none;
}

.btw-afdracht-table{
    border-spacing: 0;
    border-collapse: collapse;
}
.btw-afdracht-table td{
    padding:10px;
}
.btw-afdracht-table tr:nth-child(1) td{
    font-family:'f_b';
    border-bottom:2px solid #3695f4;
}
.btw-afdracht-table tr:nth-child(1) td:nth-child(n+3){
    text-align:right;
}
.btw-afdracht-table tr:nth-child(n+2) td:nth-child(n-2){
    background:#FFF;
    border-bottom:1px solid #cde6ff;
    border-right:1px solid #cde6ff;
}
.btw-afdracht-table tr:nth-child(n+2) td:nth-child(n+3){
    background:#cde6ff;
    border-bottom:1px solid #FFF;
    border-right:1px solid #FFF;
    text-align:right;
}
.btw-afdracht-table tr:nth-child(n+2) td:nth-child(5){
    background:#062535;
    color:#FFF;
}
.btw-afdracht-table tr td:nth-child(6),
.btw-afdracht-table tr td:nth-child(7){
    text-align:center !important;
}
.btw-afdracht-table i.fa-times{
    color:#f44336;
}
.btw-afdracht-table i.fa-check{
    color:#43a047;
}
.btw-afdracht-table tr td:nth-child(6) i{
    cursor:pointer;
}
.btw-afdracht-table tr td:nth-child(6) i:hover{
    transform:scale(1.5);
}

.bank-spaarstorting-optie{
    padding:5px;
    background:#FFF;
    box-shadow:0 0 5px rgba(0,0,0,0.2);
    margin:5px 0 10px 0;
    border-bottom:3px solid #f0f5fa;
}
.bank-spaarstorting-optie .bedrag{
    background:#f0f5fa;
    padding:2px 5px 2px 5px;
    font-family:'f_sb';
}
.bank-spaarstorting-optie{
    padding:5px 5px 5px 10px;
    background:#FFF;
    box-shadow:0 0 5px rgba(0,0,0,0.2);
    margin:5px 0 10px 0;
    cursor:pointer;
}
.bank-spaarstorting-optie .bedrag{
    display:inline-block;
    margin-left:10px;
}
.bank-spaarstorting-optie:hover{
    background:#F3F9FF;
    border-bottom:3px solid #3695f4;
}
.bank-spaarstorting-optie-correct-bedrag{
    border-bottom:3px solid #cfe6df;
}
.bank-spaarstorting-optie-correct-bedrag .bedrag{
    background:#cfe6df;
}
.bank-spaarstorting-optie-geselecteerd{
    background:#CFE6DF;
    border-bottom:2px solid #2fb592;
}
.bank-spaarstorting-optie-geselecteerd .bedrag{
    background:#FFF;
    color:#2fb592;
}

.bank-spaar{
    width:100%;
    border-spacing: 0;
    border-collapse: collapse;
    box-shadow:0 0 15px rgba(0,0,0,0.1);
    margin:15px 0 15px 0;
}
tr.bank-spaar-item td{
    background:#f7f9fc;
    padding:15px;
}
tr.bank-spaar-item td:nth-child(1){
    border-top:1px solid #d7e1f1;
    border-left:1px solid #d7e1f1;
    border-bottom:1px solid #d7e1f1;
    vertical-align: top;
    width:100px;
}
tr.bank-spaar-item td:nth-child(2){
    border-top:1px solid #d7e1f1;
    border-bottom:1px solid #d7e1f1;
    vertical-align: top;
}
tr.bank-spaar-item td:nth-child(3){
    border-top:1px solid #d7e1f1;
    border-bottom:1px solid #d7e1f1;
    border-right:1px solid #d7e1f1;
    vertical-align: top;
    width:100px;
    text-align:right;
    font-family:'f_b';
}
.bank-spaar tr.kop td{
    background:#062535;
    color:#FFF;
    padding:10px 15px 10px 15px;
    font-family:'f_b';
}
.bank-spaar tr.kop td:last-child{
    text-align:right;
}

tr.bank-spaar-transactie td{
    border:none !important;
    padding:0;
}
tr.bank-spaar-transactie tr:nth-child(n+2) td{
    padding:5px 0 0 0 !important;
}

.factuurForm{
    overflow-x: auto;
}
.facturatie-overzicht{
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    background: #FFF;
}
.facturatie-overzicht tr td{
    padding: 8px 5px 8px 5px;
}

.facturatie-overzicht tr td{
    border-bottom: 1px solid #CCC;
    vertical-align: top;
}
.facturatie-overzicht tr:nth-child(1) td{
    font-family: 'f_b';
    background: #FFF;
    border-bottom: 2px solid #00aced;
}
.facturatie-overzicht tr td:nth-child(1){
    width: 175px;
    font-family: 'f_b';
}
.facturatie-overzicht tr td:nth-child(1) a{
    color: #000;
}
.facturatie-overzicht tr td:nth-child(1) a:hover{
    color: #00aced;
}
.facturatie-overzicht tr td:nth-child(2){
    width: 225px;
}
.facturatie-overzicht tr td:nth-child(3){
    width: 140px;
}
.facturatie-overzicht tr td:nth-child(4){
    width: 75px;
}
.facturatie-overzicht tr td:nth-child(6){
    width: 30px;
}

.facturatie-overzicht-status{
    font-family: 'f_sb';
    cursor: pointer;
}
.facturatie-overzicht tr td.facturatie-overzicht-status[data-status='0']{
    background: #CCC;
    font-family: 'f_l';
    color: rgba(0,0,0,0.3);
}
.facturatie-overzicht tr td.facturatie-overzicht-status[data-status='1']{
    color: #000;
    background: #ffe0b2;
}
.facturatie-overzicht tr td.facturatie-overzicht-status[data-status='2']{
    background: #e8f5e9;
    color: #4cae50;
}

.facturatie-overzicht tr:hover td{
    background: #e1f5fe;
}

.facturatie-overzicht tr td:nth-child(6) .ti-x{
    display: none;
    background: #d32f2f;
    color: #FFF;
    padding: 5px;
    margin: -5px 0 -5px 0;
    cursor: pointer;
}
.facturatie-overzicht tr:hover td:nth-child(6) .ti-x{
    display: inline-block;
}
.facturatie-overzicht tr:hover td:nth-child(6) .ti-x:hover{
    background: #b71c1c;
}
.facturatie-overzicht tr:hover td:nth-child(6) .ti-x:active{
    position: relative;
    top: 2px;
}

.form input[type=text]::placeholder{
    color: rgba(0,0,0,0.25);
}
.facturatie-status-set-titel{
    padding: 5px;
    margin: 3px 0 3px 0;
    background: #e3f2fd;
    font-size: 12px;
    width: calc(100% - 20px);
}

.facturatie-status-wijzigen-cel{
    cursor: pointer;
}
.facturatie-status-wijzigen-cel:hover{
    background: #bbdefb !important;
}














































#modal-container{
    width: 100vw;
    padding: 0;
    margin: 0;
    height: 100vh;
    background: rgba(7, 38, 54, 0.5);
    backdrop-filter: blur(5px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}
    #modal-box{
        background: #FFF;
        border-radius: 15px;
        background: #FFF;
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%,-50%);
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
        text-align: center;
    }
    #modal-box .modal-historie{
        width: 600px;
        margin-top: 10px;
        border-spacing: 0px;
        border-collapse: separate;
    }
    #modal-box .modal-historie tr:nth-child(1) td{
        font-family: 'f_b';
        color: #000;
    }
    #modal-box .modal-historie tr td{
        font-size: 13px;
        padding: 5px;
    }
    #modal-box .modal-historie tr:nth-of-type(odd) td{
        background: #e3f2fd;
    }
    #modal-box .modal-historie tr td a .ti{
        text-decoration: none;
    }
    #modal-icon{
        width: 50px;
        height: 50px;
        position: relative;
        left: calc(50% - 25px);
        font-size: 24px;
        border-radius: 25px;
        margin: 45px 0 15px 0;
    }
        #modal-icon[data-soort=error]{
            color: #e53935;
            background: #ffcdd2;
        }
        #modal-icon[data-soort=confirm],
        #modal-icon[data-soort=prompt]{
            color: #039be5;
            background: #bbdefb;
        }
        #modal-icon[data-soort=valid]{
            color: #2e7d32;
            background: #c8e6c9;
        }
        #modal-icon[data-soort=input]{
            color: #039be5;
            background: #bbdefb;
        }
        #modal-icon[data-soort=verplaatsen]{
            color: #8e24aa;
            background: #f3e5f5;
        }
        #modal-icon[data-soort=ordenen]{
            color: #8e24aa;
            background: #f3e5f5;
        }
        #modal-icon[data-soort=delete]{
            color: rgba(244, 67, 54, 1.00);
            background: #ffcdd2;
        }
        #modal-icon[data-soort=info]{
            color: #512da8;
            background: #d1c4e9;
        }
        #modal-icon[data-soort=highlight]{
            color: #ff8f00;
            background: #ffe0b2;
        }
        #modal-icon i{
            position: absolute;
            top: calc(50% - 1px); left: 50%;
            transform: translate(-50%,-50%);
        }
    #modal-tekst{
        width: calc(100% - 30px);
        text-align: center;
        margin: 15px 15px 20px 15px;
        font-size: 16px;
        color: rgba(107, 113, 128, 1.00);
    }
        #modal-box input[type=text]{
            margin: 0 10px 10px 10px;
            font-size: 16px;
            padding: 5px;
        }
    #modal-tekst h3{
        color: #000;
        font-family: 'f_sb';
    }
    #modal-tekst input[type=text]{
        width: 250px;
        padding: 5px;
        font-size: 14px;
        text-align: center;
    }
    #modal-close{
        position: absolute;
        right: 0;
        top: 0;
        color: #bdbdbd;
        font-size: 24px;
        cursor: pointer;
        padding: 10px;
    }
        #modal-close:hover{
            color: #e53935;
        }
        #modal-close:active{
            top: 2px;
        }
    #modal-cancel,
    #modal-check,
    #modal-confirm{
        font-family: 'f_sb';
    }
    #modal-cancel{
        width: 50%;
        text-align: center;
        color: #000;
        background: #f3f4f6;
        border-bottom-left-radius: 15px;
        cursor: pointer;
        display: inline-block;
        padding: 15px 0 15px 0;
    }
    #modal-confirm{
        width: 50%;
        text-align: center;
        color: #FFF;
        padding: 15px 0 15px 0;
        border-bottom-right-radius: 15px;
        cursor: pointer;
        transition:all 0.05s ease-in;
        -moz-transition:all 0.05s ease-in;
        -o-transition:all 0.05s ease-in;
        -webkit-transition:all 0.05s ease-in;
        display: inline-block;
    }   
        #modal-confirm:not(.modal-verwijderen):not(.modal-disabled){
            background: #03a9f4;
        }
            #modal-confirm:not(.modal-verwijderen):not(.modal-disabled):hover{
                background: #0277bd;
            }
        #modal-confirm.modal-verwijderen{
            background: #f44336;
        }
            #modal-confirm.modal-verwijderen:hover{
                background: #b71c1c;
            }
        #modal-cancel:hover{
            background: #e0e0e0;
        }
        #modal-confirm:active,
        #modal-cancel: active,
        #modal-check: active{
            position: relative;
            top: 2px;
        }
        #modal-confirm.modal-disabled{
            background: #bdbdbd;
            color: #000;
            cursor: not-allowed;
        }
    #modal-check{
        width: 100%;
        text-align: center;
        color: #FFF;
        padding: 15px 0 15px 0;
        background: #03a9f4;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        cursor: pointer;
        transition:all 0.05s ease-in;
        -moz-transition:all 0.05s ease-in;
        -o-transition:all 0.05s ease-in;
        -webkit-transition:all 0.05s ease-in;
    }
        #modal-check:hover{
            background: #0277bd;
        }
        #modal-check:active{
            position: relative;
            top: 2px;
        }
    .modal-preview{
        width: 300px;
        height: 200px;
        margin: 0 10px 10px 10px;
        margin-left: auto;
        margin-right: auto;
    }
        .modal-preview img{
            max-width: 100%;
            max-height: 100%;
            box-shadow: 0 0 5px rgba(0,0,0,0.2);
            margin-left: auto;
            margin-right: auto;
        }
        #modal-tekst label{
            background: #CCC;
            padding: 5px;
        }
        .modal-checkbox{
            background: #eef5f8;
            padding: 5px;
            border-radius: 5px;
            margin-bottom: 10px;
            display: inline-block;
            cursor: pointer;
        }
        .modal-checkbox i{
            font-size: 18px;
            position: relative;
            top: 2px;
        }
        .modal-checkbox i.ti-square-check-filled{
            color: #1e88e5;
        }
        .modal-highlight-tekst{
            width: 400px;
            margin: 0 10px 10px 10px;
        }
        .modal-highlight-tekst textarea{
            width: calc(100% - 20px);
            padding: 10px;
            height: 100px;
            font-size: 14px;
        }










        



























/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden{
    display: none !important;
    visibility: hidden;
}

.visuallyhidden{
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus{
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible{
    visibility: hidden;
}

.clearfix:before,
.clearfix:after{
    content: " ";
    display: table;
}

.clearfix:after{
    clear: both;
}

.clearfix{
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print{
    *,
    *:before,
    *:after{
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited{
        text-decoration: underline;
    }

    a[href]:after{
        content: " (" attr(href) ")";
    }

    abbr[title]:after{
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after{
        content: "";
    }

    pre,
    blockquote{
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead{
        display: table-header-group;
    }

    tr,
    img{
        page-break-inside: avoid;
    }

    img{
        max-width: 100% !important;
    }

    p,
    h2,
    h3{
        orphans: 3;
        widows: 3;
    }

    h2,
    h3{
        page-break-after: avoid;
    }
}