/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');
:root {
    --prim-color: #002664;
    --prim-color-rgb: 0,38,100;


    --color-prim: 0,38,100;
    --color-red: 234, 84, 85;
    --color-orange: 255, 159, 67;
    --color-green: 40, 199, 111;
    --color-text: 51, 51, 51;
    --color-text-light: 87, 86, 95;
    --color-text-lighter: 126, 122, 138;
    --color-info: 135, 136, 138;
    --color-border: 219, 219, 219;
    --color-cu: 255,159,67;

    --color-switch: var(--color-prim);
    --color-tag: var(--color-prim);
    --color-initials: var(--color-prim);
    --opacity-initials: 0.1;

}


/* FbuttonSTYLES */
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }
body { background: #FAFAFA;font-size:12px; }

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

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

/* TEXT */
strong{font-weight: 600;}
p.semi_small { font-size: 10px!important; }
p.nine_small { font-size: 9px; }
p.small_small { font-size: 8px; }
p { margin-bottom: 0px; }
p.link:hover { color: rgb(var(--color-prim)); cursor: pointer; }
p.small { font-size: 12px; font-weight: 500; }
p.bold { font-weight: 700; }
p.semi-bold { font-weight: 500; color: rgb(var(--color-text-light)); }
p.red { color: rgb(var(--color-red)); }
b { font-weight: 700; }

.pointer{cursor: pointer;}

h1 { margin-bottom: 0; font-size: 24px; font-weight: 600; color: rgb(var(--color-text-light)); }
h2 { margin-bottom: 0; font-size: 22px; font-weight: 600; color: rgb(var(--color-text-light)); }
h3 { margin-bottom: 0; font-size: 20px; font-weight: 600; color: rgb(var(--color-text-lighter)); }
h4 { margin-bottom: 0; font-size: 18px; font-weight: 500; color: rgb(var(--color-info)); } 
h5 { margin-bottom: 0; font-size: 16px; font-weight: 500; color: rgb(var(--color-info)); } 
h6 { margin-bottom: 0; font-size: 14px; font-weight: 500; color: rgb(var(--color-text-light)); }

.font-size-8{font-size: 8px !important;}
.font-size-9{font-size: 9px !important;}
.font-size-10{font-size: 10px !important;}
.font-size-11{font-size: 11px !important;}
.font-size-12{font-size: 12px !important;}

/* PADDING */
.p-6 { padding: 6px; }
.p-0-12 { padding: 0px 12px; }
.p-2-12{padding: 2px 12px;}
.p-0-24-24-24 { padding: 0px 24px 24px 24px; }
.p-6-12 { padding: 6px 12px; }
.p-12 { padding: 12px; }
.p-24 { padding: 24px; }
.p-15 { padding: 15px; }
.p-10 { padding: 10px; }
.pr-15 { padding-right: 15px; }
.pr-20 { padding-right: 15px; }
.pl-12 { padding-left: 12px; }
.pl-15 { padding-left: 15px; }
.p-50 { padding: 50px; }
.pt-12 { padding-top: 12px; }
.pt-15 { padding-top: 15px; }
.pt-24 { padding-top: 24px !important; }
.pb-20 { padding-bottom: 20px; }
.pb-24 { padding-bottom: 24px; }
.pb-120 { padding-bottom: 120px !important; }
.plr-12 { padding: 0 12px; }
.p0-12 { padding-right: 12px!important; padding-left: 0!important; }
.pr-24{padding-right: 24px !important;}

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

/* MARGIN */
.m-12 { margin: 12px; }
.ml-24 { margin-left: 24px; }
.m-24 { margin: 24px; }
.mt-6 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mb-6 { margin-bottom: 6px !important; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-20 { margin-bottom: 20px; }
.mt-180 { margin-top: 180px; }
.mt-700 { margin-top: 700px; }
.mr-6 { margin-right: 6px; }
.mr-12 { margin-right: 12px; }
.mr-35 { margin-right: 35px; }

.mt-min-1{margin-top:-1px;}
.mr-20_min { margin-left: -20px!important; }


/* WIDTH / HEIGHT */
.w-8 { width: 8%!important; }
.w-9 { width: 9% !important; }
.w-10 { width: 10% !important; }
.w-16 { width: 16% !important; }
.w-20 { width: 20% !important; }
.w-25 { width: 25%!important; }
.w-30 { width: 30% !important; }
.w-33 { width: 33% !important; }
.w-40 { width: 40% !important; }
.w-45 { width: 45% !important; }
.w-48 { width: 48% !important; }
.w-47 { width: 47%!important; }
.w-60 { width: 60% !important; }
.w-66 { width: 66% !important; }
.w-70 { width: 70% !important; }
.w-80 { width: 80% !important; }
.w-90 { width: 90% !important; }

.w-50px { width: 50px !important; }
.w-75px { width: 75px !important; }
.w-80px { width: 80px !important; }
.w-100px { width: 100px !important; }
.w-120px { width: 120px !important; }
.w-150px {width: 150px !important;}
.w-200px { width: 200px !important; }
.w-300px { width: 300px !important; min-width: 300px; }
.w-400px { width: 400px !important; }
.w-410px { width: 410px !important; }
.w-540px {width: 540px !important; }
.w-600px { width: 600px !important; }
.w-880px {width: 880px !important; }
.w-1100px {width: 1100px !important; }
.w-1310px {width: 1310px !important; }
.w-2551px { width: 2551px !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-33 { width: calc(33.33% - 8px) !important; } 
.g-12 > .w-25 { width: calc(25% - 9px) !important; } 
.g-12 > .w-12-5 { width: calc(12.5% - 10.5px) !important; } 
.g-12 > .w-62-5 { width: calc(62.5% - 5px) !important; } 
.g-12 > .w-37-5 { width: calc(37.5% - 7.5px) !important; } 

.sidebar-form > .w-50, .tab-formfields > .w-50, .box .w-50 { width: calc(50% - 6px) !important; }
.sidebar-form > .w-40, .tab-formfields > .w-40, .box .w-40 { width: calc(40% - 8px) !important; }
.sidebar-form > .w-20, .tab-formfields > .w-20, .box .w-20 { width: calc(20% - 8px) !important; }
.sidebar-form > .w-33, .tab-formfields > .w-33, .box .w-33 { width: calc(33.33% - 8px) !important; }
.sidebar-form > .w-66, .tab-formfields > .w-66, .box .w-66 { width: calc(66.66% - 4px) !important; }

.h-100 { height: 100%; }
.h-100-31px{height: calc(100% - 31px);}

.h-12px { height: 12px!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-200px { height: 200px!important; }
.h-350px { height: 350px!important; }
.h-2480px { height: 2480px!important; }

.min-height-25px{ min-height: 25px!important; }
.min-height-60px{ min-height: 60px!important; }
.min-height-650px{ min-height: 650px!important; }

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

.text-left{width:30%;height: 30px;}
.text-middle{width:0%;height: 30px;}
.text-right{max-width:70%;height: 30px;padding-left: 30px;}

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

.ellipsis {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}


/* FONT-SIZES */
.fs-6 { font-size: 6px !important; }
.fs-8 { font-size: 8px !important; }
.fs-9 { font-size: 9px !important; }
.fs-10 { font-size: 10px !important; }
.fs-12 { font-size: 12px !important; }
.fs-14 { font-size: 14px !important; }
.fs-16 { font-size: 16px !important; }
.fs-20 { font-size: 20px !important; }

.italic { font-style: italic; }
.no-border{border:none !important;}

pre {white-space: pre-wrap;margin-bottom: 0;font-size: inherit;font-family: var(--bs-body-font-family);}

/* COLORS */
.bg-white { background-color: #FFFFFF !important; }
.bg-header { background-color: #F2F3F7; color: rgb(var(--color-text-lighter)); font-weight: 600; }

/* HEADERS */
hr.solid { border-top: 2px solid rgba(var(--color-border), .75);}

/* BUTTONS */
.btn { font-size: 13px; border-radius: 6px; -webkit-transition: .2s ease; transition: .2s ease; outline: none; line-height: 1.8; padding: 0px 22px; height: 36px; font-weight: 500; -webkit-box-shadow: 0 2px 6px rgba(var(--color-text), .125),0 0 transparent,0 0 transparent; box-shadow: 0 2px 6px rgba(var(--color-text), .125),0 0 transparent,0 0 transparent }
a.btn{line-height: 36px;}
a.btn.btn-small{line-height: 25px;}

.btn i { margin-right: 6px; }
.btn:disabled{background-color: rgba(var(--color-border), .5);}

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


.outline-btn { border: 1px solid rgb(var(--color-prim)); color: rgb(var(--color-prim)); background-color: transparent; }
.outline-btn:hover { background-color: rgba(var(--color-prim), 1); color: #ffffff; }
.outline-btn.red { border: 1px solid rgb(var(--color-red)); color: rgb(var(--color-red)); background-color: transparent; }
.outline-btn.red:hover { background-color: rgba(var(--color-red), 0.1); color: rgb(var(--color-red)); }
.outline-btn.orange { border: 1px solid rgb(var(--color-orange)); color: rgb(var(--color-orange)); background-color: transparent; }
.outline-btn.orange:hover { background-color: rgba(var(--color-orange), 0.1); color: rgb(var(--color-orange)); }
.outline-btn.green { border: 1px solid rgb(var(--color-green)); color: rgb(var(--color-green)); background-color: transparent; }
.outline-btn.green:hover { background-color: rgba(var(--color-green), 0.1); color: rgb(var(--color-green)); }
.outline-btn.text { border: 1px solid rgb(var(--color-text)); color: rgb(var(--color-text)); background-color: transparent; }
.outline-btn.text:hover { background-color: rgba(var(--color-text), 0.1); color: rgb(var(--color-text)); }
.outline-btn.text-light { border: 1px solid rgb(var(--color-text-light)); color: rgb(var(--color-text-light)); background-color: transparent; }
.outline-btn.text-light:hover { background-color: rgba(var(--color-text-light), 0.1); color: rgb(var(--color-text-light)); }
.outline-btn.text-lighter { border: 1px solid rgb(var(--color-text-lighter)); color: rgb(var(--color-text-lighter)); background-color: transparent; }
.outline-btn.text-lighter:hover { background-color: rgba(var(--color-text-lighter), 0.1); color: rgb(var(--color-text-lighter)); }
.outline-btn.info { border: 1px solid rgb(var(--color-info)); color: rgb(var(--color-info)); background-color: transparent; }
.outline-btn.info:hover { background-color: rgba(var(--color-info), 0.1); color: rgb(var(--color-info)); }
.outline-btn.border { border: 1px solid rgb(var(--color-border)); color: rgb(var(--color-border)); background-color: transparent; }
.outline-btn.border:hover { background-color: rgba(var(--color-border), 0.1); color: rgb(var(--color-border)); }



.btn-small { font-size: 12px; height: 25px; font-weight: 400; }

.icon-btn { display:-webkit-box; display:flex; width: 30px; height: 30px; border-radius: 5px; border:0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: .2s ease; transition: .2s ease; position: relative; text-decoration: none; }
.icon-btn i { font-size: 18px; color: rgb(var(--color-text-light)); -webkit-transition: .2s ease; transition: .2s ease; }
.icon-btn:hover i {color: rgb(var(--color-prim)); }
.icon-btn:hover p {color: rgb(var(--color-prim)); }
.icon-btn:hover { background-color: rgba(var(--color-prim), 0.1); cursor: pointer;}
.icon-btn.small { width: 24px; height: 24px; line-height: 24px; text-align: center; }
.icon-btn.small i { font-size: 14px; }
.icon-btn.large { width: 38px; height: 38px; }
.icon-btn.large i { font-size: 24px; }
.icon-btn.disabled { opacity: .3; pointer-events: none; }
.badge { background-color: rgb(var(--color-red)); color: #FFF; position: absolute; right: 0; top: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; display: -webkit-box; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1; font-size: 10px; font-weight: 800; pointer-events: none; }

.info-icon{position: absolute;margin-top: -15px;margin-left: -5px;}

.fw-500 { font-weight: 500; }
.fw-700 { font-weight: 700; }

.color-prim { color: rgb(var(--color-prim)) !important; }
.color-green { color: rgb(var(--color-green)) !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-text-light{ color: rgb(var(--color-text-light)) !important; }
.color-text-lighter{ color: rgb(var(--color-text-lighter)) !important; }
.color-info{ color: rgb(var(--color-info)) !important; }
.color-border{ color: rgb(var(--color-border)) !important; }
.color-white{ color: #fff !important; }

/* 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: 5px 0px 5px 10px; font-size: 13px; color: rgb(var(--color-text)); position: relative; z-index: 1; resize: none;}
input.small { padding: 3px 0px 3px 12px; font-size: 12px; height: 30px !important; }
input.small ~ .icon { height: 30px; bottom: 0; }
input.small ~ .icon i { font-size: 12px; }

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-light), .5); }
input::-webkit-input-placeholder, input::-moz-placeholder, input:-ms-input-placeholder, input::-ms-input-placeholder, input::placeholder { color: rgba(var(--color-text-light), .5); }
input: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)); 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 { border-color: rgb(var(--color-red)); }
input:not(.btn):-moz-read-only{background-color: rgba(239, 239, 239, 0.3);}
input:not(.btn):read-only{background-color: rgba(239, 239, 239, 0.3);}
.label.dropdown input:not(.btn):-moz-read-only{background-color: #fff;}
.label.dropdown input:not(.btn):read-only{background-color: #fff;}

.input-container { position: relative; }

label, .label { position: relative; }
label.disabled, .label.disables { opacity: 0.5; pointer-events: none; }
label p, .label p { position: relative; font-size: 12px; /*eight: 20px;*/ display: -webkit-box; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
label input, .label input { height: 36px; width: 100%; }
label .icon, .label .icon { position: absolute; height: 36px; right: 0; bottom: 0; display: -webkit-box; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 1; -webkit-animation: disable-pointer-events 2000ms forwards; animation: disable-pointer-events 2000ms forwards; }
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)); }
label .icon i, .label .icon i { margin-right: 15px; font-size: 15px; color: rgb(var(--color-info)); pointer-events: none; -webkit-transition: .2s ease; transition: .2s ease; }

@-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 .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 */
.checkbox { font-size: 12px; padding:5px 0; color: rgb(var(--color-text)); position: relative; cursor: pointer; display: -webkit-box; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.checkbox input { opacity: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 0; height: 0; margin: 0; padding: 0; border: 0; }
.checkbox i { min-width: 18px; min-height: 18px; background-color: #FFF; border: 1px solid rgb(var(--color-border)); border-radius: 3px; display: -webkit-box; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: 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-prim)); border-color: rgb(var(--color-prim)); color: #FFF; }
.checkbox i.checked { background-color: rgb(var(--color-prim)); border-color: rgb(var(--color-prim)); 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-prim), 0.2); }

/* RADIO BUTTONS */
.radio-buttons { display: -webkit-box; display: flex; }
.radio-buttons label { display: -webkit-box; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; }
.radio-buttons label input { opacity: 0; position: absolute; cursor: pointer; }
.radio-buttons label span { padding: 0 0 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.border-solid span::after { left: 12px;}
.radio-buttons label.border-solid { padding-left: 12px; height: 36px;}
.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 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)); }
.radio-buttons.bordered label { padding: 6px 12px; border: 1px solid rgb(var(--color-border)); border-radius: 6px; }
.radio-buttons.bordered label span::after {left: 12px; }

.radio-select { border: 1px solid rgb(var(--color-prim)); border-radius: 6px; }
.radio-select.disabled { opacity: 0.2; pointer-events: none; }
.radio-select label { padding: 7px 12px; height: 34px; border-right: 1px solid rgb(var(--color-prim)); cursor: pointer; position: relative; width: 100px; display: flex; align-items: center; justify-content: center; transition: .2s ease; }
.radio-select label:last-child { border: none !important; }
.radio-select label p { color: rgb(var(--color-prim)); font-size: 12px; text-align: center;}
.radio-select label span { color: rgb(var(--color-prim)); font-size: 12px; text-align: center;}
.radio-select input { visibility: hidden; position: absolute; }
.radio-select label:hover { background-color: rgba(var(--color-prim), .1); }
.radio-select label:has(input:checked) { background-color: rgba(var(--color-prim), .2); }

.bt-1 { border-top: 1px solid rgba(var(--color-border), .5) }

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


/* DROPDOWN SELECT */
.dropdown { position: relative; }
.dropdown.readonly > input { caret-color: transparent; cursor: pointer; }
.dropdown:focus-within { z-index: 21; }
/* .dropdown:focus-within .dropdown-container { grid-template-rows: 1fr; border: 1px solid rgb(var(--color-border)); } */
.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: 20; border-color: transparent; }
.dropdown .dropdown-container .container-inner { overflow: hidden; }
.dropdown .dropdown-container .container-inner-inner { padding: 6px; max-height: 250px; overflow-y: scroll; gap: 3px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.dropdown .dropdown-container .item { padding: 6px 12px; width: 100%; border-radius: 6px; cursor: pointer; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 6px; font-size: 13px; }
.dropdown .dropdown-container .item:hover, .dropdown .dropdown-container .item.selected { background-color: rgba(var(--color-prim), 0.1); color: rgba(var(--color-prim), 1); }
.dropdown .dropdown-container .item.active { background-color: rgb(var(--color-prim)); color: #FFF; }
.dropdown .dropdown-container .item h5 { color: rgb(var(--color-text)) }



/* DROPDOWN MENU */
.dropdownmenu-btn { position: relative; width: 38px; height: 38px; -webkit-box-align: center; -ms-flex-align: center; 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)); }
.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 { position: absolute !important; top: 100%; right: 0; overflow: hidden; display: -webkit-box; 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; }
.dropdownmenu .menu-item { height: 40px; width: 100%; padding: 0px 12px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: transparent; -webkit-transition: .2s ease; transition: .2s ease; border-radius: 6px; cursor: pointer; }
.dropdownmenu .menu-item i { font-size: 18px; margin-right: 12px; }
.dropdownmenu .menu-item p { font-size: 13px; 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)); }


/* ERROR MESSAGE */
.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));}
input.is-invalid {border-color: rgb(var(--color-red));}

