#boxedTAMap{
    padding: 0px !important;
    height: 100%;
}

.TABoxes{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0.5em;
    padding-top: 3em;
    overflow: auto;
    gap: 0.5em;
}

.TABox{
    min-width: 20em;
    flex-grow: 0;
    transition: background 0.3s ease;
}

.TABox:not(.TABox__category){
    -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
    -moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
    box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
}

.TABox__category.TABox--closed:not(:hover){
    background: rgba(var(--colUIBack02), 1);
}

.TABox__header{
    height: 3em;
    color: rgb(var(--colUIText02));
    background-color: rgba(var(--colUIBack02),0.75);
}

.noTouch .TABox__header:hover{
    background-color: rgba(var(--colUIBack02), 1);
}

.TABox__title{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5em;
    flex-wrap: nowrap;
    overflow: hidden;
}

.TABox__title>span{
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}



.TABox__icon{
    flex-shrink: 0;
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    border-radius: 0.2em;
    fill: rgb(var(--colUIText03));
    margin-top: -0.125em;
}

.TABox__content{
    background-color: rgba(var(--colUIBack04), 0.8);
    padding: 0px 0.5em;
    flex-direction: column;
    display: flex;
    gap: 0.5em;
}

.accord__content--open.TABox__content{
    padding: 0.5em;
}


.TABox__category{
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(var(--colAccent02), 0.5), transparent 50%),
        radial-gradient(circle at top right, rgb(255 163 0 / 10%), transparent 60%),
        radial-gradient(circle at center, rgba(var(--colAccent02), 0.2), transparent 80%),
        radial-gradient(at bottom left, rgb(255 209 2 / 15%), transparent 60%),
        radial-gradient(at bottom center, rgb(255 0 0 / 10%), transparent 60%),
        radial-gradient(at bottom right, rgba(var(--colAccent01), 0.5), transparent 80%);
}

/* .TABox__category>*{
    position: relative;
} */


/* .TABox__category:before{
    pointer-events: none;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    opacity: 0.2;
    background-attachment: fixed;
    background-image: var(--backgroundImage);
    background-size: cover;
    background-position: inherit;
    background-position: var(--backgroundPosition);
    z-index: -1;
} */

/* .TABox__category:before{
    filter: blur(4px);
    } */

.TABox__chapterButtons{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1em;
}

.TABox__chapterButtons--closed{
    gap: 0px;
    overflow: visible;
}

.button.TABox__chapterButton{
    --chapterButtonMaxWidth: 100%;
    max-width: var(--chapterButtonMaxWidth);
    width: 100%;
    padding: 0.7em;
    padding-right: 2em;
    padding-left: 2.7em;
    display: flex;
    border: 0px solid transparent;
    text-align: left;
    overflow: hidden;
}

