@font-face {
    font-family: 'ProximaNova-Black';
    src:url('../fonts/ProximaNova-Black.woff') format('woff'),
        url('../fonts/ProximaNova-Black.woff2') format('woff2'),
        url('../fonts/ProximaNova-Black.eot'),
        url('../fonts/ProximaNova-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/ProximaNova-Black.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ProximaNova-Regular';
    src:url('../fonts/ProximaNova-Regular.woff') format('woff'),
        url('../fonts/ProximaNova-Regular.woff2') format('woff2'),
        url('../fonts/ProximaNova-Regular.eot'),
        url('../fonts/ProximaNova-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/ProximaNova-Regular.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body { color: #002554; font-family: 'ProximaNova-Regular'; font-size: 14px; }

h4 {
    font-weight: 700;
    font-size: 21px;
    margin-bottom: 15px;
    border-bottom: 1px solid #cccdd2;
 }

a:hover, button:hover { color: #00a6ce; }

.w-1\/2 { width: 50%; }

.max-w-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.task-count {
    background: #05a6ce;
    color: #fff;
    padding: 0 1px;
    border-radius: 100%;
    font-size: 9px;
    width: 20px;
    text-align: center;
    position: absolute;
    right: -5px;
    top: -5px;
}

/* Mail layout offerte */

.mail-offer {
    box-shadow: 0 0px 15px -1px rgb(0 0 0 / 20%);
    border-radius: 3px;
    overflow: hidden;
    padding: 15px 30px 30px;
    margin: 15px 30px;
    border: 1px solid #e2e8f0;
}
.mail-offer .header { margin: 0 0 15px; }
.mail-offer .header img { max-width: 144px; height: 48px; border-radius: 0; }
.mail-offer h1, .mail-offer p, .mail-offer .btn { margin: 0 0 15px; }  


/* Navigatie */

.border-go { --tw-border-opacity: 1; border-color: rgb(0 163 204 / var(--tw-border-opacity)); }
.border-bottom { border-bottom: 1px solid #cccdd2; margin-bottom: 23px; }

.bg-yellow { background: #FFB71B; }
.bg-red { background: #e87c7c !important; color: #fff !important; }

.cl-red { color: red; }
.cl-green { color: #84cc16; }

.active { color: #04a5ce; font-weight: 700; background-color: rgb(249 250 251 / var(--tw-bg-opacity)); }


/* Buttons */

.btn {
	--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    font-weight: 700;
    border-radius: 5px;
    justify-content: center;
    padding: 10px 20px;
    margin-right: 5px;
    transition: transform .2s;
}
.btn:hover { transform: scale(.98); color: #002554; }
.btn:focus { transform: scale(.9); }

.btn-list { position: absolute; right: 18px; margin-top: 17px; }

.bg-green { background: #84cc16 !important; color: #fff !important; }
.bg-green:hover { background: #71af14; }

.bg-clean { background: #fff; color: #002554; }
.bg-clean:hover { background: #f6f6f6; }

.bg-grey { background: #525252; color: #fff; }

.no-label label { display: none; }

.btn-back {
    background: #00a5ce;
    border-radius: 100%;
    padding: 3px;
    width: 22px;
    margin-top: 1px;
    float: left;
    margin-right: 10px;
}
.btn-back:hover { background: #002554; }

.p-4 { padding: 1rem 1.5rem; }
.w-90 { width: 91.666667%; }

.table-span { display: inline-block; width: 60%; }

.modal-form label { width: 29%; display: inline-block; }
.modal-form input, .modal-form select { width: 70%; display: inline-block; }
.modal-offer .select2-override .select2 { width: 100% !important; }


/* Gutenberg */

.wp-block-columns .wp-block { overflow: hidden !important; }
.wp-block-columns .wp-block img { max-width: 100% !important; }


/* Table */

.form-group table td { vertical-align: top; }

table tr:hover { background: #f9fafb; }
.bg-gray-200 table tr:hover { background: transparent; }
.bg-gray-200 table td { word-break: break-all; }


/* Form js */

.form-js input { height: 38px; border-radius: 0.25rem; }
.form-js.mt-3 .mb-1 { margin-bottom: 0; }

.filepond--hopper { margin-top: 10px; }

.form-customer .text-red-500 { margin-left: 184px; margin-top: 3px; display: inline-block; }
.select2-container .select2-selection--single, #start_date {
    border: 1px solid #647276 !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    height: auto !important;
    font-size: 1rem;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #4a5568 !important; }
#start_date { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }


/* Carousel */

.carousel { margin: auto; }
.carousel-open { display: none; }
.carousel-open:checked + .carousel-item {
    position: static;
    opacity: 100;
    vertical-align: middle;
    height: 210px;
}
.carousel-item { -webkit-transition: opacity 0.6s ease-out; transition: opacity 0.6s ease-out; }

.carousel-item img {
    border: 1px solid #e2e8f0;
    object-fit: cover;
    height: 210px;
    border-radius: 5px;
    width: 100%;
}
.carousel-item a, summary { cursor: pointer; }
ol.carousel-images { margin-left: 0; max-width: 350px; }
.carousel-images::-webkit-scrollbar { width: 10px; border-radius: 30px; background: #e2e8f0; }
.carousel-images::-webkit-scrollbar-thumb {
    background-color: rgba(0, 165, 206, 1);
    background-image: url(../images/scroll.svg);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
}

#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3,
#carousel-4:checked ~ .control-4,
#carousel-5:checked ~ .control-5,
#carousel-6:checked ~ .control-6 {
    display: none;
}

.carousel label:hover { background: #00a5ce; }
.carousel-thumb img { border-radius: 5px; object-fit: cover; cursor: pointer; }
.carousel-indicators {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    z-index: 10;
}

.carousel-images {
    display: block;
    width: 100%;
    overflow: auto;
    white-space: nowrap;
    border-radius: 5px;
    -webkit-overflow-scrolling: touch;
}
.carousel-images li { display: inline-block; object-fit: cover; }
.carousel-images img {
    height: 90px;
    width: 120px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #edeef2;
}
.fancybox__container { z-index: 999999 !important }

@media screen and (min-width: 620px) { .sm\:table-cell { display: table-cell !important; } nav.mb-10 { margin-bottom: 0 !important; } }

@media screen and (max-width: 720px) {    
    .modal-form label { width: 100%; display: inline-block; }
    .modal-form input, .modal-form select { width: 100%; display: inline-block; }

    .mail-offer { margin: 15px; }
}