﻿

.hour-checkbox {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Crect x='1' y='1' width='22' height='22' rx='3' stroke='%238487AB' stroke-width='2'/%3E%3C/svg%3E");
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-color .2s, border-color .2s;
    outline: none;
    position: relative;
    display: inline-block;
}

    .hour-checkbox:hover {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Crect x='1' y='1' width='22' height='22' rx='3' stroke='%23343C80' stroke-width='2'/%3E%3C/svg%3E");
    }

    .hour-checkbox:checked {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='4' fill='%233642AE'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.7214 8.30747C18.1039 8.70588 18.0909 9.33891 17.6925 9.72139L11.4425 15.7214C11.0556 16.0929 10.4444 16.0929 10.0575 15.7214L6.30747 12.1214C5.90906 11.7389 5.89614 11.1059 6.27861 10.7075C6.66109 10.3091 7.29412 10.2961 7.69253 10.6786L10.75 13.6138L16.3075 8.27861C16.7059 7.89614 17.3389 7.90906 17.7214 8.30747Z' fill='white'/%3E%3C/svg%3E");
    }

        .hour-checkbox:checked:hover {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='4' fill='%23343C80'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.7214 8.30747C18.1039 8.70588 18.0909 9.33891 17.6925 9.72139L11.4425 15.7214C11.0556 16.0929 10.4444 16.0929 10.0575 15.7214L6.30747 12.1214C5.90906 11.7389 5.89614 11.1059 6.27861 10.7075C6.66109 10.3091 7.29412 10.2961 7.69253 10.6786L10.75 13.6138L16.3075 8.27861C16.7059 7.89614 17.3389 7.90906 17.7214 8.30747Z' fill='white'/%3E%3C/svg%3E");
        }

    .hour-checkbox:disabled {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Crect x='1' y='1' width='22' height='22' rx='3' fill='%23F8F9FB'/%3E%3Crect x='1' y='1' width='22' height='22' rx='3' stroke='%23E4E5F0' stroke-width='2'/%3E%3C/svg%3E");
    }

    .hour-checkbox:focus {
        outline: none;
    }

    .hour-checkbox:focus-visible::after {
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 2px solid var(--Stroke-Brand-hover, #343C80);
        border-radius: 6px;
        pointer-events: none;
    }

    /* give pointer only when not disabled */
    .hour-checkbox:not(:disabled) {
        cursor: pointer;
    }

    /* override the cursor when disabled */
    .hour-checkbox:disabled {
        cursor: not-allowed;
    }

.hour-label {
    cursor: not-allowed;
}

    .hour-label:has(.hour-checkbox:not(:disabled)) {
        cursor: pointer;
    }



/* Highlight selected slot with darker border */
.slot-button.selected {
    border: 2px solid #1A1E3D !important;
}

/* Styles for the continue button */
.continue-button {
    width: 118px;
    height: 48px;
    padding: 8px 24px;
    gap: 12px;
    border-radius: 24px;
    background-color: #3642AE;
    color: white;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
}

    /* Hover state for the continue button */
    .continue-button:hover {
        background-color: #343C80;
    }

.card-container {
    transition: border-color .2s;
}

.link-text {
    color: var(--Text-Color-Brand, #3642AE);
    font-family: var(--Typography-Font-family-Ubuntu, Ubuntu);
    font-size: var(--fontsize-body-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-body-body-sm, 22px);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    transition: color 0.2s ease, text-decoration-thickness 0.2s ease;
}

    .link-text:hover,
    .link-text:focus {
        color: var(--Text-Color-Brand-Hover, #2a338a);
    }

.object-item {
    border-color: #E4E5F0;
    transition: border 200ms;
}


.facility-note {
    border: 1px solid #9CD3F1;
    background-color: #E7F4FB;
    color: #236589;
    border-radius: 8px;
    padding: 12px;
}