/* .noTouch .button.TABox__chapterButton:hover {
    overflow: visible;
 } */


    .button.TABox__chapterButton--active{
        background-color: rgb(var(--colAccent01)) !important;
        color: white;
    }

    .TABox__chapterButtons--closed>.button.TABox__chapterButton:not(.TABox__chapterButton--active){
        height: 0px;
        padding: 0px;
        border: none;
    }

    .TABox__chapterButtons--closed>.button.TABox__chapterButton--active:before{
        --arrowSize: 0.5em;
        position: absolute;
        right: 0.75em;
        content: "";
        width: 0px;
        height: 0px;
        border: 0px solid transparent;
        border-top: var(--arrowSize) solid white;
        border-left: var(--arrowSize) solid transparent;
        border-right: var(--arrowSize) solid transparent;
    }

    .TABox__chapterIcon{
        position: absolute;
        left: 0.7em;
        top: 52%;
        transform: translateY(-50%);
    }

    .button.TABox__chapterButton--active>.TABox__chapterIcon{
        fill: white;
    }

    .button.TABox__chapterButton:not(:hover)>.TABox__chapterTileContainer{
        text-overflow: ellipsis;
    }


    .TABox__chapterTileContainer{
        width: 100%;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


     .TABox__chapterTitle{
        transform: translateX(0%);
    }

        .TABox__chapterButton:hover>.TABox__chapterTileContainer>.TABox__chapterTitle--scrollable,
        .TABox__chapterButton:focus>.TABox__chapterTileContainer>.TABox__chapterTitle--scrollable{
            background-color: inherit;
            display: inline-block;
            transition: transform 1s 0.5s linear;
            transform: translateX(calc(var(--chapterButtonMaxWidth) - (100% + 4.7em)));
        }

    .button.TABox__chapterButton--active>.TABox__title>svg{
        fill: white;
    }


.TABox__chapterModules{
    display: flex;
    flex-direction: column;
    gap: 2em;
}


.TABox__modules{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 1em;
    border-radius: 0.5em;
    overflow: hidden;
}

.TABox__detailButton{
    width: 100%;
    height: 3em;
}

.noTouch .button.TABox__detailButton:hover{
    background-color: rgb(var(--colAccent01)) !important;
    border-color: rgb(var(--colAccent01)) !important;
}

    .TABox__modules--categoryLike{
        position: relative;
        padding: 0.5em;
        background:
            radial-gradient(circle at top left, rgba(var(--colAccent02), 0.5), transparent 50%),
            radial-gradient(circle at top right, rgb(255 163 0 / 10%), transparent 60%),
            radial-gradient(circle at center, rgba(var(--colAccent02), 0.2), transparent 80%),
            radial-gradient(at bottom left, rgb(255 209 2 / 15%), transparent 60%),
            radial-gradient(at bottom center, rgb(255 0 0 / 10%), transparent 60%),
            radial-gradient(at bottom right, rgba(var(--colAccent01), 0.5), transparent 80%);
    }

.TABox__module{
    width: 100%;
    background-color: rgb(var(--colUIBack04));
    padding: 1em;
    border-radius: 0.5em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.TABox__module.inactive{
    opacity: 0.5 !important;
}

.TABox__moduleHeadline {
    margin-top: 0px;
    font-size: 1.2em;
}

.TABox__detailNumbers{
    display: none;
}

.TABox__category>.accord__gridWrapper>.TABox__content,
.TABox__category>.TABox__header{
    background-color: unset;
}

.TABox__category>.TABox__header>.TABox__title>svg{
    fill: rgb(var(--colUIText02));
}

.noTouch .TABox__category>.TABox__header:hover{
    background-color: rgba(var(--colUIBack01),0.1);
}



/* ------------------------------- Media Queries----------------------------------- */


@media (min-width: 34em){

    .button.TABox__chapterButton {
        width: 0;
        min-width: 12em;
    }
}


@media (min-width: 38em){

    .TABox__detailButton{
        float: right;
        width: 12em;
    }

    .button.TABox__chapterButton {
        width: 100%;
        --chapterButtonMaxWidth: 16em;
    }

    .TABox__module{
        max-width: 24.5em;
    }

}



@media (min-width: 48em){

    .TABoxes{
        padding: 1em;
        padding-top: 4em;
        gap: 1em;
    }

    .TABox__content {
        padding: 0px 1em;
        gap: 1em;
    }

    .accord__content--open.TABox__content{
        padding: 1em;
    }

    .TABox__modules--categoryLike {
        padding: 1em;
    }

    .TABox__category>.accord__header>.TABox__title>span {
        font-size: 1.4em;
    }

    .TABox__category>.TABox__header{
        height: 3.5em;
    }

    .TABox__moduleHeadline {
        font-size: 1.3em;
    }


}

@media (min-width: 60em){
    .button.TABox__chapterButton {
        --chapterButtonMaxWidth: 16em;
    }



}

@media (min-width: 118em){

    .button.TABox__chapterButton {
        --chapterButtonMaxWidth: 24.5em;
    }
}

@media (min-height: 42em){

    .TABox__detailNumbers{
        display: block;
    }
}