:root {
    --theme-clr: #00A99D;
    --body-bg: ;
    --dark-page-bg: #040505;
    --primary-clr: #282F36;
    /* #707070 since 5 Sep 2026 (was #7E7E7E, 4.06:1 on white — failing AA for every caption set in it).
       #707070 is 4.95:1 on white and 4.62:1 on the #f6f7f8 panel, the same neutral hue, a shade darker.
       tests/Unit/RacePlan/PlanContrastTest.php holds the line. */
    --medium-gray: #707070;
    --light-gray: #B8B8B8;
    --page-bg: #F5F5F5;
    --gray-bg: #E3E3E3;
    --c9-gray: #C9C9C9;
    --dd-gray: #DDDDDD;
    --f6-clr: #F6F6F6;
    --gray-58: #585858;
    --gray-5f: #5F5F5F;
    --gray-54: #545454;
    --gray-b0: #B0B0B0;
    --gray-f4: #f4f4f4;
    --gray-7c: #7E7C7C;
    --gray-8c: #8F8C8C;
    --footer-bg: var(--gray-f4);
    --footer-text-clr: var(--gray-54);
    --greyish-blue: #5C7FA3;
    --primary-font: 'Borna';
    --secondary-font: 'Inter';
    --pp-font: 'Poppins';
    --sg-font: "Space Grotesk", sans-serif;
    --border-color-1: #D4D4D4;
    --blue-clr: #1D97DE;
    --red-clr: #FF0000;
    --await-clr: #FF6B00;
    --bs-custom-green: #21972D;
    --bs-custom-red: #DC3545;
    --spacer: 24px;
    --header-height: 0px;
}

/* General css start */

body {
    font-family: var(--primary-font);
}
.primary-bg {
    background: var(--primary-clr);
}
.theme-bg {
    background: var(--theme-clr) !important;
}
.text-theme {
    color: var(--theme-clr) !important;
}
.text-primary {
    color: var(--primary-clr) !important;
}
.text-gray {
    color: var(--medium-gray) !important;
}
.text-greyish-blue {
    color: var(--greyish-blue) !important;
}
.bdr-primary {
    border-color: var(--primary-clr) !important;
}
.primary-btn {
    padding: 13px 16px;
    border: 1px solid var(--primary-clr);
    border-radius: 8px;
    background: var(--primary-clr);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--primary-font);
    color: var(--bs-white);
    line-height: 16px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0px;
}
.primary-outline-btn {
    padding: 13px 16px;
    border: 1px solid var(--primary-clr);
    border-radius: 8px;
    background: var(--bs-white);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--primary-font);
    color: var(--primary-clr);
    line-height: 16px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0px;
}
.btn-primary-bg {
    background: var(--primary-clr) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--primary-clr) !important;
    transition: all 0.3s ease-in-out;
    color: var(--bs-white) !important;
}
.btn-primary-bg:hover {
    background: var(--primary-clr);
    color: var(--bs-white) !important;
}
.btn-theme-bg {
    background: var(--theme-clr) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--theme-clr) !important;
    transition: all 0.3s ease-in-out;
    color: var(--bs-white) !important;
}
.btn-theme-bg:hover {
    background: var(--theme-clr);
    color: var(--bs-white) !important;
}
.btn-primary-outline {
    color: var(--primary-clr) !important;
    background: var(--bs-white) !important;
    border: 1px solid var(--primary-clr);
    transition: all 0.3s ease-in-out;
}
.btn-primary-outline:hover {
    background: var(--primary-clr) !important;
    color: var(--bs-white) !important;
}
.sub-primary-btn {
    padding: 16px 40px;
    background: var(--bs-white);
    text-align: center;
    font-size: 19px;
    font-weight: 600;
    font-family: var(--pp-font);
    line-height: 19px;
    color: var(--sub-primary-clr);
    border: 1px solid var(--sub-primary-clr);
    text-decoration: none;
    border-radius: 10px;
    display: inline-block;
    transition: all 0.3s ease-in-out;
}
.sub-primary-btn:hover {
    background: var(--sub-primary-clr) !important;
    color: var(--bs-white) !important;
}

.outline_btn_style {
    padding: 15.5px 16px;
    border: 1px solid var(--primary-clr);
    border-radius: 8px;
    background: var(--bs-white);
    font-size: 14px;
    font-weight: 700;
    font-family: var(--primary-font);
    color: var(--primary-clr);
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-width: 128px;
}

