@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}


:root {
    --primaryColor: #379f92;
    --primaryColorDark: #007a6b;
    --secondaryColor: #606161;
    --sb-width: 250px;
    --sb-bg: var(--primaryColor);
    --sb-active: white;
    --sb-text: white;
    --bs-primary: var(--primaryColor);
    --bs-primary-rgb: var(--primaryColor);
}

.btn-primary {
        --bs-btn-color: var(--primaryColor);
    --bs-btn-border-color: var(--primaryColor);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primaryColorDark);
    --bs-btn-hover-border-color: var(--primaryColorDark);
    --bs-btn-focus-shadow-rgb: 55, 159, 146;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primaryColorDark);
    --bs-btn-active-border-color: var(--primaryColorDark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--primaryColor);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--primaryColor);
    --bs-gradient: none;
}

/* Override bootstrap defaults for outline primary*/
.btn-outline-primary {
    --bs-btn-color: var(--primaryColor);
    --bs-btn-border-color: var(--primaryColor);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primaryColorDark);
    --bs-btn-hover-border-color: var(--primaryColorDark);
    --bs-btn-focus-shadow-rgb: 55, 159, 146;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primaryColorDark);
    --bs-btn-active-border-color: var(--primaryColorDark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--primaryColor);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--primaryColor);
    --bs-gradient: none;
}

