.contentContainer {

    perspective: 800px;

    position: absolute;
    bottom: 5rem;
    left: 7vw;
    z-index: 100;

    height: 30vh;
    width: 90vw;

    pointer-events: none;

    opacity: 1;
}

.contentContainer.inactive {

    opacity: 0;

    display: none;
    transition-duration: 1s;
    transition-property: opacity;

}

/* @media (max-width: 1200px) {
    .contentContainer {
        bottom: clamp(20px, 5vh, 200px);
        left: clamp(20px, 5vh, 200px);

        height: 50vh;
        width: 40vw;
    }
} */


.showContent {
    position: absolute;
    bottom: 2vh;
    right: 2vw;
    opacity: 1;

    z-index: 100;

    transition-duration: 1s;

    pointer-events: none;
}

.showContent.hide {
    opacity: 0;
    display: block;
    pointer-events: none;
}

.sc-style {
    margin: 0.3rem;
    border-radius: 2.5rem;
    border: solid 0.3rem var(--ui-raised-col);
    box-shadow: 3px -3px 5px 2px var(--ui-highlight-col), -5px 5px 10px 5px var(--ui-shadow-col);
    /* box-shadow: -10px 10px 5px 5px black; */

    /* transform: translateX(80px); */

    transition-duration: 1s;
    transition-property: all;

    pointer-events: none;
}

.sc-style.hide {
    box-shadow: 0px -0px 0px 0px var(--ui-highlight-col), -0px 0px 0px 0px var(--ui-shadow-col);
}

.sc-button {
    pointer-events: all;

    padding: 1.6rem;
    width: 4rem;
    border-radius: 2rem;
    /* background-color: var(--ui-raised-col); */
    text-align: center;
    font-weight: 600;

    box-shadow: -2px 1px 2px 0px var(--ui-shadow-col) inset, 1px -1px 2px 0px var(--ui-highlight-col) inset;

    background: linear-gradient(90deg, var(--ui-col-clear), var(--ui-col-clear) 33%, rgb(0, 255, 213) 57%, rgb(0, 194, 184));
    background-size: 300%;
    background-position: 0%;


    cursor: pointer;
    transition-duration: 0.5s;
    transition-property: all;
}

.sc-button.open {
    width: 2rem;
    background-position: 0%;
}

.sc-button:hover {
    color: white;
    background-position: 100%;
}

.sc-button.hide {
    pointer-events: none;
    cursor: none;
    box-shadow: -0px 0px 0px 0px var(--ui-shadow-col) inset, 0px -0px 0px 0px var(--ui-highlight-col) inset;
}

#overview {
    margin-bottom: 1rem;

    font-size: 1rem;
    color: var(--text-color-main);

    transform: translateX(-1rem);
}

.content {

    z-index: 200;
    /* position: absolute; */

    top: 1rem;
    left: 0;

    max-height: fit-content;

    opacity: 1;
    display: grid;

    transform-style: preserve-3d;
    transition-duration: 1s;

    grid-template-columns: auto;
}

.contentName {
    margin-top: 1rem;
    margin-bottom: 1rem;

    color: var(--text-color-main);

    font-size: 1.2rem;
    font-weight: 800;

    transform: translateX(-1rem);
}

.content.hide {
    /* display:none; */
    opacity: 0;
    pointer-events: none;
}

.content>.hide {
    pointer-events: none;
}




.item {
    pointer-events: all;

    position: relative;
    display: flex;

    width: fit-content;
    min-width: 150px;
    border: 3px, solid rgba(255, 255, 255, 0.3);
    border-radius: 100px;

    z-index: 130;

    align-items: center;

    color: var(--text-color-inactive);
    background-color: rgba(230, 230, 230, 0.3);

    box-shadow: 2px -2px 2px 0px rgba(255, 255, 255, 0.148), -2px 2px 5px 0px rgba(170, 170, 170, 0.236), -0px 0px 0px 0px var(--ui-shadow-col),
        inset 1px -1px 5px 0px rgba(255, 255, 255, 0.141), inset -3px 3px 5px 0px rgba(170, 170, 170, 0.245), inset -1px 1px 2px 0px rgba(255, 255, 255, 0.19);
    /* box-shadow: 2px -2px 5px 5px var(--ui-highlight-col), -3px 3px 5px 1px var(--ui-shadow-col), -0px 0px 0px 0px var(--ui-shadow-col),
            inset 2px -2px 5px 1px var(--ui-highlight-col), inset -0px 0px 0px 0px var(--ui-shadow-col), inset -2x 2px 2px 1px var(--ui-highlight-col); */
    /* debug */
    /* background-color:rgba(0,0,255,0.1); */
    /* transform: translateX(5vh); */
    transition-property: background-color, box-shadow, border, font-weight, transform;
    transition-duration: 1s;
    transition-timing-function: ease-out;

}

