@font-face {
                font-family: Barcodeklein;
                src: url('../fonts/barcodeklein/code39.ttf');
            }
            @font-face {
                font-family: Barcodegroot;
                src: url('../fonts/barcodegroot/Gev.NetBarcode.ttf');
            }
            @font-face {
                font-family: FerroRosso;
                src: url('../fonts/ferroRosso/FerroRosso.ttf');
            }
            @font-face {
                font-family: Actionis;
                src: url('../fonts/actionis/actionis.ttf');
            }
            @font-face {
                font-family: MO;
                src: url('../fonts/mo/MO.TTF');
            }
            @font-face {
                font-family: "Wedgie_";
                src: url('../fonts/wedgie/WEDGIE__.TTF');
            }
            @font-face {
                font-family: "Mystic etchings";
                src: url('../fonts/mysticEtchings/Mystic Etchings.ttf');
            }
@page {
    margin: 0cm;
}

.closebuttoncookie{
    position: absolute;
    top: 7px;
    right: 7px;
}

.pointer{
    cursor: pointer;
}

datalist#klantenlist{
  position: absolute;
  background-color: white;
  border: 1px solid blue;
  border-radius: 0 0 5px 5px;
  border-top: none;
  font-family: sans-serif;
  width: calc(100% - 30px);
  z-index: 1;
  max-height: 200px;
  padding: 5px;
  overflow-y: auto;
}

datalist#klantenlist option {
  padding: 4px;
  margin-bottom: 1px;
   font-size: 18px;
  cursor: pointer;
}

.mobile-only{
    display: none;
}

.desktop-only{
    display: block;
}

#page-container>#main-container .content.bigger{
    max-width: 1400px;
}

#page-container>#main-container .content.large{
    max-width: 1920px;
}

#page-container>#main-container .content.extralarge{
    max-width: 2140px;
}

#page-container>#main-container .content.infiniteblok{
    max-width: none;
}

.break-anywhere{
    word-wrap: break-word;
    white-space: break-spaces;
    line-break: anywhere;
}

.break-never{
    white-space: nowrap;
}

.top-0{
    top: 0;
}

.w-auto{
    width: auto;
}
.w-max{
    width: max-content;
}
.w-31{
    width:31%;
}
.w-69{
    width:69%;
}
.w-8p{
    width: 8px;
}
.w-30p{
    width: 30px;
}
.w-40p{
    width: 40px;
}
.w-44p{
    width: 44px;
}
.w-45p{
    width: 45px;
}
.w-50p{
    width: 50px;
}
.w-60p{
    width: 60px;
}
.w-65p{
    width: 65px;
}
.w-70p{
    width: 70px;
}
.w-80p{
    width: 80px;
}
.w-90p{
    width: 90px;
}
.w-100p{
    width: 100px;
}
.w-110p{
    width: 110px;
}
.w-115p{
    width: 115px;
}
.w-120p{
    width: 120px;
}
.w-130p{
    width: 130px;
}
.w-140p{
    width: 140px;
}
.w-145p{
    width: 145px;
}
.w-150p{
    width: 150px;
}
.w-165p{
    width: 165px;
}
.w-166p{
    width: 166px;
}
.w-170p{
    width: 170px;
}
.w-180p{
    width: 180px;
}
.w-200p{
    width: 200px;
}
.w-210p{
    width: 210px;
}
.w-227p{
    width: 227px;
}
.w-240p{
    width: 240px;
}
.w-280p{
    width: 280px;
}
.w-300p{
    width: 300px;
}
.w-470p{
    width: 470px;
}
.w-500p{
    width: 500px;
}
.w-650p{
    width: 650px;
}
.miw-75{
    min-width: 75px;
}
.miw-90p{
    min-width: 90px;
}
.miw-100p{
    min-width: 100px;
}
.miw-110{
    min-width: 110px;
}
.miw-150{
    min-width: 150px;
}
.miw-175{
    min-width: 175px;
}
.miw-200{
    min-width: 200px;
}
.miw-285{
    min-width: 285px;
}
.maw-70{
    max-width: 70px;
}
.maw-90p{
    max-width: 90px;
}
.maw-100{
    max-width: 100px;
}
.maw-100pr{
    max-width: 100%;
}
.maw-110{
    max-width: 110px;
}
.maw-120{
    max-width: 120px;
}
.maw-150{
    max-width: 150px;
}
.maw-170{
    max-width: 170px;
}
.maw-175{
    max-width: 175px;
}
.maw-200{
    max-width: 200px;
}
.maw-290{
    max-width: 290px;
}
.maw-420{
    max-width: 420px;
}
.h-5p{
    height: 5px;
}
.h-30p{
    height: 30px;
}
.h-40p{
    height: 40px;
}
.h-44p{
    height: 44px;
}
.h-45p{
    height: 45px;
}
.h-55p{
    height: 55px;
}
.h-60p{
    height: 60px;
}
.h-65p{
    height: 65px;
}
.h-85p{
    height: 85px;
}
.h-205p{
    height: 205px;
}
.h-270p{
    height: 270px;
}
.mah-45p{
    max-height: 45px;
}
.mah-60p{
    max-height: 60px;
}
.mah-200p{
    max-height: 200px;
}
.mah-330p{
    max-height: 330px;
}
.mah-400p{
    max-height: 400px;
}
.mh-500p{
    max-height: 500px;
}
.p-5p, .table td.p-5p, .table th.p-5p{
    padding: 5px;
}
.p-10p{
    padding: 10px;
}
.p-30p{
    padding: 30px;
}
.f-12p{
    font-size: 12px;
}
.f-10size{
    font-size: 1.0rem;
}
.f-12size{
    font-size: 1.2rem;
}
.f-14p{
    font-size: 14px;
}
.f-18p{
    font-size: 18px;
}
.f-20p{
    font-size: 20px;
}
.f-35p{
    font-size: 35px;
}
.f-44p{
    font-size: 44px;
}
.bottom-0{
    bottom: 0;
}

