* {
    font-family: "Cabin", sans-serif;
}

#datatable {
    min-height: 500px;
}

aside.navbar.navbar-vertical.navbar-expand-lg {
    background: unset;
}

.no-data-available {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 5px;
    border: 1px solid rgba(4, 32, 69, 0.14);
    padding: 2em;
}

.status-unverified {
    background-color: #f8d7da !important;
    /* Light red */
    color: #721c24 !important;
    /* Dark red */
}

.status-verified {
    background-color: #d4edda !important;
    /* Light green */
    color: #155724 !important;
    /* Dark green */
}

.status-contract-sent {
    background-color: #8bc799 !important;
    /* Light green */
    color: white !important;
    /* Dark green */
}

.status-affiliate-signed {
    background-color: #fff3cd !important;
    /* Light yellow */
    color: #856404 !important;
    /* Dark yellow */
}

.status-admin-signed {
    background-color: #cce5ff !important;
    /* Light blue */
    color: #004085 !important;
    /* Dark blue */
}

.status-onboarding {
    background-color: #e2e3e5 !important;
    /* Light grey */
    color: #383d41 !important;
    /* Dark grey */
}

.status-active {
    background-color: #c3e6cb !important;
    /* Light green */
    color: #155724 !important;
    /* Dark green */
}

td {
    white-space: nowrap;
}

.table-item {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
    min-height: 40px;
}

.model-multi {
    display: flex;
    flex-direction: row;
}

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

.table-responsive {
    min-height: 300px;
}

.selected-values {
    padding-left: 50px;
}

.big-heading {
    font-family: "Cabin", sans-serif;
    color: #093883;
    font-size: 54px;
    font-weight: 900;
    line-height: 56px;
    text-align: left;
}

.custom-paragraph {
    font-family: "Cabin", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
}

#login-form input[type="email"] {
    border: 1px solid #09388380;
}

.auth-button {
    background: linear-gradient(72.44deg, #1b2c60 0.01%, #013d93 100%);
}

.auth-button:hover .auth-button-icon {
    padding-left: 10px;
}

.auth-button-icon {
    transition: padding-left 0.5s ease-out;
    margin-left: 10px;
}

.login-page {
    background: url("../img/login-bg.png") no-repeat;
    background-size: cover;
    backdrop-filter: blur(5px);
}

.backdrop-blur {
    background: linear-gradient(72.44deg,
            rgba(27, 44, 96, 0.675) 0.01%,
            rgba(1, 61, 147, 0.9) 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(4px);
}

.logo {
    max-width: 200px;
    margin: auto;
}

aside.navbar.navbar-vertical {
    background: #1b2c60 !important;
}

.page-wrapper .page-header {
    margin: var(--tblr-page-padding-y) 0 0;
    background: #1b2c60;
}

.page-wrapper {
    background: #1b2c60 !important;
}

.page-body {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 0px 25px 25px 25px;
    margin-left: 0px;
    margin: 20px;
    margin-top: 0;
}

.page-body>.container-fluid {
    padding: 0;
}

.text-blue {
    color: #1b2c60 !important;
}

.card-heading {
    font-size: 16px;
    font-weight: 700;
    display: block;
    text-align: center;
}

.card-data {
    color: #1b2c60;
    font-size: 32px;
    font-weight: 700;
    display: block;
    text-align: center;
}

.card-label {
    font-size: 16px;
    font-weight: 400;
    display: block;
    text-align: center;
    color: #333333;
}

.border-card {
    border-right: 1px solid #3333331a;
}

.bg-green-lt {
    background: #53ab761a !important;
    color: #53ab76 !important;
}

.badge {
    display: flex;
}

.card-info {
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    color: #333333;
}

.card {
    box-shadow: -15px 15px 25px 0px #0000001a;
    border-radius: 15px;
    border: 1px solid #013d9326 !important;
}

#affiliatesTable_info {
    text-align: center;
    padding-top: 2em;
}

.dt-paging {
    text-align: center;
    padding-top: 1em;
}

.dt-search {
    margin-left: auto;
    display: block;
    position: relative;
    width: fit-content;
    padding-bottom: 1em;
}
.dtsb-searchBuilder {
    margin-bottom: 10px; /* Spacing below the builder */
}

/* Optional: Style the 'Add Condition' button to match if it doesn't automatically */
button.dtsb-button {
    /*background-color: var(--bs-primary) !important;*/
    color: white !important;
    border-radius: 0.25rem !important;
    font-size: 0.875rem !important; /* Match btn-sm */
}

.dt-button {
    background: #013d93 !important;
    color: white !important;
    border: 0 !important;
    border-radius: 15px !important;
    padding: 5px 40px !important;
}

.dt-buttons {
    width: fit-content;
    margin-right: auto;
    padding-bottom: 1em;
    display: grid !important;
    /* OPTION A: All 4 in one row (1 x 4) */
    grid-template-columns: repeat(4, 1fr);

    gap: 10px; /* The "gutter" space between grid items */
    width: 100%; /* Ensure the grid takes available width */
    max-width: 800px; /* Optional: Stop it from getting too wide on huge screens */
}
.dt-buttons .btn {
    width: 100% !important;
    display: flex;
    justify-content: center;
}

.dt-search label {
    display: none;
}

.dt-search input {
    border-radius: 15px !important;
    border: 1px solid #27245e80 !important;
}

thead tr th {
    background: #013d93 !important;
    color: white !important;
}

thead tr th:last-child {
    border-radius: 0 10px 0 0;
}

thead tr th:first-child {
    border-radius: 10px 0 0 0;
}

.action-buttons button {
    background: none;
    border: 0;
    height: 100%;
}

.action-buttons .table-item {
    justify-content: center;
    align-items: stretch;
    gap: 1em;
}

aside .nav-link-title {
    color: #ffffff;
}

div#datatable_info {
    text-align: center;
    margin-top: 1em;
}

a#login-details-tab {}

.nav-link.active {
    color: #013d93;
    text-decoration: underline;
    text-decoration-color: #013d93;
}

#loginTabs .nav-link {
    font-size: 18px;
    transition: all 0.5s ease !important;
}

@media screen and (max-width: 992px) {
    .page-body {
        margin: 10px;
        border-radius: 10px;
    }

    .big-heading {
        font-family: "Cabin", sans-serif;
        color: #093883;
        font-size: 44px;
        font-weight: 900;
        line-height: 56px;
        text-align: left;
    }

    .step-item:after {
        content: unset !important;
    }

    ul.steps {
        flex-direction: column;
        gap: 30px;
    }

    .step-item:before {
        content: unset !important;
    }

    li.step-item {
        display: none;
    }

    li.step-item.active {
        display: list-item;
        font-size: 24px;
        font-weight: 900;
        margin-bottom: 2em;
        text-decoration: underline;
        color: #093883;
    }
}

        .zoomiframeWrapper {
            position: relative;
            padding-bottom: 56.25%;
            padding-top: 25px;
            height: 0;
        }

        .zoomiframeWrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        @media (min-width: 992px) {
            .navbar-expand-lg .nav-item.active {
                background-color: currentColor;
            }
        }

        @media (min-width: 992px) {
            .navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item.active {
                background-color: darkgoldenrod;
            }
        }