* {
    /* Inter is the main local font, the others are fallback fonts */
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.table {
    /* Custom settings for tabular data */
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    font-weight: 400;
}

html, body {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

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

/* Utillity */
.mt-8 {
    margin-top: 8px;
}

/* Headers */

h1, h2, h3, h4, h5, h6 {
    color: var(--secondaryColor) !important;
}

.primary-color {
    color: var(--primaryColor);
}

.hidden {
    display: none !important;
}

.clickable {
    cursor: pointer !important;
}

/* Bootstrap rows & columns */

/* Navbar Styling */
.custom-navbar {
    background-color: #fff;
    height: 80px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 0;
    border-bottom: 3px solid var(--primaryColor);
}

.navbar-brand.logo-container {
    padding-left: 35px;
    padding-right: 50px;
    margin: 0px;
}

.company-logo {
    height: 40px;
}

.navbar-nav {
    flex-grow: 1;
}

.navbar-expand-lg .navbar-nav .nav-link {
    margin: 8px 10px 8px 10px;
}

.navbar-nav .nav-link {
    color: var(--secondaryColor);
    font-size: 16px;
    padding: 10px 15px;
    position: relative;
    transition: color 0.3s ease-in-out;
}

.navbar-nav .nav-link::after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background: var(--primaryColor);
    transition: width 0.3s ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-item.show .nav-link::after,
.navbar-nav .nav-link.active::after {
    width: 100%;
}

.navbar-nav .nav-item.show .nav-link,
.navbar-nav .nav-link.active {
    color: var(--primaryColor);
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: var(--primaryColor);
}

.nav-link:active {
    color: var(--primaryColor);
}

.nav-link:hover {
    color: var(--primaryColor);
}

.nav-link i {
    padding-right: 5px;
}

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

a {
    color: #0077cc;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

.dropdown-item i {
    width: 20px;
    display: inline-block;
    text-align: center;
    margin-right: 8px;
}

/* Base state */
.navbar-nav .dropdown-toggle .fa-caret-down {
    display: inline-block;
    transition: transform 0.3s ease;
}

/* When the dropdown is open */
.navbar-nav .dropdown-toggle[aria-expanded="true"] .fa-caret-down {
    transform: rotate(180deg);
}

/* Navbar mobile hamburger menu*/

.navbar-toggler {
    background-color: var(--primaryColor);
    margin-right: 15px;
}

.dropdown-menu {
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    min-width: 200px;
    border-bottom: 3px solid var(--primaryColor);
}

.dropdown-menu.show {
    border-radius: 3px;
}

.dropdown-item {
    color: var(--secondaryColor);
    transition: 0.3s all;
}

a.dropdown-item {
    padding: 4px 8px 4px 8px;
}

button.dropdown-item {
    padding: 4px 8px 4px 8px;
}

.dropdown-item:hover {
    color: var(--primaryColor);
    background-color: #fff;
    transition: 0.3s all;
}

.dropdown-toggle::after {
    margin-left: 0px !important;
    vertical-align: 0px !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
}

/* side bar overrides*/
.nav-group-items {
    padding-left: 10px !important;
}

.nav-group-items .nav-icon i {
    font-size: 0.5rem;
    vertical-align: middle;
}


/* DataTables.net styling */

.table.datatable-init > tbody > tr > td {
    padding: 0.25rem 0.25rem !important;
}

table.datatable-init.dataTable > thead > tr > th {
    padding: .25rem .25rem;
}

table.datatable-init.dataTable > tbody > tr > td {
    font-size: 15px;
    vertical-align: middle;
}

tr.group-row td {
    background-color: #e9ecef !important; /* A darker grey than bg-light */
    color: #212529; /* Darker text for contrast */
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}

/* Custom table */
.table.custom-table {
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.table.custom-table thead th {
    border: none;
    background-color: var(--primaryColor);
    color: #fff;
}

.table.custom-table thead th:first-child {
    border-top-left-radius: 3px;
}

.table.custom-table thead th:last-child {
    border-top-right-radius: 3px;
}

.table.custom-table tbody {
    font-size: 12px;
}

.table.custom-table td {
    border-left: none;
    border-right: none;
}

table td {
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}

td.td-fit {
    white-space: nowrap;
    width: 1%;
    text-align: center;
}

tr.tr-hover:hover {
    background-color: rgba(0, 0, 0, .040);
}

.custom-table {
    border-bottom: 3px solid var(--primaryColor);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.custom-table tr,
.custom-table td {
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    align-content: center;
}

.table-icon-buttons {
    color: var(--primaryColor);
    cursor: pointer;
    font-size: 14px;
    width: 20px;
}

/* Custom Buttons */

button:focus {
    outline: none;
}

button:focus-visible {
    outline: none;
}

button.delete-action-button {
    padding: 0px;
    background-color: transparent;
    border: none;
}

button.edit-action-button {
    padding: 0px;
    background-color: transparent;
    border: none;
}

.custom-delete-property-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: #dc3545;
}

.custom-delete-property-button i {
    margin-top: 35px;
    font-size: 25px;
    transition: 0.3s all;
}

.custom-delete-property-button i:hover {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.custom-delete-property-button i:focus-visible {
    outline: none;
}

.custom-button {
    background-color: var(--primaryColor);
    color: #fff;
    font-weight: bold;
    padding: 10px 15px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-button:focus,
.custom-button:focus-visible {
    outline: none;
}

.custom-button:hover {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    color: #fff;
    text-decoration: none;
    transition: 0.3s all;
}

.custom-button:active {
    transform: scale(0.95);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.05s;
}

.custom-button i {
    margin-left: 10px;
    font-size: 15px;
}

.custom-button.no-text-button i {
    margin-left: unset;
    text-align: center;
    height: 16px;
    width: 16px;
    font-size: 18px;
}

td button.custom-button.no-text-button i {
    font-size: 14px;
}


.custom-button.custom-button-icon-left i {
    margin-left: 0px;
    margin-right: 5px;
}

.custom-button-delete {
    background-color: #dc3545;
    color: #fff;
}


.custom-table-copy-button {
    background-color: transparent;
    border: none;
    transition: 0.3s all;
    display: inline-block;
    margin-left: auto;
    white-space: nowrap;
}

.custom-table-copy-button i {
    font-size: 14px;
    color: var(--primaryColor) !important;
}

.custom-table-copy-button i {
    color: var(--primaryColor);
}

.custom-table-copy-button:focus,
.custom-table-copy-button:focus-visible {
    outline: none;
}

/* Custom Input Fields */

.form-group {
    margin-top: 15px;
}

.form-group .vertical-resize {
    resize: vertical;
}

.form-group label {
    color: var(--primaryColor);
    font-weight: bold;
}

.form-control.custom-input {
    border: none;
    border-bottom: 3px solid var(--primaryColor);
    outline: none;
    padding: 8px 10px 8px 10px;
    font-size: 16px;
    color: #333;
    border-top: 1px solid #dee2e6;
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    border-radius: 3px;
    transition: 0.3s all;
    caret-color: var(--secondaryColor);
    cursor: pointer;
}

.form-control.custom-input:hover {
    transition: 0.3s all;
}

.form-control.custom-input:focus {
    color: var(--secondaryColor);
    border-bottom: 3px solid var(--primaryColor);
}

.form-control.custom-input:focus {
    border-color: var(--primaryColor) !important;
    box-shadow: none;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.search-container {
    position: relative;
    display: inline-block;
}

.search-input {
    border: none;
    border-bottom: 3px solid var(--primaryColor);
    outline: none;
    padding: 8px 30px 8px 10px;
    font-size: 16px;
    color: #333;
    border-top: 1px solid #dee2e6;
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    border-radius: 3px;
    transition: 0.3s all;
    caret-color: var(--secondaryColor);
}

.search-input:hover {
    transition: 0.3s all;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.search-input::placeholder {
    color: var(--secondaryColor);
}

.search-input:focus {
    border-bottom: 3px solid var(--primaryColor);
}

.search-input:focus::placeholder {
    color: transparent;
}

.search-input:focus + .search-icon,
.search-icon {
    color: var(--primaryColor);
}

.search-icon {
    position: absolute;
    right: 10px;
    bottom: 8px;
    pointer-events: none;
    margin-bottom: 6px;
}

/* Custom dropdown */

.custom-dropdown {
    color: var(--secondaryColor);
    border: none;
    border-bottom: 3px solid var(--primaryColor);
    outline: none;
    font-size: 16px;
    border-top: 1px solid #dee2e6;
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    border-radius: 3px;
    transition: 0.3s all;
    appearance: none;
    background-color: white;
    position: relative;
    height: 44px !important;
    cursor: pointer;
    min-width: 280px;
    text-align: left;
    padding-right: 35px;
    width: 100%;
}

.custom-dropdown-container {
    position: relative;
}

.custom-dropdown-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--secondaryColor);
    font-size: 16px;
    transition: transform 0.2s ease-in-out;
    transform-origin: center center;
    display: inline-block;
}

.form-control.custom-dropdown:focus + .custom-dropdown-icon {
    transform: translateY(-50%) rotate(180deg);
}

.custom-dropdown[aria-expanded="true"] .custom-dropdown-icon {
    transform: translateY(-50%) rotate(180deg);
}

.form-control.custom-dropdown:hover,
.form-control.custom-dropdown:focus {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    outline: none;
}

.form-control.custom-dropdown:focus-visible {
    outline: none;
}

.form-control.custom-dropdown option {
    color: var(--secondaryColor);
}

/* Credentials */

.custom-dropdown-box {
    border-top: 3px solid var(--primaryColor);
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    border-radius: 3px;
    margin-bottom: 16px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.custom-dropdown-box-content {
    display: none;
    padding: 10px;
    background-color: #fff;
    border-radius: 3px;
    overflow-x: auto;
}

.custom-dropdown-box-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    color: var(--secondaryColor);
    cursor: pointer;
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px;
    background-color: #fff;
    border-radius: 3px;
}

.custom-dropdown-box-header .fa-caret-down {
    color: var(--secondaryColor);
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.credential-project-name td {
    background-color: rgba(0, 175, 153, 0.5);
    color: #fff;
    font-weight: bold;
    border-top: none;
    border-left: 1px solid rgba(0, 175, 153, 0.1);
    border-right: 1px solid rgba(0, 175, 153, 0.1);
    border-bottom: none;
}

.clipboard-message {
    color: var(--primaryColor);
    font-weight: bold;
    padding-top: 10px;
}

.icon-container {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
}

.property-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.property-password-container {
    display: flex;
}

.property-password-container .copy-password-button {
    margin-left: auto;
}

.property-password-container .clipboard-message {
    padding-top: 4px;
}

.modal-body .clipboard-message {
    padding-bottom: 10px;
}

.property-totpkey-container {
    float: right;
}

#totpCode {
    font-weight: bold;
}

.property-container.multiple-properties {
    border-bottom: 2px solid #dee2e6;
}

.property-container.multiple-properties:last-child {
    border-bottom: none;
    padding-top: 4.8px;
    padding-bottom: 0;
}

.property-container.multiple-properties:first-child {
    padding-bottom: 4.8px;
}

.property-username-container {
    display: flex;
    align-items: center
}

.name-value {
    display: flex;
    align-items: center;
}

.property-value {
    margin-right: 8px;
    word-break: break-word;
}

span.property-name {
    margin-right: 5px;
    font-weight: bold;
}

/* TODO: Fix small buttons icons in credentials table*/

.custom-button.small-button {
    padding: 5px 5px;
    font-size: 12px;
}

.custom-button small-button i {
}

/* Links */
a.custom-link {
    color: var(--primaryColor);
    font-weight: bold;
    text-decoration: underline;
}

/* Verlof / Verloven */

.custom-button.filter-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.label-verlof-weeknummer {
    color: var(--secondaryColor);
    font-weight: bold;
}

.leave-holiday-label {
    font-weight: bold;
    color: #ed5f5f;
}

.text-muted .form-control.custom-input {
    cursor: not-allowed !important;
}

.day-column {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

#btn-prev-year,
#btn-next-year {
    transition: none !important;
}

.status-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
}

/* approved */
.status-icon.approved {
    background-color: #28a745;
}

/* pending */
.status-icon.pending {
    background-color: #fd7e14;
}

/* rejected*/
.status-icon.rejected {
    background-color: #dc3545;
}

button.status-icon.approved {
    background-color: #28a745;
    border: none;
}

button.status-icon.rejected {
    background-color: #dc3545;
    border: none;
}

/* --- Tooltip custom styling --- */
.tooltip-inner {
    background-color: #fff !important;
    color: var(--secondaryColor) !important;
    border-radius: 3px !important;
    border-bottom: 3px solid var(--primaryColor) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    max-width: 400px !important;
    padding: 0.4rem 0.6rem !important;
    text-align: left;
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: var(--primaryColor) !important;
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,
.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: var(--primaryColor) !important;
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--primaryColor) !important;
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--primaryColor) !important;
}

.tooltip.show {
    opacity: 1.0 !important;
}

/* Leave tooltip */

.verlof-tooltip-header,
.verlof-tooltip-dagen-text {
    color: var(--primaryColor);
    font-weight: bold;
}

.verlof-tooltip-dag {
    margin-top: 5px;
}

.small-text {
    color: var(--secondaryColor);
    font-size: 12px;
    font-weight: normal;
}

.budget-container {
    background: #fff;
    border-radius: 3px;
    padding: 10px 15px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    font-size: 16px;
    min-width: 380px;
}

.fc-day-other .fc-daygrid-event-harness {
    display: none;
}

.fc-day-other .fc-daygrid-more-link {
    display: none !important;
}

.fc-daygrid-day-frame.fc-scrollgrid-sync-inner {
    min-height: 106px;
}

.budget-header {
    color: var(--primaryColor);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.budget-header .numbers {
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.custom-button-tooltip {
    background-color: transparent;
    border: none;
    padding: 0;
    margin-left: 0.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.custom-button-tooltip .info-icon {
    color: var(--primaryColor);
    font-size: 18px;
}

.accordion-content {
    font-size: 0.85rem;
}

.details-title {
    display: flex;
    align-items: center;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--primaryColor);
    border-top: 1px solid #eee;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.expiring-item {
    color: var(--secondaryColor);
    margin: 0.25rem 0;
}

/* Verlof / Verloven | Calendar */
#calendar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 8px;
    height: auto;
}

.fc-daygrid-month {
    font-size: 0.65rem;
    border-radius: 5px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.fc .fc-daygrid-event {
    margin-top: 2px;
}

.fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-end) {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}

.fc .fc-daygrid-day.fc-day-today {
    background-color: var(--primaryColor);
}

.fc .fc-daygrid-day.public-holiday {
    background-color: #e4f7ee;
}

.fc-daygrid-day-top:has(.holiday-label) > .fc-daygrid-day-number,
.fc-daygrid-day-top:has(.holiday-label) > .holiday-label {
    color: var(--secondaryColor);
}

.fc-daygrid-day:not(.fc-day-other) {
    background-color: #fff;
}

.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    color: #fff;
    font-weight: bold;
}

.fc .fc-col-header-cell-cushion {
    color: white;
    font-weight: 600;
    font-size: 0.65rem;
}

.fc .fc-button {
    background-color: var(--primaryColor);
    border: none;
    color: white;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 4px 10px;
    box-shadow: none;
}

.fc .fc-button:hover {
    background-color: #008c7a;
}

.fc .fc-daygrid-month-header {
    background-color: var(--secondaryColor);
    color: white;
    text-align: center;
    padding: 4px 0;
    font-weight: bold;
    font-size: 0.95em;
}

.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
    min-height: 51px;
}

#calendar-year-label {
    font-weight: bold;
}

.fc-daygrid-day a {
    color: var(--secondaryColor);
}

.fc-holiday-event {
    font-size: 9px;
}

.fc-event {
    cursor: pointer;
}

.fc .fc-popover {
    z-index: 998;
}

.fc-popover.fc-more-popover {
    border-radius: 3px;
}

.fc-theme-standard .fc-popover-header {
    background-color: var(--primaryColor);
    border-radius: 3px 3px 0px 0px;
}

.fc-theme-standard .fc-popover {
    border: none;
}

.fc-popover-header span {
    color: #fff;
    font-weight: bold;
    opacity: 1 !important;
}

.fc-popover-body {
    border-bottom: 3px var(--primaryColor) solid;
    border-radius: 0px 0px 3px 3px;
}

.leave-request-pending.my-leave {
    background-color: #3c93e8;
    border-color: #3c93e8;
    color: white !important;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);
    background-size: 10px 10px;
}

