/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

 body {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg) !important;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  html[data-bs-theme="dark"] a {
    color: #dee2e6;
}
html[data-bs-theme="dark"] .work-group-card {
    color: rgb(108, 117, 125);
}

html[data-bs-theme="dark"] .tab-content .row {
    background: #212529;
}

.carousel-indicators [data-bs-target] {
    background-color: #000 !important;
}

html[data-bs-theme="light"] body {
background: #F5F7FA !important;
}

.color-mode .bi {
    width: 1.5em;
    height: 1.5em;
    fill: currentcolor;
}

.color-mode svg.bi.my-1.theme-icon-active {
    color: #000;
}

.color-mode.nav-item.dropdown {
    margin-top: -30px;
}
.cp_content_wrap {
    min-height: 100vh; /* Full viewport height */

}

 .container-fluid.header {
    background: #fff;
    padding-bottom: 20px;
    border-bottom: 2px solid #f75f5e;
}
.container-fluid.header .row {
    width: auto;
}

.hidden, a.hidden {
    display: none !important;
}

.page-template-page-blank,
body.strippenkaart-template-default {
    background: #F5F7FA;
}

.row.tab-content {
    background: #fff;
    padding-bottom: 20px;
    padding-top: 20px;
}

/*Bootstrap*/

.container-fluid .row {
    max-width: 100%;
}

/*Bootstrap VC*/
.margin-0 .vc_column-inner {
    padding: 0px !important;
}

/* Single Page */

.strippenkaart-overview .card.card-body {
    margin-bottom: 20px;
}

.strippenkaart-overview .card.card-body span {
    display: contents;
}


/*  */
/* Group 1: Cards 1, 10, 19, 28, 37, 46, 55, 64, 73, 82 */
.work-group-card.card-1 .work-group-header,
.work-group-card.card-10 .work-group-header,
.work-group-card.card-19 .work-group-header,
.work-group-card.card-28 .work-group-header,
.work-group-card.card-37 .work-group-header,
.work-group-card.card-46 .work-group-header,
.work-group-card.card-55 .work-group-header,
.work-group-card.card-64 .work-group-header,
.work-group-card.card-73 .work-group-header,
.work-group-card.card-82 .work-group-header {
    background: #D8E2DC !important;
}

/* Group 2: Cards 2, 11, 20, 29, 38, 47, 56, 65, 74, 83 */
.work-group-card.card-2 .work-group-header,
.work-group-card.card-11 .work-group-header,
.work-group-card.card-20 .work-group-header,
.work-group-card.card-29 .work-group-header,
.work-group-card.card-38 .work-group-header,
.work-group-card.card-47 .work-group-header,
.work-group-card.card-56 .work-group-header,
.work-group-card.card-65 .work-group-header,
.work-group-card.card-74 .work-group-header,
.work-group-card.card-83 .work-group-header {
    background: #FAF3DD !important;
}

/* Group 3: Cards 3, 12, 21, 30, 39, 48, 57, 66, 75, 84 */
.work-group-card.card-3 .work-group-header,
.work-group-card.card-12 .work-group-header,
.work-group-card.card-21 .work-group-header,
.work-group-card.card-30 .work-group-header,
.work-group-card.card-39 .work-group-header,
.work-group-card.card-48 .work-group-header,
.work-group-card.card-57 .work-group-header,
.work-group-card.card-66 .work-group-header,
.work-group-card.card-75 .work-group-header,
.work-group-card.card-84 .work-group-header {
    background: #E6E6FA !important;
}

/* Group 4: Cards 4, 13, 22, 31, 40, 49, 58, 67, 76, 85 */
.work-group-card.card-4 .work-group-header,
.work-group-card.card-13 .work-group-header,
.work-group-card.card-22 .work-group-header,
.work-group-card.card-31 .work-group-header,
.work-group-card.card-40 .work-group-header,
.work-group-card.card-49 .work-group-header,
.work-group-card.card-58 .work-group-header,
.work-group-card.card-67 .work-group-header,
.work-group-card.card-76 .work-group-header,
.work-group-card.card-85 .work-group-header {
    background: #F4E1D2 !important;
}

