/* -------------------------- */
/* ROOT */
/* -------------------------- */

:root {

    --color-white: #ffffff;
    --color-dark-gray: #80899b;
    --color-light-gray: #abb1bd;
    --bg-light-gray: #e4e6ea;
    --bg-dark-gray: #80899b;
    --bg-light-gray-hover: #d6d9df;
}


/* -------------------------- */
/* FONT SIZES */
/* -------------------------- */

.fs-1 {
    font-size: 1px;
}

.fs-2 {
    font-size: 2px;
}

.fs-3 {
    font-size: 3px;
}

.fs-4 {
    font-size: 4px;
}

.fs-5 {
    font-size: 5px;
}

.fs-6 {
    font-size: 6px;
}

.fs-7 {
    font-size: 7px;
}

.fs-8 {
    font-size: 8px;
}

.fs-9 {
    font-size: 9px;
}

.fs-10 {
    font-size: 10px;
}

.fs-11 {
    font-size: 11px;
}

.fs-12 {
    font-size: 12px;
}

.fs-13 {
    font-size: 13px;
}

.fs-14 {
    font-size: 14px;
}

.fs-15 {
    font-size: 15px;
}

.fs-16 {
    font-size: 16px;
}

.fs-17 {
    font-size: 17px;
}

.fs-18 {
    font-size: 18px;
}

.fs-19 {
    font-size: 19px;
}

.fs-20 {
    font-size: 20px;
}

.fs-21 {
    font-size: 21px;
}

.fs-22 {
    font-size: 22px;
}

.fs-23 {
    font-size: 23px;
}

.fs-24 {
    font-size: 24px;
}

.fs-25 {
    font-size: 25px;
}

.fs-26 {
    font-size: 26px;
}

.fs-27 {
    font-size: 27px;
}

.fs-28 {
    font-size: 28px;
}

.fs-29 {
    font-size: 29px;
}

.fs-30 {
    font-size: 30px;
}

.fs-31 {
    font-size: 31px;
}

.fs-32 {
    font-size: 32px;
}

.fs-33 {
    font-size: 33px;
}

.fs-34 {
    font-size: 34px;
}

.fs-35 {
    font-size: 35px;
}

.fs-36 {
    font-size: 36px;
}

.fs-37 {
    font-size: 37px;
}

.fs-38 {
    font-size: 38px;
}

.fs-39 {
    font-size: 39px;
}

.fs-40 {
    font-size: 40px;
}

.fs-41 {
    font-size: 41px;
}

.fs-42 {
    font-size: 42px;
}

.fs-43 {
    font-size: 43px;
}

.fs-44 {
    font-size: 44px;
}

.fs-45 {
    font-size: 45px;
}

.fs-46 {
    font-size: 46px;
}

.fs-47 {
    font-size: 47px;
}

.fs-48 {
    font-size: 48px;
}

.fs-49 {
    font-size: 49px;
}

.fs-50 {
    font-size: 50px;
}

.fs-51 {
    font-size: 51px;
}

.fs-52 {
    font-size: 52px;
}

.fs-53 {
    font-size: 53px;
}

.fs-54 {
    font-size: 54px;
}

.fs-55 {
    font-size: 55px;
}

.fs-56 {
    font-size: 56px;
}

.fs-57 {
    font-size: 57px;
}

.fs-58 {
    font-size: 58px;
}

.fs-59 {
    font-size: 59px;
}

.fs-60 {
    font-size: 60px;
}

.fs-61 {
    font-size: 61px;
}

.fs-62 {
    font-size: 62px;
}

.fs-63 {
    font-size: 63px;
}

.fs-64 {
    font-size: 64px;
}

.fs-65 {
    font-size: 65px;
}

.fs-66 {
    font-size: 66px;
}

.fs-67 {
    font-size: 67px;
}

.fs-68 {
    font-size: 68px;
}

.fs-69 {
    font-size: 69px;
}

.fs-70 {
    font-size: 70px;
}

.fs-71 {
    font-size: 71px;
}

.fs-72 {
    font-size: 72px;
}

.fs-73 {
    font-size: 73px;
}

.fs-74 {
    font-size: 74px;
}

.fs-75 {
    font-size: 75px;
}

.fs-76 {
    font-size: 76px;
}

.fs-77 {
    font-size: 77px;
}

.fs-78 {
    font-size: 78px;
}

.fs-79 {
    font-size: 79px;
}

.fs-80 {
    font-size: 80px;
}

.fs-81 {
    font-size: 81px;
}

.fs-82 {
    font-size: 82px;
}

.fs-83 {
    font-size: 83px;
}