a.fc-event.fc-event-start.fc-event-future.leave-request-pending.my-leave.fc-daygrid-event.fc-daygrid-block-event.fc-h-event {
    margin-right: 2px;
}

a.fc-event.fc-event-end.fc-event-future.leave-request-pending.my-leave.fc-daygrid-event.fc-daygrid-block-event.fc-h-event {
    margin-left: 2px;
}

.fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-start) {
    border-radius: 3px;
}

.fc-direction-ltr .fc-popover-body .fc-daygrid-event.fc-event-start {
    margin-left: 0px !important;
}

.fc-day-today .fc-daygrid-more-link {
    color: #fff !important;
}

.fc .fc-daygrid-day.fc-day-today.public-holiday {
    background-color: var(--primaryColor) !important;
}

.fc .fc-daygrid-day.fc-day-today.public-holiday .fc-daygrid-day-top > .fc-daygrid-day-number,
.fc .fc-daygrid-day.fc-day-today.public-holiday .fc-daygrid-day-top > .holiday-label {
    color: #fff !important;
}

.fc .fc-daygrid-day.fc-day-today.public-holiday .fc-daygrid-more-link {
    color: #fff !important;
}

.leave-request-approved.my-leave {
    background-color: #3c93e8;
    border-color: #3c93e8;
}