.mr-15p{
    margin-right: 15px;
}
.mr-30p{
    margin-right: 30px;
}
.mr--15p{
    margin-right: -15px;
}
.mr--30p{
    margin-right: -30px;
}
.mt--15p{
    margin-top: -15px;
}
.mt-2-5r{
    margin-top: 2.5rem;
}
.mt-7r{
    margin-top: 7rem;
}
.mb-20p{
    margin-bottom: 20px;
}
.m-0-auto{
    margin: 0 auto;
}
.ml-auto{
    margin-left: auto;
}
.ml-40p{
    margin-left: 40px;
}
.ml-15p{
    margin-left: 15px;
}
.ml-10p{
    margin-left: 10px;
}

.p-10p{
    padding: 10px;
}

.pr-10p{
    padding-right: 10px;
}
.pr-15p{
    padding-right: 15px;
}
.pr-20p{
    padding-right: 20px;
}

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

.invis{
    visibility: collapse;
}

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

#exportready .select2-container--default .select2-selection--multiple .select2-selection__choice, .select-primary .select2-container--default .select2-selection--multiple .select2-selection__choice{
    background-color: #3f9ce8;
    border-color: #197ed1;
}
#exportready .select2-container--default .select2-selection--multiple .select2-selection__choice__remove, .select-primary .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    color: #fff;
}

/*#leverarea #mainarea .leveritem{
    min-width: 100px;
}*/
#leverarea .headerblok{
    position: sticky;
    position: -webkit-sticky;
    top: -15px;
}
#leverarea #mainarea .headitem{
    white-space: nowrap;
}
#leverarea #mainbarcarea .mainitem, #bijbestellingarea #blocks .infoarea{
    white-space: nowrap;
    overflow-x: hidden;
}
#leverarea #mainarea input.invisibleinput::-webkit-outer-spin-button, #leverarea #mainarea input.invisibleinput::-webkit-inner-spin-button, #bijbestellingarea .leveringblok input.invisibleinput::-webkit-outer-spin-button, #bijbestellingarea .leveringblok input.invisibleinput::-webkit-inner-spin-button, .balans #barea input::-webkit-outer-spin-button, .balans #barea input::-webkit-inner-spin-button, .noarrowsnuminput::-webkit-outer-spin-button, .noarrowsnuminput::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
#leverarea #mainarea input.invisibleinput, #bijbestellingarea .leveringblok input.invisibleinput, .balans #barea input, .noarrowsnuminput{
    appearance: textfield;
    -moz-appearance: textfield;
}
.grayborder{
    border: 1px solid #c6c6c6;
    border-radius: 15px;
    padding: 15px;
}
#leverarea #blocks{
    max-height: 65vh;
    overflow-y: scroll;
}
#leverarea #blocks{
    max-height: 65vh;
    overflow-y: scroll;
}