/* Group 5: Cards 5, 14, 23, 32, 41, 50, 59, 68, 77, 86 */
.work-group-card.card-5 .work-group-header,
.work-group-card.card-14 .work-group-header,
.work-group-card.card-23 .work-group-header,
.work-group-card.card-32 .work-group-header,
.work-group-card.card-41 .work-group-header,
.work-group-card.card-50 .work-group-header,
.work-group-card.card-59 .work-group-header,
.work-group-card.card-68 .work-group-header,
.work-group_card.card-77 .work-group-header,
.work-group-card.card-86 .work-group-header {
    background: #F3F0EB !important;
}

/* Group 6: Cards 6, 15, 24, 33, 42, 51, 60, 69, 78, 87 */
.work-group-card.card-6 .work-group-header,
.work-group-card.card-15 .work-group-header,
.work-group-card.card-24 .work-group-header,
.work-group_card.card-33 .work-group-header,
.work-group-card.card-42 .work-group-header,
.work-group-card.card-51 .work-group-header,
.work-group_card.card-60 .work-group-header,
.work-group-card.card-69 .work-group-header,
.work-group_card.card-78 .work-group_header,
.work_group-card.card-87 .work-group-header {
    background: #DADADA !important;
}

/* Group 7: Cards 7, 16, 25, 34, 43, 52, 61, 70, 79, 88 */
.work-group-card.card-7 .work-group-header,
.work-group-card.card-16 .work-group-header,
.work-group-card.card-25 .work-group-header,
.work-group-card.card-34 .work-group-header,
.work-group-card.card-43 .work-group-header,
.work-group-card.card-52 .work-group-header,
.work-group-card.card-61 .work-group-header,
.work-group-card.card-70 .work-group-header,
.work-group-card.card-79 .work-group-header,
.work-group-card.card-88 .work-group-header {
    background: #F0EBE3 !important;
}

/* Group 8: Cards 8, 17, 26, 35, 44, 53, 62, 71, 80, 89 */
.work-group-card.card-8 .work-group-header,
.work-group-card.card-17 .work-group-header,
.work-group-card.card-26 .work-group-header,
.work-group-card.card-35 .work-group-header,
.work-group-card.card-44 .work-group-header,
.work-group-card.card-53 .work-group-header,
.work-group-card.card-62 .work-group-header,
.work-group-card.card-71 .work-group-header,
.work-group-card.card-80 .work-group-header,
.work-group-card.card-89 .work-group-header {
    background: #E3F2FD !important;
}

/* Group 9: Cards 9, 18, 27, 36, 45, 54, 63, 72, 81, 90 */
.work-group-card.card-9 .work-group-header,
.work-group-card.card-18 .work-group-header,
.work-group-card.card-27 .work-group-header,
.work-group-card.card-36 .work-group-header,
.work-group-card.card-45 .work-group-header,
.work-group-card.card-54 .work-group-header,
.work-group-card.card-63 .work-group-header,
.work-group-card.card-72 .work-group-header,
.work-group-card.card-81 .work-group-header,
.work-group-card.card-90 .work-group-header {
    background: #e5daca !important;
}


.modal#successModal .modal-content, 
.modal#statusErrorsModal .modal-content {
    border-radius: 30px;
}

.modal#successModal .modal-content svg, 
.modal#statusErrorsModal .modal-content svg {
    width: 100px; 
    display: block; 
    margin: 0 auto;
}

.modal#successModal .modal-content .path, 
.modal#statusErrorsModal .modal-content .path {
    stroke-dasharray: 1000; 
    stroke-dashoffset: 0;
}

.modal#successModal .modal-content .path.circle, 
.modal#statusErrorsModal .modal-content .path.circle {
    -webkit-animation: dash 0.9s ease-in-out; 
    animation: dash 0.9s ease-in-out;
}

