@font-face {
    font-family: 'DMSans Medium';
    src: url('../fonts/DMSans-Medium.woff2') format('woff2'), url('../fonts/DMSans-Medium.woff') format('woff'), url('../fonts/DMSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DMSans MediumItalic';
    src: url('../fonts/DMSans-MediumItalic.woff2') format('woff2'), url('../fonts/DMSans-MediumItalic.woff') format('woff'), url('../fonts/DMSans-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope Bold';
    src: url('../fonts/Manrope-Bold.woff2') format('woff2'), url('../fonts/Manrope-Bold.woff') format('woff'), url('../fonts/Manrope-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope ExtraBold';
    src: url('../fonts/Manrope-ExtraBold.woff2') format('woff2'), url('../fonts/Manrope-ExtraBold.woff') format('woff'), url('../fonts/Manrope-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope ExtraLight';
    src: url('../fonts/Manrope-ExtraLight.woff2') format('woff2'), url('../fonts/Manrope-ExtraLight.woff') format('woff'), url('../fonts/Manrope-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope Light';
    src: url('../fonts/Manrope-Light.woff2') format('woff2'), url('../fonts/Manrope-Light.woff') format('woff'), url('../fonts/Manrope-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope Medium';
    src: url('../fonts/Manrope-Medium.woff2') format('woff2'), url('../fonts/Manrope-Medium.woff') format('woff'), url('../fonts/Manrope-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope Regular';
    src: url('../fonts/Manrope-Regular.woff2') format('woff2'), url('../fonts/Manrope-Regular.woff') format('woff'), url('../fonts/Manrope-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope SemiBold';
    src: url('../fonts/Manrope-SemiBold.woff2') format('woff2'), url('../fonts/Manrope-SemiBold.woff') format('woff'), url('../fonts/Manrope-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {

    --text-light: #fff;
    --text-dark: #192226;
    --green: #00BF8F;
    --orange: #FF6040;
    --black-30: rgb(25 34 38 / 30%);
    --black-18: rgb(25 34 38 / 18%);
    --black-12: rgb(25 34 38 / 12%);
    --black-9: rgb(25 34 38 / 9%);
    --black-6: rgb(25 34 38 / 6%);
    --white-30: rgb(255 255 255 / 30%);
    --white-18: rgb(255 255 255 / 18%);
    --white-8: rgba(217, 217, 217, 0.648);
    --white-12: rgb(255 255 255 / 12%);
    --white-6: rgb(255 255 255 / 6%);
    --white-9: rgb(255 255 255 / 9%);
    --gray: #8B9092;

    --longside-lower-tier: #ff4da5;
    --longside-upper-tier: #FFC610;
    --longside-middle-tier: #21c2ff;
    --longside-lower-tier-central: #cd3dc1;
    --longside-middle-tier-central: #0eef5a;
    --longside-upper-tier-central: #2e57ff;

    --shortside-lower-tier: #21c2ff;
    --shortside-upper-tier: #0eef5a;
    --vip-packages: #FAD961;
    --away-fans-section: #ff6839;
/*     
    --hover-opacity: 0.7;
    --hover-bg-opacity: 0.15;
    --hover-lighten-amount: 90%; */

    /* --longside-lower-tier: #28c8fb;
    --longside-upper-tier: #28EB7C;
    --shortside-lower-tier: #FF64D2;
    --shortside-upper-tier: #415AD2;
    --vip-packages: #FAD961;
    --away-fans-section: #FF6E4B;
    --9876qwerty: #FF40CF;
    --longside-lower-tier-central: #CC3DC0;
    --longside-upper-tier-central: #2E56FF;
    --shortside-middle-tier: #CC3DC0;
    --longside-middle-tier: #22C1FF;
    --longside-middle-tier-central: #0FEF5A; */
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Manrope Medium';
    font-weight: 500;
}

.container {
    max-width: 1420px;
    padding: 0px;
    width: calc(100% - 40px);
    margin: 0 auto;
}
.bg-longside-lower-tier {
    background-color: var(--longside-lower-tier) !important;
}

.bg-longside-upper-tier {
    background-color: var(--longside-upper-tier) !important;
}

.bg-longside-middle-tier {
    background-color: var(--longside-middle-tier) !important;
}
.bg-shortside-lower-tier {
    background-color: var(--shortside-lower-tier) !important;
}

.bg-shortside-upper-tier {
    background-color: var(--shortside-upper-tier) !important;
}

.bg-vip-packages {
    background-color: var(--vip-packages) !important;
}

.bg-away-fans-section {
    background-color: var(--away-fans-section) !important;
}

.bg-longside-lower-tier-central {
    background-color: var(--longside-lower-tier-central) !important;
}
.bg-longside-middle-tier-central {
    background-color: var(--longside-middle-tier-central) !important;
}

.bg-longside-upper-tier-central {
    background-color: var(--longside-upper-tier-central) !important;
}

.cursor-pointer {
    cursor: pointer;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-column-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

ul.no-bullet {
    list-style-type: none;
}

a {
    text-decoration: none;
    color: var(--text-dark);
}

.btn-common {
    font-weight: 700;
    padding: 7px 14px !important;
    font-size: 15px !important;
    line-height: 15px !important;
    border-radius: 5px;
    background-color: var(--text-dark);
    color: var(--text-light);
}

body.dark-mode .btn-common {
    background-color: var(--text-light) !important;
    color: var(--text-dark) !important;

}

.DMSans-Medium {
    font-family: 'DMSans Medium';
    font-weight: 500;
}

.DMSans-MediumItalic {
    font-family: 'DMSans Medium';
    font-weight: 500;
    font-style: italic;
}

.font-ExtraLight {
    font-family: 'Manrope ExtraLight';
    font-weight: 200;
}

.font-Light {
    font-family: 'Manrope Light';
    font-weight: 300;
}

.font-Regular {
    font-family: 'Manrope Regular';
    font-weight: 400;
}

.font-Medium {
    font-family: 'Manrope Medium';
    font-weight: 500;
}

.font-SemiBold {
    font-family: 'Manrope SemiBold';
    font-weight: 600;
}

.font-Bold {
    font-family: 'Manrope Bold';
    font-weight: 700;
}

.font-ExtraBold {
    font-family: 'Manrope ExtraBold';
    font-weight: 800;
}

.font-12 {
    font-size: 12px !important;
    line-height: 12px !important;
}

.font-14 {
    font-size: 14px !important;
    line-height: 20px !important;
}

.font-15 {
    font-size: 15px;
    line-height: 20px;
}

.font-16 {
    font-size: 16px;
    line-height: 22px;
}

.font-18 {
    font-size: 18px !important;
    line-height: 23px !important;
}

.font-20 {
    font-size: 20px !important;
    line-height: 24px !important;
}

.font-22 {
    font-size: 22px !important;
    line-height: 28px !important;
}

.font-30 {
    font-size: 30px !important;
    line-height: 35px !important;
}

.leading-21 {
    line-height: 1.3125rem !important;
}

.leading-27 {
    line-height: 1.6875rem !important;
}

.py-6 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.py-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.py-30 {
    padding-top: 30px;
    padding-bottom: 30px;
}

.py-40 {
    padding-top: 40px;
    padding-bottom: 40px;
}

.pt-15 {
    padding-top: 0.9375rem;
}

.pt-35 {
    padding-top: 35px;
}

.ps-6 {
    padding-left: 6px;
}
.p-0_5{
    padding: 0.125rem;
}
.p-10 {
    padding: 10px;
}

.p-15 {
    padding: 15px;
}

.px-10 {
    padding-left: 10px;
    padding-right: 10px;
}

.px-15 {
    padding-left: 15px;
    padding-right: 15px;
}

.pyc-5 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.px-12 {
    padding-top: 12px;
    padding-bottom: 12px;
}

.py-15 {
    padding-left: 15px;
    padding-right: 15px;
}

.p-14 {
    padding: 14px;
}

.p-20 {
    padding: 20px;
}

.pb-7 {
    padding-bottom: 7px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pb-12 {
    padding-bottom: 0.75rem;
}

.pb-15 {
    padding-bottom: 15px;
}

.pb-17 {
    padding-bottom: 1.0625rem;
}

.pb-20 {
    padding-bottom: 20px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-20 {
    margin-top: 20px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 20px;
}

.mt-35 {
    margin-top: 35px;
}

.mb-40 {
    margin-bottom: 40px;
}

.ml-2_5{
    margin-left: 0.1563rem;
}
.mr-11p{
    margin-right: 0.6875rem;
}

.gap-30 {
    gap: 1.875rem;
}

.gap-10 {
    gap: 0.625rem;
}

.gap-y-7 {
    row-gap: 0.4375rem;
}

.gap-y-5 {
    row-gap: 0.3125rem;
}

.gp-5 {
    gap: 0.3125rem;
}

.gp-2_5 {
    gap: 0.1563rem;
}

.gp-2{
    gap: 0.125rem;
}

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

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

body.dark-mode .bg-light {
    background-color: var(--text-dark) !important;
}
.bg-black-6 {
    background-color: var(--black-6) !important;
}

.bg-white-9 {
    background-color: var(--white-9) !important;
}

.bg-black-30 {
    background-color: var(--black-30) !important;
}

.bg-white-6 {
    background-color: var(--white-6) !important;
}


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

.bg-green {
    background-color: var(--green);
}
.bg-hover-green:hover {
    background-color: var(--green) !important;
}

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

.mb-10 {
    margin-bottom: 10px;
}

.me-15 svg {
    margin-right: 15px;
}

.pc-5 {
    padding: 5px;
}

.min-height-200 {
    min-height: 6.25rem;
}
.min-height-200 {
    max-height: 8.25rem;
}

.max-height-100 {
    max-height: 6.25rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 10px;
}

h1 {
    font-size: 30px;
    line-height: 35px;
    font-family: 'Manrope Bold';
}

h2 {
    font-size: 22px;
    line-height: 30px;
}

.order-evnt-heading img {
    max-width: 18px;
}

ul.list-type-none {
    list-style-type: none !important;
}

.pm-7 p:not(:last-child) {
    margin-bottom: 5px !important;
}

.pm-7 p:last-child {
    margin-bottom: 0px !important;
}

.border-top-black-9 {
    border-top: 1px solid var(--white-9);
    ;
}

section.section-divider {
    border-top: 1px solid var(--white-9);
    height: 1px;
}

.text-orange,
.text-orange * {
    color: var(--orange) !important;
}

.text-green,
.text-green * {
    color: var(--green) !important;
}

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

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100%-1.25rem);
}

.space-between {
    justify-content: space-between;
}

.num-30 {
    font-size: 30px;
    line-height: 30px;
}
.border-orange {
    border: 1px solid var(--orange) !important;
}
.text-orange{
    color: var(--orange) !important;
}
.bg-orange{
    background-color: var(--orange)!important;
}
.border-radius-12 {
    border-radius: 12px !important;
}

.border-radius-9 {
    border-radius: 9px;
}

.border-radius-5 {
    border-radius: 5px;
}

.border-white-12 {
    border-color: var(--white-12) !important;
}

.border-width-1 {
    border-width: 1px;
    border-style: solid;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

input[type="search"] {
    -moz-appearance: textfield;
}

input[type="search"]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input:focus-visible {
    outline: none !important;
}

body .custom-scroll-bar::-webkit-scrollbar {
    width: 6px;
}

body .custom-scroll-bar::-webkit-scrollbar-track {
    background: var(--black-18);
}

body .custom-scroll-bar::-webkit-scrollbar-thumb {
    background: var(--gray-50);
}

body ::-webkit-scrollbar-corner {
    background: transparent;
}
body ::-webkit-resizer {
    background: transparent;
}

.min-height-230 {
    min-height: 230px;
}

.jc-space-between {
    justify-content: space-between;
}

/* Start custom Select Default Styling */
.custom-select {
    position: relative;
    min-width: max-content;
    width: inherit;
}

.custom-select .selected {
    cursor: pointer;
    min-width: max-content;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9.717" height="6" viewBox="0 0 9.717 6"><path id="Path_30" data-name="Path 30" d="M9.752,6,8.61,7.142l3.709,3.717L8.61,14.575l1.142,1.142,4.858-4.858Z" transform="translate(15.717 -8.61) rotate(90)" fill="%23fff"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px auto;
    padding-left: 10px;
    padding-right: 28px;
    width: 100%;
    border-width: 1px;
}

.custom-select.light-select-dd span {
    color: var(--text-dark);
}

body.light-mode .custom-select .selected,
.custom-select.light-select-dd .selected {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9.717" height="6" viewBox="0 0 9.717 6"><path id="Path_30" data-name="Path 30" d="M9.752,6,8.61,7.142l3.709,3.717L8.61,14.575l1.142,1.142,4.858-4.858Z" transform="translate(15.717 -8.61) rotate(90)" fill="%23192226"/></svg>');
}

.custom-select .options {
    position: absolute;
    max-height: 400px;
    overflow: auto;
    list-style-type: none;
    padding: 0;
    margin: 0;
    z-index: 9;
}

.custom-select .options li {
    padding: 10px;
    cursor: pointer;
    background-color: var(--text-light);
    color: var(--text-dark);
}
.custom-select:hover div{
   border-color: var(--green) !important;
}
.custom-select:hover svg  path{
   fill: var(--green) !important;
}

.custom-select .options li:hover {
    background-color: var(--gray);
    color: var(--text-light);
}

body.light-mode .custom-select.bg-black {
    background-color: var(--text-light) !important;
}

body.light-mode .custom-select .options li {
    background-color: var(--text-dark);
    color: var(--text-light);
}

body.light-mode .custom-select .options li:hover {
    background-color: var(--gray);
    color: var(--text-light);
}

.custom-select .options,
.custom-select .options li:last-child {
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
    border-radius: '9px' !important;
}

body.light-mode .close-svg svg path {
    fill: var(--text-light);
    stroke: var(--text-light);
}

body.light-mode .close-svg svg rect {
    fill: var(--text-dark);
}


.currency-wrap-li .custom-select {
    min-width: 70px;
}

/* End custom Select Default Styling */
/* Start custom Checkbox Default Styling */
.custom-cb input[type="checkbox"] {
    visibility: hidden;
    opacity: 0;
    font-size: 0px;
    line-height: 0px;
    display: none;
}

.custom-cb input[type="checkbox"]~.check-mark.check-mark-15 {
    width: 15px;
    min-width: 15px;
    height: 15px;
}

.custom-cb input[type="checkbox"]~.check-mark {
    background-color: var(--text-dark);
    width: 18px;
    min-width: 18px;
    height: 18px;
    display: flex;
    border-radius: 3px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid var(--gray)
}

.custom-cb input[type="checkbox"]:checked~.check-mark {
    background-color: var(--green) !important;
    border: 1p solid var(--green) !important;
}

.custom-cb input[type="checkbox"]:checked~.check-mark.check-mark-white,
.custom-cb input[type="checkbox"]~.check-mark.check-mark-white {
    background-color: var(--text-light);
    border: 1p solid var(--text-light)
}

.custom-cb input[type="checkbox"]~.check-mark svg {
    opacity: 0;
    visibility: hidden;
}

.custom-cb input[type="checkbox"]:checked~.check-mark svg {
    opacity: 1;
    visibility: visible;
}

/* End custom Checkbox Default Styling */
/* Start Header */
.main-navigation ul>li.menu-item>a:hover,
.main-navigation ul>li.menu-item>a.active {
    background-color: var(--text-light);
    color: var(--text-dark) !important;
}

body.light-mode .main-navigation ul>li.menu-item>a:hover,
body.light-mode .main-navigation ul>li.menu-item>a.active {
    background-color: var(--text-dark);
    color: var(--text-light) !important;
}

.dropdown-toggle::after {
    display: none;
}

.bg-num {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
    font-size: 16px;
}

section.header-main-container {
    justify-content: space-between;
    align-items: center;
    height: inherit;
}

.header-right-wrap {
    gap: 25px;
}

span.header-num-box {
    border-radius: 5px;
    padding: 1px 5px;
    display: inline-block;
    /* width: ; */
    text-align: center;
    font-size: 12px;
    vertical-align: middle;
    line-height: 18px;
    color: var(--text-dark);
    font-family: 'Manrope SemiBold';
    /* height: 18px; */
}

span.orange-box.header-num-box {
    background-color: var(--orange);
}

span.green-box.header-num-box {
    background-color: var(--green);
}
span.dark-box.header-num-box,
body.dark-mode span.dark-box.header-num-box.active,
body.dark-mode .button:hover span.dark-box.header-num-box
{
    background-color: var(--text-dark);
    color: var(--text-light);
}
body.dark-mode span.dark-box.header-num-box,
span.dark-box.header-num-box.active,
.button:hover span.dark-box.header-num-box
{
    background-color: var(--text-light);
    color: var(--text-dark);
}

header.main-head-section {
    border-bottom: 1px solid var(--black-6);
    position: fixed;
    width: 100%;
    top: 0;
    background-color: var(--text-dark);
    z-index: 99;
    height: 70px;
}

header.main-head-section+.page-content {
    padding-top: 70px;
}

body.dark-mode .header-menu  ul li a {
    color: var(--text-light);
    background-color: var(--text-dark);
    border: 1px solid var(--white-9);
}
body.dark-mode .parent-menu-item a{
    color: var(--text-dark) !important;
    background-color: var(--text-light )!important;
}
body.dark-mode header {
    border-bottom: 1px solid var(--white-9);
}

.header-left-wrap {
    gap: 30px;
}

.header-menu ul li a,
.header-menu ul li link {
    /* padding: 4px 14px; */
    padding: .0625rem .6875rem .1875rem .6875rem;
    border-radius: .5625rem;
    border: .0625rem solid var(--black-9);
    font-size: 1.125rem;
    line-height: 1.125rem;
    background-color: var(--text-light);
}

/** Custom Switch on Header**/
.page-mode-switch-wrap {
    position: relative;
    display: inline-block;
    user-select: none;
}

.page-mode-switch-wrap input {
    display: none;
}

.page-mode-switch-wrap label {
    position: relative;
    display: block;
    width: 1.875rem;
    height: 1.125rem;
    border-radius: 0.625rem;
    background: var(--text-dark);
    cursor: pointer;
}

.page-mode-switch-wrap input:checked+label {
    background: var(--text-light);
}

.page-mode-switch-wrap label:after {
    position: relative;
    display: block;
    content: '';
    width: 0.9375rem;
    height: 0.9375rem;
    top: 50%;
    transform: translateY(-50%);
    left: 0.125rem;
    right: auto;
    border-radius: 0.5625rem;
    background: var(--text-light);
    pointer-events: none;
    transition: all .4s ease-in-out;
}

.page-mode-switch-wrap input:checked+label:after {
    left: calc(100% - 1.0625rem);
    background: var(--text-dark);
}

span.page-mode-text {
    background-color: var(--white-9);
    padding: 3px 8px;
    border-radius: 5px;
    min-width: 80px;
    text-align: center;
    display: inline-block;
}

/* Start Header Search Dropdown */
.header-search-wrap a {
    position: static;
}

.header-search-data-wrapper {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    right: 0;
    background-color: var(--text-light);
    top: 70px;
    display: none;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overflow-x: hidden;
}

body.dark-mode .header-search-data-wrapper {
    background-color: var(--text-dark);
}

body.search-result-active {
    overflow-x: hidden;
}

body.search-result-active .header-search-data-wrapper {
    display: block;
}

body.search-result-active:before {
    content: '';
    background-color: rgb(0 0 0 / 80%);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99;
}

body.search-result-active .svg-stroke-dark.header-search-wrap-ic>svg g,
body.search-result-active .svg-stroke-dark.header-search-wrap-ic>svg line {
    stroke: var(--green);
}

/* End Header Search Dropdown */
/* End Header */
/* Start Banner */
.banner-search input:focus {
    border-color: var(--green) !important;
}

.banner-search {
    margin-top: 20px;
}

.banner-search input {
    background-color: transparent;
    border: 1px solid var(--text-dark);
    color: var(--text-dark);
    padding: 13px 50px 13px 50px;
    border-radius: 12px;
    font-size: 18px;
    line-height: 22px;
    font-family: 'Manrope regular';
}

.banner-search input:focus-visible,
select:focus-visible {
    outline: none !important;
}

select {
    appearance: none;
    -webkit-appearance: none;
    /* Safari and Chrome */
    -moz-appearance: none;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9.717" height="6" viewBox="0 0 9.717 6"><path id="Path_30" data-name="Path 30" d="M9.752,6,8.61,7.142l3.709,3.717L8.61,14.575l1.142,1.142,4.858-4.858Z" transform="translate(15.717 -8.61) rotate(90)" fill="%23fff"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px auto;
    padding-right: 28px;
}

body.light-mode select {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9.717" height="6" viewBox="0 0 9.717 6"><path id="Path_30" data-name="Path 30" d="M9.752,6,8.61,7.142l3.709,3.717L8.61,14.575l1.142,1.142,4.858-4.858Z" transform="translate(15.717 -8.61) rotate(90)" fill="%23192226"/></svg>');
}

.banner-search svg#icon-search {
    position: absolute;
    top: 15px;
    left: 18px;
}

.search-close-button span {
    height: 50px;
    margin-left: 10px;
    background-color: var(--black-6);
    padding: 0px 17px;
    color: var(--text-dark);
    font-size: 16px;
    max-width: 88px;
    line-height: 16px;
    cursor: pointer;
}

body.dark-mode .search-close-button span {
    background-color: var(--text-light);
    color: var(--text-dark);
}

.search-close-button:hover span,
body.dark-mode .search-close-button:hover span{
    background-color: var(--green);
    color: var(--text-light);
}

.search-close-icon {
    position: absolute;
    top: 45%;
    left: auto;
    right: 101px;
    cursor: pointer;
    z-index: 9;
    transform: translateY(-45%);
}

.search-close-icon svg rect,
body.dark-mode .search-close-icon svg path {
    fill: var(--text-dark);
}

.search-close-icon svg path,
body.dark-mode .search-close-icon svg rect {
    fill: var(--text-light);
}

.search-close-icon:hover .stroke-hover-green,
body.dark-mode .search-close-icon:hover .stroke-hover-green {
    stroke: var(--green) !important;
}

.search-close-icon:hover .fill-hover-green,
body.dark-mode .search-close-icon:hover .fill-hover-green {
    fill: var(--green) !important;
}

.search-close-icon:hover svg path {
    fill: var(--text-light) !important;
}

.event-right-wrap p {
    margin-left: auto;
    margin-right: 0;
    justify-content: end;
    text-align: right;
}

.event-listing-common ul li:not(:last-child) {
    margin-bottom: 10px;
}

/* Light Mode */
body.light-mode header.main-head-section {
    background-color: var(--text-light);
}

body.light-mode .svg-rect-dark svg rect {
    fill: var(--text-dark);
}

body.light-mode .svg-path-dark svg path {
    fill: var(--text-dark);
}

body.light-mode .svg-path-light svg path {
    fill: var(--text-light);
}

body.light-mode .svg-stroke-dark svg g,
body.light-mode .svg-stroke-dark svg line {
    stroke: var(--text-dark)
}

body.light-mode span.page-mode-text {
    background-color: var(--black-9);
}

body.light-mode span.header-num-box {
    color: var(--text-light);
}

body.light-mode .order-event-wrap .bg-white-9 {
    background-color: var(--black-12) !important;
}
body.dark-mode .bg-black-6 {
    background-color: var(--white-9) !important;
}

body.light-mode .bg-black.bg-num {
    background-color: var(--text-light) !important;
}

body.light-mode .order-data-home .bg-black,
body.light-mode .event-data-home .bg-black {
    background-color: var(--text-light) !important;
}

body.light-mode .event-right-wrap .bg-white-6 {
    background-color: var(--black-6) !important;
}

body.light-mode section.section-divider {
    border-top: 1px solid var(--black-9);
}

body.light-mode .best-selling-event-wrap ul li {
    background-color: var(--black-12);
    border: 1px solid var(--black-12);
}

body.light-mode .bs-event-inner {
    background-color: var(--text-light);
}

body.light-mode .ticket-price-wrap>div,
body.light-mode .ticket-price-wrap1>div {
    background-color: var(--black-6);
}

body.light-mode .ticket-price-inner:before {
    border-left-color: var(--text-light);
}

body.light-mode .event-track-details svg path {
    fill: #fff !important;
}

body.light-mode .event-track-details svg rect {
    fill: var(--gray);
}
body.dark-mode .event-track-details svg rect {
    fill: var(--gray);
}

body.light-mode .best-selling-event-wrap ul li.event-feed:hover {
    background-color: var(--green);
}

.popular-event-list:hover {
    border: 2px solid var(--green);
}
.popular-event-list:hover svg path{
    fill: var(--green) !important;
}
body.dark-mode .popular-event-list:hover {
    border: 2px solid var(--green);
}

body.light-mode .best-selling-event-wrap ul li.event-feed:hover .event-details>div>.font-Bold {
    color: var(--green);
}


body.light-mode .best-selling-event-wrap ul li.event-feed:hover .popular-event-list {
    color: var(--text-light);
}

body.light-mode .best-selling-event-wrap ul li.event-feed:hover .ticket-price-wrap>div *,
body.light-mode .best-selling-event-wrap ul li.event-feed:hover .ticket-price-wrap1>div * {
    color: var(--text-light);
}

body.light-mode .best-selling-event-wrap ul li.event-feed:hover .event-track-details svg rect {
    /* fill: var(--text-dark); */
    fill: var(--green);
}

body.light-mode .best-selling-event-wrap ul li.event-feed:hover {
    border-color: var(--green);
}

body.light-mode .load-more-event a {
    border-color: var(--black-12);
}
.btn-light{
    background-color: var(--black-6);
    border-color: var(--black-6);
    color: var(--gray);
}
.btn-light:hover{
    background-color: var(--green);
    color: var(--text-light);
}

/* Dark Mode */
body.dark-mode .btn-light{
    background-color: var(--white-6);
    border-color: var(--white-6);
}
body.dark-mode .btn-light:hover{
    background-color: var(--green);
    color: var(--text-light);
}

body.dark-mode {
    background-color: var(--text-dark);
}

body.dark-mode * {
    color: var(--text-light);
}

body.dark-mode ::-ms-input-placeholder {
    color: var(--gray);
}

body.dark-mode ::placeholder {
    color: var(--gray);
}

body.dark-mode .banner-search input {
    background-color: transparent;
    border: 1px solid var(--text-light);
    color: var(--text-light);
}

/* Popular Event Section */
.d-grid.custom-4-grid {
    grid-template-columns: repeat(4, 1fr);
    /* grid-template-columns: repeat(4, minmax(300px, 1fr)); */
    grid-auto-flow: row;
}

.popular-event-list {
    background-size: cover;
    border: 2px solid #ffffff;
    border-radius: 11px;
    padding: 20px;
    background-position: center;
    background-repeat: no-repeat;
}
body.dark-mode .popular-event-list {
    border: 2px solid #192226;
}

.popular-event-list:before {
    content: '';
    /* background-color: rgb(0 0 0 / 60%); */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0.5625rem;
    z-index: -1;
}

.popular-event-list *,
.popular-event-list span {
    z-index: 9;
    color: var(--text-light);
}

body.dark-mode .popular-event-list:before {
    background-color: rgb(0 0 0 / 40%);
}

/* Start Best Selling Event Section */
.Best-selling-events-sec.home-Best-selling-events-sec {
    padding-bottom: 60px;
}

.load-more-event a {
    border: 1px solid var(--white-12);
    padding: 0.8125rem 1.25rem;
    border-radius: 0.5625rem;
}
.load-more-event a:hover{
    border: 1px solid var(--green);
}

.best-selling-event-wrap ul li .day-time-wrap {
    padding: 10px;
    border-radius: 10px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    width: 100px;
    text-align: center;
    height: 100%;
}

.best-selling-event-wrap ul li {
    border-radius: 10px;
    margin-bottom: 8px;
    background-color: var(--white-12);
    border: 1px solid var(--white-12);
    cursor: pointer;
    transition: all 0.2s linear;
}

.bs-event-inner {
    padding: 10px;
    border: 1px solid var(--white-12);
    border-radius: 10px;
    background-color: var(--text-dark);
    width: calc(100% - 100px);
}

.ticket-price-wrap {
    width: 500px;
    gap: 12px;
}

.title-track-event {
    width: calc(100% - 500px);
    justify-content: space-between;
    padding-right: 15px;
    padding-left: 5px;
    gap: 10px;
}

.ticket-price-wrap>div {
    width: 33.33%;
    background-color: var(--white-6);
    border-radius: 5px;
    position: relative;
}

.ticket-price-wrap1>div {
    background-color: var(--white-6);
    border-radius: 5px;
    position: relative;
}

.ticket-price-inner:before {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid var(--text-dark);
    content: '';
    position: absolute;
    left: 0;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
}

.best-selling-event-wrap ul li a {
    height: inherit;
}

.ticket-price-wrap>div p:last-child,
.ticket-price-wrap1>div p:last-child {
    margin-bottom: 0px;
}

.ticket-price-wrap>div p span,
.ticket-price-wrap1>div p span {
    margin-top: 5px;
    display: block;
}

.event-track-details svg {
    min-width: 20px;
}

.day-time-wrap p {
    margin-bottom: 0px;
}

.day-time-wrap {
    gap: 5px;
}

.best-selling-event-wrap ul li.event-feed:hover {
    border-color: var(--green);
    background-color: var(--green);
}

.best-selling-event-wrap ul li.event-feed:hover .ticket-price-wrap>div,
.best-selling-event-wrap ul li.event-feed:hover .ticket-price-wrap1>div {
    background-color: var(--green);
}

.best-selling-event-wrap ul li.event-feed:hover .ticket-price-wrap>div *,
.best-selling-event-wrap ul li.event-feed:hover .ticket-price-wrap1>div * {
    color: var(--text-dark);
}

.best-selling-event-wrap ul li.event-feed:hover .day-time-wrap * {
    color: var(--text-light) !Important;
}

.best-selling-event-wrap ul li.event-feed:hover .event-track-details svg rect {
    fill: var(--text-light);
}

.best-selling-event-wrap ul li.event-feed:hover h2 {
    color: var(--green);
}

/* End Best Selling Event Section */
/* Start Footer*/
footer {
    border-top: 1px solid var(--black-9);
    padding-top: 40px;
}

body.dark-mode footer {
    border-top: 1px solid var(--white-9);
}

.footer-wrap-left {
    width: calc(100% - 27.625rem);
}

.footer-wrap-right {
    width: 27.625rem;
}

.back-to-top-main {
    width: 7%;
    text-align: end;
}

.back-to-top-ic {
    width: fit-content;
    padding: 13px;
    background-color: var(--black-6);
    border-radius: 9px;
    margin-left: auto;
    margin-right: 0;
    cursor: pointer;
}

body.dark-mode .back-to-top-ic {
    background-color: var(--white-6);
}

.footer-wrap-right ul li label {
    width: 100%;
    border-radius: 9px;
    padding: 15px 10px 15px 50px;
    font-size: 16px;
    line-height: 20px;
    cursor: pointer;
    position: relative;
}
.order-filter ul li label {
    width: 100%;
    border-radius: 9px;
    padding: 4px 8px ;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    position: relative;
    border: .0625rem solid rgba(0, 0, 0, 0.175);
}

.footer-wrap-right ul {
    width: 100%;
}

.footer-wrap-right ul li input {
    visibility: hidden;
    opacity: 0;
    line-height: 0px;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
}
.order-filter ul li input {
    visibility: hidden;
    opacity: 0;
    line-height: 0px;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
}

.footer-wrap-right ul li {
    display: flex;
    margin-bottom: 10px;
}
.order-filter ul li {
    display: flex;
    margin-bottom: 10px;
}


.footer-wrap-right ul li label:before {
    width: 24px;
    height: 24px;
    display: block;
    position: absolute;
    border-radius: 3px;
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    left: 13px;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    line-height: 24px;
    background-color: var(--text-dark);
    color: var(--text-light);
}

.footer-nav.concerts ul li {
    width: 100%;
}

.footer-nav.concerts ul {
    width: 50%;
    float: left;
}

.footer-menu ul li {
    margin-bottom: 15px;
}

.footer-nav.sport-menu {
    min-width: 250px;
}

.footer-wrap-left {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.footer-left-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
}

.footer-left-bottom ul {
    gap: 30px;
    margin-bottom: 30px !important;
}

.footer-left-bottom ul li a {
    color: var(--gray);
}

body.dark-mode .footer-left-bottom ul li a:hover {
    color: var(--text-light) !important;
}

.footer-left-bottom ul li a:hover {
    color: var(--green) !important;
}

.footer-wrap-left .footer-logo svg {
    margin-bottom: 33px;
}

body.dark-mode .footer-wrap-right ul li label:before {
    color: var(--text-dark);
    background-color: var(--text-light);
}

.footer-wrap-right ul li input:checked+label::before {
    background-color: var(--text-light);
    color: var(--text-dark);
}

.footer-wrap-right ul li input+label {
    background-color: var(--black-9);
}

.footer-wrap-right ul li input:checked+label {
    background-color: var(--text-dark);
    color: var(--text-light);
}
/* .order-filter ul li input+label {
    background-color: var(--black-9);
} */

.order-filter ul li input:checked+label {
    /* background-color: var(--text-light); */
    /* color: var(--text-dark); */
    /* border: 1px solid #000; */
    background-color: var(--green);
    color: var(--text-light);
    border: 1px solid var(--green);
}
.order-filter ul li label.active {
    /* background-color: var(--text-light);
    color: var(--text-dark);
    border: 1px solid #000; */
    background-color: var(--green);
    color: var(--text-light);
    border: 1px solid var(--green);
}
.order-filter ul li input:checked+label span.dark-box.header-num-box{
    background-color: var(--text-dark);
    color: var(--text-light);
}

body.dark-mode .footer-wrap-right ul li input:checked+label::before {
    color: var(--text-light);
    background-color: var(--text-dark);
}

body.dark-mode .footer-wrap-right ul li input+label {
    background-color: var(--white-12);
}

body.dark-mode .footer-wrap-right ul li input:checked+label {
    background-color: var(--text-light);
    color: var(--text-dark);
}
body.dark-mode .order-filter ul li input+label {
    background-color: var(--text-dark) ! important;
    border: 1px solid var(--white-9);
}
body.dark-mode .order-filter ul li label {
    background-color: var(--text-dark) ! important;
    border: 1px solid var(--white-9);
}

body.dark-mode .order-filter ul li input:checked+label{
    color: var(--text-light);
    border: 1px solid var(--green);
    background-color: var(--green) !important;
}
body.dark-mode .order-filter ul li label.active{
    /* color: var(--text-light); */
    /* border: 1px solid var(--text-light); */
    border: 1px solid var(--green);
    background-color: var(--green) !important;
}
body.light-mode .order-filter ul li label.active span.dark-box.header-num-box,
body.light-mode .order-filter ul li input:checked+label span.dark-box.header-num-box,
body.light-mode .order-filter ul li input:checked+label span.orange-box.header-num-box,
body.light-mode .order-filter ul li input:checked+label span.green-box.header-num-box,
body.dark-mode .order-filter ul li label.active span.dark-box.header-num-box,
body.dark-mode .order-filter ul li input:checked+label span.dark-box.header-num-box,
body.dark-mode .order-filter ul li input:checked+label span.orange-box.header-num-box,
body.dark-mode .order-filter ul li input:checked+label span.green-box.header-num-box
{
    background-color: var(--text-light) !important;
    color: var(--text-dark) !important;
}

/* Footer End*/
/* Start Inner Page */
h1.inner-page-title {
    margin-bottom: 0px !important;
}

section.inner-page-banner {
    background-image: linear-gradient(180deg, transparent 60%, var(--text-dark) 100%);
}

body.light-mode section.inner-page-banner {
    background-image: linear-gradient(180deg, transparent 60%, var(--text-light) 100%);
}

.innerpg-bg-img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.innerpg-bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.inner-page-event-filter .event-location {
    max-width: fit-content;
}

.inner-page-event-filter .event-date {
    max-width: 130px;
    width: 100%;
}

body.light-mode .inner-page-event-filter .sort-by-date span.bg-black {
    background-color: #fff !important;
    border: 1px solid rgba(0, 0, 0,0.175);
}

.ticket-price-inner span.low-price {
    font-size: 10px;
    line-height: 18px;
    padding: 0px 5px;
    height: 10%;
    border-radius: 5px;
    display: flex;
}

body.light-mode .ticket-price-inner span.low-price {
    color: var(--text-light);
}

.load-more-event span.event-pagination {
    margin-left: auto;
    margin-right: 0;
    padding: 5px;
    background-color: var(--white-12);
}

body.light-mode .load-more-event span.event-pagination {
    background-color: var(--black-12) !important;
}

.loadmore-popular-event {
    margin-top: 10px;
}

/* End Inner Page */
/* Start Map Listing page */
body.full-width-page .main-head-section section.container {
    max-width: 100%;
}

section.listing-step-main {
    height: calc(100vh - 70px);
    overflow: hidden;
}

section.listing-step-main .listing-left-wrap {
    width: 660px;
    height: calc(100vh - 70px);
    overflow-y: auto;
    overflow-x: hidden;
}

section.listing-step-main .listing-left-wrap section{
    height: calc(100% - 7.625rem);
    overflow-y: auto;
}

section.listing-step-main .listing-map-wrapper {
    width: calc(100% - 660px);
    text-align: center;
}

.map-zoom-control {
    display: flex;
    border-radius: 9px;
}
.map-zoom-control  .map-zoom-out {
   /* border-radius:  9px 0px 0px 9px; */
   border-right: 1px solid var(--white-30);

}
.map-zoom-control  .map-refresh {
   border-radius: 0px 9px 9px 0px;
}
.map-zoom-control  .map-zoom-in {
    border-right: 1px solid var(--white-30);
    border-left: 1px solid var(--white-30);
    border-radius:  9px 0px 0px 9px;

}
.map-zoom-control a:hover{
    background-color: var(--green) !important;
    color: var(--white) !important;
}


.map-zoom-control a {
    background-color: var(--gray) !important;
    min-width: 30px;
    padding: 3px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-zoom-control a span {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .map-zoom-control a:not(:last-child) {
    border-right: 1px solid var(--text-dark);
} */
.clear-map-btn a {
    padding: 4px 11px;
    min-height: 30px;
    display: block;
    background-color: var(--gray);
    color: var(--text-light);
}
.clear-map-btn a:hover {
    background-color: var(--green);
}
body.dark-mode .clear-map-btn a:hover {
    background-color: var(--green);
}
body.dark-mode .clear-map-btn a {
    background-color: var(--gray);
    color: var(--text-dark);
}
.map-main-view {
    overflow: hidden;
}

.map-main-view {
    height: calc(100vh - 140px);
}

.map-main-view img {
    width: 100%;
    max-width: 860px;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.map-main-view svg {
    width: 100%;
    max-width: 860px;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.map-event-details-wrap .map-event-date span,
.map-event-details-wrap .map-event-detail-info span {
    display: block;
}

.map-event-details-wrap .map-event-date span:not(:last-child),
.map-event-details-wrap .map-event-detail-info span:not(:last-child) {
    margin-bottom: 7px;
}

.map-event-details-wrap .map-event-date {
    width: 108px;
    border-right: 1px solid var(--text-dark);
}

.map-event-details-wrap .map-event-detail-info {
    width: calc(100% - 108px);
}

.map-event-details-wrap .event-map-track span {
    color: var(--text-dark) !important;
}

.map-que-prcie-wrap .custom-select,
.map-que-prcie-wrap .sort-by-date {
    min-width: 133px;
}

.white-btn a {
    color: var(--text-dark);
}
.white-btn .hover-bg-green:hover {
    background-color: var(--green) !important;
    color: var(--text-light);
}

.map-event-data-lisitng>ul {
    list-style-type: none;
    width: 100%;
}

.map-event-data-lisitng>ul>li {
    width: 100%;
    display: flex;
}

.from-price {
    width: 145px;
    text-align: center;
    background-color: var(--white-6);
    border-radius: 9px;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}

.from-price:before {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid var(--text-dark);
    content: '';
    position: absolute;
    left: 0;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
}

.map-event-data-info {
    width: calc(100% - 145px);
}

.map-event-data-lisitng ul li .map-event-data-lisitng-inner {
    border: 1px solid var(--white-12);
}

.map-event-data-lisitng ul li.event-feed .map-event-data-lisitng-inner:hover,
.map-event-data-lisitng ul li.event-feed .map-event-data-lisitng-inner.active {
    border: 1px solid var(--green) !important;
}

.map-event-data-lisitng ul li.event-feed .map-event-data-lisitng-inner:hover .from-price,
.map-event-data-lisitng ul li.event-feed .map-event-data-lisitng-inner.active .from-price {
    background-color: var(--green);
}

.map-event-data-lisitng .low-price,
.map-event-data-lisitng ul li .map-event-data-lisitng-inner:hover .from-price *,
.map-event-data-lisitng ul li .map-event-data-lisitng-inner.active .from-price * {
    color: var(--text-dark) !important;
}

.map-event-data-lisitng ul li:not(:last-child) {
    margin-bottom: 10px;
}

.map-event-data-lisitng ul.inner-ul.list-type-ul {
    list-style-type: disc;
    padding-left: 15px;
}

.listing-section-inner-link ul li:not(:last-child) {
    margin-bottom: 10px;
}

.listing-section-inner-link {
    border-top: 1px solid var(--text-dark);
}

.listing-selection-left-wrap {
    position: relative;
}

.map-bottom-stick-button {
    position: sticky;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: auto;
    margin-bottom: 0;
    top: 100%;
}

.map-bottom-stick-button a {
    margin: 0 auto;
    width: 100%;
    text-align: center;
    min-height: 45px;
    justify-content: center;
}

.listing-selection-left-wrap .m-0.map-event-details-wrap {
    margin-bottom: 20px !important;
}

/* Light Mode Map Listing */
body.light-mode section.listing-step-main .listing-map-wrapper.bg-white-6 {
    background-color: var(--black-6) !important;
}

body.light-mode .map-event-details-wrap.bg-white-9 {
    background-color: var(--black-6) !important;
}

body.light-mode .map-event-details-wrap .map-event-date {
    border-right: 1px solid var(--text-light);
}

body.light-mode .listing-section-inner-link {
    border-top: 1px solid var(--text-light);
}


 */

body.light-mode .clear-map-btn a:hover{
    background-color: var(--green) !important;
}

body.light-mode .map-zoom-control svg path,
body.light-mode .map-zoom-control svg rect {
    fill: var(--text-light);
}
body.dark-mode .map-zoom-control a:active{
    background-color: var(--text-light) !important;
    color: var(--text-dark) !important;
}

/* body.light-mode .map-zoom-control a:not(:last-child){
    border-color:var(--text-light) !important;
} */
body.light-mode .map-event-details-wrap .event-map-track span {
    color: var(--text-light) !important;
}

body.light-mode .map-event-details-wrap .event-map-track.svg-path-dark svg path {
    fill: var(--text-light);
}

body.light-mode .map-event-data-filter .border-white-12 {
    border-color: var(--text-dark) !important;
    background-color: var(--text-light) !important;
}

body.light-mode .sort-by-date {
    background-color: var(--text-light) !important;
    border: 1px solid rgba(0, 0, 0, 0.175) !important;
}
body.dark-modee  .sort-by-date svg{
    fill: #fff;
}
body.light-mode .white-btn a {
    background-color: var(--text-dark) !important;
    color: var(--text-light);
}
body.dark-mode .white-btn a {
    background-color: var(--text-light) !important;
    color: var(--text-dark);
}

body.light-mode .white-btn a svg path {
    fill: var(--text-light);
}
body.dark-mode .white-btn a svg path {
    fill: var(--text-dark);
}
body.light-mode .white-btn a:hover svg path,
body.light-mode .white-btn a:hover svg rect{
    fill: var(--text-light);
}
/* body.dark-mode .white-btn a:hover{
    color: var(--gray) !important;
} */
/* body.dark-mode .white-btn a:hover svg path,
body.dark-mode .white-btn a:hover svg rect {
    fill: var(--gray) !important;
} */

body.light-mode .map-event-data-filter .sort-by-date>span.border-white-12 {
    border-color: var(--black-9) !important;
}

body.light-mode .map-event-data-lisitng ul li .map-event-data-lisitng-inner {
    background-color: var(--text-light) !important;
    border: 1px solid var(--black-18);
}

body.light-mode .from-price:before {
    border-left-color: var(--text-light) !important;
}

body.light-mode .map-event-data-lisitng ul li .map-event-data-lisitng-inner:hover .from-price *,
body.light-mode .map-event-data-lisitng ul li .map-event-data-lisitng-inner.active .from-price * {
    color: var(--text-light) !important;
}

body.light-mode .svg-path-green svg path {
    color: var(--green);
}

body.light-mode .map-event-data-lisitng .from-price {
    background-color: var(--black-9);
}

/* End Map Listing page */
/* Start Listing Quote Builder */
.listing-quote-pricing-wrap>ul {
    background-color: var(--white-6);
    border-radius: 9px;
}

.listing-quote-pricing-wrap>ul>li:not(:last-child) {
    border-bottom: 1px solid var(--text-dark);
}

.listing-quote-pricing-wrap>ul>li:last-child {
    width: 100%;
}

.listing-quote-pricing-wrap>ul>li:not(:last-child) {
    width: 50%;
}

.listing-quote-pricing-wrap>ul>li:nth-child(odd) {
    border-right: 1px solid var(--text-dark);
}

.listing-quote-pricing-wrap ul li p.quote-price-title {
    width: 100%;
    font-size: 14px;
    line-height: 20px;
}

.listing-quote-pricing-wrap a.gray_btn {
    background-color: var(--white-9);
    font-size: 15px;
    line-height: 15px;
    border-radius: 9px;
    padding: 5px 10px;
    height: 30px;
    width: 50px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-family: 'Manrope Bold';
    font-weight: 700;
}

body.dark-mode kbd {
    color: black;
}

body.dark-mode .listing-quote-pricing-wrap a.gray_btn.active {
    background-color: var(--text-light);
    color: var(--text-dark);
}

body.light-mode .listing-quote-pricing-wrap a.gray_btn.active {
    background-color: var(--text-light);
    color: var(--text-dark);
}

.Commission-amount-wrap a,
.Commission-amount-wrap input {
    border-radius: 9px;
    height: 30px;
}

.Commission-amount-wrap a {
    width: 30px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--text-light);
}

.Commission-amount-wrap input {
    background-color: var(--text-dark);
    border: 1px solid var(--gray);
    padding: 5px 10px;
    -moz-appearance: textfield;
    width: 100%;
    max-width: 70px;
    font-size: 15px;
    line-height: 15px;
    text-align: center;
}

.Commission-amount-wrap input::-webkit-outer-spin-button,
.Commission-amount-wrap input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.show-vip-btn .show-vip-btn-inner {
    border-radius: 9px;
    padding: 6px 10px;
    border: 1px solid var(--text-light);
}

.listin-selected-btn a {
    padding: 5px 15px;
    background-color: var(--white-6);
    border-radius: 9px;
}

.seating-category-data>ul>li {
    border-radius: 9px;
    background-color: var(--gray);
}

.seating-category-data>ul>li>div {
    background-color: #272f33;
    border-radius: 9px;
}

.lsiitng-vip-data-inner {
    padding: 0px;
    background-color: #272f33;
}

.seating-category-data>ul>li:not(:last-child) {
    margin-bottom: 10px;
}

.lsiitng-vip-data-inner>.vip-title-wrap,
.lsiitng-vip-data-inner>ul>li:not(:last-child) {
    border-bottom: 1px solid var(--text-dark);
}

.lsiitng-vip-data-wrap {
    background-color: var(--green);
}

.quote-pack-name svg * {
    -webkit-transform: translate(0px);
    -ms-transform: translate(0px);
    transform: translate(0px);
}

.lsiitng-vip-data-inner .quote-pack-name svg text#i {
    -webkit-transform: translate(6.5px);
    -ms-transform: translate(6.5px);
    transform: translate(6.5px);
}

.quote-pack-name svg {
    min-width: 14px;
}

.quote-pack-name,
.seating-cat-tittle {
    min-width: 225px;
    width: 100%;
    max-width: 225px;
}

/* Light Mode */
body.light-mode .lsiitng-vip-data-inner>.vip-title-wrap,
body.light-mode .lsiitng-vip-data-inner>ul>li:not(:last-child) {
    border-bottom: 1px solid var(--text-light);
}

body.light-mode .lsiitng-vip-data-inner,
body.light-mode .seating-category-data>ul>li>div {
    background-color: #f1f2f2;
}

body.light-mode .custom-cb svg path {
    fill: #fff;
    stroke: #fff;
}

body.light-mode .custom-cb input[type="checkbox"]~.check-mark {
    background-color: var(--text-light);
}

body.light-mode .quote-pack-name svg text {
    fill: #fff;
}

body.light-mode .listin-selected-btn a {
    background-color: var(--black-6);
}

body.light-mode .show-vip-btn .show-vip-btn-inner {
    border: 1px solid var(--text-dark);
}

body.light-mode .custom-select .selected.border-white-12 {
    border-color: rgba(0, 0, 0, 0.175) ;
}

body.light-mode .custom-cb input[type="checkbox"]~.check-mark.check-mark-white {
    background-color: var(--text-dark) !important;
    border: 1p solid var(--text-dark) !important;
}

body.light-mode .listing-quote-pricing-wrap>ul {
    background-color: var(--black-6);
}

body.light-mode .listing-quote-pricing-wrap>ul>li:nth-child(odd) {
    border-color: var(--text-light) !important;
}

body.light-mode .listing-quote-pricing-wrap>ul>li:not(:last-child) {
    border-bottom: 1px solid var(--text-light) !important;
}

body.light-mode .listing-quote-pricing-wrap a.gray_btn {
    background-color: var(--black-6);
}

body.light-mode .amout-inc_dec_ic svg path,
body.light-mode .amout-inc_dec_ic svg rect {
    fill: var(--text-light);
    stroke: var(--text-light);
}

body.light-mode .Commission-amount-wrap a {
    background-color: var(--text-dark);
}

body.light-mode .Commission-amount-wrap input {
    background-color: var(--text-light);
}

/* Checkout Page */
body.checkout header.main-head-section .header-menu,
body.checkout header.main-head-section .header-search-wrap,
body.checkout header.main-head-section .header-order,
body.checkout header.main-head-section .header-track-event,
body.checkout header.main-head-section .header-profile {
    display: none !important;
}

.checkout-order-details {
    width: 560px;
}

.checkout-form-contianer {
    width: calc(100% - 560px);
    position: relative;
}

.co-event-details-wrap {
    background-color: var(--text-dark);
}

.co-event-details-wrap .co-event-date {
    width: 108px;
    border-right: 1px solid var(--white-9);
}

.co-event-details-wrap .co-event-detail-info {
    width: calc(100% - 108px);
}

.checkout-order-details {
    background-color: var(--white-9);
    border-radius: 12px;
}

.co-event-details-wrap .listing-section-inner-link {
    border-top-color: var(--white-9);
}

.co-table tr:not(:last-child) td {
    padding-bottom: 10px;
}

.co-btn {
    padding: 7.5px 15px;
    font-size: 15px !important;
    line-height: 15px !important;
}

a.red-btn {
    background-color: var(--orange);
    color: var(--text-dark);
}

body.light-mode .checkout-order-details {
    background-color: var(--black-9);
}

body.light-mode .co-event-details-wrap,
body.light-mode .checkout-order-details .bg-black {
    background-color: var(--text-light) !important;
}

body.light-mode .co-event-details-wrap .co-event-date {
    border-right: 1px solid var(--black-9);
}

body.light-mode .co-event-details-wrap .listing-section-inner-link {
    border-top: 1px solid var(--black-9);
}

body.light-mode .release-time-wrap a.red-btn {
    color: var(--text-light);
}

/* Form Styling Start */
.form-row {
    margin-bottom: 10px;
}

.form-wrap-common label {
    font-size: 15px;
    line-height: 20px;
}

.form-wrap-common .input_wrap label:not(.option-lable) {
    min-width: 155px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    max-width: 155px;
}

.input_wrap input, textarea {
    background-color: var(--text-dark);
    width: 100%;
    border-radius: 7px;
    border: 1px solid var(--white-18);
    padding: 7px 15px;
}

.input_wrap.input-text-only {
    padding: 12px 15px;
}

/* .input_wrap input:focus,
.input_wrap_card_details.focused input {
    border: 1px solid var(--green) !important;
} */

.input_wrap input::placeholder {
    color: var(--gray) !important;
    opacity: 1;
}

.input_wrap input::-ms-input-placeholder {
    color: var(--gray) !important;
}

.input_wrap {
    display: flex;
    background-color: var(--white-9);
    border-radius: 9px;
    padding: 2px;
}

.svg-t0 svg * {
    transform: translate(0px);
}

.svg-t0 svg text {
    transform: translate(7px);
}

.form-title {
    margin-top: 20px;
}
.title{
    font-size: clamp(1rem, 0.3043rem + 2.4783vw, 2rem);
}

input#expiry-date {
    width: 70px;
    padding-left: 0px;
    padding-right: 0px !important;
    text-align: center;
    border-radius: 0px;
    border-left: 0px !important;
    border-right: 0px !important;
}

input#cvv {
    width: 100px;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-left: 0px !important;
}

input#card-number {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-right: 0px !important;
}

.form-wrap-common .select_wrap select {
    background-color: var(--text-light);
    border-radius: 9px;
    padding: 10px 15px;
    border: 1px solid var(--white-18);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 15px;
    line-height: 15px;
    padding-right: 28px !important;
}
body.dark-mode .select_wrap select{
    background-color: var(--text-dark);
}

.form-wrap-common .select_wrap select option {
    color: var(--text-dark);
}

.checkout-form-complete-order {
    padding-bottom: 0rem;
    position: sticky;
    bottom: 0rem;
    /* background: white; */
}

.complete-order-wrap a,.complete-order-wrap link {
    border: 1px solid var(--gray);
    border-radius: 9px;
    background-color: var(--text-dark);
    position: fixed;
    bottom: 0;
    z-index: 9;
    height: 50px;
    color: var(--gray);
    font-size: 18px;
    line-height: 18px;
}

.checkout-order-details {
    position: -webkit-sticky;
    position: sticky;
    top: 75px;
    height: 100%;
}

.common-option-input-wrap {
    background-color: var(--white-6);
    padding: 10px 15px;
    border-radius: 9px;
    width: fit-content;
    min-width: 170px;
}

.radio-wrap-common input[type="radio"] {
    visibility: hidden;
    opacity: 0;
    display: none;
}
.radio-wrap-common input[type="checkbox"] {
    visibility: hidden;
    opacity: 0;
    display: none;
}

.radio-wrap-common label:before {
    content: '';
    background-color: var(--text-dark);
    border: 1px solid var(--gray);
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 100%;
    left: 0;
    top: 1px;
    right: auto;
}

.radio-wrap-common label:after {
    content: '';
    background-color: var(--text-light);
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    left: 4px;
    top: 5px;
    right: auto;
    opacity: 0;
}

.radio-wrap-common label {
    position: relative;
    padding-left: 27px !important;
}

.radio-wrap-common input:checked~label::before {
    background-color: transparent !important;
    border: 1px solid #fff !important;
}

.radio-wrap-common input:checked~label:after {
    opacity: 1;
}

.radio-wrap-common.checked {
    background-color: var(--green);
}

.form-row .custom-cb input:checked~.check-mark svg path {
    fill: #fff;
    stroke: #fff;
}

/*Light Mode for Form */
body.light-mode .input_wrap {
    background-color: var(--black-6);
}

body.light-mode .input_wrap input,textarea {
    background-color: var(--text-light);
}

body.light-mode .input_wrap input.disabled {
    background-color: var(--black-6);
}

body.light-mode .common-option-input-wrap.radio-wrap-common.checked label {
    color: #fff !important;
}

body.light-mode .common-option-input-wrap {
    background-color: var(--black-12);
}

body.light-mode .common-option-input-wrap.radio-wrap-common.checked {
    background-color: var(--green) !important;
}

body.light-mode .radio-wrap-common label:before {
    background-color: #fff;
}

body.light-mode a.complete-order-wrap-btn {
    background-color: var(--text-light);
}

/* Form Styling End */
body.light-mode .black-btn-hover-green{
    background-color: var(--text-dark) !important;
    color: var(--text-light);
}
body.dark-mode .black-btn-hover-green{
    background-color: var(--text-light) !important;
    color: var(--text-dark) !important;
}
body.light-mode .black-btn-hover-green:hover,
body.light-mode .black-btn-hover-green.active,
body.dark-mode .black-btn-hover-green:hover,
body.dark-mode .black-btn-hover-green.active {
    background-color: var(--green) !important;
    color: var(--text-light);
}

.black-text-hover-green:hover {
    color: var(--green) !important;
}

body.light-mode .black-text-hover-green:hover .dark-black-light-white {
    color: var(--text-dark) !important;
}

body.dark-mode .black-text-hover-green:hover .dark-black-light-white {
    color: var(--text-light) !important;
}

.fill-green-hover:hover * {
    fill: var(--green) !important;
}

body.dark-mode .darkmode-darkbody {
    background-color: var(--white-9) !important;
}

body {
    scrollbar-width: thin;
}

/* scrollbar width */
::-webkit-scrollbar {
    width: 0.3125rem;
    height: 0.3125rem;
}

/* scrollbar Track */
::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 0.3125rem;
    margin: 0.25rem;
}

/* scrollbar Handle */
::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 0.1875rem;
}

/* scrollbar Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #808080;
}

.bg-dark-9 {
    background-color: var(--black-9);
}

body.dark-mode .bg-dark-9 {
    background-color: var(--white-9);
}

.w-max-content {
    width: max-content;
}

.bgGreen {
    background-color: var(--green);
}

.btn-custom-border {
    border-color: var(--bs-card-border-color);
}

.swal2-styled {
    padding: .325em 1.1em !important;
}

.btn-xs {
    font-size: 0.5rem;
}

.frontend-form-error {
    margin-left: 160px;
    font-style: italic;
}

.shimmer-effect {
    border-radius: .50rem;
    color: transparent !important;
    position: relative;
    background: #f2f2f2 !important;
    overflow: hidden;
    border: none
}
body.dark-mode .shimmer-effect {
    background: #272f33 !important;
}
body.dark-mode .shimmer-effect:before {
    background-color: #272f33;
    background-image: linear-gradient(-45deg, #272f33 25%, rgba(242, 242, 242, 0.2) 50%, #272f33 75%);

}
.shimmer-effect:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    background-image: linear-gradient(-45deg, #f2f2f2 25%, rgba(242, 242, 242, 0.2) 50%, #f2f2f2 75%);
    background-size: cover;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeholderShimmer;
    animation-timing-function: linear;
    background-repeat: repeat-x
}

.shimmer-effect * {
    opacity: 0;
    pointer-events: none
}

@keyframes placeholderShimmer {
    0% {
        transform: translateX(-100%)
    }

    100% {
        transform: translateX(100%)
    }
}

.grey {
    stroke-dasharray: 788 790;
    stroke-dashoffset: 789;
    animation: draw_0 3200ms infinite, fade 3200ms infinite;
  }

  .blue {
    stroke-dasharray: 788 790;
    stroke-dashoffset: 789;
    animation: draw_1 3200ms infinite, fade 3200ms infinite;
  }

  @keyframes fade {
    0% {
      stroke-opacity: 1;
    }
    80% {
      stroke-opacity: 1;
    }
    100% {
      stroke-opacity: 0;
    }
  }

  @keyframes draw_0 {
    9.375% {
      stroke-dashoffset: 789
    }
    39.375% {
      stroke-dashoffset: 0;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }

  @keyframes draw_1 {
    35.625% {
      stroke-dashoffset: 789
    }
    65.625% {
      stroke-dashoffset: 0;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }

  .skeleton {
    cursor: wait;
  }

  .custom-w-sm-100 {
        width: 100%; /* Default for smaller screens */
    }

@media (min-width: 576px) {
    .custom-w-sm-100 {
        width: 300px; /* Set specific width for small screens and above */
    }
}

.button {
    padding: 4px 14px;
    border-radius: .5625rem;
    font-size: 1.125rem;
    line-height: 1.125rem;
    cursor: pointer;
    background-color: var(--text-dark);
    color: var(--text-light);
    border: 1px solid ;
}
body.dark-mode .button {
    color: var(--text-dark);
    background-color: var(--text-light);
    border: 1px solid var(--white-9);
}
.button:hover,
.button.active{
    background-color: var(--text-light);
    color: var(--text-dark);
    border: 1px solid #000;
}
body.dark-mode .button:hover,
body.dark-mode .button.active{
    background-color: var(--text-dark);
    color: var(--text-light);
    border: 1px solid #fff;
}

.account-page.button{
    background-color: var(--text-dark);
    color: var(--text-light);
    height: 1.875rem;
    max-height: 1.875rem;
    border-radius: 0.5625rem;
    font-size: 0.9375rem;
    line-height: 1.3125rem;
    font-weight: bold;
}
.account-page.button:hover,
.account-page.button.active{
    background-color: var(--text-light);
    color: var(--text-dark);
    border: 0.0625rem solid var(--text-dark);
}
body.dark-mode .account-page.button{
    background-color: var(--text-light);
    color: var(--text-dark);
}
body.dark-mode .account-page.button:hover,
body.dark-mode .account-page.button.active{
    background-color: var(--text-dark);
    color: var(--text-light);
    border: 0.0625rem solid var(--text-light);
}





.page-top-shadow {
    background-image: linear-gradient(to bottom, var(--black-6) 20%,  var(--text-light) 80%);
}
body.dark-mode .page-top-shadow {
    /* background-image: linear-gradient(to bottom, var(--white-6) 20%, var(--black-12) 80%); */
    background-image: linear-gradient(to bottom, var(--white-6) 0%, var(--text-dark) 100%);
}
body.light-mode .input_wrap:has(input:focus),
body.light-mode .input_wrap:has(textarea:focus)
{
    padding: 2px;
    background-color: var(--text-dark) !important;
    color: var(--text-light) !important;
}
body.dark-mode .input_wrap:has(input:focus),
body.dark-mode .input_wrap:has(textarea:focus)
{
    padding: 1px;
    background-color: var(--text-light) !important;
}
body.dark-mode .input_wrap:has(input:focus) label,
body.dark-mode .input_wrap:has(textarea:focus) label
{
    color: var(--text-dark) !important;
}

.main-navigation .dropdown .dropdown-menu,
.navbar .dropdown .dropdown-menu{
    width: 100svw;
    height: 100svh;
    background-color: rgb(25 34 38 / 70%);
}
body.dark-mode .main-navigation .dropdown .dropdown-menu,
body.dark-mode .navbar .dropdown .dropdown-menu{
    width: 100svw;
    height: 100svh;
    background-color: rgb(25 34 38 / 88%);
}
.dropdown-menu-container{
    background-color: var(--text-light);
    width: 100%;
    height: auto;
}
body.dark-mode .dropdown-menu-container{
    background-color: var(--text-dark);
    width: 100%;
    height: auto;
}
.user-account-dropdown-menu .header-account-icon svg g *{
    fill: var(--text-dark);
    stroke: var(--text-dark);
}
.user-account-dropdown-menu .header-account-icon:hover svg g *{
    fill: var(--green);
    stroke: var(--green);
}
.user-account-dropdown-menu .header-account-icon svg g path{
    fill: var(--text-light) !important;
}
.user-account-dropdown-menu .header-account-icon:hover svg:last-of-type path{
    fill: var(--green) !important;
}
body.dark-mode .user-account-dropdown-menu .header-account-icon svg g *{
    fill: var(--text-light);
    stroke: var(--text-light);
}
body.dark-mode .user-account-dropdown-menu .header-account-icon:hover svg g *{
    fill: var(--green);
    stroke: var(--green);
}
body.dark-mode .user-account-dropdown-menu .header-account-icon svg g path{
    fill: var(--text-dark) !important;
}
body.dark-mode .user-account-dropdown-menu .header-account-icon svg:last-of-type path{
    fill: var(--text-light) !important;
}
body.dark-mode .user-account-dropdown-menu .header-account-icon:hover svg:last-of-type path{
    fill: var(--green) !important;
}

.user-account-dropdown-menu .dropdown-menu{
    margin-top: 0.625rem !important;
    padding: 0.5625rem 0.6875rem 0.625rem;
}
.user-account-dropdown-menu .dropdown-menu li:not(:last-child){
    margin-bottom: 0.625rem;
}
.user-account-dropdown-menu .dropdown-menu .svg:hover .black-btn-hover-green{
    background-color: var(--green) !important;
}
body.dark-mode .user-account-dropdown-menu .dropdown-menu .svg .black-btn-hover-green{
    background-color: var(--text-light) !important;
}
body.dark-mode .user-account-dropdown-menu .dropdown-menu .svg:hover .black-btn-hover-green{
    background-color: var(--green) !important;
}

.green-hover-border-ul li,
.green-hover-border-link .green-hover-border {
    border: 1px solid var(--text-light);
}
body.dark-mode .green-hover-border-ul li,
body.dark-mode .green-hover-border-link .green-hover-border {
    border: 1px solid var(--text-dark);
}
.green-hover-border-ul li:hover,
.green-hover-border-link:hover .green-hover-border,
body.dark-mode .green-hover-border-ul li:hover,
body.dark-mode .green-hover-border-link:hover .green-hover-border {
    border: 1px solid var(--green);
}

.green-hover-border-link:hover .fill-green-hover *,
body.dark-mode .green-hover-border-link:hover .fill-green-hover *{
    fill: var(--green);
}

.green-hover-border-ul li:hover .black-text-hover-green{
    color: var(--green);
}

body.dark-mode .dark-text-white span{
    color: var(--text-light) !important;
}

body.light-mode svg.dark-svg path{
    fill: var(--text-dark);
}
body.dark-mode svg.dark-svg path{
    fill: var(--text-light);
}

.tracked-icon{
    position: relative;
    justify-self: right;
    display: flex;
    height: 1.25rem;
    width: 1.25rem;
    top: 0rem;
    right: 0rem;
    opacity: 1;
}
.tracked-icon svg{
    position: absolute;
    z-index: 1;
}

.tooltip {
  position: relative;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: auto;
  background-color: var(--text-light);
  color: #1D2229;
  text-align: center;
  border-radius: 0.3125rem;
  padding: 0.3125rem;
  position: absolute;
  z-index: 9999;
  bottom: 0.625rem;
  transform: translateX(50%);
  margin-left: -3.75rem;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 0.75rem;
  line-height: 1.0625rem;
  box-shadow: 0rem 0rem 0.3125rem rgba(25 34 38 / 25%);
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -0.3125rem;
  border-width: 0.3125rem;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}


.dp__input{
    border-radius: 0.5rem !important;
}
.dp__input::placeholder{
    color: #000 !important;
    content: 'skhsdjkfhksd' !important;

}
body.dark-mode .dp__input::placeholder{
    color: var(--text-light) !important;

}
.custon-search{
    border-color: rgba(0, 0, 0, 0.175) !important;
}

body.dark-mode .custon-search{
    border-color: var(--white-9) !important;
}

.benefit-btn {
   padding: .25rem .5rem;
   border-radius: 5px;
   background-color: var(--gray);
   color: var(--text-light);
   font-size: 0.75rem;
}
body.dark-mode .benefit-btn {
   background-color: var(--text-light);
   color: var(--gray);
}
.benefit-btn:hover {
    background-color: var(--green);
}
body.dark-mode .benefit-btn:hover {
    background-color: var(--green);
}
@media (max-width: 576px){
    .min-w-296{
        min-width: 18.5rem;
    }
    .w-100-sm {
        width: 100% !important;
    }
    .-me-sm-5{
        margin-right: -1.25rem;
    }
    .me-sm-5{
        margin-right: 1.25rem;
    }
    .mx-sm-20p{
        margin-left: 1.25rem;
        margin-right: 1.25rem;
    }
    .-me-sm-6{
        margin-right: -1.5rem;
    }
    .me-sm-6{
        margin-right: 1.5rem;
    }
    .mb-sm-15p{
        margin-bottom: 0.9375rem;
    }
    .gap-sm-1p{
        gap: 0.0625rem;
    }
    .rounded-sm-0{
        border-radius: 0 !important;
    }
    .p-sm-0{
        padding: 0;
    }
    .mt-sm-0{
        margin-top: 0 !important;
    }
}
.hover-border-green:hover{
    border: 1px solid var(--green) !important;
}
body.dark-mode .hover-border-green:hover{
    border: 1px solid var(--green) !important;
}
.border-green{
    border: 1px solid var(--green) !important;
}

.custom-select .border {
    border-color: var(--black-30);
    border-radius: 9px;
}
.custom-select:hover{
    color: var(--green)!important;
    border-color: var(--green) !important;
}
body.dark-mode .custom-select:hover{
    color: var(--green)!important;
    border-color: var(--green) !important;
}
.reset-btn {
    border: 1px solid var(--black-30);
    border-radius: 9px;
}

.theme-bg-9{
    background-color: var(--black-9);
}
body.dark-mode .theme-bg-9{
    background-color: var(--white-9);
}

body.dark-mode .tooltip-inner{
    color: var(--text-dark)!important;
}
.font-italic {
    font-style: italic;
    font-weight: 400;
}


.tooltip-button {
    position: relative;
    border: none;
    cursor: pointer;
}

.tooltip-text {
    visibility: hidden;
    background-color: #fff;
    color: #000 !important;
    text-align: center;
    padding: 5px;
    border-radius: 5px;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    white-space: nowrap;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

.tooltip-button:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}
#Group_20960:hover > rect {
    fill: red !important;
}
#Group_20960 > rect {
    fill: var(--green) !important;
}
.untrack-button:hover {
    background-color: var(--green) !important;
}
.untrack-svg path {
    fill: #fff !important;
}
body.dark-mode .untrack-svg path {
    fill: #000 !important;
}



.custom-checkbox input {
  display: none;
}

/* Style the label as a custom checkbox */
.custom-checkbox label {
  display: flex;
  align-items: center;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
}

/* Create a custom checkmark box */
.custom-checkbox .checkmark {
  width: 20px;
  height: 20px;
  border: 1px solid var(--green);
  border-radius: 4px;
  margin-right: 10px;
  position: relative;
  background-color: #fff;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
body .dark-mode .custom-checkbox .checkmark {
  background-color: #000 !important;
}
/* Add a checkmark icon when checked */
.custom-checkbox input:checked + label .checkmark {
  background-color: var(--green);
  border-color: var(--green);
}

.custom-checkbox input:checked + label .checkmark::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.listing-multi-select-summary {
    background-color: #fff;
    border: var(--black-12) solid 1px;
}

body.dark-mode .listing-multi-select-summary {
    background-color: #192225;
    border: var(--white-9) solid 1px;
}

body.dark-mode .listing-multi-select-summary-right .proceed{
    background-color: var(--text-light);
    color: var(--text-dark);
}
body.light-mode .listing-multi-select-summary-right .proceed{
    background-color: var(--text-dark);
    color: var(--text-light);
}

.select-ticket {
    position: relative;
    min-width: max-content;
    width: inherit;
}

.select-ticket .selected {
    cursor: pointer;
    min-width: max-content;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9.717" height="6" viewBox="0 0 9.717 6"><path id="Path_30" data-name="Path 30" d="M9.752,6,8.61,7.142l3.709,3.717L8.61,14.575l1.142,1.142,4.858-4.858Z" transform="translate(15.717 -8.61) rotate(90)" fill="%23fff"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px auto;
    padding-left: 10px;
    padding-right: 28px;
    width: 100%;
    border: 1px solid var(--black-9);
}
.select-ticket .selected{
    background-color: var(--green);
}
.select-ticket:active .selected{
    background-color: var(--black-6);
}


body.light-mode .select-ticket .selected,
.select-ticket.light-select-dd .selected {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9.717" height="6" viewBox="0 0 9.717 6"><path id="Path_30" data-name="Path 30" d="M9.752,6,8.61,7.142l3.709,3.717L8.61,14.575l1.142,1.142,4.858-4.858Z" transform="translate(15.717 -8.61) rotate(90)" fill="%23192226"/></svg>');
}

.select-ticket .options {
    position: absolute;
    max-height: 400px;
    overflow: auto;
    list-style-type: none;
    padding: 0;
    margin: 0 !important;
    margin: 0;
    z-index: 9;
}

.select-ticket .options li {
    padding: 10px;
    margin: 0 !important;
    cursor: pointer;
}
body.dark-mode .select-ticket .options li {
    background-color: var(--text-light);
    color: var(--text-dark);
}
body.light-mode .select-ticket .options li {
    background-color: var(--text-dark);
    color: var(--text-light);
}
.select-ticket .options,
.select-ticket .options li:last-child {
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
}

.select-ticket .options li:hover {
    background-color: var(--gray) !important;
    color: var(--text-light);
}

.select-ticket .selected.active{
    background-color: var(--black-6);
    border:1px solid var(--green);
}
body.light-mode .together-svg svg {
    fill: var(--text-dark);
}
body.dark-mode .together-svg svg {
    fill: var(--text-light);
}
.map-color-info {
	display: grid;
	grid-template-columns: repeat(3, max-content);
	gap: 10px;
	width: max-content;
}
.map-color-info > div {
  display: flex;
  align-items: center;
  min-width: 0; /* Important for text truncation */
}
@media (max-width: 768px) {
  .map-color-info{
    grid-template-columns: repeat(2, max-content);
  }
}
@media (max-width: 768px) {
  .map-color-info{
    grid-template-columns: repeat(2, max-content);
  }
}