.item.hide {
    pointer-events: none;
}

.item.hover {
    box-shadow: 3px -3px 3px 2px var(--ui-highlight-col), -3px 3px 3px 2px var(--ui-shadow-col), -0px 0px 0px 0px var(--ui-shadow-col),
        inset 6px -6px 8px 1px var(--ui-highlight-col), inset -8px 8px 10px 0px rgba(0, 0, 0, 0.4), inset -3px 3px 3px 1px var(--ui-raised-col);
    font-weight: 500;
}

.item.show {
    transform: translateX(-1rem);
    color: var(--text-color-main);
    font-weight: 800;
    border-color: var(--ui-bg-col);
    border-width: 4px;
    background-color: var(--ui-bg-col);
    box-shadow: 3px -3px 5px 5px var(--ui-highlight-col), -3px 3px 5px 5px rgba(0, 0, 0, 0.4), -5px 5px 3px 4px rgba(0, 0, 0, 0.3),
        inset 3px -3px 3px 0px var(--ui-highlight-col), inset -1px 1px 3px 0px var(--ui-shadow-col), inset 0px 0px 0px 0px var(--ui-highlight-col);
}

.item.hover.show {
    box-shadow: 3px -3px 5px 5px var(--ui-highlight-col), -3px 3px 5px 5px rgba(0, 0, 0, 0.4), -10px 10px 7px 8px rgba(0, 0, 0, 0.3),
        inset 6px -6px 8px 0px var(--ui-highlight-col), inset -8px 8px 10px 0px var(--ui-shadow-col), inset 0px 0px 0px 0px var(--ui-highlight-col);

    font-weight: 800;
}


.item>.counter {
    cursor: pointer;

    display: flex;

    /* height: 60px;
    width: 60px; */

    margin-bottom: 0.2rem;
    margin-top: 0.2rem;
    margin-left: 1.2rem;
    margin-right: 0.8rem;
    font-size: 1.2rem;


    /* transition-property: color, font-variation-settings, background-color;
    transition-duration: 0.5s; */
}

.item>.itemName {
    cursor: pointer;
    display: flex;
    margin-right: 1.2rem;
}

.itemText {
    position: relative;
}

.itemText>.annotation {

    pointer-events: none;

    z-index: 125;
    /* padding: 20px; */
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    padding-top: 0px;
    padding-bottom: 1rem;
    margin-bottom: 0px;


    border-radius: 30px;

    font-weight: 300;


    /* text-shadow: 1px 1px 2px var(--ui-bg-col); */
    transform: translate(2rem, -1rem);

    /* animate */
    max-width: 80%;
    max-height: 0;
    opacity: 0;

    border: 0px, solid var(--ui-raised-col);

    box-shadow: 0px -0px 0px 0px var(--ui-highlight-col), -0px 0px 0px 0px var(--ui-shadow-col);

    transition-property: color, padding, font-weight, opacity, max-height, box-shadow, border, margin;
    transition-duration: 1s;

}

.annotation.hover {
    color: var(--text-color-main);
    font-weight: 400;
}

.annotation.show {
    padding-top: 2.3rem;
    margin-bottom: 1rem;

    font-weight: 500;

    max-height: fit-content;
    opacity: 1;
    color: var(--text-color-main);
    background-color: rgba(232, 232, 232, 0.5);

    border: 3px, solid var(--ui-raised-col);

    box-shadow: 1px -1px 10px 0px var(--ui-highlight-col), -5px 5px 15px 0px var(--ui-shadow-col),
        inset 3px -3px 20px 0px var(--ui-highlight-col), inset -5px 5px 20px 0px var(--ui-shadow-col);
}

@media (max-width: 599px) and (max-width: 599px) {
    .contentContainer {
        overflow-y: auto;
        pointer-events: all;
        overflow-x: hidden;

        left: 1vw;

        scroll-behavior: smooth;
        direction: rtl;
    }

    .inactive {
        display: none;
        pointer-events: none;
    }

    .content {
        direction: ltr;

        left: 3vw;
    }
}


@media (min-width: 600px) and (min-height: 600px) {

    .showContent {
        bottom: 2rem;
    }

    .contentContainer {

        left: unset;
        bottom: 10rem;
        right: 3vw;

        height: unset;
        width: 28vw;
    }

    .content {
        top: unset;
        bottom: 2rem;
    }

    .item {
        position: relative;
        right: 0rem;
    }


}