.fs-84 {
    font-size: 84px;
}

.fs-85 {
    font-size: 85px;
}

.fs-86 {
    font-size: 86px;
}

.fs-87 {
    font-size: 87px;
}

.fs-88 {
    font-size: 88px;
}

.fs-89 {
    font-size: 89px;
}

.fs-90 {
    font-size: 90px;
}

.fs-91 {
    font-size: 91px;
}

.fs-92 {
    font-size: 92px;
}

.fs-93 {
    font-size: 93px;
}

.fs-94 {
    font-size: 94px;
}

.fs-95 {
    font-size: 95px;
}

.fs-96 {
    font-size: 96px;
}

.fs-97 {
    font-size: 97px;
}

.fs-98 {
    font-size: 98px;
}

.fs-99 {
    font-size: 99px;
}

.fs-100 {
    font-size: 100px;
}

/* -------------------------- */
/* WIDTH */
/* -------------------------- */

.w-1 {
    width: 1px;
}

.w-2 {
    width: 2px;
}

.w-3 {
    width: 3px;
}

.w-4 {
    width: 4px;
}

.w-5 {
    width: 5px;
}

.w-6 {
    width: 6px;
}

.w-7 {
    width: 7px;
}

.w-8 {
    width: 8px;
}

.w-9 {
    width: 9px;
}

.w-10 {
    width: 10px;
}

.w-11 {
    width: 11px;
}

.w-12 {
    width: 12px;
}

.w-13 {
    width: 13px;
}

.w-14 {
    width: 14px;
}

.w-15 {
    width: 15px;
}

.w-16 {
    width: 16px;
}

.w-17 {
    width: 17px;
}

.w-18 {
    width: 18px;
}

.w-19 {
    width: 19px;
}

.w-20 {
    width: 20px;
}

.w-21 {
    width: 21px;
}

.w-22 {
    width: 22px;
}

.w-23 {
    width: 23px;
}

.w-24 {
    width: 24px;
}

.w-25 {
    width: 25px;
}

.w-26 {
    width: 26px;
}

.w-27 {
    width: 27px;
}

.w-28 {
    width: 28px;
}

.w-29 {
    width: 29px;
}

.w-30 {
    width: 30px;
}

.w-31 {
    width: 31px;
}

.w-32 {
    width: 32px;
}

.w-33 {
    width: 33px;
}

.w-34 {
    width: 34px;
}

.w-35 {
    width: 35px;
}

.w-36 {
    width: 36px;
}

.w-37 {
    width: 37px;
}

.w-38 {
    width: 38px;
}

.w-39 {
    width: 39px;
}

.w-40 {
    width: 40px;
}

.w-41 {
    width: 41px;
}

.w-42 {
    width: 42px;
}

.w-43 {
    width: 43px;
}

.w-44 {
    width: 44px;
}

.w-45 {
    width: 45px;
}

.w-46 {
    width: 46px;
}

.w-47 {
    width: 47px;
}

.w-48 {
    width: 48px;
}

.w-49 {
    width: 49px;
}

.w-50 {
    width: 50px;
}

.w-51 {
    width: 51px;
}

.w-52 {
    width: 52px;
}

.w-53 {
    width: 53px;
}

.w-54 {
    width: 54px;
}

.w-55 {
    width: 55px;
}

.w-56 {
    width: 56px;
}

.w-57 {
    width: 57px;
}

.w-58 {
    width: 58px;
}

.w-59 {
    width: 59px;
}

.w-60 {
    width: 60px;
}

.w-61 {
    width: 61px;
}

.w-62 {
    width: 62px;
}

.w-63 {
    width: 63px;
}

.w-64 {
    width: 64px;
}

.w-65 {
    width: 65px;
}

.w-66 {
    width: 66px;
}

.w-67 {
    width: 67px;
}

.w-68 {
    width: 68px;
}

.w-69 {
    width: 69px;
}

.w-70 {
    width: 70px;
}

.w-71 {
    width: 71px;
}

.w-72 {
    width: 72px;
}

.w-73 {
    width: 73px;
}

.w-74 {
    width: 74px;
}

.w-75 {
    width: 75px;
}

.w-76 {
    width: 76px;
}

.w-77 {
    width: 77px;
}

.w-78 {
    width: 78px;
}

.w-79 {
    width: 79px;
}

.w-80 {
    width: 80px;
}

.w-81 {
    width: 81px;
}

.w-82 {
    width: 82px;
}

.w-83 {
    width: 83px;
}

.w-84 {
    width: 84px;
}

.w-85 {
    width: 85px;
}

.w-86 {
    width: 86px;
}

