:root {
    --currentItem: 0;
    --currentItemWidth: 100px;
}


.clonerContainer {
    width: max-content !important;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: var(--primary-blur);
    left: 50% !important;
    transform: translateX(-50%);
    border-radius: var(--primary-radius);
    z-index: auto;
}

.clonerContainer > .ggskin_cloner {
    width: max-content !important;
    position: relative !important;
    display: flex;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    border-radius: var(--primary-radius);
    /* z-index: 2; */
}

div:has(>.clonerItem) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clonerContainer .clonerItem {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clonerContainer div:has(>.clonerItem):not(:last-child)::after {
    content: "";
    width: 2px;
    height: 90%;
    background-color: #fff;
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translate(0px, -50%);
}

.clonerContainer .clonerItem > div {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: break-spaces !important;
    border-radius: var(--primary-radius);
}

.clonerContainer .activeBackground {
    border-radius: var(--primary-radius);
    transition: left 200ms linear;
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%);
    left: calc((var(--currentItemWidth) * var(--currentItem)) + 4px) !important;
}

.clonerContainer:has(div:has(>.activeTransition):last-child) .activeBackground {
    left: calc((var(--currentItemWidth) * var(--currentItem)) + 5px) !important;
}

.clonerContainer:has(.ggskin_cloner > div:last-child > .clonerItem.activeTransition) .activeBackground {
    left: calc((var(--currentItemWidth) * var(--currentItem)) + 5px) !important;
}

.popup_image {
    pointer-events: none !important;
    overflow: visible !important;
}

.popup_image img {
    pointer-events: all !important;
    width: auto !important;
    height: auto !important;
    max-width: 90vw !important;
    max-height: 85vh !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0px !important;
}

.Popup_Body .pop h3 {
    text-align: left;
}

.pop h3 {
    margin: 0px 0px 10px 0px;
    text-align: center;
}

/* Table */
table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-family: Poppins, sans-serif;
}

td,
th {
    border: 1px solid #ffffff;
    text-align: left;
    padding: 4px;
}

tr:nth-child(even) {
    background-color: #dddddd00;
}

td:nth-child(1) {
    width: 150px;
}

/* Target the main container */
.Popup_Body {
    /* Firefox scrollbar styling */
    scrollbar-width: thin;
    /* makes scrollbar thinner */
    scrollbar-color: #888 #f1f1f1;
    /* thumb color + track color */
}

/* Apply the same to any inner element */
.Popup_Body * {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

/* WebKit browsers (Chrome, Edge, Safari) */
.Popup_Body::-webkit-scrollbar,
.Popup_Body *::-webkit-scrollbar,
.info_body > div::-webkit-scrollbar {
    width: 6px;
    /* thin scrollbar width */
    height: 6px;
    /* thin horizontal scrollbar height */
}

.Popup_Body::-webkit-scrollbar-track,
.Popup_Body *::-webkit-scrollbar-track,
.info_body > div::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* track color */
}

.Popup_Body::-webkit-scrollbar-thumb,
.Popup_Body *::-webkit-scrollbar-thumb,
.info_body > div::-webkit-scrollbar-thumb {
    background-color: #888;
    /* thumb color */
    border-radius: 3px;
    /* rounded corners */
}

/* Font config */
body {
    font-family: 'Outfit', sans-serif;
}

.ggskin {
    font-family: 'Outfit' !important;
    font-size: 16px !important;
}

.menu_background .logoContainer {
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu_background .logoContainer svg {
    width: 90px;
}

@font-face {
    font-family: Outfit;
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url(./Fonts/Outfit-ExtraLight.woff2) format("woff2")
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-display: swap;
    src: url(./Fonts/poppins-light-webfont.woff2) format("woff2")
}