#bijbestellingarea #blocks .maat{
    width: 65px;
}
.invisibleinput{
    border: none;
    width: 100%;
}

.maxheightklant{
    height:978px;
    overflow-y: scroll;
}

.maxheightfactuur{
    height:652px;
    overflow-y: scroll
}

.tablecut{
    max-width:340px;
    overflow: hidden;
    white-space: nowrap;
}

.table.table-short td{
    padding-top: 0;
    padding-bottom: 0;
}
.table.table-both-short th, .table.table-both-short td{
    padding-top: 0;
    padding-bottom: 0;
}

#faqarea .bg-primary .text-white.active{
    color: #3f9ce8!important;
}

#faqarea .bg-pulse .text-white.active{
    color: #e74c3c!important;
}

#faqarea .bg-earth .text-white.active{
    color: #6eab4d!important;
}

#faqarea .bg-elegance .text-white.active{
    color: #d262e3!important;
}

#faqarea .bg-corporate .text-white.active{
    color: #2facb2!important;
}

#faqarea .bg-black .text-white.active{
    color: #575757!important;
}

#faqarea .bg-flat-light .text-white.active{
    color: #acd2c5!important;
}

.bg-light-secondary{
    background-color: #b6c0c9!important;
}

.border-elegance {
    border-color: #d262e3!important;
}

.border-secondary {
    border-color: #6c757d!important;
}

.text-elegance {
    color: #d262e3!important;
}

.modal-dialog.small{
    width:90%;
    max-width:300px;
    pointer-events: all;
}

.boekhoudfacturenmails{
    position: absolute;
    top: -20px;
    width: calc(100% - 15px);
    bottom: 0px;
}


.border-danger {
    border-color: #ef5350!important;
}
.border-primary {
    border-color: #3f9ce8!important;
}
.border-black {
    border-color: #000!important;
}
.border-success {
    border-color: #9ccc65!important;
}


.modal-dialog.small p.normalsize{
    font-size: 125%;
}

.modal-dialog.medium{
    width:90%;
    max-width:500px;
    pointer-events: all;
}

.modal-dialog.big{
    width:90%;
    max-width:600px;
    pointer-events: all;
}

.modal-dialog.probig{
    width:90%;
    max-width:900px;
    pointer-events: all;
}

.modal-dialog.xlbig{
    width:90%;
    max-width:1100px;
    pointer-events: all;
}

.modal-dialog.pagebig{
    width:90%;
    max-width:1200px;
    pointer-events: all;
}

.modal-dialog.maxbig{
    width:90%;
    max-width:90%;
    pointer-events: all;
}

.btn-outline-light:not([disabled]):not(.disabled).active.dellight{
    color: #ef5350!important;
}

/*Kassa*/
.kassa #kassaarea #tablearea{
    overflow-y: scroll;
    height: 500px;
}
.kassa #kassaarea #historyarea{
    max-height: 300px;
    overflow-y: scroll;
    bottom: 0;
}