.leave-request-approved.colleague-leave {
    background-color: #FFA500;
    border-color: #FFA500;
    color: white !important;
}

.leave-request-pending.colleague-leave {
    background-color: #FFA500;
    border-color: #FFA500;
    color: white !important;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);
    background-size: 10px 10px;
}

.fc-event-title {
    font-weight: bold;
}

.fc-daygrid-day-top {
    align-items: center;
}

span.holiday-label {
    font-size: 7px;
    padding: 4px 4px 4px 4px;
}

.fc .fc-daygrid-day-number {
    margin-left: auto;
}

/* Error screen */
h1.message-header {
    color: var(--primaryColor);
    margin: 0px;
}

.error-message-box {
    border-top: 8px solid var(--primaryColor);
    padding: 16px;
    background-color: #fff;
    text-align: center;
}

.error-message-header {
    font-size: 30px;
    font-weight: bold;
    color: var(--primaryColor);
    margin-bottom: 10px;
}

.error-message-content {
    font-size: 1em;
    color: #333;
}

/* Totp modal popup */

div#totpModal {
    padding-right: unset !important;
}

.modal-content {
    border: none;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.modal-header {
    height: 45px;
    justify-content: space-between;
    background-color: var(--primaryColor);
    border-radius: 3px 3px 0 0;
}

.modal-title {
    color: #fff !important;
    font-weight: bold;
    font-size: 22px;
}

.progress.custom-progress {
    border-radius: 3px;
}

.progress-bar.custom-progress-bar {
    background-color: var(--primaryColor);
}

.progress-bar {
    background-color: #d7d7d7;
}

.modal-close-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 20px;
}

.modal-close-button i {
    color: #fff
}

.custom-modal-copy-button {
    padding: 1px 7px 1px 7px;
    margin-left: 10px;
}

.custom-modal-copy-button i {
    font-size: 12px;
}

/* Projecten */

.form-control.custom-dropdown.custom-dropdown-multiple-select {
    height: auto !important;
}

select#DomainRoleIds option:checked {
    background-color: var(--primaryColor);
    color: #fff;
}

.form-control.custom-dropdown.custom-dropdown-multiple-select.select-list-roles {
    height: 175px !important;
}

.form-control:focus,
.form-control.custom-dropdown:focus {
    outline: none;
    box-shadow: none;
}

.form-control:focus {
    border-bottom: 3px solid var(--primaryColor);
    border-top: 1px solid #dee2e6;
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
}

select#UserId option:disabled {
    background-color: #f0f0f0;
    color: #999;
    cursor: not-allowed;
    position: relative;
}

select#UserId {
    cursor: pointer;
}

select#UserId option:hover:disabled {
    background-color: #e0e0e0;
}

/* Custom dropdown */

.form-control.custom-dropdown {
    display: flex;
    align-items: center;
}

ul.dropdown-menu.show {
    padding: 10px;
}

.dropdown-menu input:focus {
    border-color: #dee2e6;
    box-shadow: none;
}

.form-check-input {
    border-color: #dee2e6;
    outline: none;
}

.form-check-input:focus-visible {
    outline: none;
}

.form-check-input:focus {
    box-shadow: none;
    border-color: #dee2e6;
}

.form-check-input:checked {
    border-color: #dee2e6;
}

.form-check-input:checked {
    background-color: var(--primaryColor);
    color: #fff;
}

/* Validation */

.validation-summary-valid {
    display: none;
}

.custom-validation-summary-container {
    display: inline-block;
    padding: 5px 10px 5px 0px;
    border-radius: 3px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.custom-validation-summary-error-message {
    color: var(--secondaryColor);
    margin-left: 5px;
}

.warning-icon-container {
    color: #fff;
    background-color: #f71111;
    padding: 5px 7px 6px 10px;
    border-radius: 3px 0px 0px 3px;
}

/* Status-specific colors */

.badge.submitted {
    background-color: #17a2b8;
}

.badge.pending {
    background-color: #ffc107;
}

.badge.disapproved {
    background-color: #dc3545;
}

.badge.processed {
    background-color: var(--primaryColor);
}

.badge.closed {
    background-color: var(--secondaryColor);
}

span.badge.badge-pill.badge-light {
    height: auto;
}

.badge-light {
    color: #212529;
    background-color: #fff;
    border: 1px solid #808080;
    text-overflow: ellipsis;
    height: 16px;
}

.badge.badge-danger {
    background-color: #dc3545;
}

.button-group .btn-primary {
    border: none !important;
    border-radius: 0;
    background-color: transparent !important;
    border-bottom: 1px solid #00af99 !important;
    padding: 8px 3px;
}

.btn-primary {
    color: #00af99 !important;
    background-image: none;
}

.text-strikethrough,
.text-strikethrough td,
.text-strikethrough .badge {
    text-decoration: line-through;
    color: #d3d3d3 !important;
    border-color: #d3d3d3;
}

/* Projecten */

.badge {
    text-overflow: ellipsis;
    cursor: default;
}

.badge-primary {
    color: #fff;
    background-color: #007bff;
}

.badge-pill {
    padding-right: .6em;
    padding-left: .6em;
    border-radius: 10rem;
}

span.badge.badge-pill.badge-light {
    min-width: 25px;
}

.contact ul {
    list-style: none;
}

.float-left {
    float: left !important;
}

.contact ul li {
    clear: both;
    min-height: 20px;
    margin-bottom: 15px;
}

.badge.badge-warning.has-priority {
    background-color: #ff8c00;
    color: #fff;
}

.badge-success {
    background-color: #00af99;
}

.list-group.dashboard {
    float: unset;
    margin: auto auto 40px auto;
    height: unset;
    width: 50%;
    min-width: 1100px;
}

.list-group.support-bundle {
    background: #fff;
    border-radius: 3px !important;
    margin-bottom: 24px;
    min-height: 440px;
}

.list-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
}

