@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800&display=swap');

:root {
    --color-prim: 193, 213, 61;
    --color-sec: 152,2,47;
    --color-red: 152, 2, 47;
    --color-orange: 255, 159, 57;
    --color-green: 40, 199, 111;
    --color-yellow: 255, 194, 0;
    --color-text: 51, 51, 51;
    --color-text-light: 110, 107, 123;
    --color-text-lighter: 126, 122, 138;
    --color-info: 135, 136, 138;
    --color-border: 219, 219, 219;
    --color-grey: 224,224,224;
    --color: var(--color-prim);

    --color-tag1: 90, 91, 74;
    --color-background-tag1: 232, 227, 186;
    --color-tag2: 90, 91, 74;
    --color-background-tag2: 90, 91, 74;
    --color-tag3: 40, 199, 111;
    --color-background-tag3: 40, 199, 111;
    --color-tag4: 103, 126, 21;
    --color-background-tag4: 200, 209, 0;
    --color-tag5: 200, 209, 0;
    --color-background-tag5: 244, 248, 221;

    --color-tag10: 192, 57, 43;
    --color-tag11: 155, 89, 182;
    --color-tag12: 41, 128, 185;
    --color-tag13: 26, 188, 156;
    --color-tag14: 39, 174, 96;
    --color-tag15: 241, 196, 15;
    --color-tag16: 230, 126, 34;
    --color-tag17: 127, 140, 141;


    --color-cu: 255,159,67;
}


