:root {
    --lt-margin-top: 82px;
    --lt-max-width: initial;
    --lt-active-0-offset: 0;
    --lt-active-1-offset: 0;
    --lt-active-2-offset: 0;
    --lt-card-background-color: #fff;
    --lt-card-border-width: 1px;
    --lt-card-border-color: #e0e0e0;
    --lt-card-border-radius: 4px;
    --lt-card-padding: 10px 15px;
    --lt-card-filter: drop-shadow(0 0 4px rgb(0 0 0 / 16%));
    --lt-card-box-shadow:none;
    --lt-card-arrow-height: -14px;
    --lt-card-arrow-width: -16px;
    --lt-card-arrow-color: #fff;
    --lt-card-arrow-active-0-offset: 150px;
    --lt-card-arrow-active-1-offset: 465px;
    --lt-card-arrow-active-2-offset: 0;
    --lt-header-padding: 10px 15px;
    --lt-header-background-color: #fff;
    --lt-header-color: #000;
    --lt-header-font-size: 15px;
    --lt-header-font-weight: bold;
    --lt-body-overflow-y: auto;
    --lt-body-max-height: calc(100vh - 600px);
    --lt-body-padding: 0;
    --lt-item-color: #000;
    --lt-item-font-size: 15px;
    --lt-item-font-weight: 500;
    --lt-item-padding: 20px 15px;
    --lt-item-margin: 0px 0;
    --lt-item-background-color: #fff;
    --lt-item-hover-background-color: #f5f5f5;
    --lt-item-active-background-color: var(--secondary-color-light);
    --lt-item-icon-color: #000;
    --lt-sub-item-color: #000;
    --lt-sub-item-font-size: 13px;
    --lt-sub-item-font-weight: 300;
    --lt-sub-item-padding: 20px 15px 20px 15px;
    --lt-sub-item-margin: 0px 0;
    --lt-sub-item-background-color: #fff;
    --lt-sub-item-hover-background-color: #f5f5f5;
    --lt-sub-item-active-background-color: var(--secondary-color-light);
    --lt-sub-item-icon-color: #000;
}

.location-tab {
    opacity: 0;
    z-index: 200;
    transition: margin 0.5s ease-out, opacity 0.2s ease-out;
    position: absolute;
    margin-top: -100px;
    width: 100%;
    max-width: var(--lt-max-width);
    pointer-events: none;
}
.location-tab[class*="active"] {
    opacity: 1;
    pointer-events: all;
}
.location-tab.active0 {
    margin-left: var(--lt-active-0-offset);
    margin-top: var(--lt-margin-top);
}
.location-tab.active1 {
    margin-left: var(--lt-active-1-offset);
    margin-top: var(--lt-margin-top);
}
.location-tab.active2 {
    margin-left: var(--lt-active-2-offset);
    margin-top: var(--lt-margin-top);
}

.location-tab .card {
    background-color: var(--lt-card-background-color);
    border: var(--lt-card-border-width) solid var(--lt-card-border-color);
    border-radius: var(--lt-card-border-radius);
    filter: var(--lt-card-filter);
    padding: var(--lt-card-padding);
    box-shadow: var(--lt-card-box-shadow);
}
.location-tab .card-header {
    background-color: var(--lt-header-background-color);
    color: var(--lt-header-color);
    font-size: var(--lt-header-font-size);
    font-weight: var(--lt-header-font-weight);
    padding: var(--lt-header-padding);
}
.location-tab .card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 16px solid transparent;
    border-bottom-color: var(--lt-card-arrow-color);
    border-top: 0;
    margin-left: var(--lt-card-arrow-height);
    margin-top: var(--lt-card-arrow-width);
    transition: 0.7s;
}
.location-tab[class*="active"] .card::after {
    transition: 0.7s;
}
.location-tab.active0 .card::after {
    left: var(--lt-card-arrow-active-0-offset);
}
.location-tab.active1 .card::after {
    left: var(--lt-card-arrow-active-1-offset);
}
.location-tab.active2 .card::after {
    left: var(--lt-card-arrow-active-2-offset);
}
.location-tab .card-body {
    overflow-y: var(--lt-body-overflow-y);
    max-height: var(--lt-body-max-height);
    padding: var(--lt-body-padding);
}
.location-tab .item {
    color: var(--lt-item-color);
    font-size: var(--lt-item-font-size);
    font-weight: var(--lt-item-font-weight);
    padding: var(--lt-item-padding);
    background-color: var(--lt-item-background-color);
    margin: var(--lt-item-margin);
    transition: background-color 0.5s ease-out;
    cursor: pointer;
    position: relative;
}
.location-tab .item:hover {
    background-color: var(--lt-item-hover-background-color);
}
.location-tab .item.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--lt-item-active-background-color);
    opacity: 0.1;
}
.location-tab .item i {
    color: var(--lt-item-icon-color);
}

.location-tab .sub-item {
    color: var(--lt-sub-item-color, --lt-item-color);
    font-size: var(--lt-sub-item-font-size, --lt-item-font-size);
    font-weight: var(--lt-sub-item-font-weight, --lt-item-font-weight);
    padding: var(--lt-sub-item-padding, --lt-item-padding);
    background-color: var(--lt-sub-item-background-color, --lt-item-background-color);
    margin: var(--lt-sub-item-margin, --lt-item-margin);
    transition: background-color 0.5s ease-out;
    cursor: pointer;
    position: relative;
}
.location-tab .sub-item:hover {
    background-color: var(--lt-sub-item-hover-background-color, --lt-item-hover-background-color);
}
.location-tab .sub-item.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--lt-sub-item-active-background-color, --lt-item-active-background-color);
    opacity: 0.1;
}
.location-tab .sub-item svg ,
.location-tab .sub-item i {
    color: var(--lt-sub-item-icon-color, --lt-item-icon-color);
}
.location-tab .sub-item.active {
    background-color: var(--lt-sub-item-active-background-color, --lt-item-active-background-color);
}
.location-tab .sub-item.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--lt-sub-item-active-background-color, --lt-item-active-background-color);
    opacity: 0.1;
}
.location-tab .sub-item i {
    color: var(--lt-sub-item-icon-color, --lt-item-icon-color);
}