/* TOOLTIP */
.tooltip.show { opacity: 1; }
.tooltip .tooltip-inner { padding: 6px 12px; background-color: rgb(var(--color-text)); border-radius: 6px; font-size: 11px; }
.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: 2px; height: 2px; }
::-webkit-scrollbar-track { background: transparent; border: none; overflow: auto; }
::-webkit-scrollbar-thumb { background: rgb(var(--color-text-light)); border-radius: 2px; overflow: auto; -webkit-transition: height 0.2s ease-in-out; transition: height 0.2s ease-in-out; }



/* PAGE STYLING */
.main { position: fixed; 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; }
.main.customer{border-left:0 solid transparent;}

.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; -webkit-animation: fadeInAnimation ease 300ms; animation: fadeInAnimation ease 300ms; }
.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); }

.bb-1 { border-bottom: 1px solid rgba(var(--color-border), .5); }
.box.uld{width:50%;display: -webkit-box;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;position: relative;}
.box.uld.w-25{width: calc(25% - 15px) !important;}
.box.uld.w-50{width: calc(50% - 25px) !important;}
.box.uld h3{font-size: 13px;margin-bottom: 5px;}
.box.uld .height{width:50%;margin:8px 0;}
.box.uld .weight{width:50%;margin:8px 0;}
.box.uld .height .tag{padding: 0 8px;}
.box.uld .weight .tag{padding: 0 8px;}
.box .tag-container{min-height: 23px;}