.list-group-item {
    overflow-x: auto;
    overflow-y: hidden;
}

.list-group-item {
    position: relative;
    display: block;
    padding: .75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .125);
}

.list-group-item:last-child {
    border-radius: 3px;
}

h1.flip-counter {
    display: inline;
    background: #fff !important;
    padding: 10px !important;
    border-radius: 5px;
    border: 1px solid #d3d3d3;
    line-height: 60px !important;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .1);
    position: relative;
}


.datepicker-container input {
    border: none;
    font-weight: bold;
    background: #f7f9fc;
}

.list-group.support-bundle p.flip-counter {
    min-width: 75px;
    display: inline-block;
    text-align: center;
    border: none !important;
    box-shadow: none !important;
    border-radius: 5px;
    padding: 5px;
}

p.flip-counter:before {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    right: 0;
    border-top: 1px solid;
    border-color: #d3d3d3;
}

p.flip-counter {
    border: 1px solid #d3d3d3 !important;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .1) !important;
    position: relative;
}

.list-group.dashboard .pie-chart {
    text-align: center;
    float: left;
    padding: 30px;
    width: calc(50% - 5px);
}

.list-group.support-bundle p.flip-counter.count-0 {
    border: 1px solid #d3d3d3;
    color: #d3d3d3;
}

.datepicker-container {
    margin: auto;
}

.datepicker-container input, .datepicker-container b, .datepicker-container .btn {
    float: left;
    max-width: 150px;
}

.profile.profile-sm.profile-0 {
    color: #17a589;
    background: rgba(72, 201, 176, .3);
}

.profile.profile-sm {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 10pt;
    border-radius: 50%;
    margin-top: 7px;
    color: #00af99;
    background: rgba(0, 175, 153, .3);
}

div.is-wish .fa-heart {
    color: #28a745;
    margin-left: 5px;
}

div.has-priority .fa-flag {
    color: #dc3545;
    margin-left: 5px;
}

div.on-hold .fa-pause-circle {
    color: #007bff;
    margin-left: 5px;
}

.list-group {
    box-shadow: 0 0 .875rem 0 rgba(41, 48, 66, .05);
}

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

.text-right {
    text-align: right !important;
}

div.has-priority.super-high {
    border-top: 3px solid #dc3545 !important;
}

div.has-priority.high {
    border-top: 3px solid #ff8c00 !important;
}

.float-right {
    float: right !important;
}

.fa-btn {
    margin-top: 20px;
    margin-left: 0 !important;
    text-align: center;
    width: 30px;
}

div.on-hold, div.on-hold:hover, div.on-hold:active, div.on-hold :focus {
    background: repeating-linear-gradient(130deg, #fff, #fff 3px, #f4f7fb 3px, #f4f7fb 6px);
}

.table.table-draggable-cards-tickets {
    --bs-table-bg: transparent;
}

td.draggable-cards.text-center {
    border-bottom: none !important;
}

.badge.is-wish {
    background-color: #28a745;
}

div.on-hold .custom-button:focus {
    background: var(--primaryColor) !important;
}

.list-group .list-group-item {
    border: none;
}

.list-group .list-group-item:hover, .list-group .list-group-item-action:hover, .list-group .list-group-item:hover {
    background-color: #fff !important;
}


/* Progress */
.progress-edit i {
    color: var(--primaryColor);
}

select.form-control.selectpicker {
    padding: 8px 10px 8px 10px;
    border-bottom: 3px solid var(--primaryColor);
    border-radius: 3px;
}

.disabled {
    cursor: not-allowed !important;
}

.systeembeheerder-badge {
    background-color: #eb5146;
}

.functioneelbeheerder-badge {
    background-color: #f5a51b;
}

.ontwikkelaar-badge {
    background-color: #46a6eb;
}

.consultant-badge {
    background-color: #81a1b8;
}

.inactive-project {
    background-color: #f0f0f0;
    color: #888;
    text-decoration: line-through;
    opacity: 0.7;
}

.inactive-project td {
    background-color: #f0f0f0 !important;
}

.customer-label-card {
    border-radius: 3px;
    border-left: 5px solid var(--primaryColor);
    border-top: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    padding: 8px;
    background-color: #fff;
    box-shadow: 0 0 .875rem 0 rgba(41, 48, 66, .05);
}

.only-icon-button-small {
    color: var(--primaryColor);
    background-color: transparent;
    border: none;
    font-size: 14px;
}

.only-icon-button {
    color: var(--primaryColor);
    background-color: transparent;
    border: none;
    font-size: 20px;
}

.only-icon-button:hover {
    cursor: pointer;
}

.label-hidden {
    background-color: #e0e0e0 !important;
    opacity: 0.8;
}

.label-hidden h5,
.label-hidden p {
    color: #6c757d !important;
}

.label-hidden span.badge {
    background-color: #c2c0c0 !important;
    color: #6c757d !important;
    opacity: 0.9;
}

.label-hidden .only-icon-button i {
    opacity: 0.6;
}

.label-hidden-badge {
    background-color: #c2c0c0 !important;
    color: #6c757d !important;
    opacity: 0.8;
    text-decoration: line-through;
}

.customer-label-card .customer-label-icon-container {
    display: flex;
    align-items: center;
}

.customer-label-card .customer-label-icon {
    color: var(--primaryColor);
    font-size: 1.5rem;
    margin-right: 0.5rem;
}

#roleDropdown + .dropdown-menu .form-check-label {
    color: initial;
    font-weight: normal;
}

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

#labelsDropdown + .dropdown-menu .form-check-label {
    color: initial;
    font-weight: normal;
}

#priorityDropdown + .dropdown-menu .form-check-label {
    color: initial;
    font-weight: normal;
}

.contract-row.expired td {
    background-color: #e8e8e6 !important;
    font-style: italic;
}

.contract-row.future td {
    background-color: rgba(0, 175, 153, 0.5) !important;
    color: #fff;
    font-weight: bold;
}