.gray_outline {
    color: var(--medium-gray);
    border-color: var(--light-gray);
    font-weight: 500;
}
.underline-btn {
    padding: 0px;
    border: 0px;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-5f);
    text-decoration: underline;
    text-underline-offset: 5px;
}

.clear_btn {
    padding: 0px;
    border: 0px;
    background: var(--bs-white);
    font-size: 16px;
    font-weight: 600;
    font-family: var(--primary-font);
    color: var(--medium-gray);
    margin-left: auto;
}
.collapse_arrow_btn {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0px;
    padding: 0px;
    border-radius: 2px;
    background: var(--bs-white);
    transition: all 0.2s ease-in;
}
.collapse_arrow_btn:hover {
    background: var(--gray-bg);
}
.collapse_arrow_btn img{
    transition: all 0.2s ease-in;
}
.collapse_arrow_btn.active img{
    transform: rotate(180deg);
}

.remove_circle_btn {
    width: 18px;
    height: 18px;
    border: 0;
    background: var(--bs-white);
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
}

.w-48-bg {
    width: 48px;
    height: 48px;
    background: var(--gray-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
}
.w-48-bg img {
    width: 27px;
    height: 27px;
}
.min-w-auto {
    min-width: auto !important;
}

img {
    max-width: 100%;
    max-height: 100%;
}
.br-8 {
    border-radius: 8px;
}
.br-10 {
    border-radius: 10px;
}
.br-15 {
    border-radius: 15px;
}
.br-20 {
    border-radius: 20px;
}
.br-60 {
    border-radius: 60px;
}
.input-field {
    position: relative;
}
span.error {
    font-size: 13px;
    color: var(--bs-red);
}
.spacer {
    padding: var(--spacer) 0px;
}
.fs-14 {
    font-size: 14px !important;
}
.fs-18 {
    font-size: 18px !important;
}
.fs-24 {
    font-size: 24px !important;
}
.form-select.selectize-control {
    padding-right: 36px !important;
}
.form-select.selectize-control::before {
    position: absolute;
    content: "";
    top: 50%;
    right: 18px;
    width: 12px;
    height: 8px;
    background: url(/assets/images/icons/down-arrow-black-icon.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transform: translateY(-50%);
}
.search_location_field input {
    padding-right: 42px !important;
}
.search_location_field .search-icon {
    right: 24px;
    left: auto;
    width: 16px;
    height: 20px;
    display: flex;
}

/* General css end */

.main_heading_blk {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}
.heading_flex {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 5px;
}
.heading_flex :is(h1, .h1) {
    font-size: 32px;
    font-weight: 700;
    color: var(--bs-black);
    margin-bottom: 0px;
}
.heading_sport_icon {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sub_heading h2 {
    font-weight: 600;
    color: var(--primary-clr);
    margin-bottom: 0px;
}
.flex-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.flex-end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.flex_between_blk {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.swiper-pagination-bullet {
    background: transparent !important;
    opacity: 1 !important;
    border: 1px solid var(--bs-white);
}
.swiper-pagination-bullet-active {
    background: var(--bs-white) !important;
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 2px !important;
}


/* Custom datepicker css start */

.daterangepicker .ranges li.active, .daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: var(--primary-clr) !important;
}
.daterangepicker td.active:hover {
    color: var(--bs-white) !important;
}
.daterangepicker td.in-range {
    background-color: var(--page-bg) !important;
    color: var(--primary-clr) !important;
}
.applyBtn {
    background: var(--primary-clr) !important;
    border-color: var(--primary-clr) !important;
}
td.active.end-date.in-range.available {
    background-color: var(--primary-clr) !important;
    color: var(--bs-white) !important;
}

/* Custom datepicker css end */

.breadcrumb_wrapper .breadcrumb {
    align-items: center;
}
.breadcrumb_wrapper .breadcrumb li.breadcrumb-item a {
    font-size: 14px;
    font-weight: 400;
    color: var(--medium-gray);
    text-decoration: none;
}
.breadcrumb_wrapper .breadcrumb li.breadcrumb-item.active {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-clr) !important;
}

.outline_field_wrapper {
    padding: 24px;
    margin-top: 15px;
    border: 1px solid var(--dd-gray);
    border-radius: 8px;
}
.outline_field_wrapper .sub_heading {
    margin-bottom: 30px;
}

.form-calc-col {
    width: 250px;
    position: relative;
}
.time_field_blk {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
}
.shadow_field_wrapper {
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0px 2px 8px rgb(0 0 0 / 10%);
}
.shadow_field_wrapper:not(:last-child) {
    margin-bottom: 30px;
}
.add_more_btn_blk {
    margin-top: 18px;
}
.add_more_btn {
    padding: 0px;
    border: 0px;
    background: var(--bs-white);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--blue-clr);
}
span.add_icon {
    width: 11px;
    height: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
}
span.add_text {
    font-size: 14px;
    font-weight: 600;
    color: var(--blue-clr);
    font-family: var(--primary-font);
}
.selectize-input {
    padding: 0px !important;
    border: 0px !important;
    box-shadow: none !important;
    min-height: 32px !important;
}
.selectize-input .item {
    padding: 6px 8px !important;
    border: 1px solid var(--gray-bg) !important;
    background: var(--page-bg) !important;
    font-size: 12px !important;
    font-weight: 600;
    color: var(--medium-gray) !important;
    margin-bottom: 0px !important;
}
.selectize-control.plugin-remove_button .item .remove {
    background: var(--light-gray) !important;
    color: var(--page-bg) !important;
    border-radius: 50% !important;
    width: 12px !important;
    height: 12px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-right: 8px !important;
}
.form-control.selectize-control {
    height: 55px;
    padding: 10px 24px !important;
}

.outline_wrapper {
    border: 1px solid var(--gray-bg);
    border-radius: 8px;
    max-width: 694px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
}
.outline_wrapper:not(:last-child) {
    margin-bottom: 24px;
}
.outline_header_blk {
    padding: 16px 24px;
    border-bottom: 1px solid var(--gray-bg);
}
.outline_inner_wrapper {
    padding: 16px 24px;
}
.outline_header_blk h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-clr);
    margin-bottom: 0px;
}
.outline_header_blk p {
    font-size: 12px;
    font-family: var(--primary-font);
    color: var(--medium-gray);
}
.outline_card_info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.outline_card_info:not(:last-child) {
    margin-bottom: 16px;
}
.outline_wrapper :is(h3, .h3), .outline_card_info h3 {
    font-size: 16px;
    font-weight: 500;
    color: var(--medium-gray);
    margin-bottom: 0px;
}
.outline_card_info p {
    font-size: 16px;
    color: var(--gray-8c);
    margin-bottom: 0px;
}
.outline_card_content p:not(:last-child) {
    margin-bottom: 12px;
}