.box.grey{background-color: rgba(var(--color-text), .05);box-shadow: none;border:1px solid rgba(var(--color-text), .10)}


/* SIDEBAR */
.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; }

.sidebar-image-container { position: relative; z-index: 1; background-image: linear-gradient(#FFF, #FFF, transparent); -webkit-transition: .2s ease; transition: .2s ease; padding: 12px; height: 100px; margin-bottom: -100px; display: -webkit-box !important; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; 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-container { width: 100%; height: 100vh; overflow-y: scroll; overflow-x: hidden; padding-top: 100px; padding-bottom: 24px; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; 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; }

.sidebar .divider { opacity: 0; min-height: 0; height: 0; -webkit-transition: .2s ease; transition: .2s ease; }
.sidebar.collapsed .divider { opacity: 1; height: 40px; min-height: 40px; padding-top: 16px; }
.nav-heading { height: 40px; width: 100%; padding: 20px 15px 10px; font-size: 12px; opacity: .5; margin: 0; font-weight: 500; 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: 40px; max-height: 40px; margin-top: 5px; border-radius: 5px; background-color: transparent; padding: 0 12px; display: -webkit-box; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: rgb(var(--color-text-light)); 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: 18px; display: -webkit-box; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: rgb(var(--color-info)); }
.nav-item p { padding-left: 10px; font-size: 15px; color: rgb(var(--color-info)); }
.nav-item:hover, .nav-main { background-color: #FAFAFA; }
.nav-item:hover{ padding-left: 22px; }
.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: -webkit-box !important; display: flex !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: 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); }

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


/* HEADER */
.header { position: fixed; left: 284px; top: 12px; right: 24px; height: 60px; max-height: 60px; min-height: 60px; display: -webkit-box; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-transition: .2s ease; transition: .2s ease; }
.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.customer{left:24px;}

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

.header-left { width: 400px; height: 100%; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; 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; }

.searchbar{max-width:300px;width:100%;}

.profile, .clientswitch { position: relative; }
.profile .menu-toggle, .clientswitch .menu-toggle { position: absolute; right: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.profile .menu-toggle:focus ~ .dropdownmenu, .clientswitch .menu-toggle:focus ~ .dropdownmenu { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0s; transition-delay: 0s; }
.profile .dropdownmenu, .clientswitch .dropdownmenu { top: 48px; }

/* users */

.userdetail { display: -webkit-box; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-left: 12px; gap: 12px; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} 
.teamleden { display: -webkit-box; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; border-bottom: 1px solid rgba(var(--color-border), .5) ; }
.teamleden-details { display: -webkit-box; display: flex; -webkit-box-align: center; -ms-flex-align: center; 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: -webkit-box; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-radius: 50px; gap: 6px; }
.teamlid .remove { height: 24px; width: 24px; font-size: 10px; display: -webkit-box; display: flex; -webkit-box-align: center; -ms-flex-align: center; 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; }

input.invisible { position: absolute; width: 100%; height: 100%; top: 0; left: 0; visibility: visible !important; opacity: 0; cursor: pointer; }

/* DYNAMIC OFFCANVAS / DETAILS SIDEBAR */
.inputs-product { width: 450px; }

.inputs-contacten { width: 880px; }

.offcanvas#viewRequest .collapseContainer:not(.hide){padding-bottom: 120px;}
.offcanvas#viewRequest .collapseContainer:not(.hide) .collapseInner{height: 100%;}
.offcanvas#viewRequest .collapseContainer:not(.hide) .collapseInner .details-container{height: 100%;}
.offcanvas#viewCustomerRequest .collapseContainer:not(.hide){padding-bottom: 120px;}

.offcanvas-header { padding: 0 24px; height: 48px; background-color: #F2F3F7; }

.offcanvas-body {padding: 0px;color:rgb(var(--color-text));}
.details-container { position:relative; padding: 24px; border-bottom: 1px solid #EBE9F1; }
.details-container h6{font-size: 16px;font-weight:600;color:rgb(var(--color-prim));margin-bottom: 10px;}
.details-container.no-border ~ .details-container{padding: 0 24px 24px 24px;}
/*form { padding: 24px; display: -webkit-box;  display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 12px; }
form section { padding: 24px; display: flex; flex-wrap: wrap; gap: 12px; transition: .2s ease; width: 100%; height: fit-content; }*/


.sidebar-tabs { position: relative; overflow: hidden; }
.sidebar-form{ display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 24px 24px 120px 24px; gap: 12px;overflow: auto;min-height:650px;max-height: calc(100% - 85px);}
/*
.sidebar-tabs form { position: absolute; left: 0; top: 48px; width: 100%; max-height: calc(100vh - 180px); overflow-y: scroll; overflow: visible; }
.sidebar-tabs section { position: absolute; left: 0; top: 48px; width: 100%; max-height: calc(100vh - 96px); padding: 24px 24px 96px 24px; overflow-y: scroll; display: flex; flex-wrap: wrap; gap: 12px; transition: .2s ease; }
*/



/* OVERZICHT PAGINA */
.page-header { height: 80px; padding: 24px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; z-index: 1; }
.page-header > div { gap: 24px; }
.page-header .title { font-size: 24px; line-height: 1; margin-bottom: 0px; font-weight: 600; }
/* TABLE */
.table { height: 0px;margin-bottom: 0; }
.table>thead{vertical-align:middle;}
.table>tbody{vertical-align: middle;}

.table-container { min-height: 510px; border-bottom: 1px solid rgba(var(--color-border), .5); }

.table thead { height: 40px; max-height: 40px; background-color: #F2F3F7; font-size: 11px; color: rgb(var(--color-text-lighter)); font-weight: 700; text-transform: uppercase; }

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: 11px !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: 11px !important; font-family: 'Font Awesome 5 Pro'; content: "\f107" !important; bottom: 0 !important; font-size: 20px; font-weight: 200; }

table.table thead th{color:rgb(var(--color-text-lighter));}
.table>:not(caption)>*>*{padding: 0;background-color: transparent;box-shadow: none;}

.table-container th { padding-left: 20px; vertical-align: middle; border: none; white-space: nowrap; text-overflow: ellipsis;padding-right: 20px;  }
.table-container th.sorting{padding-right: 28px !important;}
.table-container .table tbody { border-top: none !important; }
.table-container .table tbody tr { height: 48px; max-height: 48px; vertical-align: middle;}
.table-container .table tbody tr:hover { background-color: #FAFAFA; }



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

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

/* SMALL TABLE */
.small-table-header { height: 36px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.acties { -webkit-box-align: center; -ms-flex-align: center; 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 thead { height: 30px; border: none; color:rgb(var(--color-info)); }
.small-table thead th { font-size: 12px; font-weight:400; text-transform: none;border:none; }
.small-table td, .small-table th, .small-table tr { white-space: nowrap; font-size: 12px; padding-left: 15px; height: 35px; }
.small-table tbody tr { height: 35px; }

.small-table input { height: 24px; border: 0px none; color: rgb(var(--color-text-lighter)); font-size: 12px; }
.small-table input:hover, .small-table input:focus { border: 0px none; color: rgb(var(--color-text-lighter)); -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; }


/* Loading animation */
.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); }  
}


/* PAGINATION */
/*
.pagebar { display:-webkit-box; display:flex; height: 60px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 24px; } 
.pagebar p { font-size: 12px; color:rgb(var(--color-text),0.5); }

.pagination { margin: 0; }
.page-item{ position: relative; }
.page-item.number::before { content: ""; background-color: #F2F3F7; position: absolute; left: 0px; top: 0px; height: 100%; width: 100%;} 
.page-item.number .page-link { margin: 0px !important; }
.page-link { position: relative; background-color: #F2F3F7; margin: 0px 3px !important; display: -webkit-box; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
 height: 32px; width: 32px; border: 0; border-radius: 50% !important; font-size: 13px; font-weight: 600; -webkit-box-shadow: none !important; box-shadow: none !important; color: rgb(var(--color-info)); } 
.page-link:hover{ background-color: rgba(var(--color-prim), .1); }
.page-link span { display: -webkit-box; display: flex; }
.page-link i { font-size: 21px; }
.page-item:nth-child(3)::before { border-radius: 50% 0 0 50%; } 
.page-item:nth-last-child(3)::before { border-top-right-radius:50%;border-bottom-right-radius:50%; } 
.page-item.disabled .page-link { opacity: .5; }
*/

/* 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; }


/* POPUP / MODAL */
/*
.modal { display: -webkit-box !important; display: flex !important; opacity: 0; pointer-events: none; -webkit-transition: .2s ease; transition: .2s ease; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: auto; }
.modal-dialog{max-width: none;}
.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 { opacity: 0; pointer-events: none; transition: .2s ease; justify-content: center; align-items: center; z-index:1100; }
.modal.show { display: flex !important; opacity: 1; pointer-events: all; }
.modal-dialog{max-width: none;max-height: calc(100% - 20px);}
.modal::after { content: ""; position: fixed; left: 0; top: 0; background-color: #2F2B3D80; 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-light)); 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: -webkit-box; 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; -webkit-box-align: center; -ms-flex-align: 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 rgba(var(--color-border), .5); display: flex; justify-content: center; align-items: center; gap: 12px; }

.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.orange i { color: rgb(var(--color-orange)); }

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


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

/* Tabs */

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


.tabs li { list-style: none; height: 36px; color: rgb(var(--color-text-light)); padding: 0 20px; margin: 0px 0; display: -webkit-box; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 12px; white-space: nowrap; border-radius: 6px; -webkit-transition: .2s ease; transition: .2s ease; background-color: transparent; }
.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.prim li.active { color: rgb(var(--color-prim)) }
.tabs.prim .tabline { 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)); }

.tabs.large li { font-size: 13px; }

.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; }
#viewRequestOpenChecks .tabs i{font-size: 12px;margin-right: 10px; }
.tabs li.active p { color: rgb(var(--color-prim)); }
li::marker { content: none; }


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

.tabs.vertical{-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;width:200px;padding: 0;place-self: flex-start;border-bottom:0;}
.tabs.vertical li{height: 40px;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;border-left:2px solid transparent;border-radius: 0;border-bottom: 1px solid rgba(var(--color-border), .5);}
.tabs.vertical li i{font-size: 12px;}
.tabs.vertical li.active{border-left:2px solid rgb(var(--color-prim));}
.tabs.vertical ~ .tab-content{width: calc(100% - 250px);}
.tabs.vertical ~ .tab-content .tab{position: relative;left:auto;top:auto;}

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

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

.tab-item, .tab-item i, .tab-item p { -webkit-transition: .2s ease; transition: .2s ease; }
.tab-item i { width: 34px; min-width: 34px; height: 20px; font-size: 18px; display: -webkit-box; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.tab-item p { padding-left: 10px; font-size: 13px; }
.tab-item:hover { background-color: #FAFAFA; }
.tab-item.active { background-color: rgb(var(--color-prim)); }
.tab-item.active i, .tab-item.active p { color: #FFFFFF; }
.tab-item.active:hover{ background-color: rgb(var(--color-prim)); }

/*.offcanvas form { padding: 0; gap: 0; }*/
.offcanvas .tab-content { height: calc( 100vh - 95px ); }
.offcanvas .tab-content .tab .tab-content { height: calc( 100vh - 144px ); }
.offcanvas .tab-content .tab > .tab-content > .tab { overflow-y: hidden;  }
.offcanvas form .tab-content .tab { display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-bottom: 109px; gap: 12px; background-color: #fff; align-content: flex-start; }
.tab-formfields{display: -webkit-box;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-bottom: 109px; gap: 12px;}
.tab-formfields#formFlight{padding-bottom: 150px;}
.tab-content { position: relative; overflow: hidden; width: 100%; }
.tab-content .tab { position: absolute; left: 0; top: 0; width: 100%;height: 100%;-webkit-transition: .2s ease;transition: .2s ease; padding: 24px 24px 109px 24px; max-height: 100%; overflow-y: scroll; }

.tab-content .tab .inner-tab{max-height: calc(100vh - 146px);}

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

/* TAB PAGE */
.tab-page { display: -webkit-box;  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.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: -webkit-box;  display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;margin-top: 10px;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between; background-color: #fff; }
.tab-page .tab-container { display: -webkit-box;  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: -webkit-box; 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: -webkit-box;   display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding-bottom: 20px;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between; gap: 20px; }
.tab-page .tab-container .tab-container-title { margin-bottom: 20px;}
.tab-page .input-row { display: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; margin-top: 10px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.tab-page .input-group { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 10px;}

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


/* TOAST */
.toast { border-radius: 6px; margin: 6px 0; display: -webkit-box;  display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 60px; border-left: 4px solid rgb(var(--color-toast)); overflow: hidden; }
.toast-body { padding: 0; display: -webkit-box;  display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.toast-body i { padding: 12px 0 12px 12px; font-size: 30px; color: rgb(var(--color-toast)); }
.toast-body div { padding: 0 12px; display: -webkit-box;  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; }
.toast-body h5 { 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; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: transparent; }
.toast .btn-close { width: 60px; max-height: 60px; min-height: 60px; display: -webkit-box;  display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-left: 1px solid rgba(var(--color-border), .5); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; background: transparent; opacity: 1; -webkit-transition: .1s ease; transition: .1s ease; }
.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-light)); -webkit-transition: .1s ease; transition: .1s ease; }
.toast .action { height: 60px; display: -webkit-box;  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; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 12px; border-left: 1px solid rgba(var(--color-border), .5); -webkit-transition: .1s ease; 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-light)); max-width: 60px; text-align: center; line-height: 1.2; }

.toast:has(.solid) { background: -webkit-gradient(linear, left top, left bottom, from(rgba(var(--color-toast), .1)), to(rgba(var(--color-toast), .1))),
                                 -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)); 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 */
.switch { position: relative; display: -webkit-box;  display: flex; height: 36px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: space-between;}
.switch p { width: 50%; }
.switch input { opacity: 0; position: absolute; }
.switch .track { display: -webkit-box;  display: flex; -webkit-box-align: center; -ms-flex-align: center; 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) }


/* LOGIN PAGE */
.login { width: 100vw; height: 100vh; display: -webkit-box;  display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: 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: -webkit-box;  display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: 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: -webkit-box !important; 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: 72px;*/ padding-bottom: 24px; }
.login .stap1 .text-input { width: 100%; }
.login .stap1 .center { text-align: center; font-size: 13px; }
.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 */
.opac-5 { opacity: .5; }

.tag { padding: 4px 12px; 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; font-weight: 600; display: -webkit-box;  display: flex; -webkit-box-align: center; -ms-flex-align: center; 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.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.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); }