.btn:first-child:active {
    border: none;
}

.filter-bar {
    display: flex;
    gap: 1.5rem;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 1rem;
    align-items: flex-end
}

.filter-item {
    flex: 1;
    min-width: 293px;
    max-width: 400px;
}

.align-flex-item-right {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
    text-align: right;
}

.label-text {
    color: var(--primaryColor);
    font-weight: bold;
}

.content-body {
    flex: 1 0 auto;
    overflow-y: visible;
    padding: 1.5rem;
    background-color: #f8f9fa;
}

/* Footer */
footer {
    flex-shrink: 0;
    border-top: 3px solid var(--primaryColor);
}

footer p {
    padding: 10px 10px 10px 50px;
    margin: 0px;
    color: var(--secondaryColor);
}

/* For _SidebarLayout*/
#page-content-wrapper-sidebar {
    flex: 1;
    height: 100vh;
    overflow-y: hidden;
    background-color: #f8f9fa;
    display: flex;
}

#page-content-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
}

#sidebar-wrapper {
    width: 250px;
    flex-shrink: 0;
    height: 100vh;
    border-right: 3px solid var(--primaryColor);
}

.content-body-sidebar {
    overflow-y: visible;
    padding: 1.5rem;
    background-color: #f8f9fa;
    width: 100%;
    flex: 1;
}

.sidebar {
    width: 250px;
    flex-shrink: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-right: 3px solid var(--primaryColor);
    background-color: var(--primaryColor);
    color: #ffffff;

    /* Sidebar palette (derived from primary) */
    --sb-bg: var(--primaryColor);
    --sb-link-color: #ffffff;              /* default/unselected */
    --sb-link-hover-color: #ffffff;        /* hover text */
    --sb-link-active-color: #ffffff;       /* selected text */
    --sb-link-hover-bg: var(--primaryColorDark);
    --sb-link-active-bg: var(--primaryColorDark);
    --sb-title-color: rgba(255, 255, 255, 0.75);
}

.sidebar-header {
    padding: 1rem 1.25rem;
}

.sidebar .logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-header .company-logo {
    height: auto;
    max-height: 100%;
    max-width: 100%;
    width: auto;
}

.sidebar-nav {
    padding: 0.75rem 0 0.5rem 0;
}

.sidebar-nav .nav-title {
    padding: 0.75rem 1.5rem 0.25rem 1.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sb-title-color);
}

.sidebar-nav .nav-link {
    color: var(--sb-link-color);
    font-size: 0.95rem;
    padding: 0.55rem 1.25rem;
    margin: 0.1rem 0.75rem;
    border-radius: 0.35rem;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.sidebar-nav .nav-link .nav-icon,
.sidebar-nav .nav-link i {
    color: inherit;
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link:focus {
    background-color: var(--sb-link-hover-bg);
    color: var(--sb-link-hover-color);
}

.sidebar-nav .nav-link:hover .nav-icon,
.sidebar-nav .nav-link:hover i,
.sidebar-nav .nav-link:focus .nav-icon,
.sidebar-nav .nav-link:focus i {
    color: var(--sb-link-hover-color) !important;
}

.sidebar-nav .nav-link.active,
.sidebar-nav .nav-link.active:hover {
    background-color: var(--sb-link-active-bg);
    color: var(--sb-link-active-color);
}

.sidebar-nav .nav-group-toggle {
    font-weight: 400;
}

.sidebar-nav .nav-group.show > .nav-group-toggle {
    background-color: transparent;
    color: var(--sb-link-active-color);
    font-weight: 600;
}

.sidebar-nav .nav-group-items .nav-link {
    font-size: 0.9rem;
    padding-left: 2.7rem;
}

/* Ensure dropdown arrow and active icons use sidebar colors */
.sidebar-nav .nav-group-toggle::after {
    color: inherit;
    border-color: currentColor;
}

.sidebar .nav-group-toggle::after {
    background-color: var(--sb-link-color) !important;
}

.sidebar .nav-group-toggle:hover::after,
.sidebar .nav-group-toggle:focus::after,
.sidebar .nav-group.show > .nav-group-toggle::after {
    background-color: var(--sb-link-hover-color) !important;
}

.sidebar-nav .nav-link.active .nav-icon,
.sidebar-nav .nav-link.active i {
    color: var(--sb-link-active-color) !important;
}

table.custom-table th {
    position: relative;
}


/* DataTables.net styling*/
.table-responsive {
    min-height: 400px; /* Prevents the footer from jumping up and down */
}

.datatable-init:not(.dataTable) {
    visibility: hidden;
    overflow: hidden;
    max-height: 600px;
    display: block;
}

.datatable-init.table-ready {
    visibility: visible;
    max-height: none;
    display: table;
    transition: opacity 0.3s ease-in;
}

.table-hyperlink {
    display: inline-block;
    font-weight: 600;
    color: #2c3e50;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.table-hyperlink:hover {
    color: var(--primaryColor);
    text-decoration: underline;
    transition: 0.3s all;
}

.table-hyperlink i {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.table-hyperlink:hover i {
    color: var(--primaryColor) !important;
    transition: 0.3s all;
}

.table-hyperlink:active {
    transform: scale(0.95);
    transition: all 0.05s;
}

.actions-column {
    white-space: nowrap;
    vertical-align: middle;
}

.actions-column .btn-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0 2px;
    color: var(--secondaryColor);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
}

.actions-column .btn-link:hover {
    color: var(--primaryColor);
    background-color: rgba(0, 0, 0, 0.05); /* Subtle background pop */
    transform: translateY(-1px);
}

.actions-column .btn-link i {
    width: 1.25em; /* Forces FA to occupy a consistent width */
    text-align: center;
}

.dt-length .dt-input {
    margin-right: 8px;
    padding: 4px 8px;
    border: 1px solid var(--primaryColor);
    border-radius: 4px;
}

.dt-length {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #6c757d;
}

thead th {
    background-color: var(--primaryColor) !important;
    color: white !important;
    border-bottom: none;
}

.dt-container .dt-layout-table {
    background-color: #f8f9fa;
}


.dt-paging {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 5px;
}

.dt-paging-button {
    border: 1px solid #dee2e6 !important;
    background-color: white !important;
    color: var(--secondaryColor) !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

/*.dt-paging-button:hover:not(.current):not(.disabled) {
    background-color: var(--secondaryColor) !important; 
    border-color: var(--primaryColor) !important;
    color: var(--primaryColor) !important;
}*/

.dt-paging-button.current {
    background-color: var(--primaryColor) !important;
    border-color: var(--primaryColor) !important;
    color: white !important;
    font-weight: 600;
}

.dt-paging-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #fcfcfc !important;
    color: black !important;
    border-color: #e9ecef !important;
}

.dt-paging-button:focus {
    outline: none;
}

/* Change the color of all sort arrows (Inactive state) */
.dt-column-order::before,
.dt-column-order::after {
    color: white !important;
    opacity: 0.5 !important;
}

/* Change the color of the active sort arrow */
th.dt-ordering-asc .dt-column-order::before,
th.dt-ordering-desc .dt-column-order::after {
    color: white !important;
    opacity: 1 !important;
}

/* Targets a button inside a form, inside a table cell */
table tr td form button {
    background: none;
    border: none;
    padding: 0.25rem;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    color: var(--secondaryColor);
    transition: color 0.15s ease-in-out;
}

table tr td form button:hover {
    color: var(--primaryColor);
    text-decoration: underline;
}

table tr td form {
    display: inline;
}

/* Hover effect */
.actions-column a.delete-link {
    color: var(--secondaryColor);
}

.actions-column a:hover {
    color: var(--primaryColor);
    opacity: 0.8;
}

.actions-column a.delete-link:hover {
    color: #dc3545;
}

.actions-column a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--secondaryColor);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    background: transparent;
}