.w-87 {
    width: 87px;
}

.w-88 {
    width: 88px;
}

.w-89 {
    width: 89px;
}

.w-90 {
    width: 90px;
}

.w-91 {
    width: 91px;
}

.w-92 {
    width: 92px;
}

.w-93 {
    width: 93px;
}

.w-94 {
    width: 94px;
}

.w-95 {
    width: 95px;
}

.w-96 {
    width: 96px;
}

.w-97 {
    width: 97px;
}

.w-98 {
    width: 98px;
}

.w-99 {
    width: 99px;
}

.w-100 {
    width: 100px;
}


/* -------------------------- */
/* HEIGHT */
/* -------------------------- */

.h-1 {
    height: 1px;
}

.h-2 {
    height: 2px;
}

.h-3 {
    height: 3px;
}

.h-4 {
    height: 4px;
}

.h-5 {
    height: 5px;
}

.h-6 {
    height: 6px;
}

.h-7 {
    height: 7px;
}

.h-8 {
    height: 8px;
}

.h-9 {
    height: 9px;
}

.h-10 {
    height: 10px;
}

.h-11 {
    height: 11px;
}

.h-12 {
    height: 12px;
}

.h-13 {
    height: 13px;
}

.h-14 {
    height: 14px;
}

.h-15 {
    height: 15px;
}

.h-16 {
    height: 16px;
}

.h-17 {
    height: 17px;
}

.h-18 {
    height: 18px;
}

.h-19 {
    height: 19px;
}

.h-20 {
    height: 20px;
}

.h-21 {
    height: 21px;
}

.h-22 {
    height: 22px;
}

.h-23 {
    height: 23px;
}

.h-24 {
    height: 24px;
}

.h-25 {
    height: 25px;
}

.h-26 {
    height: 26px;
}

.h-27 {
    height: 27px;
}

.h-28 {
    height: 28px;
}

.h-29 {
    height: 29px;
}

.h-30 {
    height: 30px;
}

.h-31 {
    height: 31px;
}

.h-32 {
    height: 32px;
}

.h-33 {
    height: 33px;
}

.h-34 {
    height: 34px;
}

.h-35 {
    height: 35px;
}

.h-36 {
    height: 36px;
}

.h-37 {
    height: 37px;
}

.h-38 {
    height: 38px;
}

.h-39 {
    height: 39px;
}

.h-40 {
    height: 40px;
}

.h-41 {
    height: 41px;
}

.h-42 {
    height: 42px;
}

.h-43 {
    height: 43px;
}

.h-44 {
    height: 44px;
}

.h-45 {
    height: 45px;
}

.h-46 {
    height: 46px;
}

.h-47 {
    height: 47px;
}

.h-48 {
    height: 48px;
}

.h-49 {
    height: 49px;
}

.h-50 {
    height: 50px;
}

.h-51 {
    height: 51px;
}

.h-52 {
    height: 52px;
}

.h-53 {
    height: 53px;
}

.h-54 {
    height: 54px;
}

.h-55 {
    height: 55px;
}

.h-56 {
    height: 56px;
}

.h-57 {
    height: 57px;
}

.h-58 {
    height: 58px;
}

.h-59 {
    height: 59px;
}

.h-60 {
    height: 60px;
}

.h-61 {
    height: 61px;
}

.h-62 {
    height: 62px;
}

.h-63 {
    height: 63px;
}

.h-64 {
    height: 64px;
}

.h-65 {
    height: 65px;
}

.h-66 {
    height: 66px;
}

.h-67 {
    height: 67px;
}

.h-68 {
    height: 68px;
}

.h-69 {
    height: 69px;
}

.h-70 {
    height: 70px;
}

.h-71 {
    height: 71px;
}

.h-72 {
    height: 72px;
}

.h-73 {
    height: 73px;
}

.h-74 {
    height: 74px;
}

.h-75 {
    height: 75px;
}

.h-76 {
    height: 76px;
}

.h-77 {
    height: 77px;
}

.h-78 {
    height: 78px;
}

.h-79 {
    height: 79px;
}

.h-80 {
    height: 80px;
}

.h-81 {
    height: 81px;
}

.h-82 {
    height: 82px;
}

.h-83 {
    height: 83px;
}

.h-84 {
    height: 84px;
}

.h-85 {
    height: 85px;
}

.h-86 {
    height: 86px;
}

.h-87 {
    height: 87px;
}

.h-88 {
    height: 88px;
}

.h-89 {
    height: 89px;
}

.h-90 {
    height: 90px;
}

.h-91 {
    height: 91px;
}