/* DEFAULT STYLES */
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }
body { background: #FAFAFA; font-size: 12px; color: rgb(var(--color-text)); font-weight: 500; }

a { color: rgb(var(--color-text)); text-decoration: none; }


/* TEXT */
strong { font-weight: 600;}
p { margin-bottom: 0px; font-size: 12px; color: rgb(var(--color-text)); }
.link {  border-radius: 6px; padding: 6px 12px; margin-left: -12px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; text-decoration: none; }
.link:hover { color: rgb(var(--color-prim)); cursor: pointer; background-color: rgba(var(--color-prim), .1); }
.link:hover p { color: rgb(var(--color-prim)); }
.link-with-initials { border-radius: 6px; padding: 6px 12px; margin-left: -12px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content;  display: flex;  align-items: center; max-height: 32px; }
.link-with-initials .initials { -webkit-transition: none; transition: none; -webkit-box-sizing: content-box; box-sizing: content-box; margin: 0 -6px; border: 6px solid #FFF; background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(var(--color-initials), var(--opacity-initials))),to(rgba(var(--color-initials), var(--opacity-initials)))),-webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)) ; background-image: linear-gradient(rgba(var(--color-initials), var(--opacity-initials)),rgba(var(--color-initials), var(--opacity-initials))),linear-gradient(#fff, #fff) ; }
.link-with-initials:hover { color: rgb(var(--color-prim)); cursor: pointer; background-color: rgba(var(--color-prim), .1); }
tr:hover .link-with-initials .initials { border-color: #FBFBFB; }
.link-with-initials:hover p { color: rgb(var(--color-prim)); }
.light { font-size: 12px; font-weight: 400; color: rgb(var(--color-text-lighter)); }
.small { font-size: 12px; font-weight: 500; }
.center { text-align: center; }
.bold { font-weight: 700; }
.semi-bold { font-weight: 500; color: rgb(var(--color-text)); }

h1 { margin-bottom: 0; font-size: 38px; font-weight: 600; }
h2 { margin-bottom: 0; font-size: 32px; font-weight: 600; }
h3 { margin-bottom: 0; font-size: 26px; font-weight: 600; }
h4 { margin-bottom: 0; font-size: 22px; font-weight: 500; } 
h5 { margin-bottom: 0; font-size: 18px; font-weight: 500; } 
h6 { margin-bottom: 0; font-size: 15px; font-weight: 500; }


/*FONT STYLING*/
.fw-100 { font-weight: 100; }
.fw-200 { font-weight: 200; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }

.fs-8 { font-size: 8px; }
.fs-9 { font-size: 9px; }
.fs-10 { font-size: 10px !important; }
.fs-11 { font-size: 11px !important; }
.fs-12 { font-size: 12px !important; }
.fs-14 { font-size: 14px !important; }
.fs-15 { font-size: 15px; }
.fs-16 { font-size: 16px !important; }
.fs-17 { font-size: 17px !important; }
.fs-18 { font-size: 18px !important; }
.fs-19 { font-size: 19px !important; }
.fs-20 { font-size: 20px !important; }
.fs-24 { font-size: 24px !important; }
.fs-36 { font-size: 36px !important; }
.fs-48 { font-size: 48px !important; }
.fs-50 { font-size: 50px !important; }

.ta-left { text-align: start !important; }


/* PADDING */
.p-3 { padding: 3px !important; }
.p-6 { padding: 6px !important; }
.p-12 { padding: 12px !important; }
.p-6-0 { padding: 6px 0 !important; }
.p-12-6 { padding: 12px 6px !important; }
.p-0-12 { padding: 0px 12px !important; }
.p-6-12 { padding: 6px 12px !important; }
.p-6-24 { padding: 6px 24px !important; }
.p-12-24 { padding: 12px 24px !important; }
.p-24-12 { padding: 24px 12px !important; }
.p-24 { padding: 24px !important; }
.p-24-0 { padding: 24px 0 !important; }
.pl-3 { padding-left: 3px !important; }
.pl-12 { padding-left: 12px !important; }
.pr-2 { padding-right: 2px !important; }
.pr-3 { padding-right: 3px !important; }
.pr-6 { padding-right: 6px !important; }
.pr-12 { padding-right: 12px !important; }
.pr-18 { padding-right: 18px !important; }
.pr-24 { padding-right: 24px !important; }
.pl-6 { padding-left: 6px !important; }
.pl-24 { padding-left: 24px !important; }
.pt-3 { padding-top: 3px !important; }
.pt-6 { padding-top: 6px !important; }
.pt-12 { padding-top: 12px !important; }
.pt-15 { padding-top: 15px !important; }
.pb-12 { padding-bottom: 12px !important; }
.pb-20 { padding-bottom: 20px !important; }
.pb-24 { padding-bottom: 24px !important; }
.pb-96 { padding-bottom: 96px !important; }
.pt-24 { padding-top: 24px !important; }

/* GAP */
.g-0{ gap: 0px !important; }
.g-1 { gap: 1px; }
.g-3 { gap: 3px; }
.g-6 { gap: 6px; }
.g-10 { gap: 10px; }
.g-12 { gap: 12px !important; }
.g-20 { gap: 20px; }
.g-24 { gap: 24px; }
.g-40 { gap: 40px; }
.g-120 { gap: 120px }

/* MARGIN */
.m-3 { margin: 3px; }
.m-12 { margin: 12px; }
.m-24 { margin: 24px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-36 { margin-top: 36px; }
.mt-40 { margin-top: 40px; }
.mb-3 { margin-bottom: 3px !important; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-24 { margin-bottom: 24px; }
.mr-3 { margin-right: 3px !important; }
.mr-6 { margin-right: 6px !important; }
.mr-12 { margin-right: 12px; }
.mr-24 { margin-right: 24px; }
.ml-3 { margin-left: 3px; }
.ml-6 { margin-left: 6px; }
.ml-8 { margin-left: 8px; }
.ml-12 { margin-left: 12px; }
.ml-24 { margin-left: 24px; }
.ml--12 { margin-left: -12px; }
.mt--3 { margin-top: -3px; }
.mt--6 { margin-top: -6px; }
.mt--12 { margin-top: -12px; }
.mt--24 { margin-top: -24px; }

.br-55 { border-right: 55px solid #FFF !important;   }

.bt-1 { border-top: 1px solid rgba(var(--color-border), .5) !important; }
.bb-1 { border-bottom: 1px solid rgba(var(--color-border), .5) !important; }
.bbl-1 { border-bottom: 1px solid rgba(var(--color-border), .1) !important; }
.bl-1 { border-left: 1px solid rgba(var(--color-border), .5) !important; }
.br-1 { border-right: 1px solid rgba(var(--color-border), .5) !important; }

.border { border: 1px solid rgba(var(--color-border), .5) !important; border-radius: 6px; }
.border-solid { border: 1px solid rgba(var(--color-border)) !important; border-radius: 6px; }

.color-prim { color: rgb(var(--color-prim)) !important; }
.color-sec { color: rgb(var(--color-sec)) !important; }
.color-red { color: rgb(var(--color-red)) !important; }
.color-orange { color: rgb(var(--color-orange)) !important; }
.color-text { color: rgb(var(--color-text)) !important; }
.color-green { color: rgb(var(--color-green)) !important; }
.color-info { color: rgb(var(--color-info)) !important; }
.color-border { color: rgb(var(--color-border)) !important; }
.color-white { color: white !important; }
.bg-prim { background-color: rgb(var(--color-prim)) !important; }
.bg-white { background-color: white !important; }


i { position: relative; }
i > i { position: absolute; top: 50%; left: 50%; font-size: 60% !important; border-radius: 6px; background: inherit; padding: 3px;}
i > i.fa-slash { position: absolute; top: 50%; left: 50%; font-size: inherit !important; transform: translate(-50%, -50%); padding: 0 !important }
button:focus { outline: none !important; box-shadow: none !important; }


/* WIDTH / HEIGHT */
.fit-content { width: -webkit-fit-content!important; width: -moz-fit-content!important; width: fit-content!important; }
.w-0 { width: 0 !important; min-width: 0 !important; }
.w-5 { width: 5%!important; }
.w-6 { width: 6%!important; }
.w-7 { width: 7%; }
.w-8 { width: 8%; }
.w-9 { width: 9%; }
.w-10 { width: 10%!important; }
.w-12-5 { width: 12.5%!important; } 
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%!important; }
.w-30 { width: 30%!important; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-80 { width: 80%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }

.w-12px { width: 12px; }
.w-18px { width: 18px; }
.w-24px { width: 24px; }
.w-40px { width: 40px !important; min-width: 40px !important; max-width: 40px !important; }
.w-42px { width: 42px !important; min-width: 42px !important; max-width: 42px !important; }
.w-54px {width: 54px !important;}
.w-60px { width: 60px !important; } 
.w-75px { width: 75px; }
.w-80px { width: 80px !important; min-width: 80px !important; max-width: 80px !important; }
.w-100px { width: 100px; }
.w-115px { width: 115px; }
.w-120px { width: 120px; }
.w-150px {width: 150px;}
.w-180px {width: 180px;}
.w-200px { width: 200px; }
.w-210px { width: 210px; }
.w-240px { width: 240px; }
.w-260px { min-width: 260px; width: 260px; }
.w-300px { width: 300px !important; }
.w-350px { width: 350px; min-width: 350px; }
.w-410px { width: 410px; }
.w-540px {width: 540px; }
.w-600px { width: 600px; max-width: 600px; }
.w-665px { width: 665px!important; }
.w-800px { width: 800px; }
.w-880px {width: 880px!important; }
.w-1100px {width: 1100px!important; }
.w-1310px {width: 1310px; }

.w-fc { width: fit-content; }

.min-120 { min-width: 120px; }

/*
form > .w-75, .g-12 .w-75 { width: calc(75% - 3px) !important; }
form > .w-85, .g-12 .w-85 { width: 85% !important; }
form > .w-66, .g-12 .w-66 { width: calc(66% - 2px) !important; }
form > .w-50, .g-12 .w-50 { width: calc(50% - 6px) !important; }
form > .w-25, .g-12 .w-25 { width: calc(25% - 9px) !important; } 
form > .w-12-5, .g-12 .w-12-5 { width: calc(12.5% - 11px) !important; }
form > .w-15, .g-12 .w-15 { width: calc(15% - 12px) !important; }
form > .w-20, .g-12 .w-20 { width: calc(20% - 6px) !important; }
form > .w-30, .g-12 .w-30 { width: calc(30% - 6px) !important; } 
form > .w-35, .g-12 .w-35 { width: calc(35% - 6px) !important; }
form > .w-33, .g-12 .w-33 { width: calc(33% - 7px) !important; }
form > .w-40, .g-12 .w-40 { width: calc(40% - 4px) !important; } 
form > .w-10, .g-12 .w-10 { width: calc(10% - 6px) !important; }
*/

form > .w-75 { width: calc(75% - 3px) !important; }
form > .w-85 { width: 85% !important; }
form > .w-66 { width: calc(66% - 2px) !important; }
form > .w-50 { width: calc(50% - 6px) !important; }
form > .w-25 { width: calc(25% - 9px) !important; } 
form > .w-12-5 { width: calc(12.5% - 11px) !important; }
form > .w-15 { width: calc(15% - 12px) !important; }
form > .w-20 { width: calc(20% - 6px) !important; }
form > .w-30 { width: calc(30% - 6px) !important; } 
form > .w-35 { width: calc(35% - 6px) !important; }
form > .w-33 { width: calc(33% - 7px) !important; }
form > .w-40 { width: calc(40% - 4px) !important; } 
form > .w-10 { width: calc(10% - 6px) !important; } 

.g-12 > .w-87-5 { width: calc(87.5% - 1.5px) !important; } 
.g-12 > .w-75 { width: calc(75% - 3px) !important; } 
.g-12 > .w-66 { width: calc(66.66% - 4px) !important; } 
.g-12 > .w-50 { width: calc(50% - 6px) !important; } 
.g-12 > .w-40 { width: calc(40% - 7.2px) !important; } 
.g-12 > .w-33 { width: calc(33.33% - 8px) !important; } 
.g-12 > .w-25 { width: calc(25% - 9px) !important; } 
.g-12 > .w-20 { width: calc(20% - 9.6px) !important; } 
.g-12 > .w-12-5 { width: calc(12.5% - 10.5px) !important; } 

.g-24 > .w-87-5 { width: calc(87.5% - 3px) !important; } 
.g-24 > .w-75 { width: calc(75% - 6px) !important; } 
.g-24 > .w-66 { width: calc(66.66% - 8px) !important; } 
.g-24 > .w-50 { width: calc(50% - 12px) !important; } 
.g-24 > .w-40 { width: calc(40% - 14.4px) !important; } 
.g-24 > .w-33 { width: calc(33.33% - 16px) !important; } 
.g-24 > .w-25 { width: calc(25% - 18px) !important; } 
.g-24 > .w-20 { width: calc(20% - 19.2px) !important; } 
.g-24 > .w-12-5 { width: calc(12.5% - 21px) !important; } 

.h-100 { height: 100%; }

.h-fc { height: fit-content !important; }


.h-12px { height: 12px!important; }
.h-18px { height: 18px!important; }
.h-24px { height: 24px!important; }
.h-25px { height: 25px!important; }
.h-30px { height: 30px!important; }
.h-35px { height: 35px!important; } 
.h-36px { height: 36px!important; } 
.h-40px { height: 40px!important; }
.h-42px { height: 42px; }
.h-48px { height: 48px!important; }
.h-60px { height: 60px!important; }
.h-72px { height: 72px!important; }
.h-96px { height: 96px!important; }
.h-120px { height: 120px!important; }
.h-200px { height: 200px!important; }
.h-210px { height: 210px!important; }
.h-350px { height: 350px!important; }
.h-mc { height: max-content!important; }
.flex-grow { flex-grow: 1; }

.mh-350px { max-height: 350px; }
.mh-0 { max-height: 0px; overflow: hidden; }

.full-height { height: calc( 100vh - 120px ); }

.column { display: flex; flex-direction: column; }

.cursor-pointer { cursor: pointer !important; }

.right-0 { right: 0 !important; left: auto;}

.opac-2 { opacity: 0.2; }
.opac-5 { opacity: 0.5; }

.zi-2 { position: relative; z-index: 2; }

.table>:not(caption)>*>* { padding: 0; background-color: transparent; -webkit-box-shadow: none; box-shadow: none; color: rgba(var(--color-text)) }

tr.tr { -webkit-transition: .2s ease; transition: .2s ease; }
tr.tr.hide_row { height: 0px !important; pointer-events: none; }
tr.tr.hide_row td { height: 0px !important; min-height: 0px; border: none !important; }
tr.tr.hide_row td > * { height: 0px !important; min-height: 0px !important; position: absolute; bottom: 0; opacity: 0; }

.disable { pointer-events: none!important; opacity: 0.2!important; }

/* BUTTONS */
button { outline: none !important; }
.btn { font-size: 14px; border-radius: 6px; -webkit-transition: .2s ease; transition: .2s ease; outline: none; line-height: 1; padding: 0px 24px; height: 36px; font-weight: 500;}


.prim-btn { background-color: rgb(var(--color)); border: none; color: #FFF; }
.prim-btn:hover { background-color: rgb(var(--color)); box-shadow: 0px 3px 9px rgb(var(--color-info), .5); color: #FFF; filter: brightness(.95) }
.prim-btn.sec { --color: var(--color-sec); }
.prim-btn.red { --color: var(--color-red); }
.prim-btn.orange { --color: var(--color-orange); }
.prim-btn.green { --color: var(--color-green); }
.prim-btn.info { --color: var(--color-info); }
.prim-btn.text { --color: var(--color-text); }
.prim-btn.text-light { --color: var(--color-text-light); }
.prim-btn.text-lighter { --color: var(--color-text-lighter); }
.prim-btn.border { --color: var(--color-border); }

.outline-btn { border: 1px solid rgb(var(--color)); color: rgb(var(--color)); background-color: transparent; }
.outline-btn:hover { background-color: rgba(var(--color), 0.1); color: rgb(var(--color)); border-color:rgb(var(--color)); }
.outline-btn.sec { --color: var(--color-sec); }
.outline-btn.red { --color: var(--color-red); }
.outline-btn.orange { --color: var(--color-orange); }
.outline-btn.green { --color: var(--color-green); }
.outline-btn.text { --color: var(--color-text); }
.outline-btn.text-light { --color: var(--color-text-light); }
.outline-btn.text-lighter { --color: var(--color-text-lighter); }
.outline-btn.info { --color: var(--color-info); }
.outline-btn.border { --color: var(--color-border); }
.btn i { margin-right: 6px; }


.btn-small { font-size: 12px; height: fit-content; padding: 6px 12px; }

:root { --color-icon: var(--color-prim); }
.icon-btn { min-width: 30px; height: 30px; border-radius: 6px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;  align-items: center; -webkit-transition: .2s ease; transition: .2s ease; position: relative; border: 0; background-color: transparent;}
.icon-btn input { opacity: 0; position: absolute; pointer-events: none; }
/* .icon-btn input { visibility: hidden; opacity: 0; position: absolute; } */
.icon-btn > i { font-size: 18px; color: rgb(var(--color-text)); -webkit-transition: .2s ease; transition: .2s ease; }
.icon-btn:hover > i {color: rgb(var(--color-icon)); }
.icon-btn:hover > p {color: rgb(var(--color-icon)); }
.icon-btn:hover { background-color: rgba(var(--color-icon), 0.1); cursor: pointer;}
.icon-btn.large { min-width: 36px; height: 36px; }
.icon-btn.large > i { font-size: 22px; }
.icon-btn.small { min-width: 24px; height: 24px; min-width: 24px;}
.icon-btn.small > i { font-size: 14px; }
.icon-btn.prim { --color-icon: var(--color-prim); }
.icon-btn.sec { --color-icon: var(--color-sec); }
.icon-btn.red { --color-icon: var(--color-red); }
.icon-btn.orange { --color-icon: var(--color-orange); }
.icon-btn.yellow { --color-icon: var(--color-yellow); }
.icon-btn.green { --color-icon: var(--color-green); }
.icon-btn.text { --color-icon: var(--color-text); }
.icon-btn.text-light { --color-icon: var(--color-text-light); }
.icon-btn.text-lighter { --color-icon: var(--color-text-lighter); }
.icon-btn.info { --color-icon: var(--color-info); }
.icon-btn.border { --color-icon: var(--color-border); }
.icon-btn.purple { --color-icon: var(--color-purple); }

/* BADGES */
.badge { background-color: rgb(var(--color-red)); color: #FFF; position: absolute; right: 0; top: 0; min-width: 15px; height: 15px; padding: 0 3px 0 4px; border-radius: 10px;  display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;  align-items: center; font-size: 9px; font-weight: 700; pointer-events: none; }
.small .badge { min-width: 12px; height: 12px; padding: 0 2px; font-size: 8px; }
.large .badge { min-width: 18px; height: 18px; padding: 0 4px; font-size: 10px; }





/* INPUTS */

/* TEXT INPUT */
input, textarea { border: 1px solid rgb(var(--color-border)); border-radius: 6px; -webkit-transition: .2s ease; transition: .2s ease; outline: none; padding-left: 12px; color: rgb(var(--color-text)); position: relative; z-index: 1;}
textarea { padding: 9px 0 9px 12px; }
input { line-height: 1; }

input:required ~ p { position: relative; }
input:required ~ p::after { content: "*"; position: absolute; right: -6px; top: 0; color: rgba(var(--color-red)); }

input[type="number"] { -moz-appearance: textfield; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input::-webkit-input-placeholder { color: rgba(var(--color-text), .5) !important; }
::-webkit-input-placeholder, input::placeholder { color: rgba(var(--color-text), .5) !important; }
input:hover, textarea:hover { -webkit-box-shadow: 3px 1px 6px 0px rgba(var(--color-text), .125); box-shadow: 3px 1px 6px 0px rgba(var(--color-text), .125); }
input:focus { border-color: rgb(var(--color-prim)); -webkit-box-shadow: 3px 1px 6px 0px rgba(var(--color-text), .125); box-shadow: 3px 1px 6px 0px rgba(var(--color-text), .125); }
input[type="text"]:focus, textarea:focus { border-color: rgb(var(--color-prim)); padding-left: 18px; -webkit-box-shadow: 3px 1px 6px 0px rgba(var(--color-text), .125); box-shadow: 3px 1px 6px 0px rgba(var(--color-text), .125); }
input.invalid, textarea:invalid { border-color: rgb(var(--color-red)); }

input.large { padding: 0 0 0 12px; font-size: 20px; font-weight: 600; }

input.is-invalid { border-color: rgb(var(--color-red)); }
.invalid-feedback { position: absolute; top: 0; right: 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; font-size: 9px; color: rgb(var(--color-red)); }

textarea:hover:disabled { -webkit-box-shadow: none; box-shadow: none; }

.input-container { position: relative; }

label, .label { position: relative; }
label > p, .label > p { position: relative; font-size: 12px; height: 20px;  display: flex;  align-items: center; }
label input, .label input , label textarea { min-height: 36px; width: 100%; }
label.small input, .label-small input { min-height: 25px; }
label .icon, .label .icon { position: absolute; height: 36px; right: 0; bottom: 0;  display: flex; justify-content: center; align-items: center; z-index: 2; animation: disable-pointer-events 2000ms forwards; width: fit-content;transition: .2s ease;min-width: 36px;background-color: #fff;border: 1px solid rgb(var(--color-border));border-radius: 0 6px 6px 0; }
input:focus ~ .icon.pointer { -webkit-animation: none; animation: none; }
label .icon.pointer:hover, .label .icon.pointer:hover { cursor: pointer; }
label .icon.pointer:hover i, .label .icon.pointer:hover i { color: rgb(var(--color-prim)); background-color: rgba(var(--color-prim), .1); }
label .icon.pointer i, .label .icon.pointer i { width:100%;height: 100%;display: flex;align-items: center;justify-content: center; }
label .icon i, .label .icon i { color: rgb(var(--color-info)); pointer-events: none; transition: .2s ease; }
label .small ~ .icon, .label .small ~ .icon { height: 100%; }
label .small ~ .icon i, .label .small ~ .icon i { margin-bottom: 0px; }

label.disabled, .label.disabled { pointer-events: none; }
label.disabled input, .label.disabled input { background-color: rgb(var(--color-border), .1); pointer-events: none !important; }
label.disabled .icon, .label.disabled .icon { background-color: rgb(var(--color-border), .1); pointer-events: none !important; }


/*input[type=time] { padding-left: 30px !important; }*/
input[type=time]::-webkit-datetime-edit-hour-field, input[type=time]::-webkit-datetime-edit-minute-field { padding: 0 3px; }
input[type="time"]::-webkit-calendar-picker-indicator {background: none;}

@-webkit-keyframes disable-pointer-events {
  99% {
    pointer-events: all;
  }
  100% {
    pointer-events: none;  
  }
}

@keyframes disable-pointer-events {
  99% {
    pointer-events: all;
  }
  100% {
    pointer-events: none;  
  }
}

.hide-on-blur input { background-color: transparent; color: transparent; -webkit-transition: padding 0.2s ease, border 0.2s ease; transition: padding 0.2s ease, border 0.2s ease; }
.hide-on-blur input:focus { background-color: #FFF; color: rgb(var(--color-text)); }
.hide-on-blur p { position: absolute; left: 12px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

label .icon i.focus { display: none; }
label input:focus ~ .icon i.blur { display: none; }
label input:focus ~ .icon i.focus { display: block; }

/* DATE PICKER */
label.datepicker { position: relative; }
label.datepicker input { width: 100%; }
label.datepicker .display { width: 100%; height: 36px; max-height: 100%; font-weight: 500; position: absolute; left: 12px; bottom: 0; z-index: 10; pointer-events: none; }

label .forget { position: absolute; right: 0; top: 0; color: rgb(var(--color-prim)); font-size: 10px; cursor: pointer; }
label .forget:hover { cursor: pointer; text-decoration: underline; }

/* CHECKBOX */
:root { --color-checkbox: var(--color-prim) }
.checkbox { height: 24px; font-size: 12px; color: rgb(var(--color-text)); position: relative; cursor: pointer;  display: flex;  align-items: center; }
.checkbox input { opacity: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 0; height: 0; margin: 0; padding: 0 !important; border: 0; }
.checkbox i { min-width: 18px; min-height: 18px; background-color: #FFF; border: 1px solid rgb(var(--color-border)); border-radius: 3px;  display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;  align-items: center; margin-right: 12px; font-size: 12px; color: transparent; position: relative; -webkit-transition: .2s ease; transition: .2s ease; z-index: 1; }
.checkbox input:checked ~ i { background-color: rgb(var(--color-checkbox)); border-color: rgb(var(--color-checkbox)); color: #FFF; }
.checkbox i.checked { background-color: rgb(var(--color-checkbox)); border-color: rgb(var(--color-checkbox)); color: #FFF; }
.checkbox i::after { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 36px; height: 36px; -webkit-transition: .2s ease; transition: .2s ease; border-radius: 50px; z-index: -2; }
.checkbox:hover i::after { background-color: rgba(var(--color-border), .1); }
.checkbox:active i::after { background-color: rgba(var(--color-checkbox), 0.2); }

.checkbox.checked i{ background-color: rgb(var(--color-checkbox)); border-color: rgb(var(--color-checkbox)); color: #FFF; }
.checkbox.unchecked i{ background-color: #FFF; border-color: rgb(var(--color-border)); color: #FFF; }
.checkbox.sec { --color-checkbox: var(--color-sec); }
.checkbox.red { --color-checkbox: var(--color-red); }
.checkbox.orange { --color-checkbox: var(--color-orange); }
.checkbox.yellow { --color-checkbox: var(--color-yellow); }
.checkbox.green { --color-checkbox: var(--color-green); }
.checkbox.text { --color-checkbox: var(--color-text); }
.checkbox.info { --color-checkbox: var(--color-info); }

/* RADIO BUTTONS */
.radio-buttons {  display: flex; }
.radio-buttons label {  display: flex;  align-items: center; position: relative; }
.radio-buttons label input { opacity: 0; position: absolute; cursor: pointer; }
.radio-buttons label span { padding: 0 30px; font-size: 12px; }
.radio-buttons label span::after { content: ''; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 50%; border: 1px solid rgb(var(--color-border)); width: 18px; height: 18px; -webkit-transition: .1s ease; transition: .1s ease; }
.radio-buttons label:hover span::after { -webkit-box-shadow: 0 0 0 12px rgba(var(--color-prim), .05); box-shadow: 0 0 0 12px rgba(var(--color-prim), .05); }
.radio-buttons label:active span::after { -webkit-box-shadow: 0 0 0 12px rgba(var(--color-border), .5); box-shadow: 0 0 0 12px rgba(var(--color-border), .5); }

.radio-buttons.borderd { gap: 12px }
.radio-buttons.borderd label { border: 1px solid rgb(var(--color-border)); border-radius: 6px; padding: 6px 12px; height: 36px; }
.radio-buttons.borderd label span::after { left: 12px; }

.radio-buttons label input:checked ~ span::after { border: 5px solid rgb(var(--color-prim)); }
.radio-buttons label input:checked:hover ~ span::after { -webkit-box-shadow: 0 0 0 12px rgba(var(--color-prim), .05); box-shadow: 0 0 0 12px rgba(var(--color-prim), .05); border: 5px solid rgb(var(--color-prim)); }
.radio-buttons label input:checked:active ~ span::after { -webkit-box-shadow: 0 0 0 12px rgba(var(--color-border), .5); box-shadow: 0 0 0 12px rgba(var(--color-border), .5); border: 5px solid rgb(var(--color-prim)); }

.subtext { color: rgb(var(--color-text), 0.6); font-size: 10px!important; }

/* DROPDOWN SELECT */
.dropdown { position: relative; }
.dropdown.readonly > input { caret-color: transparent; cursor: pointer; }
.dropdown:focus-within { z-index: 15; }
.dropdown > input { caret-color: transparent;  }
.dropdown > input.invisible { caret-color: transparent; visibility: visible !important; opacity: 0 !important; pointer-events: none; position: absolute; }
.dropdown input:focus ~ .dropdown-container { grid-template-rows: 1fr; border: 1px solid rgb(var(--color-border)); }
.dropdown .dropdown-container:has(input:focus) { grid-template-rows: 1fr; border: 1px solid rgb(var(--color-border)); }
.dropdown .icon i { font-size: 18px; }
.dropdown > input:focus ~ .icon i { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); }
.dropdown .dropdown-container { position: absolute; top: 100%; width: 100%; display: grid !important; grid-template-rows: 0fr; -webkit-transition: .2s ease; transition: .2s ease; -webkit-transition-delay: .1s; transition-delay: .1s; z-index: 10; border: 0px solid transparent; }
.dropdown .dropdown-container .container-inner { overflow: hidden; }
.dropdown .dropdown-container .container-inner-inner { padding: 6px; gap: 3px; max-height: 250px; overflow-y: scroll; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.dropdown .dropdown-container .item { -webkit-transition: .1s ease; transition: .1s ease; padding: 6px 12px; width: 100%; cursor: pointer; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 6px; }
.dropdown .dropdown-container .item:hover { background-color: rgba(var(--color-prim), 0.1); color: rgba(var(--color-prim), 1) !important;}
.item:hover .naam { color: rgba(var(--color-prim), 1); }
.subtext { color: rgb(var(--color-text), 0.6); font-size: 10px!important; }
.dropdown .dropdown-container .item.active { background-color: rgb(var(--color-prim)); color: #FFF !important; }
.dropdown .dropdown-container .item h5 { color: rgb(var(--color-text)) }

.dropdown.ontop .dropdown-container{ top: auto; bottom: 100%; }

.dropdown.dropdown-search input { caret-color: rgba(var(--color-text)); }

.empty_message { display: flex; flex-direction: column; gap: 12px; justify-content: center; align-items: center; padding: 12px; width: 100%; height: 100%; }
.empty_message i { color: rgb(var(--color)); background-color: rgb(var(--color), .1); font-size: 24px; width: 48px; height: 48px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.empty_message p { font-size: 10px; text-align: center; }
.empty_message i.fa-spinner { animation: rotate 1s linear infinite; font-size: 18px; color: rgb(var(--color)); background-color: transparent; width: auto; height: auto; }
.rotate-infinite { animation: rotate 1s linear infinite; }

@keyframes rotate {
  100% { transform: rotate(360deg); }  
}


/* DROPDOWN MENU */
.dropdownmenu-btn { position: relative; width: 36px; height: 36px;  align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.dropdownmenu-btn > i { font-size: 24px; color: rgb(var(--color-info)); -webkit-transition: .2s ease; transition: .2s ease; pointer-events: none; position: absolute; z-index: 1; width: 100%; height: 100%;  display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;  align-items: center; }
.dropdownmenu-btn input { width: 100%; height: 100%; position: absolute; left: 0; top: 0;  cursor: pointer; border: 1px solid rgb(var(--color-border)); border-radius: 6px; background-color: transparent; }
.dropdownmenu-btn input:focus ~ .dropdownmenu { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0s; transition-delay: 0s; }
.dropdownmenu-btn:has(input:focus) > i { -webkit-transform: rotate(180deg) scale(0.7); transform: rotate(180deg) scale(0.7); pointer-events: all; cursor: pointer; }
.dropdownmenu { position: absolute !important; top: 100%; right: 0; overflow: hidden;  display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; opacity: 0; -webkit-transform-origin: top right; transform-origin: top right; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: .2s .1s ease-out; transition: .2s .1s ease-out; }
.dropdownmenu .divider { width: 100%; min-height: 1px; background-color: rgb(var(--color-border)); }
.dropdownmenu .menu-container { width: 100%; padding: 6px;  display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3px; }
.dropdownmenu .menu-item { height: 30px; width: 100%; padding: 0px 12px;  align-items: center; background-color: transparent; -webkit-transition: .2s ease; transition: .2s ease; border-radius: 6px; cursor: pointer; }
.dropdownmenu .menu-item i { font-size: 15px; margin-right: 12px; }
.dropdownmenu .menu-item p { font-size: 12px; white-space: nowrap; }
.dropdownmenu .menu-item:hover { background-color: rgba(var(--color-prim), 0.1); }
.dropdownmenu .menu-item i, .dropdownmenu .menu-item p { -webkit-transition: .2s ease; transition: .2s ease; }
.dropdownmenu .menu-item:hover i, .dropdownmenu .menu-item:hover p { color: rgb(var(--color-prim)); }

/* DROPDOWN MENU SMALL */
.dropdownmenu-btn-small { position: relative; min-width: 25px; width: 25px; height: 25px;  align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.dropdownmenu-btn-small i { font-size: 17px; color: rgb(var(--color-info)); -webkit-transition: .2s ease; transition: .2s ease; line-height: 0; }
.dropdownmenu-btn-small input { width: 100%; height: 100%; position: absolute; left: 0; top: 0; cursor: pointer; border: 1px solid rgb(var(--color-border)); border-radius: 6px; background-color: transparent; }
.dropdownmenu-btn-small input:focus ~ .dropdownmenu-small { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0s; transition-delay: 0s; z-index: 2;}
.dropdownmenu-btm-small input:focus ~ .fal { -webkit-transform: rotate(80deg); transform: rotate(80deg); }

.dropdownmenu-small { position: absolute !important; top: 100%; right: 0; overflow: hidden;  display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; opacity: 0; -webkit-transform-origin: top right; transform-origin: top right; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: .2s .1s ease-out; transition: .2s .1s ease-out; z-index: 2; }
.dropdownmenu-small .divider { width: 100%; min-height: 1px; background-color: rgb(var(--color-border)); }
.dropdownmenu-small .menu-container { min-width: 100%; height: 36px; padding: 0px;}
.dropdownmenu-small .menu-item { z-index: 1; height: 36px; width: 100%;  align-items: center; background-color: transparent; -webkit-transition: .2s ease; transition: .2s ease; cursor: pointer; padding: 12px;}
.dropdownmenu-small .menu-item i { font-size: 15px; margin-right: 12px; }
.dropdownmenu-small .menu-item p { font-size: 12px; white-space: nowrap; }
.dropdownmenu-small .menu-item:hover { background-color: rgba(var(--color-prim), 0.1); }
.dropdownmenu-small .menu-item i, .dropdownmenu-small .menu-item p { -webkit-transition: .2s ease; transition: .2s ease; }
.dropdownmenu-small .menu-item:hover i, .dropdownmenu-small .menu-item:hover p { color: rgb(var(--color-prim)); }

.dropdownmenu-disabled { pointer-events: none; }
.dropdownmenu-disabled p, .dropdownmenu-disabled i {color: rgb(var(--color-text), 0.3);}
.dropdownmenu-visible { display: none; }

/* DROPDOWN MENU ICON_BTN */
.dropdownmenu-btn-inline { position: relative; min-width: 30px; width: 30px; height: 30px;  align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: none; border-radius: 6px; }
.dropdownmenu-btn-inline:hover { background-color: rgb(var(--color-prim), 0.1); }
.dropdownmenu-btn-inline:hover i { color: rgb(var(--color-prim)) }
.dropdownmenu-btn-inline i { font-size: 18px; color: rgb(var(--color-info)); -webkit-transition: .2s ease; transition: .2s ease; line-height: 0; }
.dropdownmenu-btn-inline input { width: 100%; height: 100%; position: absolute; left: 0; top: 0; cursor: pointer; border: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; border-radius: 6px; background-color: transparent; }
.dropdownmenu-btn-inline input:focus ~ .dropdownmenu-small { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0s; transition-delay: 0s; z-index: 2;}
.dropdownmenu-btm-inline input:focus ~ .fal { -webkit-transform: rotate(80deg); transform: rotate(80deg); }

.dropdownmenu-inline { position: absolute !important; top: 100%; right: 0; overflow: hidden;  display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; opacity: 0; -webkit-transform-origin: top right; transform-origin: top right; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: .2s .1s ease-out; transition: .2s .1s ease-out; z-index: 2; }
.dropdownmenu-inline .divider { width: 100%; min-height: 1px; background-color: rgb(var(--color-border)); }
.dropdownmenu-inline .menu-container { min-width: 100%; height: 36px; padding: 0px;}
.dropdownmenu-inline .menu-item { z-index: 1; height: 36px; width: 100%;  align-items: center; background-color: transparent; -webkit-transition: .2s ease; transition: .2s ease; cursor: pointer; padding: 12px;}
.dropdownmenu-inline .menu-item i { font-size: 15px; margin-right: 12px; }
.dropdownmenu-inline .menu-item p { font-size: 12px; white-space: nowrap; }
.dropdownmenu-inline .menu-item:hover { background-color: rgba(var(--color-prim), 0.1); }
.dropdownmenu-inline .menu-item i, .dropdownmenu-small .menu-item p { -webkit-transition: .2s ease; transition: .2s ease; }
.dropdownmenu-inline .menu-item:hover i, .dropdownmenu-small .menu-item:hover p { color: rgb(var(--color-prim)); }

.dropdownmenu-disabled { pointer-events: none; }
.dropdownmenu-disabled p, .dropdownmenu-disabled i {color: rgb(var(--color-text), 0.3);}
.dropdownmenu-visible { display: none; }


/* TOOLTIP */
.tooltip.show { opacity: 1; }
.tooltip .tooltip-inner { padding: 6px 12px; background-color: rgb(var(--color-text)); border-radius: 6px; }
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before { border-right-color: rgb(var(--color-text)); border-width: 6px; }



/* SCROLLBARS */
::-webkit-scrollbar { width: 9px; height: 6px; border-left: 1px solid rgba(var(--color-border), .5); border-top: 1px solid rgba(var(--color-border), .5); }
::-webkit-scrollbar-track { background: transparent; border: none; overflow: auto; }
::-webkit-scrollbar-thumb { background: rgba(var(--color-text), .6); border-radius: 3px; overflow: auto; transition: 0.2s ease; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--color-text)); cursor: grab !important; }
.big-scrollbar::-webkit-scrollbar { width: 9px; height: 12px; }
.no-scrollbar::-webkit-scrollbar { width: 0px; height: 0px; border: none !important; }



/* PAGE STYLING */
.main { position: absolute; width: 100vw; height: 100vh; top: 0px; left: 0;  border-left: 260px solid transparent; overflow: visible; -webkit-transition: .2s ease; transition: .2s ease; }
.main.collapsed { border-left: 80px solid transparent; }

/* .page { -webkit-animation: fadeInAnimation ease 300ms; animation: fadeInAnimation ease 300ms; } */
.loading-screen { position: fixed; z-index: 99999999; background-color: #F8F7FA; width: 100vw; height: 100vh; top: 0; left: 0; }

@-webkit-keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    33% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    33% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

.page { width: 100%; height: 100vh; -webkit-transition: .2s .4s ease; transition: .2s .4s ease; position: absolute; top: 0; overflow-y: scroll; overflow-x: hidden; padding: 96px 24px 24px; }

.pdf {height: 100%; padding: 24px; background-color:#ffffff;}
.pdf-header {height: 120px; padding: 20px; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row;      justify-content: space-between;}
.pdf-header img { width: 20%; }

.pdf p { font-size: 12px; }

.pdf .details { min-height: 80px; padding: 20px 20px 20px 0px;   justify-content: space-between; margin: 40px 0;}

.page.hide { pointer-events: none; opacity: 0; -webkit-transition-delay: 0s; transition-delay: 0s; }

.box { position: relative; border-radius: 6px; background-color: #FFFFFF; -webkit-box-shadow: 2px 2px 16px rgba(var(--color-text), .125); box-shadow: 2px 2px 16px rgba(var(--color-text), .125); }

.contactgegevens { display: flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; gap: 12px; }

.pdf .contactgegevens { gap: 6px; }

.pdf .bedrag-row {  display: flex;  height: 24px;  align-items: center; }


/* SIDEBAR */
.sidebar-form {display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 24px; padding-bottom: 98px; gap: 12px;}
.popup-form {display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 24px; gap: 12px;}
.sidebar { -webkit-transition: .2s ease; transition: .2s ease; width: 260px; height: 100vh; background-color: #FFFFFF; -webkit-box-shadow: 2px 2px 16px rgba(var(--color-text), .125); box-shadow: 2px 2px 16px rgba(var(--color-text), .125); position: fixed; top: 0px; left: 0px; padding: 0 12px; z-index: 1; }

.sidebar-image-container { position: relative; z-index: 1; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(#FFF), to(transparent)); background-image: linear-gradient(#FFF, #FFF, transparent); -webkit-transition: .2s ease; transition: .2s ease; padding: 12px; height: 100px; margin-bottom: -100px; display: flex !important;  align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.sidebar.collapsed .sidebar-image-container { padding: 0; }
.sidebar-image-container img { width: 100%; }

.nav-scroll-conainer { gap: 6px; width: 100%; height: 100vh; overflow-y: scroll; overflow-x: hidden; padding-top: 100px; padding-bottom: 24px;  display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;  align-items: center; }
.nav-scroll-conainer::-webkit-scrollbar { width: 0px; }
.sidebar .bottom-fade { position: absolute; left: 0; bottom: 0; height: 50px; width: 100%; background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#FFF)); background-image: linear-gradient(transparent, #FFF); z-index: 1; pointer-events: none; }

.sidebar .divider { opacity: 0; min-height: 0; height: 0; -webkit-transition: .2s ease; transition: .2s ease; }
.sidebar.collapsed .divider { opacity: 1; height: 36px; min-height: 36px; padding-left: 3px; }
.nav-heading { height: 36px; width: 100%; padding: 24px 18px 6px; font-size: 12px; opacity: .5; margin: 0; font-weight: 600; line-height: 1; -webkit-transition: .2s ease; transition: .2s ease; }
.sidebar.collapsed .nav-heading { height: 0; opacity: 0; padding: 0; }

.nav-item { position: relative; width: 100%; min-height: 39px; max-height: 39px; border-radius: 6px; background-color: transparent; padding: 0 12px;  display: flex;  align-items: center; color: rgb(var(--color-text)); cursor: pointer; }
.nav-item, .nav-item i, .nav-item p { -webkit-transition: .2s ease; transition: .2s ease; }
.nav-item i { width: 34px; min-width: 34px; height: 20px; font-size: 20px;  display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;  align-items: center; }
.nav-item p { padding-left: 10px; font-size: 15px; }
.nav-item:hover, .nav-main { background-color: #FAFAFA; }
.nav-item:hover{ padding-left: 24px; }
.nav-item .tool { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.sidebar.collapsed .nav-item:hover{ padding-left: 12px; }

.nav-item.active { background-color: rgb(var(--color-prim)); background-image: -webkit-gradient(linear, left top, right top, from(transparent) , to(#FFF8)); background-image: linear-gradient(to right, transparent , #FFF8); }
.nav-item.active i, .nav-item.active p { color: #FFFFFF; }
.nav-item.active:hover{ background-color: rgb(var(--color-prim)); }

.resize-btn { position: absolute; width: 24px; height: 24px; right: 0; bottom: 50px; border-radius: 50%; -webkit-transform: translate(50%); transform: translate(50%); display: flex !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;  align-items: center; cursor: pointer; }
.resize-btn i { font-size: 20px; -webkit-transition: .2s ease; transition: .2s ease; }

.sidebar.collapsed { width: 80px; }
.sidebar.collapsed .resize-btn i { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.nav-item.dropdown i { font-size: 10px; }


/* CollapseContainer */
.collapseContainer{display: grid;grid-template-rows: 1fr;-webkit-transition: all 200ms 100ms;transition: all 200ms 100ms;}
.collapseInner{overflow: hidden; }
.collapseContainer.hide{grid-template-rows: 0fr;}

.activiteiten .subactiviteiten > td > .collapseContainer:not(.hide) > .collapseInner { overflow: visible; -webkit-animation: delay-overflow 1s; animation: delay-overflow 1s; }

@-webkit-keyframes delay-overflow {
  from { overflow: hidden; }
}

@keyframes delay-overflow {
  from { overflow: hidden; }
}

.nav-item .dropdown-icon { font-size: 12px; -webkit-transition: 0.2s ease; transition: 0.2s ease; position: absolute; right: 12px;}

.rotate90 { -webkit-transform: rotate(90deg); transform: rotate(90deg); }



/* HEADER */
.header { position: fixed; left: 284px; top: 12px; right: 24px; height: 60px; max-height: 60px; min-height: 60px;  display: flex;   justify-content: space-between; -webkit-transition: .2s ease; transition: .2s ease; z-index: 150; }
.header::before {content: ""; height: 80px; width: calc(100% + 40px); position: absolute; left: -24px; top: -20px; z-index: -1; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.header.collapsed { left: 104px; }

.header-box { padding: 0 24px; width: 100%; height: 100%;   justify-content: space-between; }

.header-left { height: 100%; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;  align-items: center; }
.header .user-id { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding: 0 12px; line-height: 1.2; }

.profile { position: relative; align-items: center; }
.menu-toggle { position: absolute; right: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; pointer-events: none; }
.menu-toggle:focus ~ .dropdownmenu { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0s; transition-delay: 0s; }
.profile .dropdownmenu { top: 60px; }

.back-button {  width: 400px; height: 100%; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;  align-items: center;  }
.back-button.hide { height: 0; }
.back-button.hide button { display: none; }
.back-button i { font-size: 10px; }



/* DYNAMIC OFFCANVAS / DETAILS SIDEBAR */

.offcanvas { border: none !important; }
.offcanvas-header { padding: 0 24px; min-height: 48px; height: 48px; background-color: rgb(var(--color-prim)); }
.offcanvas-header h5 { font-size: 14px; font-weight: 500; color:#fff; }
.offcanvas-header .icon-btn i {color: #fff;}
.offcanvas-header .icon-btn:hover { background-color: #ffffff1A; }

.offcanvas-body {padding: 0px; background-color: #fdfdfd;}
.offcanvas-body.log { padding: 24px; }
.details-container { padding: 24px; border-bottom: 1px solid #ebe9f1; }


.offcanvas-ho{position: fixed;bottom:0;top:0;right:0;display: flex;flex-direction: column;max-width:100%;overscroll-behavior:contain;background-color: #fff;background-clip: padding-box;outline: 0;transform:translateX(100%);transition: transform .3s ease-in-out 0s;z-index:1055;}

.offcanvas-ho.show{transform:none;}

.sidebarmodal {position: fixed;right: 0;top: 0;width: 100vw;height: 100vh;z-index: 1050;transition: .2s ease;pointer-events: none;}
.sidebarmodal.show {background-color: #0004;pointer-events: all;}



/* form { display: flex; flex-wrap: wrap; gap: 12px;} */

/* BULLETS */

.bullet-container { display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 20px; min-height: 100%;}
.bullet-container i { padding: 6px 3px; font-size: 15px; }

.bullet { display: flex; min-width: 18px; max-width: 18px; min-height: 18px; max-height: 18px;  align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-shadow: inset 10px 10px rgb(var(--color-prim)); box-shadow: inset 10px 10px rgb(var(--color-prim)); border: 4px solid rgba(var(--color-prim), .2); border-radius: 50%; }
.bullet.sec { -webkit-box-shadow: inset 10px 10px rgb(var(--color-sec)); box-shadow: inset 10px 10px rgb(var(--color-sec)); border: 4px solid rgba(var(--color-sec), .2); }
.bullet.red { -webkit-box-shadow: inset 10px 10px rgb(var(--color-red)); box-shadow: inset 10px 10px rgb(var(--color-red)); border: 4px solid rgba(var(--color-red), .2); }
.bullet.orange { -webkit-box-shadow: inset 10px 10px rgb(var(--color-orange)); box-shadow: inset 10px 10px rgb(var(--color-orange)); border: 4px solid rgba(var(--color-orange), .2); }
.bullet.green { -webkit-box-shadow: inset 10px 10px rgb(var(--color-green)); box-shadow: inset 10px 10px rgb(var(--color-green)); border: 4px solid rgba(var(--color-green), .2); }
.bullet.text { -webkit-box-shadow: inset 10px 10px rgb(var(--color-text)); box-shadow: inset 10px 10px rgb(var(--color-text)); border: 4px solid rgba(var(--color-text), .2); }
.bullet.text-light { -webkit-box-shadow: inset 10px 10px rgb(var(--color-text-light)); box-shadow: inset 10px 10px rgb(var(--color-text-light)); border: 4px solid rgba(var(--color-text-light), .2); }
.bullet.text-lighter { -webkit-box-shadow: inset 10px 10px rgb(var(--color-text-lighter)); box-shadow: inset 10px 10px rgb(var(--color-text-lighter)); border: 4px solid rgba(var(--color-text-lighter), .2); }
.bullet.info { -webkit-box-shadow: inset 10px 10px rgb(var(--color-info)); box-shadow: inset 10px 10px rgb(var(--color-info)); border: 4px solid rgba(var(--color-info), .2); }
.bullet.border { -webkit-box-shadow: inset 10px 10px rgb(var(--color-border)); box-shadow: inset 10px 10px rgb(var(--color-border)); border: 4px solid rgba(var(--color-border), .2) !important; }



/* MEMO */
.memo-input { display: flex;  width: 100%; min-height: 44px; padding-bottom: 24px;}
.memo-input. .memo-row { border: 0px; }
.memo-input textarea { resize: none; height: 42px; white-space: pre-wrap; }
.memo-input textarea:disabled { background-color: #FFFFFF; border: 0px; resize: none; }
.icon-btn.save-memo { display: flex; width: 42px; height: 100%; margin-left: 12px; background-color: rgb(var(--color-prim));}
.icon-btn.save-memo i { color: #FFFFFF; font-size: 21px;}
.memo-repeat { display: flex; flex-direction: column; width: 100%; margin-top: 12px; justify-content: start;}
.memo-repeat .memo-row:last-child .bullet-line { display: none; }
.memo-row {display: flex;  width: 100%; }
.memo-row strong { margin-left: 24px; }
.bullet-line { width: 1px; height: 100%; background-color: rgb(var(--color-border)); align-self: center;}
.bullet-line-row { width: 100%; height: 1px; background-color: rgb(var(--color-border)); align-self: center; }
.memo-repeater:last-child .bullet-line { display: none; }
.memo-row.logs strong { font-size: 14px; font-weight: 600; color: rgb(var(--color-text));}
.memo-input.logs p { margin-left: 24px; }
.memo-date { align-self: center; font-size: 10px; font-weight: 400; color: rgb(var(--color-text)); }
.border-radius { border-radius: 6px; }

.badge-small p { font-size: 10px; color: #FFFFFF; }
.empty_message {display: flex;flex-direction: column;gap: 12px;justify-content: center;align-items: center;padding: 12px;width: 100%;height: 100%;}
.empty_message i {color: rgb(var(--color-prim));background-color: rgb(var(--color-prim), .1);font-size: 24px;width: 48px;height: 48px;border-radius: 6px;display: flex;align-items: center;justify-content: center;}


/* ABONNEMENTEN */
.subtotal {  display: flex;     align-items: center; height: 30px; padding-left: 24px;}
.subtotal p { white-space: nowrap; font-size: 12px; }
.border-top { border-top: 1px solid rgb(var(--color-text-light)); }
.border-bottom { border-bottom: 1px solid rgb(var(--color-text-light)); }
.bedrag { padding-right: 15px; width: 30%; text-align: end;} 
.totals-container { margin-top: 20px; }
.totals-bedrag { height: 24px; border: 0px none; pointer-events: none; font-size: 12px; text-align: end; padding-right: 15px; width: 30%;}
.radio-buttons.column { width: 50%; gap: 16px; margin-top: 10px; margin-bottom: 16px;}
.option { height: 40.6px;  -webkit-transition: .2s ease;  transition: .2s ease; overflow: hidden;  }
.option.hide { height: 0;  }
.korting { -webkit-transition: .2s ease; transition: .2s ease; }
.korting.hide { width: 0; } 

/* RADIO SELECT */

.radio-select { border: 1px solid rgb(var(--color)); border-radius: 6px; height: 36px; }
.radio-select label { padding: 6px 12px; height: 100%; border-right: 1px solid rgb(var(--color)); cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; transition: .2s ease; cursor: pointer; }
.radio-select label:last-child { border: none !important; }
.radio-select.flex-row-reverse label:last-child {border-right: 1px solid rgb(var(--color)) !important; }
.radio-select.flex-row-reverse label:first-child { border: none !important; }
.radio-select label p { color: rgb(var(--color)); font-size: 10px; font-weight: 500; height: auto; text-align: center;}
.radio-select label i { color: rgb(var(--color)); text-align: center;}
.radio-select input { visibility: hidden; position: absolute; }
.radio-select label:hover { background-color: rgba(var(--color), .1); }
.radio-select label:has(input:checked) { background-color: rgba(var(--color), .2); }


.totals-table tr:nth-child(2) td:nth-child(1), 
.totals-table tr:nth-child(2) td:nth-child(2),
.totals-table tr:nth-child(2) td:nth-child(3),
.totals-table tr:nth-child(2) td:nth-child(4),

.totals-table tr:nth-child(3) td:nth-child(2), 
.totals-table tr:nth-child(3) td:nth-child(1)

{  
border-bottom: 0px;

}

.small-table.totals-table tbody tr:hover { background-color: #FFFFFF; }

.pointer { cursor: pointer; }


/* OVERZICHT PAGINA */
.page-header { padding: 12px 24px;  align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.page-header > div { gap: 12px; }
.page-header .title { font-size: 21px; line-height: 1; margin-bottom: 0px; font-weight: 500; }
/* TABLE */
.table { height: 0px; color: rgb(var(--color-text)) }
.table-container { height: 521px; border-bottom: 1px solid rgba(var(--color-border), .5); }

.table thead { height: 40px; max-height: 40px; background-color: #F2F3F7; font-size: 12px; color: rgb(var(--color-text)) !important; font-weight: 700; text-transform: uppercase; }
.table thead th { font-size: 12px; color: rgb(var(--color-text)) !important; font-weight: 600; }

table.table thead .sorting:before, table.table thead .sorting_asc:before, table.table thead .sorting_desc:before, table.table thead .sorting_asc_disabled:before, table.table thead .sorting_desc_disabled:before { right: 24px !important; font-family: 'Font Awesome 5 Pro'; content: "\f106" !important; top: 0 !important; font-size: 20px; font-weight: 200; }
table.table thead .sorting:after, table.table thead .sorting_asc:after, table.table thead .sorting_desc:after, table.table thead .sorting_asc_disabled:after, table.table thead .sorting_desc_disabled:after { right: 24px !important; font-family: 'Font Awesome 5 Pro'; content: "\f107" !important; bottom: 0 !important; font-size: 20px; font-weight: 200; }
.activiteiten table.table thead .sorting:after, .activiteiten table.table thead .sorting:before { opacity: 0 !important; right: 12px !important; }
.activiteiten table.table thead .sorting:not(.sorting_desc):hover:after { opacity: 1 !important; }
.activiteiten table.table thead .sorting:not(.sorting_asc):hover:before { opacity: 1 !important; }
.activiteiten table.table thead .sorting:not(.sorting_desc):not(.sorting_asc):hover:after { opacity: 0 !important; }
.activiteiten table.table thead .sorting_desc.sorting:before { opacity: .8 !important; }
.activiteiten table.table thead .sorting_asc.sorting:after { opacity: .8 !important; }

.table-container th { padding-left: 24px; vertical-align: middle; border: none; user-select: none; }
.table tbody { border-top: none !important; }
.table tbody tr { height: 48px; max-height: 48px; vertical-align: middle;}
.table tbody tr:hover { background-color: rgba(var(--color-border), .1); }

/* .table-row { height: 60px !important; max-height: 60px !important; width: 100%; }
.table-row:hover { background-color: #FAFAFA; } */

.table-container td { padding-left: 24px; border-bottom: 1px solid rgba(var(--color-border), .5); }
.table-container td .d-flex {  align-items: center; gap: 12px; }
/* thead tr th:first-child, tbody tr td:first-child { width: 42px; min-width: 42px; max-width: 42px; } */

.verlofregelstabel tr {   justify-content: space-between; }
.verlofregelstabel th, .verlofregelstabel td { width: 25%; }

#verlofdatepicker .ui-datepicker { width: 100% !important; display: flex !important; justify-content: space-evenly; z-index: 0 !important; -webkit-box-shadow: none; box-shadow: none; border: 1px solid rgb(var(--color-border)); }
#verlofdatepicker .ui-datepicker::after { content: "Selecteer datums"; position: absolute; left: 50%; top: 12px; -webkit-transform: translate(-50%); transform: translate(-50%); font-size: 12px; }
#verlofdatepicker .ui-datepicker .ui-datepicker-group { padding: 6px; margin: 30px 6px 0 6px; border: 1px solid rgba(var(--color-border), .5); border-radius: 6px; }
#verlofdatepicker a.ui-state-active { background-color: #fff; color: rgb(var(--color-text)) }
#verlofdatepicker .ui-state-selected a { background-color: rgb(var(--color-prim)); color: #fff; font-weight: 500; }

/* SMALL TABLE */
/* SMALL TABLE */
.small-table-header { height: 36px;   justify-content: space-between; }
.acties {  align-items: center; height: 24px; -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; }

/* .small-table { width: 100%;  border-radius: 6px; -webkit-box-shadow: 2px 2px 8px rgba(var(--color-text), .125); box-shadow: 2px 2px 8px rgba(var(--color-text), .125); overflow: hidden; } */
.small-table { margin: 0; }

.small-table thead { height: 30px; border: none; color:rgb(var(--color-info)); }
.small-table thead tr { height: 30px; }
.small-table thead th { font-size: 12px; font-weight:700; text-transform: none;border:none; vertical-align: middle }
.small-table td, .small-table tr { white-space: nowrap; font-size: 12px; padding-left: 15px; height: 35px; }
.small-table th { white-space: nowrap; font-size: 12px; padding-left: 15px; height: 30px; }
.small-table tbody tr { height: 35px; }

.small-table input { height: 24px; border: 0px none; color: rgb(var(--color-text)); font-size: 12px; }
.small-table input:hover, .small-table input:focus { border: 0px none; color: rgb(var(--color-text)); -webkit-box-shadow: none; box-shadow: none; }


.results .item { font-size: 12px; }
.dropdown-small i { font-size: 12px; }
label .icon i.small-icon, .label .icon i.small-icon { font-size: 12px; }

table.small-table thead .sorting:before, table.small-table thead .sorting_asc:before, table.small-table thead .sorting_desc:before, table.small-table thead .sorting_asc_disabled:before, table.small-table thead .sorting_desc_disabled:before { right: 24px !important; font-family: 'Font Awesome 5 Pro'; content: "\f106" !important; top: 0 !important; font-size: 16px; font-weight: 200; }
table.small-table thead .sorting:after, table.small-table thead .sorting_asc:after, table.small-table thead .sorting_desc:after, table.small-table thead .sorting_asc_disabled:after, table.small-table thead .sorting_desc_disabled:after { right: 24px !important; font-family: 'Font Awesome 5 Pro'; content: "\f107" !important; bottom: 0 !important; font-size: 16px; font-weight: 200; }


/* PAGINATION */
.pagebar { display:flex; height: 60px;   justify-content: space-between;  align-items: center; padding: 24px; } 
.pagebar p { font-size: 12px; color:rgb(var(--color-text),0.5);}
.pagebar.small { height: 36px; padding: 12px 24px; border-top: 1px solid rgba(var(--color-border), .5) } 
.pagebar.small .info { font-size: 10px; } 

.pagination { margin: 0; align-items: center; }
.page-link { position: relative; background-color: #F2F3F7; margin: 0px 2px !important; display: flex; align-items: center; justify-content: center; height: 32px; width: 32px; border: 0; border-radius: 50% !important; font-size: 14px; box-shadow: none !important; color: rgb(var(--color-info)); cursor: pointer; } 
.link-container { display: flex; background-color: #F2F3F7; border-radius: 50px;} 
.link-container .page-link { margin: 0px !important; }
.page-link:hover{ background-color: rgba(var(--color-prim), .1); color: rgb(var(--color-prim)); }
.page-link span { display: flex; }
.page-link i { font-size: 18px; }
.page-link.active { background-color: rgb(var(--color-prim)); color: #fff; }
.page-link.disabled { opacity: .5; }
.page-link.middle { height: 30px; width: 30px; }
.page-link.end { height: 28px; width: 28px; }

.small .page-link { margin: 0px 1px !important; height: 24px; width: 24px; font-size: 12px; } 
.small .page-link i { font-size: 14px; }



.absolute { position: absolute !important; }

/* BULKACTIES */
.bulkacties { position: fixed; bottom: 12px; left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%); height: 0px; -webkit-transition: .2s ease; transition: .2s ease; overflow: hidden; border-radius: 6px; }
.bulkacties.show { height: 60px; -webkit-box-shadow: 2px 2px 16px rgba(var(--color-text), .125); box-shadow: 2px 2px 16px rgba(var(--color-text), .125); }

.bulk-container { width: 100%; height: 60px; background-color: #FFFFFF; border-radius: 6px; border-bottom: 3px solid rgb(var(--color-prim));  }
.bulk-container .d-flex { position: relative; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;  align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-right: 1px solid rgba(var(--color-border), .5); padding: 0 12px; min-width: 60px; gap: 9px; }
.bulk-container .d-flex:last-child { border-right: none; }
.bulk-container p { font-size: 10px; text-align: center; line-height: 1;}
.bulk-container h6 { text-align: center; font-size: 24px; margin: 0; line-height: 1; }
.bulkacties i { font-size: 21px; text-align: center; color: rgb(var(--color-text)); }
.bulkactie-knop:hover{ cursor: pointer; background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(var(--color-prim), 0.1)),to(rgba(var(--color-prim), 0.1))), -webkit-gradient(linear,left top, left bottom,from(#fff),to(#fff)); background-image: linear-gradient(rgba(var(--color-prim), 0.1),rgba(var(--color-prim), 0.1)), linear-gradient(#fff,#fff); }
.bulkactie-knop:hover i { background-image: inherit; }
.bulkactie-knop.red:hover{ cursor: pointer; background-color: rgba(var(--color-red), 0.1); }
.bulkactie-knop:hover i, .bulkactie-knop:hover p{ color: rgb(var(--color-prim)); }
.bulkactie-knop.red:hover i, .bulkactie-knop.red:hover p{ color: rgb(var(--color-red)); }



/* POPUP / MODAL */
.offcanvas-backdrop { background-color: rgb(var(--color-text)); }
.offcanvas-backdrop.show { opacity: 0.33; }
.modal { opacity: 0; pointer-events: none; -webkit-transition: .2s ease; transition: .2s ease; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;  align-items: center; }
.modal::after { content: ""; position: fixed; left: 0; top: 0; background-color: rgba(var(--color-text), .125); width: 100vw; height: 100vh; pointer-events: none; z-index: -1; }

.modal-content { border-radius: 6px; background-color: #FFFFFF; -webkit-box-shadow: 2px 2px 16px rgba(var(--color-text), .125); box-shadow: 2px 2px 16px rgba(var(--color-text), .125); border: none; pointer-events: none; }
.modal-content > p {text-align: center;}

.modal-header { height: 48px; background-color: rgb(var(--color-prim)); position: relative; padding: 0; border-radius: 6px 6px 0 0; }
.modal-header h5 { font-weight: 500; color: #FFF; font-size: 16px; width: 100%; text-align: center; }
.modal-header .btn-close { position: absolute; top: 0; right: 0; border-radius: 6px; background: #FFF; -webkit-box-shadow: 2px 2px 16px rgba(var(--color-text), .125); box-shadow: 2px 2px 16px rgba(var(--color-text), .125); -webkit-transform: translate(3px, -3px); transform: translate(3px, -3px); opacity: 1; width: 32px; height: 32px; padding: 0; -webkit-transition: .2s ease; transition: .2s ease; }
.modal-header .btn-close::after { position: absolute; font-family: 'Font Awesome 5 Pro'; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: "\f00d"; font-weight: 300; color: rgb(var(--color-text)); font-size: 22px; opacity: .8; -webkit-transition: .2s ease; transition: .2s ease; }
.modal-header .btn-close:hover { -webkit-transform: translate(0); transform: translate(0); }

.modal-body { padding: 24px;  display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;  align-items: center; gap: 24px; }
.modal-body .icon-50px { font-size: 50px; color: rgb(var(--color-prim)); }
.modal-body h3 { text-align: center; }

.modal-footer { padding: 12px 24px; border-top: 1px solid rgb(var(--color-border), .5); display: flex; justify-content: center; align-items: center; gap: 12px; }
.modal-footer>* { margin: 0; }

.modal.show { opacity: 1; pointer-events: all; display: flex !important; }
.modal.show .modal-content { pointer-events: all; }
.modal-backdrop { background: none; }

.modal .forget { color: rgb(var(--color-prim)); width: 100%; padding: 0px 24px 24px; font-size: 12px; text-align: center; margin-top: -12px; }
.modal .forget:hover { text-decoration: underline; cursor: pointer; }

.modal.orange .modal-header { background-color: rgb(var(--color-orange)); }

.modal.red .modal-header { background-color: rgb(var(--color-red)); }

.modal.green .modal-header { background-color: rgb(var(--color-green)); }


/* TABS */
.tabs { display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; position: relative; width: 100%; padding: 0 12px; margin: 0; border-bottom: 1px solid rgba(var(--color-border), .5) } 

.tabs.medewerker li { text-transform: uppercase; }
.tabs.medewerker li:hover { background-color: rgba(var(--color-prim), .1); cursor: pointer; }

.tabs li { list-style: none; height: 36px; color: rgb(var(--color-text)); padding: 0 12px; margin: 0px 0; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;  align-items: center; font-size: 12px; white-space: nowrap; border-radius: 6px; -webkit-transition: .2s ease; transition: .2s ease; background-color: transparent; gap: 6px; }

.tabs li::after { position: absolute; left: 0; bottom: 0; min-width: 10px; height: 2px; background-image: -webkit-gradient( linear, left top, right top, from(rgb(var(--color-prim))), to(rgba(var(--color-prim), .6))); background-image: linear-gradient( 90deg, rgb(var(--color-prim)), rgba(var(--color-prim), .6)); -webkit-transition: .5s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: .5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

.tabs li:hover { background-color: rgba(var(--color-prim), .1); cursor: pointer; }

.tabs li.active { color: rgb(var(--color-prim)); }

.tabs .tabline { position: absolute; left: 0; bottom: 0; min-width: 10px; height: 2px; background-image: -webkit-gradient( linear, left top, right top, from(rgb(var(--color-prim))), to(rgba(var(--color-prim), .6))); background-image: linear-gradient( 90deg, rgb(var(--color-prim)), rgba(var(--color-prim), .6)); -webkit-transition: .5s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: .5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

.tabs i { font-size: 18px; margin-right: 6px; }
.tabs li.active p { color: rgb(var(--color-prim)); }

li::marker { content: none; }

.tab-container {display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;   justify-content: space-between;}

.sticky-buttons {display: flex; position: absolute; bottom: 0; left: 0; padding: 18px 24px; width: 100%; background-color: #FFF; border-top: 1px solid rgba(var(--color-border), .5); gap: 18px; z-index: 100; }

.settings-tabs { width: 100%; height: 36px; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;  align-items: center; }

.tab-item {  position: relative; height: 40px; border-radius: 5px; background-color: transparent; padding: 0 24px; display: flex;  align-items: center; color: rgb(var(--color-text)); cursor: pointer; }

.tab-item, .tab-item i, .tab-item p { -webkit-transition: .2s ease; transition: .2s ease; }
.tab-item i { font-size: 18px; }
.tab-item p { padding-left: 10px; font-size: 14px; }
.tab-item:hover { background-color: rgba(var(--color-text), .1); }
.tab-item.active { background-color: rgb(var(--color-prim)); }
.tab-item.active i, .tab-item.active p { color: #FFFFFF; }

.tab-content { position: relative; overflow: hidden; width: 100%; }
.tab-content .tab { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow-y: scroll; overflow-x: hidden; -webkit-transition: .2s ease; transition: .2s ease; padding-top: 24px; }
.tab-content .tab form { padding: 0; }

.left-100 { -webkit-transform: translate(-101%); transform: translate(-101%); }
.right-100 { -webkit-transform: translate(101%); transform: translate(101%); }

/* TAB PAGE */
.tab-page { display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; -webkit-transition: .2s .4s ease; transition: .2s .4s ease; position: absolute; top: 0; padding: 24px; margin-top: 24px; }
.tab-page-opdrachten { display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; -webkit-transition: .2s .4s ease; transition: .2s .4s ease; position: absolute; top: 0; margin-top: 24px; }
.tab-page.hide { pointer-events: none; opacity: 0; -webkit-transition-delay: 0s; transition-delay: 0s; height: 0px; overflow: hidden; } 
.tab-page h1 { margin-bottom: 20px; }

.tab-page .tab-inner { display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;margin-top: 10px;justify-content: space-between; }
.tab-page .tab-container { display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;margin-top: 10px;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: start; gap: 120px;}
.tab-page .tab-container-column { display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;margin-top: 10px;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: start;}
.tab-page .tab-container-section { display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding-bottom: 20px;justify-content: space-between; gap: 20px; }
.tab-page .tab-container .tab-container-title { margin-bottom: 20px;}
.tab-page .input-row { display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; margin-top: 10px;   justify-content: space-between;  align-items: center;}
.tab-page .input-group { display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 10px;}

.tab-page .tag-container { display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 10px; padding-top: 15px; }

.tab-page.factuurpdf { display: flex; -webkit-box-orient: horizontal!important; -webkit-box-direction: normal!important; -ms-flex-direction: row!important; flex-direction: row!important;   justify-content: space-between; }



/* LOGIN PAGE */
.login { width: 100vw; height: 100vh;  display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;  align-items: center; overflow: hidden; }
.login-container { width: 400px; position: relative; padding: 48px 24px 24px; color: rgb(var(--color-text)); }

.login .box-a { position: absolute; background-color: rgba(var(--color-prim), 0.1); height: 240px; width: 240px; z-index: -1; top: -72px; left: -48px; border-radius: 24px; }
.login .box-b { position: absolute; border: 1px solid rgba(var(--color-prim), 0.5); height: 180px; width: 180px; z-index: -1; top: -96px; left: 48px; border-radius: 24px; }
.login .box-c { position: absolute; border: 1px dashed rgba(var(--color-prim), 0.5); height: 300px; width: 300px; z-index: -1; bottom: -96px; right: -72px; border-radius: 24px;  display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;  align-items: center; }
.login .box-d { background: rgba(var(--color-prim), 0.1); height: 240px; width: 240px; z-index: -1; border-radius: 24px; }

.login .stap1 { width: 100% ; display: flex !important; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 24px 0px; gap: 12px; }
.login .stap1 img { height: 120px; padding-bottom: 12px; }
.login .stap1 .text-input { width: 100%; }
.login .stap1 .center { text-align: center; font-size: 14px; }
.login .stap1 .title { font-size: 18px; font-weight: 500; }
.login .stap1 .ga-terug { width: 100%; margin: 0; padding-top: 12px; font-size: 12px; color: rgb(var(--color-prim)); text-align: center; }
.login .stap1 .ga-terug:hover { text-decoration: underline; cursor: pointer; }
.login .stap1 .ga-terug i { margin-right: 6px; }



/* MISC */
:root { --color-tag: var(--color-prim); }
.tag { padding: 6px 12px; background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(var(--color-tag), .1)),to(rgba(var(--color-tag), .1))), -webkit-gradient(linear,left top, left bottom,from(#fff),to(#fff)); background-image: linear-gradient(rgba(var(--color-tag), .1),rgba(var(--color-tag), .1)), linear-gradient(#fff,#fff); color: rgba(var(--color-tag), 1); font-size: 10px !important; font-weight: 600;  display: flex;  align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 6px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; }
.tag p { font-size: 10px !important; font-weight: 600; color: inherit !important; }

.tag.button:hover { background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(var(--color-tag), 0.2)),to(rgba(var(--color-tag), 0.2))), -webkit-gradient(linear,left top, left bottom,from(#fff),to(#fff)); background-image: linear-gradient(rgba(var(--color-tag), 0.2),rgba(var(--color-tag), 0.2)), linear-gradient(#fff,#fff); cursor: pointer; }
.tag i { background-image: inherit; }
.tag.sec { --color-tag: var(--color-sec); }
.tag.red { --color-tag: var(--color-red); }
.tag.orange { --color-tag: var(--color-orange); }
.tag.green { --color-tag: var(--color-green); }
.tag.yellow { --color-tag: var(--color-yellow); }
.tag.text { --color-tag: var(--color-text); }
.tag.text-light { --color-tag: var(--color-text-light); }
.tag.text-lighter { --color-tag: var(--color-text-lighter); }
.tag.info { --color-tag: var(--color-info); }
.tag.border { --color-tag: var(--color-border); }
.tag.grey { --color-tag: var(--color-grey); }
.tag.bellen {  --color-tag: var(--color-text);   }
.tag.intake { background-image: none;color:rgb(var(--color-tag2));background-color: rgba(var(--color-background-tag2),0.2);  }
.tag.mailen { background-image: none;color:rgb(var(--color-tag3));background-color: rgb(var(--color-background-tag3), .2);  }
.tag.taak { background-image: none;color:rgb(var(--color-tag4));background-color: rgb(var(--color-background-tag4));  }
.tag.vervolg { background-image: none;color:rgb(var(--color-tag5));background-color: rgb(var(--color-background-tag5));  }
.tag.verkocht { --color-tag: var(--color-green); }
.tag.niet.verkocht { --color-tag: var(--color-red); }
.tag.slechte.lead { --color-tag: var(--color-orange); }

.tag.groen { background-image: none;color:rgb(var(--color-tag14));background-color: rgba(var(--color-tag14),0.1);  }
.tag.ongeldig { background-image: none;color:rgb(var(--color-tag12));background-color: rgba(var(--color-tag12),0.1);  }
.tag.lichtgroen { background-image: none;color:rgb(var(--color-tag13));background-color: rgba(var(--color-tag13),0.1);  }
.tag.oranje { background-image: none;color:rgb(var(--color-tag16));background-color: rgba(var(--color-tag16),0.1);  }
.tag.beoordelen { background-image: none;color:rgb(var(--color-tag15));background-color: rgba(var(--color-tag15),0.1);  }
.tag.spam {  --color-tag: var(--color-red); }
.tag.rood { --color-tag: var(--color-red); }
.tag.bestaandandermerk { background-image: none;color:rgb(var(--color-tag18));background-color: rgba(var(--color-tag18),0.1);  }


.gap-0 { gap: 0 !important; }
.gap-3 { gap: 3px !important; }
.gap-6 { gap: 6px !important; }
.gap-12 { gap: 12px !important; }
.gap-18 { gap: 18px !important; }
.gap-24 { gap: 24px !important; }

:root { --color-initials: var(--color-prim); --opacity-initials: 0.1; }
.initials { width: 33px; height: 33px; background-color: rgba(var(--color-initials), var(--opacity-initials)); border-radius: 50%; color: rgb(var(--color-initials)) !important; font-weight: 600; text-transform: uppercase; font-size: 12px;  display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;  align-items: center; line-height: 1; -webkit-transition: .2s ease; transition: .2s ease; }

.avatar { width: 33px; height: 33px; }

.initials.prim { --color-initials: var(--color-prim); }
.initials.sec { --color-initials: var(--color-sec); }
.initials.red { --color-initials: var(--color-red); }
.initials.orange { --color-initials: var(--color-orange); }
.initials.green { --color-initials: var(--color-green); }
.initials.text { --color-initials: var(--color-text); }
.initials.text-light { --color-initials: var(--color-text-light); }
.initials.text-lighter { --color-initials: var(--color-text-lighter);  }
.initials.info { --color-initials: var(--color-info); }
.initials.border { --color-initials: var(--color-border); border: none !important; }

.initials.small { width: 24px; height: 24px; font-size: 10px; }
.initials.smaller { width: 18px; height: 18px; font-size: 8px; }
.initials.large { width: 80px; height: 80px; font-size: 36px; }
.initials.solid { --opacity-initials: 1; color: #ffffff !important; }
.initials.square { border-radius: 6px !important; }

.initials.overlap { margin-right: -18px; border: 3px solid #fff; background-image:  -webkit-gradient(linear,left top, left bottom,from(rgba(var(--color-initials), var(--opacity-initials))),to(rgba(var(--color-initials), var(--opacity-initials)))),-webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)) ; background-image:  linear-gradient(rgba(var(--color-initials), var(--opacity-initials)),rgba(var(--color-initials), var(--opacity-initials))),linear-gradient(#fff, #fff) ; }
.initials.solid.overlap { margin-right: -18px; border: none; background-image:  none ; }
.initials.small.overlap { margin-right: -12px; }
.initials.button:hover { opacity: 1; cursor: pointer; }

.pill { background-color: rgba(var(--color-info), .1);  display: flex;  align-items: center; padding-right: 24px; gap: 12px; border-radius: 50px; }
.pill.hover:hover { outline: 1px solid rgb(var(--color-sec)); }
.pill.hover:hover p { color: rgb(var(--color-sec)); }
.pill p { white-space: nowrap; }

.actie-buttons {  display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
.actie-buttons-small {  display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; padding-right: 15px; }

/* DETAILS PAGE */
.details-main {  display: flex; flex-direction: row; justify-content: space-between; gap: 20px; background: none; }
.details-inner {  display: flex;   width: 80%; }
.details-actions {  display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 6px; padding: 24px; }
.details-actions-row { display: flex;  gap: 12px;  align-items: center;   justify-content: space-between;}




/* .details-actions input { pointer-events: none; } */
.details-actions span { font-size: 16px; font-weight: 400; color: rgb(var(--color-text)); }
.details-totals {  display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 24px; width: 30%; -ms-flex-item-align: end; align-self: flex-end; }
.bedrag-row {  display: flex;  height: 40px; }
.bedrag-row span { font-size: 16px; font-weight: 500; color: rgb(var(--color-text-light)); -ms-flex-item-align: center; align-self: center;}
.bedrag-row span:nth-child(3){ text-align: end; }
.actions-group {  display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; }
.history-container {  display: flex;  gap: 10px;}
.tooltip-container { height: 20px; width: 20px; border: 1px solid rgb(var(--color-info)); border-radius: 50%; background-color: rgb(var(--color-border)); text-align: center; }
.tooltip-container p { -ms-flex-item-align: center; align-self: center; justify-self: center; font-size: 11px; color: rgb(var(--color-info)); } 
.log-text p { font-size: 12px; font-weight: 400; color: rgb(var(--color-text)); }
input.disabled { pointer-events: none; }

.y-scroll { overflow-y: scroll;}



/* NIEUWFACTUUR PAGE */
/*
.contactdetails {  display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 20px; gap: 10px; }
.factuurdetails {width: 75%; }
.detailrow {  display: flex;   height: 40px; -webkit-box-align: start; -ms-flex-align: start; align-items: start;   justify-content: space-between;}
.regelheader { height: 45px;  display: flex;      justify-content: space-between;  align-items: center; padding: 0 24px;}
.factuurregels { width: 100%;  display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; justify-items: space-between;  align-items: center; padding: 0 24px; gap: 10px; }
.regelbuttons {  display: flex;  padding: 0 24px;   justify-content: space-between;  align-items: center; }
.factuurregel { padding: 0 12px; } 
.factuurregel.detail { pointer-events: none; }



.dropdown-container button { -ms-flex-item-align: end; align-self: end; margin-top: 3px; }



.regelkorting {  display: flex; width: 100%; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end;  align-items: center; gap: 12px; padding: 20px 6px; }
.regelkorting p { font-size: 12px; }
.hidden_input { display: none; }

.factuurkorting {  display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-item-align: end; align-self: end; padding: 24px; width: 30%;  background-color: rgb(var(--color-border), 0.6); margin-right: 24px; gap: 12px;}

.factuurkorting .sectie {  display: flex;      justify-content: space-between;  align-items: center; }
.sectie p:hover { cursor: pointer; color: rgb(var(--color-prim));}

.prim-btn.betaling_ongedaan { background-color: rgb(var(--color-info)); }
.prim-btn.betaling_ongedaan:hover { -webkit-box-shadow: 0px 3px 9px rgba(var(--color-info), 0.5); box-shadow: 0px 3px 9px rgba(var(--color-info), 0.5);  }


p.hover:hover { color: rgb(var(--color-prim)); }

.korting-row { -webkit-transition: 0.2s ease; transition: 0.2s ease; }
.korting-row.hide span{ height: 0; display: none;}

.tag.Verzonden { --color-tag: var(--color-prim); }
.tag.Concept { --color-tag: var(--color-orange); }
.tag.Betaald { --color-tag: var(--color-green); }
.tag.Vervallen { --color-tag: var(--color-red); }

.product-row {  display: flex;  width: 540px;   justify-content: space-between; padding: 0 6px; }
.product-row.item {-webkit-box-orient: horizontal!important;-webkit-box-direction: normal!important;-ms-flex-direction: row!important;flex-direction: row!important; min-height: 40px;  align-items: center;   justify-content: space-between;}
.product-row.item p { font-size: 14px; color: rgb(var(--color-text-lighter), 0.8);}
.product-row.item:hover p { color: rgb(var(--color-prim)); }
.product-row.item p.left { text-align:left; }
.product-row.item p.right { text-align: right; }

.button-row {  display: flex;  gap: 12px; padding: 6px; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end;}
.button-row button { width: 25%; min-height: 20px!important;}

button.back i { color: rgb(var(--color-text-lighter)); }
*/

/* SJABLONEN */
/*
.var-sjabloon {  display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; padding-left: 50px; padding-top: 12px;}
.var-sjabloon button {width: 55%; height: 36px; font-size: 12px;}
.var-sjabloon .tag { border: 0; }
.note-editable .tag { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin: 3px;} 

.sjabloonpage {  display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; padding: 20px 40px; border: 1px dashed rgb(var(--color-border));}

.sjabloon-container{  display: flex;      justify-content: space-between; padding: 24px;}
.sjabloon-container.foot { margin-top: 48px; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; }
.contact-info {  display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 6px; border: 1px dashed rgb(var(--color-border)); width: 30%; }
.bedrijf-info { text-align: end;}
.sjabloontabel { pointer-events: none; border: 1px dashed rgb(var(--color-border)); }

.footertext {  display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.footertext p { justify-self: center; display: inline-block; }

.totals-table-sjabloon tr:nth-child(2) td:nth-child(1), 
.totals-table-sjabloon tr:nth-child(2) td:nth-child(2),
.totals-table-sjabloon tr:nth-child(2) td:nth-child(3),
.totals-table-sjabloon tr:nth-child(2) td:nth-child(4),
.totals-table-sjabloon tr:nth-child(2) td:nth-child(5),
.totals-table-sjabloon tr:nth-child(2) td:nth-child(6),
.totals-table-sjabloon tr:nth-child(2) td:nth-child(7),

.totals-table-sjabloon tr:nth-child(3) td:nth-child(1), 
.totals-table-sjabloon tr:nth-child(3) td:nth-child(2),
.totals-table-sjabloon tr:nth-child(3) td:nth-child(3),
.totals-table-sjabloon tr:nth-child(3) td:nth-child(4),
.totals-table-sjabloon tr:nth-child(3) td:nth-child(5),
.totals-table-sjabloon tr:nth-child(3) td:nth-child(6)


{  
border-bottom: 0px;

}

.totals p { color: rgb(var(--color-text-lighter)); font-size: 12px; }

.footer { border: 1px dashed rgb(var(--color-border));  display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; padding: 24px; width: 100%;}
.footer.no-border { border: 0; }
.footer.no-border .footertext { font-size: 24px!important; }
.footer p { text-align: center; justify-self: center; }

.contactvariabelen {  display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 24px; gap: 12px; -ms-flex-line-pack: center; align-content: center; border: 1px solid rgb(var(--color-border));}
.variabele-row {display: flex;     align-items: center; height: 60px; border: 1px solid rgb(var(--color-border));}
.modal-footer.variabelen {padding-top: 24px;}

.variabel {  display: flex;     align-items: center; height: 30px; padding: 6px 12px; }
.head-row {  display: flex;     align-items: center;   justify-content: space-between; padding: 12px; background-color: #F2F3F7;}
.head-row-pdf {  display: flex;     align-items: center;   justify-content: space-between; padding: 12px;background-color: #FFFFFF; }
.head-row-pdf p { font-size: 12px; color: rgb(var(--color-text-lighter)); }

.head-row p { font-size: 12px; color: rgb(var(--color-text-lighter)); font-weight: 700; text-transform: uppercase; }


.cell { height: 100%; width: 100%; background-color: #ffffff; border-top: 1px solid rgb(var(--color-border)); font-weight: 700; text-transform: uppercase;}
*/

/* DROPZONE */
.dropzone { width: 100%; height: 100%; border: 1px dashed rgb(var(--color-info), .5); border-radius: 6px; padding: 6px;  display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;  align-items: center; }
.dropzone .temp-image { max-width: 100%; }
.dropzone:has(.dz-error) { border-color: rgb(var(--color-red)); }
.dropzone:hover { -webkit-box-shadow: 3px 1px 6px 0px rgba(var(--color-text), .125); box-shadow: 3px 1px 6px 0px rgba(var(--color-text), .125); }
.dropzone:focus { border-color: rgb(var(--color-prim)); padding-left: 18px; -webkit-box-shadow: 3px 1px 6px 0px rgba(var(--color-text), .125); box-shadow: 3px 1px 6px 0px rgba(var(--color-text), .125); }
.dropzone.invalid { border-color: rgb(var(--color-red)); }
.dropzone .dz-message {  display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;  align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3px; margin: 0; }
.dropzone .dz-message i { font-size: 24px; }
.dropzone .dz-message .dz-button { border-radius: 6px; font-size: 12px; color: #FFF; background-color: rgb(var(--color-prim)); padding: 6px 12px; }
.dropzone.dz-started .dz-message {  display: flex; }
.dropzone .dz-preview { width: 100%; min-height: 82px; max-height: 82px;  display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;  align-items: center; margin: 0; }
/* .dropzone:has(.dz-error) .dz-preview .dz-image { display: none; } */
.dropzone .dz-preview .dz-image { width: 100%; height: 82px;  display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;  align-items: center; margin: 0; border-radius: 0; padding: 6px; }
.dropzone .dz-preview .dz-image img { height: 82px; -o-object-fit: contain; object-fit: contain; max-width: 100%; -webkit-transition: .2s ease; transition: .2s ease; }
.dropzone .dz-preview:hover .dz-image img { -webkit-filter: none; filter: none; -webkit-transform: scale(0.95); transform: scale(0.95); }
.dropzone .dz-preview .dz-details { top: 100%; background-color: #333; border-radius: 6px; min-width: fit-content; max-width: fit-content; padding: 6px 12px; left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%); }
.dropzone .dz-preview .dz-details div { margin: 0 !important; padding: 0 !important; }
.dropzone .dz-preview .dz-details div span { background-color: transparent !important; color: #FFF; font-size: 12px; margin: 0 !important; padding: 0 !important; }
.dropzone .dz-preview .dz-error-message { opacity: 1 !important; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: rgb(var(--color-red)); width: -webkit-max-content; width: -moz-max-content; width: max-content; border-radius: 6px; padding: 6px 12px; }
.dropzone .dz-preview .dz-error-message::after { display: none; }
.dropzone .dz-preview .dz-error-message span { font-weight: 500; font-size: 12px; color: #FFF; }
.dropzone .dz-preview .dz-succes-mark, .dropzone .dz-preview .dz-error-mark { display: none; }
.dropzone .dz-preview.dz-file-preview .dz-details { opacity: 0; }

.pdfpreview {  display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; width: 100%;}

/* Export */
.dates, .numbers {  display: flex; width: 100%; gap: 12px;  align-items: center; } 
.dates p {text-align: center; -ms-flex-item-align: center; align-self: center;}
.dates i { color: rgb(var(--color-text), 0.6) }
.checkboxes {  display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 12px; width: 100%; -ms-flex-item-align: start; align-self: start;  } 
.modal-body.export p { -ms-flex-item-align: start; align-self: start; }

/* Inkoopfactuur */

.newinkoopregel {  display: flex;      justify-content: space-between;  align-items: center; padding: 24px;} 
.details-actions.inkooprregels {gap: 24px; }


/* users */
.userdetail {  display: flex;      justify-content: space-between; margin-left: 12px; gap: 12px;  align-items: center;} 
.teamleden {  display: flex;  align-items: center; gap: 6px; border-bottom: 1px solid rgba(var(--color-border), .5) ; }
.teamleden-details {  display: flex;     align-items: center; height: 42px; gap: 12px; }
.teamleden:hover { cursor: pointer; background-color: rgb(var(--color-prim), 0.1); }
.teamleden:hover p { color: rgb(var(--color-prim)); }


.teamlid { height: 24px; background-color: rgb(var(--color-info),0.1);  display: flex;  align-items: center;   justify-content: space-between; border-radius: 50px; gap: 6px; }
.teamlid .remove { height: 24px; width: 24px; font-size: 10px;  display: flex;  align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 50%; }
.teamlid .remove:hover { cursor: pointer; background-color: rgb(var(--color-text),0.1); color: #FFFFFF; }

/* Urenregistratie */
/*
.filterstitle { font-size: 12px; color: rgb(var(--color-text-lighter)); font-weight: 600; text-transform: uppercase; margin-bottom: 6px; }
.week-header {background-color: #fff;  z-index: 3;  display: flex;  min-height: 60px; height: 60px; width: 100%; border-bottom: 1px solid rgb(var(--color-border));  align-items: center; padding: 0 12px;   justify-content: space-between;}

.no-option { opacity: .4; pointer-events: none; background: rgba(var(--color-border), .25); }
.no-option i { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(var(--color-border), .25)), to(rgba(var(--color-border), .25))),-webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)); background-image: linear-gradient(rgba(var(--color-border), .25), rgba(var(--color-border), .25)),linear-gradient(#fff, #fff); }

.datepicker-group {  display: flex;     align-items: center; width: 25%; }
.datepicker-group label { position: relative; }
.datepicker-group input { opacity: 0%; cursor: pointer; pointer-events: none; position: absolute; }
.datepicker-group p { height: 30px; font-size: 14px; cursor: pointer; padding: 0 12px; -webkit-transition: .2s ease; transition: .2s ease; }
.datepicker-group input:hover ~ p { background-color: rgba(var(--color-prim), .1); border-radius: 6px; color: rgb(var(--color-prim)); }

.urenregel {  display: flex;  height: 70px; width: 100%;  align-items: center; border-bottom: 1px solid rgba(var(--color-border), .5); } 
.urenregel:has(.checked) .uren-groep .g-1 > div { background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(var(--color-prim), .1)),to(rgba(var(--color-prim), .1))), -webkit-gradient(linear,left top, left bottom,from(#fff),to(#fff)) !important; background-image: linear-gradient(rgba(var(--color-prim), .1),rgba(var(--color-prim), .1)), linear-gradient(#fff,#fff) !important; }
.bolletje { background-color: rgba(var(--color-info), 0.5); min-width: 9px; height: 9px; border-radius: 50% }
.bolletje.geaccordeerd, .bolletje.gefactureerd { background-color: rgb(var(--color-green)); }
.uren-groep {  display: flex;     align-items: center; width: 60%;   justify-content: space-between; height: 100%;}
.uren-groep .g-1 { padding-right: 1px; border-right: 1px solid #fff; }

.border-sides { border-left: 1px solid rgb(var(--color-border)); border-right: 1px solid rgb(var(--color-border)); }

.add-activiteiten-regel {  display: flex;  height: 60px; width: 100%;  align-items: center;} 
.add-activiteiten-regel .item { min-height: 72px; }

.activiteiten-groep {height: 100%;  display: flex;     align-items: center; width: 40%; border-right: 1px solid rgba(var(--color-border), .5);}
.activiteiten-groep i { color: rgb(var(--color-text-lighter)); }
.add-activiteiten-groep .label { height: 40px; }

.add-activiteiten-groep {height: 100%;  display: flex;     align-items: center; border-right: 1px solid rgba(var(--color-border), .5); border-bottom: 1px solid rgba(var(--color-border), .5); padding:0 58px 0 24px;}
.add-activiteiten-groep .checkbox, .add-activiteiten-groep .initial { opacity: 0; pointer-events: none; }

.add-activiteiten-groep input { height: 40px; }

.activiteiten-groep input { opacity:0%; height: 58px; }
.activiteiten-groep .activiteit-text { height:58px; width: 100%; position: absolute; top: 0; left: 0; border: 1px solid rgb(var(--color-border)); border-radius: 6px;}

.weekdagen {  display: flex; height: 24px;  align-items: center;} 
.totalen {  display: flex; height: 24px;  align-items: center;} 

.dagen { padding: 0 1px; border-right: 1px solid #FFF;  display: flex;  align-items: center; width: 60%; height: 100%; background-color: rgba(var(--color-border), .5); gap: 1px; margin-left: -2px; }
.dagen > div { width: 100%; height: 100%; background-color: #fff;  display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;  align-items: center; }
.dagen button { opacity: 0; pointer-events: none; }
.day {  width: 90px;  display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;  align-items: center; font-size: 12px; font-weight: 500; }
.day.hide { display: none; }

 .blank { width: 38px; height: 38px; }

.scroll-container { overflow-y: scroll; height: 100%}

.click:hover { background-color: rgba(var(--color-prim), .1); }
.click:hover p, .click:hover strong { color: rgb(var(--color-prim)); }

.titel-act { font-style: italic; color: rgb(var(--color-text-lighter)); }
.detail-act { font-style: italic; color: rgb(var(--color-text-lighter)); }
*/

/* Opmerkingbox */

.dropdownmenu-btn-opmerking { position: relative; width: 40px; height: 40px;  align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.dropdownmenu-btn-opmerking i { font-size: 18px; color: rgb(var(--color-info)); }
.dropdownmenu-btn-opmerking i.color-prim { font-size: 18px; color: rgb(var(--color-prim)); }
.dropdownmenu-btn-opmerking input { width: 100%; height: 100%; position: absolute; left: 0; top: 0;  cursor: pointer; border: 1px solid rgb(var(--color-border)); border-radius: 6px; background-color: transparent; }

.dropdownmenu-btn-opmerking input:focus ~ .dropdownmenu-opmerking { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0s; transition-delay: 0s; }
.dropdownmenu-opmerking:has(textarea:focus) { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0s; transition-delay: 0s; }
.dropdownmenu-opmerking { position: absolute !important; top: 100%; overflow: hidden;  display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; opacity: 0; -webkit-transform-origin: top left; transform-origin: top left; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: top center; transform-origin: top center; -webkit-transition: .2s .1s ease-out; transition: .2s .1s ease-out; z-index: 3;}

.dropdownmenu-opmerking .divider { width: 100%; min-height: 1px; background-color: rgb(var(--color-border)); }
.dropdownmenu-opmerking .menu-container { width: 100%; padding: 0px; }
.dropdownmenu-opmerking .menu-item { height: 100%; width: 100%; padding: 12px;  align-items: center; background-color: transparent; -webkit-transition: .2s ease; transition: .2s ease; border-radius: 0px; cursor: pointer; }

.dropdownmenu-opmerking .menu-item i { font-size: 18px; margin-right: 12px; }
.dropdownmenu-opmerking .menu-item textarea { width: 500px; }
.dropdownmenu-opmerking .menu-item p { font-size: 14px; white-space: nowrap; }
.dropdownmenu-opmerking .menu-item i, .dropdownmenu-opmerking .menu-item p { -webkit-transition: .2s ease; transition: .2s ease; }
.prim-border-bottom { border-bottom: 3px solid rgba(var(--color-prim)) }


/* TIME INPUT */
.incl-pauze { overflow: hidden; height: 40px;  align-items: center; -webkit-transition: .2s ease; transition: .2s ease; width: 264px; }
.incl-pauze:has(.invalid) { overflow: visible; }
.incl-pauze.hide { height: 0; overflow: hidden !important; width: 0; }
.incl-pauze .time_wrapper { height: 100%; }
.incl-pauze .time_input { height: 100%; }
.incl-pauze .time_input input { height: 100%; }
.incl-pauze .time_input span { max-height: 100%; }
.bedrijfstijden-container:has(input:checked) .time_wrapper { opacity: 0.25; }
.bedrijfstijden-container:has(input:checked) p { opacity: 0.5; }
.time_wrapper { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: relative; -webkit-transition: .2s ease; transition: .2s ease; }
.time_input { border: 1px solid rgb(var(--color-border)); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content;  display: flex;  align-items: center; background-color: #fff; }
.time_input span { color: rgb(var(--color-text)) !important; }
.time_input input { width: 42px; height: 38px; border: 1px solid transparent; padding: 6px; text-align: center; color: rgb(var(--color-text)); }
.time_input input.small { height: 0; min-height: 28px; padding: 0 !important; }
.time_input input:hover { border: 1px solid rgb(var(--color-border)); }
.time_input, .time_input input { border-radius: 6px; }
.time_input input:focus { border: 1px solid rgb(var(--color-prim)); padding-left: 6px; }

.time_input input.invalid { border: 1px solid rgb(var(--color-red)); }
.error { color: rgb(var(--color-red)); font-size: 10px; position: absolute; top: 100%; left: 0; white-space: nowrap; }


:root {
    --color-toast: var(--color-prim)
}

/* TOAST */
.toast { border-radius: 6px; margin: 6px 0; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: stretch; min-height: 60px; border: 1px solid rgb(var(--color-border)); border-left: 3px solid rgb(var(--color-toast)); overflow: hidden; }
.toast-body { padding: 0; display: flex; align-items: center; }
.toast-body i { padding: 12px 0 12px 12px; font-size: 30px; color: rgb(var(--color-toast)); }
.toast-body div { padding: 6px 12px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.toast-body h5, .toast-body h6 { font-size: 15px; font-weight: 500; color: rgb(var(--color-text)); }
.toast-body p { font-size: 12px; font-weight: 500; color: rgb(var(--color-text)); }
.toast-header { padding: 0; box-sizing: border-box; border: none !important; background-color: transparent; }
.toast .btn-close { width: 60px; height: 100%; display: flex; justify-content: center; align-items: center; border-left: 1px solid rgb(var(--color-border)); box-sizing: border-box; margin: 0; background: transparent; opacity: 1; transition: .1s ease; border-radius: 0; }
.toast .btn-close:hover { background-color: rgba(var(--color-toast), .1); }
.toast .btn-close:hover::after { color: rgb(var(--color-toast)) }
.toast .btn-close::after { content: "\f00d"; font-family: 'Font Awesome 5 Pro'; font-size: 18px; font-weight: 100; color: rgb(var(--color-text)); transition: .1s ease; }
.toast .action { height: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 12px; border-left: 1px solid rgba(var(--color-border), .5); transition: .1s ease; gap: 6px; background-color: transparent; }
.toast .action:hover { background-color: rgba(var(--color-toast), .1); color: rgb(var(--color-toast)); cursor: pointer; }
.toast .action:hover p { color: rgb(var(--color-toast)); }
.toast .action i { font-size: 18px; }
.toast .action p { font-size: 10px; color: rgb(var(--color-text)); max-width: 60px; text-align: center; line-height: 1.2; }

.toast:has(.solid) { background: linear-gradient(rgba(var(--color-toast), .1), rgba(var(--color-toast), .1)),
                                 linear-gradient(#fff, #fff); }

.toast:has(.sec) { --color-toast: var(--color-sec); }
.toast:has(.red) { --color-toast: var(--color-red); }
.toast:has(.orange) { --color-toast: var(--color-orange); }
.toast:has(.green) { --color-toast: var(--color-green); }
.toast:has(.text) { --color-toast: var(--color-text); }



/* SWITCH */
:root {  --color-switch: var(--color-prim); }
.switch { position: relative;  display: flex; height: 36px;  align-items: center; }
.switch p { width: 50%; }
.switch input { opacity: 0; position: absolute; }
.switch .track {  display: flex;  align-items: center; width: 36px; height: 14px; border-radius: 10px; background-color: rgba(var(--color-info), .5); position: relative; }
.switch input:checked ~ .track { background-color: rgba(var(--color-switch), .5); }
.switch input:checked ~ .track .handle::after { background-color: rgb(var(--color-switch)); }
.switch .handle { position: absolute; left: 0; -webkit-transform: translate(0); transform: translate(0); width: 20px; height: 20px; -webkit-box-shadow: 0 0 9px rgba(var(--color-info), .4); box-shadow: 0 0 9px rgba(var(--color-info), .4); border-radius: 50%; -webkit-transition: .15s cubic-bezier(.4,0,.2,1); transition: .15s cubic-bezier(.4,0,.2,1); background-color: #FFF; }
.switch .handle::before { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background-color: rgba(var(--color-switch), 0); -webkit-transition: .2s ease; transition: .2s ease; }
.switch:hover .handle::before { background-color: rgba(var(--color-switch), .1); }
.switch .handle::after { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50%; background-color: #FFF; }
.switch input:checked ~ .track .handle { -webkit-transform: translate(16px); transform: translate(16px);  }

.switch.sec { --color-switch: var(--color-sec) }
.switch.red { --color-switch: var(--color-red) }
.switch.orange { --color-switch: var(--color-orange) }
.switch.green { --color-switch: var(--color-green) }
.switch.text { --color-switch: var(--color-text) }
.switch.text-light { --color-switch: var(--color-text-light) }
.switch.text-lighter { --color-switch: var(--color-text-lighter) }
.switch.border { --color-switch: var(--color-border); border: none !important; }
.switch.info { --color-switch: var(--color-info) }


/*  Medewerkers */

.bankgegevens { margin-top:56px }
.input-row {  display: flex;  margin-top: 10;   justify-content: space-between;  align-items: center;}
.disabled-input { background-color: rgb(var(--color-info), .2); pointer-events: none; border: 0;}

/* Verlof */
.dates-section {  display: flex;  width: 100%; gap: 48px; margin-top: 60px}

/* TABLE DIV STYLE */
.table { width: 100%; display: table !important; }
.table .tr { display: table-row !important; width: 100%; }
.table .tr:hover { background-color: rgba(var(--color-border), .1); }
.table .th { vertical-align: middle; border: none; height: 30px; display: table-cell !important; background-color: #F2F3F7; font-size: 10px; font-weight: 700; color: rgb(var(--color-text-lighter)); text-transform: uppercase; padding-left: 15px; }
.table .td { display: table-cell !important; height: 36px; vertical-align: middle; border-bottom: 1px solid rgba(var(--color-border), .5); font-size: 12px; padding-left: 15px; }
.table .thead { display: table-header-group !important; }
.table .tbody { display: table-row-group !important; }


/* UI DATEPICKER */
.datepicker:has(p) input { color: transparent; }
.datepicker p.display-normal { position: absolute; width: 100%; height: 100%; padding: 12px; top: 10px; left: 0; z-index: 1; }
.datepicker:has(.display-normal) p { font-size: 14px; font-weight: 400; }
.ui-datepicker { display: none;	background-color: #fff;	-webkit-box-shadow: 0 3px 12px rgb(var(--color-border));	box-shadow: 0 3px 12px rgb(var(--color-border)); border-radius: 6px; padding: 12px; z-index: 1065 !important; position: relative;}
.ui-datepicker table {	border-collapse: collapse;border-spacing: 0; }
.ui-datepicker .ui-datepicker-calendar thead th { padding: 3px 0; text-align: center; font-size: 12px; font-weight: 400; color: rgb(var(--color-info)); }
.ui-datepicker .ui-datepicker-calendar tbody td { width: 36px; text-align: center; padding: 0; }
.ui-datepicker .ui-datepicker-calendar tbody td a {	display: block;	border-radius: 6px;	line-height: 24px; -webkit-transition: 0.2s all; transition: 0.2s all; color: #333; font-size: 12px; text-decoration: none; }
.ui-datepicker .ui-datepicker-calendar tbody td.ui-datepicker-other-month { opacity: 0.5; }
.ui-datepicker .ui-datepicker-calendar tbody td a:hover { background-color: rgba(var(--color-prim), .1); color: rgb(var(--color-prim)); }
.ui-datepicker .ui-datepicker-calendar tbody td a.ui-state-active { background-color: rgb(var(--color-prim)); color: white; }
.ui-datepicker .ui-datepicker-calendar tbody td.ui-state-highlight a { background-color: rgb(var(--color-prim)); color: white; }
.ui-datepicker .ui-datepicker-header a.ui-corner-all { cursor: pointer;	position: absolute;	top: 0;	width: 24px; height: 24px; margin: 12px; border-radius: 6px; -webkit-transition: 0.2s all; transition: 0.2s all; }
.ui-datepicker .ui-datepicker-header a.ui-corner-all:hover { background-color: rgba(var(--color-prim), .1); color: rgb(var(--color-prim)); }
.ui-datepicker .ui-datepicker-header a.ui-corner-all:hover::before { color: rgb(var(--color-prim)); }
.ui-datepicker .ui-datepicker-header a.ui-datepicker-prev { left: 0; }
.ui-datepicker .ui-datepicker-header a.ui-datepicker-prev:before { content: "\f104"; font-family: 'Font Awesome 5 Pro'; left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: rgb(var(--color-text)); }
.ui-datepicker .ui-datepicker-header a.ui-datepicker-next:before { content: "\f105"; font-family: 'Font Awesome 5 Pro'; left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: rgb(var(--color-text)); }
.ui-datepicker .ui-datepicker-header a.ui-datepicker-next { right: 0; }
.ui-datepicker .ui-datepicker-header a>span { display: none; }
.ui-datepicker .ui-datepicker-title { text-align: center; line-height: 1; font-size: 12px; padding-bottom: 6px;}
.ui-datepicker .ui-datepicker-title select { border: 1px solid rgba(var(--color-border)); border-radius: 6px; font-family: 'Montserrat'; margin: 0 3px; -webkit-appearance: none; padding: 6px; outline: none; -webkit-transition: .2s ease; transition: .2s ease; }
.ui-datepicker .ui-datepicker-title select:focus { border: 1px solid rgba(var(--color-prim)); }
.ui-datepicker .ui-datepicker-week-col { color: rgb(var(--color-text-lighter));	font-weight: 500; font-size: 12px; }

.icon-btn .collapseContainer { position: absolute; top: 100%; }


/* MELDINGEN */
.melding { padding: 6px; border-bottom: 1px solid rgba(var(--color-border), .5); }
.melding .melding-inner { padding: 6px;  display: flex; gap: 12px; border-radius: 6px; }
.melding .melding-inner:hover { background-color: rgba(var(--color-prim), .1); }
.melding .melding-inner:hover p { color: rgb(var(--color-prim)); }
.melding .melding-inner i { height: 42px; min-width: 42px; border-radius: 50%; background-color: rgba(var(--color-prim), .2); color: rgb(var(--color-prim)); font-size: 18px;  display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;  align-items: center; }
.melding .melding-inner p { height: auto; display: inline; }
.melding .melding-inner .dot { width: 6px; height: 6px; border-radius: 50%; background-color: rgb(var(--color-prim)); margin-top: 12px; }

/* KEY-VALUE */
.key-value { min-width: 300px; width: 100%;  display: flex; }
.key-value p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 30px; line-height: 30px; font-size: 12px;  align-items: center;  display: flex; }
.key-value p i { font-size: 15px; margin-right: 6px; padding-bottom: 2px; }
.key-value p:nth-child(1) { width: 180px; min-width: 180px; padding-right: 12px;  }
.key-value p:nth-child(3) { padding: 0 12px; }
.key-value p.span { white-space: normal; overflow: auto; height: fit-content; line-height: 1.5; padding-top: 5px; width: 70%; }
.key-value ul { padding: 7px 0 0 12px; width: 70%; }
.key-value ul li span { font-size: 12px; }


/* summernote */
/*
.summernote-min-height .note-editable { min-height: 240px; }
.note-editable { text-align: left!important; }
*/


.note-editor-container .note-editor { width: 100%; border: 1px solid rgb(var(--color-border)) !important; border-radius: 6px; transition: .2s ease; display: flex; align-items: center; background-color: #fff; }
.border-solid.note-editor-container .note-editor { border: none !important; }
.note-editor-container .note-editor.note-airframe .note-editing-area .note-editable { border: none !important; min-width: 100%; }
.note-editable { min-width: 100%; }
.note-editor .note-editing-area { width: 100%; display: flex; align-items: center; }
.note-editor .note-editing-area .note-editable { width: 100%; overflow: hidden !important; padding: 12px !important;  }
.note-editor-container .note-editor p { width: 100%; height: auto; }
.notitieregel .note-editor-container .note-editor.note-airframe { height: 36px; line-height: 1.1; }
.note-editor.note-airframe .note-editing-area .note-editable{border: 1px solid rgb(var(--color-border)) !important; border-radius: 6px; transition: .2s ease; background-color: #fff;}
.note-editor-container .note-editor:has(.note-editable:focus) { border-color: rgb(var(--color-prim)) !important; }
.note-editor-container.disabled .note-editor { border: none !important; pointer-events: none; }
.note-editor-container.disabled.enabled .note-editor { border: 1px solid rgb(var(--color-border)) !important; pointer-events: all; }

.note-air-popover { background-color: #333 !important; color: #fff; border: none !important; }
.note-air-popover .note-btn { background-color: #333; color: #fff; border: none; border-radius: 6px; transition: .2s ease; padding: 5px 10px !important; }
.note-air-popover .note-btn:hover { background-color: rgba(var(--color-prim), .1); color: rgb(var(--color-prim)); border: none; }

/* TAGIFY */
.tagify { border-radius: 6px; min-height: 36px; width: 100%; padding-right: 42px !important; position: relative !important; }
.tagify__input { min-width: 100% !important; padding: 0 !important; margin: 0 !important; max-height: 0 !important; }
.tagify.tagify--empty .tagify__input { max-height: 36px !important; padding: var(--tag-pad) !important; margin: 5px !important; }
.tagify__dropdown { border: 1px solid rgb(var(--color--border), .5) !important; border-radius: 6px; box-shadow: 0 3px 12px rgb(var(--color-border)) !important; transform: translateY(1px) !important; }
.tagify__dropdown__wrapper { border: none !important; padding: 6px; }
.tagify__dropdown__item { border-radius: 6px !important; }
.tagify__dropdown__item:hover { background-color: rgb(var(--color-prim), .1) !important; color: rgb(var(--color-prim)) !important; border-radius: 6px !important; }