.actions-column a i {
    font-size: 14px;
    width: 1.25em;
    text-align: center;
    transition: 0.3s all;
}

.actions-column a i:hover {
    transition: 0.3s all;
}

.actions-column a:active {
    transform: scale(0.95);
    transition: all 0.05s;
}

div.dt-container .dt-length .dt-input {
    border: none;
    border-top: 1px solid #dee2e6;
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    border-bottom: 3px solid var(--primaryColor);
    border-radius: 3px;
    transition: 0.3s all;
}

div.dt-container .dt-length .dt-input:focus-visible {
    outline: none;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    transition: 0.3s all;
}

div.dt-paging {
    margin-top: 0px;
}

div.dt-container .dt-search {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

div.dt-container .dt-search input.dt-input {
    border: none;
    border-bottom: 3px solid var(--primaryColor);
    outline: none;
    padding: 8px 10px 8px 10px;
    width: 250px;
    font-size: 16px;
    color: #333;
    border-top: 1px solid #dee2e6;
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    border-radius: 3px;
    transition: 0.3s all;
    caret-color: var(--secondaryColor);
    /* Magnifying glass on the LEFT */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaa' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 14px;
    padding-left: 32px !important;
    padding-right: 32px !important;
}

/* Position thead "X" stop clear search bar text */
div.dt-container .dt-search .search-clear-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #aaa;
    cursor: pointer;
    z-index: 5;
    background: transparent;
}

div.dt-container .dt-search input.dt-input:focus {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

html div.dt-container .dt-paging .dt-paging-button {
    min-width: 35px;
}

html div.dt-container .dt-paging .dt-paging-button.disabled:hover {
    background-color: transparent !important;
}

html div.dt-container .dt-paging .dt-paging-button:active {
    box-shadow: none;
}

html div.dt-container .dt-paging .dt-paging-button.current {
    color: #fff !important;
}

html div.dt-container .dt-paging .dt-paging-button.current:hover {
    color: #fff !important;
    background-color: var(--primaryColor) !important;
}

html div.dt-container .dt-paging .dt-paging-button:active {
    background: none;
}

html div.dt-container .dt-paging .dt-paging-button:hover {
    background: none;
    background-color: rgba(0, 175, 153, 0.7) !important;
}

/*Remove standard "X" from input fields*/
/* Chrome, Safari, Edge, Opera */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
    -webkit-appearance: none;
}

div.dt-search i.fa-solid.fa-magnifying-glass {
    color: var(--primaryColor);
    margin-right: 8px;
}

div.dt-container .dt-scroll-head table thead tr th:first-child {
    border-top-left-radius: 3px !important;
}

div.dt-container .dt-scroll-head table thead tr th:last-child {
    border-top-right-radius: 3px !important;
}

div.ts-dropdown-content {
    background-color: #fff;
    border-radius: 3px;
}

.tom-select.single.focus .ts-control.custom-dropdown {
    box-shadow: none !important;
}

.ts-control.custom-dropdown {
    border: 1px solid #ced4da !important;
    border-radius: 3px !important;
    border-bottom: 3px solid var(--primaryColor) !important;
    background-color: white !important;
    min-height: 44px !important;
    box-shadow: none !important;
    background-image: none !important;
    position: relative !important;
    padding-right: 2rem !important;
    transition: border-color 0.15s ease-in-out;
}

.ts-control.custom-dropdown::after {
    content: "";
    position: absolute;
    right: 0.75rem;
    top: 50%;
    width: 16px;
    height: 12px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 12px;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    pointer-events: none;
}

.ts-wrapper.dropdown-active .ts-control.custom-dropdown::after {
    transform: translateY(-50%) rotate(180deg);
}

.is-invalid {
    border-bottom-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

select.ts-hidden-native {
    visibility: hidden !important;
    height: 44px !important;
    overflow: hidden !important;
    position: absolute;
    z-index: -1;
}

.role-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 50rem;
    border: 1px solid transparent;
}

    .role-badge.badge-red {
        background-color: #f8d7da;
        color: #e74c3c;
        border-color: #f5c2c7;
    }

    .role-badge.badge-blue {
        background-color: #cfe2ff;
        color: #3498db;
        border-color: #b6d4fe;
    }

    .role-badge.badge-green {
        background-color: #d1e7dd;
        color: #2ecc71;
        border-color: #badbcc;
    }

    .role-badge.badge-gray {
        background-color: #e2e3e5;
        color: #95a5a6;
        border-color: #d3d6d8;
    }

    .role-badge.badge-purple {
        background-color: #e2d9f3;
        color: #9b59b6;
        border-color: #d1c2e9;
    }

    .role-badge.badge-orange {
        background-color: #fff3cd;
        color: #e67e22;
        border-color: #ffecb5;
    }