.modal#successModal .modal-content .path.line, 
.modal#statusErrorsModal .modal-content .path.line {
    stroke-dashoffset: 1000; 
    -webkit-animation: dash 0.95s 0.35s ease-in-out forwards; 
    animation: dash 0.95s 0.35s ease-in-out forwards;
}

.modal#successModal .modal-content .path.check, 
.modal#statusErrorsModal .modal-content .path.check {
    stroke-dashoffset: -100; 
    -webkit-animation: dash-check 0.95s 0.35s ease-in-out forwards; 
    animation: dash-check 0.95s 0.35s ease-in-out forwards;
}

@-webkit-keyframes dash { 
    0% {
        stroke-dashoffset: 1000;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes dash { 
    0% {
        stroke-dashoffset: 1000;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes dash-check { 
    0% {
        stroke-dashoffset: -100;
    }
    100% {
        stroke-dashoffset: 900;
    }
}

@keyframes dash-check {
    0% {
        stroke-dashoffset: -100;
    }
    100% {
        stroke-dashoffset: 900;
    }
}

.box00 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

/* Xtra theme aanpassingen */


/*  */
.row.ffpc-header {
    box-sizing: border-box;
    background: #fff;
    width: 1257px;
    padding: 16px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.175);
}

.row.ffpc-header .col-lg-4.col-md-12.gy-4 {
    margin-top: 0px;
}

.button-group {
    display: flex;
    gap: 5px; /* Adjust the gap between buttons */
    flex-wrap: wrap; /* Allow buttons to wrap to the next line on smaller screens */
}

/* Xtra overrule switches */
.form-switch .form-check-input {
    -webkit-appearance: unset;
    width: 30px !important;
    margin-top: 7px !important;
}

.form-check.form-switch {
    width: 145px;
}

/* Xtra Table overrule */
table#strippenkaart-table thead {
    border-bottom: 2px solid;
}
table#strippenkaart-table,
table#strippenkaart-table th,
table#strippenkaart-table td {
    border: 0px !important;
}


/* tooltip */
/* Tooltip base styles */
.hover-tooltip {
    position: relative;
    cursor: default;
  }
  
  .hover-tooltip:hover::before {
    content: attr(hover-tooltip);
    font-size: 14px;
    text-align: center;
    position: absolute;
    display: block;
    left: 50%;
    min-width: 100px;
    max-width: 150px;
    bottom: calc(100% + 10px); /* Using $distance as 10px */
    transform: translate(-50%);
    animation: fade-in 300ms ease;
    background: rgba(39, 39, 39, 1); /* Using $tooltip-bg-color */
    border-radius: 4px;
    padding: 10px;
    color: #ffffff;
    z-index: 1;
  }
  
  .hover-tooltip:hover::after {
    content: '';
    position: absolute;
    display: block;
    left: 50%;
    width: 0;
    height: 0;
    bottom: calc(100% + 6px); /* Adjusting for $caret-height (4px) */
    margin-left: -3px; /* Adjusting for $caret-width (6px) */
    border: 1px solid black;
    border-color: rgba(39, 39, 39, 1) transparent transparent transparent; /* Adjusting for $tooltip-bg-color */
    border-width: 4px 6px 0;
    animation: fade-in 300ms ease;
    z-index: 1;
  }
  
  /* Tooltip positioning for the bottom */
  .hover-tooltip[tooltip-position="bottom"]:hover::before {
    bottom: auto;
    top: calc(100% + 10px); /* Using $distance as 10px */
  }
  
  .hover-tooltip[tooltip-position="bottom"]:hover::after {
    bottom: auto;
    top: calc(100% + 6px); /* Adjusting for $caret-height */
    border-color: transparent transparent rgba(39, 39, 39, 1);
    border-width: 0 6px 4px;
  }
  
  /* Fade-in animation */
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }