:root {
    --primary-gradient: linear-gradient(180deg, #183F72 0%, #1E385D 100%);
    --Primary-Solid: #259CEC;
    --solid-white: #FFFFFF;
    --extra-orange-1: #FC8155;
    --extra-orange-2: #FFE7DF;
    --dark-shade-1: #4D5154;
    --dark-shade-2: #909294;
    --dark-shade-3: #D3D3D4;
    --extra-red-02: #D83838;
    --primary-dark-blue: #0076DE;
    --primary-shade-01: #71BCFF;
    --text-field-border-standard-color: #E2E8F0;
    --form-active: #40B168;
    --dark-shade-4: #E9E9EA;
    --white-gray: #F3F3F3;
    --notify-bg: #FFF2F2;
    --primary-dark: #1B3C69;
    --primary-dark-gardient: #203552;

}

body {
    font-family: Inter;
    position: relative;
    min-height: 100vh;
}

.container {
    max-width: 850px !important;
    margin-inline: auto;
    background-color: #f9fafb;
}

.bg-primary-dark-gradient {
    background: linear-gradient(93deg, var(--primary-dark) 1.68%, var(--primary-dark-gardient) 100%);
}

.bg-primary-gradient {
    background: var(--primary-gradient);
}

.bg-secondary {
    background-color: var(--primary-dark-blue) !important;
}

.bg-dark-shade {
    background-color: var(--dark-shade-4) !important;
}

.bg-white-gray {
    background-color: var(--white-gray);
}

.primary-dark-bg {
    background: linear-gradient(93deg, var(--primary-dark) 1.68%, #203552 100%);
}

.bg-danger {
    background-color: var(--extra-red-02);
}

.primary-dark-color {
    color: var(--primary-dark)
}

.primary-color {
    color: var(--dark-shade-1, --dark-shade-1);
}

.primary-color-2 {
    color: #212529;
}

.primary-white-color {
    color: var(--solid-white);
}

.secondary-color {
    color: var(--primary-shade-01, --primary-shade-01);
}

.secondary-color-2 {
    color: var(--primary-dark-blue);
}

.success-color {
    color: var(--form-active);
}

.warning-color {
    color: var(--extra-orange-1);
}

.danger-color {
    color: var(--extra-red-02);
}

.deactiveBtnColor {
    background-color: var(--solid-white);
}

.activeBtnColor {
    background-color: var(--primary-dark);
    color: var(--solid-white)
}

.input-style {
    border: 1px solid rgba(66, 80, 102, 0.40);
    background-color: #F2F2F2;
    box-shadow: 0px 2px 4px 0px rgba(66, 80, 102, 0.10);
}

.input-style:focus {
    border: 1px solid var(--primary-dark-blue);
    background: var(--solid-white);
    box-shadow: 0px 0px 0px 2px rgba(19, 106, 243, 0.25), 0px 2px 4px 0px rgba(66, 80, 102, 0.10);
}

.building-box {
    border: 1px solid var(--dark-shade-3, #D3D3D4);
    background: var(--solid-white, #FFF);
    box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.08);
}

/* **************
Start Home page Style
**************/
/* Home Service Grid Style start */
.alart-home {
    background: var(--Extra-orange-2, --extra-orange-2);
    color: var(--Extra-orange-1, --extra-orange-1);
}

.notify-bg {
    background: var(--notify-bg);
    color: var(--extra-red-02);
}

.home-service-grid li:nth-child(1) .background {
    /* border: 1px solid var(--Primary-Solid, --Primary-Solid);
    background: var(--solid-white, --solid-white);
    box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.10); */
    background: linear-gradient(180deg, #FFB100 0%, #EA7000 100%);
}

.home-service-grid li:nth-child(2) .background {
    background: linear-gradient(180deg, #15B07B 0%, #287A6D 100%);
}

.home-service-grid li:nth-child(3) .background {
    background: linear-gradient(180deg, #FF5F3D 0%, #E13629 100%);
}

.home-service-grid li:nth-child(4) .background {
    background: linear-gradient(180deg, #02B2E2 0%, #0075A2 100%);
}

.home-service-grid li:nth-child(5) .background {
    background: linear-gradient(180deg, #F28AE8 0%, #851C87 100%);
}

.home-service-grid li:nth-child(6) .background {
    background: linear-gradient(180deg, #FFB100 0%, #EA7000 100%);
}

.home-service-grid li:nth-child(7) .background {
    background: linear-gradient(180deg, #6083FF 0%, #5743C7 100%);
}

.home-service-grid li:nth-child(8) .background {
    background: linear-gradient(180deg, #FFB100 0%, #4F556B 0.01%, #30364B 100%);
}

.home-service-grid li:nth-child(9) .background {
    background: linear-gradient(180deg, #3a9a0d 0%, #1fa310 0.01%, #007e00 100%);
}

.home-service-grid li:nth-child(10) .background {
    background: linear-gradient(180deg, #d788e7 0%, #d788e7 0.01%, #d788e7 100%);
}

.home-service-grid li:nth-child(11) .background {
    background: linear-gradient(180deg, #15B07B 0%, #287A6D 100%);
}

.home-service-grid li:nth-child(12) .background {
    background: linear-gradient(180deg, #6083FF 0%, #5743C7 100%);
}

.home-service-grid li:nth-child(13) .background {
    background: linear-gradient(180deg, #FFB100 0%, #EA7000 100%);
}
.home-service-grid li:nth-child(14) .background {
    background: linear-gradient(180deg, #6083FF 0%, #5743C7 100%);
}

/* Home Service Grid Style end */
.divider {
    height: 2px;
    background: var(--dark-shade-3, --dark-shade-3);
}

/* transaction history style start */
.transaction-history-btn {
    border: 1px solid var(--primary-dark-blue);
    color: var(--primary-dark-blue);
}

/* transaction history style end */


/* **************
Add Tenant page Style
**************/
#signUpForm .form-header .stepIndicator.active {
    font-weight: 600;
}

#signUpForm .form-header .stepIndicator.finish {
    font-weight: 600;
    color: #5a67d8;
}

#signUpForm .form-header .stepIndicator {
    width: 30px;
    height: 30px;
    background-color: var(--dark-shade-4);
    color: var(--dark-shade-2);
}

#signUpForm .form-header .stepIndicator.active {
    background-color: var(--dark-shade-4);
    color: var(--dark-shade-2);
    border: 1px solid var(--dark-shade-2)
}

#signUpForm .form-header .stepIndicator.finish {
    background-color: var(--form-active);
}

#signUpForm .form-header .stepIndicator::after {
    content: "";
    position: absolute;
    width: 76px;
    height: 3px;
    background-color: var(--dark-shade-3);
    left: 100%;
    top: 50%;

}

#signUpForm .form-header .stepIndicator.active::after {
    background-color: var(--dark-shade-3);
}

#signUpForm .form-header .stepIndicator.finish::after {
    background-color: var(--form-active);
}

#signUpForm .form-header .stepIndicator:last-child:after {
    display: none;
}

.invalid {
    border: 2px solid #ff1100 !important;
}

#signUpForm input.invalid {
    border: 2px solid #ff1100;
}

#signUpForm textarea.invalid {
    border: 2px solid #ff1100;
}

#signUpForm select.invalid {
    border: 2px solid #ff1100;
}

#signUpForm .step {
    display: none;
}

#signUpForm select option {
    font-size: 16px;
    color: var(--dark-shade-1);
    font-weight: 500;
}

.next-prev-wrapper {
    border-radius: 10px 10px 10px 10px;
    /* border: 1px solid var(--dark-shade-3); */
    background: #ffffff63;
}

.payment-select {
    border-radius: 5px;
    border: 3px solid var(--Primary-Solid);
    background: var(--solid-white);
}

.deslect-payment {
    border: 2px solid var(--dark-shade-3);
}

.payment-btn input {
    display: none;
}

/* input arrow icon change */
.selectDiv select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('../images/arrow-right.svg');
    background-size: 20px;
    background-position: calc(100% - 12px) center;
    background-repeat: no-repeat;

}

.selectDiv select:active,
.selectDiv select:focus {
    background-image: url('../images/arrow-right.svg');
    background-size: 20px;
    background-position: calc(100% - 12px) center;
    background-repeat: no-repeat;
}

.selectDiv select::-ms-expand {
    display: none;
}

.stepIndicator svg {
    fill: var(--solid-white);
}


/* **************
Single Buildings page Style
**************/

::-webkit-scrollbar {
    width: 0px;
    height: 0;
}

.custom-tooltip {
    display: inline-block;
}

.custom-tooltip::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px;
    background-color: var(--solid-white);
    color: var(--dark-shade-1);
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease;
    font-size: 16px;
    border-radius: 8px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), -1px 6px 6px 0px rgba(0, 0, 0, 0.09), -2px 13px 8px 0px rgba(0, 0, 0, 0.05), -4px 24px 10px 0px rgba(0, 0, 0, 0.01), -6px 37px 11px 0px rgba(0, 0, 0, 0.00);
}

.custom-tooltip:hover::before {
    visibility: visible;
    opacity: 1;
}

.expense-details tr:last-child {
    border-bottom: 0;
}


/* Photo Modal css start */

.show_image_popup {
    /* max-height: 350px; */
    height: auto;
    max-width: 400px;
    width: 100%;
    padding: 10px;
    border-radius: 12px;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.show_image_popup img {
    max-width: 100%;
    width: 100%;
    max-height: 300px;
    margin: 0 auto;
    object-fit: scale-down;
    margin-bottom: 14px;
}

.close-btn-area {
    text-align: right;
    margin-bottom: 5px;
    color: white;
}

.close-btn-area button {
    cursor: pointer;
}




/* .reportTable__container {
    .table-wrapper {
        overflow-x: auto;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    th,
    td {
        white-space: nowrap;
    }

    thead th {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    tbody th {
        position: sticky;
        left: 0;
        z-index: 3;
    }

    .sticky-col {
        position: sticky;
        left: 0;
        z-index: 3;
    }

    .sticky-col+.sticky-col {
        left: 45px;
    }

    .sticky-col+.sticky-col+.sticky-col {
        left: 88px;
    }

    tbody th.sticky-col {
    }

} */

/* Customize table */
.table-container-2 {
    margin-bottom: 50px;
    .table-wrapper {
        height: 500px;
        overflow: auto;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    }

    table {
        border-spacing: 0;
    }

    thead {
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    tbody {
        font-size: 14px;
    }

    th,
    td {
        /* padding: 12px 8px; */
        padding: 12px 0px 12px 8px;
        white-space: nowrap;
        border-bottom: 1px solid #C9D1DC;
    }

    tr:last-child td {
        border-bottom: none;
    }


  /* ===========STICKY ROW============ */

    tr.sticky {
        position: sticky;
        top: 0;
        z-index: 1;
    }



  /* ===========STICKY COLUMN========== */


    th.sticky,
    td.sticky {
        position: sticky;
        left: 0;
    }
    th.sticky+th.sticky,
    td.sticky+td.sticky {
        position: sticky;
        left: 43px;
    }
    th.sticky+th.sticky+th.sticky,
    td.sticky+td.sticky+td.sticky {
        position: sticky;
        left: 92px;
    }

}