: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;
}

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

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

@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")
}