/* bootstrap theme mod */

@import "sidebars.css";
@import "structure.css";
@import "templedit.css";
@import "tiptap.css";

:root{
    --mainNavWidth: 200px;
}
img, video {
    max-width: 100%;
}

/* hier möglichst keine Farbwerte, sondern Variablen angeben */

.bg-brand{
    background-color: var(--brand-bg-color) !important;
    color: #fff;
}

#mainContainer{
    min-height: 100vh;
    margin-left: var(--mainNavWidth);
    width: calc(100% - var(--mainNavWidth));
    overflow-y: auto;
}
#mainNav{
    position: fixed;
    background-color: var(--brand-bg-color) !important;
    width: var(--mainNavWidth);
    left: 0;
    top: 0;
    height: 100vh;
}
#mainNav .mainNavContent{
    width: calc(var(--mainNavWidth) - 2rem);
}

@media(orientation: portrait){
    #mainNav{
        height: 60px;
        overflow-y: hidden;
        width: 100%;
        transition: all .5s;
        z-index: 10000;
    }
    #mainNav:hover{
        height: calc(100vh - 60px);
        transition: all .5s;
        z-index: 10000;
    }
    #mainContainer{
        margin-left: 0;
        width: 100%;
        margin-top: 60px;
    }
    #mainNav ul{
        column-count: 2;
    }
    #mainNav ul ul{
        column-count: 1;
        break-inside: avoid;
    }
    .modal-dialog,
    .offcanvas-end{
        top: 60px !important;
    }
}

.icon-flipped {
    display: inline-block;
    transform: scaleX(-1);
}

.lrn-dia{
    width: 100%;
    height: 200px;
    border: 1px solid rgb(128, 128, 128);
    background-size: contain;
    background-position: center center;
    background-color: #eee;
    background-repeat: no-repeat;
    padding: 3px;
}

.clickable{
    cursor: pointer;
}
.clickable:hover{
    color: #0a53be;
}

.richtext-view img{
    max-width: 100%;
}

.transparent-backdrop{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: transparent;
}


.audio-player {
    width: 100%;
    display: block;
}