.bank_card_info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}
span.bank_card_icon {
    width: 44px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f4f4f4;
    border-radius: 6px;
}
span.bank_card_icon img {
    object-fit: contain;
}
.plan_detail_and_action {
    max-width: 432px;
}
.plan_detail_card_info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.plan_detail_card_info p {
    font-size: 16px;
    font-weight: 500;
    color: var(--medium-gray);
    margin-bottom: 0px;
    text-align: center;
    width: 100%;
}
.change_plan_action_blk {
    max-width: 246px;
    width: 100%;
    margin: 0 auto;
}
.remove_btn_wrapper {
    margin-bottom: 30px;
    display: flex;
    justify-content: end;
}
.remove_tab_btn, .remove_div_btn {
    padding: 5px 15px;
    border: 1px solid var(--bs-red);
    font-size: 12px;
    font-weight: 600;
    border-radius: 5px;
    background: var(--bs-white);
    color: var(--bs-red);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
span.remove_icon {
    display: flex;
    justify-content: center;
    align-items: center;
}
.stars_preview li.checked svg path {
    fill: var(--theme-clr);
    stroke: var(--theme-clr);
}
.new_tab_blk ul.nav {
    display: inline-flex;
    border-radius: 8px;
}
.new_tab_blk .nav-link {
    font-size: 16px;
    color: var(--medium-gray);
    min-width: 150px;
    padding: 16px;
    border-radius: 0px;
    border: 1px solid var(--light-gray);
    transition: all 0.3s ease-in;
}
.new_tab_blk .nav-link.active {
    background: var(--bs-black) !important;
    border-color: var(--bs-black) !important;
}
.new_tab_blk li.nav-item:first-child .nav-link {
    border-radius: 8px 0px 0px 8px;
}
.new_tab_blk li.nav-item:last-child .nav-link {
    border-radius: 0px 8px 8px 0px;
}
.new_tab_blk li.nav-item:not(:last-child) .nav-link {
    border-right: 0px;
}
.reviews_wrapper .outline_card_info p {
    font-size: 20px;
    text-align: justify;
    line-height: 30.04px;
    word-break: break-word;
}
.review_user_name {
    font-size: 18px !important;
    font-weight: 500 !important;
    color: var(--bs-black) !important;
}
.review_date {
    font-size: 16px !important;
}
.reviews_wrapper .stars_preview {
    gap: 14px !important;
}
.review_event_name {
    font-size: 16px !important;
    font-family: var(--sg-font);
}
.mdl_review_reply_blk {
    margin-bottom: 40px;
}
.mdl_review_reply_blk .outline_card_info p {
    font-size: 14px;
    line-height: 16.98px;
    text-align: justify;
}
.reply_action_field_blk {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--f6-clr);
    padding: 10px 24px;
    border-radius: 0px 0px 8px 8px;
}
.reply_action_field_blk input {
    padding: 0px 16px 0px 0px;
    background: var(--f6-clr);
    border: 0px;
    border-radius: 0px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-clr);
    font-family: var(--primary-font);
    box-shadow: none !important;
}
.reply_action_field_blk input:focus {
    background: var(--f6-clr);
}
.reply_action_field_blk input::placeholder {
    color: #9C9C9C;
}
.reply_send_btn {
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0px;
    background: var(--f6-clr);
}

.switch_toggle_box {
    display: flex;
    justify-content: center;
    align-items: center;
}
.switch_toggle_box input + label {
    width: 68px;
    height: 24px;
    background: var(--bs-white);
    border-radius: 30px;
    margin: 0px;
    position: relative;
    border: 1px solid var(--medium-gray);
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}
.switch_toggle_box input + label::before {
    width: 18px;
    height: 18px;
    background: var(--medium-gray);
    position: absolute;
    content: "";
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    border-radius: 50%;
    transition: all 0.5s ease-in-out;
}
.switch_toggle_box input + label::after {
    position: absolute;
    content: "Inactive";
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    font-size: 10px;
    font-weight: 600;
    color: var(--medium-gray);
    width: calc(100% - (18px + 4px));
    text-align: center;
    transition: all 0.5s ease-in-out;
}
.switch_toggle_box input:checked + label {
    background: var(--primary-clr);
    border-color: var(--primary-clr);
}
.switch_toggle_box input:checked + label::before {
    background: var(--bs-white);
    left: calc(100% - 20px);
}
.switch_toggle_box input:checked + label::after {
    content: "Active";
    color: var(--bs-white);
    right: 20px;
}

.status_badge {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--primary-font);
}
.badge_trendy_green {
    color: #748019;
    background: #CBCB0142;
}
.badge_platinum {
    color: var(--bs-black);
    background: #9898981F;
}
.badge_mid_green {
    color: #4CA74C;
    background: #80D4861F;
}
.badge_celestial_blue {
    color: #4898BB;
    background: #479AD61F;
}
.badge_dull_orange {
    color: #C87F35;
    background: #FFEFE3;
}
.badge_active {
    color: var(--bs-custom-green);
    background: rgb(33 151 45 / 12%);
}
.badge_inactive {
    color: #DF3333;
    background: #FFE9E9;
}

.outline_table_wrapper {
    border-radius: 16px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
}
.outline_table_wrapper table tbody tr:last-child td {
    border-bottom: 0px;
}
.outline_table_wrapper table th {
    background: #F8F9FA;
}
.outline_table_wrapper table :is(th, td) {
    padding: 17px 34px;
    font-weight: 400;
    vertical-align: middle;
}
.combine_flex {
    display: flex;
    justify-content: flex-start;
    border: 1px solid var(--c9-gray);
    border-radius: 10px;
}
.combine_flex input {
    border-width: 0px 1px 0px 0px !important;
    border-radius: 10px 0px 0px 10px !important;
    width: calc(100% - 180px);
}
.combine_flex select {
    border-width: 0px 0px 0px 0px !important;
    border-radius: 0px 10px 10px 00px !important;
    width: 180px;
}
.upload_csv_blk {
    width: 250px !important;
    height: 55px !important;
}
.upload_csv_blk label {
    flex-direction: row !important;
}