#userAccessTabs .nav-item > .nav-link {
    color: var(--primaryColor);
}

#userAccessTabs .nav-item > .nav-link:hover {
    color: var(--primaryColor);
}

#userAccessTabs .nav-item > .nav-link.active {
    color: var(--secondaryColor);
    font-weight: bold;
}

tr:target {
    outline: 2px solid var(--primaryColor);
}

.ts-wrapper.dropdown-active .ts-control.custom-dropdown {
    border-color: var(--primaryColor) !important;
}


.ts-wrapper.disabled,
.ts-wrapper.locked {
    cursor: not-allowed !important;
}

.ts-wrapper.disabled *,
.ts-wrapper.locked * {
    pointer-events: none !important;
}

.table tbody tr.tr-inactive td {
    background-color: #dedede !important;
    color: #888 !important;
}

.tr-inactive {
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.tr-inactive a,
.tr-inactive i,
.tr-inactive .badge {
    color: #888 !important;
}

div.card {
    border-radius: 3px;
}

.dt-layout-row {
    margin: 0px 0px 8px 0px !important;
}

.dt-layout-row.dt-layout-table {
    margin-top: 8px !important;
}

p.form-control-plaintext {
    padding: 0px;
}

.ts-wrapper.multi .ts-control > div.item.active {
    color: #343a40;
    background: #efefef
}

.ts-wrapper.tom-select.single .ts-control.custom-dropdown {
    cursor: text;
}

.ts-wrapper.tom-select.single .ts-control input {
    cursor: text;
}

.tom-select.plugin-dropdown_input.focus .ts-dropdown .dropdown-input {
    box-shadow: none;
    border-color: #d0d0d0;
}

.ts-control.custom-dropdown .clear-button {
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 2;
    padding: 0 5px;
    line-height: 1;
}

div .ts-control, input.form-control.custom-date-input {
    border-radius: 3px;
    border-bottom: 3px solid var(--primaryColor);
}

.ts-wrapper.focus .ts-control {
    box-shadow: none;
    border: 1px solid var(--primaryColor);
    border-bottom: 3px solid var(--primaryColor);
}

input.form-control.custom-date-input.active {
    border: 1px solid var(--primaryColor);
    border-bottom: 3px solid var(--primaryColor);
}

div.ts-control,
input.form-control.custom-date-input {
    min-height: 44px;
}

.navbar-brand.logo-container:focus-visible {
    outline: none;
}

.ts-dropdown.tom-select.plugin-clear_button.plugin-remove_button.plugin-dropdown_input {
    border-radius: 3px;
}

.search-hidden {
    display: none !important;
}

/* Flatpickr date inputs */
/* Style for the datepicker input */
input.datepicker-display.custom-input,
input.datepicker-display.form-control {
    background-color: #ffffff !important;
    color: #333 !important;
    /* Base64 Icon encoded with #606161 */
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48cGF0aCBmaWxsPSIjNjA2MTYxIiBkPSJNMjE2IDY0QzIyOS4zIDY0IDI0MCA3NC43IDI0MCA4OEwyNDAgMTI4TDQwMCAxMjhMNDAwIDg4QzQwMCA3NC43IDQxMC43IDY0IDQyNCA2NEM0MzcuMyA2NCA0NDggNzQuNyA0NDggODhMNDQ4IDEyOEw0ODAgMTI4QzUxNS4zIDEyOCA1NDQgMTU2LjcgNTQ0IDE5Mkw1NDQgNDgwQzU0NCA1MTUuMyA1MTUuMyA1NDQgNDgwIDU0NEwxNjAgNTQ0QzEyNC43IDU0NCA5NiA1MTUuMyA5NiA0ODBMOTYgMTkyQzk2IDE1Ni43IDEyNC43IDEyOCAxNjAgMTI4TDE5MiAxMjhMMTkyIDg4QzE5MiA3NC43IDIwMi43IDY0IDIxNiA2NHpNMjE2IDE3NkwxNjAgMTc2QzE1MS4yIDE3NiAxNDQgMTgzLjIgMTQ0IDE5MkwxNDQgMjQwTDQ5NiAyNDBMNDk2IDE5MkM0OTYgMTgzLjIgNDg4LjggMTc2IDQ4MCAxNzZMMjE2IDE3NnpNMTQ0IDI4OEwxNDQgNDgwQzE0NCA0ODguOCAxNTEuMiA0OTYgMTYwIDQ5Nkw0ODAgNDk2QzQ4OC44IDQ5NiA0OTYgNDg4LjggNDk2IDQ4MEw0OTYgMjg4TDE0NCAyODh6Ii8+PC9zdmc+") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 12px) center !important;
    /* Increased size */
    background-size: 22px 22px !important;
    padding-right: 45px !important;
}

input.datepicker-display.custom-input:disabled {
    background-image: none !important;
    background-color: #e9ecef !important; /* Grey out when disabled */
    cursor: not-allowed;
}

.flatpickr-prev-month:hover svg path,
.flatpickr-next-month:hover svg path {
    fill: var(--primaryColor) !important;
}

span.flatpickr-day.selected {
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
}

span.flatpickr-day.today {
    border-color: var(--primaryColor);
    color: var(--primaryColor);
}

span.flatpickr-day.today.selected {
    color: #fff;
}

span.flatpickr-day.today.selected:hover {
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
}

.flatpickr-prev-month:focus-visible,
.flatpickr-next-month:focus-visible,
.flatpickr-prev-month:focus,
.flatpickr-next-month:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.flatpickr-calendar {
    border-radius: 3px !important;
}

div.alert {
    border-radius: 3px;
}

.custom-button.active {
    background-color: var(--primaryColorDark);
}

.custom-button.disabled {
    background-color: grey;
}

.bg-success-soft {
    background-color: #e8f5e9;
}

.bg-secondary-soft {
    background-color: #f5f5f5;
}

.fs-xs {
    font-size: 0.6rem;
    vertical-align: middle;
}

.btn-white {
    background-color: #fff;
}

    .btn-white:hover {
        background-color: #f8f9fa;
    }

.table thead th {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: #6c757d;
    border-bottom-width: 1px;
}