.h-92 {
    height: 92px;
}

.h-93 {
    height: 93px;
}

.h-94 {
    height: 94px;
}

.h-95 {
    height: 95px;
}

.h-96 {
    height: 96px;
}

.h-97 {
    height: 97px;
}

.h-98 {
    height: 98px;
}

.h-99 {
    height: 99px;
}

.h-100 {
    height: 100px;
}

/* -------------------------- */
/* BACKGROUND COLORS */
/* -------------------------- */

.bg-light-gray {
    background-color: var(--bg-light-gray) !important;
}

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

/* -------------------------- */
/* UTILS */
/* -------------------------- */


#activity-card .card-body {
    padding: 0.80rem !important;
}

#reservations-table thead th {
    border-top: 0px;
    border-bottom: 0px;
}

#reservations-table tbody tr {
    border-top: 0px;
    border-bottom: 2px solid var(--bg-light-gray);
}

#reservations-table tbody tr td {
    border-top: 0px;
}

#reservations-table thead>tr>th:first-child {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}

#reservations-table thead tr th:last-child {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

.card {
    border-radius: 0.80rem !important;
}

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

.doughnut-pill {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-light-gray);
    width: 20px;
    height: 20px;
    border-radius: 50% !important;
    padding: 1rem !important;
    cursor: pointer;
}

.user-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-light-gray);
    width: 20px;
    height: 20px;
    border-radius: 50% !important;
    padding: 1rem !important;
}



/* -------------------------- */
/* BUTTONS */
/* -------------------------- */

.btn-rounded {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-light-gray);
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    padding: 1rem !important;
    cursor: pointer;
}

.btn-rounded-pill {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-light-gray);
    width: auto;
    height: 40px;
    border-radius: 20px !important;
    padding-right: 30px;
    padding-left: 30px;
    cursor: pointer;
}

.btn-rounded-pill:hover {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-light-gray-hover);
    width: auto;
    height: 40px;
    border-radius: 20px !important;
    padding-right: 30px;
    padding-left: 30px;
    cursor: pointer;
}

.btn-rounded:hover {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-light-gray-hover);
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    padding: 1rem !important;
    cursor: pointer;
}

.btn-rounded:hover>span i {
    color: var(--color-white) !important;
}


.btn-x-mark {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    color: var(--bs-btn-close-color);
    background: transparent var(--bs-btn-close-bg) center / 1em auto no-repeat;
    border: 0;
    border-radius: .375rem;
    opacity: var(--bs-btn-close-opacity);
}


.offcanvas-body ul li a {
    color: var(--color-white)
}

.offcanvas-body .collapse-item {
    color: var(--bs-text-dark);
}

.offcanvas-body .collapse-inner {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.offcanvas-body .collapse-inner h6 {
    color: var(--color-light-gray)
}

/* IMPORTANT FOR DROPDOWN MENU IN TABLE */
ul.dropdown-menu.show {
    inset: auto 0px -25px auto ;
    transform: unset ;
}

/* -------------------------- */
/* SHADOWS */
/* -------------------------- */

.shadow-tailwind {
    /* box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px; */
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}


/* -------------------------- */
/* LINE HEIGHT */
/* -------------------------- */

.line-h45 {
    line-height: 45px !important;
}

/* -------------------------- */
/* TEXT COLORS */
/* -------------------------- */

.text-dark-gray {
    color: var(--color-dark-gray) !important;
}

.text-light-gray {
    color: var(--color-light-gray) !important;
}

/* -------------------------- */
/* DATATABLE STYLING */
/* -------------------------- */

.page-item.active .page-link {
    background-color: var(--bg-light-gray) !important;
    border-color: var(--bg-light-gray) !important;
    color: var(--color-dark-gray) !important;
    border-radius: 8px;
}

.page-item.disabled .page-link {
    border: 0px !important;
}

.page-item .page-link {
    border: 0px !important;
    color: var(--color-dark-gray) !important;
}

.page-link.previous {
    position: relative;
    text-indent: -9999px;
}

.page-link.next {
    position: relative;
    text-indent: -9999px;
}

.page-link.previous::before {
    content: "\f177";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-indent: 0;
}

.page-link.next::before {
    content: "\f178";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-indent: 0;
}

.page-link.first {
    position: relative;
    text-indent: -9999px;
}

.page-link.last {
    position: relative;
    text-indent: -9999px;
}

.page-link.first::before {
    content: "\f100";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-indent: 0;
}

.page-link.last::before {
    content: "\f101";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-indent: 0;
}

/* -------------------------- */
/* ADD GUEST STYLING */
/* -------------------------- */