/*btn-print*/
.btn-print{color:#fff;background-color:#a3a3a3;border-color:#9c9c9c}
.btn-print.focus,.btn-print:focus,.btn-print:hover{color:#fff;background-color:#9c9c9c;border-color:#a3a3a3}
.btn-print.disabled,.btn-print:disabled,.btn-print:not([disabled]):not(.disabled):active{background-color:#a3a3a3;border-color:#9c9c9c}
.btn-print:not([disabled]):not(.disabled).active,.show>.btn-print.dropdown-toggle{background-color:#9c9c9c;background-image:none;border-color:#a3a3a3}
.btn-print.btn-noborder{border-color:#a3a3a3}
.btn-print.btn-noborder.focus,.btn-print.btn-noborder:focus,.btn-print.btn-noborder:hover{border-color:#9c9c9c}
.btn-print.btn-noborder.disabled,.btn-print.btn-noborder:disabled,.btn-print.btn-noborder:not([disabled]):not(.disabled).active,.btn-print.btn-noborder:not([disabled]):not(.disabled):active{border-color:#a3a3a3}
.show>.btn-print.btn-noborder.dropdown-toggle{border-color:#9c9c9c}

/*btn-excel*/
.btn-excel{color:#fff;background-color:#b3f26b;border-color:#9ee70d}
.btn-excel.focus,.btn-excel:focus,.btn-excel:hover{color:#fff;background-color:#9ee70d;border-color:#b3f26b}
.btn-excel.disabled,.btn-excel:disabled,.btn-excel:not([disabled]):not(.disabled):active{background-color:#b3f26b;border-color:#9ee70d}
.btn-excel:not([disabled]):not(.disabled).active,.show>.btn-excel.dropdown-toggle{background-color:#9ee70d;background-image:none;border-color:#b3f26b}
.btn-excel.btn-noborder{border-color:#b3f26b}
.btn-excel.btn-noborder.focus,.btn-excel.btn-noborder:focus,.btn-excel.btn-noborder:hover{border-color:#9ee70d}
.btn-excel.btn-noborder.disabled,.btn-excel.btn-noborder:disabled,.btn-excel.btn-noborder:not([disabled]):not(.disabled).active,.btn-excel.btn-noborder:not([disabled]):not(.disabled):active{border-color:#b3f26b}
.show>.btn-excel.btn-noborder.dropdown-toggle{border-color:#9ee70d}

/*btn-pdf*/
.btn-pdf{color:#fff;background-color:#fc3832;border-color:#db2f2a}
.btn-pdf.focus,.btn-pdf:focus,.btn-pdf:hover{color:#fff;background-color:#db2f2a;border-color:#fc3832}
.btn-pdf.disabled,.btn-pdf:disabled,.btn-pdf:not([disabled]):not(.disabled):active{background-color:#fc3832;border-color:#db2f2a}
.btn-pdf:not([disabled]):not(.disabled).active,.show>.btn-pdf.dropdown-toggle{background-color:#db2f2a;background-image:none;border-color:#fc3832}
.btn-pdf.btn-noborder{border-color:#fc3832}
.btn-pdf.btn-noborder.focus,.btn-pdf.btn-noborder:focus,.btn-pdf.btn-noborder:hover{border-color:#db2f2a}
.btn-pdf.btn-noborder.disabled,.btn-pdf.btn-noborder:disabled,.btn-pdf.btn-noborder:not([disabled]):not(.disabled).active,.btn-pdf.btn-noborder:not([disabled]):not(.disabled):active{border-color:#fc3832}
.show>.btn-pdf.btn-noborder.dropdown-toggle{border-color:#db2f2a}

.vert{
    margin-top: auto;
    margin-bottom: auto;
}

#page-container.main-content-boxed>#main-container .content.klant, #page-container.main-content-boxed>#main-container .content.product{
    max-width: none;
}

.content.product .maatcol{
    min-width: 90px;
}

#page-container.main-content-boxed>#page-header .content-header{
    max-width: 100%;
}
.ov-y-auto{
    overflow-y: auto;
}
.ov-y-scroll{
    overflow-y: scroll;
}
.w-150{
    width: 150px;
}
.h-150{
    height: 150px;
}
.mah-500{
    max-height: 500px;
}
.w-15{
    width: 15%;
}
.w-10{
    width: 10%;
}
.w-600{
    max-width: 600px;
    width: 100%;
}
.stats .table-scrollable, canvas{
    overflow-x: auto;
    white-space: nowrap;
    display: block;
    overflow-y: auto;
}

.border-5{
    border-width: 5px!important;
}

.previewimage{
    width: 180px;
    height: 180px;
}

.border-10{
    border-width: 10px!important;
}

.dagrow{
    justify-content: space-between;
}

.col.fcol{
    flex-grow: initial;
}
.col.fcol #jaar.form-control.fform{
    width: 110px;
}
.col.fcol #merk.form-control.fform, .col.fcol #filiaal.form-control.fform, .col.fcol #kleur.form-control.fform{
    width: 140px;
}
.col.fcol #seizoen.form-control.fform{
    width: 155px;
}
.col.fcol #afdeling.form-control.fform{
    width: 160px;
}
.col.fcol #web.form-control.fform{
    width: 175px;
}
.col.fcol #groep.form-control.fform, .col.fcol #pstart.form-control.fform, .col.fcol #pstop.form-control.fform{
    width: 185px;
}

#ctxMenu{
    background-color: #eaeaea!important;
}

.productmenusub{
    position: relative;
}

.custsubmenu{
    display: none;
    position: absolute;
    left: 198px;
    top: 0px;
}
.exatoprightbtn{
    right: 15px;
    top: 0px;
}

#ctxMenu .dropdown-item{
    cursor: pointer;
}

.productmenusub:hover > .custsubmenu{
    display:block;
    background-color: #eaeaea!important;
    margin-left: -10px;
}

.productmenusub:hover > .custsubmenu .dropdown-item{
    padding-left: 20px;
}

.f-right{
    float: right;
}

#maatrow .col, #maatrowe .col{
    padding: 0;
}

.dagwidth{
    position: relative;
    width: 14%;
    padding-right: 15px;
    padding-left: 15px;
}

.bg-lightgrey{
    background-color: lightgrey !important;
}

#afdelingblok, #agroepenblok, #leveranciersblok, #maatbalkenblok, #merkenblok, #periodesblok, #optiesblok{
    max-width: fit-content;
    margin: 0 auto;
}

#afdelingentable, #agroepentable, #leverancierstable, #maatbalkentable, #merkentable, #periodestable, #optiesblok{
    max-width: max-content;
    width: fit-content;
    table-layout:fixed;
}

#klantentable th, #klantentable td, #productentable th, #productentable td, #afdelingentable th, #afdelingentable td, #agroepentable th, #agroepentable td, #leverancierstable th, #leverancierstable td, #maatbalkentable th, #maatbalkentable td, #merkentable th, #merkentable td, #periodestable th, #periodestable td, #optiesblok th, #optiesblok td{
    word-break: break-word;
}

.text-split{
    white-space: initial;
    word-break: break-word;
}

.visbtn{
    width: 160px;
    padding-left: 15px;
    padding-right: 15px;
}

/*examplearea css*/
#examplearea{
    display:flex;
    flex-wrap: wrap;
    justify-content:space-between;
}

.supportmessageveld{
    max-height: 700px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.nav-tabs-block .fake-nav-item {
    margin-bottom: 0;
}
.nav-tabs .fake-nav-item {
    margin-bottom: -1px;
}

.fake-nav-link {
    color: #575757;
    font-weight: 600;
    display: block;
    padding: .5rem 1rem;
}

.nav-tabs .fake-nav-link {
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

.nav-tabs-block .fake-nav-link {
    padding-top: 12px;
    padding-bottom: 12px;
    border-color: transparent;
    border-radius: 0;
}


@media (min-width: 768px){
    .w-md-30{
        width:30%!important;
    }
    .w-md-40{
        width:40%!important;
    }
    .w-md-59{
        width:59%!important;
    }
    .w-md-69{
        width:69%!important;
    }
    .pr-md-15p, .pr-md-15p {
        padding-right: 15px!important;
    }
    .pl-md-15p, .pl-md-15p {
        padding-left: 15px!important;
    }
}
/*end*/


@media only screen and (max-width: 1440px) {
    .content.balans .desktop-only .custom-control-inline{
        display:block;
    }
    .content.balans .desktop-only .barcblok .col-8{
        flex: 0 0 66.6666666667%;
        max-width: 66.6666666667%;
    }
    .content.balans .desktop-only .barcblok .col-4, .content.balans .desktop-only .btnblok .col-4{
        flex: 0 0 33.3333333333%;
        max-width: 33.3333333333%;
    }
    .content.balans .desktop-only .btnblok .offset-4{
        margin-left: 33.3333333333%;
    }
}

@media only screen and (max-width: 1316px) {
    .dagwidth{
        width: 25%;
    }
}

@media only screen and (max-width: 1200px) {
}


@media only screen and (max-width: 990px) {
    .dagwidth{
        width: 25%;
    }
    .mobile-only {
        display: block;
    }
    .desktop-only{
        display: none;
    }
}

@media only screen and (max-width: 768px){
    .dagwidth{
        width: 50%;
    }
}

@media only screen and (max-width: 576px){
    .dagwidth{
        width: 100%;
    }
    .modal-dialog.small{
        margin: 0.5rem auto;
    }
}

@media only screen and (max-width: 335px){
    .dagcorrect{
        margin-left: -15px;
    }
}

/* UI: give generic .block a subtle border and shadow for better separation */
.block {
    border: 1px solid #e5e7eb; /* neutral-200 */
    border-radius: .5rem;      /* rounded */
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; /* shadow-sm */
}

/* UI: also style .block-content when used standalone */
.block-content {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

/* Avoid double borders/shadows when .block-content sits inside .block */
.block > .block-content,
.block .block-content {
    border: none;
    box-shadow: none;
    border-radius: 0;
}