.bar{width:350px; padding: 6px; background-color: rgba(var(--color-tag), 0.1); color: rgba(var(--color-tag), 1); font-size: 10px; font-weight: 600; display: -webkit-box;  display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 6px; }
.bar .segment{display: inline-block;text-align: center;border-right: 1px solid rgba(var(--color-tag), 0.2);}
.bar .segment .in_fee_tomorrow{color: rgba(var(--color-orange), 1);}
.bar .segment .in_fee{color: rgba(var(--color-red), 1);}
.bar .segment:last-child{border-right:none;}
.bar .segment.items-2{width: 50%;}
.bar .segment.items-3{width: 33%;}
.bar .segment.items-4{width: 25%;}
.bar .segment.items-5{width: 20%;}
.bar .segment.items-6{width: 33%;}

.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: -webkit-box;  display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: 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: 8px; }
.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.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.button:hover { opacity: 1; cursor: pointer; }

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

.actie-buttons { display: -webkit-box;  display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
.actie-buttons-small { display: -webkit-box;  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; } 

/* .initials { width: 38px; height: 38px; background-color: rgba(var(--color-orange), .1); border-radius: 50%; color: rgb(var(--color-orange)); font-weight: 600; text-transform: uppercase; font-size: 14px; display: -webkit-box;  display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1; cursor: pointer; } */

/* .initials-large { width: 80px; height: 80px; background-color: rgba(var(--color-orange), .1); margin-right: 20px; border-radius: 10px; color: rgb(var(--color-orange)); font-weight: 600; text-transform: uppercase; font-size: 36px; display: -webkit-box;  display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1; } */

#uld-gallery{width:100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding:24px; overflow-y: auto;}
#uld-gallery .img-gallery{position: relative;}
#uld-gallery .img-gallery .icon-btn{position: absolute;cursor: pointer;right:5px;bottom:5px;opacity: 0;z-index: 1;-webkit-transition: opacity 200ms linear;transition: opacity 200ms linear; background-color: transparent;}
#uld-gallery .img-gallery .icon-btn.extern{top:5px;}
#uld-gallery .img-gallery:hover .icon-btn {opacity: 1; }
#uld-gallery .img-gallery .icon-btn:hover {opacity: 1; background-color: rgba(var(--color-red), .1);}
#uld-gallery .img-gallery .icon-btn:hover i { color: rgba(var(--color-red), 1);}
#uld-gallery .img-gallery .icon-btn.extern:hover {opacity: 1; background-color: rgba(var(--color-prim), .1);}
#uld-gallery .img-gallery .icon-btn.extern:hover i { color: rgba(var(--color-prim), 1);}
#uld-gallery .img-gallery img{width:412px;height:412px;-o-object-fit: contain;object-fit: contain;}




.checklist .remarks{min-height: 38px;}
.checklist .w-16{width: calc(16% - 2px) !important;}
.checklist .text-left{width:45%;margin-right: 15px;}
.checklist .text-right{padding-left: 15px;}

/* SHOWCASE */
.showcase { padding: 24px; display: -webkit-box;  display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 24px; }
.showcase .box { padding: 24px; }
.showcase .box.w-50 { width: calc(50% - 12px) !important; }
.showcase .dropdown .box { padding: 0; }
.color-container { border: 0px none; border-radius: 6px; -ms-flex-line-pack: center; align-content: center; font-size: 20px; padding: 0 5px 0 5px;}

/* REPORT */
#report .a4 {page-break-after: always; }
#report .details-container{padding: 18px;}
#report .header-info{padding:10px 0;border-top: 1px solid rgba(var(--color-border), .75);border-bottom: 1px solid rgba(var(--color-border), .75);}
#report .text-left{height: auto;}
#report .text-middle{height: auto;}
#report .text-right{height: auto;}
#report .remark_container{min-height: 32px;}
#report .checksfases .w-25{width: calc(25% - 15px) !important;}
#report .photo-title{position: absolute;margin-top: 20px;}
#report #uld-gallery{padding: 0;}
#report .box { border-radius: 6px; border: 1px solid rgba(var(--color-text), .125); box-shadow: 2px 2px 9px rgba(var(--color-text), .125); }

/* DROPZONE */
.dropzone { width: 100%; height: 100%; border: 1px dashed rgb(var(--color-info), .5); border-radius: 6px; padding: 6px; display: -webkit-box;  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; -webkit-box-align: center; -ms-flex-align: 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: -webkit-box;  display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: 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: -webkit-box;  display: flex; }
.dropzone .dz-preview { display: none; width: 100%; min-height: 10px; max-height: 10px; display: -webkit-box;  display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; }
.dropzone .dz-preview .dz-image { width: 100%; height: 82px; display:none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: 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: -moz-fit-content; min-width: fit-content; max-width: -moz-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; }

.p-12-24 { padding: 12px 24px }
.fs-24 { font-size: 24px; }

.key-value { display: flex; align-items: center; width: 100%; font-size: 10px; }
.key-value p:first-child { width: 45%; min-width: 45%; font-weight: 700; white-space: nowrap; }
.key-value p:nth-child(2) { padding-right: 12px; font-weight: 700; }
.key-value p:nth-child(3) { width: fit-content; }