/*/ Variables /*/
    :root {
      /* Shadows */
        --shadow-default: 6px 6px 12px 1px rgba(20,20,20,.3);
        --shadow-reservation-cards: 3px 3px 7px 1px rgba(20,20,20,.3);

      /* Border */
        --reserve-cards-radius:  0.625rem;

      /* colors */
        --harsi-color: #0D6889;
    }

/*/ Custom Elements /*/
    /* Text */
        .title-section {
            color: var(--harsi-color) !important;
            font-size: 1.25rem !important;
            font-weight: 900;

            text-align: center !important;
            text-transform: uppercase !important;

            letter-spacing: 2.1px;
        }

        .empty-list-title {
            color: #292929 !important;
            font-size: 1.1rem;
            font-weight: 600;
        }

        .empty-list-message {
            font-weight: 650;
            letter-spacing: 0.3px;
        }

        .guest-name {
            color: var(--harsi-color);
            font-weight: 700;

            font-weight: 1.1rem;
            text-transform: capitalize;
        }

        .reservation-card-data {
            font-size: 77% !important;
        }

        .modal-balances-text {
            padding-inline-start: 2em;
            color: var(--harsi-color);
            font-size: 0.9rem;
            font-weight: 500;
        }

        .outstanding-balance{
            color:#cb2323;
        }

    /* Spacer */
        .g-2 {
            gap: 1.75rem !important;
        }

    /* Decorators */
        .toast-close {
            margin-left: 1.5rem;
            opacity: 0.8;
        }

        .spinner-custom {
            width: 1rem !important;
            height: 1rem !important;
            color: #0D688989 !important;
        }

        .section-divider {
            border-bottom: solid 1px #c3c3c3;
        }

        .status-bar {
            width: 6px;
            align-self: stretch;
            border-radius: 10px;
            margin-left: 1rem;
            background-color: #000;
        }

        .client-segment-ballot-badge {
            position: absolute;
            top: 0px;
            right: 0px;

            font-size: 10.5px;
            padding: 3.5px 8px;
            border-radius: 5px;

            font-weight: 700;
            letter-spacing: 0.45px;
            z-index: 10;
        }

        .client-segment-card-badge {
            padding: 3px 5px;
            margin-bottom: 0.4rem;

            font-size: 10.5px;
            font-weight: 600;

            border-radius: 5px;
            letter-spacing: 0.3px;
            z-index: 10;
        }

    /* Cards */
        .panel-card {
            border-radius: 1.2rem !important;
            box-shadow: var(--shadow-default) !important;

            background-color: #ffffff80 !important;

            padding: 1rem 0rem;
        }

        .card-height {
            max-height: 39rem !important;
            overflow-y: auto;
        }

        .empty-list-card {
            opacity: 0.8;
            border-radius: var(--reserve-cards-radius) !important;
            background-color: #ffffff77 !important;

            max-height: 10.5rem !important;
            width: 85% !important;
        }

        .reserve-card {
            box-shadow: var(--shadow-reservation-cards) !important;
            border-radius: var(--reserve-cards-radius) !important;
            background-color: #fffffff2;

            height: auto !important;
            width: 85% !important;
        }

        .disabled-reserve-card {
            background-color: #e5e5e5 !important;
        }

    /* Buttons */
    .reservation-card-button {
        text-transform: uppercase !important;
        font-size: 0.75rem !important;

        border-radius: 0.8rem !important;
        box-shadow: 2px 2px 3px 0 rgba(5, 5, 5, 0.216);

        padding: 0.10rem 0.55rem 0.15rem !important;
    }

    /* Images */
        .empty-list-img {
            max-height: 3.8rem;
            max-width: 12.2rem;
        }

        .img-icon {
            width: 15px !important;
            height: 15px !important;

            margin-right: 0.2rem;
            object-fit: contain;
        }

        .img-ballot-button {
            width: 1.2rem !important;
            height: 1.2rem !important;

            margin-right: 0.2rem;
            object-fit: contain;
        }

    /* Illusionary Form (Ballot) */
        /* Container */
        .ballot-row > div {
            padding-right: 10px;
            padding-left: 10px;
        }

        .ballot-row-semi-spaced > div {
            padding-right:7px;
            padding-left:7px;
        }

        .input-combo {
            display: flex;
            align-items: center;
            width: 100%;
            gap: 0.2rem;
        }

        /* Label */
        .input-badge {
            display: flex;
            align-items: center;
            justify-content: center;

            height: calc(1.5em + .75rem + 2px);
            width: 40px;
            min-width: 40px;

            border-radius: 10px;
            background-color: #eef3f7;
            border: 1px solid #dce3ea;
            box-shadow: var(--light-shadow);
        }

        .input-badge img {
            width: 1.3rem;
            height: 1.3rem;
            object-fit: contain;
        }

        .input-text-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;

            height: calc(1.5em + .75rem + 2px);
            width: auto;
            padding: .375rem .75rem;

            border-radius: 10px;
            background-color: #eef3f7;
            border: 1px solid #dce3ea;
            box-shadow: var(--light-shadow);

            font-size: 95% !important;
            font-weight: 500 !important;
            white-space: nowrap;
            line-height: 1.5;
        }

        /* Input */
        .input-field {
            flex: 1 1 auto;
            width: 100%;
            height: calc(1.5em + .75rem + 2px);

            padding: 0 12px;

            border-radius: 10px;
            border: 1px solid #dce3ea;
            background-color: #f8f9fb;
            box-shadow: var(--light-shadow);

            font-size: 16px;
            color: var(--harsi-color);
        }

        .input-field:focus {
            outline: none;
            border-color: var(--harsi-color);
            background-color: #fff;
        }

        .input-badge-combo {
            position: relative;
        }
