@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
@import url("https://fonts.googleapis.com/css?family=Poppins:500&display=swap");
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@400;500;600;700&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Barlow+Condensed:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Bangers&family=Bebas+Neue&family=Cabin+Sketch:wght@400;700&family=Cinzel+Decorative:wght@400;700&family=IBM+Plex+Mono:wght@400;600&family=Marcellus&family=Oxanium:wght@400;600;700&family=Permanent+Marker&family=Rajdhani:wght@400;600;700&family=Rye&family=Russo+One&family=Special+Elite&family=Uncial+Antiqua&family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Agdasima:wght@400;700&family=Rubik+Glitch&display=swap');
/* ==================GENERAL================= */


:root {
    --primary-blue: #185ABC;
    --secondary-green: #1BA260;
    --secondary-yellow: #FFCE4B;
    --secondary-red: #9F1E22;
    --secondary-grey: #e4e4e4;
    --orange: #ff811b;
    --blue: #1A73E8;
    --darkblue: rgb(5, 88, 177);
    --darkorange: rgb(190, 85, 10);
    --green: #01c875;
    --red: #dc3545;
    --purple: #b30071;
    --white: #ffffff;
    --black: #444;
    --bodybg: white;
    --inversion: 0;
    --fixed-white: #ffffff;
    --fixed-black: #444;
    --white-grey: #ffffff;
    --blue-hover-light: #348af3;
    --grey: #F5F5F5;
    --input-bg: #DDF2FE;
    --border-grey: #D9DBDF;
    --dark-grey: rgb(110, 110, 110);
    --yellow: #FFCE4B;
    --blue-bg: #1a73e833;
    --grey-btn: #F6F7FA;
    --green-timer: #1BA260;
    --grey-bg: #EDF1F7;
    --light-blue: #F4F8FE;
    --primary-indigo: #3f51b5;
    --level-leicht-color: #f18b12;
    --level-mittel-color: #b30071;
    --level-schwer-color: #592075;
    --grey-disabled: #adacac;
    --text-block-bg-white: #ffffff;
    --text-block-bg-blue: #eef8ff;
    --text-block-bg-orange: #fff1df;
    --text-block-bg-purple: #f5efff;
    --text-block-bg-red: #fff0f2;
    /*--white: #000000;
	--black: #ffffff;
	--bodybg: #222222;
	--inversion: 1;*/
}
* {
    color: var(--black);
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.3px;
}

html, body{
    height: 100%;
    overflow: hidden;
    width: 100%;
}

body {
    transition: background-color 0.5s;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-height: 100vh;
}

.box-shadow{
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}


.spacing-wrapper.flexed{
    display: flex;
    gap: 10px;
}

.task-check-box{
    position: relative;
    width: 35px;
}


/* */

*
{
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

._checkbox
{
    display: none;
}

label.tick
{
    position: absolute;
    top: 50%;
    width: 33px;
    height: 33px;
    margin: 0 auto;
    transform: translateY(-50%);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.2s ease transform, 0.2s ease background-color, 0.2s ease box-shadow;
    overflow: hidden;
    z-index: 1;
    border: 1px solid var(--border-grey);
}

label.tick:before
{
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    width: 33px;
    height: 33px;
    margin: 0 auto;
    transform: translateY(-50%);
    border-radius: 50%;
    transition: 0.2s ease width, 0.2s ease height;
    width: 28px;
    height: 28px;
}

label.tick:hover:before
{
    width: 26px;
    height: 26px;
}

label.tick:active
{
    transform: translateY(-50%) scale(0.9);
}

.tick_mark
{
    position: absolute;
    top: -1px;
    right: 0;
    left: 0;
    width: 20px;
    height: 20px;
    margin: 0 auto;
    margin-left: 3px;
    transform: rotateZ(-40deg);
}



.tick_mark:before, .tick_mark:after
{
    content: "";
    position: absolute;
    background-color: #fff;
    border-radius: 1.5px;
    opacity: 0;
    transition: 0.2s ease transform, 0.2s ease opacity;
}

.tick_mark:before
{
    left: 0;
    bottom: 0;
    width: 3px;
    height: 10px;
    box-shadow: -1.5px 0 5px rgba(0,0,0,0.23);
    transform: translateY(-68px)
}

.tick_mark:after
{
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.23);
    transform: translateX(78px)
}

._checkbox:checked + label
{
    background-color: var(--green);
    box-shadow: 0 7px 10px #92ff97;
}

.content-parent:not(:checked) ._checkbox:checked + label.evident
{
    background-color: #3a3c3e;
    box-shadow: 0 7px 10px #9a9da0;
}

._checkbox:checked + label:before
{
    width: 0;
    height: 0;
}

._checkbox:checked + label .tick_mark:before, ._checkbox:checked + label .tick_mark:after
{
    transform: translate(0);
    opacity: 1;
}





#add-block-wrapper{
    left: 0;
    right: 0;
}

.hdd{
    display: none !important;
}


.action-btn{
    position: relative !important;
}

.extend-types{
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
}

.title.ql-container .ql-editor{
    height: unset !important;
    padding: 0px;
}

.answer{
    height: unset !important;
    padding: 0px;
    overflow: visible !important;
}

.started .answer-wrapper, .completed .answer-wrapper, .add-answer-card{
    align-items: center;
}



.answer-wrapper{
    cursor: pointer;
    border-radius: 10px;
    position: absolute !important;
    transition: 0.1s ease;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex !important;
    justify-content: center;
    padding: 20px;
    border: 1px solid white;
}

.answer-wrapper.waves-effect{
    align-items: center;
}

.started.answer-wrapper{
    align-items: center;
}

.answer-container{
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
    grid-gap: 20px;
    justify-items: center;
    align-items: flex-end;
    margin-top: 20px;
    padding-bottom: 50px;
}





.title-wrapper{
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.19);
}


.add-answer i{
    width: 30px;
    color: white !important;
}

.add-answer{
    display: flex !important;
    align-items: center;
}

.add-answer div{
    color: white;
}




.correctness{
    background: white;
}


.correctness.large{
    width: 3.5rem;
    height: 3.5rem;
}


.quiz-elem{
    width: 100%;
    padding: 10px;
}


.quiz-elem:not(:last-child){
    margin-right: 40px;
}

.quiz-wrapper .scroll{
    position: absolute !important;
    left: 10px;
    bottom: 20px;
    height: 50px !important;
    z-index: 98 !important;
    display: flex !important;
    align-items: center;
    gap: 10px;
    justify-content: center;
    padding: 10px;
    border-radius: 10px;
    background: var(--blue) !important;
    border-bottom: 3px solid var(--darkblue);
    color: white !important
}


.quiz-wrapper{
    display: flex;
    flex-flow: column;
}



.quiz-wrapper .scroll i{
    color: inherit !important;
}



.extend .start-quiz{
    height: 100%;
}

.scroll div, .scroll i{
    color: inherit;
}


.scroll:last-of-type, .scroll.dir-right{
    left: unset;
    /* right: 10px; */
}

.scroll[dir="right"] i{
    transform: rotate(180deg);
}

.scroll:last-of-type[dir="left"]{
    right: unset !important;
}

.quiz-finish{
    margin-left: auto;
}

.quiz{
    display: flex;
    transition: all 0.2s ease-out;
}

.quiz.extended{
    margin-bottom: 40px;
}

.notification-container{
    z-index: 9999999;
    display: flex;
    flex-direction: column;
    min-height: 90%;
    justify-content: flex-end;
    transition: 0.3s ease-out;
    margin-left: 0%;
    margin-bottom: 20%;
}

.notification-top-container{
    z-index: 9999999;
    display: flex;
    flex-direction: column;
    min-height: 90%;
    justify-content: flex-end;
    transition: 0.2s ease-out;
    margin-left: 0%;
    margin-bottom: 20%;
}

.infinity-mode-wrapper{
    display: flex;
    justify-content: flex-end;
}

.file-answer{
    display: flex;
    justify-content: center;
    align-items: center;
    height:80% !important;
}

.file-answer > div{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.open-submit-btn-area{
    margin-top: 10px;
    width: 100% !important;
    display: flex;
    justify-content: center;
}

.file-upload-submit{
    
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
    
}
.file-upload-submit + label{
    font-size: 1.25em;
    font-weight: 700;
    color: white;
    background-color: var(--blue);
    display: inline-block;
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
}
.file-upload-submit:focus + label, .file-upload-submit + label:hover{
    background-color: var(--blue-hover-light);;
}

.file-upload-submit + .submit-upload-label{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 150px;
    min-height: 110px;
    padding: 18px 20px;
    text-align: center;
}

.submit-upload-label .material-icons{
    font-size: 38px;
    line-height: 1;
}

.submit-upload-label span{
    line-height: 1.2;
}

.file-view{
    display: flex;
    align-items: center;
}

.open-file-icon{
    margin-left: 10px;
}

.submit-type-wrapper{ 
    width:100%;
    justify-content: center;  
    display: flex;
}

.infinity-wrapper{
    display: flex;
    justify-content: space-between; 
}
.infinity-stars{
    display: flex;
}

.edit-course-header-wrapper{
    display: flex;
    justify-content:space-between;
}

.slided{
    margin-left: -100% !important;
}

.slided .slideBtn i{
    transform: rotate(180deg);
}

.slideBtn i{
    transition: 0.2s ease-in-out;
}

.slideBtn:hover{
    transform: scale(1.2);
}

.slideBtn {
    border: none;
    background: none;
    width: 30px;
    height: 30px;
    z-index: 10000000;
	position: fixed;
	bottom: 30px;
    left: 30px;
    cursor: pointer;
    transition: 0.2s ease;
    pointer-events: all;
}

.hidden {
    display: none !important;
}

.dummy{
    flex: 1 1 auto;
}

.notification-top-container{
    z-index: 9999999;
    display: flex;
    flex-direction: column;
    min-height: 90%;
    min-width: 80%;
    justify-content: flex-start;
    transition: 0.3s ease-out;
    margin-left: 0%;
    margin-bottom: 20%;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translate3d(0, -20%, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.notification-top-container .notification{
    flex-grow: 0;
    flex-shrink: 0;
    justify-self: flex-start;
    width: 100%;
    background: white;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
    cursor: pointer;
    animation: fadeIn 1s ease-in both;

}

.notification-container .notification{
    flex-grow: 0;
    flex-shrink: 0;
    justify-self: flex-end;
    width: 300px;
    background: white;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
    cursor: pointer;
}


.notification{
    pointer-events: all;
}

.notification-container .notification .ql-editor *{
    cursor: pointer !important;
}

.notification-top-container .notification .ql-editor *{
    cursor: pointer !important;
}

.notification .not-body{
    max-height: 0px;
    overflow: hidden;
    transition: all 0.5s ease;
}

.acceptance-task{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.helper-message{
    padding: 5px;

}

.notification.expand .not-body{
    max-height: 200px;
}

.color-blue{
    color: var(--blue);
}

.cursor-point *{
    cursor: pointer !important;
}


.answer-wrapper.clicked{
    background: var(--blue);
    border-bottom-color: var(--darkblue);
    transition: all 0.3s ease;
    transform: scale(1.05);
}



.button-main-blue{
    color: var(--blue);
    font-size: 1.2rem;
    padding: 5px;
    transition: all 1s ease;
}

.unavailable{
    background-color :rgba(0, 0, 0, 0.19) !important;
}

.notification-top-parent{
    width:80%;
    overflow: auto;
    position: fixed;
    top: 5px;
    transition: 0.5s ease;
    z-index: 9;
    pointer-events: none;
    display:flex;
    justify-content: center;
    margin:auto;
}

.notification-parent{
    overflow: auto;
    position: fixed;
    top: 5px;
    bottom: 5px;
    left: 5px;
    transition: 0.5s ease;
    z-index: 9;
    pointer-events: none;
}

.finished-ent .tick{
    background-color: var(--green) !important;
    box-shadow: 0 7px 10px #92ff97 !important;
}


.not-head{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar-helper{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}

.avatar-helper img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.not-avatar{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
}

.not-avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.click-wrapper{
    width: 100%;
}

.content-parent:not([type="0"]):not(.full-screen)::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 15px;
    background: var(--yellow);
    border-radius: 10px 0px 0px 10px;
    transition: all 0.5s ease;
}

.finished[type="4"]::after{
    background: var(--green);
}




.acceptance-task div{
    padding: 5px;
    color: var(--blue);
}

.quiz-overlay{
    position: absolute !important ;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-Index: 99;
}


@-webkit-keyframes shake-horizontal {
    0%,
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70% {
      -webkit-transform: translateX(-10px);
              transform: translateX(-10px);
    }
    20%,
    40%,
    60% {
      -webkit-transform: translateX(10px);
              transform: translateX(10px);
    }
    80% {
      -webkit-transform: translateX(8px);
              transform: translateX(8px);
    }
    90% {
      -webkit-transform: translateX(-8px);
              transform: translateX(-8px);
    }
  }
  @keyframes shake-horizontal {
    0%,
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70% {
      -webkit-transform: translateX(-10px);
              transform: translateX(-10px);
    }
    20%,
    40%,
    60% {
      -webkit-transform: translateX(10px);
              transform: translateX(10px);
    }
    80% {
      -webkit-transform: translateX(8px);
              transform: translateX(8px);
    }
    90% {
      -webkit-transform: translateX(-8px);
              transform: translateX(-8px);
    }
  }


.shake-horizontal {
    -webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both !important;
            animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both !important;
}


@-webkit-keyframes bounce-top {
    0% {
      -webkit-transform: translateY(-45px);
              transform: translateY(-45px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
      opacity: 1;
    }
    24% {
      opacity: 1;
    }
    40% {
      -webkit-transform: translateY(-24px);
              transform: translateY(-24px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    65% {
      -webkit-transform: translateY(-12px);
              transform: translateY(-12px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    82% {
      -webkit-transform: translateY(-6px);
              transform: translateY(-6px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    93% {
      -webkit-transform: translateY(-4px);
              transform: translateY(-4px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    25%,
    55%,
    75%,
    87% {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    100% {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
      opacity: 1;
    }
  }
  @keyframes bounce-top {
    0% {
      -webkit-transform: translateY(-45px);
              transform: translateY(-45px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
      opacity: 1;
    }
    24% {
      opacity: 1;
    }
    40% {
      -webkit-transform: translateY(-24px);
              transform: translateY(-24px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    65% {
      -webkit-transform: translateY(-12px);
              transform: translateY(-12px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    82% {
      -webkit-transform: translateY(-6px);
              transform: translateY(-6px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    93% {
      -webkit-transform: translateY(-4px);
              transform: translateY(-4px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    25%,
    55%,
    75%,
    87% {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    100% {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
      opacity: 1;
    }
  }

.bounce-top {
    -webkit-animation: bounce-top 0.9s both !important;
            animation: bounce-top 0.9s both !important;
}

/* */

input,
textarea {
    background-color: var(--white);
    transition: background-color 0.5s;
}
.icon {
    filter: invert(var(--inversion));
    transition: filter 0.5s;
}
.deleteBlock img {
    filter: invert(var(--inversion));
    transition: filter 0.5s;
}
.modal-dialog div:not(.filter-option-inner-inner):not(.courseSelectOptionContent):not(.selectText) {
    background-color: var(--white) !important;
}
.modal-dialog input,
.modal-dialog textarea {
    background-color: var(--bodybg) !important;
}
#loginContainer {
    background-color: var(--white) !important;
}
#loginContainer .loginInput {
    filter: invert(var(--inversion));
    transition: 0.2s ease;
}


#loginContainer input {
    border: 1px solid transparent;
    padding: 5px 25px 5px 25px;
    height: 40px !important;
    line-height: 0px !important;
    font-size: 14px !important;
}




#loginContainer input:focus{
    border-color: var(--orange) !important;
    box-shadow: none !important;
}

.bg-white {
    background-color: var(--white) !important;
}
.KcjO8v8dCPmRoJKaEoVNIz4GBcTyWAqzxzE81Bov {
    filter: invert(var(--inversion));
}
#addChapterBtn {
    background-color: var(--white) !important;
    opacity: 0.7;
}
.form-control {
    background-color: var(--bodybg) !important;
}
.btn {
    border: 0px;
    color: var(--black);
}
.courseSelectOption,
.dropdown-toggle,
.filter-option-inner-inner,
.courseSelectOptionContent,
.selectText,
.no-results {
    background-color: var(--bodybg) !important;
    color: var(--black) !important;
}

.darkModeIcon {
    color: var(--white);

    width: 30px;
    height: 30px;
    transition: 0.5s;
    cursor: pointer;
    margin-right: 5px;
}
.homeLogoutBtn {
    display: flex;
    justify-items: flex-end;
}
.innerLogoutBtn {
    margin: 2px;
    height: 26px;
}
.modal-header {
    border-bottom: 1px solid var(--bodybg);
}
.modal-footer {
    border-top: 1px solid var(--bodybg);
}
.btn-danger {
    color: var(--fixed-white) !important;
}

body {
    margin: 0;
    background: var(--bodybg);
    background-attachment: fixed;
    overflow-x: hidden;
}

.standardBtn {
    font-family: Poppins;
    font-size: 15px;
    line-height: 1.5;
    color: var(--white);
    display: block;
    background: var(--orange);
    height: 50px;
    border-radius: 25px;
    border: 0px;
    outline: none;
    text-align: center;
}

.standardOutlineBtn {
    text-decoration: none;
    color: var(--black);
    font-family: Poppins;
    font-size: 15px;
    padding-right: 10px;
    display: block;
    border-radius: 4px;
    background-color: var(--white);
    border: 1px;
    border-style: solid;
    border-color: #bebebe;
    transition: filter 0.5s;
}
.standardOutlineBtn:hover {
    filter: invert(1);
    /*background-color: var(--black);
	color: var(--white);*/
}
a:hover {
    text-decoration: none;
    color: var(--black);
}

hr {
    border: none;
    border-top: 1px solid #01152611;
}

form {
    display: block;
}

.user-header-wrapper{
    width: 100%;
    display: flex;
    justify-content: center;
}

.header-home-text{
    display:flex;
    justify-content: space-around;
    align-items: center;
}

.header-home-underline{
    border: 1.5px solid var(--primary-blue);
    border: 1px solid ;
    border-color: var(--primary-blue) transparent transparent transparent;
    border-radius: 100%/13px 10px 0 0;
    width: 58px;
    height: 12px;
    transition: width 0.3s;
}

.header-home-text > div {
    color:var(--primary-blue) !important;
}

.header-home-text > i {
    color:var(--primary-blue) !important;
}

.header-home{
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 5px;
    position: relative;
}
.logoutBtn {
    border: 2px solid var(--secondary-grey);
    border-radius: 5px;
    width: 150px;
    padding: 10px;
    display: flex;
    justify-content: center;
}
.header-home > div{
    color:var(--primary-blue) !important;
}
.main-button {
    /* min-width: 250px; */
    height: 50px;
    background: var(--primary-blue) !important;
    border-radius: 5px;
    padding: 5px;
    padding: 15px;
}

.main-button:hover{
    transform: translateY(-4px);
    box-shadow: 0px 10px 50px rgb(18 45 96 / 20%);;
}

.main-button > div{
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    /* identical to box height */

    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.005em;

    color: #FFFFFF;
}

.head-container {
    display: flex;
    justify-content: center;
    margin-top:15px;
}

.logoutBtn > div{
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 23px;
    text-align: center;
    letter-spacing: 0.005em;
}

.main-container-header{
    margin-left: 14%;
    margin-right: 10%;
    position: relative;
    top: 60px;
}


.header-button{
    margin: 20px;
    text-decoration: none;
    color: var(--black);
    font-family: Poppins;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
}


.header-button > div{
    font-weight: 400;
}

.global-settings-button {
    width: 32px;
    height: 32px;
    margin: 20px;
    border: 0;
    border-radius: 0;
    background: transparent;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: none;
    transition: 0.15s ease-out;
}

.global-settings-button[hidden] {
    display: none !important;
}

.global-settings-button:hover {
    transform: translateY(-2px);
    box-shadow: none;
}

.global-settings-button i {
    color: var(--primary-blue);
    font-size: 24px;
}

.logoutIcon {
    width: 30px;
    margin-right: 5px;
}

.clear {
    clear: both;
}

.noborder {
    border: 0px solid black;
}

h2 * {
    font-size: 2rem !important;
}
.pointer {
    cursor: pointer;
}
.greyscale {
    filter: contrast(0.01);
}

/* ===============SKINS=============== */
body.skin-dark {
    --bodybg: #151a23;
    --white: #222936;
    --black: #d8dee9;
    --white-grey: #1b222e;
    --grey: #252d3a;
    --grey-bg: #252d3a;
    --light-blue: #1b2839;
    --input-bg: #2a3444;
    --border-grey: #3a4556;
    --secondary-grey: #394556;
    --dark-grey: #b8c2d1;
    --blue: #245aa3;
    --darkblue: #173d73;
    --primary-blue: #2f63b3;
    --blue-hover-light: #326dbd;
    --blue-bg: rgba(36, 90, 163, 0.28);
    --text-block-bg-white: #222936;
    --text-block-bg-blue: #182d46;
    --text-block-bg-orange: #38291d;
    --text-block-bg-purple: #32243d;
    --text-block-bg-red: #3a222a;
}

/* Keep the unavailable settings state stronger than every skin/mobile override. */
html body #globalSettingsBtn[hidden],
html body #globalSettingsBtn.has-no-settings {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ==================MAGIE-SKIN V2: ARCANE HEADER POLISH================== */
body.skin-magic {
    --skin-hero-height: 430px;
    --skin-profile-size: 158px;
    --skin-profile-top: 58%;
    --skin-profile-left: clamp(34px, 7vw, 122px);
    --skin-profile-translate: translateY(-50%);
}

/* Eine einzige, ruhige Navigationsleiste statt des ueberlaufenden Turms. */
body.skin-magic .main-container-header {
    position: absolute;
    top: 18px;
    right: 3.5%;
    left: 3.5%;
    z-index: 90;
    display: flex;
    width: 93%;
    height: 74px;
    min-height: 74px;
    padding: 9px 14px;
    gap: 8px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid rgba(239, 208, 113, .7);
    border-radius: 22px 4px 22px 4px;
    background:
        linear-gradient(90deg, rgba(28, 10, 38, .95), rgba(61, 24, 73, .91) 54%, rgba(29, 11, 43, .96)) !important;
    box-shadow:
        0 0 0 1px rgba(148, 82, 197, .22) inset,
        0 0 24px rgba(172, 99, 224, .24),
        0 14px 30px rgba(14, 4, 19, .34);
    backdrop-filter: blur(9px);
}

body.skin-magic .main-container-header::before {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 5px;
    left: 14px;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(239, 208, 113, .85), transparent);
    box-shadow: 0 0 9px rgba(239, 208, 113, .62);
}

body.skin-magic .main-container-header .home {
    order: 0;
    flex: 0 0 auto;
    width: auto;
    min-width: 146px;
    margin: 0 8px 0 0;
    padding: 3px 10px;
    justify-content: flex-start;
}

body.skin-magic .main-container-header #chapterGroupName {
    order: 1;
    display: block;
    flex: 1 1 340px;
    width: auto;
    min-width: 160px;
    max-width: 560px;
    margin: 0 auto 0 0;
    padding: 4px 14px;
    overflow: hidden;
    color: #ffe59a;
    font-family: var(--skin-font-heading);
    font-size: clamp(16px, 1.45vw, 23px);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: .025em;
    white-space: normal;
    text-overflow: ellipsis;
    text-shadow:
        0 0 5px rgba(255, 236, 166, .88),
        0 0 14px rgba(232, 177, 62, .7),
        0 0 28px rgba(194, 113, 44, .46),
        0 2px 2px rgba(31, 8, 33, .92);
}

body.skin-magic .main-container-header #chapterGroupName * {
    color: inherit;
    text-shadow: inherit;
}

body.skin-magic .main-container-header .header-button,
body.skin-magic .main-container-header .global-settings-button {
    order: 2;
    flex: 0 0 auto;
    width: auto;
    min-width: 42px;
    min-height: 44px;
    margin: 0;
    padding: 8px 11px;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 12px 2px 12px 2px;
}

body.skin-magic .main-container-header .header-button:hover,
body.skin-magic .main-container-header .global-settings-button:hover {
    border-color: rgba(239, 208, 113, .58);
    background: rgba(132, 67, 151, .24);
    box-shadow: 0 0 14px rgba(210, 151, 69, .2);
}

body.skin-magic .main-container-header .header-home {
    flex-direction: row;
}

body.skin-magic .main-container-header .header-home::after,
body.skin-magic .main-container-header .header-home::before {
    display: none;
}

body.skin-magic .main-container-header .logoutBtn {
    width: auto;
    min-width: 132px;
    margin: 0;
}

/* Profil und Kursdaten bekommen unterhalb der Navigation ihre eigene Buehne. */
body.skin-magic .header-user-info {
    z-index: 72;
    width: 330px;
    align-items: center;
    text-align: center;
}

body.skin-magic .header-user-info #profilePicture {
    border-color: #efd071 !important;
    box-shadow:
        0 0 0 7px rgba(137, 74, 177, .72),
        0 0 0 10px rgba(239, 208, 113, .42),
        0 0 28px rgba(232, 177, 62, .58),
        0 18px 36px rgba(18, 4, 25, .48) !important;
}

body.skin-magic #profileTextContainer {
    min-width: 300px;
    margin-top: 15px;
    padding: 7px 20px 8px;
    border: 1px solid rgba(239, 208, 113, .6);
    border-radius: 14px 2px 14px 2px;
    background: linear-gradient(90deg, rgba(38, 13, 48, .92), rgba(75, 31, 84, .88));
    box-shadow: 0 0 18px rgba(184, 104, 221, .2);
}

body.skin-magic #profileTextContainer,
body.skin-magic #profileTextContainer * {
    color: #fff1cb;
    text-shadow: 0 1px 2px rgba(20, 4, 24, .95), 0 0 8px rgba(226, 181, 73, .28);
}

body.skin-magic .header-user-info .user-role {
    margin-top: 7px;
    color: #ead9e8;
    text-shadow: 0 1px 2px rgba(20, 4, 24, .95);
}

body.skin-magic .level-bar-wrapper {
    z-index: 70 !important;
    margin-top: -38px !important;
    margin-left: clamp(370px, 31vw, 600px) !important;
    box-shadow: 0 0 20px rgba(217, 156, 61, .2);
}

body.skin-magic .user-header-wrapper::after {
    right: 5%;
    bottom: 24px;
    max-width: 330px;
    color: #ffe8a8;
    text-shadow: 0 0 10px rgba(239, 208, 113, .58);
}

/* Goldene Kapitelhierarchie mit dosiertem magischem Leuchten. */
body.skin-magic .chapter-top h1,
body.skin-magic .chapter-content h1,
body.skin-magic .chapter-content h2,
body.skin-magic .chapter-content h3,
body.skin-magic .chapter-block-list h1,
body.skin-magic .chapter-block-list h2,
body.skin-magic .chapter-block-list h3 {
    color: #f8d778 !important;
    text-shadow:
        0 0 5px rgba(255, 235, 160, .64),
        0 0 15px rgba(214, 155, 48, .46),
        0 2px 3px rgba(35, 8, 40, .9);
}

@media (max-width: 1180px) {
    body.skin-magic .main-container-header {
        right: 2%;
        left: 2%;
        width: 96%;
    }

    body.skin-magic .main-container-header .home {
        min-width: 112px;
    }

    body.skin-magic .main-container-header #chapterGroupName {
        flex-basis: 230px;
        max-width: 360px;
        font-size: 16px;
    }

    body.skin-magic .main-container-header .header-button,
    body.skin-magic .main-container-header .global-settings-button {
        padding-right: 8px;
        padding-left: 8px;
    }

    body.skin-magic .main-container-header .logoutBtn {
        min-width: 112px;
    }
}

@media (max-width: 820px) {
    body.skin-magic {
        --skin-hero-height: 390px;
        --skin-profile-size: 126px;
        --skin-profile-top: 57%;
        --skin-profile-left: 50%;
        --skin-profile-translate: translate(-50%, -50%);
    }

    body.skin-magic .main-container-header {
        top: 8px;
        height: 60px;
        min-height: 60px;
        padding: 6px 8px;
        gap: 3px;
    }

    body.skin-magic .main-container-header .home {
        min-width: 52px;
        margin-right: 2px;
        padding: 2px 4px;
    }

    body.skin-magic .main-container-header #chapterGroupName {
        flex-basis: 150px;
        min-width: 110px;
        padding: 3px 6px;
        font-size: 13px;
        line-height: 1.12;
    }

    body.skin-magic .main-container-header .header-button,
    body.skin-magic .main-container-header .global-settings-button {
        min-width: 36px;
        min-height: 38px;
        padding: 6px;
    }

    body.skin-magic .main-container-header .header-button span,
    body.skin-magic .main-container-header .global-settings-button span,
    body.skin-magic .main-container-header .logoutBtn span {
        display: none;
    }

    body.skin-magic .main-container-header .logoutBtn {
        min-width: 38px;
    }

    body.skin-magic .header-user-info {
        width: 250px;
    }

    body.skin-magic #profileTextContainer {
        min-width: 220px;
        margin-top: 10px;
        padding: 5px 10px;
    }

    body.skin-magic .level-bar-wrapper {
        margin-top: -30px !important;
        margin-left: 8px !important;
        transform: scale(.82);
        transform-origin: left center;
    }

    body.skin-magic .user-header-wrapper::after {
        display: none;
    }
}

@media (max-width: 560px) {
    body.skin-magic .main-container-header #chapterGroupName {
        display: none;
    }

    body.skin-magic .main-container-header {
        justify-content: space-between;
    }
}

body.skin-glass {
    --bodybg: #edf6ff;
    --white: rgba(255, 255, 255, 0.78);
    --white-grey: rgba(255, 255, 255, 0.72);
    --grey: rgba(245, 248, 252, 0.78);
    --grey-bg: rgba(237, 241, 247, 0.74);
    --light-blue: rgba(244, 248, 254, 0.78);
    --border-grey: rgba(185, 203, 226, 0.8);
}

body.skin-dark,
body.skin-glass {
    background: var(--bodybg);
}

body.skin-dark .chapter-edit-content,
body.skin-glass .chapter-edit-content {
    --primary-blue: #185ABC;
    --secondary-green: #1BA260;
    --secondary-yellow: #FFCE4B;
    --secondary-red: #9F1E22;
    --secondary-grey: #e4e4e4;
    --blue: #1A73E8;
    --darkblue: rgb(5, 88, 177);
    --green: #01c875;
    --red: #dc3545;
    --white: #ffffff;
    --black: #444;
    --bodybg: white;
    --white-grey: #ffffff;
    --grey: #F5F5F5;
    --input-bg: #DDF2FE;
    --border-grey: #D9DBDF;
    --dark-grey: rgb(110, 110, 110);
    --grey-bg: #EDF1F7;
    --light-blue: #F4F8FE;
    --text-block-bg-white: #ffffff;
    --text-block-bg-blue: #eef8ff;
    --text-block-bg-orange: #fff1df;
    --text-block-bg-purple: #f5efff;
    --text-block-bg-red: #fff0f2;
}

body.skin-glass {
    background:
        linear-gradient(135deg, rgba(26, 115, 232, 0.16), rgba(1, 200, 117, 0.09)),
        #edf6ff;
}

body.skin-dark .user-header-wrapper,
body.skin-dark .chapter-page-content {
    background: var(--bodybg);
}

body.skin-dark .header-info-background {
    filter: brightness(0.62) saturate(0.95);
    z-index: 0;
}

body.skin-dark .iiigel-icon-text,
body.skin-dark .user-info,
body.skin-dark .home-paragraph-header,
body.skin-dark #courseHeadline,
body.skin-dark .groupBar,
body.skin-dark .chapter-top h1,
body.skin-dark .chapter-head,
body.skin-dark .chapter-side-bar *,
body.skin-dark .group-tile *,
body.skin-dark .course-tile *,
body.skin-dark .tileOuterBox *,
body.skin-dark .tile-text-big,
body.skin-dark .title-text-big {
    color: var(--black) !important;
}

body.skin-dark .logoutBtn,
body.skin-dark .group-tile,
body.skin-dark .course-tile,
body.skin-dark .tileOuterBox,
body.skin-dark .chapter-side-bar,
body.skin-dark .content-parent:not([type="2"]),
body.skin-dark .chapter-button-collection,
body.skin-dark #add-course,
body.skin-dark #add-group,
body.skin-dark .dialog .dialog-content.settings-dialog {
    background: var(--white) !important;
    border-color: var(--border-grey) !important;
}

body.skin-dark .chapter-content .content-parent:not([type="2"]),
body.skin-dark .chapter-content .content-parent:not([type="2"]) *:not(.ql-syntax):not(.ql-syntax *) {
    color: var(--black) !important;
}

body.skin-dark .chapter-content .computed-content .iiigel-text-box {
    color: #e8eef7 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 4px 14px rgba(0, 0, 0, 0.16);
}

body.skin-dark .chapter-content .computed-content .iiigel-text-box-blue {
    border-color: #63a7ff;
}

body.skin-dark .chapter-content .computed-content .iiigel-text-box-blue[data-text-box-icon]::before {
    color: #63a7ff !important;
}

body.skin-dark .chapter-content .computed-content .iiigel-text-box-red {
    border-color: #ff7f8a;
}

body.skin-dark .chapter-content .computed-content .iiigel-text-box-red[data-text-box-icon]::before {
    color: #ff7f8a !important;
}

body.skin-dark .chapter-content .computed-content .iiigel-text-box-purple {
    border-color: #e48bd2;
}

body.skin-dark .chapter-content .computed-content .iiigel-text-box-purple[data-text-box-icon]::before {
    color: #e48bd2 !important;
}

body.skin-dark .chapter-content .computed-content .iiigel-text-box-orange {
    border-color: #ffad66;
}

body.skin-dark .chapter-content .computed-content .iiigel-text-box-orange[data-text-box-icon]::before {
    color: #ffad66 !important;
}

body.skin-dark .chapter-content .content-parent[type="2"] {
    background: #ffffff !important;
}

body.skin-dark .chapter-content .content-parent[type="2"] .quiz-wrapper,
body.skin-dark .chapter-content .content-parent[type="2"] .memory-wrappper {
    background: #ffffff !important;
}

body.skin-dark .quiz-preview .quiz-preview-background {
    z-index: 0;
}

body.skin-dark .quiz-preview .quiz-preview-g,
body.skin-dark .quiz-preview .start-quiz-container {
    position: relative;
    z-index: 1;
}

body.skin-dark #levelBar {
    background: var(--white) !important;
    border-color: var(--border-grey) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22) !important;
}

body.skin-dark #levelBar > span {
    background: rgba(216, 222, 233, 0.12) !important;
    border-color: var(--border-grey) !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.22) !important;
}

body.skin-dark #myLvl {
    background: var(--blue) !important;
    border-color: var(--bodybg) !important;
    color: #eef3fb !important;
}

body.skin-dark #myXP,
body.skin-dark .level-bar-wrapper .material-icons {
    color: var(--black) !important;
}

body.skin-dark .back-to-chapter i {
    color: var(--black) !important;
}

body.skin-dark .content-parent:not([type="0"]):not(.full-screen)::after,
body.skin-dark .content-parent.finished::after,
body.skin-dark .finished[type="4"]::after {
    opacity: 0.3;
}

body.skin-dark .chapter-item {
    background: var(--white) !important;
    border: 1px solid var(--border-grey);
    color: var(--black) !important;
}

body.skin-dark .chapter-item.finished {
    background: rgba(1, 200, 117, 0.3) !important;
    border-color: rgba(1, 200, 117, 0.45);
    color: var(--black) !important;
}

body.skin-dark .chapter-item:not(.editing):hover,
body.skin-dark .chapter-item.finished:not(.editing):hover {
    background: var(--grey-bg) !important;
}

body.skin-dark .chapter-button-collection a,
body.skin-dark .chapter-button-collection .btn-floating {
    background: transparent !important;
    color: var(--black) !important;
}

body.skin-dark .chapter-button-collection i:not(.red-color),
body.skin-dark .chapter-button-collection .chapter-button-collection-item-blue,
body.skin-dark .chapter-button-collection a:not(.disabled-help) i:not(.red-color) {
    color: var(--primary-blue) !important;
}

body.skin-dark .chapter-button-collection .disabled-help,
body.skin-dark .chapter-button-collection .disabled-help i {
    color: var(--dark-grey) !important;
    opacity: 0.55;
}

body.skin-dark .chapter-item-progress {
    background: rgba(216, 222, 233, 0.16);
}

body.skin-dark .chapter-item-progress.finished {
    background: rgba(47, 99, 179, 0.55);
}

body.skin-dark .course-tile-info,
body.skin-dark .tile-text-small,
body.skin-dark .group-member-count,
body.skin-dark .chapter-list-item-pos,
body.skin-dark .chapter-list-item-pos-max {
    color: var(--dark-grey) !important;
}

body.skin-dark .join-group-input,
body.skin-dark .global-settings-dialog select {
    color: var(--black);
    background-color: var(--input-bg);
    border-color: var(--border-grey);
}

body.skin-dark .quiz-button,
body.skin-dark .button-quiz,
body.skin-dark .button,
body.skin-dark .main-button,
body.skin-dark .color-main,
body.skin-dark .btn-floating:not(.white),
body.skin-dark .switch-active {
    background: var(--blue) !important;
    border-color: var(--darkblue) !important;
    color: #eef3fb !important;
}

body.skin-dark .quiz-button *,
body.skin-dark .button-quiz *,
body.skin-dark .button *,
body.skin-dark .main-button *,
body.skin-dark .switch-active * {
    color: #eef3fb !important;
}

body.skin-dark #add-chapter.white {
    background: var(--blue) !important;
    border-color: var(--darkblue) !important;
}

body.skin-dark #add-chapter.white i,
body.skin-dark #add-chapter.white .btn-text {
    color: #eef3fb !important;
}

body.skin-dark .icon-blue,
body.skin-dark .chapter-button-collection i:not(.red-color),
body.skin-dark .global-settings-button i,
body.skin-dark .header-home-text > div,
body.skin-dark .header-home-text > i {
    color: var(--primary-blue) !important;
}

body.skin-dark .header-button,
body.skin-dark .header-button > div {
    color: var(--black) !important;
}

body.skin-dark .logoutBtn img {
    filter: brightness(0) invert(1);
}

body.skin-dark .group-delete-btn {
    background: none !important;
}

body.skin-dark .group-subject-label {
    background-color: var(--group-subject-color-alpha) !important;
}

body.skin-dark .dialog-content h1 {
    color: var(--black) !important;
}

body.skin-glass .user-header-wrapper,
body.skin-glass .chapter-side-bar,
body.skin-glass .content-parent,
body.skin-glass .chapter-button-collection,
body.skin-glass #add-course,
body.skin-glass #add-group {
    background: var(--white) !important;
    border-color: var(--border-grey) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.skin-glass .header-info-background {
    opacity: 0.82;
}

body.skin-glass {
    --glass-panel: rgba(255, 255, 255, 0.28);
    --glass-panel-strong: rgba(255, 255, 255, 0.42);
    --glass-panel-soft: rgba(255, 255, 255, 0.16);
    --glass-border: rgba(255, 255, 255, 0.66);
    --glass-shadow: 0 22px 70px rgba(15, 58, 120, 0.2), 0 0 34px rgba(114, 211, 255, 0.15);
    --glass-text: #17314f;
    --glass-muted: rgba(23, 49, 79, 0.68);
    --primary-blue: #2357d9;
    --blue: #2357d9;
    --darkblue: #163a9b;
    --black: var(--glass-text);
    --white: var(--glass-panel);
    --grey-bg: rgba(255, 255, 255, 0.36);
    --border-grey: var(--glass-border);
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    background: #dff4ff;
    color: var(--glass-text);
}

body.skin-glass,
body.skin-glass *:not(.material-icons):not(.material-icons-outlined):not(.material-icons-round):not(.material-icons-sharp):not(.material-icons-two-tone) {
    font-family: 'Outfit', 'Inter', sans-serif;
    letter-spacing: 0;
}

body.skin-glass .material-icons {
    font-family: 'Material Icons' !important;
    font-weight: normal !important;
    font-style: normal !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

body.skin-glass .material-icons-outlined {
    font-family: 'Material Icons Outlined' !important;
    font-weight: normal !important;
    font-style: normal !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

body.skin-glass::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.36), transparent 24%),
        radial-gradient(circle at 78% 8%, rgba(77, 112, 245, 0.24), transparent 32%),
        radial-gradient(circle at 72% 78%, rgba(0, 196, 160, 0.2), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)),
        url("/assets/skins/glass-bg.svg") center center / cover no-repeat,
        linear-gradient(135deg, #dff4ff 0%, #b6d7ff 35%, #e0ccff 60%, #bff6eb 100%);
    z-index: -1;
    transform: translateZ(0);
}

body.skin-glass main,
body.skin-glass #content-wrapper,
body.skin-glass .main-container {
    background: transparent !important;
}

body.skin-glass .main-container-header {
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 22px;
    top: 36px;
    margin-left: 13%;
    margin-right: 9%;
}

body.skin-glass .main-container-header .home {
    display: flex;
    align-items: center;
    margin-right: auto;
    text-decoration: none;
}

body.skin-glass .main-container-header .header-button,
body.skin-glass .main-container-header .global-settings-button {
    margin: 0;
    flex: 0 0 auto;
}

body.skin-glass .header-home {
    top: 0;
}

body.skin-glass .header-home-text {
    gap: 4px;
}

body.skin-glass .header-home-text > div {
    font-size: 20px;
}

body.skin-glass .logoutBtn {
    width: auto;
    min-width: 142px;
    gap: 8px;
    padding: 12px 16px;
}

body.skin-glass .user-header-wrapper {
    position: relative;
    background: transparent !important;
}

body.skin-glass .user-header-wrapper::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100px;
    height: 230px;
    background: rgb(255 255 255 / 18%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 22px 60px rgba(38, 80, 128, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 0;
}

body.skin-glass .header-info-background {
    opacity: 0;
}

body.skin-glass .header-user-info {
    z-index: 1;
}

body.skin-glass .header-user-img {
    box-shadow: 0 24px 70px rgba(25, 67, 118, 0.22);
}

body.skin-glass .header-user-img img,
body.skin-glass #profile-picture {
    border: 5px solid rgba(255, 255, 255, 0.74);
}

body.skin-glass .user-info,
body.skin-glass .user-info * {
    color: #ffffff !important;
    text-shadow: 0 2px 14px rgba(13, 35, 82, 0.28);
}

body.skin-glass .iiigel-icon-text,
body.skin-glass .header-button,
body.skin-glass .header-button > div,
body.skin-glass .home-paragraph-header,
body.skin-glass #courseHeadline,
body.skin-glass .groupBar,
body.skin-glass .chapter-top h1,
body.skin-glass .chapter-head,
body.skin-glass .title-text-big,
body.skin-glass .tile-text-big,
body.skin-glass .chapter-side-bar *,
body.skin-glass .chapter-item {
    color: var(--glass-text) !important;
}

body.skin-glass .global-settings-button i,
body.skin-glass .header-home-text > div,
body.skin-glass .header-home-text > i,
body.skin-glass .icon-blue,
body.skin-glass .chapter-button-collection i:not(.red-color) {
    color: var(--primary-blue) !important;
}

body.skin-glass .logoutBtn,
body.skin-glass .chapter-side-bar,
body.skin-glass .content-parent:not([type="2"]),
body.skin-glass .chapter-button-collection,
body.skin-glass #add-course,
body.skin-glass #add-group,
body.skin-glass .dialog .dialog-content.settings-dialog,
body.skin-glass .chapter-item {
    background: var(--glass-panel) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
}

body.skin-glass .group-tile,
body.skin-glass .course-tile,
body.skin-glass .tile,
body.skin-glass .tileOuterBox {
    border-radius: 22px !important;
    overflow: hidden;
    position: relative;
    transform: translateZ(0);
}

body.skin-glass .group-tile,
body.skin-glass .course-tile {
    width: 392px !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow:
        0 28px 80px rgba(13, 70, 135, 0.2),
        0 0 36px rgba(95, 202, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.skin-glass .tileOuterBox {
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.skin-glass .group-tile::after,
body.skin-glass .course-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: inherit;
    padding: 1.5px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.22) 28%, rgba(94, 214, 255, 0.48) 58%, rgba(255, 255, 255, 0.78) 100%);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

body.skin-glass .group-image,
body.skin-glass .course-image,
body.skin-glass .tileCoursePictureDiv {
    height: 205px !important;
    border-radius: 22px 22px 0 0;
}

body.skin-glass .group-tile-infos,
body.skin-glass .course-tile-info,
body.skin-glass .tileInfoWrapper {
    background: rgb(255 255 255 / 18%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -18px 38px rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

body.skin-glass .group-owner-name {
    color: var(--primary-blue) !important;
    font-weight: 600;
}

body.skin-glass .tile-text-small,
body.skin-glass .group-member-count,
body.skin-glass .chapter-list-item-pos,
body.skin-glass .chapter-list-item-pos-max {
    color: var(--glass-muted) !important;
}

body.skin-glass .group-member-img,
body.skin-glass .group-owner-img > img,
body.skin-glass .group-owner {
    border-color: rgba(255, 255, 255, 0.82);
    box-shadow: 0 8px 24px rgba(42, 94, 140, 0.16);
}

body.skin-glass .group-subject-label {
    background-color: var(--group-subject-color-alpha) !important;
    color: var(--glass-text);
    border: 1px solid rgba(255, 255, 255, 0.46);
}

body.skin-glass .group-delete-btn {
    background: rgba(255, 255, 255, 0.0) !important;
}

body.skin-glass .join-group-input,
body.skin-glass .global-settings-dialog select {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(255, 255, 255, 0.62);
    color: var(--glass-text);
}

body.skin-glass .chapter-page-content {
    background: transparent !important;
}

body.skin-glass .chapter-content .content-parent:not([type="2"]),
body.skin-glass .chapter-content .content-parent:not([type="2"]) * {
    color: var(--glass-text) !important;
}

body.skin-glass .chapter-content .content-parent[type="2"] {
    background: #ffffff !important;
}

body.skin-glass .chapter-content .content-parent[type="2"] .quiz-wrapper,
body.skin-glass .chapter-content .content-parent[type="2"] .memory-wrappper {
    background: #ffffff !important;
}

body.skin-glass .quiz-preview .quiz-preview-background {
    z-index: 0;
}

body.skin-glass .quiz-preview .quiz-preview-g,
body.skin-glass .quiz-preview .start-quiz-container {
    position: relative;
    z-index: 1;
}

body.skin-glass #levelBar {
    background: rgba(255, 255, 255, 0.58) !important;
    border-color: rgba(255, 255, 255, 0.64) !important;
    box-shadow: 0 16px 42px rgba(42, 92, 140, 0.16) !important;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}

body.skin-glass #levelBar > span {
    background: rgba(35, 87, 217, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
}

body.skin-glass #myLvl {
    background: linear-gradient(135deg, #2357d9, #7b61ff) !important;
    border-color: rgba(255, 255, 255, 0.78) !important;
    color: #ffffff !important;
}

body.skin-glass #myXP,
body.skin-glass .level-bar-wrapper .material-icons,
body.skin-glass .back-to-chapter i {
    color: var(--glass-text) !important;
}

body.skin-glass .content-parent:not([type="0"]):not(.full-screen)::after,
body.skin-glass .content-parent.finished::after,
body.skin-glass .finished[type="4"]::after {
    opacity: 0.38;
}

body.skin-glass .chapter-item.finished {
    background: rgba(1, 200, 117, 0.28) !important;
    border-color: rgba(1, 200, 117, 0.42) !important;
    color: var(--glass-text) !important;
}

body.skin-glass .chapter-item:not(.editing):hover,
body.skin-glass .chapter-item.finished:not(.editing):hover {
    background: rgba(255, 255, 255, 0.7) !important;
}

body.skin-glass .chapter-button-collection {
    gap: 20px;
}

body.skin-glass .chapter-button-collection a,
body.skin-glass .chapter-button-collection .btn-floating {
    min-width: 38px;
    min-height: 38px;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.3) !important;
    color: var(--glass-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

body.skin-glass .chapter-button-collection .disabled-help,
body.skin-glass .chapter-button-collection .disabled-help i {
    color: var(--glass-muted) !important;
    opacity: 0.55;
}

body.skin-glass .chapter-item-progress {
    background: rgba(255, 255, 255, 0.38);
}

body.skin-glass .chapter-item-progress.finished {
    background: rgba(35, 87, 217, 0.42);
}

body.skin-glass .quiz-button,
body.skin-glass .button-quiz,
body.skin-glass .button,
body.skin-glass .main-button,
body.skin-glass #add-group.main-button,
body.skin-glass #add-course.main-button,
body.skin-glass .color-main,
body.skin-glass .btn-floating:not(.white),
body.skin-glass .switch-active,
body.skin-glass #add-chapter.white {
    background: linear-gradient(135deg, rgba(35, 87, 217, 0.9), rgba(123, 97, 255, 0.86)) !important;
    border-color: rgba(22, 58, 155, 0.58) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 30px rgba(35, 87, 217, 0.22);
}

body.skin-glass .quiz-button *,
body.skin-glass .button-quiz *,
body.skin-glass .button *,
body.skin-glass .main-button *,
body.skin-glass #add-group.main-button *,
body.skin-glass #add-course.main-button *,
body.skin-glass .switch-active *,
body.skin-glass #add-chapter.white i,
body.skin-glass #add-chapter.white .btn-text {
    color: #ffffff !important;
}

body.skin-glass #add-group.main-button,
body.skin-glass #add-course.main-button {
    min-height: 54px;
    padding: 0 24px;
    gap: 10px;
    border-radius: 16px;
}

body.skin-glass #add-group.main-button i,
body.skin-glass #add-course.main-button i {
    width: auto;
    font-size: 24px;
}

body.skin-glass .dialog-content h1 {
    color: var(--glass-text) !important;
}

body.skin-glass #cardoverlay_innerbg {
    background-image: radial-gradient(#dbe7ff, #bfc8ff 46%, #9ddbc8);
}

body.skin-dark .ql-syntax.hljs,
body.skin-dark .ql-syntax .hljs {
    background: #23241f !important;
    color: #f8f8f2 !important;
}

body.skin-dark .ql-syntax .hljs-tag,
body.skin-dark .ql-syntax .hljs-subst {
    color: #f8f8f2 !important;
}

body.skin-dark .ql-syntax .hljs-strong,
body.skin-dark .ql-syntax .hljs-emphasis {
    color: #a8a8a2 !important;
}

body.skin-dark .ql-syntax .hljs-bullet,
body.skin-dark .ql-syntax .hljs-quote,
body.skin-dark .ql-syntax .hljs-number,
body.skin-dark .ql-syntax .hljs-regexp,
body.skin-dark .ql-syntax .hljs-literal,
body.skin-dark .ql-syntax .hljs-link {
    color: #ae81ff !important;
}

body.skin-dark .ql-syntax .hljs-code,
body.skin-dark .ql-syntax .hljs-title,
body.skin-dark .ql-syntax .hljs-section,
body.skin-dark .ql-syntax .hljs-selector-class {
    color: #a6e22e !important;
}

body.skin-dark .ql-syntax .hljs-keyword,
body.skin-dark .ql-syntax .hljs-selector-tag,
body.skin-dark .ql-syntax .hljs-name,
body.skin-dark .ql-syntax .hljs-attr {
    color: #f92672 !important;
}

body.skin-dark .ql-syntax .hljs-symbol,
body.skin-dark .ql-syntax .hljs-attribute {
    color: #66d9ef !important;
}

body.skin-dark .ql-syntax .hljs-params,
body.skin-dark .ql-syntax .hljs-class .hljs-title {
    color: #f8f8f2 !important;
}

body.skin-dark .ql-syntax .hljs-string,
body.skin-dark .ql-syntax .hljs-type,
body.skin-dark .ql-syntax .hljs-built_in,
body.skin-dark .ql-syntax .hljs-builtin-name,
body.skin-dark .ql-syntax .hljs-selector-id,
body.skin-dark .ql-syntax .hljs-selector-attr,
body.skin-dark .ql-syntax .hljs-selector-pseudo,
body.skin-dark .ql-syntax .hljs-addition,
body.skin-dark .ql-syntax .hljs-variable,
body.skin-dark .ql-syntax .hljs-template-variable {
    color: #e6db74 !important;
}

body.skin-dark .ql-syntax .hljs-comment,
body.skin-dark .ql-syntax .hljs-deletion,
body.skin-dark .ql-syntax .hljs-meta {
    color: #75715e !important;
}

body.skin-glass .ql-syntax.hljs,
body.skin-glass .ql-syntax {
    background: #ffffff !important;
    color: var(--glass-text) !important;
}

body.skin-glass .ql-syntax * {
    color: var(--glass-text) !important;
}

body.skin-minecraft {
    --mc-sky: #56b9ff;
    --mc-stone: #2d302f;
    --mc-stone-light: #5d625f;
    --mc-stone-dark: #171917;
    --mc-dirt: #64401f;
    --mc-dirt-dark: #2b1b10;
    --mc-wood: #78481f;
    --mc-wood-light: #9c642e;
    --mc-grass: #4f9f28;
    --mc-grass-light: #83c34a;
    --mc-green: #43a72d;
    --mc-blue: #1672c7;
    --mc-red: #b64225;
    --mc-gold: #f3c843;
    --mc-parchment: #ead8b3;
    --mc-parchment-light: #f7e9c7;
    --mc-parchment-dark: #b9945a;
    --mc-text: #f9f4df;
    --mc-ink: #2b2115;
    --mc-link: #056bd2;
    background:
        linear-gradient(rgba(10, 32, 22, 0.16), rgba(10, 32, 22, 0.28)),
        url("/assets/skins/minecraft-bg.svg") center top / cover fixed;
    color: var(--mc-ink);
}

body.skin-minecraft,
body.skin-minecraft *:not(.material-icons):not(.material-icons-outlined):not(.material-icons-round):not(.material-icons-sharp):not(.material-icons-two-tone):not(.ql-syntax):not(.ql-syntax *) {
    font-family: "Courier New", Courier, monospace;
    letter-spacing: 0;
}

body.skin-minecraft .iiigel-icon-text,
body.skin-minecraft .header-button,
body.skin-minecraft .logoutBtn,
body.skin-minecraft .user-info,
body.skin-minecraft .home-paragraph-header,
body.skin-minecraft #courseHeadline,
body.skin-minecraft .groupBar,
body.skin-minecraft .tile-text-big,
body.skin-minecraft .title-text-big,
body.skin-minecraft .group-owner-name,
body.skin-minecraft .course-owner-name,
body.skin-minecraft .main-button,
body.skin-minecraft .chapter-top h1,
body.skin-minecraft .chapter-head,
body.skin-minecraft .chapter-item,
body.skin-minecraft .dialog-content h1 {
    font-family: "Press Start 2P", "Courier New", monospace !important;
}

body.skin-minecraft .material-icons {
    font-family: "Material Icons" !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
}

body.skin-minecraft .material-icons-outlined {
    font-family: "Material Icons Outlined" !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
}

body.skin-minecraft .chapter-edit-content {
    background: var(--white) !important;
    color: var(--black) !important;
    font-family: "Roboto", sans-serif !important;
}

body.skin-minecraft .chapter-edit-content * {
    font-family: inherit;
}

body.skin-minecraft::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 32px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 32px);
}

body.skin-minecraft main,
body.skin-minecraft #content-wrapper,
body.skin-minecraft .main-container {
    background: transparent !important;
}

body.skin-minecraft .main-container-header {
    min-height: 104px;
    padding: 22px 7vw !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 44%),
        repeating-linear-gradient(0deg, #242726 0 14px, #1a1d1c 14px 28px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 18px, rgba(0, 0, 0, 0.08) 18px 36px) !important;
    border-bottom: 6px solid #0f1211;
    box-shadow: 0 7px 0 rgba(0, 0, 0, 0.45);
}

body.skin-minecraft .iiigel-icon-text {
    color: var(--mc-text) !important;
    font-size: 2rem;
    text-shadow: 4px 4px 0 #000000;
}

body.skin-minecraft .iiigel-icon-text img,
body.skin-minecraft .header-home img,
body.skin-minecraft .logoutBtn img,
body.skin-minecraft .group-image img,
body.skin-minecraft .course-image img,
body.skin-minecraft .tileCoursePictureDiv img,
body.skin-minecraft .group-member-img,
body.skin-minecraft .course-image-m,
body.skin-minecraft .group-owner-img > img,
body.skin-minecraft .group-owner img,
body.skin-minecraft .header-user-img img,
body.skin-minecraft #profile-picture {
    image-rendering: pixelated;
}

body.skin-minecraft .main-container-header .home,
body.skin-minecraft .main-container-header .header-button,
body.skin-minecraft .main-container-header .global-settings-button,
body.skin-minecraft .logoutBtn {
    min-height: 48px;
    border: 4px solid var(--mc-stone-dark) !important;
    border-radius: 2px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 48%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 12px, rgba(0, 0, 0, 0.08) 12px 24px),
        var(--mc-stone-light) !important;
    color: var(--mc-text) !important;
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.25), inset 0 -4px 0 rgba(0, 0, 0, 0.35), 5px 5px 0 rgba(0, 0, 0, 0.35) !important;
    text-shadow: 2px 2px 0 #000000;
}

body.skin-minecraft .header-home-text,
body.skin-minecraft .header-home-text > div,
body.skin-minecraft .header-home-text > i,
body.skin-minecraft .global-settings-button i,
body.skin-minecraft .header-button > div {
    color: var(--mc-text) !important;
}

body.skin-minecraft .header-home {
    background-color: var(--mc-blue) !important;
}

body.skin-minecraft .logoutBtn {
    background-color: var(--mc-red) !important;
}

body.skin-minecraft .logoutBtn img {
    filter: brightness(0) invert(1) drop-shadow(2px 2px 0 #000000);
}

body.skin-minecraft .user-header-wrapper {
    min-height: 360px;
    background: transparent !important;
    position: relative;
    overflow: visible;
}

body.skin-minecraft .user-header-wrapper::before {
    content: "";
    position: absolute;
    left: 20%;
    right: 20%;
    top: 42px;
    bottom: 54px;
    z-index: 0;
    border: 8px solid var(--mc-dirt-dark);
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent 22%, rgba(0, 0, 0, 0.16)),
        repeating-linear-gradient(0deg, #8a5528 0 24px, #6f421f 24px 48px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0 4px, transparent 4px 96px);
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.12), 8px 8px 0 rgba(0, 0, 0, 0.34);
}

body.skin-minecraft .header-info-background {
    display: none !important;
}

body.skin-minecraft .header-user-info {
    position: relative;
    z-index: 1;
}

body.skin-minecraft .header-user-img {
    padding: 10px;
    border-radius: 0 !important;
    background:
        repeating-linear-gradient(0deg, #777b77 0 16px, #505552 16px 32px),
        var(--mc-stone);
    box-shadow: inset 0 0 0 5px #b7b7ad, 7px 7px 0 rgba(0, 0, 0, 0.38);
}

body.skin-minecraft .header-user-img img,
body.skin-minecraft #profile-picture {
    border-radius: 2px !important;
    border: 0 !important;
}

body.skin-minecraft .user-info,
body.skin-minecraft .user-info * {
    color: var(--mc-text) !important;
    text-shadow: 4px 4px 0 #000000;
}

body.skin-minecraft .user-info h1,
body.skin-minecraft .user-info .name {
    font-size: clamp(1.6rem, 3vw, 3rem);
}

body.skin-minecraft .home-paragraph-header,
body.skin-minecraft #courseHeadline,
body.skin-minecraft .groupBar,
body.skin-minecraft .chapter-top h1,
body.skin-minecraft .chapter-head {
    color: var(--mc-text) !important;
    text-shadow: 4px 4px 0 #000000;
}

body.skin-minecraft .home-paragraph-header {
    padding: 26px 0 8px;
}

body.skin-minecraft .group-tile,
body.skin-minecraft .course-tile,
body.skin-minecraft .tileOuterBox {
    position: relative;
    border: 7px solid var(--mc-dirt-dark) !important;
    border-radius: 4px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 35%),
        repeating-linear-gradient(90deg, #7b4a22 0 28px, #5f381b 28px 56px) !important;
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.16), 8px 8px 0 rgba(0, 0, 0, 0.32) !important;
    color: var(--mc-ink) !important;
    overflow: hidden;
}

body.skin-minecraft .group-tile::after,
body.skin-minecraft .course-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 3px solid rgba(255, 255, 255, 0.24);
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.24);
}

body.skin-minecraft .tile {
    border-radius: 4px !important;
}

body.skin-minecraft .group-image,
body.skin-minecraft .course-image,
body.skin-minecraft .tileCoursePictureDiv {
    background:
        linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.18)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 16px, rgba(0, 0, 0, 0.06) 16px 32px) !important;
    border-bottom: 5px solid #2c1b10;
    filter: saturate(1.12) contrast(1.12);
}

body.skin-minecraft .group-image img,
body.skin-minecraft .course-image img,
body.skin-minecraft .tileCoursePictureDiv img {
    filter: saturate(1.18) contrast(1.12);
}

body.skin-minecraft .group-tile-infos,
body.skin-minecraft .course-tile-info,
body.skin-minecraft .tileInfoWrapper {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 38%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 34px),
        var(--mc-parchment) !important;
    color: var(--mc-ink) !important;
    border-top: 4px solid var(--mc-parchment-dark);
}

body.skin-minecraft .group-tile-infos *,
body.skin-minecraft .course-tile-info *,
body.skin-minecraft .tileInfoWrapper * {
    color: var(--mc-ink) !important;
}

body.skin-minecraft .group-owner-name,
body.skin-minecraft .course-owner-name {
    color: var(--mc-link) !important;
    font-size: 0.78rem !important;
    line-height: 1.45;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.68);
}

body.skin-minecraft .tile-text-big,
body.skin-minecraft .title-text-big {
    color: var(--mc-ink) !important;
    font-size: 0.9rem !important;
    line-height: 1.5;
}

body.skin-minecraft .tile-text-small,
body.skin-minecraft .group-member-count,
body.skin-minecraft .chapter-list-item-pos,
body.skin-minecraft .chapter-list-item-pos-max {
    color: var(--mc-ink) !important;
    font-weight: 700;
}

body.skin-minecraft .group-member-img,
body.skin-minecraft .group-owner-img > img,
body.skin-minecraft .group-owner,
body.skin-minecraft .course-owner img {
    border-radius: 2px !important;
    border: 2px solid var(--mc-dirt-dark);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
}

body.skin-minecraft .group-subject-label {
    border: 3px solid rgba(0, 0, 0, 0.38);
    border-radius: 2px !important;
    color: var(--mc-text) !important;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.22), 3px 3px 0 rgba(0, 0, 0, 0.18);
}

body.skin-minecraft .group-delete-btn {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 45%),
        var(--mc-red) !important;
    border: 3px solid #7a2112 !important;
    border-radius: 2px !important;
    color: #ffffff !important;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.28), 3px 3px 0 rgba(0, 0, 0, 0.18);
}

body.skin-minecraft .course-card-settings-btn {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 45%),
        var(--mc-blue) !important;
    border: 4px solid #0b3c72 !important;
    border-radius: 2px !important;
    color: #ffffff !important;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.28), 4px 4px 0 rgba(0, 0, 0, 0.28) !important;
}

body.skin-minecraft .course-card-settings-btn i {
    color: #ffffff !important;
}

body.skin-minecraft .quiz-button,
body.skin-minecraft .button-quiz,
body.skin-minecraft .button,
body.skin-minecraft .main-button,
body.skin-minecraft #add-group.main-button,
body.skin-minecraft #add-course.main-button,
body.skin-minecraft .color-main,
body.skin-minecraft .btn-floating:not(.white),
body.skin-minecraft .switch-active,
body.skin-minecraft #add-chapter.white {
    border: 4px solid #214d16 !important;
    border-radius: 2px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 48%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 12px, rgba(0, 0, 0, 0.08) 12px 24px),
        var(--mc-green) !important;
    color: var(--mc-text) !important;
    box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.25), 5px 5px 0 rgba(0, 0, 0, 0.28) !important;
    text-shadow: 2px 2px 0 #000000;
}

body.skin-minecraft .quiz-button *,
body.skin-minecraft .button-quiz *,
body.skin-minecraft .button *,
body.skin-minecraft .main-button *,
body.skin-minecraft #add-group.main-button *,
body.skin-minecraft #add-course.main-button *,
body.skin-minecraft .switch-active *,
body.skin-minecraft #add-chapter.white i,
body.skin-minecraft #add-chapter.white .btn-text {
    color: var(--mc-text) !important;
}

body.skin-minecraft #add-group.main-button,
body.skin-minecraft #add-course.main-button {
    min-height: 54px;
    padding: 0 24px;
    gap: 12px;
}

body.skin-minecraft #add-group.main-button i,
body.skin-minecraft #add-course.main-button i {
    width: auto;
}

body.skin-minecraft .join-group-input,
body.skin-minecraft .global-settings-dialog select {
    background: var(--mc-parchment-light) !important;
    border: 4px solid var(--mc-dirt-dark) !important;
    color: var(--mc-ink) !important;
}

body.skin-minecraft .dialog .dialog-content.settings-dialog,
body.skin-minecraft .dialog-content,
body.skin-minecraft .course-dialog .dialog-content-wrapper,
body.skin-minecraft .course-dialog .card-wrapper,
body.skin-minecraft .course-dialog .course-tile {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 38%),
        var(--mc-parchment) !important;
    border: 6px solid var(--mc-dirt-dark);
    border-radius: 4px !important;
    color: var(--mc-ink) !important;
}

body.skin-minecraft .dialog-content h1,
body.skin-minecraft .global-settings-dialog label {
    color: var(--mc-ink) !important;
    text-shadow: none;
}

body.skin-minecraft .chapter-page-content {
    background: transparent !important;
}

body.skin-minecraft .chapter-side-bar,
body.skin-minecraft .content-parent:not([type="2"]),
body.skin-minecraft .chapter-button-collection,
body.skin-minecraft .chapter-item {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 32%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 32px),
        var(--mc-parchment) !important;
    border: 5px solid var(--mc-dirt-dark) !important;
    border-radius: 4px !important;
    color: var(--mc-ink) !important;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.24);
}

body.skin-minecraft .chapter-content .content-parent:not([type="2"]),
body.skin-minecraft .chapter-content .content-parent:not([type="2"]) *:not(.ql-syntax):not(.ql-syntax *) {
    color: var(--mc-ink) !important;
}

body.skin-minecraft .chapter-content .content-parent[type="2"],
body.skin-minecraft .quiz-preview,
body.skin-minecraft .quiz-preview .quiz-preview-background,
body.skin-minecraft .quiz-preview .quiz-preview-g,
body.skin-minecraft .quiz-preview .start-quiz-container,
body.skin-minecraft .chapter-content .content-parent[type="2"] .quiz-wrapper,
body.skin-minecraft .chapter-content .content-parent[type="2"] .memory-wrappper {
    background: #ffffff !important;
    color: var(--black) !important;
    font-family: "Roboto", sans-serif !important;
}

body.skin-minecraft .chapter-content .content-parent[type="2"] * {
    color: inherit;
    font-family: inherit !important;
}

body.skin-minecraft #levelBar {
    background: rgba(46, 30, 16, 0.7) !important;
    border: 4px solid var(--mc-stone-dark) !important;
    border-radius: 2px !important;
}

body.skin-minecraft #levelBar > span {
    background: rgba(0, 0, 0, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

body.skin-minecraft #myLvl {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 45%),
        var(--mc-green) !important;
    border: 4px solid #214d16 !important;
    color: var(--mc-text) !important;
    text-shadow: 2px 2px 0 #000000;
}

body.skin-minecraft #myXP,
body.skin-minecraft .level-bar-wrapper .material-icons,
body.skin-minecraft .back-to-chapter i {
    color: var(--mc-text) !important;
    text-shadow: 2px 2px 0 #000000;
}

body.skin-minecraft .content-parent:not([type="0"]):not(.full-screen)::after,
body.skin-minecraft .content-parent.finished::after,
body.skin-minecraft .finished[type="4"]::after {
    opacity: 0.48;
}

body.skin-minecraft .chapter-item.finished {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 32%),
        rgba(79, 159, 40, 0.62) !important;
    border-color: #214d16 !important;
}

body.skin-minecraft .chapter-item:not(.editing):hover,
body.skin-minecraft .chapter-item.finished:not(.editing):hover {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 32%),
        var(--mc-parchment-light) !important;
}

body.skin-minecraft .chapter-button-collection {
    gap: 16px;
}

body.skin-minecraft .chapter-button-collection a,
body.skin-minecraft .chapter-button-collection .btn-floating {
    min-width: 40px;
    min-height: 40px;
    border: 4px solid var(--mc-stone-dark) !important;
    border-radius: 2px !important;
    justify-content: center;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 45%),
        var(--mc-stone-light) !important;
    color: var(--mc-text) !important;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25), 4px 4px 0 rgba(0, 0, 0, 0.22) !important;
}

body.skin-minecraft .chapter-button-collection i:not(.red-color),
body.skin-minecraft .chapter-button-collection .chapter-button-collection-item-blue,
body.skin-minecraft .chapter-button-collection a:not(.disabled-help) i:not(.red-color),
body.skin-minecraft .icon-blue {
    color: var(--mc-text) !important;
}

body.skin-minecraft .chapter-button-collection .disabled-help,
body.skin-minecraft .chapter-button-collection .disabled-help i {
    color: rgba(249, 244, 223, 0.5) !important;
}

body.skin-minecraft .chapter-item-progress {
    background: rgba(43, 27, 16, 0.25);
}

body.skin-minecraft .chapter-item-progress.finished {
    background: rgba(67, 167, 45, 0.72);
}

body.skin-minecraft .ql-syntax.hljs,
body.skin-minecraft .ql-syntax {
    border: 5px solid var(--mc-stone-dark);
    border-radius: 2px;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.24);
}

body.skin-minecraft #cardoverlay_innerbg {
    background:
        linear-gradient(rgba(10, 32, 22, 0.28), rgba(10, 32, 22, 0.38)),
        url("/assets/skins/minecraft-bg.svg") center center / cover !important;
}

@media (max-width: 900px) {
    body.skin-minecraft .main-container-header {
        padding: 14px 18px !important;
        gap: 12px;
    }

    body.skin-minecraft .iiigel-icon-text {
        font-size: 1.15rem;
    }

    body.skin-minecraft .main-container-header .home,
    body.skin-minecraft .main-container-header .header-button,
    body.skin-minecraft .main-container-header .global-settings-button,
    body.skin-minecraft .logoutBtn {
        min-height: 42px;
        border-width: 3px !important;
        box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.32), 3px 3px 0 rgba(0, 0, 0, 0.32) !important;
    }

    body.skin-minecraft .user-header-wrapper {
        min-height: 310px;
    }

    body.skin-minecraft .user-header-wrapper::before {
        left: 6%;
        right: 6%;
        top: 38px;
        bottom: 40px;
    }

    body.skin-minecraft .user-info h1,
    body.skin-minecraft .user-info .name {
        font-size: 1.25rem;
    }

    body.skin-minecraft .home-paragraph-header,
    body.skin-minecraft #courseHeadline,
    body.skin-minecraft .groupBar,
    body.skin-minecraft .chapter-top h1 {
        font-size: 1.25rem;
        line-height: 1.45;
    }
}

body.skin-rpg {
    --rpg-black: #070707;
    --rpg-charcoal: #131313;
    --rpg-stone: #1d1b1a;
    --rpg-stone-light: #34302c;
    --rpg-red: #74150f;
    --rpg-red-light: #b2321e;
    --rpg-blood: #3b0707;
    --rpg-gold: #c99a55;
    --rpg-gold-light: #f0d28a;
    --rpg-gold-dark: #5a3516;
    --rpg-cream: #ead8b1;
    --rpg-muted: #a68c69;
    --rpg-blue: #1d5e88;
    background:
        linear-gradient(rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.48)),
        url("/assets/skins/rpg-bg.svg") center top / cover fixed;
    color: var(--rpg-cream);
}

body.skin-rpg,
body.skin-rpg *:not(.material-icons):not(.material-icons-outlined):not(.material-icons-round):not(.material-icons-sharp):not(.material-icons-two-tone):not(.ql-syntax):not(.ql-syntax *) {
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: 0;
}

body.skin-rpg .iiigel-icon-text,
body.skin-rpg .header-button,
body.skin-rpg .logoutBtn,
body.skin-rpg .user-info,
body.skin-rpg .home-paragraph-header,
body.skin-rpg #courseHeadline,
body.skin-rpg .groupBar,
body.skin-rpg .tile-text-big,
body.skin-rpg .title-text-big,
body.skin-rpg .group-owner-name,
body.skin-rpg .course-owner-name,
body.skin-rpg .main-button,
body.skin-rpg .chapter-top h1,
body.skin-rpg .chapter-head,
body.skin-rpg .chapter-item,
body.skin-rpg .dialog-content h1 {
    font-family: "Cinzel", Georgia, serif !important;
}

body.skin-rpg .material-icons {
    font-family: "Material Icons" !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    color: var(--rpg-gold-light) !important;
}

body.skin-rpg .material-icons-outlined {
    font-family: "Material Icons Outlined" !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    color: var(--rpg-gold-light) !important;
}

body.skin-rpg .chapter-edit-content {
    background: var(--white) !important;
    color: var(--black) !important;
    font-family: "Roboto", sans-serif !important;
}

body.skin-rpg .chapter-edit-content * {
    font-family: inherit;
}

body.skin-rpg::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 24%, rgba(184, 49, 26, 0.18), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(201, 154, 85, 0.12), transparent 24%),
        linear-gradient(90deg, rgba(255, 210, 126, 0.04) 0 1px, transparent 1px 140px);
}

body.skin-rpg main,
body.skin-rpg #content-wrapper,
body.skin-rpg .main-container {
    background: transparent !important;
}

body.skin-rpg .main-container-header {
    min-height: 96px;
    padding: 18px 7vw !important;
    display: flex;
    align-items: center;
    gap: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 42%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.42), transparent 20%, rgba(0, 0, 0, 0.36)),
        repeating-linear-gradient(0deg, #2c2b29 0 18px, #1d1d1c 18px 36px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 54px, rgba(0, 0, 0, 0.14) 54px 108px),
        #1b1a18 !important;
    border-bottom: 3px solid var(--rpg-gold-dark);
    box-shadow: inset 0 -1px 0 rgba(240, 210, 138, 0.32), 0 12px 28px rgba(0, 0, 0, 0.62);
}

body.skin-rpg #chapterGroupName {
    flex: 1 1 auto;
    width: auto;
}

body.skin-rpg .iiigel-icon-text {
    color: var(--rpg-gold-light) !important;
    font-size: 2.1rem;
    text-shadow: 0 2px 0 #000000, 0 0 18px rgba(178, 50, 30, 0.45);
}

body.skin-rpg .iiigel-icon-text img {
    filter: sepia(1) saturate(1.6) hue-rotate(338deg) brightness(0.92) contrast(1.2);
}

body.skin-rpg .main-container-header .header-button,
body.skin-rpg .main-container-header .global-settings-button,
body.skin-rpg .logoutBtn {
    width: 178px;
    min-height: 46px;
    height: 54px;
    padding: 0 14px !important;
    margin: 8px !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 10px solid transparent !important;
    border-image: url("/assets/skins/rpg-button-frame.png") 34 stretch !important;
    border-radius: 0 !important;
    background:
        linear-gradient(180deg, rgba(240, 210, 138, 0.16), transparent 45%),
        linear-gradient(135deg, #221d18, #0c0b0a 58%, #211610) !important;
    color: var(--rpg-gold-light) !important;
    box-shadow: inset 0 0 0 1px rgba(240, 210, 138, 0.18), inset 0 -8px 18px rgba(0, 0, 0, 0.45), 0 8px 18px rgba(0, 0, 0, 0.48) !important;
    text-shadow: 0 1px 0 #000000, 0 0 10px rgba(201, 154, 85, 0.25);
}

body.skin-rpg .main-container-header .home {
    width: auto;
    min-height: 0;
    height: 54px;
    margin: 8px 28px 8px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-image: none !important;
    background: transparent !important;
    box-shadow: none !important;
    flex-direction: row;
    gap: 8px;
}

body.skin-rpg .main-container-header .home img {
    width: 42px;
    height: 42px;
}

body.skin-rpg .global-settings-button::after {
    content: "Einstellungen";
    margin-left: 8px;
    color: var(--rpg-gold-light);
    font-family: "Cinzel", Georgia, serif !important;
    font-size: 0.82rem;
    font-weight: 700;
}

body.skin-rpg .header-home {
    background:
        linear-gradient(180deg, rgba(240, 210, 138, 0.14), transparent 48%),
        linear-gradient(135deg, #3a2415, #0c0b0a) !important;
}

body.skin-rpg .logoutBtn {
    background:
        linear-gradient(180deg, rgba(240, 210, 138, 0.16), transparent 45%),
        linear-gradient(135deg, #8a1c12, #2b0605) !important;
}

body.skin-rpg .header-home-text,
body.skin-rpg .header-home-text > div,
body.skin-rpg .header-home-text > i,
body.skin-rpg .global-settings-button i,
body.skin-rpg .header-button > div {
    color: var(--rpg-gold-light) !important;
}

body.skin-rpg .logoutBtn img {
    filter: sepia(1) saturate(1.8) hue-rotate(340deg) brightness(1.5);
}

body.skin-rpg .user-header-wrapper {
    min-height: 330px;
    background: transparent !important;
    position: relative;
    overflow: visible;
    align-items: center;
    padding: 26px 0 42px;
}

body.skin-rpg .user-header-wrapper::before {
    display: none;
}

body.skin-rpg .header-info-background {
    display: none !important;
}

body.skin-rpg .header-user-info {
    position: relative;
    z-index: 1;
    width: min(1040px, calc(100% - 110px));
    min-height: 238px;
    display: grid !important;
    grid-template-columns: 230px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 52px;
    row-gap: 10px;
    align-items: center;
    align-content: center;
    padding: 34px 74px;
}

body.skin-rpg .header-user-info::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 24px solid transparent;
    border-image: url("/assets/skins/rpg-profile-panel-frame.png") 48 stretch;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.46), rgba(91, 8, 8, 0.12) 44%, rgba(0, 0, 0, 0.54)),
        url("/assets/skins/rpg-panel-bg.png") center center / cover;
    box-shadow: inset 0 0 0 1px rgba(240, 210, 138, 0.24), inset 0 0 80px rgba(0, 0, 0, 0.86), 0 16px 34px rgba(0, 0, 0, 0.62);
}

body.skin-rpg .header-user-info::after {
    content: "";
    position: absolute;
    inset: 20px 32px;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, rgba(240, 210, 138, 0.46), transparent) top / 100% 2px no-repeat,
        linear-gradient(90deg, transparent, rgba(240, 210, 138, 0.32), transparent) bottom / 100% 2px no-repeat,
        radial-gradient(circle at 22% 50%, rgba(201, 154, 85, 0.16), transparent 22%),
        radial-gradient(circle at 86% 50%, rgba(116, 21, 15, 0.22), transparent 28%);
    box-shadow: inset 0 0 0 1px rgba(240, 210, 138, 0.13);
}

body.skin-rpg .header-user-img {
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-self: center;
    position: relative;
    width: 188px;
    height: 188px;
    padding: 0;
    border-radius: 50% !important;
    background: none;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.6);
}

body.skin-rpg .header-user-img::after {
    content: "";
    position: absolute;
    inset: -46px;
    z-index: 2;
    pointer-events: none;
    background: url("/assets/skins/rpg-portrait-frame.png") center center / contain no-repeat;
}

body.skin-rpg .header-user-img img,
body.skin-rpg #profile-picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50% !important;
    border: 2px solid rgba(240, 210, 138, 0.65) !important;
}

body.skin-rpg #profileTextContainer {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    justify-content: flex-start;
    margin: 0;
    transform: translateY(6px);
}

body.skin-rpg .head-container.user-role {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    justify-content: flex-start;
    margin: 8px 0 0;
    transform: translateY(6px);
}

body.skin-rpg .user-info,
body.skin-rpg .user-info * {
    color: var(--rpg-gold-light) !important;
    text-shadow: 0 2px 0 #000000, 0 0 18px rgba(178, 50, 30, 0.48);
    text-align: left;
}

body.skin-rpg .user-info h1,
body.skin-rpg .user-info .name {
    font-size: clamp(2rem, 3.2vw, 3.6rem);
    font-weight: 700;
}

body.skin-rpg .user-info-name {
    font-size: clamp(2.2rem, 3.4vw, 4rem);
    line-height: 1.08;
}

body.skin-rpg .user-info-role {
    font-size: clamp(1.15rem, 1.5vw, 1.7rem);
    margin: 0;
}

body.skin-rpg .home-paragraph-header,
body.skin-rpg #courseHeadline,
body.skin-rpg .groupBar,
body.skin-rpg .chapter-top h1,
body.skin-rpg .chapter-head {
    color: var(--rpg-gold-light) !important;
    text-shadow: 0 2px 0 #000000, 0 0 16px rgba(178, 50, 30, 0.38);
}

body.skin-rpg .home-paragraph-header {
    padding-top: 26px;
}

body.skin-rpg .group-tile,
body.skin-rpg .course-tile,
body.skin-rpg .tileOuterBox {
    position: relative;
    border: 16px solid transparent !important;
    border-image: url("/assets/skins/rpg-box-frame.png") 46 stretch !important;
    border-radius: 0 !important;
    background:
        linear-gradient(135deg, rgba(240, 210, 138, 0.12), transparent 34%),
        linear-gradient(180deg, #1b1714, #0b0b0b) !important;
    box-shadow: inset 0 0 0 1px rgba(240, 210, 138, 0.25), inset 0 0 36px rgba(0, 0, 0, 0.72), 0 14px 30px rgba(0, 0, 0, 0.58) !important;
    color: var(--rpg-cream) !important;
    overflow: hidden;
}

body.skin-rpg .group-tile::after,
body.skin-rpg .course-tile::after {
    content: "";
    position: absolute;
    inset: 8px;
    pointer-events: none;
    border: 1px solid rgba(240, 210, 138, 0.28);
    box-shadow: inset 0 0 30px rgba(178, 50, 30, 0.16);
}

body.skin-rpg .tile {
    border-radius: 0 !important;
}

body.skin-rpg .group-image,
body.skin-rpg .course-image,
body.skin-rpg .tileCoursePictureDiv {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.36)),
        url("/assets/skins/rpg-course-bg.png") center center / cover !important;
    border-bottom: 2px solid var(--rpg-gold-dark);
    filter: none;
    overflow: hidden;
}

body.skin-rpg .group-image img,
body.skin-rpg .course-image img,
body.skin-rpg .tileCoursePictureDiv img {
    display: none !important;
}

body.skin-rpg .group-image::after,
body.skin-rpg .course-image::after,
body.skin-rpg .tileCoursePictureDiv::after {
    content: attr(data-rpg-title);
    position: relative;
    z-index: 1;
    max-width: calc(100% - 44px);
    color: var(--rpg-gold-light);
    font-family: "Cinzel", Georgia, serif !important;
    font-size: clamp(1.28rem, 5.6vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 2px 0 #000000, 0 0 18px rgba(201, 154, 85, 0.42);
}

body.skin-rpg .course-image::before,
body.skin-rpg .group-image::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(240, 210, 138, 0.24);
    box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.58);
}

body.skin-rpg .group-tile-infos,
body.skin-rpg .course-tile-info,
body.skin-rpg .tileInfoWrapper {
    background:
        linear-gradient(135deg, rgba(240, 210, 138, 0.08), transparent 34%),
        radial-gradient(circle at 74% 10%, rgba(116, 21, 15, 0.28), transparent 36%),
        #11100f !important;
    color: var(--rpg-cream) !important;
    border-top: 1px solid rgba(240, 210, 138, 0.22);
}

body.skin-rpg .group-tile-infos *,
body.skin-rpg .course-tile-info *,
body.skin-rpg .tileInfoWrapper * {
    color: var(--rpg-cream) !important;
}

body.skin-rpg .group-owner-name,
body.skin-rpg .course-owner-name {
    color: var(--rpg-gold-light) !important;
    font-size: 0.98rem !important;
    font-weight: 600;
    text-shadow: 0 1px 0 #000000;
}

body.skin-rpg .tile-text-big,
body.skin-rpg .title-text-big {
    color: var(--rpg-gold-light) !important;
    font-size: 1.08rem !important;
    font-weight: 700;
    line-height: 1.35;
}

body.skin-rpg .tile-text-small,
body.skin-rpg .group-member-count,
body.skin-rpg .chapter-list-item-pos,
body.skin-rpg .chapter-list-item-pos-max {
    color: var(--rpg-muted) !important;
}

body.skin-rpg .group-member-img,
body.skin-rpg .group-owner-img > img,
body.skin-rpg .group-owner,
body.skin-rpg .course-owner img {
    border-radius: 50% !important;
    border: 1px solid var(--rpg-gold-dark);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55), 0 0 12px rgba(201, 154, 85, 0.22);
}

body.skin-rpg .group-member-img {
    filter: sepia(1);
}

body.skin-rpg .group-subject-label {
    border: 1px solid var(--rpg-gold-dark);
    border-radius: 0 !important;
    color: var(--rpg-gold-light) !important;
    background-color: rgba(20, 26, 30, 0.86) !important;
    text-shadow: 0 1px 0 #000000;
    box-shadow: inset 0 0 0 1px rgba(240, 210, 138, 0.14), 0 0 14px rgba(0, 0, 0, 0.42);
}

body.skin-rpg .course-subject-label {
    filter: sepia(1) saturate(1.35) brightness(0.9);
    color: var(--rpg-gold-light) !important;
    text-shadow: 0 1px 0 #000000;
}

body.skin-rpg .group-delete-btn {
    background:
        linear-gradient(180deg, rgba(240, 210, 138, 0.18), transparent 45%),
        linear-gradient(135deg, #8f2115, #310707) !important;
    border: 8px solid transparent !important;
    border-image: url("/assets/skins/rpg-button-frame.png") 34 stretch !important;
    border-radius: 0 !important;
    color: var(--rpg-gold-light) !important;
    box-shadow: inset 0 0 0 1px rgba(240, 210, 138, 0.18), 0 8px 18px rgba(0, 0, 0, 0.42);
}

body.skin-rpg .course-card-settings-btn {
    background:
        linear-gradient(180deg, rgba(240, 210, 138, 0.2), transparent 44%),
        linear-gradient(135deg, #4b2b0e, #0c0b0a) !important;
    border: 8px solid transparent !important;
    border-image: url("/assets/skins/rpg-button-frame.png") 34 stretch !important;
    border-radius: 0 !important;
    color: var(--rpg-gold-light) !important;
    box-shadow: inset 0 0 0 1px rgba(240, 210, 138, 0.18), 0 8px 18px rgba(0, 0, 0, 0.42) !important;
}

body.skin-rpg .course-card-settings-btn i {
    color: var(--rpg-gold-light) !important;
}

body.skin-rpg .quiz-button,
body.skin-rpg .button-quiz,
body.skin-rpg .button,
body.skin-rpg .main-button,
body.skin-rpg #add-group.main-button,
body.skin-rpg #add-course.main-button,
body.skin-rpg .color-main,
body.skin-rpg .btn-floating:not(.white),
body.skin-rpg #add-chapter.white {
    border: 10px solid transparent !important;
    border-image: url("/assets/skins/rpg-button-frame.png") 34 stretch !important;
    border-radius: 0 !important;
    background:
        linear-gradient(180deg, rgba(240, 210, 138, 0.18), transparent 46%),
        linear-gradient(135deg, var(--rpg-red), var(--rpg-blood) 68%, #120202) !important;
    color: var(--rpg-gold-light) !important;
    box-shadow: inset 0 0 0 1px rgba(240, 210, 138, 0.2), inset 0 -10px 20px rgba(0, 0, 0, 0.38), 0 10px 22px rgba(0, 0, 0, 0.45) !important;
    text-shadow: 0 1px 0 #000000;
}

body.skin-rpg .quiz-button *,
body.skin-rpg .button-quiz *,
body.skin-rpg .button *,
body.skin-rpg .main-button *,
body.skin-rpg #add-group.main-button *,
body.skin-rpg #add-course.main-button *,
body.skin-rpg .switch-active *,
body.skin-rpg #add-chapter.white i,
body.skin-rpg #add-chapter.white .btn-text {
    color: var(--rpg-gold-light) !important;
}

body.skin-rpg .general-switch,
body.skin-rpg .general-switch.switch-active {
    background: transparent !important;
    border: 1px solid rgba(201, 154, 85, 0.36) !important;
    border-image: none !important;
    box-shadow: none !important;
    color: var(--rpg-gold-light) !important;
    text-shadow: 0 1px 0 #000000;
}

body.skin-rpg input[type="checkbox"].ios8-switch:checked:not(.switch) + label:before,
body.skin-rpg input[type="checkbox"].ios8-switch:checked + label:before {
    background: linear-gradient(90deg, #5a110c, #b7331e) !important;
    border-color: #5a1a11 !important;
}

body.skin-rpg input[type="checkbox"].ios8-switch:checked + label:after {
    background: #f1dfb1 !important;
}

body.skin-rpg #add-group.main-button,
body.skin-rpg #add-course.main-button {
    min-height: 52px;
    padding: 0 24px;
    gap: 12px;
}

body.skin-rpg #add-group.main-button i,
body.skin-rpg #add-course.main-button i {
    width: auto;
}

body.skin-rpg .join-group-input,
body.skin-rpg .global-settings-dialog select {
    background: #0d0d0d !important;
    border: 2px solid var(--rpg-gold-dark) !important;
    color: var(--rpg-cream) !important;
}

body.skin-rpg .dialog .dialog-content.settings-dialog,
body.skin-rpg .dialog-content,
body.skin-rpg .course-dialog .dialog-content-wrapper,
body.skin-rpg .course-dialog .card-wrapper,
body.skin-rpg .course-dialog .course-tile {
    background:
        linear-gradient(135deg, rgba(240, 210, 138, 0.1), transparent 34%),
        #11100f !important;
    border: 16px solid transparent;
    border-image: url("/assets/skins/rpg-box-frame.png") 46 stretch;
    border-radius: 0 !important;
    color: var(--rpg-cream) !important;
    box-shadow: inset 0 0 48px rgba(0, 0, 0, 0.64), 0 18px 44px rgba(0, 0, 0, 0.56);
}

body.skin-rpg .dialog-content h1,
body.skin-rpg .global-settings-dialog label {
    color: var(--rpg-gold-light) !important;
}

body.skin-rpg .chapter-page-content {
    background: transparent !important;
}

body.skin-rpg .chapter-side-bar,
body.skin-rpg .content-parent:not([type="2"]),
body.skin-rpg .chapter-button-collection,
body.skin-rpg .chapter-item {
    background:
        linear-gradient(135deg, rgba(240, 210, 138, 0.08), transparent 34%),
        radial-gradient(circle at 76% 10%, rgba(116, 21, 15, 0.18), transparent 34%),
        #11100f !important;
    border: 14px solid transparent !important;
    border-image: url("/assets/skins/rpg-box-frame.png") 46 stretch !important;
    border-radius: 0 !important;
    color: var(--rpg-cream) !important;
    box-shadow: inset 0 0 42px rgba(0, 0, 0, 0.6), 0 12px 26px rgba(0, 0, 0, 0.42);
}

body.skin-rpg .chapter-content .content-parent:not([type="2"]),
body.skin-rpg .chapter-content .content-parent:not([type="2"]) *:not(.ql-syntax):not(.ql-syntax *) {
    color: var(--rpg-cream) !important;
}

body.skin-rpg .chapter-content .content-parent[type="2"],
body.skin-rpg .quiz-preview,
body.skin-rpg .quiz-preview .quiz-preview-background,
body.skin-rpg .quiz-preview .quiz-preview-g,
body.skin-rpg .quiz-preview .start-quiz-container,
body.skin-rpg .chapter-content .content-parent[type="2"] .quiz-wrapper,
body.skin-rpg .chapter-content .content-parent[type="2"] .memory-wrappper {
    background: #ffffff !important;
    color: var(--black) !important;
    font-family: "Roboto", sans-serif !important;
}

body.skin-rpg .chapter-content .content-parent[type="2"] * {
    color: inherit;
    font-family: inherit !important;
}

body.skin-rpg #levelBar {
    /*background: linear-gradient(180deg, #ff7665 0%, #fff6ef 38%, #ee4e3d 58%, #5a0706 100%) !important;*/
    background: #290806 !important;
    border: 2px solid #5a1a11 !important;
    border-radius: 0 !important;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.62), 0 0 12px rgba(116, 21, 15, 0.28);
}

body.skin-rpg #levelBar > span {
    /*background: linear-gradient(180deg, #ff7665 0%, #fff6ef 38%, #ee4e3d 58%, #5a0706 100%) !important;*/
    border-color: rgba(240, 210, 138, 0.34) !important;
}

body.skin-rpg #myXPbar {
    background: linear-gradient(0deg, rgba(43, 7, 7, 1) 1%, rgba(212, 28, 28, 1) 63%, rgba(255, 196, 196, 1) 82%, rgba(161, 14, 24, 1) 100%) !important;
}

body.skin-rpg #myLvl {
    background:
        linear-gradient(180deg, rgba(240, 210, 138, 0.18), transparent 45%),
        linear-gradient(135deg, #c94726, #6e0b08 64%, #210303) !important;
    border: 2px solid #5a1a11 !important;
    color: var(--rpg-gold-light) !important;
    text-shadow: 0 1px 0 #000000;
}

body.skin-rpg #myXP,
body.skin-rpg .level-bar-wrapper .material-icons,
body.skin-rpg .back-to-chapter i {
    color: var(--rpg-gold-light) !important;
}

body.skin-rpg .side-bar-h1-container {
    padding: 10px 16px !important;
}

body.skin-rpg .side-bar-h1-container h1 {
    color: #ffffff !important;
    text-shadow: 0 1px 0 #000000, 0 0 12px rgba(240, 210, 138, 0.32);
    margin-top: -25px !important;
}

body.skin-rpg .chapter-list-item-wave.waves-effect,
body.skin-rpg .chapter-list-item-wave.waves-effect * {
    color: var(--rpg-gold-light) !important;
}

body.skin-rpg .chapter-side-bar .chapter-list-item,
body.skin-rpg .chapter-side-bar .chapter-list-item span,
body.skin-rpg .chapter-side-bar .chapter-list-item p {
    color: var(--rpg-gold-light) !important;
}

body.skin-rpg .content-parent:not([type="0"]):not(.full-screen)::after,
body.skin-rpg .content-parent.finished::after,
body.skin-rpg .finished[type="4"]::after {
    opacity: 0.42;
}

body.skin-rpg .chapter-item.finished {
    background:
        linear-gradient(135deg, rgba(240, 210, 138, 0.08), transparent 34%),
        rgba(41, 84, 42, 0.62) !important;
    border-color: #386329 !important;
}

body.skin-rpg .chapter-item:not(.editing):hover,
body.skin-rpg .chapter-item.finished:not(.editing):hover {
    background:
        linear-gradient(135deg, rgba(240, 210, 138, 0.14), transparent 34%),
        #201a16 !important;
}

body.skin-rpg .chapter-button-collection {
    gap: 16px;
}

body.skin-rpg .chapter-button-collection a,
body.skin-rpg .chapter-button-collection .btn-floating {
    min-width: 40px;
    min-height: 40px;
    justify-content: center;
    border: 8px solid transparent !important;
    border-image: url("/assets/skins/rpg-button-frame.png") 34 stretch !important;
    border-radius: 0 !important;
    background:
        linear-gradient(180deg, rgba(240, 210, 138, 0.16), transparent 45%),
        #161310 !important;
    color: var(--rpg-gold-light) !important;
    box-shadow: inset 0 0 0 1px rgba(240, 210, 138, 0.16), 0 8px 18px rgba(0, 0, 0, 0.36) !important;
}

body.skin-rpg .chapter-button-collection i:not(.red-color),
body.skin-rpg .chapter-button-collection .chapter-button-collection-item-blue,
body.skin-rpg .chapter-button-collection a:not(.disabled-help) i:not(.red-color),
body.skin-rpg .icon-blue {
    color: var(--rpg-gold-light) !important;
}

body.skin-rpg .chapter-button-collection .disabled-help,
body.skin-rpg .chapter-button-collection .disabled-help i {
    color: rgba(234, 216, 177, 0.4) !important;
}

body.skin-rpg .chapter-item-progress {
    background: rgba(0, 0, 0, 0.42);
}

body.skin-rpg .chapter-item-progress.finished {
    background: rgba(115, 72, 24, 0.72);
}

body.skin-rpg .ql-syntax.hljs,
body.skin-rpg .ql-syntax {
    border: 2px solid var(--rpg-gold-dark);
    border-radius: 0;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.44);
}

body.skin-rpg #cardoverlay_innerbg {
    background:
        linear-gradient(rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.58)),
        url("/assets/skins/rpg-bg.svg") center center / cover !important;
}

@media (max-width: 900px) {
    body.skin-rpg .main-container-header {
        padding: 14px 18px !important;
        gap: 12px;
        flex-wrap: wrap;
    }

    body.skin-rpg .iiigel-icon-text {
        font-size: 1.35rem;
    }

    body.skin-rpg .main-container-header .home,
    body.skin-rpg .main-container-header .header-button,
    body.skin-rpg .main-container-header .global-settings-button,
    body.skin-rpg .logoutBtn {
        width: 156px;
        min-height: 42px;
        height: 50px;
    }

    body.skin-rpg .user-header-wrapper {
        min-height: 300px;
    }

    body.skin-rpg .header-user-info {
        width: calc(100% - 32px);
        min-height: 198px;
        grid-template-columns: 164px minmax(0, 1fr);
        column-gap: 28px;
        padding: 28px 38px;
    }

    body.skin-rpg .header-user-img {
        width: 136px;
        height: 136px;
    }

    body.skin-rpg .header-user-img::after {
        inset: -34px;
    }

    body.skin-rpg .user-info h1,
    body.skin-rpg .user-info .name,
    body.skin-rpg .user-info-name {
        font-size: 1.55rem;
    }

    body.skin-rpg .user-info-role {
        font-size: 1rem;
    }

    body.skin-rpg .home-paragraph-header,
    body.skin-rpg #courseHeadline,
    body.skin-rpg .groupBar,
    body.skin-rpg .chapter-top h1 {
        font-size: 1.35rem;
        line-height: 1.35;
    }
}

/* LCARS-inspired science-fiction skin */
body.skin-lcars {
    --lcars-space: #05070a;
    --lcars-panel: #25243d;
    --lcars-panel-soft: #302a4b;
    --lcars-line: #615b78;
    --lcars-amber: #f4a340;
    --lcars-orange: #ef941f;
    --lcars-peach: #f5b36c;
    --lcars-salmon: #ca7f63;
    --lcars-rose: #c98fbd;
    --lcars-purple: #a98ae1;
    --lcars-blue: #8ea7d7;
    --lcars-cyan: #acd0da;
    --lcars-red: #cf666b;
    --lcars-green: #91b95b;
    --lcars-text: #fff4df;
    --lcars-muted: #d7d7e7;
    --lcars-font-display: "Antonio", "Arial Narrow", sans-serif;
    --lcars-font-ui: "Barlow Condensed", "Arial Narrow", sans-serif;
    --lcars-font-body: "Barlow", Arial, sans-serif;
    --white: var(--lcars-panel-soft);
    --black: var(--lcars-text);
    --bodybg: var(--lcars-space);
    --white-grey: #292641;
    --grey: #352e50;
    --grey-bg: #2d2947;
    --input-bg: #292846;
    --border-grey: var(--lcars-line);
    --dark-grey: var(--lcars-muted);
    --blue: var(--lcars-blue);
    --darkblue: #3d4f9b;
    --primary-blue: var(--lcars-cyan);
    --blue-hover-light: #8ca2ff;
    --blue-bg: rgba(116, 142, 245, 0.2);
    --text-block-bg-white: #302a4b;
    --text-block-bg-blue: #233a59;
    --text-block-bg-orange: #5b3c25;
    --text-block-bg-purple: #49365f;
    --text-block-bg-red: #58323e;
    color: var(--lcars-text);
    background:
        radial-gradient(circle at 74% 10%, rgba(116, 142, 245, 0.11), transparent 27%),
        radial-gradient(circle at 16% 54%, rgba(154, 114, 215, 0.08), transparent 24%),
        linear-gradient(180deg, #05070a, #080b10 62%, #040609);
}

body.skin-lcars,
body.skin-lcars *:not(.material-icons):not(.material-icons-outlined):not(.material-icons-round):not(.material-icons-sharp):not(.material-icons-two-tone):not(.ql-syntax):not(.ql-syntax *) {
    font-family: var(--lcars-font-body);
    letter-spacing: 0.015em;
}

body.skin-lcars h1,
body.skin-lcars h2,
body.skin-lcars h3,
body.skin-lcars h4,
body.skin-lcars h5,
body.skin-lcars h6 {
    font-family: var(--lcars-font-display) !important;
    font-weight: 600;
    letter-spacing: 0.035em;
}

body.skin-lcars::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.6;
    background-image:
        radial-gradient(circle, rgba(245, 166, 35, 0.7) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(116, 142, 245, 0.7) 0 1px, transparent 1.5px);
    background-position: 0 0, 37px 29px;
    background-size: 83px 71px, 119px 101px;
}

body.skin-lcars main,
body.skin-lcars #content-wrapper,
body.skin-lcars .main-container {
    background: transparent !important;
}

body.skin-lcars .material-icons {
    font-family: "Material Icons" !important;
    letter-spacing: normal;
}

body.skin-lcars .material-icons-outlined {
    font-family: "Material Icons Outlined" !important;
    letter-spacing: normal;
}

body.skin-lcars .chapter-edit-content {
    --primary-blue: #185ABC;
    --secondary-green: #1BA260;
    --secondary-yellow: #FFCE4B;
    --secondary-red: #9F1E22;
    --secondary-grey: #e4e4e4;
    --blue: #1A73E8;
    --darkblue: rgb(5, 88, 177);
    --green: #01c875;
    --red: #dc3545;
    --white: #ffffff;
    --black: #444;
    --bodybg: white;
    --white-grey: #ffffff;
    --grey: #F5F5F5;
    --input-bg: #DDF2FE;
    --border-grey: #D9DBDF;
    --dark-grey: rgb(110, 110, 110);
    --grey-bg: #EDF1F7;
    --light-blue: #F4F8FE;
    --text-block-bg-white: #ffffff;
    --text-block-bg-blue: #eef8ff;
    --text-block-bg-orange: #fff1df;
    --text-block-bg-purple: #f5efff;
    --text-block-bg-red: #fff0f2;
    background: #ffffff !important;
    color: #444 !important;
    font-family: "Inter", sans-serif !important;
    letter-spacing: normal;
}

body.skin-lcars .chapter-edit-content *:not(.material-icons):not(.material-icons-outlined):not(.material-icons-round):not(.material-icons-sharp):not(.material-icons-two-tone):not(.ql-syntax):not(.ql-syntax *) {
    font-family: "Inter", sans-serif !important;
    letter-spacing: normal;
}

body.skin-lcars .main-container-header {
    position: relative;
    min-height: 108px;
    padding: 20px 5vw 24px !important;
    gap: 14px;
    background:
        linear-gradient(90deg, rgba(244, 163, 64, 0.32), transparent 30%),
        linear-gradient(135deg, #39294c 0 28%, #27385c 62%, #45304d 100%) !important;
    border-bottom: 2px solid var(--lcars-amber);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}

body.skin-lcars .main-container-header::after {
    content: "";
    position: absolute;
    left: 5vw;
    right: 5vw;
    bottom: 7px;
    height: 8px;
    border-radius: 8px;
    background: linear-gradient(90deg,
        var(--lcars-amber) 0 16%, transparent 16% 17%,
        var(--lcars-purple) 17% 48%, transparent 48% 49%,
        var(--lcars-blue) 49% 71%, transparent 71% 72%,
        var(--lcars-orange) 72% 90%, transparent 90% 91%,
        var(--lcars-red) 91% 100%);
}

body.skin-lcars .main-container-header .home,
body.skin-lcars .main-container-header .header-button,
body.skin-lcars .main-container-header .global-settings-button,
body.skin-lcars .logoutBtn {
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 18px 5px 18px 5px !important;
    background: linear-gradient(180deg, #f7be77, var(--lcars-peach)) !important;
    color: #08090c !important;
    box-shadow: inset 0 -3px 0 rgba(85, 39, 9, 0.22), 0 6px 16px rgba(0, 0, 0, 0.38) !important;
    font-family: var(--lcars-font-ui) !important;
    font-size: 1.08rem;
    font-weight: 600;
    text-transform: uppercase;
}

body.skin-lcars .main-container-header .home {
    padding-left: 62px !important;
    background: linear-gradient(180deg, #f3ae4d, var(--lcars-orange)) !important;
    border-color: rgba(244, 163, 64, 0.8) !important;
    box-shadow: inset 48px 0 0 #c87235, 0 6px 16px rgba(0, 0, 0, 0.38) !important;
}

body.skin-lcars .main-container-header .header-home {
    border-color: rgba(142, 167, 215, 0.9) !important;
    background: linear-gradient(180deg, #a9bce1, var(--lcars-blue)) !important;
}

body.skin-lcars .main-container-header .global-settings-button {
    border-color: rgba(169, 138, 225, 0.9) !important;
    background: linear-gradient(180deg, #c2a8ec, var(--lcars-purple)) !important;
}

body.skin-lcars .logoutBtn {
    border-color: rgba(207, 102, 107, 0.9) !important;
    background: linear-gradient(180deg, #df938c, var(--lcars-salmon)) !important;
}

body.skin-lcars .iiigel-icon {
    filter: brightness(0) saturate(100%);
}

body.skin-lcars .iiigel-icon-text,
body.skin-lcars .header-button > div,
body.skin-lcars .header-home-text,
body.skin-lcars .header-home-text > div {
    color: #090a0d !important;
    font-family: var(--lcars-font-display) !important;
    font-weight: 700;
    letter-spacing: 0.06em;
}

body.skin-lcars .header-home-text > div,
body.skin-lcars .header-home-text > i {
    color: #090a0d !important;
}

body.skin-lcars .global-settings-button i {
    color: #090a0d !important;
    font-size: 25px;
}

body.skin-lcars .logoutBtn,
body.skin-lcars .logoutBtn * {
    color: #090a0d !important;
}

body.skin-lcars .logoutBtn img {
    filter: brightness(0) saturate(100%);
}

body.skin-lcars .user-header-wrapper {
    position: relative;
    min-height: 310px;
    padding: 34px 0 48px;
    overflow: visible;
    background: transparent !important;
}

body.skin-lcars .user-header-wrapper::before {
    content: "";
    position: absolute;
    left: 7%;
    right: 7%;
    top: 30px;
    bottom: 42px;
    z-index: 0;
    border: 2px solid #313846;
    border-left: 78px solid var(--lcars-amber);
    border-radius: 48px 14px 14px 48px;
    background:
        linear-gradient(90deg,
            rgba(202, 127, 99, 0.92) 0 15%,
            #48345f 15% 48%,
            #314a72 48% 76%,
            #655079 76% 100%);
    box-shadow: inset 0 0 38px rgba(0, 0, 0, 0.66), 0 18px 34px rgba(0, 0, 0, 0.46);
}

body.skin-lcars .user-header-wrapper::after {
    content: "";
    position: absolute;
    left: calc(7% + 96px);
    right: calc(7% + 18px);
    bottom: 55px;
    height: 9px;
    z-index: 0;
    border-radius: 8px;
    background: linear-gradient(90deg,
        var(--lcars-orange) 0 24%, transparent 24% 25%,
        var(--lcars-purple) 25% 56%, transparent 56% 57%,
        var(--lcars-blue) 57% 82%, transparent 82% 83%,
        var(--lcars-amber) 83% 100%);
}

body.skin-lcars .header-info-background {
    display: none !important;
}

body.skin-lcars .header-user-info {
    position: relative;
    z-index: 1;
}

body.skin-lcars .header-user-img {
    padding: 7px;
    border: 5px solid var(--lcars-amber);
    border-bottom-color: var(--lcars-purple);
    border-radius: 50% !important;
    background: #030508;
    box-shadow: 0 0 0 4px #161c27, 0 0 0 7px var(--lcars-blue), 0 14px 30px rgba(0, 0, 0, 0.58);
}

body.skin-lcars .header-user-img img,
body.skin-lcars #profile-picture {
    border-radius: 50% !important;
    border: 0 !important;
}

body.skin-lcars .user-info,
body.skin-lcars .user-info * {
    color: var(--lcars-amber) !important;
    font-family: var(--lcars-font-ui) !important;
    text-transform: uppercase;
    letter-spacing: 0.055em;
    text-shadow: 0 0 14px rgba(245, 166, 35, 0.18);
}

body.skin-lcars .user-info-role {
    color: var(--lcars-purple) !important;
}

body.skin-lcars .home-paragraph-header,
body.skin-lcars #courseHeadline,
body.skin-lcars .groupBar,
body.skin-lcars .chapter-top h1,
body.skin-lcars .chapter-head,
body.skin-lcars .dialog-content h1 {
    color: var(--lcars-amber) !important;
    font-family: var(--lcars-font-display) !important;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

body.skin-lcars .tile-text-big,
body.skin-lcars .title-text-big,
body.skin-lcars .chapter-side-bar .side-bar-h1-container h1,
body.skin-lcars .chapter-list-item-title,
body.skin-lcars #myLvl,
body.skin-lcars #myXP {
    font-family: var(--lcars-font-display) !important;
}

body.skin-lcars .main-button,
body.skin-lcars .button,
body.skin-lcars .quiz-button,
body.skin-lcars .button-quiz,
body.skin-lcars .group-subject-label,
body.skin-lcars .chapter-button-collection,
body.skin-lcars .chapter-list-item-pos,
body.skin-lcars .chapter-list-item-pos-max,
body.skin-lcars .global-settings-dialog label {
    font-family: var(--lcars-font-ui) !important;
}

body.skin-lcars .main-button *:not(.material-icons):not(.material-icons-outlined),
body.skin-lcars .button *:not(.material-icons):not(.material-icons-outlined),
body.skin-lcars .quiz-button *:not(.material-icons):not(.material-icons-outlined),
body.skin-lcars .button-quiz *:not(.material-icons):not(.material-icons-outlined) {
    font-family: var(--lcars-font-ui) !important;
}

body.skin-lcars .chapter-head *:not(.material-icons):not(.material-icons-outlined) {
    font-family: var(--lcars-font-display) !important;
}

body.skin-lcars .group-tile,
body.skin-lcars .course-tile,
body.skin-lcars .tileOuterBox {
    position: relative;
    overflow: hidden;
    border: 2px solid #2e3746 !important;
    border-top: 7px solid var(--lcars-amber) !important;
    border-left: 18px solid var(--lcars-purple) !important;
    border-radius: 30px 9px 30px 9px !important;
    background: linear-gradient(145deg, #5a4077, #2f284b 72%) !important;
    color: var(--lcars-text) !important;
    box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.46), 0 14px 28px rgba(0, 0, 0, 0.42) !important;
}

body.skin-lcars .group-tile:nth-child(3n + 2),
body.skin-lcars .course-tile:nth-child(3n + 2) {
    border-top-color: var(--lcars-blue) !important;
    border-left-color: var(--lcars-orange) !important;
    background: linear-gradient(145deg, #46658e, #293957 72%) !important;
}

body.skin-lcars .group-tile:nth-child(3n + 3),
body.skin-lcars .course-tile:nth-child(3n + 3) {
    border-top-color: var(--lcars-purple) !important;
    border-left-color: var(--lcars-blue) !important;
    background: linear-gradient(145deg, #8a594f, #543743 72%) !important;
}

body.skin-lcars .group-image,
body.skin-lcars .course-image,
body.skin-lcars .tileCoursePictureDiv {
    background: linear-gradient(135deg, rgba(244, 163, 64, 0.46), rgba(169, 138, 225, 0.42)), #3f365d !important;
    border-bottom: 1px solid var(--lcars-line);
    filter: saturate(0.9) contrast(1.08);
}

body.skin-lcars .group-tile-infos,
body.skin-lcars .course-tile-info,
body.skin-lcars .tileInfoWrapper {
    background: rgba(47, 40, 75, 0.96) !important;
    border-top: 1px solid var(--lcars-line);
    color: var(--lcars-text) !important;
}

body.skin-lcars .group-tile-infos *,
body.skin-lcars .course-tile-info *,
body.skin-lcars .tileInfoWrapper * {
    color: var(--lcars-text) !important;
}

body.skin-lcars .tile-text-small,
body.skin-lcars .group-member-count,
body.skin-lcars .chapter-list-item-pos,
body.skin-lcars .chapter-list-item-pos-max {
    color: var(--lcars-muted) !important;
}

body.skin-lcars .group-owner-name,
body.skin-lcars .course-owner-name,
body.skin-lcars .tile-text-big,
body.skin-lcars .title-text-big {
    color: var(--lcars-amber) !important;
}

body.skin-lcars .group-subject-label {
    border: 1px solid var(--lcars-purple);
    border-radius: 14px 4px 14px 4px !important;
    background: rgba(154, 114, 215, 0.18) !important;
    color: #d9c6ff !important;
}

body.skin-lcars .group-member-img,
body.skin-lcars .group-owner-img > img,
body.skin-lcars .group-owner,
body.skin-lcars .course-owner img {
    border: 2px solid var(--lcars-blue);
    border-radius: 50% !important;
    box-shadow: 0 0 0 3px #090c12;
}

body.skin-lcars .quiz-button,
body.skin-lcars .button-quiz,
body.skin-lcars .button,
body.skin-lcars .main-button,
body.skin-lcars #add-group.main-button,
body.skin-lcars #add-course.main-button,
body.skin-lcars .color-main,
body.skin-lcars .btn-floating:not(.white),
body.skin-lcars .switch-active,
body.skin-lcars #add-chapter.white,
body.skin-lcars .course-card-settings-btn,
body.skin-lcars .group-delete-btn {
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 18px 5px 18px 5px !important;
    background: linear-gradient(180deg, #f6bd74, var(--lcars-amber)) !important;
    color: #0b0b0d !important;
    box-shadow: inset 10px 0 0 #c87337, 0 8px 18px rgba(0, 0, 0, 0.32) !important;
    font-family: var(--lcars-font-ui) !important;
    font-weight: 600;
    text-transform: uppercase;
}

body.skin-lcars .quiz-button *,
body.skin-lcars .button-quiz *,
body.skin-lcars .button *,
body.skin-lcars .main-button *,
body.skin-lcars #add-group.main-button *,
body.skin-lcars #add-course.main-button *,
body.skin-lcars .switch-active *,
body.skin-lcars #add-chapter.white i,
body.skin-lcars #add-chapter.white .btn-text,
body.skin-lcars .course-card-settings-btn i {
    color: #0b0b0d !important;
}

body.skin-lcars .group-delete-btn {
    border-color: rgba(207, 102, 107, 0.9) !important;
    background: linear-gradient(180deg, #e29a92, var(--lcars-salmon)) !important;
    box-shadow: inset 10px 0 0 var(--lcars-red), 0 8px 18px rgba(0, 0, 0, 0.32) !important;
    color: #0b0b0d !important;
}

body.skin-lcars .join-group-input,
body.skin-lcars .global-settings-dialog select {
    background: #3a3457 !important;
    border: 2px solid var(--lcars-purple) !important;
    border-radius: 14px 4px 14px 4px;
    color: var(--lcars-text) !important;
}

body.skin-lcars .dialog .dialog-content.settings-dialog,
body.skin-lcars .dialog-content,
body.skin-lcars .course-dialog .dialog-content-wrapper,
body.skin-lcars .course-dialog .card-wrapper,
body.skin-lcars .course-dialog .course-tile {
    border: 2px solid var(--lcars-line);
    border-top: 10px solid var(--lcars-amber);
    border-left: 28px solid var(--lcars-purple);
    border-radius: 30px 8px 30px 8px !important;
    background: linear-gradient(145deg, #58416d, #303c61 68%, #553949) !important;
    color: var(--lcars-text) !important;
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.58);
}

body.skin-lcars .global-settings-dialog label {
    color: var(--lcars-amber) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

body.skin-lcars .chapter-page-content {
    background: transparent !important;
}

body.skin-lcars .chapter-side-bar,
body.skin-lcars .chapter-content .content-parent:not([type="2"]),
body.skin-lcars .chapter-button-collection,
body.skin-lcars .chapter-item {
    border: 2px solid var(--lcars-line) !important;
    border-top: 7px solid var(--lcars-amber) !important;
    border-left: 22px solid var(--lcars-purple) !important;
    border-radius: 28px 8px 28px 8px !important;
    background: linear-gradient(145deg, #51406e, #2f3659 60%, #593c49) !important;
    color: var(--lcars-text) !important;
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.38), 0 12px 26px rgba(0, 0, 0, 0.38);
}

body.skin-lcars .chapter-content .content-parent:not([type="2"]),
body.skin-lcars .chapter-content .content-parent:not([type="2"]) *:not(.ql-syntax):not(.ql-syntax *) {
    color: var(--lcars-text) !important;
}

body.skin-lcars .chapter-content .content-parent[type="2"],
body.skin-lcars .quiz-preview,
body.skin-lcars .quiz-preview .quiz-preview-background,
body.skin-lcars .quiz-preview .quiz-preview-g,
body.skin-lcars .quiz-preview .start-quiz-container,
body.skin-lcars .chapter-content .content-parent[type="2"] .quiz-wrapper,
body.skin-lcars .chapter-content .content-parent[type="2"] .memory-wrappper {
    background: #ffffff !important;
    color: #444 !important;
    font-family: "Roboto", sans-serif !important;
}

body.skin-lcars .chapter-content .content-parent[type="2"] * {
    color: inherit;
    font-family: inherit !important;
}

body.skin-lcars .chapter-content .computed-content .iiigel-text-box {
    color: var(--lcars-text) !important;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.32);
}

body.skin-lcars .chapter-content .computed-content .iiigel-text-box-blue {
    border-color: var(--lcars-cyan);
}

body.skin-lcars .chapter-content .computed-content .iiigel-text-box-blue[data-text-box-icon]::before {
    color: var(--lcars-cyan) !important;
}

body.skin-lcars .chapter-content .computed-content .iiigel-text-box-red {
    border-color: #ff7662;
}

body.skin-lcars .chapter-content .computed-content .iiigel-text-box-red[data-text-box-icon]::before {
    color: #ff7662 !important;
}

body.skin-lcars .chapter-content .computed-content .iiigel-text-box-purple {
    border-color: #c69af0;
}

body.skin-lcars .chapter-content .computed-content .iiigel-text-box-purple[data-text-box-icon]::before {
    color: #c69af0 !important;
}

body.skin-lcars .chapter-content .computed-content .iiigel-text-box-orange {
    border-color: var(--lcars-amber);
}

body.skin-lcars .chapter-content .computed-content .iiigel-text-box-orange[data-text-box-icon]::before {
    color: var(--lcars-amber) !important;
}

body.skin-lcars #levelBar {
    overflow: hidden;
    background: #080b10 !important;
    border: 2px solid var(--lcars-line) !important;
    border-radius: 16px 5px 16px 5px !important;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.62), 0 0 14px rgba(116, 142, 245, 0.18);
}

body.skin-lcars #myXPbar {
    background: repeating-linear-gradient(90deg, var(--lcars-blue) 0 72px, #111827 72px 78px) !important;
}

body.skin-lcars #myLvl {
    background: var(--lcars-amber) !important;
    border-color: #5c3900 !important;
    color: #090b0f !important;
    font-weight: 800;
}

body.skin-lcars #myXP,
body.skin-lcars .level-bar-wrapper .material-icons,
body.skin-lcars .back-to-chapter i {
    color: var(--lcars-amber) !important;
}

body.skin-lcars .chapter-side-bar .side-bar-h1-container h1,
body.skin-lcars .chapter-side-bar .chapter-list-item,
body.skin-lcars .chapter-side-bar .chapter-list-item span,
body.skin-lcars .chapter-side-bar .chapter-list-item p {
    color: var(--lcars-text) !important;
}

body.skin-lcars .chapter-side-bar .chapter-list-item {
    border-left: 10px solid var(--lcars-blue);
    border-radius: 13px 3px 13px 3px;
    background: #445d86;
}

body.skin-lcars .chapter-side-bar .chapter-list-item:nth-child(4n + 2) {
    border-left-color: var(--lcars-purple);
    background: #654b7e;
}

body.skin-lcars .chapter-side-bar .chapter-list-item:nth-child(4n + 3) {
    border-left-color: var(--lcars-orange);
    background: #815844;
}

body.skin-lcars .chapter-side-bar .chapter-list-item:nth-child(4n + 4) {
    border-left-color: var(--lcars-peach);
    background: #75516c;
}

body.skin-lcars .chapter-item.finished {
    border-top-color: var(--lcars-green) !important;
    background: linear-gradient(145deg, rgba(145, 185, 91, 0.18), #07100c) !important;
}

body.skin-lcars .chapter-item:not(.editing):hover,
body.skin-lcars .chapter-item.finished:not(.editing):hover {
    background: linear-gradient(145deg, #675082, #405076) !important;
}

body.skin-lcars .chapter-button-collection {
    gap: 14px;
}

body.skin-lcars .chapter-button-collection a,
body.skin-lcars .chapter-button-collection .btn-floating {
    min-width: 42px;
    min-height: 40px;
    justify-content: center;
    border: 1px solid var(--lcars-blue) !important;
    border-radius: 14px 4px 14px 4px !important;
    background: linear-gradient(180deg, #a9bce1, var(--lcars-blue)) !important;
    box-shadow: inset 7px 0 0 #647eb0, 0 6px 14px rgba(0, 0, 0, 0.3) !important;
}

body.skin-lcars .chapter-button-collection i:not(.red-color),
body.skin-lcars .chapter-button-collection .chapter-button-collection-item-blue,
body.skin-lcars .chapter-button-collection a:not(.disabled-help) i:not(.red-color),
body.skin-lcars .icon-blue {
    color: #10131a !important;
}

body.skin-lcars .chapter-button-collection .disabled-help,
body.skin-lcars .chapter-button-collection .disabled-help i {
    color: rgba(174, 185, 202, 0.42) !important;
}

body.skin-lcars .chapter-item-progress {
    background: rgba(174, 185, 202, 0.14);
}

body.skin-lcars .chapter-item-progress.finished {
    background: var(--lcars-blue);
}

body.skin-lcars .chapter-content .content-parent:not([type="0"]):not(.full-screen)::after,
body.skin-lcars .chapter-content .content-parent.finished::after,
body.skin-lcars .chapter-content .finished[type="4"]::after {
    opacity: 0.36;
}

body.skin-lcars .ql-syntax.hljs,
body.skin-lcars .ql-syntax {
    border: 2px solid var(--lcars-purple);
    border-left: 14px solid var(--lcars-purple);
    border-radius: 18px 4px 18px 4px;
    background: #05070a !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.44);
}

body.skin-lcars #cardoverlay_innerbg {
    background:
        radial-gradient(circle at 72% 14%, rgba(142, 167, 215, 0.5), transparent 30%),
        linear-gradient(145deg, #5b4270, #2d4267 62%, #70434b) !important;
    border-top: 10px solid var(--lcars-amber);
    border-left: 28px solid var(--lcars-purple);
}

/* LCARS layout refinement: compact navigation, personnel panel and controls */
body.skin-lcars .main-container-header {
    display: flex;
    align-items: center;
    width: auto;
    min-height: 88px;
    top: 36px;
    margin: 0 6.5% !important;
    padding: 14px 24px 22px !important;
    gap: 12px;
    border-radius: 34px 8px 8px 8px;
}

body.skin-lcars .main-container-header .home {
    display: flex;
    align-items: center;
    width: 242px;
    height: 52px;
    margin: 0 auto 0 0 !important;
    padding: 0 18px 0 66px !important;
    flex: 0 0 auto;
}

body.skin-lcars .main-container-header .home .iiigel-icon {
    width: 48px !important;
    height: 42px;
    margin-left: -56px;
    object-fit: contain;
}

body.skin-lcars .main-container-header .iiigel-icon-text {
    margin: 0 0 0 10px;
    font-size: 1.7rem;
    line-height: 1;
}

body.skin-lcars #chapterGroupName {
    width: auto;
    min-width: 120px;
    margin: 0 auto 0 0;
    padding: 0 14px;
    flex: 1 1 auto;
    color: var(--lcars-peach);
    font-family: var(--lcars-font-ui) !important;
    font-size: 1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body.skin-lcars #chapterGroupName:empty::after {
    content: "SYS 47  ·  EDU 82";
    opacity: 0.82;
}

body.skin-lcars .main-container-header .header-button,
body.skin-lcars .main-container-header .global-settings-button {
    position: static;
    width: auto;
    height: 48px;
    min-width: 48px;
    margin: 0 !important;
    padding: 0 15px !important;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

body.skin-lcars .main-container-header .global-settings-button {
    width: 48px;
    padding: 0 !important;
}

body.skin-lcars .main-container-header .header-home {
    top: 0;
    min-width: 124px;
    flex-direction: row;
}

body.skin-lcars .main-container-header .header-home-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto;
}

body.skin-lcars .main-container-header .header-home-underline {
    display: none;
}

body.skin-lcars .main-container-header .logoutBtn {
    min-width: 142px;
    gap: 8px;
}

body.skin-lcars .main-container-header .logoutBtn img {
    width: 23px;
    height: 23px;
    margin: 0;
}

body.skin-lcars .main-container-header .material-icons,
body.skin-lcars .main-container-header .material-icons-outlined,
body.skin-lcars .chapter-button-collection .material-icons,
body.skin-lcars .chapter-side-bar .material-icons {
    font-family: "Material Icons" !important;
    font-weight: normal !important;
    font-style: normal !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

body.skin-lcars .user-header-wrapper {
    height: 250px;
    min-height: 250px;
    margin-top: 36px;
    padding: 22px 0 30px;
    box-sizing: border-box;
}

body.skin-lcars .user-header-wrapper::before {
    left: 3.5%;
    right: 3.5%;
    top: 10px;
    bottom: 20px;
    border-left-width: 72px;
    border-radius: 46px 14px 14px 46px;
}

body.skin-lcars .user-header-wrapper::after {
    left: calc(3.5% + 92px);
    right: calc(3.5% + 18px);
    bottom: 8px;
    height: 8px;
}

body.skin-lcars .header-user-info {
    top: 18px;
    gap: 0;
}

body.skin-lcars #profilePicture,
body.skin-lcars .header-user-img {
    width: 150px !important;
    height: 150px !important;
    min-width: 150px;
    min-height: 150px;
    box-sizing: border-box;
}

body.skin-lcars .header-user-img {
    padding: 5px;
    border-width: 4px;
}

body.skin-lcars .header-user-info .head-container {
    margin-top: 8px;
}

body.skin-lcars .header-user-info .user-role {
    margin-top: 3px;
}

body.skin-lcars .user-info-name {
    font-family: var(--lcars-font-display) !important;
    font-size: 1.75rem;
    line-height: 1;
}

body.skin-lcars .user-info-role {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.2;
}

body.skin-lcars .level-bar-wrapper {
    width: 390px !important;
    height: 72px !important;
    left: 0 !important;
    margin: -4px 0 0 5.5% !important;
}

body.skin-lcars #levelBar {
    top: 3px !important;
    left: 0 !important;
    width: 316px !important;
    height: 64px !important;
    background: linear-gradient(90deg, #5c4574 0 24%, #334b72 24% 100%) !important;
    border: 2px solid var(--lcars-purple) !important;
    border-left: 16px solid var(--lcars-amber) !important;
    border-radius: 24px 6px 24px 6px !important;
    box-shadow: inset 0 -5px 0 rgba(7, 8, 12, 0.2), 0 8px 20px rgba(0, 0, 0, 0.32) !important;
}

body.skin-lcars #levelBar > span {
    top: 43px !important;
    left: 72px !important;
    width: 212px !important;
    height: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    background: rgba(9, 10, 15, 0.42) !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.42) !important;
}

body.skin-lcars #myXPbar {
    height: 8px !important;
    background: repeating-linear-gradient(90deg, var(--lcars-peach) 0 34px, var(--lcars-orange) 34px 38px) !important;
}

body.skin-lcars #myLvl {
    top: 10px !important;
    left: 8px !important;
    width: 52px !important;
    height: 48px !important;
    padding-top: 1px !important;
    border: 3px solid #2d213e !important;
    border-radius: 17px 4px 17px 4px !important;
    font-size: 1.35rem !important;
    line-height: 31px;
}

body.skin-lcars .level-bar-wrapper > span:nth-of-type(3) {
    top: 33px !important;
    left: 10px !important;
    width: 48px !important;
    height: 22px !important;
    padding-top: 0 !important;
    border: 0 !important;
    color: #090b0f !important;
    font-family: var(--lcars-font-ui) !important;
    font-size: 0.7rem !important;
    font-weight: 700;
}

body.skin-lcars #myXP {
    top: 10px !important;
    left: 79px !important;
    font-size: 1.45rem !important;
    line-height: 1;
}

body.skin-lcars .level-bar-wrapper > .material-icons {
    top: 26px !important;
    left: 276px !important;
    color: var(--lcars-peach) !important;
}

body.skin-lcars #cardIcon {
    top: 8px !important;
    left: 326px !important;
    height: 58px !important;
}

body.skin-lcars .chapter-top {
    position: relative;
    min-height: 62px;
    margin: 72px 0 22px;
    align-items: center;
    gap: 10px;
}

body.skin-lcars .chapter-top .course-context-label {
    position: absolute !important;
    left: 2px;
    top: -38px;
    margin-top: 0 !important;
    color: var(--lcars-blue) !important;
    font-family: var(--lcars-font-ui) !important;
    font-size: 0.9rem !important;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body.skin-lcars .chapter-top .course-context-label h2 {
    margin: 0;
    color: var(--lcars-blue) !important;
    font-family: var(--lcars-font-ui) !important;
    font-size: 1rem !important;
    letter-spacing: 0.12em;
}

body.skin-lcars .chapter-top .back-to-chapter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 15px 4px 15px 4px;
    background: var(--lcars-orange);
}

body.skin-lcars .chapter-top .back-to-chapter i {
    color: #0c0d11 !important;
}

body.skin-lcars .chapter-top h1 {
    margin: 0 auto 0 0 !important;
    line-height: 1.05;
}

body.skin-lcars .chapter-button-collection {
    min-height: 54px;
    padding: 6px 10px 6px 27px;
    gap: 8px;
    border-top-width: 5px !important;
    border-left-width: 18px !important;
    border-radius: 24px 6px 24px 6px !important;
    background: linear-gradient(90deg, #6a4c83, #455a82) !important;
}

body.skin-lcars .chapter-button-collection a,
body.skin-lcars .chapter-button-collection .btn-floating {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0 !important;
}

body.skin-lcars .chapter-button-collection a:has(.red-color) {
    border-color: var(--lcars-red) !important;
    background: linear-gradient(180deg, #e29a92, var(--lcars-salmon)) !important;
    box-shadow: inset 7px 0 0 var(--lcars-red), 0 6px 14px rgba(0, 0, 0, 0.3) !important;
}

body.skin-lcars .chapter-button-collection .red-color {
    color: #2b1012 !important;
}

body.skin-lcars .side-bar-h1-container {
    height: 64px;
    padding: 13px 18px;
    border-bottom: 2px solid rgba(244, 163, 64, 0.48);
}

body.skin-lcars .open-chapter-overview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 13px 4px 13px 4px;
    background: var(--lcars-blue);
}

body.skin-lcars .open-chapter-overview i {
    color: #11131a !important;
}

body.skin-lcars .overview-edit-container {
    justify-content: flex-start;
    gap: 9px;
    padding: 12px 18px 18px;
}

body.skin-lcars .overview-edit-container #add-chapter {
    height: 38px !important;
    margin: 0 !important;
    padding: 6px 13px !important;
}

body.skin-lcars .overview-edit-container #sort-chapters,
body.skin-lcars .overview-edit-container #archived-chapters {
    top: 0;
    width: 38px !important;
    height: 38px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px 4px 13px 4px;
    background: var(--lcars-blue);
}

body.skin-lcars .chapter-side-bar .chapter-list-item {
    margin: 0 14px 10px 24px;
    border-width: 1px 1px 1px 10px !important;
    box-shadow: inset 0 -3px 0 rgba(10, 10, 15, 0.14);
}

body.skin-lcars .chapter-side-bar .chapter-list-item::before {
    left: -20px;
    width: 9px;
    height: 9px;
    background: var(--lcars-peach);
    border: 2px solid #302a4b;
}

body.skin-lcars .chapter-side-bar .chapter-list-item:not(:last-child)::after {
    left: -16px;
    height: 86px;
    border: 0;
    border-left: 2px solid rgba(245, 179, 108, 0.58);
}

@media (max-width: 900px) {
    body.skin-lcars .main-container-header {
        min-height: 86px;
        top: 20px;
        margin: 0 16px !important;
        padding: 12px 16px 22px !important;
        gap: 10px;
        flex-wrap: wrap;
    }

    body.skin-lcars .main-container-header .home {
        padding-left: 48px !important;
        box-shadow: inset 34px 0 0 var(--lcars-amber), 0 5px 12px rgba(0, 0, 0, 0.38) !important;
    }

    body.skin-lcars .iiigel-icon-text {
        font-size: 1.3rem;
    }

    body.skin-lcars .user-header-wrapper {
        height: 230px;
        min-height: 230px;
        margin-top: 20px;
    }

    body.skin-lcars .user-header-wrapper::before {
        left: 16px;
        right: 16px;
        border-left-width: 34px;
    }

    body.skin-lcars .user-header-wrapper::after {
        left: 62px;
        right: 34px;
    }

    body.skin-lcars .user-info-name {
        font-size: 1.55rem;
    }

    body.skin-lcars #profilePicture,
    body.skin-lcars .header-user-img {
        width: 132px !important;
        height: 132px !important;
        min-width: 132px;
        min-height: 132px;
    }

    body.skin-lcars .level-bar-wrapper {
        margin-left: 20px !important;
    }

    body.skin-lcars .home-paragraph-header,
    body.skin-lcars #courseHeadline,
    body.skin-lcars .groupBar,
    body.skin-lcars .chapter-top h1 {
        font-size: 1.35rem;
        line-height: 1.3;
    }

    body.skin-lcars .group-tile,
    body.skin-lcars .course-tile,
    body.skin-lcars .tileOuterBox,
    body.skin-lcars .chapter-side-bar,
    body.skin-lcars .chapter-content .content-parent:not([type="2"]),
    body.skin-lcars .chapter-button-collection,
    body.skin-lcars .chapter-item {
        border-left-width: 12px !important;
    }
}

@media (max-width: 650px) {
    body.skin-lcars .main-container-header {
        margin: 0 8px !important;
        padding: 10px 10px 20px !important;
        border-radius: 26px 6px 6px 6px;
    }

    body.skin-lcars .main-container-header .home {
        width: 100%;
        height: 48px;
        margin-right: 0 !important;
    }

    body.skin-lcars #chapterGroupName {
        display: none;
    }

    body.skin-lcars .main-container-header .header-button {
        min-width: 92px;
        padding: 0 10px !important;
        flex: 1 1 auto;
    }

    body.skin-lcars .main-container-header .logoutBtn {
        min-width: 112px;
    }

    body.skin-lcars .user-header-wrapper {
        margin-top: 20px;
    }

    body.skin-lcars .level-bar-wrapper {
        width: calc(100% - 24px) !important;
        margin-left: 12px !important;
    }

    body.skin-lcars #levelBar {
        width: calc(100% - 70px) !important;
    }

    body.skin-lcars #levelBar > span {
        width: calc(100% - 98px) !important;
    }

    body.skin-lcars .level-bar-wrapper > .material-icons {
        left: auto !important;
        right: 78px;
    }

    body.skin-lcars #cardIcon {
        left: auto !important;
        right: 4px;
    }

    body.skin-lcars .chapter-top {
        margin-top: 64px;
        flex-wrap: wrap;
    }

    body.skin-lcars .chapter-button-collection {
        width: 100%;
        justify-content: flex-end;
    }

    body.skin-lcars .chapter-side-bar {
        width: 100%;
    }

    body.skin-lcars .chapter-page-content.expanded .chapter-content-wrapper,
    body.skin-lcars .chapter-container.expanded .chapter-content {
        width: 100%;
    }
}
/* ===============ENDE GENERAL=============== */

/* ================CHAPTEREDITOR================== */
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");

.editor-canvas:focus {
    -webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.05);
    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.05);
}

.editor {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-flow: column wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.editor-menuebar {
    display: flex;
    flex-flow: row;
    justify-content: start-flex;
    align-items: center;
    margin-bottom: 10px;
    height: 50px;
    clear: both;
    border-radius: 10px;
    flex-wrap: wrap;
}

.editor-menuebar > button:last-of-type {
    border-radius: 0px 10px 10px 0px;
}

.editor-menuebar > button:first-child {
    border-radius: 10px 0px 0px 10px;
}

.editor-menuebar > button {
    background-color: var(--white);
    color: var(--white);
    font-size: 1rem;
    padding: 1rem;
    cursor: pointer;
    transition: all 250ms;
    border: none;
    outline: none;
}

.editor-menuebar button:hover {
    background-color: rgb(27, 171, 255);
}

.editor-menuebar > button > img {
    width: 18px;
}
.editor-canvas {
    font-family: "Roboto", sans-serif;
    outline: none;
    background-color: var(--white);
    color: black;
    transition: all 0.5s;
    border-radius: 5px;
    padding: 20px;
    width: 100%;
    height: 100px;
    margin-right: -15px;
    margin-left: -15px;
    overflow: auto;
}

.editor-canvas:focus {
    -webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.05);
    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.05);
}

.editor {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-flow: column wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.editor-menuebar > select {
    background-color: var(--white);
    font-size: 1rem;
    padding: 0.84rem;
    cursor: pointer;
    transition: all 250ms;
    border: none;
    outline: none;
}

.editor-menuebar > button:hover {
    background-color: rgb(27, 171, 255);
}

.editor-menuebar select:hover {
    color: var(--white);
    background-color: rgb(27, 171, 255);
}

.editor-menuebar > button > img {
    width: 18px;
}

.editorRow {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

#editorHeader {
    margin: 10px 10px 10px 25px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#editorHeader > a:not(#chapterLogoutBtn) {
    display: flex;
    width: 60px;
}
#editorHeader > a:not(#chapterLogoutBtn) > img {
    width: 100%;
}

#editorHeader > #chapterLogoutBtn {
    margin-left: auto;
    width: 150px;
}

#chapterGroupName {
    margin-left: 20px;
    font-size: 30px;
}

.editorInput {
    width: 100%;
    color: var(--white);
    background-color: var(--white);
    padding: 10px;
    outline: none;
    transition: all 0.5s;
    border-radius: 5px;
    border: none;
    -webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.05);
    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.05);
}

.editorInput:focus {
    background-color: rgb(27, 171, 255);
}

.qrCode {
    width: 100% !important;
}

.editor-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.modal-header .close {
    outline: none;
}

#canvas img:not(.deleteSingleTask > img) {
    cursor: grab;
    border: 1px black solid;
}

.imgTooltip {
    clear: both;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
}

.imgTooltip > div {
    text-align: center;
    background-color: var(--orange);
    border-radius: 5px;
    color: var(--white);
    float: left;
    padding: 5px;
    cursor: pointer;
}

.imgTooltip > div:not(:first-child) {
    margin-left: 5px;
}

#widthSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    /* Override default look */
    appearance: none;
    border-radius: 50%;
    width: 20px;
    /* Set a specific slider handle width */
    height: 20px;
    /* Slider handle height */
    background: var(--orange);
    /* Green background */
    cursor: pointer;
    /* Cursor on hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;
}

#widthSlider:focus {
    color: var(--orange);
}

#widthSlider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    border-radius: 50%;
    width: 20px; /* Set a specific slider handle width */
    height: 20px; /* Slider handle height */
    background: var(--orange); /* Green background */
    cursor: pointer; /* Cursor on hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;
}

#widthSlider::-moz-range-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    border-radius: 50%;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: var(--orange); /* Green background */
    cursor: pointer; /* Cursor on hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;
}

code[class*="language-"],
pre[class*="language-"] {
    color: #c5c8c6;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    font-family: Inconsolata, Monaco, Consolas, "Courier New", Courier, monospace;
    direction: ltr;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    line-height: 1.5;

    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;

    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

/* ================END CHAPTEREDITOR============== */

/* ================CODE HIGHLIGHTING============== */

/* Code blocks */
pre[class*="language-"] {
    padding: 1em;
    margin: 0.5em 0;
    overflow: auto;
    border-radius: 0.3em;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
    background: #1d1f21;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
    padding: 0.1em;
    border-radius: 0.3em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: #7c7c7c;
}

.token.punctuation {
    color: #c5c8c6;
}

.namespace {
    opacity: 0.7;
}

.token.property,
.token.keyword,
.token.tag {
    color: #96cbfe;
}

.token.class-name {
    color: #ffffb6;
    text-decoration: underline;
}

.token.boolean,
.token.constant {
    color: #99cc99;
}

.token.symbol,
.token.deleted {
    color: #f92672;
}

.token.number {
    color: #ff73fd;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color: #a8ff60;
}

.token.variable {
    color: #c6c5fe;
}

.token.operator {
    color: #ededed;
}

.token.entity {
    color: #ffffb6;
    /* text-decoration: underline; */
}

.token.url {
    color: #96cbfe;
}

.language-css .token.string,
.style .token.string {
    color: #87c38a;
}

.token.atrule,
.token.attr-value {
    color: #f9ee98;
}

.token.function {
    color: #dad085;
}

.token.regex {
    color: #e9c062;
}

.token.important {
    color: var(--orange);
}

.token.important,
.token.bold {
    font-weight: bold;
}
.token.italic {
    font-style: italic;
}

.token.entity {
    cursor: help;
}

.token {
    font-family: Source Code Pro;
}

.dropbtn {
    background-color: var(--blue);
    color: var(--white);
    padding: 16px;
    font-size: 16px;
    border: none;
}

.modal-body > img {
    width: 100px;
    margin-right: 10px;
}
.modal-body > img:last-child {
    margin-right: 0px;
}

.modal-body .editor.body {
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-content textarea:not(.ModalDescriptionInput) {
    height: 500px;
    white-space: pre-wrap;
    font-family: "Source Code Pro", monospace;
}

.modal-content {
    border: none;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;
}

#canvas .blockParent > .editingChapter > pre {
    white-space: pre-wrap;
    background: #1d1f21;
    padding: 10px;
    border-radius: 3px;
}

.language {
    cursor: pointer;
}

#canvasChapter {
    font-size: 2.5rem;
}

#canvasChapter > input {
    float: left;
    width: 95%;
    outline: none;
    border: none;
}

#canvasChapter > div[contenteditable="false"] > img {
    width: 50px;
    cursor: pointer;
}

#canvas {
    width: 100%;
}

.editingChapter {
    font-family: "Roboto", sans-serif;
    outline: none;
    background-color: var(--white);
    color: var(--black);
    transition: all 0.5s;
    border-radius: 5px;
    padding: 20px;
    width: 100%;
    margin-right: -15px;
    overflow: auto;
    overflow-x: hidden;
    margin-bottom: 20px;
}
#wrappingChapterContainer {
    min-height: calc(100% - 70px);
}

.expanded {
    height: 800px;
}

.addBlock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;

    border-radius: 5px;
    margin-bottom: 50px;
}

.addBlock > img {
    height: 90px;
    cursor: pointer;
}

#wave1 {
    float: left;
    display: none;
    background: var(--white);
    position: relative;
    text-align: center;
    width: 50px;
    height: 50px;
}

#wave {
    display: none;
    background: var(--white);
    position: relative;
    text-align: center;
    width: 50px;
    height: 50px;
}

.dot {
    margin-top: 50%;
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 3px;
    background: #303131;
    animation: wave 1.3s linear infinite;
}
.dot:nth-child(2) {
    animation-delay: -1.1s;
}

.dot:nth-child(3) {
    animation-delay: -0.9s;
}

@keyframes wave {
    0%,
    60%,
    100% {
        transform: initial;
    }

    30% {
        transform: translateY(-10px);
    }
}

.createCourseFileInput {
    display: none;
}

.course-file-upload {
    width: 100%;
    text-align: center;
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background-color: var(--white);
    margin-bottom: 0px;
}

.backToChapter {
    text-decoration: none;
    color: black;
    margin-left: 10px;
    font-size: 15px;
    padding: 10px;
    border: 1px solid black;
    font-family: Montserrat;
    float: left;
}

#courseImagePreview {
    width: 100%;
}

.deleteBlock {
    position: relative;
    width: 50px;
    height: 50px;
    background-color: var(--white);
    float: right;
    border-radius: 50%;
    margin-bottom: -35px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: -10px;
    transition: all 0.3s;
    z-index: 9999999;
    cursor: pointer;
}

.deleteBlock > img {
    border: none !important;
    cursor: pointer !important;
}

.blockParent {
    overflow: visible;
}
.logoutText {
    float: left;
    padding: 3px;
}
@media screen and (max-width: 768px) {
    .logoutBtn > div {
        visibility: hidden;
        clear: both;
        width: 28%;
        display: none;
    }
    .logoutIcon {
        visibility: visible;
        margin-right: 0;
    }
}

@-webkit-keyframes jello-horizontal {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes jello-horizontal {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.jello-horizontal {
    -webkit-animation: jello-horizontal 0.9s both;
    animation: jello-horizontal 0.9s both;
}

@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

.scale-in-center {
    -webkit-animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.courseImagePreview {
    width: 50%;
    margin-top: 20px;
}

.sticky {
    position: fixed;
    top: 5;
    z-index: 999;
}

.courseImageContainer {
    width: 200px;
    overflow: auto;
}

.courseImageContainer > label {
    margin-bottom: 0;
}

#changeCourseImage {
    float: left;
}

.groupNameContainer {
    float: right;
    width: 450px;
}

.settingsCourse {
    display: flex;
    flex-flow: row;
    justify-content: left;
    align-items: flex-start;
}
.settingsCourse > .chapterDescription {
    width: calc(100% - 210px);
    margin-left: 10px;
    font-size: 40px;
    font-family: Montserrat;
}

settingsCourse > .newCourseName {
    width: calc(100% - 210px);
    margin-left: 10px;
    font-size: 20px;

    font-family: Montserrat;
}

.settingsCourse > div > textarea {
    font-family: Roboto;
    width: 100%;
    outline: none;
    border-radius: 5px;
    padding: 1em;
    resize: none;
    height: 175px;
    font-size: 15px;
    transition: all 0.3s;
}

.settingsCourse > div > textarea:focus {
    -webkit-box-shadow: 1px 2px 29px -12px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 1px 2px 29px -12px rgba(0, 0, 0, 0.75);
    box-shadow: 1px 2px 29px -12px rgba(0, 0, 0, 0.75);
}
.settingsGroup {
    display: flex;
    flex-flow: row;
    justify-content: left;
    align-items: flex-start;
    float: right;
}
.settingsGroup > .chapterDescription {
    width: calc(100% - 210px);
    margin-left: 10px;
    font-size: 40px;
    font-family: Montserrat;
}

settingsGroup > .newCourseName {
    width: calc(100% - 210px);
    margin-left: 10px;
    font-size: 20px;

    font-family: Montserrat;
}

.settingsGroup > div > textarea {
    font-family: Roboto;
    width: 100%;
    outline: none;
    border-radius: 5px;

    padding: 1em;
    resize: none;
    height: 175px;
    font-size: 15px;
    transition: all 0.3s;
}

.settingsGroup > div > textarea:focus {
    -webkit-box-shadow: 1px 2px 29px -12px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 1px 2px 29px -12px rgba(0, 0, 0, 0.75);
    box-shadow: 1px 2px 29px -12px rgba(0, 0, 0, 0.75);
}
.submitChangeData {
    margin-top: 10px;
}

.courseOverviewName:focus {
    -webkit-box-shadow: 1px 2px 29px -12px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 1px 2px 29px -12px rgba(0, 0, 0, 0.75);
    box-shadow: 1px 2px 29px -12px rgba(0, 0, 0, 0.75);
}

.fileDownload {
    padding: 10px;
    border-radius: 5px;
}

#colorPicker {
    display: none;
}

#videoInsertion {
    display: none;
}

.taskWrapper {
    width: 100%;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.taskWrapper > .taskHeader {
    font-size: 30px;
    margin-left: 12px;
}

.task > .taskDescription {
    width: 100%;
}

.taskWrapper > .taskHeader > span > img {
    border: none !important;
    cursor: pointer !important;
    margin-top: -10px;
}

.taskWrapper > .taskDescription > span > img {
    border: none !important;
    cursor: pointer !important;
    margin-top: -10px;
}

.taskWrapper > .taskDescription > span {
    float: right;
}

.taskWrapper > .taskHeader > span {
    float: right;
}

#codeDialog {
    max-width: 900px !important;
}

video {
    width: 100%;
}

.outerImg {
    margin-right: 20px;
}

a {
    font-size: 16px;
}

.editingChapter > div {
    font-size: 16px;
}
#codeDialogSourceCode {
    max-width: 1700px !important;
}

#codeDialogSourceCode > div {
    max-width: 1700px !important;
}

#codeDialogSourceCode > div > textarea {
    height: 700px !important;
}

.left-inner {
    height: 100%;
    background: url("../images/editor/deleteBlock.svg") no-repeat;
    background-position: center;
    border-radius: 5px;
    margin-left: 5px;
    cursor: pointer;
    float: right;
    width: 25px;
    height: 25px;
    background-size: 100%;
    transition: all 0.5s;
}

.left-inner:hover {
    transform: scale(1.3);
}

.chapterShowContainer {
    margin-top: 5px;
    display: flex;
    align-items: center;
    border-radius: 0.25rem;
    width: 100%;
}

.chapterShowContainerSort {
    margin-top: 5px;
    display: flex;
    align-items: center;
    border-radius: 0.25rem;
    width: 100%;
}

.chapterShowContainer:last-child {
    margin-bottom: 5px;
}

.seperateCourses {
    width: calc(100% - 40px);
}

.nav-link {
    box-shadow: none;
}

.taskHeader > input {
    width: 100%;
    border: none;
    outline: none;
}

.taskDescription > input {
    width: 100%;
    border: none;
    outline: none;
}
.checkbox > label {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox > label > input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkbox > label > span {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

.checkbox > label > span {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkbox > label:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox > label input:checked ~ .checkmark {
    background-color: white;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkbox > label > span:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox > label > input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox > label .checkmark:after {
    left: 5px;
    top: 3px;
    width: 3px;
    height: 8px;
    border: solid var(--blue);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.checkbox {
    position: absolute;
    top: 10;
    right: 10;
}

.taskDescription > input {
    width: 100%;
    border: none;
    outline: none;
}
.checkbox > label {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox > label > input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkbox > label > span {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

.checkbox > label > span {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkbox > label:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox > label input:checked ~ .checkmark {
    background-color: white;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkbox > label > span:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox > label > input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox > label .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.checkbox {
    position: absolute;
    top: 10;
    right: 10;
}

.taskDescription > textarea {
    outline: none;
    resize: none;
    border: none;
    width: 100%;
    overflow: hidden;
}

.taskWrapper {
    position: relative;
}

.taskWrapper::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 5px 0px 0px 5px;
    background: var(--blue);
}

.finishTask {
    width: 180px;
    text-align: center;
    border-radius: 20px;
    padding: 10px;
    transition: all 0.3s;
    color: var(--white);
}

.finishTask:not(.checked) {
    background-color: #ede2e1;
    color: black;
    cursor: pointer;
}

.type2:not(:checked) ~ .checkmark {
    background: var(--blue);
}

.type2:not(:checked):hover ~ .checkmark {
    background: var(--blue);
}

.taskPreview:first-child {
    border-left: 5px var(--blue) solid;
}

.taskPreview:nth-child(2) {
    border-left: 5px var(--blue) solid;
}

.taskPreview:nth-child(3) {
    border-left: 5px var(--blue) solid;
}

#leave {
    border-radius: 0px 10px 10px 0px;
    display: none;
}

.saveRound {
    border-radius: 0px 10px 10px 0px;
}

#notificationArea {
    z-index: 100000;
    display: flex;
    flex-direction: column;
    min-height: 90%;
    justify-content: flex-end;
}
#notificationArea > div {
    flex-grow: 0;
    flex-shrink: 0;
}

#notificationArea > div:not(.dummy) {
    justify-self: flex-end;
}

.dummy {
    flex: 1 1 auto;
}

#notificationParent {
    overflow: auto;
    position: fixed;
    top: 5;
    bottom: 5;
    left: 5;
}

.acceptance {
    display: flex;
    justify-content: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

.acceptance > div {
    text-align: center;
    width: 50%;
    padding: 10px;
    cursor: pointer;
    transition: 0.1s;
}

.acceptance > div:hover {
    transform: scale(1.2);
}

.noBorder {
    cursor: pointer !important;
    -webkit-appearance: none !important;
    background: none;
    outline: none !important;
}

.noBorder > img {
    border: none !important;
    cursor: pointer !important;
}

.dropdown {
    text-align: center;
}
.addTaskMenu {
    cursor: pointer;
}
.addTaskToWrapper {
    text-align: center;
}

.task {
    position: relative;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.hide {
    display: none;
}

.checkingWrapper {
    margin-left: auto;
}

/* ================ENDE CODE HIGHLIGHTING============== */
/* ================ENDE CODE HIGHLIGHTING============== */

/* ================ANFANG FOOTER======================= */

* {
    margin: 0;
    padding: 0;
}

#footer {
    padding: 0px !important;

    height: 50px;
    background: var(--blue);
    text-align: center;
    position: absolute;
    z-index: 9999;
    width: 100%;
    left: 0;
    right: 0;
    margin-top: 60px;
}

.footertext {
    color: var(--fixed-white);
    text-align: left;
    vertical-align: middle;
    line-height: 50px;
    font-size: 15px;
    width: 150px;
    padding-left: 50px;
    padding-right: 0px;
}

.footerlink {
    height: 50px;
    color: var(--black) !important;

    vertical-align: middle;
    line-height: 50px;
    font-size: 15px;

    padding-left: 0px;
    padding-right: 0px;
}

.footerlink:hover {
    color: #333;
}

.innerfooter {
    /*overflow:auto;*/
    overflow: hidden;

    border-radius: 10px;
    margin: 0 auto;
    background: var(--blue);
    text-align: center;
    display: flex;
    justify-content: space-around;
}

.footerLinkTxt {
    width: 150px;
    height: 100%;
    text-align: center;
    color: var(--fixed-white) !important;
}

.footerLinkTxt:hover {
    color: var(--fixed-white) !important;
    text-shadow: 0px 0px 10px var(--white);
    transition: 0.5s;
}

.clear {
    clear: both;
}
/* ================ENDE FOOTER======================= */
.task {
    margin-bottom: 0;
}

.taskWrapper .task:last-of-type {
    border-bottom: none;
}

.task[type="1"]::before {
    background: url("../images/warning.svg");
}

.task[type="2"]::before {
    background: url("../images/warning.svg");
}

.task[type="3"]::before {
    background: url("../images/add_alert.svg");
}

.roundedImageWrapper {
    width: 70px;
    height: 70px;
    border: 3px solid;
    border-color: var(--white);
    border-radius: 50%;
    overflow: hidden;
    margin-top: -20px;
    transition: border-color 0.5s;
}

.editGroupName {
    margin-top: 5px;
}

.userImagesContainer {
    position: absolute;
    bottom: 20;
    width: 100%;
    display: flex;
}

.userImagesContainer > div {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
    border: 3px solid var(--white);
    transition: border-color 0.5s;
}

.userImagesContainer > div:not(:first-child) {
    margin-left: -10px;
}

.roundedUserImages {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.otherMembers {
    background: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    color: grey;
}

input[type="checkbox"].ios8-switch {
    position: absolute;
    margin: 8px 0 0 16px;
}
input[type="checkbox"].ios8-switch + label {
    position: relative;
}
input[type="checkbox"].ios8-switch + label:before {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 10;
    width: 40px; /* x*5 */
    height: 24px; /* x*3 */
    border-radius: 16px; /* x*2 */
    background: var(--white);
    border: 1px solid #d9d9d9;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
input[type="checkbox"].ios8-switch + label:after {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    top: 1px;
    width: 24px; /* x*3 */
    height: 24px; /* x*3 */
    border-radius: 16px; /* x*2 */
    background: var(--white);
    border: 1px solid #d9d9d9;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
input[type="checkbox"].ios8-switch:checked + label:after {
    margin-left: 16px;
}
input[type="checkbox"].ios8-switch:checked:not(.switch) + label:before {
    background: var(--blue);
}

input[type="checkbox"].ios8-switch.switch-disabled + label:before {
    background: var(--grey-disabled) !important;
    cursor: not-allowed !important;
}

input[type="checkbox"].ios8-switch.switch-disabled:checked:not(.switch) + label:after {
    cursor: not-allowed !important;
}

.not-allowed{
    cursor: not-allowed !important;
}

/* SMALL */

input[type="checkbox"].ios8-switch-sm {
    margin: 5px 0 0 10px;
}
input[type="checkbox"].ios8-switch-sm + label {
    position: relative;
    padding: 0 0 0 32px;
    line-height: 1.3em;
}
input[type="checkbox"].ios8-switch-sm + label:before {
    width: 25px; /* x*5 */
    height: 15px; /* x*3 */
    border-radius: 10px; /* x*2 */
}
input[type="checkbox"].ios8-switch-sm + label:after {
    width: 15px; /* x*3 */
    height: 15px; /* x*3 */
    border-radius: 10px; /* x*2 */
}
input[type="checkbox"].ios8-switch-sm:checked + label:after {
    margin-left: 10px; /* x*2 */
}

/* LARGE */

input[type="checkbox"].ios8-switch-lg {
    margin: 10px 0 0 20px;
}
input[type="checkbox"].ios8-switch-lg + label {
    position: relative;
    padding: 7px 0 0 60px;
    line-height: 2.3em;
}
input[type="checkbox"].ios8-switch-lg + label:before {
    width: 50px; /* x*5 */
    height: 30px; /* x*3 */
    border-radius: 20px; /* x*2 */
}
input[type="checkbox"].ios8-switch-lg + label:after {
    width: 30px; /* x*3 */
    height: 30px; /* x*3 */
    border-radius: 20px; /* x*2 */
}
input[type="checkbox"].ios8-switch-lg:checked + label:after {
    margin-left: 20px; /* x*2 */
}

#allIncludedDiv {
    padding-bottom: 100px;
}

.tileAddCourse {
    height: 360px;
    margin-top: 20px;
}

.tileAddGroup {
    height: 360px;
    margin-top: 20px;
}

.checked[taskType="1"] {
    cursor: pointer;
}

.checked[taskType="3"] {
    cursor: pointer;
}

.checked {
    background: var(--green);
}

.checking {
    background: grey !important;
}

.deleteSingleTask > img {
    cursor: pointer;
}

#chapterLinearityOverview {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: auto;
    z-index: 1;
}

#chapterLinearityOverview #overview {
    min-height: 100%;
    overflow: auto;
    min-width: 100%;
    overflow: visible;
}

table.google-visualization-orgchart-table {
    border-collapse: separate;
}

.active {
    display: block !important;
}

.activeBlocked {
    color: red !important;
}

.linearitySelector {
    font-size: 1rem;
    background: var(--white);
    border-radius: 5px;
    padding: 5px !important;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;
    text-align: left;
    transition: all 0.5s;
    color: var(--blue);
}

.google-visualization-orgchart-node-medium {
    font-size: 1rem !important;
}

.linearitySelector:hover {
    background: var(--blue);
    color: var(--white);
}

.chapterRow {
    display: flex;
    justify-content: space-between;
    margin: auto;
    max-width: 100%;
    min-width: 100%;
    overflow: visible;
    padding: 20px;
}

.chapterRow .chapterNavItem {
    margin: 5px;
    min-width: 200px;
    cursor: pointer;
    max-width: 200px;
    border: 5px hidden;
    height: calc(100% - 10px);
    text-overflow: ellipsis;
}

.chapterRow .navItemWrapper {
    margin-left: auto;
    margin-right: auto;
}

#svg {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

#chapterLinearityOverview {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

.grey {
    background: rgba(133, 133, 133, 0.657) !important;
    color: var(--white) !important;
    cursor: unset !important;
}

.chapterNavItemIrregular {
    background: var(--white);
    border-radius: 5px;
    display: block;
    word-wrap: break-word;
    width: 100%;

    padding: 15px;
    transition: 0.5s;
    font-family: Montserrat;
    cursor: pointer;
}

.chapterNavItemIrregular:hover {
    background: var(--blue);
    color: var(--white);
}
.chapterNavItemSelected {
    background: var(--blue) !important;
    transform: scale(1.04);
    color: var(--white) !important;
}

::-webkit-scrollbar {
    display: none;
}

html {
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

html {
    overflow: -moz-scrollbars-none;
}

@-moz-document url-prefix() {
    html {
        scrollbar-width: none;
    }
}
body {
    margin: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-y: scroll;
}

body::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

#chapters {
    height: calc(100vh - 80px);
    padding: 0px;
    overflow-y: scroll;
    scrollbar-width: none;
    padding-bottom: 50vh;
}

#unlinearTrainerView {
    color: var(--white);
    background: var(--orange);
}

.dropdown-item {
    cursor: pointer;
    white-space: unset !important;
}

.codeTitle {
    outline: none;
    border-bottom: 1px #00000018 solid;
}

.editingChapter * {
    outline: none;
}

.codeOutput {
    color: #c5c8c6;
    font-family: Source Code Pro;
    min-height: 64px;
    line-height: 1.5;
    font-size: 16px;
}

.sendCodeOutput {
    display: flex;
}

.sendCodeOutput .set {
    margin-left: auto;
}

.sendCodeOutput > div {
    padding: 5px;
    background: var(--blue);
    border-radius: 2px;
    color: var(--white);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.openTaskCompiler {
    margin-left: 10px;
    display: none !important;
}

.bellIcon {
    cursor: pointer;
}

/* ================ENDE FOOTER======================= */

/* ================ANFANG LOGIN====================== */
#loginContainer {
    border-radius: 10px;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 600px;
    width: 80%;
    max-width: 1200px;

    transform: translate(-50%, -50%);
    overflow: hidden;
    padding: 0;
}

#loginContainer a {
    transition: transform 0.4s;
    display: inline-block;
    text-decoration: none;
}

#loginContainer .submitBtn {
    transition: opacity 0.4s;
}

#loginContainer .submitBtn:hover {
    opacity: 0.9;
}

.loginTitle {
    width: 100%;
    text-align: center;
    font-size: 28px;
    font-weight: 300;
    padding-top: 50px;
    padding-bottom: 15px;
}

#supervisor-register-view .loginTitle {
    padding-top: 50px;
}

.loginPictureDiv {
    flex: 6;
    height: 100%;
    padding: none;
}

.loginPicture {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.sendCodeOutput > div {
    padding: 5px;
    background: var(--blue);
    border-radius: 2px;
    color: white;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
}

.loginPictureOuter {
    width: 100%;
    height: 100%;
}

.loginField {
    flex: 4;
    height: 100%;
    margin-left: -40px;
    padding: 0px 20px;
}

.extUsers {
    height: 75%;
    overflow: auto;
}

.usersListElement {
    overflow: hidden;
}

.codeOutput {
    width: 100%;
    min-height: 100px;
    color: black;
    margin: 10px;
    border: none;
    position: relative;
}

.codeOutputParent {
    position: relative;
    margin-left: 5px;
}

.codeOutputParent::after {
    content: "";
    width: 2px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: black;
}

.scale-in-center-slow {
    -webkit-animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes scale-in-center-slow {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes scale-in-center-slow {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

#codeEditorWrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999999999999999999999999999;
    display: flex;
    justify-content: center;
    align-items: center;
}

#codeEditorWrapper #codeEditor {
    width: 90%;
    background: var(--white);
    border-radius: 5px;
    height: 80%;
    position: relative;
}

#codeEditorWrapper h1 {
    margin: 5px;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}


#closeEditor {
    position: absolute;
    top: -10;
    right: -10;
    background: var(--white);
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
}

.scale-out-center {
    -webkit-animation: scale-out-center 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
    animation: scale-out-center 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

@-webkit-keyframes scale-out-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
}
@keyframes scale-out-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
}

.invisible {
    visibility: hidden;
}

#codeEditorWrapper iframe {
    width: 100%;
    height: calc(100% - 65px);
    border: none;
    padding: 20px;
}

#editorFrame {
    height: 100%;
    overflow: hidden;
}

.showFlex {
    display: flex !important;
}

.taskWrapper.passed::after {
    background: grey !important;
}

.passed .openTaskCompiler {
    background: grey;
    cursor: default !important;
}

.loginGuestLink {
    color: var(--black) !important;
    font-size: 15px;
    float: right;
    cursor: pointer;
    transition: transform 0.4s;
}

.loginGuestLink:hover {
    transform: translateY(-2px);
}

.loginFooter {
    height: 2rem;
    line-height: 2rem;
    margin-top: auto;
    font-weight: 300;
    margin-bottom: 10px;
}

.registerExtUser {
    color: var(--black) !important;
    font-size: 15px;
    float: left;
    cursor: pointer;
    transition: transform 0.4s;
}

.registerExtUser:hover {
    transform: translateY(-2px);
}

.registerExtUserBackBtn {
    top: 2px;
    color: var(--black) !important;
    font-size: 15px;
    position: absolute;
    margin-left: 10px;
}

.loginLink {
    left: 20px;
    bottom: 5px;
    color: var(--white) !important;
    font-size: 15px;
    position: absolute;
    line-height: 2rem;
    height: 2rem;
    font-weight: 300;
    transition: transform 0.4s;
}

.loginLink > a:hover {
    transform: translateY(-2px);
}

.loginLinkTxt {
    text-align: center;
    color: var(--white) !important;
}
.loginBtn {
    display: block;
    margin: 10px auto;
    background-color: var(--green) !important;
    color: var(--fixed-white) !important;
    cursor: pointer;
}

.group-code-users * {
    pointer-events: none;
}

.groupNamesInput {
    font-family: Poppins;
    font-size: 15px;
    line-height: 1.5;
    color: #666666;
    display: block;

    background: #eaeaea;
    height: 50px;
    border-radius: 25px;
    border: 0px;
    padding: 0 25px 0 25px;
    margin: 0 auto;

    transition: 0.5s;
    outline: none;
}

.newUserForm {
    background: var(--white) !important;
    height: 25%;
    margin-top: 5px;
}

.loginInput {
    font-weight: 300 !important;
    font-size: 15px;
    line-height: 1.5;
    color: #666666;
    display: block;

    background-color: #01152611;
    height: 50px;
    border-radius: 25px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 0.5s;
    outline: none;
}

.loginFailed {
    font-size: 18px;
    color: red;
    margin: 0 auto;
    width: 100%;
    padding: 5px;
    text-align: center;
    font-weight: 300;
    position: relative;
}

.loginSuccess {
    font-size: 18px;
    color: green;
    margin: 0 auto;
    width: 100%;
    padding: 5px;
    text-align: center;
    font-weight: 300;
    position: relative;
}

.invisible {
    visibility: hidden;
}

.groupMembers {
    width: 100%;
    text-align: center;
    font-family: Montserrat;
    font-size: 24px;
    padding-top: 30px;
    padding-bottom: 15px;
}

.userBtn {
    font-family: Poppins;
    font-size: 15px;
    line-height: 1.5;
    color: var(--black);
    display: block;
    width: 60%;
    background: var(--bodybg);
    height: 50px;
    border-radius: 25px;
    border: 0px;
    padding: 0 25px 0 25px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 0.5s;
    outline: none;
}

.loginInput, .submitBtn {
    width: 80%;
}


@media (max-width: 1000px) {
    #loginContainer {
        width: 300px;
        height: 420px;
    }
    .loginPictureDiv {
        display: none;
    }
    .loginField {
        width: 100%;
        margin-left: 0;
    }
    .registerExtUser {
        left: 10px;
    }


    #supervisor-login-view .loginTitle {
        padding-top: 0;
    }
    .loginFailed {
        width: 80%;
    }
    .loginFooter {
        margin-top: 32px;
    }
}

@media (max-height: 550px) {
    #loginContainer {
        height: 400px;
        padding-bottom: 4%;
    }

    .loginFailed {
        height: 40px !important;
        font-size: 13px !important;
        width: fit-content;
    }
    .registerExtUser {
        font-size: 13px !important;
    }
    .loginGuestLink {
        font-size: 13px !important;
    }

    #loginContainer {
        padding-bottom: 3%;
    }
}

@media (max-height: 450px) {
    #loginContainer {
        padding-bottom: 2%;
    }
}

.submitBtn {
    transition: 0.5s;
}

.submitBtn:hover {
    background-color: var(--green);
    display: block;
}

.cutLine {
    width: 80%;
    margin: 0px auto;
}

.loginInput:focus {
    box-shadow: 0px 0px 2px #01152622;
}

::placeholder {
    color: #b9b9b9;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #b9b9b9;
}

::-ms-input-placeholder {
    color: #b9b9b9;
}

/*=========================ANFANG RegistrationExtTrainer=====================================*/

#supervisor-register-view .loginInformation {
    margin-top: 10px;
}

#supervisor-login-view .loginInformation {
    margin-top: 30px;
}

#requestInformation {
    width: 80%;
    margin: 0px auto;
}

.regExtTrainerLink {
    text-decoration: none;
    margin-top: 30px;
    text-align: center;
}

.normal-login {
    font-size: 15px;
    margin: auto;
    width: fit-content;
}

.regExtTrainerLink > div {
    font-size: 15px;
}

.regExtTrainerLink :hover {
    color: black;
}

/*=========================ENDE RegistrationExtTrainer=====================================*/
/* ================ANFANG CHAPTERVIEW================ */

.popupPb {
    width: 50px !important;
    height: 50px;
    object-fit: cover;
    border-radius: 50% !important;
    float: left;
    margin-right: 5px;
}

.deleteGroupButton {
    width: 200px;
    float: right;
}
.renameGroupContainer {
    width: 200px;
}
.selectPb {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
    float: left;
    margin-left: 5px;
}
.selectText {
    font-family: Roboto;
    font-size: 20px;
    padding: 10px;
    padding-left: 65px;
}
.newGroupNameInput {
    font-family: Roboto;
    width: 100%;
    outline: none;
    border-radius: 5px;
    padding: 1em;
    resize: none;
    height: 50px;
    font-size: 15px;
    transition: all 0.3s;
}

.newNameInput {
    width: 400px;
    padding: 15px;
    margin: 10px 0 22px 0;
    border: none;
    background: #f1f1f1;
    outline: none;
    float: right;
}
.downloadButton {
    height: 50px;
    width: 50px;
}

.modulHeading {
    font-size: 40px;
}
.trainer {
    background: var(--white);
    border-radius: 5px;
    margin-top: 15px;
    margin-bottom: 40px;
    padding: 40px;
}

.tableLineTop {
    border-top: 0px !important;
}

.xButtonForm {
    margin-bottom: 0px;
}

.table td {
    padding: 15px;
}

.bellIcon {
    width: 20px;
    height: 20px;
}

.ExtUserWriter {
    width: 20px;
    height: 20px;
}

@media (max-width: 845px) {
    #bellRow {
        display: none;
    }
}

@media (max-width: 560px) {
    #progressBarRow {
        display: none;
    }

    #progressBarHead {
        display: none;
    }

    .head-container {
        display: none !important;
    }
}

.trainerIcons {
    width: 20px;
    height: 20px;
}

.addUserSelect {
    height: 30px;
    width: 100%;
    padding: 15px;
    margin-bottom: 10px;
    margin-right: 10%;
    outline: none;
}

#plusRow {
    text-align: center;
}

.plusBtn {
    border: none;
    background-color: transparent;
}

.chapter {
    border-radius: 5px;
    display: block;
    word-wrap: break-word;
    padding: 20px;
}
.chapterName {
    font-size: 24px;
    font-family: Montserrat;
}

.chapterNavItem {
    background: var(--white);
    border-radius: 5px;
    display: block;
    word-wrap: break-word;
    width: 100%;

    padding: 15px;
    transition: 0.5s;
    font-family: Montserrat;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
									supported by Chrome, Opera and Firefox */
}

.chapterNavItemFinished {
    color: var(--fixed-white);
    background: var(--green);
}
.chapterNavItem:hover {
    background: var(--blue);
    color: var(--fixed-white);
}
.chapterNavItemSelected {
    background: var(--blue) !important;
    transform: scale(1.04);
    color: var(--fixed-white) !important;
}
#chapters {
    height: calc(100vh - 80px);
    padding: 0px;
    overflow-y: scroll;
    scrollbar-width: none;
    padding-bottom: 50vh;
}

#chapterNavWrapper {
    height: calc(100vh - 80px);
    position: relative;
    padding-left: 2%;
    padding-right: 2%;
    overflow-y: scroll;
    padding-bottom: 50vh;
    transition: 0.5s;
    scrollbar-width: none;
}

.row [class*="col-"] {
    transition: all 0.3s ease-in-out;
}
.col-0 {
    flex: 0 0 0;
    max-width: 0;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.chapterContent {
    /*height: 96px;
    overflow: hidden;
    /*display: none;*/
    transition: 0.5s;
    font-family: Roboto;
}
.expanded {
    height: auto;
}
.formDeleteButton {
    margin-bottom: 0px;
}

.trainerView {
    width: 100%;
    background: none;
    border-radius: 5px;
    padding: 20px;
    margin-top: 0px;
    margin-bottom: 20px;
}

.wrapTrainer {
    background: var(--white);
    padding: 20px;
    border-radius: 5px;
}

#chapterHomeBtn {
    width: 60px;

    float: left;
}
#chapterGroupName {
    font-size: 25px;
    padding: 10px;
    margin-left: 20px;
    font-family: Montserrat;
    float: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 50px);
}

#chapterNavHamburger {
    color: var(--black);
    cursor: pointer;
    width: 40px;
    height: 40px;
    transition: 0.3s;
}
.chapterNavHamburgerTurned {
    transform: rotate(90deg);
}
.chapterBottomBtnContainer {
    display: flex;
    flex-wrap: nowrap;
}
.chapterBottomBtn {
    font-family: Poppins;
    font-size: 15px;
    line-height: 1.5;
    padding: 10px;
    margin-top: 10px;
    display: block;
    background: var(--white);
    border-radius: 5px;
    border: 0px;
    outline: none;
    text-align: center;
    cursor: pointer;
    color: var(--blue) !important;
    transition: 0.3s;
}
.chapterBottomBtn:not(.grey):hover {
    background-color: var(--blue) !important;
    color: var(--fixed-white) !important;
    text-decoration: underline;
}

.handInBtn {
    margin-right: 10px;
    flex-grow: 1;
}
.nextChapterBtn {
    flex-grow: 1;
}
.chapterTitle {
    width: calc(100% - 60px);
}
.editChapterImage {
    height: 35px;
    width: 35px;
    justify-self: flex-end;
    margin-top: 10px;
}
.chapterHeader {
    width: 100%;
    display: flex;
    flex-flow: row;
    position: sticky;
    top: 0px;
    background-color: var(--white);
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    z-index: 999;
}
.showQRCodeImage {
    height: 35px;
    width: 35px;
    justify-self: flex-end;

    cursor: pointer;
    margin-top: 10px;
}

#addChapterBtn {
    text-align: center;
    background-color: rgba(255, 255, 255, 0.7);
    margin-top: 5px;
    box-shadow: 1px 1px rgba(0, 0, 0, 0.19), 0 1px 10px rgba(0, 0, 0, 0.23);
}

#addChapterBtn:hover {
    box-shadow: 0px 0px 5px var(--white);
}

.TrainerviewHeader {
    width: 100%;
}

.courseOverviewName {
    font-size: 36px;
    font-family: Montserrat;
    margin-bottom: 10px;
    float: left;
    border: none;
    transition: all 0.5s;
}

.courseOverviewGroupCode {
    font-size: 16px;
    font-family: Montserrat;

    border: none;
    transition: all 0.5s;
}

.deleteCourse {
    margin-right: auto !important;
}

.deleteCourseBtn {
    float: right;

    margin: 10px;
}
.courseOverviewImg {
    max-width: 200px;
}

/*  HANDINS  */
.handInCardHeader {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.handInCardHeaderText {
    font-family: Montserrat;
}
.handInCardHeaderDate {
    font-family: Montserrat;
    color: #7c7c7c;
}
.handInTitle {
    font-size: 20px;
    font-family: Montserrat;
    margin-bottom: 10px;
    margin-top: 10px;
}
.handInAnswerTextArea {
    width: 100%;
    height: 200px;
}
.handInAnswerSubmitBtn {
    flex-grow: 1;
    margin-top: 10px;
    font-family: Poppins;
    font-size: 15px;
    line-height: 1.5;
    color: var(--white);
    display: block;
    background: var(--orange);
    height: 40px;
    border-radius: 25px;
    border: 0px;
    outline: none;
    text-align: center;
    margin: 5px;
}
.handInAnswerSubmitBtnContainer {
    display: flex;
}
.handInContent {
    white-space: pre-wrap;
}
.newHandInBox {
    position: fixed;
    z-index: 1000;
    background-color: var(--white);
    width: 200px;
    height: 100px;
    bottom: 5px;
    left: 5px;
    border-radius: 5px;
    display: none;
    transition: 0.5s;
    font-family: Montserrat;
    padding: 10px;
}

#group-user-overview {
    margin: 1rem auto 2rem auto;
    max-height: 175px;
    overflow-x: hidden;
    overflow-y: visible;
    direction: ltr;
    width: 60%;
    scrollbar-width: thin;
    scrollbar-color: #f3f0dd var(--orange);
}

#group-user-overview::-webkit-scrollbar {
    width: 11px;
    display: block;
}

#group-user-overview::-webkit-scrollbar-track {
    background: var(--green);
    border-radius: 6px;
}

#group-user-overview::-webkit-scrollbar-thumb {
    background-color: #f3f0dd;
    border-radius: 6px;
    border: 3px solid var(--green);
}

#group-user-overview > div {
    width: 100%;
    margin: 1rem auto;
    height: 2rem;
    overflow: hidden;
}

#group-user-overview img {
    border-radius: 50%;
    object-fit: cover;
    width: 2rem;
    height: 2rem;
    float: left;
}

#group-user-overview span {
    display: block;
    border-radius: 50%;
    object-fit: cover;
    width: fit-content;
    height: 2rem;
    margin-left: 1rem;
    line-height: 2rem;
    float: left;
}

.tab-pane {
    display: none;
}

.reloadChapterContent {
    width: 100%;
    border-radius: 5px;
    color: var(--white);
    background: var(--blue);
    display: inline-block;
    padding: 10px;
}

.reloadChapterContent:hover {
    color: var(--white);
}

/* ================END CHAPTERVIEW================ */
#textContainer {
    margin-top: 30px;
    margin-bottom: 100px;
    border-radius: 10px;
    padding-bottom: 8px;
    padding-top: 8px;
}

.blankText {
    font-size: 15px;
}
/* ================Home PAGE================ */

.joinGroupInput {
    font-family: Poppins;
    font-size: 15px;
    line-height: 1.5;
    color: #666666;
    width: 100%;
    display: block;

    background: var(--bodybg);
    height: 50px;
    border-radius: 25px;
    border: 0px;
    padding: 0 25px 0 25px;
    margin: 0 auto;
    margin-top: 30px;
    transition: 0.5s;
    outline: none;
}
.joinGroupBtn {
    width: 100%;
    display: block;
    padding: 0 25px 0 25px;
    margin: 0 auto;
    margin-top: 30px;
    background-color: var(--green) !important;
    color: var(--fixed-white) !important;
}

.dropdown-menu .inner.show {
    max-height: calc(75vh - 50px) !important;
    transform: translateY(0px) !important;
}
#wrappingContainer {
    padding: 0px !important;
    margin-top: 10px;
    margin-bottom: 10px;
}
#profileRow {
    margin: 0px;
    border-radius: 5px;
    transition: background-color 0.5s;
}

.profileOuterBox {
    padding-left: 15px;
    padding-right: 15px;
    transition: background-color 0.5s;
}
#profileContainer,
.container {
    transition: background-color 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

#profilePicture img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    height: 100%;
    border-radius: 50%;
}


@media only screen and (min-width: 1200px) {
    #profileRow {
        height: 300px;
    }
    #profileContainer {
        background-color: var(--white);
        padding: 5 20 40 40;
        width: 100%;
        height: 300px;
    }
    #profilePicture {
        width: 200px;
        height: 200px;
        background-size: cover;
        border-radius: 50%;
        background-repeat: no-repeat;
        background-position: center;
        overflow: hidden;
    }
    .profileHeading {
        font-family: Montserrat;
        font-size: 60px;
        float: left;
        margin-top: 30px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #logoutBtn {
        margin-top: 15px;
        float: right;
    }
}

@media (max-width: 1200px) {
    #profileRow {
        height: 300px;
    }
    #profileContainer {
        background-color: var(--white);
        padding: 40px;
        width: 100%;
        height: 300px;
    }
    #profilePicture {
        width: 150px;
        height: 150px;
        background-size: cover;
        border-radius: 50%;
        background-repeat: no-repeat;
        background-position: center;

        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .profileHeading {
        font-family: Montserrat;
        font-size: 40px;
        float: left;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
    #logoutBtn {
        margin-top: 15px;
        float: right;
    }
    .header-user-info {
        top: 125px;
    }
}

@media (max-width: 992px) {
    .profileHeading {
        font-family: Montserrat;
        font-size: 30px;
        float: left;
        margin-top: 30px;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
    #userCourses {
        display: none;
    }
}

@media (max-width: 768px) {
    #profileTextContainer {
        display: none;
    }
    #userCourses {
        display: none;
    }
}

@media (max-width: 568px) {
    .profileHeading {
        display: none;
    }
    #userCourses {
        display: none;
    }
    #profileContainer {
        background-color: var(--white);
        width: 100%;
        padding: 0px;
        height: 300px;
    }
    #logoutBtn {
        margin-right: 20px;
    }
    #profilePicture {
        width: 200px;
        height: 200px;
        background-size: cover;
        border-radius: 50%;
        margin-top: 20px;
        background-repeat: no-repeat;
        background-position: center;
    }
}

.groupBar {
    width: 100%;
    background-color: var(--white);
    margin-top: 10px;
    font-size: 18px;
    display: flex;
    align-items: center;
    font-size: 40px;
    font-weight: 600;
}

#courseHeadline {
    margin-top: 50px;
}

.headlineOuterBox {
    padding-left: 15px;
    padding-right: 15px;
}

.tiles {
    margin: 0px;
}

.group-name {
    font-size: 18px;
    display: block;
}

.group-member-info-name{
    display: flex;
    flex-direction: column;
    align-items: space-around;
}

.group-member-info{
    display: flex;
    justify-content: space-around;
}

.group-owner-name{
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 400;
    font-size: 18px !important;
    line-height: 30px;
    /* identical to box height, or 167% */

    letter-spacing: 0.006em;

    color: #00A3FF;
}

.group-member-count {
    margin-top: 5px !important;
}

#add-group-owner-name {
    margin-left: 15.4px;
}

.group-members {
    display: inline-flex;
    width: 80%;
}

.group-member{
    border: 1px solid #FFFFFF;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    transform: translateY(-2.5rem);
    object-fit: cover;
}

.group-owner {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    transform: translateY(-2.5rem);
    border: 3px solid #fff;
}

.group-tile{
    width: 424px !important;
    height: fit-content !important;
    position: relative;
    background: white;
    border-radius: 5px;
    border: 1px solid #D9DBE0;
    /* margin: 1rem 0; */
}

.join-group{
    border: 1px solid #DADCE0;
}

.home-paragraph-header{
    margin: 0 auto;
    font-size: 36px;
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.join-group-input::placeholder {
    font-size: 18px;
    font-weight: 400;
    color:rgb(0, 0, 0);
    opacity: 0.5;
    margin-left: 33px;
    margin-bottom: 12px;
}

.join-group-input:focus::placeholder {
    font-size: 18px;
    font-weight: 400;
    color:rgb(0, 0, 0);
    opacity: 1;
    margin-left: 33px;
}

.join-group-input:focus {
    border-bottom-color: var(--blue) !important;
    caret-color: var(--blue);
}

.join-group-input {
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
}

.join-group-image {
    height: 100% !important;
    /* margin-top: 53px; */
    padding-top: 10px;
}

#join-group-title {
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 14px;
}

.join-group-btn{
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    letter-spacing: 0.006em;
    color: var(--blue);
    cursor: pointer;
}

.join-group-details{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.join-group .group-tile-infos {
    padding: 20px 30px 30px 30px;
}

.group-tile-infos{
    padding: 20px 0px 16px 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.group-info {
    display: flex;
}

.group-member-details{
    width: 100%;
    margin-left: 15.4px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.group-member-wrapper{
    display: flex;
}

.group-member-wrapper:hover{
    display: flex;
	border: 2px dashed #cccccc;
    margin: -4px;
    padding: 2px;
}

.group-member-images{
    display: flex;
    align-content: center;
}

.group-member-img{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.group-member-img:last-child {
    margin-right: 6px;
}

.group-member-img > img{
    width: 26px;
    height: 26px;
    object-fit: cover;
    border-radius: 50%;
    z-index: 0 !important;
}

.waves-effect img {
    z-index: 0 !important;
}

.group-member-infos{
    display: flex;
    justify-content: space-around;
}

/* .tile-text-small{
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;   
    letter-spacing: 0.006em;
    color: #5F6368;
} */
.tile-text-small {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 30px;
    color: #5F6368;
    margin-left: 20 !important;
}

.tile-text-big {
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: 0.006em;
    color: #202124;
}

.title-text-big {
    margin: 7px 0 1px 0;
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 100%;
    color: #202124;
}

.general-switch-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 15px;
}

.general-switch {
    display: flex !important;
    justify-content: center;
    align-items: center;
    background: #F4F8FE;
    border-radius: 5px;
    height: 35px;
    width: auto;
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    letter-spacing: 0.005em;
    color: var(--blue);
    padding: 0 10px !important;
    text-transform: capitalize !important;
}

.switch-active {
    background: var(--blue);
    color: #FFFFFF;
}
.switch-active font {
    color: #fff !important;
}
.switch-disabled{
    background: var(--grey-disabled);
    color: #FFFFFF;
    opacity: 0.6;
}

.course-tile-wrapper{
    display: flex;
    flex-direction: column;
}

.course-tile{
    width: 424px !important;
    height: fit-content !important;
    position: relative;
    background: white;
    border-radius: 5px;
    border: 1px solid #D9DBE0;
    /* margin: 1rem 0; */
    position: relative;
    z-Index: 10;
}

.course-tile-info{
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    border-top: 1px solid #D9DBE0;
    padding: 25px 19px 24px 25px;
}

.course-image{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px 10px 0px 0px;
    height: 232px !important;
}

.course-image > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0 !important;
}


.course-tile-member{
    display: flex;
    /* justify-content: space-around; */
}

.group-owner-img{
    width: 65px;
    height: 65px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.group-owner-img > img{
    object-fit: cover;
    width: 65px;
    height: 65px;
    border-radius: 50%;
}

.group-image{
    width: 100%;
    height: 232px;
    display: flex;
    align-items: center;
    border-radius: 10px 10px 0px 0px;
}

.card-collection{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 2fr));
    justify-items: center;
}

.group-image > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.join-group-image > img {
    height: 232px !important;
}

.group-name .tile-text-big {
    margin-top: 12px;
}

.group-name .tile-text-small {
    margin-top: 5px;
}

.courseImageWrapper > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tileInfoWrapper {
    padding: 10px;
    padding-top: 0px;
}
.tile {
    /* margin: 1rem 0; */
    transition: 0.1s ease-out !important;
    -webkit-transition: 0.1s ease-out !important;
    z-index: 0;
    border-radius: 10px !important;
    width: 100%;
    max-width: 500px;
    min-width: 400px;
}

.edt {
    transition: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.tileInnerBox {
    width: 100%;
}
.editTile.collapsing {
    -webkit-transition: none !important;
    transition: none !important;
    display: none !important;
}
.tileOuterBox {
    margin-top: 0;
    height: 100%;
    background-color: var(--white);
    color: black;
    border-radius: 10px 10px 5px 5px !important;
    transition: 0.4s ease;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
}


.trainer_flag {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    background: url("../images/bookmark-24px.svg") no-repeat;
    background-size: 100%;
}

.btn-floating i:not(.material-icons).fa-play {
    color: #4f4f4f;
    font-size: 1.2rem;
}

.btn-floating i:not(.material-icons).fa-pen {
    color: #4f4f4f;
    font-size: 1.2rem;
}

.material-icons.md-light { color: #fff; }

.tileNameBox {
    font-family: Montserrat;
    font-size: 25px;
    max-height: 170px;
    margin-bottom: 0px;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tileNameBox span {
    font-size: 22px;
    color: #4f4f4f;
}

.tileNameBox2 {
    font-family: Montserrat;
    font-size: 25px;
    height: 70px;
    margin-bottom: 0px;
}

.tileName {
    font-family: Roboto;
    font-size: 17px;
    margin-bottom: 0px;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.tileName {
    color: rgb(0, 160, 253);
}

.trainerTileImage {
    object-fit: cover;
    height: 100%;
    width: 100%;
    object-position: center;
}

.tileCoursePictureDiv {
    height: 216px;
    width: 100%;
}

.tileCourseInfo {
    display: flex;
}

.courseName {
    font-size: 15px;
}

.groupName {
    font-size: 17px !important;
    color: rgb(0, 160, 253);
    margin-bottom: 1px;
    border: none;
    max-width: 100%;
    outline: none;
    font-family: Roboto;
}

.groupAndCourseInfo {
    align-items: center;
    width: 60%;
}

.tileImage {
    border: 0px black;
    padding: 15px;
    height: 200px;
    width: 200px;
    object-fit: contain;
    z-index: 1;
}

.tileImagePlusIcon {
    border: 0px black;

    height: 160px;
    width: 160px;
    object-fit: contain;
    margin-top: 25px;
    margin-bottom: 35px;
}

.tileInfo {
    font-family: Montserrat;
    font-size: 14px;
    /*margin-left: 20px;
     margin-right: 20px;
    */
    margin-block-start: 0em;
    margin-block-end: 0em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tileInfoIcon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    object-fit: cover;
}
.tileBtn {
    opacity: 0;
    transition: 0.5s;
    margin-top: 5px;
}
.tileDeleteBtn {
    transition: 0.5s;
    margin-top: 5px;
    float: right;
}
.tileEditBar {
    transition: 0.5s;
}
.tileChangeName {
    float: left;
}
.tileChangeVisibility {
    float: left;
    text-align: center;
    margin-bottom: 0px;
}
.tileChangeIsLinear {
    float: left;
}

.tileEditBtn {
    float: left;
}
.tileChangeImage {
    float: right;
}
.checkboxLinear {
    margin-top: 10px;
    cursor: pointer;
}


.checkboxLinear > label {
    margin: 0;
}
.checkboxLinear > label > label {
    cursor: pointer;
    font-weight: 600;
}
.checkboxLinear > label > label:before {
    height: 25px !important;
}
.checkboxLinear > label > label:after {
    height: 25px !important;
}

.seperateSettings {
    margin: 0;
}

.changeVisibilityContainer {
    margin-top: 5px;
    margin-left: 3px;
    display: flex;
    justify-content: 10px;
    gap: 10px;
}

.changeVisibilityButton {
    border-radius: 1100px;
    padding: 4px 10px 4px 10px;
    text-align: center;
    background: rgba(0, 0, 0, 0.1);
    color: grey;
    transition: all 0.1s;
}

.tileOuterBox:not(.view) .changeVisibilityButton:not(.visibilitySet):hover {
    color: var(--black);
    background: #b5b2b29c;
}

.visibilitySet {
    background: rgb(0, 160, 253) !important;
    color: var(--fixed-white);
}
.courseDetails {
    padding: 1rem;
    position: relative;
    height: 180px;
    display: flex;
    flex-flow: column;
}

.deleteCourse {
    margin-right: auto !important;
}

.changeCourseName {
    background: rgba(0, 0, 0, 0.2) !important;
    color: white !important;
    position: absolute !important;
    top: 20px;
    right: 20px;
    z-index: 1 !important;
}

.changeCourseName .inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.firstChapterContent {
    font-size: 12px;
    height: 40px;
    overflow: auto;
}
.firstChapterContent > div > div {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.firstChapterContent > div > div > span {
    font-size: 14px !important;
}

.firstChapterContent > div > div > div {
    font-size: 14px !important;
}

.firstChapterContent > div > div > h1 {
    font-size: 14px !important;
    margin: 0 !important;
}

.userInfo {
    font-family: Montserrat;
    font-size: 22px;
}
/*    CREATE GROUP POPUP*/

.courseSelect {
    min-height: 60px;
    width: 100% !important;
    margin-bottom: 10px;
    outline: none;
}
.soos {
    background: var(--black);
}
.courseSelectOption {
    padding-left: 8px;
}
.dropdown-menu:not(.addTaskMenu) {
    width: 100% !important;
}

.ModalNameInput {
    width: 100%;
    padding: 15px;
    margin: 10px 0 22px 0;
    border: none;
    background: #f1f1f1;
    outline: none;
}
.ModalNameInput:focus {
    background-color: #ddd;
    outline: none;
}

.ModalDescriptionInput {
    width: 100%;
    padding: 15px;
    margin: 10px 0 22px 0;
    border: none;
    background: #f1f1f1;
    outline: none;
}
.ModalDescriptionInput:focus {
    background-color: #ddd;
    outline: none;
}

/*    ENDECREATE GROUP POPUP*/

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
    background-color: #555;
    color: var(--white);
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    opacity: 0.8;
    position: fixed;
    bottom: 23px;
    right: 28px;
    width: 280px;
}

/* ================END HOME PAGE================ */
/*   ===============QUIZ ======================*/

.type2Question {
    display: block !important;
}
.questionRightAnswers {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}
.questionWrongAnswers {
    margin-top: 10px;
}
.questionAnswerBtn {
    margin-right: 5px;
    margin-bottom: 5px;
    width: calc(25% - 5px);
}
.questionAnswerBtnInner {
    background-color: var(--orange) !important;
    color: var(--fixed-white);
    border: 0px !important;
    width: 100%;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.questionAnswerBtnInner:hover {
    background-color: var(--darkorange) !important;
    border: 0px !important;
}
.questionAnswerBtnInner.active {
    background-color: var(--blue) !important;
    border: 0px !important;
}
.questionAnswerBtnInner.active:hover {
    background-color: var(--darkblue) !important;
    border: 0px !important;
}
.submitQuizBtn {
    margin-left: 10px;
    margin-right: 10px;
    background-color: var(--blue);
    color: var(--fixed-white);
    transition: 0.5s;
    float: right;
}
.submitQuizBtn:hover {
    background-color: var(--white);
    color: var(--blue);
}
.submitQuestionBtnFinished {
    color: var(--fixed-white) !important;
    background-color: var(--green) !important;
}
.submitQuestionBtnWrong {
    color: var(--fixed-white) !important;
    background-color: var(--red) !important;
}

.active.chapterNavItem {
    background-color: var(--blue) !important;
}
.quizTitle {
    outline: none;
    border-bottom: 1px #00000018 solid;
    display: flex;
}
.quizInputLabel {
    font-size: 11px;
}
.quizInputGroup {
    margin-top: -25px;
    margin-left: auto;
    margin-right: 20px;
}
.quizInput {
    font-size: 12px;
    padding: 0px;
    color: var(--black) !important;
}
.quizInput:read-only {
    background-color: var(--white) !important;
    border: none;
}
/*   =============== ENDE QUIZ ======================*/

@media (max-width: 1200px) {
    .editor-menuebar {
        justify-content: space-between;
        background: var(--white);
        height: 100px;
        margin-left: 10px;
        margin-right: 10px;
        border-radius: 10px;
        overflow: hidden;
    }

    .editor-menuebar > button {
        border-radius: 0px !important;
    }
}

@media (max-width: 400px) {
    .editor-menuebar {
        height: 150px;
    }
}

#videoDropdown {
    background-color: var(--white);
    color: var(--white);
    font-size: 1rem;
    padding: 1rem;
    cursor: pointer;
    transition: all 250ms;
    border: none;
    outline: none;
}
.dropdown-item {
    color: var(--black) !important;
    box-shadow: none;
}
.dropdown-item:focus,
.dropdown-item:hover {
    color: var(--black);
    text-decoration: none;
    background-color: var(--white-grey);
    box-shadow: inset 0 0 0 99999px rgba(122, 122, 122, 0.5);
}

.dropdown-menu {
    background-color: var(--white-grey);
}

#videoDropdown > img {
    width: 18px;
    height: 18px;
}

#videoDropdown:hover {
    background: rgb(27, 171, 255);
}

.modal-footer > button {
    color: var(--fixed-white) !important;
}

#youtubeModal {
    z-index: 99999999999999;
}

#youtubeLink {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    padding: 10px;
    outline: none;
    background: white;
}

.youtubeIframe {
    width: 100%;
}

#nameContent {
    font-family: "Roboto", sans-serif;
    outline: none;
    background-color: var(--white);
    color: var(--black);
    transition: all 0.5s;
    border-radius: 5px;
    padding: 20px;
    width: 100%;
    overflow: auto;
    overflow-x: hidden;
    margin-bottom: 20px;
    border: none;
    font-size: 30px;
}

strong {
    color: inherit;
}

.CodeMirror pre {
    color: unset;
}

.CodeMirror * {
    color: unset;
}

.changeMenu.dropdown-menu {
    width: 200px !important;
}

.changeTaskType {
    margin: 0px 10px;
    outline: none !important;
    border: none;
    background: var(--white);
}

.float-add-chapter {
    border-radius: 50%;
    position: fixed;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    width: 40px;
    height: 40px;
    background: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
}

.float-add-chapter img {
    filter: brightness(0) invert(1);
}

/*head*/
header > a {
    display: flex;
    align-items: center;
    cursor: pointer;
}

header {
    display: flex !important;
    justify-content: flex-start;
    height: 60px;
    margin: 10px;
    align-items: center;
}

.name-container {
    font-size: 32px;
    text-align: right;
}



.card-collection {
    grid-gap: 29px;
    width: 100%;
    /* grid-template-columns: repeat(auto-fill, minmax(424px, 1fr)); */
}

.tile[data-gid]:hover, .tile[data-coid]:hover, .tile:hover {
    transform: translateY(-4px);
    box-shadow: 0px 10px 50px rgba(18, 45, 96, 0.1);
}

.checkboxLinear * {
    user-select: none;
}

#content-wrapper {
    position: relative;
    padding-bottom: 3rem;
	/*overflow: auto;*/
}

.firstChapterContent {
    font-size: 12px;
}

.waves-effect {
    transition: 0.1s ease-out !important;
    -webkit-transition: 0.1s ease-out !important;
}

.dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
}

.dialog .dialog-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: scale-in-center 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    background: white;
    min-width: 350px;
    border-radius: 10px;
    padding: 20px;
    transition: 0.1s ease-out !important;
}

.dialog .dialog-content p {
    font-size: 12px;
}

.dialog .dialog-content.course-dialog {
    display: flex;
    flex-direction: column;
    width: 465px;
    width: min(465px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    min-width: 0;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow: hidden;
}

.course-dialog .dialog-content-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.course-dialog .submission {
    flex: 0 0 auto;
}

.course-dialog .multi-page-app-wrapper {
    width: 100%;
    max-width: 425px;
}

.course-dialog .course-tile-size.editors {
    width: 100% !important;
    margin: 12px auto 0;
}

.course-dialog .card-wrapper,
.course-dialog .course-tile {
    width: 100% !important;
    min-width: 0;
}

.course-dialog .course-image {
    height: 174px !important;
    height: clamp(120px, 28vh, 174px) !important;
}

.course-dialog .course-tile-wrapper .course-tile-info {
    padding: 14px !important;
}

.course-dialog .general-switch-wrapper {
    margin-top: 12px;
}

.dialog .dialog-content.settings-dialog {
    width: min(420px, calc(100vw - 32px));
    min-width: 0;
}

.global-settings-dialog {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 280px;
    padding-top: 8px;
}

.global-settings-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.global-settings-section + .global-settings-section {
    padding-top: 18px;
    border-top: 1px solid var(--border-grey);
}

.global-settings-section-title {
    margin-bottom: 2px;
    color: var(--fixed-black);
    font-size: 17px;
    font-weight: 700;
}

.global-settings-dialog label {
    font-size: 14px;
    font-weight: 600;
    color: var(--fixed-black);
}

.global-settings-dialog select,
.global-settings-password input {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    border: 1px solid var(--border-grey);
    border-radius: 6px;
    background: var(--fixed-white);
    padding: 0 12px;
    font-size: 16px;
}

.global-settings-password input {
    margin: 0 0 4px !important;
    color: #101828 !important;
    background: #fff !important;
    border: 1px solid #98a2b3 !important;
}

.global-settings-password input:focus {
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 2px rgba(33, 127, 243, .2) !important;
    outline: none;
}

.global-settings-error {
    min-height: 20px;
    color: #b42318 !important;
    font-size: 13px;
    line-height: 20px;
}

body.skin-dark .global-settings-section-title {
    color: var(--black);
}

h1 {
    margin: 0 !important;
    font-size: 48px !important;
}

@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0) translate(-50%, -50%);
        transform: scale(0) translate(-50%, -50%);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1) translate(-50%, -50%);
        transform: scale(1) translate(-50%, -50%);
        opacity: 1;
    }
}


.greyed {
    background: lightgrey !important;
}

#courseImage.preview {
    background: rgba(0, 0, 0, 0.05);
}

#courseImage.preview img[src="./images/publish.svg"] {
    transform: scale(0.5);
    user-select: none;
}

.scale-out {
    animation: scale-out 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) both !important;
}

@keyframes scale-out {
    0% {
        -webkit-transform: scale(1) translate(-50%, -50%);
        transform: scale(1) translate(-50%, -50%);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(0) translate(-50%, -50%);
        transform: scale(0) translate(-50%, -50%);
        opacity: 1;
    }
}

.tileNameBox span[contenteditable="true"] {
    outline: none;
    width: 100%;
    cursor: text;
    display: block;
}

#new-course-upload {
    display: none;
}

.dialog-content .tile {
    width: 300px;
    max-width: 100%;
    margin: 0 auto;
}

.tileOuterBox a.course-link {
    width: fit-content;
    display: block;
}

#add-group {
    cursor: initial !important;
}

#add-course, #add-group {
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    margin-left: auto;
    cursor: pointer !important;
}

#add-course span, #add-group span {
    color: white !important;
}

#add-course img, #add-group img {
    transform: scale(0.8);
    filter: brightness(0) invert(1);
}

.btn-rounded {
    border-radius: 100px;
    padding: 10px;
    font-size: 16px;
    background: rgb(0, 160, 253) !important;
}

#chapter-page {
    height: 100%;
    width: 100%;
}

.image-top {
    width: 100%;
    height: 45%;
}

.image-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chapter-page-content {
    margin-top: -100px;
    background: white;
    padding: 10px 50px;
    position: relative;
    width: 120%;
    margin-left: -10%;
}

.chapter-sidebar {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 900px;
    width: 0px;
    border-top-right-radius: 50px;
    background: black;
    transition: 0.2s ease-out;
}

.open-chapters {
    background: white !important;
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
    transition: 0.2s ease-out;
}

.btn-floating {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.chapter-content-wrapper {
    width: 100%;
    position: relative;
    transition: 0.2s ease-out;
    margin-top: 20px;
    height: 100%;
    overflow-y: hidden;
}

.chapter-page-content.expanded .chapter-sidebar {
    width: 200px !important;
}

.chapter-page-content .open-chapters img {
    transition: 0.2s ease-out;
}

.chapter-page-content.expanded .open-chapters img {
    transform: rotate(-90deg);
}

.parralax-container {
    width: 100%;
    height: 45%;
}

.parralax img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chapter-page-content {
    width: 110%;
    margin: 0 auto;
    background: white;
    padding: 50px 10px;
    position: relative;
    overflow: hidden;
}

.shift {
    margin-top: -50px !important;
}

.shadow {
    filter: drop-shadow(1px 3px 24px #01152633);
}


.chapter-top{
    display: flex;
    margin: 40px 0px 20px 0px;
}

.chapter-top h1{
    font-weight: 700;
    font-size: 35px !important;
}

.chapter-button-collection{
    background: var(--grey-bg);
    border-radius: 10px;
    padding: 13px;
    display: flex;
    gap: 35px;
    align-items: center;
}

.chapter-button-collection a{
    display: flex;
    align-items: center;
    cursor: pointer;
}

.chapter-button-collection i{
    font-size: 26px;
}

.chapter-button-collection i:not(.red-color){
    color: var(--blue);
}

.red-color{
    color: var(--red);
}

.chapter-top h1{
    margin-right: auto !important;
}

.open-chapter-overview i {
    transition: 0.2s ease-out;
    cursor: pointer;
    font-size: 25px;
    color: black !important;
}

.btn-white {
    background: white !important;
}

.flex-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.chapter-page-content.expanded .open-chapter-overview i {
    transform: rotate(180deg) !important;
}

.chapter-side-bar {
    width: 400px;
    transition: 0.2s ease-out;
    overflow: hidden;
    border: 1px solid var(--border-grey);
    border-radius: 10px;
    height: 60px;
    position: absolute !important;
    right: 0px;
    top: 0px;
    background-color: white;
    cursor: pointer;
}

.chapter-list-parent{
    overflow-y: auto;
    height: 450px;
}

.chapter-container.expanded .chapter-side-bar {
    height: 550px;
}

.chapter-page-content.expanded .chapter-content-wrapper {
    width: calc(100% - 400px);
}

.chapter-content{
    height: 100%;
}


.side-bar-h1-container{
    display: flex;
    justify-content: space-between;
    height: 60px;
    align-items: center;
    padding: 20px;
}

.side-bar-h1-pos-container{
    display: flex;
    position: relative;
    right: -178px;
    width: 0;
    top: 10px;
}

.chapter-side-bar .chapter-list-item {
    color: var(--blue) !important;
    position: relative;
    margin-left: 15px;
    font-size: 18px;
    cursor: pointer;
    margin: 0px 0px 10px 20px;
    height: 80px;
    border: 1px solid var(--fixed-black);
    border-radius: 10px;
    padding: 15px;
    display: flex !important;
    align-items: center;
}

.chapter-side-bar .chapter-list-item::before {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--secondary-grey);
    position: absolute;
    left: -15px;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.chapter-side-bar .chapter-list-item:not(:last-child)::after {
    content: "";
    width: 0px;
    height: 85px;
    position: absolute;
    left: -11px;
    border: 1px dashed var(--secondary-grey);
    top: 42px;
}

.chapter-side-bar .chapter-list-item span{
    font-weight: bold;
}

.chapter-side-bar .chapter-list-item.finished{
    border: 1px solid var(--green);
	background: #01c87522;
}

.chapter-list-item.active::before{
    background: var(--blue) !important;
}

.chapter-list-item.active::after{
    border: 1px dashed var(--blue) !important;
}

.chapter-list-item-wave {
    width: 100%;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
  }

  .content-block{
    position: relative;
    padding: 20px;
  }

  .content-parent{
    border-radius: 10px;
    position: relative;
    margin: 15px 0px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: white;
  }

  .content-block.unsaved::before{
      content: '';
      position: absolute;
      left: 0px;
      top: 0px;
      bottom: 0px;
      width: 10px;
      background: black;
      border-radius: 10px 0px 0px 10px;
  }


  .chapter-edit-btn{
    position: relative !important;
    bottom: 0 !important;
    right: 0 !important;
    margin-right: 10px;
}

.chapter-list-item-pos{
    position: absolute;
    top: 50px;
    right: 15px;
    text-align: end;
    display: flex;
    align-items: flex-end;
}

.chapter-list-item-pos-pos{

}

.chapter-list-item-pos-max{
    font-size: 13px;
}

.side-bar-h1-container h1{
    font-weight: bold;
    font-size: 25px !important;
}

#add-chapter{
    margin-right: 129px !important;
    margin-left: 18px;
}

#sort-chapters{
    position: relative;
    top: 5px;
}

#archived-chapters{
    position: relative;
    top: 5px;
}

.color-main {
    background: var(--blue) !important;
}

.preload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.floating-text {
    display: flex !important;
    color: var(--blue) !important;
    width: unset !important;
    border-radius: 100px !important;
    font-size: 14.5px !important;
    padding: 5px !important;
    align-items: center;
}

.floating-text i {
    color: var(--blue) !important;
    width: 25px !important;
}

.btn-text {
    width: 100%;
}

.fixed-action-btn ul {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    top: 0px;
}

.chapter-list{
    overflow-y: hidden;
    margin: 10px;
}

.expanded .chapter-list {
    padding: 10px 20px 20px 20px;;
    display: block;
}

.group-list {
    max-height: 600px;
    overflow: auto;
}

.stuck {
    position: fixed !important;
}

.input-field input:focus {
    border-bottom: 2px solid var(--blue) !important;
    box-shadow: 0 1px 0 0 var(--blue) !important;
}

.input-field .active {
    color: var(--blue) !important;
}

.overview-edit-container {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-bottom: 20px;
}

.overview-edit-container > div {
    height: 35px !important;
}

.overview-edit-container #sort-chapters {
    width: 35px !important;
}

.fixed-action-btn {
    z-index: 99 !important;
}

.editable {
    padding: 10px !important;
    height: calc(100% - 80px);
    display: flex;
    flex-flow: column;
}

.editor-header {
    position: absolute;
    top: 0;
    left: 50px;
    right: 50px;
    width: calc(100% - 100px);
    height: 50px;
    display: flex;
    overflow: hidden;
    padding: 5px;
    align-items: center;
    justify-content: center;
}

.chapter-edit-content {
    height: 100%;
}

.editor-item {
    cursor: pointer;
    height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0px 10px;
    border-radius: 2px;
}

.editor-item i {
    font-size: 26px;
    -moz-user-select: none;
    user-select: none;
    color: var(--blue);
}

.add-block-row {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}
.content-block:last-child {
    margin-bottom: 0px;
}

a:hover {
    color: inherit;
    text-decoration: none !important;
}

@keyframes scale {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}


#testingDOMElement {
    white-space: pre;
    position: fixed;
    top: -100%;
    left: -100%;
}
.ql-editor {
    font-size: 18px !important;
    overflow-y: visible;
    height: fit-content;
}

.ql-editor h2 {
    font-size: 17px !important;
    font-weight: 400 !important;
    /* margin: 0 !important; */
    color: #ffffff;
    background: var(--blue);
    margin-top: 10px !important;
    margin-bottom: 20px !important;
    padding: 5px 10px !important;
    border-radius: 5px !important;
    text-transform: uppercase;
    display: inline-block;
    width: max-content;
    letter-spacing: 1px;
}

.kix-view {
    white-space: pre;
    position: relative;
}

.kix-view > div {
    color: inherit !important;
}

.kix-selection {
    position: absolute;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    top: 0px;
    bottom: 0px;
    pointer-events: none;
}

.pointer {
    position: absolute;
    width: 2px;
    background: black;
}

.editor-component {
    position: relative;
}

#written {
    white-space: pre;
    position: fixed;
    top: -100%;
    height: -100%;
}

.main-container {
    margin: 0 13%;
}

@media (max-width:1797px) {
    .main-container {
        margin: 0 11%;
    }
}

@media (max-width:1779px) {
    .main-container {
        margin: 0 10%;
    }
}

@media (max-width:1705px) {
    .main-container {
        margin: 0 9%;
    }
}

@media (max-width:1662px) {
    .main-container {
        margin: 0 8%;
    }
}

@media (max-width:1621px) {
    .main-container {
        margin: 0 7%;
    }
}

@media (max-width:1583px) {
    .main-container {
        margin: 0 6%;
    }
}

@media (max-width:1546px) {
    .main-container {
        margin: 0 5%;
    }
}

@media (max-width:1511px) {
    .main-container {
        margin: 0 4%;
    }
}


@media (max-width:974px) {
    .main-container {
        margin: 0 3%;
    }
}

.chapter-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.back-to-chapter i {
    font-size: 32px;
    cursor: pointer;
}

.back-to-chapter {
    padding: 5px;
}

.ql-container.ql-snow {
    border: none !important;
}

.ql-editor {
    padding: 0px !important;
    margin-top: 10px !important;
}

.ql-editor img.iiigel-image-wrap-left,
.ql-editor img.iiigel-image-wrap-right {
    display: inline;
    max-width: min(50%, 420px);
}

.ql-editor img.iiigel-image-wrap-left {
    float: left;
    margin: 0 1em 0 0;
}

.ql-editor img.iiigel-image-wrap-right {
    float: right;
    margin: 0 0 0 1em;
}

.ql-editor:has(img.iiigel-image-wrap-left)::after,
.ql-editor:has(img.iiigel-image-wrap-right)::after {
    content: "";
    display: block;
    clear: both;
}

.iiigel-image-wrap-toolbar {
    position: absolute;
    left: 50%;
    bottom: -42px;
    display: flex;
    transform: translateX(-50%);
    border: 1px solid #444;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.iiigel-image-wrap-button {
    width: 36px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-right: 1px solid #444;
    background: #fff;
    cursor: pointer;
    color: #444;
}

.iiigel-image-wrap-button:last-child {
    border-right: 0;
}

.iiigel-image-wrap-button.active {
    background: #e8f0fe;
    color: #1A73E8;
}

.iiigel-image-wrap-button .material-icons {
    font-size: 20px;
}

@media (max-width: 700px) {
    .ql-editor img.iiigel-image-wrap-left,
    .ql-editor img.iiigel-image-wrap-right {
        float: none;
        display: block;
        max-width: 100%;
        margin: 10px auto;
    }
}

@keyframes toolbar {
    0% {
        max-height: 0px;
    }
    100% {
        max-height: 100px;
        overflow: visible;
    }
}

.ql-toolbar {
    overflow: hidden;
}

.checkmark-circle {
    width: 100%;
    height: 100%;
    position: relative;
    display: inline-block;
    vertical-align: topl;
    position: absolute;
}

.checkmark-circle .background {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    background: transparent;
}

.checkmark-circle .checkmark {
    border-radius: 5px;
}

.checkmark-circle .checkmark.draw:after {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-name: checkmark;
    animation-name: checkmark;
    -webkit-transform: scaleX(-1) rotate(135deg);
    transform: scaleX(-1) rotate(135deg);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.checkmark-circle .checkmark:after {
    opacity: 1;
    height: 25px;
    width: 12.5px;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-right: 5px solid var(--blue);
    border-top: 5px solid var(--blue);
    border-radius: 2.5px !important;
    content: "";
    left: 12.333333px;
    top: 27px;
    position: absolute;
}

@-webkit-keyframes checkmark {
    0% {
        height: 0;
        width: 0;
        opacity: 1;
    }

    20% {
        height: 0;
        width: 12.5px;
        opacity: 1;
    }

    40% {
        height: 25px;
        width: 12.5px;
        opacity: 1;
    }

    100% {
        height: 25px;
        width: 12.5px;
        opacity: 1;
    }
}

@keyframes checkmark {
    0% {
        height: 0;
        width: 0;
        opacity: 1;
    }

    20% {
        height: 0;
        width: 12.5px;
        opacity: 1;
    }

    40% {
        height: 25px;
        width: 12.5px;
        opacity: 1;
    }

    100% {
        height: 25px;
        width: 12.5px;
        opacity: 1;
    }
}

.ql-container {
    height: unset !important;
}


.slide-in-left{
    -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

.inner-content {
    overflow: hidden;
}

.block-button-container {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
}

.save-block.delete {
    width: 35px !important;
    height: 35px !important;
}

@-webkit-keyframes slide-out-left {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0;
    }
}
@keyframes slide-out-left {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0;
    }
}

.slide-out-left {
    -webkit-animation: slide-out-left 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
    animation: slide-out-left 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

.ql-syntax {
    font-family: "Source Code Pro", monospace;
}

.ql-syntax * {
    font-family: inherit;
}

.ql-video {
    width: 100%;
    height: 500px;
}


.align-mid{
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding-bottom: 10px;
    pointer-events: none;
}

.align-mid *{
    pointer-events: all;
}

.align-mid ul{
    left: unset !important;
    right: unset !important;
}


.align-mid ul li{
    margin-bottom: 0 !important;
}

.align-mid ul li:not(:first-child){
    margin-left: 5px;
}

.white i{
    color: black !important;
}


.task-parent{
    display: flex;
}


.task-content{
    width: 90%;
}



.task-check{
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(10% - 10px);
    margin-left: 10px;
    display: flex !important;
}

.task-check i{
    font-size: 32px;
}


.task-parent.finished{
    background:rgba(0, 0, 0, 0.05);
}


.task-parent.finished .task-check i{
    color:var(--blue) !important;
}

.submit-button{
    width: 10%;
}

.submit-text-editor{
    height: 500px;
}


.submit-inner{
    margin-top: 40px;
    margin-left: 40px;
    margin-right: 40px;
}

.accept-back{
    display: flex;
    justify-content: flex-end;
}

.accept-back .back{
    margin: 15px;
}

.accept-buttons{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.chapter-timer{
    position: fixed;
    z-index: 999999;
    top:5%;
    left:5%;
    background-color: white;
    border-radius: 10px;
    padding: 8px;
}

.submit-overlay{
    position: fixed;
    z-index: 999999;
    top:5%;
    left:5%;
    right:5%;
    bottom:5%;
    background-color: white;
    border-radius: 10px;
}

.submit-wrapper{
    display: flex;
    align-content: space-between;
    justify-content: center;
    flex-direction: column;
}

.spacing-wrapper{
    padding: 20px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}


#supervisor-login-view {
    margin-top: 40px;
}

#supervisor-register-view {
    display: none;
}

.clickable {
    transition: transform 0.4s;
    cursor: pointer;
    font-weight: 300;
    line-height: 36px;
}

.clickable:hover {
    transform: translateY(-2px);
}

#regExtTrainerButton {
    margin-top: 25px;
}


.box-content{
    width: 85%;
}


.slider-2{
    display: flex;
    gap: 20px;
    justify-content: flex-start;
}


.slider-2.scalable{
    width: 200%;
    padding: 0px 0px 20px 0px;
}

.slider-2-wrapper{
    width: 100%;
    overflow: hidden;
    width: 100%;
    margin-left: -20px;
}


.scroll.abs{
    left: 10px;
    right: unset !important;
}


.slider-2{
    transition: all 0.2s ease-out;
}

.slider-2.extended{
    margin-left: calc(-100% - 20px);
}

.scroll i{
    transition: all 0.2s ease-out;
}

.slider-2.extended .scroll i{
    transform: rotate(0deg);
}


.user-editor-item{
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding: 5px;
    position: relative;
}

.user-avatar-wrapper{
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 50%;
    min-width: 30px;
}

.user-avatar-wrapper img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.user-editor-item .roles{
    margin-left: auto;
}


.user-editor-item .roles .tooltipped{
    cursor: pointer;
}

.user-editor-item:not(:last-of-type)::after{
    content: '';
    position: absolute;
    bottom: -2px;
    height: 2px;
    left: 10px;
    width: calc(100% - 20px);
    background: rgba(0, 0, 0, 0.05);
}

.role-btn{
    cursor: pointer;
    color: black !important;
}

.roles{
    display: flex;
    gap: 5px;
}

.role-btn.greyed{
    background: var(--blue) !important;
    color: white !important;
}


.add-link-button{
    position: absolute !important;
    left: 50%;
    bottom: 5px;
    border: none;
    padding: 5px;
    color: var(--blue);
    background: white;
    transform: translateX(-50%);
}


.add-link-button:focus{
    background: white;
}


.courseTile{
    position: relative;
    z-Index: 10;
    height: 320px;
}

.role-btn.unavailable{
    background: rgba(243, 161, 161, 0.19) !important;
}

.greyedFinishChapter{
    background-color: var(--secondary-grey) !important;
}

.finish-chapter{
    height: 70px;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 10px;
    background-color: var(--blue);
}

.finish-chapter > div {
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;

    color: #FFFFFF;
}

@media (max-width: 500px) {
    .finish-chapter{
        width: 100%;
    }
}

.task-finish-wrapper{
    display: flex;
    gap: 5px;
    font-size: 16px;
    cursor: pointer;
    margin-left: auto;
    position: absolute;
    top: 0px;
    right: 0px;
    border: 1px solid var(--border-grey);
    padding: 10px;
    border-radius: 5px;
    opacity: 1;
    cursor: pointer;
}

/* Keep the completion badge of interactive/code tasks inside the task card. */
.code-regular-wrapper .task-finish-wrapper.code-block-finish {
    right: 20px;
    top: 20px;
}

.task-finish-wrapper .task-finish-points {
    font-weight: bold;
    color: var(--blue, #1A73E8);
    align-self: center;
}

.task > .editor-parent {
    width: calc(100% - 270px);
}

/* @media (max-width: 700px){
    .task{
        flex-flow: column;
    }

    .task-finish-wrapper{
        position: relative;
        margin-left: 0;
        margin-right: auto;
    }
} */

.finished-ent .finish-task{
    color: var(--green);
}

.finish-chapter.completed{
    color: var(--green);
}

.chapter-list-item.finished::before{
    background: var(--green) !important;
}

.chapter-list-item.finished::after{
    border-color: var(--green) !important;
}

.finished .send-quiz{
    background: var(--green) !important;
}


#courseImageWrapper{
    width: 100%;
}

.course-link{
    width: 100% !important;
}

.group-name{
    font-size: 22px;
    display: block;
}

.course-title{
    line-height: 1.2rem;
    font-size: 1rem;
    color: #9e9e9e;
}


.course-selection{
    position: absolute !important;
    background: white;
    border-radius: 5px;
    width: 100%;
    padding: 5px;
    opacity: 0;
    width: 300px;
	margin-top: -270px;
    margin-left: 10px;
    margin-right: 10px;
    max-height: 240px;
    overflow: hidden;
    display: flex;
    flex-flow: column;
	z-index:5;
}

.course-tile-info .course-selection {
    margin-top: -200px !important;
}

.course-dropdown{
    position: relative;
}


.cm{
    color: var(--blue);
    padding: 5px;
}

.slide-in-top {
	-webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-top {
    0% {
      -webkit-transform: translateY(-1000px);
              transform: translateY(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-top {
    0% {
      -webkit-transform: translateY(-1000px);
              transform: translateY(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }



.course-select{
    overflow: hidden;
}



.search-course{
    display: flex;
}

input{
    height: 2rem !important;
}

.input-field{
    margin: 0 !important;
}


.search-course i{
    width: 25px;
    display: flex;
    align-items: center;
}

.search-course .input-field{
    width: 100%;
}




.course-image-m{
    border-radius: 50%;
    width: 25px;
    height: 25px;
    object-fit: cover;
}

.course-collection{
    height: 100%;
    overflow: auto;
}


.select-course span{
    color: var(--blue);
}

.course-collection-item{
    width: 100%;
    padding: 5px;
    display: flex !important;
    gap: 5px;
}


.surveillance-view{
    border-radius: 10px;
    padding: 10px;
}

.user-avatar{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.big-user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.user-item{
    padding: 5px;
}


.rights-container{
    color: var(--blue);
    margin-left: auto;
    padding: 5px;
}

.rights-container.gr{
    color: grey;
}

.user-name{
    margin-left: 5px;
}

.chapter-progress-wrapper{
    height: 2rem;
    display: flex;
    gap: 2px;
    width: 100%;
    position: relative;
    z-index: 60;
}

.level-bar-wrapper,
#levelBar,
#myXPbar,
#myXP {
    position: relative;
    z-index: 60;
}

.chapter-item-progress{
    background: rgba(var(), 0.05);
    border-radius: 10px;
    height: 100%;
    width: 100%;
}


.chapter-item-progress.finished{
    background: var(--blue);
}

.editability{
    cursor: pointer;
}

.answer-text{
    margin: 20px !important;
    width: calc(100% - 40px) !important;
}

.questions-answered{
    right: 100px;
    position: absolute;
    top: 50px;
}

input:focus{
    border:2px solid var(--orange);
}


.quiz.expanded{
    width: 100% !important;
    flex-flow: column;
}


.ql-tooltip{
    z-index: 10000002;
    position: absolute;
    background: white;
    padding: 10px;
    width: 250px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iiigel-formula-tooltip{
    position: fixed;
    z-index: 10000002;
    width: auto;
    min-width: 330px;
    height: auto;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
}

.iiigel-formula-tooltip input{
    flex: 1;
    min-width: 120px;
    margin: 0;
}

.quiz-elem[extra="aligned"]{
    display: flex;
    gap: 20px;
    align-items: flex-end;
}


.quiz-elem[extra="aligned"] > .title-wrapper{
    width: 70%;
}


.quiz-elem[extra="aligned"] > .answer{
    width: 30%;
}

.quiz-elem[extra="aligned"] > .answer .textAnswer {
    border: 1px solid #ccc !important;
    padding: 5px !important;
    border-radius: 2px;
    margin-top: 5px;
}


.shift-blocks{
    margin-left: auto;
    padding: 10px;
    width: 50px;
    height: 50px;
    display: flex !important;
    justify-content: center;
    align-items: center;
}


.group-code{
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 10px 20px;
    font-size: 1.3em;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px 0px 0px 0px;
    color: white;
}


.notification .ql-toolbar{
    display: none;
}



.question-collection{
    display: flex;
}


.ql-editor.ql-blank::before{
    left: 10px !important;
    right: 10px !important
}


.add-answer{
    position: absolute !important;
}



.align-mid{
    min-height: 40px;
}


.task-editor{
    width: 85%;
}



strong{
    font-weight: 600 !important;
}



.dummy-div + .add-quiz-elem{
    padding-top: 60px;
}


.question{
    transition: 0.2s ease;
}


.question-wrapper:not(.compressed) {
    display: flex;
    flex-flow: column;
}

.question-wrapper:not(.compressed) .answer-container{
    height: fit-content;
}

.question-wrapper.compressed{
    display: flex;
    width: 100%;
    gap: 20px;
}

.question-wrapper.compressed .question-title{
    width: 140% !important;
}

.question-wrapper.compressed > *{
    width: 100%;
}



.click *{
    cursor: pointer !important;
}


.click{
    padding: 30px !important;
}


.content-parent.incorrect::after{
    background: var(--red);
}



.content-parent.finished::after{
    background: var(--green);
}

.quiz-elem{
    position: relative;
    height: 100%;
}

.quiz-elem.incorrect, .quiz-elem.correct{
    margin-left: 10px;
}


.quiz-elem.incorrect::before, .quiz-elem.correct::before{
    content: '';
    background: var(--red);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
}


.quiz-elem.correct::before{
    background: var(--green) !important;
}



.all-chapters{
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    max-height: 600px;
    width: 400px;
    gap: 10px;
    overflow: auto;
}


.all-chapters .chapter-list-item{
    font-size: 18px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.19);
}


.all-chapters .chapter-list-item.selected{
    background: var(--green);
    color: white;
    gap: 20px;
}


.all-chapters .chapter-list-item{
    width: calc(50% - 20px);
}


.ql-formats .material-icons{
    width: 100%;
    height: 100%;
    font-size: 22px;
    margin-top: -2px;
}


.ql-formats .material-icons:not(.disabled):hover{
    color: #06c;
}


.color-white i{
    color: white !important;
}

.color-red i{
    color: var(--red) !important;


}

.tooltip-content{
    background-color: transparent;
    color: #fff;
    text-align: center;
    padding: 0px 0;
    border-radius: 0px;
}


.answer-wrapper[correctness="true"]{
    border-color: var(--green);
}


.answer-wrapper[correctness="false"]{
    border-color: var(--red);
}


.quiz-elem.incorrect{
    background: #dc354617;
}

.quiz-elem.incorrect::after, .quiz-elem.correct::after{
    content: '';
    position: absolute;
    left: 5px;
    height: 1px;
    width: calc(100% - 5px);
    background: rgba(0, 0, 0, 0.23);
    bottom: 0px;
}


.quiz-elem.correct{
    background: #01c8753d;
}

.task-collection .quiz-elem:last-child::after{
    height: 0;
}


.ql-editor{
    margin: 0px !important;
}


[type="5"] .quiz-battle.lobby-ready{
    top: 80px !important;
}

.remembering{
    border: 1px var(--red) dashed;
    padding: 10px;
}

.course-select-wrapper .selectable{
    position: unset !important;
}

.course-select-wrapper .courseImageWrapper{
    position: unset !important;
}

.correct-questions-container .answer-input *{
    color: black !important;
}

.answer-input{
    display: flex;
}

.answer-input .ql-editor{
    padding: 10px !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}


.ql-container{
    width: 100%;
}


.editor-parent{
    display: flex;
    width: 100%;
    flex-flow: column;
    align-items: center;
}

.question-wrapper.compressed{
    padding: 10px;
}


.task-collection .quiz-elem{
    margin-left: -5px;
}


@-webkit-keyframes scale-in-top {
    0% {
      -webkit-transform: scale(0);
              transform: scale(0);
      -webkit-transform-origin: 50% 0%;
              transform-origin: 50% 0%;
      opacity: 1;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-transform-origin: 50% 0%;
              transform-origin: 50% 0%;
      opacity: 1;
    }
  }
  @keyframes scale-in-top {
    0% {
      -webkit-transform: scale(0);
              transform: scale(0);
      -webkit-transform-origin: 50% 0%;
              transform-origin: 50% 0%;
      opacity: 1;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-transform-origin: 50% 0%;
              transform-origin: 50% 0%;
      opacity: 1;
    }
  }

.scale-in-top {
	-webkit-animation: scale-in-top 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-top 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


.dialog .input-field{
    margin-top: 10px !important;
}




.task-finish-wrapper.pending label{
    background: var(--orange) !important;
    box-shadow: 0 7px 10px #faa865;
}

.save-block.unsaved i{
    color: #dc3545 !important;
}

.finish-chapter.finished{
    background: var(--green);
    color: white;
}

.copypaste {
    position: relative !important;
    right: 0px !important;
    bottom: 0px !important;
    padding-top: 0 !important;
}
.copypaste > .btn-floating {
    width: 35px !important;
    height: 35px !important;
}



.course-select-item{
    width: 100%;
}


.course-select-wrapper{
    height: 600px;
    width: 1000px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 30px;
    padding: 40px;
    overflow: auto;
}

.course-select-item .courseImageWrapper{
    height: 130px;
}


.course-select-item.selectable{
    padding: 10px;
    border-radius: 10px;
}

.course-select-item .tileOuterBox{
    display: block !important;
    height: unset !important;
    border-radius: 10px;
}


.course-select-item.selected .tileOuterBox{
    background: rgba(33, 128, 243, 0.25);
}

.editable-helper-message{
    max-width: 300px;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid var(--primary-blue);
    resize:none;
    width: 100%;
    height: unset
}
.greyed-color{
    color: grey !important;
}

.chapter-select-item{
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.19);
    font-size: 22px;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
}

.test-chapter-overlay > img{
    width: 300px;
}

.test-chapter-info{
    display: flex;
    align-items: center;
    flex-direction: column;
}

.test-chapter-info .start{
    margin-top:10px;
}

/* Locked chapters: sidebar rules (.chapter-side-bar .chapter-list-item) use blue + pointer — need higher specificity */
.chapter-side-bar .chapter-list-item.blocked-chapter,
.chapter-side-bar .chapter-list-item.blocked-chapter .chapter-list-item-wave,
.chapter-list-item.blocked-chapter,
.chapter-list-item.blocked-chapter .chapter-list-item-wave {
    cursor: not-allowed !important;
}

.chapter-side-bar .chapter-list-item.blocked-chapter,
.chapter-list-item.blocked-chapter {
    color: #7f8c8d !important;
    border: 1px solid #7f8c8d !important;
}

.chapter-side-bar .chapter-list-item.blocked-chapter .chapter-designation,
.chapter-side-bar .chapter-list-item.blocked-chapter .chapter-list-item-pos,
.chapter-side-bar .chapter-list-item.blocked-chapter .chapter-list-item-pos-pos,
.chapter-side-bar .chapter-list-item.blocked-chapter .chapter-list-item-pos-max,
.chapter-list-item.blocked-chapter .chapter-designation,
.chapter-list-item.blocked-chapter .chapter-list-item-pos,
.chapter-list-item.blocked-chapter .chapter-list-item-pos-pos,
.chapter-list-item.blocked-chapter .chapter-list-item-pos-max,
.blocked-chapter span {
    color: #7f8c8d !important;
}

.chapter-side-bar .chapter-list-item.blocked-chapter .lock-icon,
.chapter-list-item.blocked-chapter .lock-icon {
    color: #7f8c8d !important;
}

.chapter-side-bar .chapter-list-item.blocked-chapter::before,
.chapter-list-item.blocked-chapter::before {
    background: #7f8c8d !important;
}

.chapter-side-bar .chapter-list-item.blocked-chapter::after,
.chapter-list-item.blocked-chapter::after {
    border-color: #7f8c8d !important;
}

/* Locked + finished: override .chapter-side-bar .chapter-list-item.finished green */
.chapter-side-bar .chapter-list-item.finished.blocked-chapter,
.chapter-list-item.finished.blocked-chapter {
    border: 1px solid #7f8c8d !important;
    background: rgba(127, 140, 141, 0.12) !important;
    filter: grayscale(1);
    opacity: 0.85;
    cursor: not-allowed !important;
    color: #7f8c8d !important;
}

.chapter-side-bar .chapter-list-item.finished.blocked-chapter::before,
.chapter-list-item.finished.blocked-chapter::before {
    background: #7f8c8d !important;
}

.chapter-side-bar .chapter-list-item.finished.blocked-chapter::after,
.chapter-list-item.finished.blocked-chapter::after {
    border-color: #7f8c8d !important;
}

.chapter-select-item .chapter-title{
    width: 100%;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chapter-select-item:hover{
    background: rgba(33, 128, 243, 0.25);
}

.chapter-select-item.selected .chapter-title{
    color: white;
}

.chapter-select-item.selected{
    background: var(--blue);
}

.ql-group-link i.disabled{
    color: rgba(0, 0, 0, 0.23);
}

.sub-heading{
    margin-left: 5px;
    color: var(--blue);
}

.avatar-edit{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: 0.2s ease;
}

.avatar-edit i{
    font-size: 32px;
    color: white;
}

.avatar-edit:hover{
    opacity: 1;
}

.admin-wrapper{
    display: flex;
    flex-flow: column;
}

.bottom-navigation{
    height: 80px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: white;
    z-Index: 200;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.bottom-navigation-link.active i, .bottom-navigation-link.active span{
    color: var(--blue);
}


.bottom-navigation-link{
    height: 100%;
    display: flex !important;
    align-items: center;
    padding: 10px;
    gap: 5px;
}

.course-creation{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 0 5px 0;
}

.group-creation-info {
    display: flex;
    flex-direction: column;
}


.administration-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.search-bar-wrapper{
    margin: auto;
}

.search {
    width: 100%;
    position: relative;
    display: flex;
  }

  .searchTerm {

    color: #9DBFAF;
  }

  .searchTerm:focus{
    color: #00B4CC;
  }

  .searchButton {
    width: 40px;
    height: 30px;
    border: none;
    background: white;
    text-align: center;
    color: #fff;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 20px;
  }

  .searchButton:focus {
    background: #fff;
  }

.administration-header h1 {
    font-size: 35px !important;
    font-weight: 900;
    color: black;
    margin: 30px 0 !important;
}

.administration-header h2 {
    margin-top: 0px;
    font-weight: 400;
    font-size: 22px !important;
    color: var(--blue);
    margin: 20px 0 !important;
}


.delete-group-admin{
    display: flex !important;
    justify-content: center;
    text-align: center;
    align-items: center;
    position: absolute !important;
    bottom: 20px;
    right: 20px;
}

.delete-group-admin i{
    color: var(--red) !important;
}


.permission-section{
    padding: 30px;
}


.permission-section .permission-group{
    color: black;
    font-size: 32px;
    text-align: right;
}

.user-card {
    padding: 15px;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    cursor: auto;
}

.admin-user-card-user-info {
    display:flex;
    margin-bottom: 25px;
}

.user-verified.verified i{
    color: var(--green);
}

.user-verified{
    position: absolute;
    cursor: pointer;
}

.card-collection .user-verified{
    right: 25px;
    top: 25px;
}

.table-view .user-verified {
    left: 5px;
    top: 5px;
}

.verified-option{
    width: 100% !important;
}

.verified-accept {
    color: var(--green)!important;
    padding: 4px 66px !important
}

.verified-denied {
    color: var(--red)!important;
    padding: 4px 66px !important
}

.user-image {
    border-radius: 50%;
    object-fit: cover;
    width: 50px;
    height: 50px;
    z-index: 1 !important;
}

.user-name{
    justify-self: flex-start;
    grid-column-start: 2;
    grid-column-end: 4;
}

.user-name-display {
    font-style: normal;
    font-size: 18px;
    line-height: 100%;
    color: #00A3FF;

}

.user-details-admin {
    margin-top: 14px;
    margin-left: 15px;
}

.user-name-display:not(.full) {
    color: #5f6368;
    margin-top: 10px;
    font-size: 16px;
}

.use-option{
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    text-align: center;
    height: 50px;
}


.card-collection .use-option{
    background: #F4F8FE;
    border-radius: 5px;
}



.insert-formula{
    color: var(--blue);
    cursor: pointer;
}

.formula-hints{
    color: var(--blue);
    cursor: pointer;
    margin-right: 6px;
}

.formula-table{
    color: grey;
    cursor: pointer;
}


.finished.recently{
    background: #07e287;
}


.swapping-wrapper {
    display: flex;
    background: #f3f3f3;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: 40px;
    gap: 10px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.swapping-wrapper i{
    font-size: 22px;
    padding: 5px 10px;
    user-select: none;
    cursor: pointer;
}
.swapping-wrapper:not(.verified-option) i{
    color: rgb(146, 146, 146) !important;
}



.seperator{
    width: 1px;
    background: black;
    height: 90%;
}


.swapping-wrapper i:first-child{
    border-radius: 5px 0px 0px 5px;
}

.swapping-wrapper i:last-child{
    border-radius: 0px 5px 5px 0px;
}

.swapping-wrapper i.active{
    color: var(--blue) !important;
}

.multiselector-wrapper{
    margin: 2px;
    display: flex;
    background: #f3f3f3;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: 30px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    width: 40px;
}

.table-view .tile {
    width: 100% !important;
    height: unset !important;
    margin: 10px !important;
}

.table-view .user-card{
    display: flex;
}


.table-view .login{
    margin-left: auto;
}


.dragging-front{
    height: 800px;
    position: relative;
    overflow: scroll;
}



.dragging-back{
    position: absolute;
    user-select: none;
    left: 0;
}



.dragging-back img{
    width: 100%;
    height: 100%;
    pointer-events: none;
}


.dragging-back canvas{
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}



.chapter-item{
    width: 200px;
    height: fit-content;
    background: white;
    border-radius: 10px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--blue);
    transition: background 0.3s ease;
    padding: 10px;
}

.chapter-item.finished:not(.editing):hover{
    background: #05ac66 !important;
}


.chapter-item.finished{
    color: white;
    background: var(--green);
}

.chapter-item:not(.editing){
    cursor: pointer;
}


.chapter-item:not(.editing):hover{
    background: rgb(172, 172, 172);
}


.connection-point{
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 40%);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #aaaaaa;
}

.connection-point.deletion{
    background: var(--red);
    border: 3px var(--solid) ;
}


.size-indicator{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 250px;
    height: 250px;
    background: white;
    border: 2px solid black;
    opacity: 0;
    transition: 1s ease;
}


.act-size{
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.3);
    position: absolute;
}


.mini-container{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.mini-chapter-item{
    position: absolute;
    width: 10px;
    height: 4px;
    background: black;
}


.top-button-container{
    position: absolute !important;
    top: 0;
    right: 0;
    display: flex;
}


.top-button-container > div{
    color: var(--blue);
    padding: 5px;
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    cursor: pointer;
    font-size: 18px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.23);
    margin: 10px;
}

.top-button-container > div i{
    color: var(--blue);
}




.delete-chapter{
    position: absolute !important;
    top: 5px;
    right: 5px;
    width: 25px;
    height: 25px;
}

.delete-chapter i{
    color: var(--red);
}

.delete-course-icon{
    font-size: 35px !important;
}

.delete-course-button {
    height: 50px;
    width: 50px;
    margin-right: 15px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.submit-overlay .ql-toolbar{
    display: none !important;
}

.not-advanced{
    width: 100%;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    flex-flow: column;
}

.chapter-view{
    color: var(--blue);
    padding: 5px;
    font-size: 18px;
}


.greyed-inner{
    color: grey !important;
}

.greyed-inner i{
    color: grey !important;
}

#role-app{
    padding: 10px;
}

.role-change{
    padding: 5px;
    color: black;
    font-size: 18px;
    display: block !important;
}

.role-change:not(:last-child){
    border-bottom: 1px solid rgba(0, 0, 0, 0.23);
}

.role-change.highlighted{
    color: var(--blue) !important;
}

.unequal{
    color: var(--red);
    padding: 5px;
}


.courses-delete-inner {
    width: 24px !important;
    height: 1.7rem !important;
    position:absolute !important;
    z-index: 2 !important;
    padding:0 !important;
    right: 3% !important;
    top:7% !important;
    border: 0px;
    border-radius: 20%;
    color:rgb(0, 0, 0);
    background-color: white;
}

.table-view .use-option:not(.login){
    margin-left: 20px;
}


.form-group{
    height: 100%;
    display: flex;
    flex-flow: column;
}

.normalLogin{
    margin-top: 40px;
}


.recovery-wrapper{
    display: flex;
    height: 100%;
}

.recovery-versions{
    width: 200px;
    border-right: 2px solid rgba(0, 0, 0, 0.3);
}


.reset-version{
    width: calc(100% - 20px);
    padding: 10px;
    border-radius: 10px;
    background: var(--blue);
    color: white;
    margin: 30px 10px 10px 10px;
    text-align: center;
}


.reset-version:not(.resettable){
    background: rgba(0, 0, 0, 0.1);
}

.reset-version:not(.resettable) *{
    color: grey;
}

.reset-version *{
    color: white;
}


.dialog-content-wrapper .tile{
    margin: 20px;
}

.user-info{
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 700;
    font-size: 26px;
    line-height: 100%;
    /* identical to box height, or 26px */
    text-align: center;
    color: #FFFFFF;
}

.user-info-role{
    font-size: 18px;
    font-weight: normal;
}

.header-info-background{
    height: 200px;
    width: 100%;
    margin-top: 100px;
    background-color: var(--blue);
    object-fit: cover;
    overflow: hidden;
}

.header-user-info{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.tileNameBox input {
    /* border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: 4px;
    padding: 0 5px; */
    /* border: none !important; */
    box-shadow: none !important;
    font-size: 16px !important;
    width: 100%;
    color: #444 !important;
    margin-bottom: 0 !important;
}


.course_title_input{
    border: 1px solid #f2f2f2 !important;
    width: 183px !important;
    padding: 5px !important;
    border-radius: 2px !important;
}

.tileNameBox input[readonly="readonly"]{
    cursor: default !important;
    border: none !important;
}


.editor-page{
    width: 100%;
    padding: 0px 30px;
}

.grid-editor-parent i{
    cursor: pointer;
}


.editors-headline {
    color: var(--blue);
    font-size: 16px;
}


/* .editor-page-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    justify-items: center;
    width: 100%;
} */


/* .editor-settings{
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.19);
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 10px;
} */

/* .grid-editor-parent{
    width: 250px;
} */

.grey-color{
    color: rgba(0, 0, 0, 0.23);
}

.delete-course-user{
    margin-left: auto;
}

/* .editor-page.grid{
    display: flex;
    flex-flow: column;
} */


.generate-link{
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    color: var(--blue);
    cursor: pointer;
    display: flex !important;
    justify-content: center;
}

/* 
.user-editor-name{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
} */

.tile.editors{
    margin-left: auto;
    margin-right: auto;
}


.tile.editors .tileInnerBox{
    background: white;
    border-radius: 5px;
    filter: drop-shadow(1px 3px 24px #01152633);
}


.recovery-versions, .version-preview{
    overflow: auto;
    height: calc(100% - 220px);
}


*{
    box-sizing: border-box;
    color: black;
}



.sticky-fixed{
    position: fixed;
    top: 50px;
    right: 50px;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.start-quiz{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}


.start-quiz .failed{
    font-size: 18px;
    color: var(--red);
}

.quiz-button{
    padding: 10px;
    border-radius: 10px;
    background: var(--blue);
    transition: 0.2s;
    border-bottom: 3px solid var(--darkblue);
    color: white !important;
    cursor: pointer;
}

.quiz-button.ready{
    font-size: 16px;
    margin-top: 10px;
}

.quiz-button:hover{
    background: var(--blue-hover-light);
}


.question-collection{
    height: fit-content;
    overflow: hidden;
    transition: 0.15s ease-in-out;
}

.normal .question-collection{
    max-height: 999999vh;
}



.answer-wrapper-sizer{
    width: 100%;
    position: relative;
    height: 0;
    height: 170px;
}



.content-parent.extend .answer-wrapper-sizer{
    width: 100%;
    height: 100%;
    position: relative;
}



.answer-wrapper:not(.waves-effect) .editor-parent .ql-container{
    height: 100% !important;
}

.test-mode-disabled{
    width: 0px !important;
    opacity: 0 !important;
    padding: 0px !important
}

.normal .question-collection .question-title{
    margin-top: auto;
    margin-bottom: 50px;
    padding: 100px;
}

.block-points{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.block-points .ql-editor{
    width: 75px !important;
}

.normal .question-collection .question-title .ql-editor p{
    font-size: 22px;
}

.quiz-heading{
    font-size: 22px;
    color: var(--blue);
    margin-left: 30px;

}

.normal .question-collection .quiz-elem{
    padding: 0 20px;
    display: flex;
    flex-flow: column;
}

.quiz-elem .align-mid{
    margin-top: auto;
}

.normal .question-collection{
    padding: 20px;
}

.quiz-types{
    width: 90%;
    display: flex;
    padding: 20px;
    justify-content: space-around;
}


.quiz-type{
    padding: 10px;
}

.quiz-type.active{
    color: var(--blue);
}

.content-parent[type="0"].text-block-bg-white,
.content-parent[type="0"].text-block-bg-white > .spacing-wrapper,
.text-block.text-block-bg-white {
    background: var(--text-block-bg-white) !important;
}

.content-parent[type="0"].text-block-bg-blue,
.content-parent[type="0"].text-block-bg-blue > .spacing-wrapper,
.text-block.text-block-bg-blue {
    background: var(--text-block-bg-blue) !important;
}

.content-parent[type="0"].text-block-bg-orange,
.content-parent[type="0"].text-block-bg-orange > .spacing-wrapper,
.text-block.text-block-bg-orange {
    background: var(--text-block-bg-orange) !important;
}

.content-parent[type="0"].text-block-bg-purple,
.content-parent[type="0"].text-block-bg-purple > .spacing-wrapper,
.text-block.text-block-bg-purple {
    background: var(--text-block-bg-purple) !important;
}

.content-parent[type="0"].text-block-bg-red,
.content-parent[type="0"].text-block-bg-red > .spacing-wrapper,
.text-block.text-block-bg-red {
    background: var(--text-block-bg-red) !important;
}

.iiigel-text-box {
    display: inline-block;
    max-width: 100%;
    margin: 4px 0;
    padding: 9px 14px;
    border: 2px solid currentColor;
    border-radius: 8px;
    line-height: 1.45;
    white-space: pre-wrap;
}

.iiigel-text-box[data-text-box-icon]::before {
    content: attr(data-text-box-icon);
    display: inline-block;
    margin-right: 8px;
    font-family: "Material Icons";
    font-size: 20px;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    vertical-align: -4px;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "liga";
}

.iiigel-text-box-blue[data-text-box-icon]::before {
    color: var(--blue);
}

.iiigel-text-box-orange[data-text-box-icon]::before {
    color: var(--orange);
}

.iiigel-text-box-purple[data-text-box-icon]::before {
    color: var(--purple);
}

.iiigel-text-box-red[data-text-box-icon]::before {
    color: var(--red);
}

.iiigel-text-box-blue {
    background: var(--text-block-bg-blue);
    border-color: var(--blue);
    border-width:1px
}

.iiigel-text-box-orange {
    
    background: var(--text-block-bg-orange);
    border-color: var(--orange);
    border-width: 1px
}

.iiigel-text-box-purple {
    background: var(--text-block-bg-purple);
    border-color: var(--purple);
    border-width:1px
}

.iiigel-text-box-red {
    background: var(--text-block-bg-red);
    border-color: var(--red);
    border-width:1px
}

.text-background-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 0;
}

.text-background-toggle,
.text-background-swatch {
    position: relative;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 0, 0, 0.18);
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.ql-toolbar.ql-snow .ql-formats.text-background-picker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 5px 9px !important;
    vertical-align: middle;
}

.text-background-toggle::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-35%);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid rgba(0, 0, 0, 0.45);
}

.text-background-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: none;
    flex-direction: column;
    gap: 7px;
    padding: 7px;
    border-radius: 999px;
    background: var(--fixed-white);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    z-index: 10002;
}

.text-background-menu-divider {
    display: block;
    width: 18px;
    height: 1px;
    margin: 1px auto;
    background: rgba(0, 0, 0, 0.16);
}

.text-background-icon-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ql-toolbar.ql-snow .text-background-icon-swatch i {
    width: auto;
    color: rgba(0, 0, 0, 0.72) !important;
    font-size: 14px;
    line-height: 1;
    pointer-events: none;
}

/*
 * Editor popups need two things: a clear stacking order and unclipped parent
 * containers. The computed block itself carries the spacing-wrapper class, so
 * the old child-only selector did not disable its overflow clipping.
 */
.content-parent.block-editable.spacing-wrapper:has(.ql-toolbar),
.content-parent.block-editable:has(.ql-toolbar) > .spacing-wrapper {
    overflow: visible !important;
}

.content-parent.block-editable:has(.ql-picker.ql-expanded),
.content-parent.block-editable:has(.text-background-picker.is-open),
.content-parent.block-editable:has(.dropdown-custom:hover),
.content-parent.block-editable:has(.dropdown-trigger.active),
.content-parent.block-editable:has(.dropdown-content[style*="display: block"]) {
    z-index: 20;
}

.toolbar-wrap,
.editor-parent:has(.ql-toolbar) {
    position: relative;
    overflow: visible;
    z-index: 10;
}

.ql-toolbar,
.ql-toolbar.ql-snow {
    position: relative;
    overflow: visible !important;
    z-index: 10;
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded {
    z-index: 11;
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options,
.ql-toolbar.ql-snow .text-background-menu,
.dropdown-custom-content,
.content-parent.block-editable .dropdown-content,
.content-parent.block-editable .autocomplete-content {
    z-index: 12 !important;
}

.text-background-picker.is-open .text-background-menu {
    display: flex;
}

.text-background-swatch.active {
    border-color: var(--blue);
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.18);
}

.text-background-toggle.text-block-bg-white,
.text-background-swatch.text-block-bg-white {
    background: var(--text-block-bg-white) !important;
}

.text-background-toggle.text-block-bg-blue,
.text-background-swatch.text-block-bg-blue {
    background: var(--text-block-bg-blue) !important;
}

.text-background-toggle.text-block-bg-orange,
.text-background-swatch.text-block-bg-orange {
    background: var(--text-block-bg-orange) !important;
}

.text-background-toggle.text-block-bg-purple,
.text-background-swatch.text-block-bg-purple {
    background: var(--text-block-bg-purple) !important;
}

.text-background-toggle.text-block-bg-red,
.text-background-swatch.text-block-bg-red {
    background: var(--text-block-bg-red) !important;
}

.editor-library-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: rgba(0, 0, 0, 0.45);
}

.editor-library-modal {
    width: min(1200px, calc(100vw - 64px));
    height: min(820px, calc(100vh - 64px));
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    border-radius: 10px;
    background: var(--fixed-white);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.editor-library-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-grey);
}

.editor-library-header h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
}

.editor-library-close {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--grey-btn);
    cursor: pointer;
}

.editor-library-tabs {
    display: flex;
    gap: 8px;
    padding: 14px 24px 0;
    border-bottom: 1px solid var(--border-grey);
    overflow-x: auto;
}

.editor-library-tab {
    flex: 0 0 auto;
    border: 0;
    border-radius: 8px 8px 0 0;
    padding: 9px 15px;
    background: var(--grey-btn);
    color: var(--black);
    font-weight: 400;
    cursor: pointer;
}

.editor-library-tab.active {
    background: var(--blue);
    color: var(--fixed-white);
    font-weight: 500;
}

.editor-library-tools {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px 0;
}

.editor-library-search {
    min-width: 0;
    flex: 1 1 auto;
    height: 38px !important;
    margin: 0 !important;
    border: 1px solid var(--border-grey) !important;
    border-radius: 8px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    box-shadow: none !important;
}

.editor-library-search:focus {
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 2px var(--light-blue) !important;
}

.editor-library-icon-colors {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
}

.editor-library-icon-color {
    width: 26px;
    height: 26px;
    border: 2px solid transparent;
    border-radius: 50%;
    background: var(--editor-library-swatch-color);
    cursor: pointer;
}

.editor-library-icon-color.active {
    border-color: var(--black);
    box-shadow: 0 0 0 3px var(--light-blue);
}

.editor-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    padding: 20px 24px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-grey) transparent;
}

.editor-library-grid::-webkit-scrollbar {
    width: 8px;
}

.editor-library-grid::-webkit-scrollbar-track {
    background: transparent;
}

.editor-library-grid::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--border-grey);
}

.editor-library-grid::-webkit-scrollbar-thumb:hover {
    background: var(--dark-grey);
}

.editor-library-grid-icons {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.editor-library-item {
    height: 240px;
    display: grid;
    grid-template-rows: 200px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    border: 2px solid transparent;
    border-radius: 8px;
    background: var(--grey-btn);
    padding: 8px;
    cursor: pointer;
}

.editor-library-item-icons {
    height: 150px;
    grid-template-rows: 96px minmax(0, 1fr);
}

.editor-library-item:hover,
.editor-library-item.selected {
    border-color: var(--blue);
    background: var(--light-blue);
}

.editor-library-item img {
    width: 200px;
    height: 200px;
    max-width: 100%;
    justify-self: center;
    object-fit: contain;
}

.editor-library-item-icons img {
    width: 72px;
    height: 72px;
    align-self: center;
}

.editor-library-icon-preview {
    width: 72px;
    height: 72px;
    align-self: center;
    justify-self: center;
    background: var(--editor-library-icon-color, var(--black));
    -webkit-mask: var(--editor-library-icon-url) center / contain no-repeat;
    mask: var(--editor-library-icon-url) center / contain no-repeat;
}

.editor-library-item span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-size: 13px;
    font-weight: 400;
}

.editor-library-empty {
    grid-column: 1 / -1;
    color: var(--dark-grey);
    padding: 20px;
}

.editor-library-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-grey);
}

.editor-library-selected-label {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dark-grey);
}

.editor-library-button {
    min-width: 110px;
    border: 0;
    border-radius: 8px;
    padding: 10px 18px;
    font-weight: 500;
    cursor: pointer;
}

.editor-library-cancel {
    background: var(--grey-btn);
}

.editor-library-ok {
    background: var(--blue);
    color: var(--fixed-white);
}

.editor-library-ok:disabled {
    opacity: 0.45;
    cursor: default;
}

.iiigel-library-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: -0.18em;
    background: var(--library-icon-color, var(--black));
    -webkit-mask: var(--library-icon-url) center / contain no-repeat;
    mask: var(--library-icon-url) center / contain no-repeat;
}


.multi-select{
    position: fixed;
    bottom: 50px;
    right: 50px;
    display: flex;
    z-index: 9999;
}


.card-wrapper{
    width: 100%;
    height: 100%;
    position: relative;
}

.multi-select i{
    color: black;
}

.multi-select .rounded{
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    background: white;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


.selectable{
    width: 100%;
    height: 100%;
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: all !important;
    background:rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    z-index: 999 !important;
}


.selectable label{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 25px;
    height: 25px;

}

[type="checkbox"].filled-in:checked+span:not(.lever):after{
    background: var(--blue) !important;
    border-color: var(--blue) !important;
}

.option-container{
    display: flex;
    border-radius: 10px;
    padding: 10px;
    background: white;
    height: 50px;
}

.option-container .select-option{
    position: relative;
    height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 5px;
}

.option-container .select-option i{
    width: 25px;
    height: 25px;
}

.option-container .select-option{
    padding-right: 10px;
    padding-left: 10px;
}

.option-container .select-option:not(:last-child)::after{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background: rgba(0, 0, 0, 0.4);
}

.tippy-tooltip{
    color: white !important;
}


.tippy-tooltip.std-theme {
    background-color: tomato;
    color: white !important;
}


.tippy-content{
    color: white;
}


.chapter-rendered.editable .question-collection{
    max-height: 9999999px !important;
    height: fit-content !important;
}


.time-config{
    display: flex;
    justify-content: center;
    padding: 10px;
    gap: 10px;
    align-items: center;
}


.time-box{
    width: 50px !important;
    border-radius: 5px !important;
    color: white !important;
    background: var(--blue) !important;
    padding: 10px !important;
    border-bottom-color: var(--darkblue) !important;
    transition: 0.5s !important;
    font-size: 18px !important;
    text-align: center !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}


.time-indication{
    font-size: 18px;
    text-align: center;
}


.red-button{
    background: var(--red) !important;
    border-bottom-color: #be2534;
}
.courses-delete-inner {
    width: 24px !important;
    height: 1.7rem !important;
    position:absolute !important;
    z-index: 2 !important;
    padding:0 !important;
    right: 3% !important;
    top:7% !important;
    border: 0px;
    border-radius: 20%;
    color:red;
}

.courses-delete {
    position: relative;
}

.archived-button-inner {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 30px !important;
    height: 26px !important;
    border-radius: 5px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    position:absolute !important;
}

.archived-button-inner-colorSelect i{
    color: var(--blue) !important;
}

.archived-button-icon {
    position: relative !important;
    display: inline-block !important;
}

.archived-tooltips-text {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 17px;
  margin-left: 45px;

  padding-left:10px!important;
  padding-right: 10px!important;

  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
}

.archived-button-out {
    position:absolute;
}

.progress-bar-wrapper{
    display: flex;
    justify-self:end;
    background-color: var(--fixed-black);
    width: 30%;
    height: 10px;
    margin: 20px;
    border-radius: 5px 5px 5px 5px;
    margin-left: auto; 
}

.progress-bar{
    background-color: var(--green);
    height: 100%;
    border-radius: 5px 5px 5px 5px;
}

.archived-button-out:hover .archived-tooltips-text {
    visibility: visible;
    opacity: 1;
    position: relative;
}

.size-editor-div{
    width: 40%;
}

.stand-alone-editor{
    width: 60%;
}

.parameter-input{
    width: 35% !important;
    margin-left: 30px !important;
}

.exercise-example-inner{
    width: 40%;
}

.add-example-exercise{
    width:20%;
}

.margin-left{
    margin-left: 30px;
}

.math-task-wrapper{ 
    display: flex;
    width:100%;
}

hr{
    margin: 20px;
    border-width: 3px;
}

.exercise{
    display:flex;
}

.chapterview-editor{
    width: 45%;
}

.real-exercise-inner{
    width: 40%;
}

.param-inputs{
    display: flex;
}

.editor-sizer{
    width: 200px !important;
}

.add-expression-icon{
    transform: scale(1.5,1.5);
}

.add-expression{
    margin-left:100px;
    cursor:pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    
}

.error{
    color:red;
}

.parameter-edit{
    width:5%;
    text-align: center;
    vertical-align: middle;
    line-height:95px;
}


.index-indicator {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    padding: 10px;
    transition: 0.2s ease;
    z-index: 19;
    background: white;
    box-shadow: 0px 3px 5px rgba(115, 115, 115, 0.15);
    font-size: 24px;
    font-weight: 700;
}

.scale-up-center {
	-webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}


@-webkit-keyframes scale-up-center {
    0% {
      -webkit-transform: scale(0.5);
              transform: scale(0.5);
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }
  @keyframes scale-up-center {
    0% {
      -webkit-transform: scale(0.5);
              transform: scale(0.5);
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }
  

.quiz-battle-members:not(.unstarted){
    position: absolute;
    top: 50px;
    right: 50px;
}


.lobby{
    padding: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    font-size: 22px;
}

.config-1{
    display: flex;
    justify-content: center;
}

.lobby > div{
    color: var(--blue);
}

.correct-questions-container{
    display: flex;
    justify-content: space-between;
}


.correct-questions-container *{
    color: white !important;
}

.answer-element{
    margin:5%;
}

.greyed-quiz-button{
    background-color: grey !important;
    border-bottom-color:grey !important;
}

.green-quiz-button{
    background-color: #07e287; 
    border-bottom-color:#07e287;
}

.quiz-button.greyed{
    border-bottom-color:rgb(99, 98, 98);
}

.lobby-title{
    font-size: 22px;
    color: var(--blue);
}

.content-parent.extend{
    position: fixed;
    left: 10px;
    right: 10px;
    top: 0;
    bottom: 0;
    z-Index: 99;
}

.content-parent.extend .question-collection{
    height: 100%;
}


.extend .question-title{
    margin-top: 0px !important;
}

.content-parent .back{
    display: block;
    position: absolute;
    right: 25px;
    top: 25px;
    font-size: 22px;
    cursor: pointer;
    z-index: 9;
}


.points-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 75%;
}

.score-highlight{
    color: var(--blue);
    font-size: inherit;
}


.content-parent.extend .spacing-wrapper{
    height: 100%;
}

.content-parent.extend .quiz-wrapper, .content-parent.extend .question-wrapper{
    height: 100%;
}


.content-parent.extend .answer-container{
    height: 80%;
}

.color-red{
    color: var(--red) !important;
}


.extend .time-config{
    position: absolute;
    top: 10px;
    left: 50px;
}

.extend .time-indication{
    display: none;
}


.leaderboard-text{
    font-size: 28px;
    color: var(--blue);
    font-weight: 600;
}


.edit-time{
    display: flex;
    justify-content: center;
    align-items: center;
}


.editable .question-title{
    padding: 0px !important;
}

.editable .answer-wrapper-sizer{
    padding-top: calc(100% * calc(20 / 21)) !important;
}

.answer-wrapper-sizer .editor-parent{
    justify-content: center;
}

.question-collection + .start-quiz{
    position: absolute;
    right: 100px; 
    top: 50px;
    transform: translateY(-25%);
    width: unset;
    height: unset;
}


.question-center{
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}


.extend .question-center{
    position: absolute;
}



.example-exercise{
    color: var(--black);
    font-family: Roboto;
    letter-spacing: -0.3px;
    padding: 10px !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    font-size:20px;
}

.delete-expression{
    width:5%;
    text-align: center;
    vertical-align: middle;
    line-height:95px;
    cursor:pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

.delete-exercise-type{
    width:5%;
    text-align: center;
    vertical-align: middle;
    line-height:95px;
    cursor:pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

.block-type{
    background-color: rgba(255, 242, 121, 0.205);
    margin-top:20px;
}

.generate-button{
    border-radius: 100px;
    padding: 10px;
    font-size: 16px;
    background-color:rgb(45, 199, 45);
}

.add-type-div{
    text-align: center;
    vertical-align: middle;
    line-height:75px;
}





.quiz-lobby{
    display: flex;
    gap: 10px;
    justify-content: center;
}


.extend .quiz-lobby, .lobby-ready .quiz-lobby{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    justify-content: unset !important;
}


.user-item-display img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.points-board{
    background: var(--grey-bg);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    color: black;
    font-size: 18px;
}

.points-board *{
    color: inherit;
    font-size: inherit;
}

.points-board-inner{
    height: 5px;
    background: var(--green-timer);
    position: absolute;
    bottom: 0;
    left: 0;
}

.points-board-inner{
    transition: 0.5s ease-in-out;
}

.block-hidden{
    background-color: #01c875 !important;
}

.text-hidden{
    display:none;
}

.text-not-hidden{
    display:block;
}

.middle-button{
    display:flex;
    justify-content:center ;
}

.block-not-hidden{
    background-color: #b31f2e !important;
}

.leaderboard{
    width: 100%;
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    flex-flow: column;
    gap: 20px;
}

.leaderboard .points-board{
    width: 75%;
    height: 60px;
}


.points-display{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    align-items: center;
    padding: 10px;
}


.points-img-display{
    color: black;
    margin-right: auto;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
}

.points-img-display img{
    border-radius: 50%;
    width: 30px;
    height: 30px;
    object-fit: cover;
    margin-right: 10px;
}


.user-display{
    display: flex;
    gap: 10px;
}


.greyed-quiz{
    background: grey;
    border-bottom-color: rgb(99, 98, 98);
}


.greyed-quiz:hover{
    background: grey;
    border-bottom-color: rgb(99, 98, 98);
}


.show-lobbies-grid{
    position: relative;
    padding: 50px;
    width: 100%;
}


.show-lobbies-grid .lobby-preview{
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
}


.lobby-owner img, .lobby-member img{
    border-radius: 50%;
    object-fit: cover;
}




.owner-name{
    font-size: 20px;
    font-weight: 700;
}

.lobby-owner{
    display: flex;
    gap: 10px;
    align-items: center;
}

.show-lobbies-grid .lobby-members{
    margin-top: 0;
    margin-left: auto;
}

.hide-block-buttons{
    display:flex;
    justify-content: center;
}

.margin-top{
    margin-top: 10px;
}

.show-lobbies-title{
    padding: 10px;
    font-size: 28px;
    color: var(--blue);
}

.lobby-members{
    display: flex;
    align-items: center;
}

.lobby-members .lobby-member:not(:first-child){
    margin-left: -10px;
}

.lobby-member img{
    width: 30px;
    height: 30px;
}

.lobby-owner img{
    width: 50px;
    height: 50px;
}

.lobby-member.last div{
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.19);
    background: white;
    color: black;
}

.back-to-create{
    position: absolute !important;
    top: 60px;
    left: 35px;
}

.back-to-create i{
    font-size: 28px;
}


.lobby-queue{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    position: relative;
}



.lobby-queue .quiz-button{
    margin-top: 30px;
}

.waiting-for-players{
    color: var(--blue);
}

.ready-tick{
    position: absolute;
    bottom: 5px;
    right: -5px;
    border-radius: 50%;
    background: var(--red);
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.waiting-text{
    text-align: center;
    font-size: 20px;
    color: black;
    font-weight: 600;
}

.ready-tick i{
    color: white;
    font-size: 12px;
}


.extend .quiz-battle, .extend .lobby-queue{
    position: absolute;
    top: 0;
    left: 0;
    top: 0;
    right: 0;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.extend .next-question{
    position: absolute;
    top: 10px;
    right: 50px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.extend .quiz-battle{
    top: 50px;
    height: calc(100% - 50px);
}


.ready-tick.ticked{
    background: var(--green) !important;
}

.lobby-member{
    position: relative;
}


.ready-indication{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}


.extned .question-title{
    margin-top: 0 !important;
}


.dialog-content-wrapper .scroll{
    left: 10px !important;
    right: unset !important;
    bottom: 10px !important;
    position: absolute;
    width: 50px;
    height: 50px;
}


.next-question-text{
    color: var(--blue);
}

.show-lobbies-empty{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: var(--orange)
}

.show-lobbies-empty > div{
    color: inherit
}

.red-quiz{
    background: var(--red);
    border-bottom-color: #b31f2e;
}
.help-list{
    list-style-type: circle !important;
    margin-left: 30px;
}

.help-list > li{
    
    list-style: disc outside none !important;
    display: list-item !important;
    margin-left: 1em !important;
        
}

.red-quiz:hover{
    background: #ce2738;
}

.submit-wrapper .ql-container, .submit-wrapper .editor-parent, .submit-wrapper .answer-input, .submit-wrapper{
    height: 80% !important;
}

.submit-overlay-question{
    margin-top:40px;
}


.ready-indication{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}


.extned .question-title{
    margin-top: 0 !important;
}


.dialog-content-wrapper .scroll{
    left: 10px !important;
    right: unset !important;
    bottom: 10px !important;
    position: absolute;
    width: 50px;
    height: 50px;
}


.next-question-text{
    color: var(--blue);
}

.show-lobbies-empty{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: var(--orange)
}

.show-lobbies-empty > div{
    color: inherit
}

.red-quiz{
    background: var(--red);
    border-bottom-color: #b31f2e;
}


.red-quiz:hover{
    background: #ce2738;
}

.submit-wrapper .ql-container, .submit-wrapper .editor-parent, .submit-wrapper .answer-input, .submit-wrapper{
    height: 80% !important;
}

.submit-overlay-question{
    margin-top:40px;
}


.ready-indication{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}


.extned .question-title{
    margin-top: 0 !important;
}


.dialog-content-wrapper .scroll{
    left: 10px !important;
    right: unset !important;
    bottom: 10px !important;
    position: absolute;
    width: 50px;
    height: 50px;
}


.next-question-text{
    color: var(--blue);
}

.show-lobbies-empty{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: var(--orange)
}

.show-lobbies-empty > div{
    color: inherit
}

.red-quiz{
    background: var(--red);
    border-bottom-color: #b31f2e;
}


.red-quiz:hover{
    background: #ce2738;
}



.dropdown-custom {
    position: relative;
    display: inline-block;
  }
  
.dropdown-custom-content {
    border-radius: 10px;
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
    padding: 5px 0px;
    z-index: 100;
}

.dropdown-custom:hover .dropdown-custom-content {
    display: block;
}


.options-item{
    cursor: pointer;
    padding: 10px;
    width: calc(100% - 10px);
    margin: 5px;
    border-radius: 5px;
}

.options-item{
    border: 1px solid transparent;
}


.options-item.included{
    border: 1px solid var(--blue);
    color: var(--blue);
}

.memory-wrappper{
    padding: 50px;
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
}


.memory-grid-wrapper{
    display: grid;
    grid-gap: 10px;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-items: center;
}



.memory-grid-item-sizer{
    width: 100%;
    padding-top: 100%;
    position: relative;
    height: 0;
}

.memory-grid-item{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transition: all .2s ease;
    overflow: hidden;
}


.memory-grid-item:not(.flip):not(.shake-failed){
    background: rgb(149, 146, 146) !important;
    border-bottom-color: rgb(79, 78, 78) !important;
}


.shake-failed{
    background: var(--red) !important;
    border-bottom-color:  #a41e2c;
}


.memory-grid-item *{
    color: white !important;
    cursor: pointer;
}

.memory-editor{
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.memory-editor *{
    font-size: 26px !important;
    text-align: center;
    cursor: pointer !important;
    font-size: 15px !important;
}

.flip-card {
    background-color: transparent;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}


.flip-out {
	-webkit-animation: flip-out 0.45s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: flip-out 0.45s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes flip-out {
    0% {
        -webkit-transform: rotateX(0);
                transform: rotateX(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateX(70deg);
                transform: rotateX(70deg);
        opacity: 0;
    }
}


@keyframes flip-out {
    0% {
        -webkit-transform: rotateX(0);
                transform: rotateX(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateX(70deg);
                transform: rotateX(70deg);
        opacity: 0;
    }
}

.completed-memory{
    display: flex;
    align-items: center;
    gap: 10px;
}

.completed-memory i{
    font-size: 26px;
    color: var(--blue);
}


.shake-failed{
    -webkit-animation: shake-failed 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both !important;
            animation: shake-failed 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both !important;
}

@-webkit-keyframes shake-failed-red{
    0%{
        background: var(--red) !important;
    }

    100%{
    }
}

@-webkit-keyframes shake-failed {
    0%,
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70% {
      -webkit-transform: translateX(-10px);
              transform: translateX(-10px);
    }
    20%,
    40%,
    60% {
      -webkit-transform: translateX(10px);
              transform: translateX(10px);
    }
    80% {
      -webkit-transform: translateX(8px);
              transform: translateX(8px);
    }
    90% {
      -webkit-transform: translateX(-8px);
              transform: translateX(-8px);
    }
  }
  @keyframes shake-failed {
    0%,
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70% {
      -webkit-transform: translateX(-10px);
              transform: translateX(-10px);
    }
    20%,
    40%,
    60% {
      -webkit-transform: translateX(10px);
              transform: translateX(10px);
    }
    80% {
      -webkit-transform: translateX(8px);
              transform: translateX(8px);
    }
    90% {
      -webkit-transform: translateX(-8px);
              transform: translateX(-8px);
    }
  }



.extend .stand-alone-editor{
    margin-left: auto;
}


.extend .memory-wrappper{
    margin-top: 30px;
}


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

.equalizeFont *{
    font-size: 22px;
    text-align: center;
}


.optional-block{
    display: flex !important;
    align-items: center;
    gap: 5px;
    position: absolute !important;
    top: 40px;
    right: 40px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.19);
    cursor: pointer;
    padding: 5px;
}

.optional-block *{
    color: grey;
}


.optional-block.optional{
    border-color: var(--blue);
}

.optional-block.optional *{
    color: var(--blue)
}


.open-chapter-overview i{
    color: var(--blue) !important;
}


.close-memory{
    position: absolute;
    top: 50px;
    right: 50px;
    cursor: pointer;
}

/* NEU! In die Global2.css übernehmen */
.help-icon-task{
    position: relative;
    top: 10px;

    position: relative;
    top: 54px;
    display: flex;
    align-self: center;
    color: var(--blue);
    cursor: pointer;
}
.help-dialog-text{
    display: flex;
    align-items: center;
}

.help-icon-quiz{
    position: relative;
    top: 151px;
    display: flex !important;
    align-self: center;
    justify-content: flex-end;
    color: var(--blue);
    cursor: pointer;
}

.help-icon-math{
    position: relative;
    display: flex !important;
    align-self: center;
    justify-content: flex-end;
    color: var(--blue);
    cursor: pointer;
    top: 10px;
    right: -60px;
}

.help-icon-chapter-title{
    display: flex !important;
    align-self: center;
    justify-content: flex-end;
    margin: 10px;
    color: var(--blue);
    cursor: pointer;
}

.help-dialog h1{
    font-size: 40px !important;
    margin-bottom: 20px !important;
}

.help-dialog h2{
    font-size: 30px;
    margin-bottom: 15px;
    margin-top: 10px;
}

.help-dialog h3{
    font-size: 25px;
    margin-bottom: 12px;
    margin-top: 5px;
}

h3{
    margin: 10px 0 !important;
}

.help-dialog p{
    margin-left: 20px;
    margin-bottom: 4px;
    font-size: 17px !important;
    display: flex;
}

.help-dialog i {
    margin-right: 10px;
}

.help-dialog span {
    margin-right: 10px !important;
}

.icon-blue {
    color: var(--blue) !important;
}

.icon-red {
    color: var(--red) !important;
}


#help-icon-edit-course {
    position: absolute !important;
    top: 5px;
    right: 5px;
    margin-top: 30px;
    margin-right: 75px;
}
#help-icon-edit-course-1 {
    position: relative !important;
    bottom: 90px;
    right: -142px;
    height: 24px;
}

#help-icon-edit-course-2 {
    position: relative !important;
    bottom: 75px;
    right: -272px;
    height: 24px;
}

.help-visibility-btns {
    display: flex;
    margin-bottom: 5px;
    margin-left: 15px;
}

.inner-help-icons {
    position: relative;
    top: 5px;
    font-size: 28px !important;
}

#edit-course-help-box {
    display:flex;
    justify-content: space-around;
}

.maxHEIGHT-changeVisibility {
    height: 30px;
}

.edit-course-name-icon {
    display: none !important;
}

.dialog .edit-course-name-icon {
    display: block !important; 
}

#help-icon-edit-quiz {
    width: 100%;
    height: 24px;
    margin-left: 15px;
}

.edit-quiz-header {
    display:flex;
    align-items: center;
    margin-left: 15px;
}


.course-owner {
    width: 60px;
    height: 60px;
    margin-right: 11.41px;
    z-index: 0 !important;
}

.course-owner img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%
}

.course-owner-name {
    margin-top: 5px;
    font-style: normal;
    font-size: 20px;
    line-height: 100%;
    color: #00A3FF;
}

.course-member-count {
    margin-top: 9px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    cursor: default;
}

/* .checkboxLinear {
    margin: none !important;
    display:flex;
    flex-direction: column;
    align-items: flex-end;
    position: absolute;
    top: 259px;
    right: 19px;
    cursor: pointer;
}  */
    /* transform: translate(calc(93% - 19px),calc(-326% + 27px)); */

.linearity-title {
    height: 16px;
    margin-top: 9.91px;
    margin-right: 3px;
    font-weight: 400;
    font-size: 16px !important;
    line-height: 100%;
}

.linearity-switch {
    position: relative;
    display: inline-block;
    display: flex;
    align-items: center;
    gap: 5px;
}
  
.linearity-switch .linearity-checkbox {
    opacity: 0;
    width: 0;
    height: 0;
}
  
  .linearity-slider {
    position: absolute;
    cursor: pointer;
  }


.ql-toolbar.ql-snow{
    border: none !important;
    padding: 5px !important;
}


.ql-toolbar.ql-snow .ql-formats{
    border-radius: 30px;
    background: var(--grey);
    padding: 5px;
}


.grey-backed{
    background: var(--grey);
    display: flex;
    gap: 20px;
    align-items: center;
    border-radius: 10px;
    padding: 10px;
}

.grey-backed i{
    cursor: pointer !important;
}

.button{
    border-radius: 10px;
    color: white !important;
    padding: 10px;
    background: var(--blue);
    font-size: 18px;
    cursor: pointer;
    text-align: center;
}

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



.save-block {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: white !important;
    border-radius: 10px;
    padding: 10px !important;
}


.save-block i{
    color: var(--blue) !important;
}


.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: var(--blue);
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
  }
  
  .checkmark {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 10% auto;
    box-shadow: inset 0px 0px 0px var(--blue);
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
  }
  
  .checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
  }
  
  @keyframes stroke {
    100% {
      stroke-dashoffset: 0;
    }
  }
  @keyframes scale {
    0%, 100% {
      transform: none;
    }
    50% {
      transform: scale3d(1.1, 1.1, 1);
    }
  }

  @keyframes fill {
    100% {
      box-shadow: inset 0px 0px 0px 12.8px var(--blue);
    }
  }



.text-row{
    display: flex;
    justify-content: space-between;
}

.text-block .options-wrapper{
    gap: 10px;
    display: flex;
    width: 100%;
}

.options-wrapped{
    width: 100%;
}

.input{
    padding: 15px !important;
    border-radius: 10px !important;
    background: var(--grey) !important;
    border: 1px solid var(--border-grey) !important;
    transition: 0.3s ease !important;
}

.input.spaced{
    margin: 10px;
}

.ql-editor.ql-blank::before{
    left: 0px !important;
    font-style: normal !important;
}


.hidden-block{
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
}

.hidden-block img{
    width: 200px;
    height: 150px;
    object-fit: cover;
}

h2{
    font-size: 30px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: black;
}


.v-h-parent{
    display: flex;
    align-items: center;
    flex-flow: column;
}



.remember-container{
    border: 1px dashed var(--red);
}

.remember-container > *{
    padding: 10px;
}


.locked{
    margin-top: 5px;
}


.lock-text{
    display: flex;
    flex-flow: column;
    gap: 10px;
    margin-left: 20px !important;
    max-width: 1000px;
}

@media (max-width: 500px){
    .lock-text{
        align-items: flex-start;
    }
}


.sub{
    display: flex;
    gap: 10px;
}


.sub .button{
    width: 100%;
}


.bg-green{
    background: var(--blue) !important;
}


.bg-red{
    background: var(--red) !important;
}


.dialog-content.broad{
    width: 1000px;
}

.bg-grey{
    background: var(--grey);
    color: black !important;
}


.submission{
    width: 100%;
    display: flex;
    gap: 10px;
    margin: 10px 0px 0px 0px;
}

.submission .dialog-button{
    width: 100%;
}

.black{
    color: black !important;
}


.close-popup{
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.close-popup i{
    font-size: 30px;
}


.feedback-img{
    width: 50%;
}


.upload-file{
    cursor: pointer;
    position: relative;
    max-height: 320px;
    border-radius: 10px;
    overflow: hidden;
}

.popup-flex{
    display: flex;
}

.popup-flex > *{
    width: 50%;
}

.popup-upload-options{
    width: 50%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.popup-upload-options .upload-file{
    max-height: none;
    min-height: 320px;
    background: #b5b5b5;
}

.upload-file i{
    font-size: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.upload-file-label{
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(50% + 48px);
    color: #111;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    z-index: 1;
}


.upload-file img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dialog-fullscreen{
    width: 90% !important;
    height: 100%;
    display: flex;
    flex-flow:column;   
}

.dialog-fullscreen > .dialog-content-wrapper{
    height: 100%;
    position: relative;
}

.returned-img{
    height: 100%;
    width: 100%;
    position: absolute; 
    max-height: unset;
    background: unset;
    overflow: auto;
}

.returned-img::after{
    background: none !important;
}

.returned-img > img{
    
    height: unset;
}

.popup-flex{
    margin-bottom: 10px;
}


.upload-file::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;    
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: 0.2s ease;
}


input[type="checkbox"].ios8-switch {
    position: absolute;
    margin: 8px 0 0 16px;    
}
input[type="checkbox"].ios8-switch + label {
    position: relative;
    padding: 5px 0 0 50px;
    line-height: 2.0em;
}
input[type="checkbox"].ios8-switch + label:before {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 40px; /* x*5 */
    height: 24px; /* x*3 */
    border-radius: 16px; /* x*2 */
    background: #fff;
    border: 1px solid #d9d9d9;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
input[type="checkbox"].ios8-switch + label:after {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    top: 0px;
    width: 24px; /* x*3 */
    height: 24px; /* x*3 */
    border-radius: 16px; /* x*2 */
    background: #fff;
    border: 1px solid #d9d9d9;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
input[type="checkbox"].ios8-switch + label:hover:after {
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
input[type="checkbox"].ios8-switch:checked + label:after {
    margin-left: 16px;
}
input[type="checkbox"].ios8-switch:checked + label:before {
    background: #55D069;
}

/* SMALL */

input[type="checkbox"].ios8-switch-sm {
    margin: 5px 0 0 10px;
}
input[type="checkbox"].ios8-switch-sm + label {
    position: relative;
    padding: 0 0 0 32px;
    line-height: 1.3em;
}
input[type="checkbox"].ios8-switch-sm + label:before {
    width: 25px; /* x*5 */
    height: 15px; /* x*3 */
    border-radius: 10px; /* x*2 */
}
input[type="checkbox"].ios8-switch-sm + label:after {
    width: 15px; /* x*3 */
    height: 15px; /* x*3 */
    border-radius: 10px; /* x*2 */
}
input[type="checkbox"].ios8-switch-sm + label:hover:after {
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
input[type="checkbox"].ios8-switch-sm:checked + label:after {
    margin-left: 10px; /* x*2 */
}

/* LARGE */

input[type="checkbox"].ios8-switch-lg {
    margin: 10px 0 0 20px;
}
input[type="checkbox"].ios8-switch-lg + label {
    position: relative;
    padding: 7px 0 0 60px;
    line-height: 2.3em;
}
input[type="checkbox"].ios8-switch-lg + label:before {
    width: 50px; /* x*5 */
    height: 30px; /* x*3 */
    border-radius: 20px; /* x*2 */
}
input[type="checkbox"].ios8-switch-lg + label:after {
    width: 30px; /* x*3 */
    height: 30px; /* x*3 */
    border-radius: 20px; /* x*2 */
}
input[type="checkbox"].ios8-switch-lg + label:hover:after {
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
}
input[type="checkbox"].ios8-switch-lg:checked + label:after {
    margin-left: 20px; /* x*2 */
}


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

  
  .linearity-slider:before {
    position: absolute;
    content: "";
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .linearity-checkbox:checked + .linearity-slider {
    background-color: var(--blue);
  }
  
  .linearity-checkbox:focus + .linearity-slider {
    box-shadow: 0 0 1px var(--blue);
  }
  
  .linearity-checkbox:checked + .linearity-slider:before {
    -webkit-transform: translate(calc(25px - 4.18px),0px);
    -ms-transform: translate(calc(25px - 4.18px),0px);
    transform: translate(calc(25px - 4.18px),0px);
    width:20.91px;
    height: 20.91px;

  }
  
  .linearity-slider.round {
    border-radius: 34px;
  }
  
  .linearity-slider.round:before {
    border-radius: 50%;
    width: 20.91px;
    height: 20.91px;
    margin-top: 2px;
    margin-left: 2.09px;;
  }

  /* .course-tile-text {
        margin-bottom: 20px !important;
    } */


    .iiigel-icon {
        width: 83.4px !important;
        height: 50px;
    }

    .iiigel-icon-text{
        font-style: normal;
        font-weight: 400;
        font-size: 26px;
        line-height: 100%;
        color: var(--blue);
        margin-top: 16px;
        margin-left: 7.7px;
    }


    @media (max-width: 800px) { 
        .iiigel-icon-text{
            display: none;
        }
    }

    .editor-page{
        width: 100%;
        height:523px;
        padding: 0px 30px;
        overflow-y: scroll;
    }
    
    .editor-settings{
        display: flex;
        gap: 10px;
        padding: 10px;
        flex-wrap: wrap;
        position: relative;
    }
    
    .editor-page::-webkit-scrollbar {
        width: 4px !important;
    }
    
    .editor-page::-webkit-scrollbar-track {
        background: var(--gray) !important;
    }
    
    .editor-page::-webkit-scrollbar-thumb {
        background: var(--blue) !important;
    }
    
    .editor-page::-webkit-scrollbar-thumb:hover {
        background: var(--blue) !important;
    }
    
    .user-editor-name{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-left: 6px;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 23px;
    }
    
    .user-avatar-wrapper{
        width: 45px;
        height: 45px;
        overflow: hidden;
        border-radius: 50%;
        min-width: 30px;
    }

    .course-tile-size {
        width: 424px !important;
        background: white;
        border-radius: 5px;
        border: 1px solid #D9DBE0;
        margin: 1rem 0;
        position: relative;
        z-Index: 10;
    }



.upload-file:hover::after{
    opacity: 0.3;
}

.upload-file i.file{
    opacity: 0;
    transition: 0.2s ease;
}

.upload-file:hover i{
    opacity: 1;
}

.popup-text{
    height: 320px;
    font-size: 18px;
    resize: none;
}

.input:focus, input.focussed, textarea.focussed{
    background: var(--input-bg) !important;
    border: 1px solid var(--blue) !important;
    border-bottom: 1px solid var(--blue) !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}


.status-selecting::after{
    background: var(--dark-grey) !important;
}

.task-finish-wrapper.selecting .tick{
    background-color: var(--dark-grey);
    box-shadow: 0 7px 10px var(--border-grey);
}


.task-finish-wrapper.pending{
    border-color: var(--orange);
}

.status-pending::after{
    background: var(--orange) !important;
}


.task-finish-wrapper.finished{
    border-color: var(--green);
}

.task-finish-wrapper.taskStatusLoading,
.task-finish-wrapper.taskStatusLoading label {
    opacity: 0.3;
    cursor: wait;
}

.quiz-row{
    display: flex;
    justify-content: space-between;
    padding: 10px;
}


.content-parent.block-editable::after{
    display: none !important;
}


.thin{
    border-radius: 5px;
}


.scroll{
    display: flex !important;
    /* gap: 10px; */
}


.scrolling-container{
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: relative;
    margin-top: 20px;
}


.add-questions{
    position: absolute !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


.scroll[dir="right"]{
    margin-left: auto;
}

.scrolling-container{
    height: 50px;
}


.scroll[dir="right"] i{
    transform: rotate(180deg);
}

.add-questions .add-template{
    margin: 0px 10px;
    transition: 0.2s ease;
}

.add-questions .add-template:hover{
    color: var(--blue);
}



input[type="range"]::-webkit-slider-thumb {
    background: var(--blue) !important;
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    background: var(--blue) !important;
    cursor: pointer;
}


.slider-wrapper{
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 15px 0px;
    width: 100%;
}


input[type="range"]{
    margin: 0 !important;
}


.slider-wrapper i{
    font-size: 30px;
}

.tooltip-wrapper{
    display: flex;
    align-items: center;
}

.slider-wrapper .tooltip-wrapper{
    width: 100%;
}

.quiz-blue{
    background: #61C6FF;
    border-color: var(--blue);
}


.quiz-blue.waves-effect:hover{
    background: #87d3ff;
}


.add-answer-card i{
    font-size: 48px;
    color: var(--blue) !important;
    transition: 0.3s ease;
}

.add-answer-card:hover i{
    color: white !important;
}


.quiz-red{
    background: #FFABAE;
    border-color: #9F1E22;
}


.quiz-red:not(.prevent):hover{
    background: #f8babc;
}

.quiz-red + .index-indicator{
    color: #9F1E22;
}


.quiz-pink{
    background: #EDBAFF;
    border-color: #A21B94;
}

.quiz-pink + .index-indicator{
    color: #A21B94;
}


.quiz-pink:not(.prevent):hover{
    background: #f8dede
}

.quiz-yellow-1{
    background: #FCE19A;
    border-color: #FFCE4B;
}


.quiz-yellow-1 + .index-indicator{
    color: #FFCE4B;
}


.quiz-yellow-1:not(.prevent):hover{
    background: #ffe7a9;
}


.quiz-green{
    background: #7FE9B5;
    border-color: #1BA260;
}


.quiz-green + .index-indicator{
    border-color: #1BA260;
}


.quiz-green:not(.prevent):hover{
    background: #8fe9bd;
}


.quiz-yellow-2{
    background: #FFD390;
    border-color: #A4680C;
}

.quiz-yellow-2 + .index-indicator{
    color: #A4680C;
}


.quiz-yellow-2:not(.prevent):hover{
    background: #f8d6a2;
}



.answer-wrapper.prevent{
    cursor: text;
}


.answer-card-container{
    position: absolute;
    bottom: 10px;
    right: -10px;
    padding: 10px;
    background: white;
    border-radius: 5px;
    box-shadow: 0px 10px 15px rgba(146, 154, 165, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ticked.highlight{
    color: var(--green) !important;
}

.ticked:not(.highlight) + label + i{
    color: var(--red) !important;
}

.question.ac + .question{
    padding-left: 20px;
}


.question.ac > div:not(.page-title){
    overflow: auto;
    height: 100%;
}


.input.blued{
    background: var(--input-bg) !important;
    border: 1px solid var(--blue) !important;
}


.text-answer{
    width: calc(100% - 80px) !important;
    margin: 50px auto !important;
    display: block !important;
    font-size: 18px !important;
}


.content-parent.viewable > *{
    padding-left: 30px;
}


.quiz-preview:not(.full-screen){
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    width: 100%;
    padding-left: 0 !important;
}

.content-parent[type="2"].block-viewable{
    min-height: 500px;
}

.quiz-preview{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 150px;
    min-height: 500px;
}

.quiz-preview .quiz-preview-background{
    bottom: 0;
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
}

.start-quiz-container h2{
    color: var(--yellow);
    font-size: 54px !important;
    text-align: center;
}

.start-quiz-container .button{
    padding: 15px 50px !important;
    font-size: 24px;
    font-weight: 700;
    margin-top: 40px;
}

.chapter-container.expanded .chapter-content  .quiz-block.finished .start-quiz-container {
    margin-right: 100px;
}

@media (max-width: 1600px) {
    .chapter-container.expanded .chapter-content .quiz-block.finished .quiz-preview .quiz-preview-g {
        display: none; 
    }

    .chapter-container.expanded .chapter-content .quiz-block.finished .start-quiz-container {
        margin-right: 0;
    }
}

.quiz-background{
    background: url('../assets/graphics/quiz-background.png');
    width: 100%;
    height: 100%;
    padding-top: 110px;
    padding-bottom: 20px;
    height: 100vh;
    overflow-y: auto;
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 80px !important;
}


.full-screen{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0px !important;
    z-index: 999999;
    margin: 0px !important;
    width: 100%;
    height: 100%;
    padding: 0px !important;
}

.quiz-container{
    overflow: hidden;
    display: flex;
    flex-flow: column;
    padding-bottom: 55px;
}

.quiz-regular{
    height: 100%;
    display: flex;
    flex-flow: column;
    max-width: 1450px;
    width: 100%;
    margin: auto;
    padding: 0 20px;
    
}

.material-icons.marked{
    color: var(--green) !important;
}


.ql-container.centered, .ql-container.centered .ql-editor, .ql-container.centered .ql-editor p{
    width: fit-content !important;
}


.block-viewable .page-title p{
    font-size: 24px !important
}


.num-pages{
    display: flex;
    gap: 5px;
    width: 100%;
}

.page-indicator{
    border-radius: 10px;
    width: 100%;
    height: 8px;
    background: var(--blue-bg);
}

.quiz-top{
    display: flex;
    gap: 30px;
    align-items: center;
    margin-bottom: 10px;
}


.button-quiz{
    box-shadow: 0px 3px 7px rgba(0, 53, 103, 0.15);
    background: var(--grey-btn);
    color: black;
    padding: 18px 35px;
    font-size: 18px;
    font-weight: 400;
    border-radius: 10px;
    cursor: pointer;
    display: flex !important;
    align-items: center;
}


.quiz-back{
    position: absolute !important;
    top: 50px;
    left: 50px;
}

.page-indicator.correct{
    background: var(--green);
}



.page-indicator.correct{
    background: var(--green);
}

.page-indicator.incorrect{
    background: var(--red);
}

.page-indicator.active {
   border: 1px dashed var(--primary-blue);
}

.quiz-preview-g{
    max-height: 100%;
}

@media (max-width: 1100px){
    .quiz-preview-g{
        display: none;
    }
}


.status-finished::after{
    background: var(--green) !important;
}

.status-option::after {
    background: repeating-linear-gradient(
        135deg,
        var(--green),
        var(--green) 15px,
        var(--yellow) 15px,
        var(--yellow) 30px
    ) !important;
}
.package-top-editor{
    padding: 15px;
    position: relative;
    margin-bottom: 30px;
    margin: 0 30px;
    margin-bottom: 30px;
}

.package-top-editor::after{
    content: '';
    position: absolute;
    left: -5px;
    width: 5px;
    height: 100%;
    top: 0;
}

.add-package-question, .package-bottom{
    margin-top: 30px !important;
}

.package-bottom{
    width: fit-content;
    padding: 10px 40px;
    font-size: 20px;
    font-weight: 500 !important;
    margin-left: auto;
}

.add-package-question i, .package-bottom i{
    color: white;
}

.no-questions{
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
}


.no-questions img{
    object-fit: cover;
    width: 400px;
}

@media (max-width: 500px){
    .no-questions img{
        display: none;
    }
}

.no-questions div{
    font-size: 24px;
    color: var(--yellow);
}

/* Punkte UI: as per client screenshot – only in Test Mode */
.punkte-box {
    background: #f4f8fe;
    border-radius: 6px;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 60px;
    box-sizing: border-box;
}
.punkte-box.col {
    flex-direction: column;
    padding: 6px 8px;
    gap: 0;
}
.punkte-box .input-field { margin: 0; }
.punkte-box .input-field input {
    text-align: center;
    height: 2rem;
    margin-bottom: 0px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #9e9e9e !important;
}
.punkte-box .input-field input:focus {
    border-bottom: 1px solid #1A73E8 !important;
    box-shadow: 0 1px 0 0 #1A73E8 !important;
}
.punkte-box label {
    font-size: 12px;
    font-weight: bold;
    color: #1A73E8;
}
.quiz-punkte-box {
    background: white;
    border-radius: 8px;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.quiz-punkte-box span {
    color: #1A73E8;
    font-weight: bold;
    font-size: 16px;
    white-space: nowrap;
}
.quiz-points-input {
    background: #f4f4f4 !important;
    border-radius: 6px !important;
    border: none !important;
    height: 36px !important;
    width: 60px !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #333 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
/* SUMME ALLER PUNKTE */
.sum-punkte-footer-container {
    background: white;
}
.summe-punkte-display {
    background: white;
    border-radius: 8px;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-top: 15px;
    margin-bottom: 30px;
    width: 100%;
    box-sizing: border-box;
}
.summe-punkte-display .sum-label {
    color: #1A73E8;
    font-weight: bold;
    font-size: 14px;
    margin-right: 15px;
}
.summe-punkte-display .sum-value {
    font-weight: bold;
    font-size: 16px;
    color: #333;
}

.package-question{
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 10px;
    width: 100%;
    justify-items: start;
    align-items: center;
}
.package-question.editable-with-points {
    grid-template-columns: 50px 1fr 90px;
}
.package-question.editable-package-question {
    grid-template-columns: 50px minmax(0, 1fr) 52px;
}
.package-question.editable-with-points.editable-package-question {
    grid-template-columns: 50px minmax(0, 1fr) 90px 52px;
}
.package-question .package-index {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
}
.package-question .editorQuestion {
    grid-column: 2;
    grid-row: 1;
    width: calc(100% - 10px);
    justify-self: start;
}
.package-question .editorAnswer,
.package-question .input.editorAnswer {
    grid-column: 2;
    grid-row: 2;
    width: calc(100% - 30px);
    justify-self: start;
}
.package-question .punkte-box {
    grid-column: 3;
    grid-row: 1 / -1;
    justify-self: center;
}
.package-question .punkte-box-package {
    grid-column: 3;
    grid-row: 2;
    justify-self: center;
}
.package-question .package-question-delete {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff1f1;
    color: #d32f2f;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.package-question.editable-with-points .package-question-delete {
    grid-column: 4;
}
.package-question .package-question-delete:hover,
.package-question .package-question-delete:focus-visible {
    background: #d32f2f;
    color: #fff;
    outline: none;
}
.package-question .package-question-delete:active {
    transform: scale(0.94);
}

.package-question .input{
    grid-column: 2;
    width: calc(100% - 30px);
}

.package-points-input {
    background: var(--grey, #f4f4f4) !important;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    padding: 0 15px !important;
    height: 100% !important;
    min-height: 52px;
    line-height: normal !important;
    text-align: center !important;
    font-size: 18px !important;
    color: #333 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    margin: 0 !important;
}

.package-points-input:focus {
    box-shadow: 0 0 0 2px #e0e0e0 !important;
    background: #eeeeee !important;
}

.package-index{
    font-size: 24px;
    color: var(--blue);
    font-weight: 600;   
}


.package-question .correct{
    border-color: #1BA260 !important;
    background: #D6FAE8 !important;
}

.package-question .wrong{
    border-color: #9F1E22 !important;
    background: #FFD9D9 !important;
}

.package-question .wrong:focus{
    border-color: #771215 !important;
    background: #fabdbd !important;
}


.package-question .correct:focus{
    background: #c4fadd !important;
    border-color: #2db372 !important;
}


.task-finish-wrapper.package{
    top: 50px;
    right: 50px;
}

.auto-top{
    display: flex;
    gap: 10px;
    align-items: center;
}

.auto-top .input{
    width: 80px;
}


.auto-task{
    display: grid;
    grid-template-columns: minmax(500px, 1fr) 1fr;
    gap: 20px;
}

/* PUNKTE column like Aufgabenpaket – third column when test mode */
.auto-task.editable-with-points {
    grid-template-columns: minmax(500px, 1fr) 1fr 90px;
}
.auto-task.editable-with-points .auto-task-battle {
    grid-column: 1 / -1;
}
/* Do not pin row — avoids overlap with battle-time row and Parameter section */
.auto-task.editable-with-points .auto-task-aufgabe {
    grid-column: 1;
    /* grid-row: 1; */
}
.auto-task.editable-with-points .auto-task-solution-row {
    grid-column: 2;
    /* grid-row: 1; */
}
/* Question-wise points: one PUNKTE label + input per Fragestellung row */
.auto-task.editable-with-points .auto-points-wrap {
    grid-column: 3;
    /* grid-row: 1 / 3; */
    align-self: start;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.auto-task.editable-with-points .auto-points-wrap .auto-points-label-text {
    color: #1A73E8;
    font-weight: bold;
    font-size: 16px;
    white-space: nowrap;
}
.auto-task.editable-with-points .auto-points-wrap .punkte-box-auto {
    margin: 0;
    width: 60px;
}
.auto-task.editable-with-points .auto-points-wrap .quiz-points-input {
    text-align: center;
    background: #f4f4f4 !important;
    border-radius: 6px !important;
    border: 1px solid #e0e0e0 !important;
    height: 36px !important;
    width: 60px !important;
    min-width: 60px;
    padding: 0 8px;
    box-sizing: border-box;
    font-size: 16px;
}
.auto-task.editable-with-points h3:not(.unspan),
.auto-task.editable-with-points .requirety-display,
.auto-task.editable-with-points .figure-display,
.auto-task.editable-with-points .auto-task-bedingungen-head,
.auto-task.editable-with-points .example-task-row {
    grid-column: 1 / -1;
}

/* Solution row: Aufgabe + delete with clear spacing */
.auto-task .auto-task-solution-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.auto-task .auto-task-solution-row .solution-input {
    flex: 1;
    min-width: 0;
}
.auto-task .auto-task-solution-row .button.red {
    flex-shrink: 0;
    margin-top: 0;
}
.auto-task .solution-input {
    margin-right: 0;
}

.auto-task h3:not(.unspan), .requirety-display{
    grid-column: 1 / span 2;
}

.requirety-display{
    display: flex;
    gap: 10px;
}

.requirety-display i{
    height: calc(100% - 22.5px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 22.5px;
}

.unspan{
    margin-top: auto !important;
    margin-bottom: auto !important;
}


h3{
    font-size: 22px !important;
    font-weight: 700 !important;
    color: black;
}

.figure-display{
    display: flex;
    gap: 30px;
    align-items: flex-start;
    grid-column: 1 / span 2;
}

.figure-display .editor-group{
    width: 100%;
}

.editor-group-title{
    font-weight: 600;
}

.example-task{
    width: fit-content;
    padding: 15px;
    font-size: 16px;
    margin-top: 30px;
}

/* Bedingungen: heading left, "+ Bedingung hinzufügen" right (matches main layout) */
.auto-task-bedingungen-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 20px;
    grid-column: 1 / span 2;
}
.auto-task-bedingungen-head .unspan {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.auto-task-bedingungen-head .add-requirety,
.auto-task-bedingungen-head .example-task {
    margin-top: 0;
    margin-left: 0;
}

/* Beispielaufgabe row: green button left, preview fields right */
.auto-task .example-task-row {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 20px 30px;
    grid-column: 1 / span 2;
    width: 100%;
    box-sizing: border-box;
}
.auto-task .example-task-row .example-task-generate {
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 0;
}
.auto-task .example-task-row .example-tasks {
    display: flex;
    flex: 1;
    min-width: 0;
    gap: 30px;
    margin-top: 0;
    align-items: center;
}

.example-tasks{
    display: flex;
    gap: 30px;
    margin-top: 30px;
}

/* Full-width "Format hinzufügen" under all formats */
.auto-tasks .add-package-question {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    text-align: center;
}

.base-timer {
    position: relative;
    width: 300px;
    height: 300px;
}

.base-timer__svg {
    transform: scaleX(-1) translateX(50%);
    height: 100%;
    position: absolute;
    left: 50%;
}

.base-timer__circle {
    fill: none;
    stroke: none;
}

.base-timer__path-elapsed {
    stroke-width: 7px;
    stroke: #D9DBDF;
}

.base-timer__path-remaining {
    stroke-width: 7px;
    stroke-linecap: round;
    transform: rotate(90deg);
    transform-origin: center;
    transition: 1s linear all;
    fill-rule: nonzero;
    stroke: currentColor;
}

.base-timer__path-remaining.green {
    color: var(--green-timer);
}

.base-timer__path-remaining.orange {
    color: var(--yellow);
}

.base-timer__path-remaining.red {
    color: var(--red);
}

.base-timer__label {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    gap: 10px;
}


.base-timer{
    width: 100%;
}

.base-timer__label .input{
    width: 30px !important;
    text-align: center;
    font-size: 18px !important;
}

.indep-block{
    min-height: 500px;
}

@media (max-width: 500px){
    .indep-block{
        min-height: 300px;
    }
}

.quiz-background .base-timer{
    width: 100px;
    height: 100px;
}

.quiz-regular .quiz-top-content{
    display: flex;
    flex-flow: column;
    align-items: center;
}

.quiz-background .base-timer__label{
    width: calc(100% - 10px);
    margin: 0 auto;
    margin-left: 5px;
    text-align: center;
}

.time-small{
    font-size: 14px;
}

.quiz-top-content .base-timer{
    margin-top: 10px;
}

.mask-element > .battle-points-info{
    color: #1A73E8;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    margin: -6px auto 34px;
    max-width: 920px;
    text-align: center;
}


.battle-preview h1{
    color: var(--yellow);
    font-size: 54px !important;
    font-weight: 700;
}

.battle-preview{
    display: flex;
    min-height: inherit;
    padding: 40px;
}

.battle-preview > * {
    width: 100%;
}

.create-battle{
    font-size: 24px;
    font-weight: 700;
    padding: 15px;
    width: 100%;
}


.battle-side{
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
    min-height: inherit;
}

.lobby-display-container{
    height: 100%;
}

.battle-side > img{
    width: 90%;
}

.create-battle:not(.greyed){
    margin-top: 30px;
}


.empty-pic{
    width: 250px !important;
    margin-left: 50%;
    transform: translateX(-50%);
}
    
@media only screen and (max-width: 768px){
    .battle-side > img{
        display: none;
    }
    .empty-pic{
        display: none;
    }
    .battle-preview{
        flex-flow: column;
    }
    .yet-empty{
        text-align: start !important;
    }

    .quiz-background{
        padding: 10px;
    }

    .quiz-back {
        margin-bottom: 10px;
        position: unset !important;
        top: unset;
        left: unset;
    }

}

@media only screen and (max-width: 568px){
    .chapter-content{
        width: 100% !important;
    }

    .chapter-side-bar{
        position: relative !important;
        width: 100% !important;
    }

    .main-container{
        margin: 10px;
    }

    .chapter-top{
        flex-flow: column;
    }

    .chapter-container{
        padding-top: 0px !important;
    }
}

.yet-empty{
    color: var(--blue);
    font-size: 20px;
    text-align: center;
}

.owner-avatar{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
}

.lobby-preview{
    width: calc(100% - 50px);
    display: flex;
    align-items: center;
}

.lobby-display-container h3{
    font-weight: 500 !important;
}

.join-battle{
    margin-left: auto;
}

.lobby-preview{
    padding-left: 20px;
}

.lobby-preview:first-child{
    margin-top: 10px;
}

.battle-side > .tooltip-wrapper{
    width: 100%;
    margin-top: 30px;
}

.lobby-scroller{
    margin-top: 30px;
}

.join-battle{
    background: var(--green-timer);
}

.battle-queue{
    height: 100%;
    width: 600px;
    margin: 0 auto;
}

.vs-display{
    width: 100%;
    margin-top: 20px;
    position: relative;
}

.vs-display img{
    width: 100%;
}

.battle-queue > h4{
    color: var(--blue);
    font-weight: 600;
    text-align: center;
    margin-bottom: 10px;
}

.queue-text{
    font-size: 20px;
    text-align: center;
    font-weight: 600;
}


.vs-top{
    position: absolute;
    width: 100%;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    left: 0;
    top: 0;
}

.vs-top .self{
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid white;
}

.opponent-collection img{
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid white;
}

.opponent-collection img:not(:first-child){
    margin-left: -10px;
}


.opponent-collection{
    display: flex;
}

.start-battle{
    background: var(--green-timer);
}

.queue-bottom-buttons{
    display: flex;
    margin-top: 20px;
    gap: 10px;
}

.queue-bottom-buttons *{
    width: 100%;
}

.mask-element{
    overflow-x: hidden;
    overflow-y: hidden;
    margin-top: auto;
    width: 100%;
    height: 100%;
}

.placement-indication{
    font-size: 28px;
}

.next-q-bottom{
    width: 300px;
    margin: 0 auto;
    margin-top: 50px;
}

.mask-element .question-collection{
    max-height: 300px;
    overflow: hidden;
    touch-action: pan-y;
    overscroll-behavior-x: none;
}

.leave-battle{
    position: absolute !important;
    top: 50px;
    right: 50px;
    background: var(--red);
}


.min-height{
    min-height: 500px;
}


.auto-time-edit{
    grid-column: 1 / span 2;
}

.full-screen .full-screen-top{
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
}

.full-screen .package-top-editor{
    margin: 0 !important;
}


.full-screen-top{
    padding: 20px;
}


.chapter-container.expanded .chapter-content{
    width: calc(100% - 450px);
}

.chapter-content{
    transition: 0.3s ease;
    width: 100%;
}


.chapter-container{
    width: 100%;
    position: relative;
    padding-top: 0px;
    transition: 0.3s ease;
}


.chapter-container:not(.expanded){
    padding-top: 80px;
}


.options-wrapped{
    display: flex;
    gap: 30px;
}

.options-wrapped.either{
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.options-wrapped.either > .quiz-type{
    font-weight: 500;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.1px;
    color: #AAAAAA;
    position: relative;
    border-radius: 5px 5px 0px 0px;
}

.options-wrapped.either > .quiz-type.option-active{
    color: var(--blue);
}


.options-wrapped.either > .quiz-type.option-active::after{
    content: '';
    position: absolute;
    bottom: 0px;
    height: 5px;
    width: 100%;
    left: 0;
    right: 0;
    background: var(--blue);
    border-radius: 10px;
}

.options-wrapped.either > .quiz-type.level-active-leicht {
    color: var(--level-leicht-color);  
}

.options-wrapped.either > .quiz-type.level-active-mittel {
    color: var(--level-mittel-color);  
}

.options-wrapped.either > .quiz-type.level-active-schwer {
    color: var(--level-schwer-color); 
}

.options-wrapped.either > .quiz-type::after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 5px;
    width: 100%;
    left: 0;
    right: 0;
    border-radius: 10px;
}

/* Modifier classes for different levels */
.options-wrapped.either > .quiz-type.level-active-leicht::after {
    background: var(--level-leicht-color);
}

.options-wrapped.either > .quiz-type.level-active-mittel::after {
    background: var(--level-mittel-color);
}

.options-wrapped.either > .quiz-type.level-active-schwer::after {
    background: var(--level-schwer-color);
}

.options-wrapped.either > .quiz-type.level-active {
    font-weight: bold;
    color: --white;
    background: var(--primary-indigo);
}

.options-wrapped.either > .quiz-type.level-active::after {
    content: '';
    position: absolute;
    bottom: 0px;
    height: 5px;
    width: 100%;
    left: 0;
    right: 0;
    background: var(--primary-indigo);
    border-radius: 10px;
}

.options-wrapped:not(.either) > .quiz-type{
    color: var(--blue);
    background: var(--light-blue);
    border-radius: 5px;
    font-size: 20px;
    transition: 0.3s ease;
    padding: 10px 15px;
}

.options-wrapped:not(.either) > .quiz-type.quiz-type.option-active{
    color: white;
    background: var(--blue);
}

/* Task block (Aufgabenblock) header: Optional | Differenzierung | PUNKTE on the right */
.task-header-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    width: 100%;
    flex-wrap: wrap;
}
.task-header-row .task-block-punkte {
    margin-left: auto;
    flex-shrink: 0;
}
.task-block-punkte .task-block-punkte-label {
    color: #1A73E8;
    font-weight: bold;
    font-size: 16px;
    white-space: nowrap;
}
.task-block-punkte .task-block-punkte-input-wrap {
    margin: 0;
    width: 60px;
}
.task-block-punkte .task-block-punkte-input {
    text-align: center;
}

.block-options-overview{
    width: 100%;
}

.options-wrapper{
    margin-bottom: 10px;
}


.add-requirety{
    margin-left: auto;
}


.add-requirety i{
    color: white;
}

.requirety-display > .editor-group:first-child{
    width: 100%;
}

.requirety-display > .editor-group{
    min-width: 150px;
}

.fullscreen-memory .memory-grid-wrapper{
    height: calc(100% - 200px);
    margin-top: auto;
}


.fullscreen-memory{
    display: flex;
    flex-flow: column;
}

.full-screen.package-block .full-screen-top, .full-screen.package-block .top-provide-after{
    display: flex;
    gap: 10px;
    align-items: center;
}

.full-screen.package-block .full-screen-top .base-timer{
    height: 200px;
    width: 200px;
    flex-shrink: 0;
}

.infinity-stars{
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.infinity-stars img{
    width: 50px;
    animation: fadeIn 1s ease-in both;
}

.debug-active {
    position: fixed;
    top: 0;
    right: 20px;
    background: red;
    padding: 10px;
    color: #ffffff;
}
.debug__expected-answer {
    background: indianred;
    padding: 2px 6px;
    color: #fff;
}

.dashed_border {
	border : 3px dashed var(--primary-blue);
}


/* media query */

@media (max-width: 560px) {
    .main-container-header {
        margin: 0 11%;
    }

    .task > .editor-parent {
        width: 100%;
        margin-top: 63px;
    }

    #cardoverlay_container #cardoverlay_header {
        position: absolute;
        right: calc(7.5% + 4px);
        z-index: 99;
    } 

    .package-regular .task-finish-wrapper.package {
        top: 7px;
        right: 0;
    }
    .package-block .full-screen-top {
        margin-top: 20px;
    }
}

@media (max-width: 500px) {
    .main-container-header {
        margin: 0 5%;
    }
}

@media (max-width: 460px) {
    .header-button {
        margin: 0 15px !important;
    }

    .logoutBtn {
        width: 50px;
    }
}

@media (max-width: 430px) {
    .header-home-text div:not(.header-home-underline) {
        display: none;
    }

    .header-home-underline {
        width: 36px;
    }
}

.code-container {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.dropdown-sidebar {
    width: 200px; /* Adjust width as needed */
    padding: 10px;
    background-color: #f5f5f5;
    border-right: 1px solid #ddd;
}

.dropdown-select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
}

.code-content {
    flex: 1;
    padding: 10px;
}

.iframe-wrapper {
    width: 100%;
    overflow: hidden;
    min-height: 300px;
}

.iframe-wrapper iframe {
    width: 100%;
    border: none;
    display: block;
}

.code select {
    width: 25%;
}
.code{
    padding-bottom: 2px;
}
.code-regular-wrapper {
    overflow: hidden;
}
.spacing-wrapper:has(> .code-regular-wrapper) {
    padding: 0 0 0 15px;
}
.code-header{
    padding-top: 20px;
}   
.code-select-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.code-select-row .code-select {
    display: block;
    min-width: 200px;
}
.code-select-row .code-punkte-inline {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.username-trainerview {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.edit-username-icon {
    margin-left: 5px;
    /* opacity: 0; */
    transition: opacity 0.2s;
    cursor: pointer;
    font-size: 18px !important;
}
.chapter-progress-wrapper{
    position: relative;
    z-index: 60;
}
.chapter-progress-wrapper .chapter-item-progress .tooltip-text {
    visibility: hidden;
    opacity: 0;
    width: max-content;
    max-width: 220px;
    background-color: #333;
    color: #fff;
    text-align: left;
    padding: 5px 8px;
    border-radius: 4px;
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 999;
    font-size: 12px;
    transition: opacity 0.2s ease;
    pointer-events: none;
    bottom: 20px;
}
.chapter-progress-wrapper .chapter-item-progress:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Help toggel button */
.helpLinear .checkboxLinear{
    position: unset;
    align-items: flex-start;
    margin-left:40px;
}

#get-help.disabled-help {
    pointer-events: none;
}

#get-help.disabled-help i {
    color: var(--grey-disabled);
    opacity: 0.7;
    cursor: not-allowed !important;
}

/* Regular help button styles */
#get-help:not(.disabled-help) {
    cursor: pointer;
}

/* new 10-12-25 */
.custom-slider {
    width: 100%;
    height: 250px;
    /* adjust */
    overflow: hidden;
    position: relative;
    cursor: grab;
}

.custom-slider:active {
    cursor: grabbing;
}

.slider-track {
    display: flex;
    transition: transform 0.25s ease;
}

.slide {
    min-width: 100%;
    height: 100%;
}

.slide img {
    width: 102%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    pointer-events: none;
}

.course_top_info {
    display: flex;
    justify-content: space-between;
}

.course_top_info .checkboxLinear {
    margin-top: 0;
    height: auto;
    align-self: flex-start;
}

.course_top_info input[type="checkbox"].ios8-switch+label {
    line-height: 0;
    margin: 0;
    padding-top: 12px;
}

.course_top_info input[type="checkbox"].ios8-switch {
    margin: 0;
}

.slider_count {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #fff;
    background-color: #00A3FF;
    padding: 2px 8px;
    font-size: 12px;
    color: #fff;
}

.upload_button {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    border-radius: 50%;
    border: 0;
    outline: 0;
    height: 30px;
    background-color: #00A3FF;
    color: #ffff;
    overflow: hidden;
}

.upload_button i {
    color: #fff;
    font-size: 14px;
}

.upload_button input {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    display: block !important;
}

.btn-floating.btn-large.setting_btn {
    width: 30px;
    height: 30px;
    overflow: hidden !important;
    border-radius: 50%;
    background-color: #00A3FF !important;
    position: absolute !important;
    top: 10px;
    right: 10px;
}

.setting_btn .inner i {
    color: #FFF !important;
    font-size: 18px !important;
    line-height: 30px !important;
}

.course-export-btn {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: #eef5ff;
    color: #1a73e8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    position: absolute !important;
    top: 10px;
    right: 48px;
    z-index: 5;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
}

.course-export-btn i {
    color: #1a73e8;
    font-size: 18px;
}

.course-export-btn:hover {
    background: #dbeaff;
}

body.skin-glass .course-card-settings-btn {
    margin-top: -210px !important;
}

.course-tile-wrapper .course-tile-info {
    padding: 15px !important;
}

.course-tile-member .course-owner {
    width: 40px;
    height: 40px;
}

.course-tile-member .course-owner img {
    width: 40px;
    height: 40px;
}

.course-dropdown .course-title span {
    color: #00A3FF;
}

.submission .button {
    font-size: 15px !important;
}

.main-button.waves-effect font {
    color: #fff;
}

.main-button>div {
    font-size: 16px;
}
.search-bar-wrapper {
    max-width: 450px;
    width: 100%;
    border-radius: 5px !important;
    overflow: hidden;
}
.search-bar-wrapper .search{
    height: 40px;
    width: 100%;
    position: relative;
    background-color: #e4e4e46b;
}

.search-bar-wrapper .search input{
    border: 0 !important;
    margin: 0 !important;
    padding: 0 15px !important; 
    height: 100% !important;
    color:  #000 !important;

}
.search-bar-wrapper .search i{
    color: #929292;
}

.search-bar-wrapper .search input:focus{
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.search-bar-wrapper .search .searchButton{
    position: absolute;
    right: 10px !important;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent !important;
}

.perrmission-group{
    margin: 15px 0;
    font-size: 22px;
    text-align: start;
    font-weight: 500;
    text-transform: capitalize;
}

.table-view .login{
    margin: 0 !important;
}

.subject_wraper_div{
    display: flex;
    justify-content: space-between;
    margin-top: 8px !important;
}

.subject_wraper_div .course-subject-wrapper{
    width: 48%;
    /* display: flex; */
    align-items: center;
    justify-content: end;
}

.course-subject{
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: end;
}

.course-subject span{
    max-width: 150px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.dialog-content h1 {
    font-size: 25px !important;
}

/* Editor Item Styles */

.user-editor-username {
    font-size: 12px;
    color: #888;
}

.role-badge {
    padding: 4px 12px;
    border-radius: 12px;
    background-color: #f0f0f0;
    color: #333;
    font-size: 12px;
    display: inline-block;
    text-transform: capitalize;
}

.role-badge.owner {
    background-color: rgba(255, 152, 0, 0.1);
    color: #f57c00;
}

.role-badge.admin {
    background-color: rgba(244, 67, 54, 0.1);
    color: #d32f2f;
}

.role-badge.editor {
    background-color: rgba(33, 150, 243, 0.1);
    color: #1976d2;
}

.delete-action {
    cursor: pointer;
    color: #888;
    transition: color 0.2s;
}

.delete-action:hover {
    color: #d32f2f;
}


.multi-page-app-wrapper{
    display: flex;
}
@media(min-width : 575px){
    .multi-page-app-wrapper{
    width: 425px;
}
}

.multi-page-app-wrapper .app-page{
    width: 100%;
}
.multi-page-app-wrapper .editor-page.grid{
    padding: 0 !important;
}

.delete-action i{
    color: #ff0000;
}
.course-subject-label{
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
}
.group-subject-label{
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 10px;
}

/* Quiz Layout Refactor */
.layout-rows-2 .answer-wrapper-sizer {
    padding-top: 40% !important;
}

.layout-rows-3 .answer-wrapper-sizer {
    padding-top: 30% !important;
}

.answer-container.layout-rows-3 {
     grid-gap: 15px !important;
}

/* Reduce top spacing to fit more content */
.quiz-top-content h2 {
    margin: 10px 0 !important;
}

/* Adjust padding and font size for dense layouts */
.layout-rows-3 .answer-wrapper {
    padding: 10px !important;
}

.layout-rows-3 .answer-wrapper .ql-editor * {
    font-size: 0.95em;
    line-height: 1.2;
}


.layout-medium .answer-wrapper-sizer {
    padding-top: 35% !important; /* Medium height for 5-8 answers (2 rows) */
}

.layout-large .answer-wrapper-sizer {
    padding-top: 30% !important; /* Compact height for 9+ answers (3 rows) */
}

.answer-container.layout-large {
     grid-gap: 15px !important;
}

/* Ensure content is centered */
.answer-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
}

/* Adjust padding for dense layouts */
.layout-large .answer-wrapper {
    padding: 8px 30px !important; /* Reduced safe zone for dense layout to fit content, but keeps it away from corners */
}

.layout-large .answer-wrapper .ql-editor * {
    font-size: 0.9em;
    line-height: 1.2;
}

/* Center Quiz Finish Button */
.quiz-finish {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    right: auto !important;
}

/* Hide Quiz beenden in test mode and when test is done (review) */
body.test-mode-active .quiz-finish,
body.test-mode-active .quiz-finish-wrapper,
body.review-mode-active .quiz-finish,
body.review-mode-active .quiz-finish-wrapper {
    display: none !important;
}

/* Center Next Question Button Logic */
.extend .next-question {
    right: 50% !important;
    transform: translateX(50%) !important;
    top: 20px !important;
}

/* Prevent text obscuring by indicator */
.answer-wrapper {
    padding: 0 45px !important; /* Push text away from left/right edges */
}

/* Ensure font scaling for small layout to fit content */
.layout-small .answer-wrapper .ql-editor * {
    font-size: 1.1em; /* Slightly larger for visibility but constrained by padding */
}

/* Ensure font scaling for large layout */
.layout-medium .answer-wrapper .ql-editor *,
.layout-large .answer-wrapper .ql-editor * {
    font-size: 0.95em;
}

/* Course and Chapter Select Styles for Popup */
.course-select-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    padding: 10px;
    width: 100%;
}

.course-select-item {
    width: 160px; /* Reduced width to fit better */
    height: 140px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 2px solid transparent;
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

.course-select-item.selected {
    border-color: var(--blue);
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.course-select-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.course-select-img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    background-color: var(--grey);
}

.course-select-title {
    padding: 8px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    color: var(--black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.chapter-select-item {
    width: 100%;
    max-width: 350px; /* Ensure it doesn't get too wide */
    padding: 12px 15px;
    margin: 5px;
    background: white;
    border: 1px solid var(--border-grey);
    border-radius: 5px;
    cursor: pointer;
    text-align: left; /* Better readability for list items */
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

.chapter-select-item:hover {
    background-color: var(--light-blue);
    border-color: var(--blue);
}

.chapter-select-item.selected {
    background-color: var(--blue);
    color: white;
    border-color: var(--blue);
}

.chapter-select-item.selected .chapter-title {
    color: white;
}

.chapter-select-item .chapter-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    width: 100%;
}

/* Task block: points after test submit — row below editor (not absolute; avoids cut-off) */
.task.task-main-root {
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
}
.task-main-root .task-main-inner {
    position: relative;
    display: flex;
    width: 100%;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 15px;
}
.task-main-root .task-main-inner > .editor-parent {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}
.task-main-root .task-main-inner .task-finish-wrapper {
    position: relative;
    top: auto;
    right: auto;
    flex-shrink: 0;
}
.task-review-points-bar {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 14px;
    padding-top: 4px;
    box-sizing: border-box;
}
.task-review-points-inner {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    padding: 10px 18px;
    background: #F4F8FE;
    border: 1px solid #d0d7e2;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(26, 115, 232, 0.12);
    min-width: 120px;
}
.task-review-points-label {
    color: #1A73E8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.2;
}
.task-review-points-value {
    color: #1A73E8;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .task-main-root .task-main-inner > .editor-parent {
        width: 100%;
    }
    .task-main-root .task-finish-wrapper {
        position: relative;
        top: auto;
        right: auto;
        margin-left: 0;
        margin-top: 10px;
        align-self: flex-end;
    }
    .task-review-points-bar {
        justify-content: center;
    }
    .task-review-points-inner {
        align-items: center;
        width: 100%;
        max-width: 280px;
    }
}

/* ================ TEST MODE REFINEMENTS ================ */

/* Automatic Sidebar Collapse */
body.test-mode-active .chapter-side-bar {
    display: none !important;
}

body.test-mode-active .chapter-content-wrapper {
    width: 100% !important;
    margin-left: 0 !important;
    max-width: 100% !important;
}

/* Linear layout: .chapter-container.expanded .chapter-content uses calc(100% - 450px); editor uses .computed-content — force full width during tests */
body.test-mode-active .chapter-container.expanded .chapter-content,
body.test-mode-active .chapter-page-content.expanded .chapter-content-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
}

body.test-mode-active .chapter-container.expanded .computed-content {
    width: 100% !important;
    max-width: 100% !important;
}

/* Prevent reopening chapter nav while the test runs (students and admins) */
body.test-mode-active #open-chapterview,
body.test-mode-active .open-chapter-overview {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Fullscreen Blocking Overlay */
.test-fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 2147483647; /* Maximum possible z-index */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    backdrop-filter: blur(10px);
    transition: opacity 0.3s ease;
}

.test-fullscreen-overlay h1 {
    font-size: 3rem;
    color: #FF5252;
    margin-bottom: 20px;
    font-weight: bold;
}

.test-fullscreen-overlay p {
    font-size: 1.5rem;
    max-width: 600px;
    line-height: 1.6;
    margin-bottom: 40px;
    opacity: 0.9;
    color: white !important;
}

.test-fullscreen-overlay .click-anywhere {
    font-size: 1.2rem;
    padding: 15px 30px;
    background: #1A73E8;
    border-radius: 30px;
    color: white !important;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(26, 115, 232, 0.4);
    animation: pulse-overlay 1.5s infinite;
}

.test-fullscreen-overlay .bypass-ios {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 1rem;
}

@keyframes pulse-overlay {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Start Test Dialog Customizations */
.start-test-dialog {
    max-width: 500px !important;
    padding: 40px !important;
    text-align: center !important;
}

.start-test-dialog h1 {
    color: #1A73E8 !important;
    margin-bottom: 20px !important;
}

/* ==================CRAFTED ENDGAME SKINS================== */
:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) {
    --primary-blue: var(--skin-accent);
    --blue: var(--skin-accent);
    --darkblue: var(--skin-accent-strong);
    --blue-hover-light: var(--skin-accent-soft);
    --blue-bg: color-mix(in srgb, var(--skin-accent) 18%, transparent);
    --bodybg: var(--skin-bg-solid);
    --white: var(--skin-surface);
    --white-grey: var(--skin-surface);
    --grey: var(--skin-surface-alt);
    --grey-bg: var(--skin-surface-alt);
    --light-blue: var(--skin-surface-alt);
    --input-bg: var(--skin-surface-alt);
    --border-grey: var(--skin-border);
    --black: var(--skin-ink);
    --dark-grey: var(--skin-muted);
    --text-block-bg-white: var(--skin-surface);
    --text-block-bg-blue: color-mix(in srgb, var(--skin-accent) 15%, var(--skin-surface));
    --text-block-bg-orange: color-mix(in srgb, #f3993f 17%, var(--skin-surface));
    --text-block-bg-purple: color-mix(in srgb, #a878d1 17%, var(--skin-surface));
    --text-block-bg-red: color-mix(in srgb, #d85762 14%, var(--skin-surface));
    color: var(--skin-ink);
    background: var(--skin-page-bg) !important;
    background-attachment: fixed !important;
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
),
:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) *:not(.material-icons):not(.material-icons-outlined):not(.material-icons-round):not(.material-icons-sharp):not(.material-icons-two-tone):not(.ql-syntax):not(.ql-syntax *) {
    font-family: var(--skin-font-body);
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--skin-pattern-opacity, 0.32);
    background-image: var(--skin-pattern);
    background-size: var(--skin-pattern-size, 42px 42px);
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) h1,
:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) h2,
:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) h3 {
    font-family: var(--skin-font-heading) !important;
    letter-spacing: var(--skin-heading-spacing, 0.02em);
    text-transform: var(--skin-heading-transform, none);
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) main,
:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) #content-wrapper,
:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .main-container {
    background: transparent !important;
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .main-container-header {
    position: relative;
    z-index: 4;
    min-height: var(--skin-nav-height, 92px);
    background: var(--skin-nav-bg) !important;
    border-bottom: var(--skin-nav-border, 3px solid var(--skin-accent));
    box-shadow: var(--skin-nav-shadow, 0 8px 28px rgba(0, 0, 0, 0.14));
    clip-path: var(--skin-nav-shape, none);
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .user-header-wrapper {
    position: relative;
    min-height: var(--skin-hero-height, 245px);
    overflow: hidden;
    background: var(--skin-hero-bg) !important;
    border-bottom: var(--skin-hero-border, 6px solid var(--skin-accent));
    box-shadow: var(--skin-hero-shadow, inset 0 -18px 34px rgba(0, 0, 0, 0.16));
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .user-header-wrapper::after {
    content: var(--skin-label);
    position: absolute;
    right: 4vw;
    bottom: 18px;
    padding: 6px 13px;
    border: 1px solid color-mix(in srgb, var(--skin-accent) 75%, white);
    border-radius: var(--skin-label-radius, 999px);
    color: var(--skin-hero-ink);
    background: color-mix(in srgb, var(--skin-bg-solid) 68%, transparent);
    font-family: var(--skin-font-heading) !important;
    font-size: 0.78rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .header-user-img,
:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) #profile-picture {
    border: 5px solid var(--skin-accent) !important;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--skin-accent-2) 75%, transparent), 0 15px 32px rgba(0, 0, 0, 0.28) !important;
    transform: var(--skin-avatar-transform, none);
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .user-info,
:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .user-info * {
    color: var(--skin-hero-ink) !important;
    text-shadow: var(--skin-text-shadow, 0 2px 8px rgba(0, 0, 0, 0.45));
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .chapter-page-content {
    padding-top: var(--skin-content-offset, 28px);
    background: transparent !important;
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .content-parent,
:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .chapter-side-bar,
:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .chapter-button-collection,
:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .group-tile,
:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .course-tile,
:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .tileOuterBox {
    color: var(--skin-ink) !important;
    background: var(--skin-surface) !important;
    border: 2px solid var(--skin-border) !important;
    border-radius: var(--skin-radius, 18px) !important;
    box-shadow: var(--skin-card-shadow, 0 14px 34px rgba(0, 0, 0, 0.16)) !important;
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .content-parent::before {
    background: var(--skin-accent) !important;
    border-radius: var(--skin-radius, 18px) 0 0 var(--skin-radius, 18px) !important;
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .main-button,
:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .quiz-button,
:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .color-main,
:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .btn-floating:not(.white) {
    color: var(--skin-button-ink, #fff) !important;
    background: var(--skin-button-bg, var(--skin-accent)) !important;
    border-radius: var(--skin-button-radius, 12px) !important;
    box-shadow: 0 7px 18px color-mix(in srgb, var(--skin-accent) 34%, transparent) !important;
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) #levelBar {
    background: var(--skin-surface) !important;
    border: 2px solid var(--skin-border) !important;
    border-radius: var(--skin-progress-radius, 16px) !important;
    box-shadow: var(--skin-card-shadow) !important;
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) #myXPbar {
    background: linear-gradient(90deg, var(--skin-accent), var(--skin-accent-2)) !important;
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .global-settings-dialog select,
:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .dialog-content {
    color: var(--skin-ink) !important;
    background: var(--skin-surface) !important;
    border: 2px solid var(--skin-border);
    border-radius: var(--skin-radius, 18px) !important;
}

body.skin-medical {
    --skin-label: "MEDICAL LEARNING UNIT";
    --skin-font-heading: "Archivo Black", sans-serif;
    --skin-font-body: "Rajdhani", Arial, sans-serif;
    --skin-bg-solid: #e8f7fa;
    --skin-surface: #fafdff;
    --skin-surface-alt: #e7f4f7;
    --skin-ink: #123648;
    --skin-muted: #557582;
    --skin-accent: #08a9c0;
    --skin-accent-strong: #08758f;
    --skin-accent-soft: #54cede;
    --skin-accent-2: #ff796d;
    --skin-border: #9bd8df;
    --skin-page-bg: linear-gradient(135deg, #f8fdff, #dff5f8 54%, #ffe9e4);
    --skin-pattern: linear-gradient(90deg, transparent 46%, rgba(8,169,192,.13) 47% 53%, transparent 54%), linear-gradient(transparent 46%, rgba(8,169,192,.1) 47% 53%, transparent 54%);
    --skin-nav-bg: linear-gradient(90deg, #ffffff, #dff7fa 66%, #ffd9d2);
    --skin-hero-bg: radial-gradient(circle at 50% 20%, rgba(255,255,255,.9), transparent 17%), linear-gradient(120deg, #057e98, #0eb9ca 52%, #ff8d7c);
    --skin-hero-ink: #fff;
    --skin-radius: 24px;
    --skin-button-radius: 999px;
    --skin-avatar-transform: translateY(4px) scale(1.03);
}

body.skin-schlappen {
    --skin-label: "MOVE · JUMP · SOLVE";
    --skin-font-heading: "Bangers", "Permanent Marker", sans-serif;
    --skin-font-body: "Permanent Marker", "Trebuchet MS", sans-serif;
    --skin-heading-spacing: .045em;
    --skin-bg-solid: #faf9f2;
    --skin-surface: #fffef8;
    --skin-surface-alt: #fff0de;
    --skin-ink: #151719;
    --skin-muted: #565c61;
    --skin-accent: #08afba;
    --skin-accent-strong: #057d88;
    --skin-accent-soft: #45d9df;
    --skin-accent-2: #ff3f92;
    --skin-border: #16191b;
    --skin-page-bg: linear-gradient(118deg, #fff 0 48%, #fff3e6 48% 76%, #e7fbfc 76%);
    --skin-pattern: repeating-linear-gradient(135deg, transparent 0 34px, rgba(255,92,22,.12) 34px 39px, transparent 39px 68px), radial-gradient(circle, #ff3f92 0 3px, transparent 4px);
    --skin-pattern-size: 100% 100%, 72px 72px;
    --skin-nav-bg: linear-gradient(100deg, #fff, #fff 42%, #16b8c4 42% 61%, #ff5e14 61% 78%, #ff3f92 78%);
    --skin-nav-shape: polygon(0 0,100% 0,100% 82%,72% 100%,42% 88%,0 100%);
    --skin-hero-bg: repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 20px, transparent 20px 42px), linear-gradient(105deg, #0b1013 0 26%, #08aeb9 26% 53%, #ff5e14 53% 76%, #ff3f92 76%);
    --skin-hero-ink: #fff;
    --skin-radius: 8px 24px 10px 28px;
    --skin-button-radius: 6px 18px;
    --skin-label-radius: 4px;
    --skin-avatar-transform: rotate(-3deg) translateY(-6px);
}

body.skin-survival {
    --skin-label: "WILDERNESS FIELD GUIDE";
    --skin-font-heading: "Cabin Sketch", serif;
    --skin-font-body: "Rajdhani", Arial, sans-serif;
    --skin-bg-solid: #d8c99e;
    --skin-surface: #f2e7c8;
    --skin-surface-alt: #ded0a7;
    --skin-ink: #24381d;
    --skin-muted: #58644a;
    --skin-accent: #466526;
    --skin-accent-strong: #294019;
    --skin-accent-soft: #78954b;
    --skin-accent-2: #d1812c;
    --skin-border: #7b6035;
    --skin-page-bg: radial-gradient(circle at 16% 10%, rgba(255,244,196,.72), transparent 29%), linear-gradient(145deg, #cdbb87, #efe2ba 46%, #98a878);
    --skin-pattern: repeating-radial-gradient(ellipse at 20% 20%, transparent 0 18px, rgba(54,77,35,.12) 19px 21px, transparent 22px 38px);
    --skin-nav-bg: linear-gradient(90deg, #24361c, #536c31 48%, #92713b);
    --skin-hero-bg: radial-gradient(circle at 76% 55%, rgba(234,157,54,.6), transparent 12%), linear-gradient(110deg, #132314, #344d27 44%, #74552d 76%, #202b17);
    --skin-hero-ink: #fff6d8;
    --skin-radius: 6px 22px 8px 18px;
    --skin-button-radius: 4px;
    --skin-avatar-transform: translateX(18px) scale(.98);
}

body.skin-agent {
    --skin-label: "CLASSIFIED · LEVEL 00";
    --skin-font-heading: "Bebas Neue", sans-serif;
    --skin-font-body: "IBM Plex Mono", "Courier New", monospace;
    --skin-heading-transform: uppercase;
    --skin-heading-spacing: .09em;
    --skin-bg-solid: #0c0c0d;
    --skin-surface: #171719;
    --skin-surface-alt: #222226;
    --skin-ink: #f1eadc;
    --skin-muted: #aaa49a;
    --skin-accent: #c8a34b;
    --skin-accent-strong: #896817;
    --skin-accent-soft: #e4c66d;
    --skin-accent-2: #c92e35;
    --skin-border: #6d5c32;
    --skin-page-bg: radial-gradient(circle at 75% 14%, rgba(191,29,36,.16), transparent 24%), linear-gradient(145deg, #070708, #171718 55%, #090909);
    --skin-pattern: linear-gradient(115deg, transparent 0 47%, rgba(201,46,53,.13) 48% 49%, transparent 50%);
    --skin-pattern-size: 98px 98px;
    --skin-nav-bg: linear-gradient(90deg, #09090a 0 62%, #312a19 62% 84%, #7e171c 84%);
    --skin-hero-bg: linear-gradient(90deg, rgba(0,0,0,.9), transparent 35%), radial-gradient(circle at 78% 35%, rgba(190,33,40,.35), transparent 16%), linear-gradient(120deg, #050506, #171719 62%, #3f090c);
    --skin-hero-ink: #f7e9c7;
    --skin-radius: 2px;
    --skin-button-radius: 2px;
    --skin-label-radius: 0;
    --skin-avatar-transform: none;
    --skin-card-shadow: 0 16px 36px rgba(0,0,0,.48);
}

body.skin-time {
    --skin-label: "TEMPORAL LAB · 10:04";
    --skin-font-heading: "Russo One", sans-serif;
    --skin-font-body: "Rajdhani", sans-serif;
    --skin-heading-transform: uppercase;
    --skin-bg-solid: #171126;
    --skin-surface: #251d36;
    --skin-surface-alt: #312641;
    --skin-ink: #f5eefb;
    --skin-muted: #c8b9d6;
    --skin-accent: #19c6e8;
    --skin-accent-strong: #087a9c;
    --skin-accent-soft: #5ce2f3;
    --skin-accent-2: #ee8b2d;
    --skin-border: #9b6e35;
    --skin-page-bg: radial-gradient(circle at 72% 18%, rgba(25,198,232,.22), transparent 24%), radial-gradient(circle at 18% 65%, rgba(141,66,198,.22), transparent 26%), linear-gradient(140deg, #120d20, #29203c);
    --skin-pattern: repeating-radial-gradient(circle at center, transparent 0 18px, rgba(238,139,45,.12) 19px 21px, transparent 22px 38px);
    --skin-nav-bg: linear-gradient(90deg, #251329, #5b2b61 45%, #0c718b 72%, #d2782d);
    --skin-hero-bg: radial-gradient(circle at 72% 50%, transparent 0 11%, rgba(22,204,234,.65) 12% 14%, transparent 15% 22%, rgba(238,139,45,.44) 23% 25%, transparent 26%), linear-gradient(115deg, #130e21, #4b275b 56%, #096f89);
    --skin-hero-ink: #fff5df;
    --skin-radius: 22px 5px 22px 5px;
    --skin-button-radius: 999px;
    --skin-avatar-transform: rotate(2deg) scale(1.04);
}

body.skin-lloyd {
    --skin-label: "ELEMENT · GREEN DRAGON";
    --skin-font-heading: "Russo One", sans-serif;
    --skin-font-body: "Rajdhani", sans-serif;
    --skin-heading-transform: uppercase;
    --skin-bg-solid: #08150b;
    --skin-surface: #142319;
    --skin-surface-alt: #1b3020;
    --skin-ink: #eef9e8;
    --skin-muted: #abc5a5;
    --skin-accent: #58c63d;
    --skin-accent-strong: #257c27;
    --skin-accent-soft: #8ae66f;
    --skin-accent-2: #d6b344;
    --skin-border: #537d42;
    --skin-page-bg: radial-gradient(circle at 50% -10%, rgba(88,198,61,.28), transparent 31%), linear-gradient(145deg, #061008, #102318 55%, #07120a);
    --skin-pattern: linear-gradient(30deg, transparent 47%, rgba(92,190,67,.14) 48% 52%, transparent 53%), linear-gradient(150deg, transparent 47%, rgba(214,179,68,.08) 48% 52%, transparent 53%);
    --skin-pattern-size: 56px 56px;
    --skin-nav-bg: linear-gradient(90deg, #071209, #1f7c29 47%, #70bf39 76%, #b89731);
    --skin-hero-bg: radial-gradient(circle at 80% 36%, rgba(113,255,83,.35), transparent 18%), linear-gradient(105deg, #061009, #175a24 58%, #8a7026);
    --skin-hero-ink: #f7ffe9;
    --skin-radius: 2px 24px 2px 24px;
    --skin-button-radius: 2px 16px;
    --skin-nav-shape: polygon(0 0,100% 0,100% 100%,68% 91%,35% 100%,0 90%);
    --skin-avatar-transform: translateY(-5px);
}

body.skin-indi {
    --skin-label: "ARCHAEOLOGY FIELD NOTES";
    --skin-font-heading: "Rye", serif;
    --skin-font-body: "Marcellus", serif;
    --skin-bg-solid: #e2c28f;
    --skin-surface: #f4dfbb;
    --skin-surface-alt: #e7c99b;
    --skin-ink: #44260f;
    --skin-muted: #735737;
    --skin-accent: #a65a18;
    --skin-accent-strong: #69350d;
    --skin-accent-soft: #d98a35;
    --skin-accent-2: #7a5221;
    --skin-border: #9b6c37;
    --skin-page-bg: radial-gradient(circle at 16% 18%, rgba(255,248,215,.68), transparent 25%), linear-gradient(145deg, #c5985f, #eed5aa 52%, #c8a06d);
    --skin-pattern: repeating-linear-gradient(8deg, transparent 0 29px, rgba(91,54,20,.08) 30px 31px), repeating-linear-gradient(98deg, transparent 0 47px, rgba(91,54,20,.07) 48px 49px);
    --skin-nav-bg: linear-gradient(90deg, #f6e8ca, #c8985e 66%, #6f441f);
    --skin-hero-bg: radial-gradient(circle at 75% 35%, rgba(255,184,63,.42), transparent 18%), linear-gradient(105deg, #463019, #9a6630 48%, #d7a65f 72%, #3f5a31);
    --skin-hero-ink: #fff2cf;
    --skin-radius: 4px 18px 4px 18px;
    --skin-button-radius: 5px;
    --skin-label-radius: 2px;
    --skin-avatar-transform: translateX(-24px) rotate(-1deg);
}

body.skin-smuggler {
    --skin-label: "OUTER-RIM LEARNING RUN";
    --skin-font-heading: "Russo One", sans-serif;
    --skin-font-body: "Rajdhani", sans-serif;
    --skin-heading-transform: uppercase;
    --skin-bg-solid: #071321;
    --skin-surface: #122337;
    --skin-surface-alt: #1b3045;
    --skin-ink: #f2f5f6;
    --skin-muted: #aec0cb;
    --skin-accent: #e77f32;
    --skin-accent-strong: #a94918;
    --skin-accent-soft: #f2ad63;
    --skin-accent-2: #18a9bd;
    --skin-border: #45647a;
    --skin-page-bg: radial-gradient(circle at 72% 18%, rgba(35,127,196,.26), transparent 22%), linear-gradient(140deg, #050d16, #10253a 55%, #241309);
    --skin-pattern: radial-gradient(circle, rgba(255,255,255,.7) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(231,127,50,.55) 0 1px, transparent 1.5px);
    --skin-pattern-position: 0 0, 30px 24px;
    --skin-pattern-size: 77px 69px, 113px 97px;
    --skin-nav-bg: linear-gradient(90deg, #0b1b2b, #173c59 55%, #ac4d1c 55% 73%, #e88a3d 73%);
    --skin-hero-bg: radial-gradient(circle at 78% 28%, rgba(34,174,201,.34), transparent 16%), linear-gradient(105deg, #060c13, #17334d 58%, #7d3518);
    --skin-hero-ink: #fff1dd;
    --skin-radius: 18px 3px 18px 3px;
    --skin-button-radius: 14px 3px;
    --skin-avatar-transform: translateX(22px) rotate(1deg);
}

body.skin-tech {
    --skin-label: "BUILD · TEST · LEARN";
    --skin-font-heading: "Oxanium", sans-serif;
    --skin-font-body: "IBM Plex Mono", monospace;
    --skin-bg-solid: #eef4ff;
    --skin-surface: #fbfdff;
    --skin-surface-alt: #e7effc;
    --skin-ink: #14233d;
    --skin-muted: #5f718c;
    --skin-accent: #1769e0;
    --skin-accent-strong: #0a45a7;
    --skin-accent-soft: #5a9cff;
    --skin-accent-2: #753ee6;
    --skin-border: #a7bde1;
    --skin-page-bg: linear-gradient(135deg, #f9fbff, #e7f1ff 48%, #eee8ff);
    --skin-pattern: linear-gradient(rgba(23,105,224,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(23,105,224,.1) 1px, transparent 1px), radial-gradient(circle, rgba(117,62,230,.35) 0 2px, transparent 3px);
    --skin-pattern-size: 28px 28px, 28px 28px, 112px 112px;
    --skin-nav-bg: linear-gradient(90deg, #ffffff, #dceaff 58%, #d9caff);
    --skin-hero-bg: linear-gradient(90deg, rgba(3,21,52,.9), transparent 28%), radial-gradient(circle at 78% 35%, rgba(87,151,255,.5), transparent 19%), linear-gradient(110deg, #071830, #1453a6 54%, #733ed8);
    --skin-hero-ink: #fff;
    --skin-radius: 16px;
    --skin-button-radius: 8px;
    --skin-card-shadow: 0 10px 0 rgba(23,105,224,.11), 0 22px 42px rgba(35,72,130,.16);
    --skin-avatar-transform: scale(1.04);
}

body.skin-ninja {
    --skin-label: "GAMER MODE";
    --skin-font-heading: "Bebas Neue", sans-serif;
    --skin-font-body: "Rajdhani", sans-serif;
    --skin-heading-transform: uppercase;
    --skin-heading-spacing: .08em;
    --skin-bg-solid: #080811;
    --skin-surface: #141421;
    --skin-surface-alt: #1d1c2c;
    --skin-ink: #f0eefb;
    --skin-muted: #aba5bf;
    --skin-accent: #7554d8;
    --skin-accent-strong: #41268f;
    --skin-accent-soft: #a286f0;
    --skin-accent-2: #c5c7de;
    --skin-border: #4b426c;
    --skin-page-bg: radial-gradient(circle at 74% 8%, rgba(117,84,216,.2), transparent 24%), linear-gradient(150deg, #05050b, #131222 56%, #080711);
    --skin-pattern: linear-gradient(135deg, transparent 47%, rgba(154,132,229,.13) 48% 52%, transparent 53%);
    --skin-pattern-size: 42px 42px;
    --skin-nav-bg: linear-gradient(90deg, #080812, #221a42 55%, #59409f);
    --skin-hero-bg: radial-gradient(circle at 80% 20%, #dadcef 0 3%, rgba(218,220,239,.18) 4% 12%, transparent 13%), linear-gradient(110deg, #030307, #17132a 62%, #3f2d79);
    --skin-hero-ink: #f7f5ff;
    --skin-radius: 0 20px 0 20px;
    --skin-button-radius: 0 14px;
    --skin-nav-shape: polygon(0 0,100% 0,100% 100%,57% 90%,0 100%);
    --skin-avatar-transform: translateX(-14px) translateY(-4px);
}

body.skin-force {
    --skin-label: "LIVING FORCE ARCHIVE";
    --skin-font-heading: "Marcellus", serif;
    --skin-font-body: "Rajdhani", sans-serif;
    --skin-bg-solid: #dfe3c3;
    --skin-surface: #eff0dc;
    --skin-surface-alt: #d8ddbd;
    --skin-ink: #26341f;
    --skin-muted: #5c6a52;
    --skin-accent: #71963f;
    --skin-accent-strong: #3f6125;
    --skin-accent-soft: #a2bd72;
    --skin-accent-2: #d4b867;
    --skin-border: #87966a;
    --skin-page-bg: radial-gradient(circle at 50% 12%, rgba(255,255,223,.7), transparent 27%), linear-gradient(145deg, #becb9c, #e6e8cd 52%, #9eae82);
    --skin-pattern: radial-gradient(ellipse, transparent 0 20px, rgba(62,93,39,.1) 21px 23px, transparent 24px 42px);
    --skin-nav-bg: linear-gradient(90deg, #eef0d8, #b9c890 60%, #708447);
    --skin-hero-bg: radial-gradient(circle at 72% 38%, rgba(199,241,126,.4), transparent 17%), linear-gradient(110deg, #263720, #557243 52%, #9aa775);
    --skin-hero-ink: #fcffe9;
    --skin-radius: 28px 8px 28px 8px;
    --skin-button-radius: 999px;
    --skin-avatar-transform: translateY(8px) scale(.96);
}

body.skin-galaxy {
    --skin-label: "COSMIC LEARNING CREW";
    --skin-font-heading: "Oxanium", sans-serif;
    --skin-font-body: "Rajdhani", sans-serif;
    --skin-heading-transform: uppercase;
    --skin-bg-solid: #10091e;
    --skin-surface: #221538;
    --skin-surface-alt: #302046;
    --skin-ink: #fff5fb;
    --skin-muted: #d0b9dc;
    --skin-accent: #ff4eb8;
    --skin-accent-strong: #b91f76;
    --skin-accent-soft: #ff8fd3;
    --skin-accent-2: #32c8ef;
    --skin-border: #724b99;
    --skin-page-bg: radial-gradient(circle at 80% 13%, rgba(50,200,239,.2), transparent 23%), radial-gradient(circle at 18% 65%, rgba(255,78,184,.18), transparent 24%), linear-gradient(145deg, #090511, #1c0d31 58%, #090611);
    --skin-pattern: radial-gradient(circle, rgba(255,255,255,.82) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(255,177,56,.75) 0 1px, transparent 1.5px);
    --skin-pattern-size: 68px 61px, 103px 91px;
    --skin-nav-bg: linear-gradient(90deg, #130820, #7a2367 44%, #ef439e 68%, #1ca9cf);
    --skin-hero-bg: radial-gradient(circle at 78% 34%, rgba(50,200,239,.45), transparent 18%), radial-gradient(circle at 24% 80%, rgba(255,78,184,.38), transparent 17%), linear-gradient(115deg, #08040d, #381354 58%, #074f70);
    --skin-hero-ink: #fff;
    --skin-radius: 30px;
    --skin-button-radius: 999px;
    --skin-avatar-transform: translateY(-8px) scale(1.05);
}

body.skin-aviation {
    --skin-label: "FLIGHT ACADEMY · READY";
    --skin-font-heading: "Bebas Neue", sans-serif;
    --skin-font-body: "Rajdhani", sans-serif;
    --skin-heading-transform: uppercase;
    --skin-heading-spacing: .07em;
    --skin-bg-solid: #dceafa;
    --skin-surface: #f7fbff;
    --skin-surface-alt: #dce8f5;
    --skin-ink: #102a48;
    --skin-muted: #57708a;
    --skin-accent: #1262ad;
    --skin-accent-strong: #093d78;
    --skin-accent-soft: #5599d8;
    --skin-accent-2: #ee7d2d;
    --skin-border: #8baeca;
    --skin-page-bg: linear-gradient(180deg, #f8fcff, #d8edff 48%, #f6dfc8);
    --skin-pattern: repeating-linear-gradient(165deg, transparent 0 54px, rgba(18,98,173,.1) 55px 57px, transparent 58px 110px);
    --skin-nav-bg: linear-gradient(90deg, #fff, #d7eaff 50%, #105997 50% 77%, #eb792d 77%);
    --skin-hero-bg: linear-gradient(165deg, transparent 0 62%, rgba(255,255,255,.5) 63% 65%, transparent 66%), linear-gradient(110deg, #0c3157, #1677bf 58%, #f29b54);
    --skin-hero-ink: #fff;
    --skin-radius: 18px 18px 4px 4px;
    --skin-button-radius: 4px 16px;
    --skin-nav-shape: polygon(0 0,100% 0,100% 100%,73% 90%,44% 100%,0 94%);
    --skin-avatar-transform: translateX(26px);
}

body.skin-magic {
    --skin-label: "ACADEMY OF MAGICAL MATH";
    --skin-font-heading: "Cinzel Decorative", serif;
    --skin-font-body: "Marcellus", serif;
    --skin-bg-solid: #24152a;
    --skin-surface: #34213c;
    --skin-surface-alt: #432a4c;
    --skin-ink: #fff2d2;
    --skin-muted: #d7c4cf;
    --skin-accent: #d4a53a;
    --skin-accent-strong: #946b19;
    --skin-accent-soft: #efd071;
    --skin-accent-2: #8c52c5;
    --skin-border: #7e6040;
    --skin-page-bg: radial-gradient(circle at 70% 12%, rgba(140,82,197,.25), transparent 24%), linear-gradient(145deg, #160d1c, #32183a 55%, #1a1021);
    --skin-pattern: radial-gradient(circle, rgba(255,222,122,.72) 0 1px, transparent 1.5px), conic-gradient(from 45deg, transparent, rgba(139,80,194,.1), transparent 24%);
    --skin-pattern-size: 79px 71px, 120px 120px;
    --skin-nav-bg: linear-gradient(90deg, #211126, #542760 52%, #8d55bc 74%, #c99a31);
    --skin-hero-bg: radial-gradient(circle at 76% 32%, rgba(217,175,67,.35), transparent 17%), linear-gradient(110deg, #150c1b, #4c2358 58%, #7a4aa6);
    --skin-hero-ink: #fff2cc;
    --skin-radius: 26px 4px 26px 4px;
    --skin-button-radius: 999px;
    --skin-avatar-transform: translateY(-4px) rotate(-1deg);
}

body.skin-headmaster {
    --skin-label: "CELESTIAL MASTER ARCHIVE";
    --skin-font-heading: "Uncial Antiqua", serif;
    --skin-font-body: "Marcellus", serif;
    --skin-bg-solid: #0f1734;
    --skin-surface: #1b2648;
    --skin-surface-alt: #26325a;
    --skin-ink: #f7edcf;
    --skin-muted: #c8c1bd;
    --skin-accent: #9e72d4;
    --skin-accent-strong: #624194;
    --skin-accent-soft: #c1a0e8;
    --skin-accent-2: #d8ad4b;
    --skin-border: #69558b;
    --skin-page-bg: radial-gradient(circle at 50% 4%, rgba(92,132,218,.2), transparent 27%), linear-gradient(145deg, #080d21, #19234a 56%, #180d29);
    --skin-pattern: radial-gradient(circle, rgba(255,244,194,.72) 0 1px, transparent 1.5px), repeating-radial-gradient(circle at center, transparent 0 34px, rgba(157,112,210,.1) 35px 36px, transparent 37px 70px);
    --skin-pattern-size: 83px 79px, 180px 180px;
    --skin-nav-bg: linear-gradient(90deg, #111a39, #293970 54%, #654396 76%, #b78835);
    --skin-hero-bg: radial-gradient(circle at 78% 26%, rgba(186,152,238,.4), transparent 17%), linear-gradient(110deg, #080d21, #26376b 58%, #5a3782);
    --skin-hero-ink: #fff1cd;
    --skin-radius: 8px 32px 8px 32px;
    --skin-button-radius: 4px 20px;
    --skin-avatar-transform: translateX(-18px) scale(1.03);
}

body.skin-cyber {
    --skin-label: "SECURE LEARNING NETWORK";
    --skin-font-heading: "VT323", monospace;
    --skin-font-body: "IBM Plex Mono", monospace;
    --skin-heading-transform: uppercase;
    --skin-heading-spacing: .06em;
    --skin-bg-solid: #020b0c;
    --skin-surface: #071719;
    --skin-surface-alt: #0d2325;
    --skin-ink: #dfffee;
    --skin-muted: #7fb7a0;
    --skin-accent: #25e980;
    --skin-accent-strong: #0a9a4b;
    --skin-accent-soft: #61f3a2;
    --skin-accent-2: #18d7e8;
    --skin-border: #1d6c53;
    --skin-page-bg: radial-gradient(circle at 75% 8%, rgba(26,215,232,.14), transparent 22%), linear-gradient(145deg, #010607, #061619 58%, #04090d);
    --skin-pattern: linear-gradient(rgba(37,233,128,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(37,233,128,.09) 1px, transparent 1px), repeating-linear-gradient(90deg, transparent 0 36px, rgba(24,215,232,.06) 37px 39px);
    --skin-pattern-size: 24px 24px, 24px 24px, 100% 100%;
    --skin-nav-bg: linear-gradient(90deg, #020a0b, #063225 48%, #0d8060 70%, #12536b);
    --skin-hero-bg: radial-gradient(circle at 78% 34%, rgba(24,215,232,.28), transparent 18%), linear-gradient(110deg, #010607, #073422 56%, #0a4e61);
    --skin-hero-ink: #cffff0;
    --skin-radius: 0;
    --skin-button-radius: 0;
    --skin-label-radius: 0;
    --skin-card-shadow: 0 0 0 1px rgba(37,233,128,.28), 0 0 24px rgba(37,233,128,.12);
    --skin-avatar-transform: translateX(12px) translateY(-5px);
}

/* Kleine, bewusst unterschiedliche Layoutverschiebungen pro gecraftetem Skin. */
body.skin-schlappen .chapter-top h1 { transform: rotate(-0.7deg); margin-left: 1.5vw; }
body.skin-survival .chapter-side-bar { transform: translateY(12px); }
body.skin-agent .chapter-button-collection { transform: translateY(-8px); }
body.skin-time .chapter-top h1 { transform: skewX(-5deg); }
body.skin-lloyd .chapter-content { transform: translateY(5px); }
body.skin-indi .chapter-side-bar { transform: translateY(16px) rotate(.25deg); }
body.skin-smuggler .chapter-button-collection { transform: translateX(-10px); }
body.skin-tech .chapter-top { padding-left: 2vw; padding-right: 2vw; }
body.skin-ninja .chapter-side-bar { transform: translateY(8px); }
body.skin-force .chapter-content { max-width: 1420px; margin-inline: auto; }
body.skin-galaxy .chapter-button-collection { transform: translateY(-5px) rotate(.3deg); }
body.skin-aviation .chapter-top h1 { transform: skewX(-7deg); }
body.skin-magic .chapter-side-bar { transform: translateY(14px); }
body.skin-headmaster .chapter-content { max-width: 1480px; margin-inline: auto; }
body.skin-cyber .chapter-top h1 { letter-spacing: .11em; }

@media (max-width: 800px) {
    :is(
        body.skin-medical,
        body.skin-schlappen,
        body.skin-survival,
        body.skin-agent,
        body.skin-time,
        body.skin-lloyd,
        body.skin-indi,
        body.skin-smuggler,
        body.skin-tech,
        body.skin-ninja,
        body.skin-force,
        body.skin-galaxy,
        body.skin-aviation,
        body.skin-magic,
        body.skin-headmaster,
        body.skin-cyber
    ) .user-header-wrapper::after {
        display: none;
    }

    :is(
        body.skin-medical,
        body.skin-schlappen,
        body.skin-survival,
        body.skin-agent,
        body.skin-time,
        body.skin-lloyd,
        body.skin-indi,
        body.skin-smuggler,
        body.skin-tech,
        body.skin-ninja,
        body.skin-force,
        body.skin-galaxy,
        body.skin-aviation,
        body.skin-magic,
        body.skin-headmaster,
        body.skin-cyber
    ) .header-user-img,
    :is(
        body.skin-medical,
        body.skin-schlappen,
        body.skin-survival,
        body.skin-agent,
        body.skin-time,
        body.skin-lloyd,
        body.skin-indi,
        body.skin-smuggler,
        body.skin-tech,
        body.skin-ninja,
        body.skin-force,
        body.skin-galaxy,
        body.skin-aviation,
        body.skin-magic,
        body.skin-headmaster,
        body.skin-cyber
    ) #profile-picture,
    :is(
        body.skin-medical,
        body.skin-schlappen,
        body.skin-survival,
        body.skin-agent,
        body.skin-time,
        body.skin-lloyd,
        body.skin-indi,
        body.skin-smuggler,
        body.skin-tech,
        body.skin-ninja,
        body.skin-force,
        body.skin-galaxy,
        body.skin-aviation,
        body.skin-magic,
        body.skin-headmaster,
        body.skin-cyber
    ) .chapter-side-bar,
    :is(
        body.skin-medical,
        body.skin-schlappen,
        body.skin-survival,
        body.skin-agent,
        body.skin-time,
        body.skin-lloyd,
        body.skin-indi,
        body.skin-smuggler,
        body.skin-tech,
        body.skin-ninja,
        body.skin-force,
        body.skin-galaxy,
        body.skin-aviation,
        body.skin-magic,
        body.skin-headmaster,
        body.skin-cyber
    ) .chapter-button-collection {
        transform: none !important;
    }
}

/* ==================CRAFTED SKINS V2: INDIVIDUAL HEROES + LAYOUTS================== */
/*
 * Die gecrafteten Skins verwenden das alte user-banner.svg bewusst nicht mehr.
 * Navigation, Motiv und Profil erhalten getrennte Layoutbereiche, damit sie sich
 * auch bei abweichenden Headerhöhen nicht gegenseitig überdecken.
 */
body.skin-medical { --skin-hero-image: url('/assets/skin-banners/medical.png'); }
body.skin-schlappen { --skin-hero-image: url('/assets/skin-banners/schlappen-v2.png'); }
body.skin-survival { --skin-hero-image: url('/assets/skin-banners/survival.png'); }
body.skin-agent { --skin-hero-image: url('/assets/skin-banners/agent.png'); }
body.skin-time { --skin-hero-image: url('/assets/skin-banners/time.png'); }
body.skin-lloyd { --skin-hero-image: url('/assets/skin-banners/lloyd.png'); }
body.skin-indi { --skin-hero-image: url('/assets/skin-banners/indi.png'); }
body.skin-smuggler { --skin-hero-image: url('/assets/skin-banners/smuggler.png'); }
body.skin-tech { --skin-hero-image: url('/assets/skin-banners/tech.png'); }
body.skin-ninja { --skin-hero-image: url('/assets/skin-banners/ninja.png'); }
body.skin-force { --skin-hero-image: url('/assets/skin-banners/force.png'); }
body.skin-galaxy { --skin-hero-image: url('/assets/skin-banners/galaxy.png'); }
body.skin-aviation { --skin-hero-image: url('/assets/skin-banners/aviation.png'); }
body.skin-magic { --skin-hero-image: url('/assets/skin-banners/magic.png'); }
body.skin-headmaster { --skin-hero-image: url('/assets/skin-banners/headmaster.png'); }
body.skin-cyber { --skin-hero-image: url('/assets/skin-banners/cyber.png'); }

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) {
    --skin-header-height: 76px;
    --skin-header-width: 100%;
    --skin-header-margin: 0;
    --skin-header-padding: 0 clamp(24px, 5vw, 86px);
    --skin-header-radius: 0;
    --skin-hero-height: 280px;
    --skin-hero-position: center;
    --skin-profile-size: 154px;
    --skin-profile-top: 50%;
    --skin-profile-left: 50%;
    --skin-profile-right: auto;
    --skin-profile-translate: translate(-50%, -50%);
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .main-container-header {
    position: relative;
    inset: auto;
    top: auto;
    width: var(--skin-header-width);
    height: var(--skin-header-height);
    min-height: var(--skin-header-height);
    margin: var(--skin-header-margin);
    padding: var(--skin-header-padding);
    box-sizing: border-box;
    gap: clamp(8px, 1.5vw, 24px);
    border-radius: var(--skin-header-radius);
    clip-path: none;
    z-index: 30;
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .main-container-header .home {
    margin-right: auto;
    flex: 0 0 auto;
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .main-container-header .header-button,
:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .main-container-header .global-settings-button {
    margin: 0;
    flex: 0 0 auto;
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .user-header-wrapper {
    position: relative;
    display: block;
    width: 100%;
    height: var(--skin-hero-height);
    min-height: var(--skin-hero-height);
    margin: 0;
    overflow: hidden;
    isolation: isolate;
    background-image: linear-gradient(var(--skin-hero-overlay, rgba(0,0,0,.08)), var(--skin-hero-overlay, rgba(0,0,0,.08))), var(--skin-hero-image) !important;
    background-size: cover !important;
    background-position: var(--skin-hero-position) !important;
    background-repeat: no-repeat !important;
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .header-info-background {
    display: none !important;
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .header-user-info {
    position: absolute;
    top: var(--skin-profile-top);
    left: var(--skin-profile-left);
    right: var(--skin-profile-right);
    bottom: auto;
    width: auto;
    transform: var(--skin-profile-translate);
    align-items: center;
    z-index: 5;
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) #profilePicture,
:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .header-user-img {
    width: var(--skin-profile-size);
    height: var(--skin-profile-size);
    min-width: var(--skin-profile-size);
    min-height: var(--skin-profile-size);
    margin: 0;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 50%;
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .head-container {
    margin-top: 8px;
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) #profile-picture {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    transform: none !important;
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .main-container-header .header-button,
:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .main-container-header .header-button > div,
:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .main-container-header .material-icons,
:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .main-container-header .iiigel-icon-text {
    color: var(--skin-nav-ink, var(--skin-ink)) !important;
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .user-header-wrapper::after {
    right: clamp(18px, 3vw, 54px);
    bottom: 16px;
    z-index: 4;
}

/* 01 Medizin: kompakte Kliniknavigation, horizontale Identitätskarte links. */
body.skin-medical {
    --skin-nav-ink: #083845;
    --skin-header-height: 70px;
    --skin-hero-height: 236px;
    --skin-profile-size: 122px;
    --skin-profile-top: 50%;
    --skin-profile-left: clamp(28px, 6vw, 100px);
    --skin-profile-translate: translateY(-50%);
    --skin-hero-position: center 48%;
    --skin-hero-overlay: rgba(4, 66, 78, .06);
}
body.skin-medical .main-container-header { border-bottom-width: 5px; }
body.skin-medical .header-user-info { flex-direction: row; }
body.skin-medical .header-user-info .head-container { margin: 0 0 0 18px; }
body.skin-medical .header-user-info .user-role { margin-left: 14px; }
body.skin-medical .header-user-info .user-info {
    padding: 8px 12px;
    color: #083845 !important;
    background: rgba(255,255,255,.88);
    border-radius: 12px;
    text-shadow: none;
    box-shadow: 0 8px 24px rgba(4,70,82,.18);
}
body.skin-medical .chapter-page-content { max-width: 1460px; margin-inline: auto; }

/* 02 Schlappen: zuerst das Street-Art-Panorama, Navigation als breite Rampe darunter. */
body.skin-schlappen {
    --skin-nav-ink: #111719;
    --skin-header-height: 84px;
    --skin-hero-height: 330px;
    --skin-profile-size: 168px;
    --skin-profile-top: 52%;
    --skin-profile-left: 50%;
    --skin-profile-translate: translate(-50%, -50%) rotate(-2deg);
    --skin-hero-position: center;
    --skin-hero-overlay: rgba(0,0,0,.04);
}
body.skin-schlappen main { display: flex; flex-direction: column; }
body.skin-schlappen main { position: relative; z-index: 1; }
body.skin-schlappen .user-header-wrapper { order: 1; border-bottom: 0; }
body.skin-schlappen .main-container-header {
    order: 2;
    clip-path: polygon(0 0, 31% 8%, 48% 0, 72% 10%, 100% 0, 100% 100%, 0 100%);
    padding-top: 10px;
}
body.skin-schlappen #content-wrapper { order: 3; }
body.skin-schlappen .user-header-wrapper::after { transform: rotate(2deg); }
body.skin-schlappen .chapter-page-content { padding-top: 38px; }
body.skin-schlappen .content-parent:nth-child(even) { transform: translateX(10px) rotate(.12deg); }
body.skin-schlappen .level-bar-wrapper {
    margin-top: 12px !important;
    z-index: 70 !important;
}
body.skin-schlappen :is(h1, h2, h3, h4, h5, h6, p, span, div, a, button, input, textarea, select, strong, b) {
    font-weight: 400 !important;
}
body.skin-schlappen::before {
    z-index: 0;
    opacity: .105;
    background-image:
        url('/assets/skin-banners/schlappen-send-it.svg'),
        url('/assets/skin-banners/schlappen-send-it.svg'),
        url('/assets/skin-banners/schlappen-life.svg'),
        url('/assets/skin-banners/schlappen-life.svg');
    background-size: 210px 540px, 145px 430px, 235px 650px, 165px 520px;
    background-position: 3% 70px, 69% 310px, 88% 180px, 20% 500px;
    background-repeat: repeat-y;
}

/* 03 Survival: hohe Expedition, schwebende Glasnavigation und Profil unten links. */
body.skin-survival {
    --skin-nav-ink: #fff6d8;
    --skin-hero-height: 390px;
    --skin-profile-size: 124px;
    --skin-hero-position: center 58%;
    --skin-hero-overlay: rgba(16, 35, 12, .18);
}
body.skin-survival main { position: relative; }
body.skin-survival .main-container-header {
    position: absolute;
    top: 22px;
    left: 4%;
    width: 92%;
    height: 72px;
    min-height: 72px;
    border: 1px solid rgba(255,245,211,.36);
    border-radius: 18px;
    background: rgba(24,47,21,.78) !important;
    backdrop-filter: blur(14px);
}
body.skin-survival .header-user-info {
    top: auto;
    left: 50%;
    right: auto;
    bottom: 22px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}
body.skin-survival .header-user-info #profilePicture {
    position: relative;
    margin: 0 0 9px;
    border-color: #c89b4a !important;
    box-shadow:
        0 0 0 5px rgba(35, 75, 27, .96),
        0 0 0 8px rgba(218, 183, 103, .72),
        0 14px 28px rgba(4, 13, 3, .5) !important;
}
body.skin-survival .header-user-info .head-container {
    margin: 0;
    justify-content: center;
}
body.skin-survival .header-user-info .user-role {
    margin-top: 4px;
}
body.skin-survival .header-user-info .user-info {
    margin: 0;
    color: #fff7d9 !important;
    text-shadow: 0 2px 4px #071205, 0 0 12px rgba(0, 0, 0, .85);
}
body.skin-survival .header-user-info .user-info-name {
    padding: 5px 14px 6px;
    border-bottom: 2px solid rgba(207, 161, 74, .82);
    border-radius: 5px;
    background: rgba(12, 29, 9, .72);
    font-size: 23px;
    line-height: 1.15;
    backdrop-filter: blur(5px);
}
body.skin-survival .header-user-info .user-info-role {
    padding: 3px 10px 4px;
    border-radius: 3px;
    background: rgba(12, 29, 9, .62);
    font-size: 16px;
    color: #eadcae !important;
    backdrop-filter: blur(5px);
}
body.skin-survival .chapter-top .course-context-label {
    margin-top: -300px !important;
    min-width: 260px;
    max-width: 410px;
    padding: 13px 24px 14px 28px;
    box-sizing: border-box;
    border: 2px solid rgba(204, 157, 76, .72);
    border-radius: 5px 18px 5px 18px;
    color: #f7e8bb !important;
    background:
        linear-gradient(100deg, rgba(69, 43, 20, .94), rgba(32, 44, 20, .9));
    box-shadow:
        inset 0 0 0 3px rgba(255, 231, 170, .08),
        0 12px 25px rgba(4, 14, 4, .38);
    text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
    clip-path: polygon(0 7px, 7px 7px, 7px 0, calc(100% - 9px) 0, calc(100% - 9px) 6px, 100% 6px, 100% calc(100% - 7px), calc(100% - 7px) calc(100% - 7px), calc(100% - 7px) 100%, 8px 100%, 8px calc(100% - 6px), 0 calc(100% - 6px));
    backdrop-filter: blur(5px);
}
body.skin-survival .chapter-top .course-context-label h2 {
    margin: 0 0 5px;
    color: #ffeab2 !important;
    font-size: 1.3rem !important;
    line-height: 1.1;
}
body.skin-survival .chapter-page-content { padding-top: 44px; }

@media (max-width: 900px) {
    body.skin-survival .chapter-top .course-context-label {
        position: static !important;
        width: 100%;
        max-width: none;
        margin: 0 0 12px !important;
    }
}

/* 04 Agent: horizontale Operationszentrale, Missionsakte links und Agenten-ID rechts. */
body.skin-agent {
    --skin-nav-ink: #f7e9c7;
    --skin-hero-height: 430px;
    --skin-profile-size: 132px;
    --skin-profile-top: 116px;
    --skin-profile-left: auto;
    --skin-profile-right: 6%;
    --skin-profile-translate: none;
    --skin-hero-position: center;
    --skin-hero-overlay: rgba(0,0,0,.12);
}
body.skin-agent main { position: relative; }
body.skin-agent .main-container-header {
    position: absolute;
    top: 22px;
    left: 50%;
    width: calc(100% - 96px);
    height: 70px;
    min-height: 70px;
    padding: 10px 22px;
    transform: translateX(-50%);
    flex-direction: row;
    align-items: center;
    border: 1px solid rgba(201, 164, 76, .66);
    border-radius: 2px;
    background:
        linear-gradient(90deg, rgba(5,5,6,.95), rgba(18,18,20,.9) 62%, rgba(48,38,17,.88)) !important;
    box-shadow:
        inset 0 -1px 0 rgba(226, 195, 111, .2),
        0 14px 34px rgba(0,0,0,.42);
    backdrop-filter: blur(12px);
}
body.skin-agent .main-container-header .home {
    width: auto;
    margin: 0 auto 0 0;
    justify-content: flex-start;
}
body.skin-agent .main-container-header .header-button,
body.skin-agent .main-container-header .global-settings-button {
    width: auto;
    min-width: 46px;
    min-height: 42px;
    margin: 0;
    padding: 0 13px;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 2px;
    background: rgba(255,255,255,.025);
}
body.skin-agent .main-container-header .header-button:hover,
body.skin-agent .main-container-header .global-settings-button:hover {
    border-color: rgba(210, 174, 87, .55);
    background: rgba(200, 163, 75, .1);
}
body.skin-agent .main-container-header .global-settings-button { height: 42px; }
body.skin-agent .header-user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}
body.skin-agent .header-user-info #profilePicture {
    margin: 0 0 12px;
    border-color: #c8a34b !important;
    box-shadow:
        0 0 0 5px #7e171c,
        0 0 0 9px rgba(210, 176, 92, .88),
        0 18px 34px rgba(0,0,0,.58) !important;
}
body.skin-agent .header-user-info .head-container {
    margin: 0;
}
body.skin-agent .header-user-info .user-role {
    margin-top: 5px;
}
body.skin-agent .header-user-info .user-info {
    margin: 0;
    padding: 6px 13px;
    border-left: 3px solid var(--skin-accent);
    color: #f7e9c7 !important;
    background: rgba(3,3,4,.82);
    text-shadow: 0 2px 7px #000;
    backdrop-filter: blur(7px);
}
body.skin-agent .header-user-info .user-info-name {
    font-size: 24px;
    letter-spacing: .02em;
}
body.skin-agent .header-user-info .user-info-role {
    padding-block: 4px;
    color: #d2bd86 !important;
    font-size: 15px;
}
body.skin-agent .user-header-wrapper::after {
    left: 50%;
    right: auto;
    bottom: 18px;
    transform: translateX(-50%);
    border-color: rgba(205, 166, 75, .72);
    color: #e5c975;
    background: rgba(4,4,5,.82);
    letter-spacing: .17em;
}
body.skin-agent .chapter-top .course-context-label {
    margin-top: -330px !important;
    min-width: 300px;
    max-width: 430px;
    padding: 15px 20px 14px 24px;
    box-sizing: border-box;
    border: 1px solid rgba(203, 166, 79, .72);
    border-left: 6px solid #a32027;
    color: #d6c69d !important;
    background:
        linear-gradient(100deg, rgba(4,4,5,.94), rgba(20,20,22,.88));
    box-shadow: 12px 12px 0 rgba(0,0,0,.18), 0 18px 38px rgba(0,0,0,.38);
    text-shadow: 0 2px 7px #000;
    backdrop-filter: blur(8px);
}
body.skin-agent .chapter-top .course-context-label::before {
    content: "MISSION FILE";
    display: block;
    margin-bottom: 6px;
    color: #c8a34b;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2em;
}
body.skin-agent .chapter-top .course-context-label h2 {
    margin: 0 0 5px;
    color: #f2e5c4 !important;
    font-size: 1.45rem !important;
    line-height: 1.05;
}
body.skin-agent .level-bar-wrapper {
    margin-top: -34px !important;
}
body.skin-agent #levelBar {
    background: rgba(14,14,16,.96) !important;
    border-color: rgba(200,163,75,.78) !important;
}
body.skin-agent #myXP {
    color: #e2bf61 !important;
}
body.skin-agent .chapter-top h1,
body.skin-agent .chapter-top .back-to-chapter,
body.skin-agent .chapter-top .back-to-chapter i {
    color: #e2bf61 !important;
}
body.skin-agent .chapter-button-collection {
    transform: none;
    color: #d8bd72 !important;
    background: rgba(17,17,19,.96) !important;
}
body.skin-agent .chapter-button-collection i:not(.red-color),
body.skin-agent .chapter-side-bar,
body.skin-agent .chapter-side-bar * {
    color: #d8bd72 !important;
}
body.skin-agent .chapter-content .content-parent:not([type="2"]) {
    background:
        linear-gradient(135deg, rgba(27,27,30,.98), rgba(15,15,17,.98)) !important;
}
body.skin-agent .chapter-content .content-parent:not([type="2"]),
body.skin-agent .chapter-content .content-parent:not([type="2"]) *:not(.ql-syntax):not(.ql-syntax *) {
    color: var(--skin-ink) !important;
}
body.skin-agent .chapter-content .content-parent[type="2"],
body.skin-agent .chapter-content .content-parent[type="2"] .quiz-wrapper,
body.skin-agent .chapter-content .content-parent[type="2"] .memory-wrappper {
    color: var(--black) !important;
    background: #f6f3eb !important;
    font-family: "Inter", sans-serif !important;
}
body.skin-agent .chapter-content .content-parent[type="2"] * {
    color: inherit;
}
body.skin-agent .chapter-page-content { padding-left: clamp(24px, 4vw, 72px); }

@media (max-width: 1050px) {
    body.skin-agent .main-container-header {
        transform: none !important;
    }
    body.skin-agent .chapter-top .course-context-label {
        position: static !important;
        width: 100%;
        max-width: none;
        margin: 0 0 14px !important;
    }
}

/* 05 Zeitreise: Portalbühne mit freischwebender Navigation oben rechts. */
body.skin-time {
    --skin-nav-ink: #fff5df;
    --skin-hero-height: 308px;
    --skin-profile-size: 148px;
    --skin-profile-top: 55%;
    --skin-profile-left: 7%;
    --skin-profile-translate: translateY(-50%) rotate(-2deg);
    --skin-hero-position: center;
    --skin-hero-overlay: rgba(20,8,35,.12);
}
body.skin-time main { position: relative; }
body.skin-time .main-container-header {
    position: absolute;
    top: 20px;
    right: 3%;
    width: auto;
    height: 64px;
    min-height: 64px;
    padding: 0 20px;
    border-radius: 32px 6px 32px 6px;
    border: 1px solid rgba(92,226,243,.5);
    background: rgba(30,16,48,.84) !important;
    backdrop-filter: blur(12px);
}
body.skin-time .main-container-header .home { margin-right: 30px; }
body.skin-time .header-user-info { align-items: flex-start; }
body.skin-time .header-user-info .user-info {
    padding: 5px 12px;
    background: rgba(37,20,57,.76);
    border-radius: 999px;
}
body.skin-time .user-header-wrapper::after { bottom: auto; top: 106px; }

/* 06 Grüner Ninja: rechte vertikale Dojo-Leiste und Profil links. */
body.skin-lloyd {
    --skin-nav-ink: #f7ffe9;
    --skin-hero-height: 344px;
    --skin-profile-size: 150px;
    --skin-profile-top: 52%;
    --skin-profile-left: 7%;
    --skin-profile-translate: translateY(-50%);
    --skin-hero-position: center;
    --skin-hero-overlay: rgba(4,25,7,.12);
}
body.skin-lloyd main { position: relative; }
body.skin-lloyd .main-container-header {
    position: absolute;
    top: 30px;
    right: 34px;
    width: 214px;
    height: 274px;
    min-height: 274px;
    padding: 18px;
    flex-flow: column nowrap;
    align-items: stretch;
    border-radius: 2px 30px 2px 30px;
    border: 2px solid rgba(216,181,68,.7);
    background: rgba(5,31,10,.84) !important;
}
body.skin-lloyd .main-container-header .home,
body.skin-lloyd .main-container-header .header-button,
body.skin-lloyd .main-container-header .global-settings-button { width: 100%; margin: 0; justify-content: flex-start; }
body.skin-lloyd .header-user-info { align-items: flex-start; }
body.skin-lloyd .header-user-info .user-info { padding: 6px 12px; background: rgba(7,38,12,.7); }
body.skin-lloyd .user-header-wrapper::after { right: 278px; }

/* 07 Indi: großes Ausgrabungspanorama, Navigation als Expeditionskarte am unteren Rand. */
body.skin-indi {
    --skin-nav-ink: #44260f;
    --skin-hero-height: 390px;
    --skin-profile-size: 164px;
    --skin-profile-top: 46%;
    --skin-profile-left: 50%;
    --skin-profile-translate: translate(-50%, -50%);
    --skin-hero-position: center 54%;
    --skin-hero-overlay: rgba(79,44,12,.08);
}
body.skin-indi main { position: relative; }
body.skin-indi .main-container-header {
    position: absolute;
    top: 304px;
    left: 8%;
    width: 84%;
    height: 70px;
    min-height: 70px;
    border: 2px solid rgba(87,50,17,.62);
    border-radius: 5px;
    background: rgba(244,223,187,.9) !important;
    box-shadow: 0 12px 25px rgba(68,38,15,.24);
}
body.skin-indi .header-user-info .user-info {
    padding: 5px 11px;
    color: #3b210d !important;
    background: rgba(248,229,194,.88);
    text-shadow: none;
}
body.skin-indi .user-header-wrapper::after { top: 22px; bottom: auto; }

/* 08 Space Rogue: breite segmentierte Raumhafen-Konsole. */
body.skin-smuggler {
    --skin-nav-ink: #fff1dd;
    --skin-header-height: 90px;
    --skin-hero-height: 254px;
    --skin-profile-size: 132px;
    --skin-profile-top: 52%;
    --skin-profile-left: 7%;
    --skin-profile-translate: translateY(-50%);
    --skin-hero-position: center 52%;
    --skin-hero-overlay: rgba(4,12,20,.18);
}
body.skin-smuggler .main-container-header {
    border-bottom: 8px solid var(--skin-accent);
    background: linear-gradient(90deg, #0b1c2d 0 38%, #164864 38% 63%, #b54f1d 63% 78%, #e8893a 78%) !important;
}
body.skin-smuggler .header-user-info { flex-direction: row; align-items: center; }
body.skin-smuggler .header-user-info .head-container { margin: 0 0 0 16px; }
body.skin-smuggler .header-user-info .user-role { margin-left: 10px; }
body.skin-smuggler .header-user-info .user-info { padding: 6px 10px; background: rgba(5,14,22,.72); }
body.skin-smuggler .user-header-wrapper::after { top: 18px; bottom: auto; }

/* Gespeicherte Editor-Farben dürfen auf den dunklen Raumhafen-Karten
 * nicht als schwarzer Fließtext erscheinen. Dateikarten und Formfelder
 * behalten dagegen bewusst ihre eigenen hellen Oberflächenfarben. */
body.skin-smuggler .chapter-content .content-parent,
body.skin-smuggler .chapter-content .content-parent > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote),
body.skin-smuggler .chapter-content .content-parent .ql-editor,
body.skin-smuggler .chapter-content .content-parent .ql-editor > :not(.chapter-file-card),
body.skin-smuggler .chapter-content .content-parent .ql-editor > :not(.chapter-file-card) *:not(input):not(textarea):not(select):not(option):not(button) {
    color: #f4f8fa !important;
}

body.skin-smuggler .chapter-content .content-parent :is(a, strong, b) {
    color: #74ddeb !important;
}

body.skin-smuggler .chapter-content .chapter-file-card,
body.skin-smuggler .chapter-content .chapter-file-name {
    color: #1f2937 !important;
}

body.skin-smuggler .chapter-content .chapter-file-meta {
    color: #667085 !important;
}

body.skin-smuggler .chapter-content .chapter-file-download,
body.skin-smuggler .chapter-content .chapter-file-download * {
    color: #ffffff !important;
}

/* 09 Tech: heller Maker-Space mit Werkzeugnavigation rechts. */
body.skin-tech {
    --skin-nav-ink: #14233d;
    --skin-hero-height: 324px;
    --skin-profile-size: 138px;
    --skin-profile-top: 51%;
    --skin-profile-left: 6%;
    --skin-profile-translate: translateY(-50%);
    --skin-hero-position: center;
    --skin-hero-overlay: rgba(16,69,150,.05);
}
body.skin-tech main { position: relative; }
body.skin-tech .main-container-header {
    position: absolute;
    top: 28px;
    right: 30px;
    width: 218px;
    height: 268px;
    min-height: 268px;
    padding: 18px;
    flex-direction: column;
    align-items: stretch;
    border: 2px solid #84a8df;
    border-radius: 18px;
    background: rgba(248,252,255,.9) !important;
    backdrop-filter: blur(12px);
}
body.skin-tech .main-container-header .home,
body.skin-tech .main-container-header .header-button,
body.skin-tech .main-container-header .global-settings-button { width: 100%; margin: 0; justify-content: flex-start; }
body.skin-tech .header-user-info { flex-direction: row; align-items: center; }
body.skin-tech .header-user-info .head-container { margin: 0 0 0 16px; }
body.skin-tech .header-user-info .user-role { margin-left: 10px; }
body.skin-tech .header-user-info .user-info {
    padding: 7px 11px;
    color: #102749 !important;
    background: rgba(250,253,255,.9);
    text-shadow: none;
    border-radius: 8px;
}
body.skin-tech .user-header-wrapper::after { right: 280px; }
body.skin-tech .chapter-page-content { padding-inline: clamp(18px, 3vw, 48px); }

/* 10 Gamer: Neon-Arena mit zentralem Spielerprofil. */
body.skin-ninja {
    --skin-nav-ink: #f7f5ff;
    --skin-hero-height: 304px;
    --skin-profile-size: 142px;
    --skin-profile-top: 44%;
    --skin-profile-left: auto;
    --skin-profile-right: 7%;
    --skin-profile-translate: translateY(-50%);
    --skin-hero-position: center 44%;
    --skin-hero-overlay: rgba(1,2,8,.25);
}
body.skin-ninja main { position: relative; }
body.skin-ninja .main-container-header {
    position: absolute;
    top: 224px;
    right: 3%;
    width: auto;
    height: 62px;
    min-height: 62px;
    padding: 0 18px;
    border: 1px solid rgba(174,153,239,.45);
    border-radius: 0 22px 0 22px;
    background: rgba(5,5,13,.86) !important;
}
body.skin-ninja .main-container-header .iiigel-icon-text { display: none; }
body.skin-ninja .main-container-header .iiigel-icon { width: 48px; }
body.skin-ninja .header-user-info { align-items: flex-end; }
body.skin-ninja .header-user-info .user-info { padding: 5px 12px; background: rgba(4,4,12,.75); }
body.skin-ninja .user-header-wrapper::after { left: 3%; right: auto; }

/* 11 Force: Panorama zuerst, schmale ruhige Navigation darunter. */
body.skin-force {
    --skin-nav-ink: #26341f;
    --skin-header-height: 68px;
    --skin-header-width: min(920px, 92%);
    --skin-header-margin: -18px auto 0;
    --skin-header-radius: 34px;
    --skin-hero-height: 348px;
    --skin-profile-size: 148px;
    --skin-profile-top: 54%;
    --skin-profile-left: 7%;
    --skin-profile-translate: translateY(-50%);
    --skin-hero-position: center 55%;
    --skin-hero-overlay: rgba(33,53,27,.08);
}
body.skin-force main { display: flex; flex-direction: column; }
body.skin-force .user-header-wrapper { order: 1; border-bottom: 0; }
body.skin-force .main-container-header { order: 2; }
body.skin-force #content-wrapper { order: 3; }
body.skin-force .header-user-info { flex-direction: row; }
body.skin-force .header-user-info .head-container { margin: 0 0 0 16px; }
body.skin-force .header-user-info .user-role { margin-left: 10px; }
body.skin-force .header-user-info .user-info {
    padding: 6px 11px;
    color: #26341f !important;
    background: rgba(239,240,220,.88);
    text-shadow: none;
    border-radius: 20px;
}
body.skin-force .user-header-wrapper::after { top: 20px; bottom: auto; }

/* 12 Galaxy: kosmische Bühne zuerst, Navigation als farbiger Dockstreifen. */
body.skin-galaxy {
    --skin-nav-ink: #fff;
    --skin-header-height: 82px;
    --skin-hero-height: 360px;
    --skin-profile-size: 170px;
    --skin-profile-top: 52%;
    --skin-profile-left: 50%;
    --skin-profile-translate: translate(-50%, -50%);
    --skin-hero-position: center;
    --skin-hero-overlay: rgba(8,3,18,.12);
}
body.skin-galaxy main { display: flex; flex-direction: column; }
body.skin-galaxy .user-header-wrapper { order: 1; border: 0; }
body.skin-galaxy .main-container-header {
    order: 2;
    border-radius: 0 0 42px 42px;
    background: linear-gradient(90deg, #2c0d45, #982871 33%, #ef4aa7 59%, #13a9ce) !important;
}
body.skin-galaxy #content-wrapper { order: 3; }
body.skin-galaxy .user-header-wrapper::after { left: 4%; right: auto; }
body.skin-galaxy .chapter-page-content { padding-top: 44px; }
body.skin-galaxy .chapter-side-bar { border-radius: 38px 8px 38px 8px !important; }

/* 13 Aviation: flacher Horizont, Profil und Name als rechter Pilotenausweis. */
body.skin-aviation {
    --skin-nav-ink: #102a48;
    --skin-header-height: 64px;
    --skin-hero-height: 198px;
    --skin-profile-size: 112px;
    --skin-profile-top: 50%;
    --skin-profile-left: auto;
    --skin-profile-right: 5%;
    --skin-profile-translate: translateY(-50%);
    --skin-hero-position: center 47%;
    --skin-hero-overlay: rgba(9,54,97,.06);
}
body.skin-aviation .main-container-header {
    background: linear-gradient(90deg, #f9fcff 0 47%, #0b4f89 47% 76%, #ed7c2c 76%) !important;
}
body.skin-aviation .header-user-info { flex-direction: row-reverse; align-items: center; }
body.skin-aviation .header-user-info .head-container { margin: 0 16px 0 0; }
body.skin-aviation .header-user-info .user-role { margin-right: 10px; }
body.skin-aviation .header-user-info .user-info {
    padding: 5px 10px;
    color: #102a48 !important;
    background: rgba(247,251,255,.88);
    text-shadow: none;
    border-radius: 4px;
}
body.skin-aviation .user-header-wrapper::after { left: 4%; right: auto; }
body.skin-aviation .chapter-page-content { padding-top: 18px; }

/* 14 Magie: große Bilderbuchbühne, Navigation als hoher Zauberschrank rechts. */
body.skin-magic {
    --skin-nav-ink: #fff2cc;
    --skin-hero-height: 382px;
    --skin-profile-size: 154px;
    --skin-profile-top: 52%;
    --skin-profile-left: 7%;
    --skin-profile-translate: translateY(-50%);
    --skin-hero-position: center;
    --skin-hero-overlay: rgba(22,8,30,.15);
}
body.skin-magic main { position: relative; }
body.skin-magic .main-container-header {
    position: absolute;
    top: 30px;
    right: 32px;
    width: 226px;
    height: 302px;
    min-height: 302px;
    padding: 20px;
    flex-direction: column;
    align-items: stretch;
    border: 2px solid rgba(224,184,80,.75);
    border-radius: 30px 4px 30px 4px;
    background: rgba(41,18,50,.86) !important;
}
body.skin-magic .main-container-header .home,
body.skin-magic .main-container-header .header-button,
body.skin-magic .main-container-header .global-settings-button { width: 100%; margin: 0; justify-content: flex-start; }
body.skin-magic .header-user-info { align-items: flex-start; }
body.skin-magic .header-user-info .user-info { padding: 6px 11px; background: rgba(38,15,46,.75); }
body.skin-magic .user-header-wrapper::after { right: 286px; }

/* 15 Zaubermeister: monumentales Observatorium mit zentraler Identität. */
body.skin-headmaster {
    --skin-nav-ink: #fff1cd;
    --skin-header-height: 74px;
    --skin-header-width: min(1180px, 92%);
    --skin-header-margin: 18px auto -92px;
    --skin-header-radius: 8px 30px 8px 30px;
    --skin-hero-height: 430px;
    --skin-profile-size: 176px;
    --skin-profile-top: 58%;
    --skin-profile-left: 50%;
    --skin-profile-translate: translate(-50%, -50%);
    --skin-hero-position: center;
    --skin-hero-overlay: rgba(4,9,29,.18);
}
body.skin-headmaster .main-container-header {
    border: 1px solid rgba(221,182,83,.55);
    background: rgba(13,22,54,.86) !important;
    backdrop-filter: blur(12px);
}
body.skin-headmaster .header-user-info .user-info {
    padding: 6px 14px;
    background: rgba(10,18,47,.76);
    border-radius: 3px 18px 3px 18px;
}
body.skin-headmaster .user-header-wrapper::after { left: 4%; right: auto; bottom: 24px; }
body.skin-headmaster .chapter-page-content { max-width: 1500px; margin-inline: auto; padding-top: 46px; }

/* 16 Cyber: linke Netzwerkschiene, Banner und Identität bewusst nach rechts versetzt. */
body.skin-cyber {
    --skin-nav-ink: #cffff0;
    --skin-hero-height: 336px;
    --skin-profile-size: 142px;
    --skin-profile-top: 50%;
    --skin-profile-left: auto;
    --skin-profile-right: 7%;
    --skin-profile-translate: translateY(-50%);
    --skin-hero-position: center;
    --skin-hero-overlay: rgba(0,7,9,.22);
}
body.skin-cyber main { position: relative; }
body.skin-cyber .main-container-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 196px;
    height: 336px;
    min-height: 336px;
    padding: 22px 16px;
    flex-direction: column;
    align-items: stretch;
    border-right: 2px solid var(--skin-accent);
    background: rgba(1,10,11,.94) !important;
}
body.skin-cyber .main-container-header .home,
body.skin-cyber .main-container-header .header-button,
body.skin-cyber .main-container-header .global-settings-button { width: 100%; margin: 0; justify-content: flex-start; }
body.skin-cyber .user-header-wrapper { width: calc(100% - 196px); margin-left: 196px; }
body.skin-cyber .header-user-info { align-items: flex-end; }
body.skin-cyber .header-user-info .user-info {
    padding: 6px 10px;
    color: #cffff0 !important;
    background: rgba(1,12,13,.82);
    border: 1px solid rgba(37,233,128,.44);
    text-shadow: none;
}
body.skin-cyber .user-header-wrapper::after { left: 22px; right: auto; }
body.skin-cyber .chapter-page-content { border-top: 1px solid rgba(37,233,128,.24); }

@media (max-width: 1050px) {
    :is(
        body.skin-medical,
        body.skin-schlappen,
        body.skin-survival,
        body.skin-agent,
        body.skin-time,
        body.skin-lloyd,
        body.skin-indi,
        body.skin-smuggler,
        body.skin-tech,
        body.skin-ninja,
        body.skin-force,
        body.skin-galaxy,
        body.skin-aviation,
        body.skin-magic,
        body.skin-headmaster,
        body.skin-cyber
    ) main {
        display: block !important;
    }

    :is(
        body.skin-medical,
        body.skin-schlappen,
        body.skin-survival,
        body.skin-agent,
        body.skin-time,
        body.skin-lloyd,
        body.skin-indi,
        body.skin-smuggler,
        body.skin-tech,
        body.skin-ninja,
        body.skin-force,
        body.skin-galaxy,
        body.skin-aviation,
        body.skin-magic,
        body.skin-headmaster,
        body.skin-cyber
    ) .main-container-header {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        order: initial !important;
        width: 100% !important;
        height: 76px !important;
        min-height: 76px !important;
        margin: 0 !important;
        padding: 0 22px !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        border-radius: 0 !important;
        clip-path: none !important;
    }

    :is(
        body.skin-medical,
        body.skin-schlappen,
        body.skin-survival,
        body.skin-agent,
        body.skin-time,
        body.skin-lloyd,
        body.skin-indi,
        body.skin-smuggler,
        body.skin-tech,
        body.skin-ninja,
        body.skin-force,
        body.skin-galaxy,
        body.skin-aviation,
        body.skin-magic,
        body.skin-headmaster,
        body.skin-cyber
    ) .main-container-header .home {
        width: auto !important;
        margin: 0 auto 0 0 !important;
    }

    :is(
        body.skin-medical,
        body.skin-schlappen,
        body.skin-survival,
        body.skin-agent,
        body.skin-time,
        body.skin-lloyd,
        body.skin-indi,
        body.skin-smuggler,
        body.skin-tech,
        body.skin-ninja,
        body.skin-force,
        body.skin-galaxy,
        body.skin-aviation,
        body.skin-magic,
        body.skin-headmaster,
        body.skin-cyber
    ) .main-container-header .header-button,
    :is(
        body.skin-medical,
        body.skin-schlappen,
        body.skin-survival,
        body.skin-agent,
        body.skin-time,
        body.skin-lloyd,
        body.skin-indi,
        body.skin-smuggler,
        body.skin-tech,
        body.skin-ninja,
        body.skin-force,
        body.skin-galaxy,
        body.skin-aviation,
        body.skin-magic,
        body.skin-headmaster,
        body.skin-cyber
    ) .main-container-header .global-settings-button {
        width: auto !important;
        margin: 0 !important;
        justify-content: center !important;
    }

    :is(
        body.skin-medical,
        body.skin-schlappen,
        body.skin-survival,
        body.skin-agent,
        body.skin-time,
        body.skin-lloyd,
        body.skin-indi,
        body.skin-smuggler,
        body.skin-tech,
        body.skin-ninja,
        body.skin-force,
        body.skin-galaxy,
        body.skin-aviation,
        body.skin-magic,
        body.skin-headmaster,
        body.skin-cyber
    ) .user-header-wrapper {
        order: initial !important;
        width: 100% !important;
        height: 270px !important;
        min-height: 270px !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    :is(
        body.skin-medical,
        body.skin-schlappen,
        body.skin-survival,
        body.skin-agent,
        body.skin-time,
        body.skin-lloyd,
        body.skin-indi,
        body.skin-smuggler,
        body.skin-tech,
        body.skin-ninja,
        body.skin-force,
        body.skin-galaxy,
        body.skin-aviation,
        body.skin-magic,
        body.skin-headmaster,
        body.skin-cyber
    ) .header-user-info {
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    :is(
        body.skin-medical,
        body.skin-schlappen,
        body.skin-survival,
        body.skin-agent,
        body.skin-time,
        body.skin-lloyd,
        body.skin-indi,
        body.skin-smuggler,
        body.skin-tech,
        body.skin-ninja,
        body.skin-force,
        body.skin-galaxy,
        body.skin-aviation,
        body.skin-magic,
        body.skin-headmaster,
        body.skin-cyber
    ) .header-user-info .head-container,
    :is(
        body.skin-medical,
        body.skin-schlappen,
        body.skin-survival,
        body.skin-agent,
        body.skin-time,
        body.skin-lloyd,
        body.skin-indi,
        body.skin-smuggler,
        body.skin-tech,
        body.skin-ninja,
        body.skin-force,
        body.skin-galaxy,
        body.skin-aviation,
        body.skin-magic,
        body.skin-headmaster,
        body.skin-cyber
    ) .header-user-info .user-role {
        margin: 7px 0 0 !important;
    }

    :is(
        body.skin-medical,
        body.skin-schlappen,
        body.skin-survival,
        body.skin-agent,
        body.skin-time,
        body.skin-lloyd,
        body.skin-indi,
        body.skin-smuggler,
        body.skin-tech,
        body.skin-ninja,
        body.skin-force,
        body.skin-galaxy,
        body.skin-aviation,
        body.skin-magic,
        body.skin-headmaster,
        body.skin-cyber
    ) .user-header-wrapper::after {
        display: none !important;
    }

    :is(
        body.skin-medical,
        body.skin-schlappen,
        body.skin-survival,
        body.skin-agent,
        body.skin-time,
        body.skin-lloyd,
        body.skin-indi,
        body.skin-smuggler,
        body.skin-tech,
        body.skin-ninja,
        body.skin-force,
        body.skin-galaxy,
        body.skin-aviation,
        body.skin-magic,
        body.skin-headmaster,
        body.skin-cyber
    ) #content-wrapper {
        order: initial !important;
    }
}

@media (max-width: 700px) {
    :is(
        body.skin-medical,
        body.skin-schlappen,
        body.skin-survival,
        body.skin-agent,
        body.skin-time,
        body.skin-lloyd,
        body.skin-indi,
        body.skin-smuggler,
        body.skin-tech,
        body.skin-ninja,
        body.skin-force,
        body.skin-galaxy,
        body.skin-aviation,
        body.skin-magic,
        body.skin-headmaster,
        body.skin-cyber
    ) .main-container-header {
        height: auto !important;
        min-height: 70px !important;
        padding: 8px 14px !important;
        gap: 8px !important;
    }

    :is(
        body.skin-medical,
        body.skin-schlappen,
        body.skin-survival,
        body.skin-agent,
        body.skin-time,
        body.skin-lloyd,
        body.skin-indi,
        body.skin-smuggler,
        body.skin-tech,
        body.skin-ninja,
        body.skin-force,
        body.skin-galaxy,
        body.skin-aviation,
        body.skin-magic,
        body.skin-headmaster,
        body.skin-cyber
    ) .main-container-header .iiigel-icon-text,
    :is(
        body.skin-medical,
        body.skin-schlappen,
        body.skin-survival,
        body.skin-agent,
        body.skin-time,
        body.skin-lloyd,
        body.skin-indi,
        body.skin-smuggler,
        body.skin-tech,
        body.skin-ninja,
        body.skin-force,
        body.skin-galaxy,
        body.skin-aviation,
        body.skin-magic,
        body.skin-headmaster,
        body.skin-cyber
    ) .main-container-header .header-button > div:not(.header-home-text) {
        display: none;
    }

    :is(
        body.skin-medical,
        body.skin-schlappen,
        body.skin-survival,
        body.skin-agent,
        body.skin-time,
        body.skin-lloyd,
        body.skin-indi,
        body.skin-smuggler,
        body.skin-tech,
        body.skin-ninja,
        body.skin-force,
        body.skin-galaxy,
        body.skin-aviation,
        body.skin-magic,
        body.skin-headmaster,
        body.skin-cyber
    ) .user-header-wrapper {
        height: 228px !important;
        min-height: 228px !important;
    }

    :is(
        body.skin-medical,
        body.skin-schlappen,
        body.skin-survival,
        body.skin-agent,
        body.skin-time,
        body.skin-lloyd,
        body.skin-indi,
        body.skin-smuggler,
        body.skin-tech,
        body.skin-ninja,
        body.skin-force,
        body.skin-galaxy,
        body.skin-aviation,
        body.skin-magic,
        body.skin-headmaster,
        body.skin-cyber
    ) #profilePicture,
    :is(
        body.skin-medical,
        body.skin-schlappen,
        body.skin-survival,
        body.skin-agent,
        body.skin-time,
        body.skin-lloyd,
        body.skin-indi,
        body.skin-smuggler,
        body.skin-tech,
        body.skin-ninja,
        body.skin-force,
        body.skin-galaxy,
        body.skin-aviation,
        body.skin-magic,
        body.skin-headmaster,
        body.skin-cyber
    ) .header-user-img {
        width: 108px !important;
        height: 108px !important;
        min-width: 108px !important;
        min-height: 108px !important;
    }
}

/* ==================GLOBAL LAYER CONTRACT================== */
/*
 * 0-9       Inhalt und Skin-Dekoration
 * 30        Skin-Navigation
 * 60-70     Sticky Level-/Werkzeugleisten
 * 90        kurzlebige Kartenanimationen
 * 10.000+   Editor-Dropdowns
 * 500.000   Karten-Overlay
 * 500.100+  vergrößerte Karte samt Klickfläche
 * Dialoge und Vollbildsperren liegen weiterhin oberhalb davon.
 */
#cardoverlay_bg {
    z-index: 500000 !important;
    isolation: isolate;
}

#cardoverlay_bg #cardoverlay_innerbg {
    z-index: 1 !important;
}

#cardoverlay_bg #cardoverlay_container {
    z-index: 2 !important;
}

#cardoverlay_bg #cardoverlay_header {
    /* Always keep the trade controls above resting, tilted and dragged cards. */
    z-index: 500080 !important;
}

#cardoverlay_bg #woodframe {
    z-index: 6 !important;
}

#cardoverlay_bg #woodframe_txt {
    z-index: 7 !important;
}

#flyingCardBG,
img[id^="flyingCard_"] {
    z-index: 90 !important;
}

body > #tcg_big {
    z-index: 500100 !important;
}

body > #tcg_big_clickarea {
    /* Unsichtbare Schließfläche bleibt hinter der interaktiven Großkarte. */
    z-index: 500099 !important;
}

/* ==================AGENT SKIN V3: GLOBAL OPERATIONS================== */
/*
 * Der Agenten-Skin orientiert sich an einer modernen Einsatzzentrale:
 * Cyan markiert Navigation und Status, Amber kennzeichnet Akten und Ziele.
 */
body.skin-agent {
    --skin-label: "◉  MISSION AKTIV\A AGENTEN-SKIN FREIGESCHALTET";
    --skin-font-body: "Rajdhani", "Inter", sans-serif;
    --skin-font-heading: "Bebas Neue", "Arial Narrow", sans-serif;
    --skin-heading-spacing: .045em;
    --skin-bg-solid: #020813;
    --skin-surface: #07131f;
    --skin-surface-alt: #0b1b29;
    --skin-ink: #dce7ec;
    --skin-muted: #879ba7;
    --skin-accent: #18d7ef;
    --skin-accent-strong: #087f98;
    --skin-accent-soft: #77edfa;
    --skin-accent-2: #d79a2b;
    --skin-border: #6d5222;
    --skin-page-bg:
        radial-gradient(circle at 76% 0%, rgba(24, 215, 239, .09), transparent 30%),
        radial-gradient(circle at 13% 30%, rgba(19, 116, 154, .09), transparent 27%),
        linear-gradient(150deg, #02070e 0%, #06111b 48%, #020812 100%);
    --skin-pattern:
        linear-gradient(rgba(27, 125, 157, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 125, 157, .07) 1px, transparent 1px),
        linear-gradient(135deg, transparent 47%, rgba(213, 151, 39, .055) 48%, transparent 49%);
    --skin-pattern-size: 42px 42px, 42px 42px, 130px 130px;
    --skin-pattern-opacity: .72;
    --skin-hero-image: url('/assets/skin-banners/agent-ops-v2.png');
    --skin-hero-height: 418px;
    --skin-hero-position: center center;
    --skin-hero-overlay: rgba(0, 5, 12, .08);
    --skin-profile-size: 154px;
    --skin-profile-top: 46%;
    --skin-profile-left: 50%;
    --skin-profile-right: auto;
    --skin-profile-translate: translate(-50%, -50%);
    --skin-hero-border: 2px solid rgba(215, 154, 43, .82);
    --skin-hero-shadow: inset 0 -90px 100px rgba(0, 8, 17, .46), 0 14px 40px rgba(0, 0, 0, .44);
    --skin-nav-ink: #e6eff3;
    --skin-card-shadow: 0 22px 50px rgba(0, 0, 0, .38), inset 0 0 35px rgba(8, 91, 119, .065);
    --skin-radius: 2px;
    --skin-button-radius: 3px;
    --skin-progress-radius: 4px;
}

body.skin-agent::before {
    opacity: .72;
    mask-image: linear-gradient(to bottom, transparent 0 330px, #000 510px);
}

body.skin-agent main {
    overflow: hidden;
}

body.skin-agent .main-container-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 82px;
    min-height: 82px;
    padding: 12px clamp(28px, 6.6vw, 118px);
    transform: none;
    gap: 8px;
    border: 0;
    border-bottom: 1px solid rgba(36, 123, 151, .34);
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(1, 6, 13, .96), rgba(2, 10, 18, .72) 70%, transparent) !important;
    box-shadow: none;
    backdrop-filter: none;
}

body.skin-agent .main-container-header::after {
    content: "";
    position: absolute;
    right: 6.6vw;
    bottom: -1px;
    width: min(340px, 32vw);
    height: 1px;
    background: linear-gradient(90deg, transparent, #18d7ef 45%, transparent);
    box-shadow: 0 0 10px rgba(24, 215, 239, .65);
}

body.skin-agent .main-container-header .home {
    width: auto;
    margin-right: auto;
    gap: 11px;
}

body.skin-agent .main-container-header .iiigel-icon {
    filter: brightness(0) saturate(100%) invert(67%) sepia(66%) saturate(717%) hue-rotate(356deg) brightness(94%) contrast(91%);
}

body.skin-agent .main-container-header .iiigel-icon-text {
    color: #f3f5f1 !important;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 21px;
    letter-spacing: .02em;
}

body.skin-agent .main-container-header .header-button,
body.skin-agent .main-container-header .global-settings-button {
    width: auto;
    min-width: 44px;
    min-height: 42px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #dce7ec !important;
    background: rgba(3, 13, 22, .42) !important;
    transition: border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
}

body.skin-agent .main-container-header .header-button:hover,
body.skin-agent .main-container-header .global-settings-button:hover {
    border-color: rgba(24, 215, 239, .66);
    color: #68edfa !important;
    background: rgba(8, 45, 59, .72) !important;
    box-shadow: inset 0 0 18px rgba(24, 215, 239, .08), 0 0 14px rgba(24, 215, 239, .08);
}

body.skin-agent .main-container-header .logoutBtn {
    margin-left: 10px;
    border-color: rgba(215, 154, 43, .62);
    background: rgba(26, 18, 6, .44) !important;
}

body.skin-agent .main-container-header .logoutBtn:hover {
    border-color: #d79a2b;
    color: #f0bf5e !important;
    background: rgba(63, 40, 5, .62) !important;
}

body.skin-agent .main-container-header .logoutBtn img {
    filter: brightness(0) saturate(100%) invert(70%) sepia(74%) saturate(672%) hue-rotate(356deg) brightness(93%) contrast(91%);
}

body.skin-agent .user-header-wrapper {
    background-image:
        linear-gradient(180deg, rgba(0, 5, 11, .12), rgba(0, 7, 14, .02) 54%, rgba(1, 8, 15, .56)),
        var(--skin-hero-image) !important;
}

body.skin-agent .user-header-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0 8%, rgba(24, 215, 239, .13) 8% 8.08%, transparent 8.08% 91%, rgba(215, 154, 43, .12) 91% 91.08%, transparent 91.08%),
        linear-gradient(180deg, transparent 0 76%, rgba(24, 215, 239, .1) 76% 76.25%, transparent 76.25%);
}

body.skin-agent .user-header-wrapper::after {
    left: auto;
    right: clamp(38px, 7vw, 128px);
    bottom: 56px;
    min-width: 244px;
    padding: 12px 18px 11px 24px;
    transform: none;
    white-space: pre;
    border: 1px solid rgba(24, 215, 239, .52);
    border-left: 3px solid #18d7ef;
    border-radius: 0 4px 0 4px;
    color: #2de5fa;
    background: linear-gradient(90deg, rgba(3, 17, 27, .9), rgba(3, 12, 20, .65));
    box-shadow: inset 0 0 24px rgba(24, 215, 239, .045), 0 12px 30px rgba(0, 0, 0, .32);
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.75;
    letter-spacing: .13em;
    text-align: left;
}

body.skin-agent .header-user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 330px;
}

body.skin-agent .header-user-info #profilePicture {
    position: relative;
    margin: 0 0 15px;
    border: 2px solid #e0a33a !important;
    background: #06111b;
    box-shadow:
        0 0 0 5px rgba(2, 12, 21, .94),
        0 0 0 7px rgba(215, 154, 43, .72),
        0 0 0 13px rgba(24, 215, 239, .1),
        0 0 38px rgba(24, 215, 239, .2),
        0 20px 38px rgba(0, 0, 0, .6) !important;
}

body.skin-agent .header-user-info #profilePicture::after {
    content: "";
    position: absolute;
    inset: -13px;
    border: 1px dashed rgba(215, 154, 43, .5);
    border-radius: 50%;
    pointer-events: none;
}

body.skin-agent .header-user-info .head-container,
body.skin-agent .header-user-info .user-role {
    margin: 0;
}

body.skin-agent .header-user-info .user-info {
    margin: 0;
    padding: 0;
    border: 0;
    color: #eff4f5 !important;
    background: transparent;
    text-align: center;
    text-shadow: 0 3px 12px #000, 0 0 18px rgba(0, 0, 0, .9);
    backdrop-filter: none;
}

body.skin-agent .header-user-info .user-info-name {
    font-family: "Bebas Neue", "Arial Narrow", sans-serif !important;
    font-size: clamp(31px, 2.2vw, 43px);
    font-style: italic;
    line-height: .98;
    letter-spacing: .055em;
    text-transform: uppercase;
}

body.skin-agent .header-user-info .user-info-role {
    padding-top: 5px;
    color: #c2ced3 !important;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 12px;
    letter-spacing: .09em;
    text-transform: uppercase;
}

body.skin-agent .chapter-top .course-context-label {
    margin-top: -315px !important;
    min-width: 350px;
    max-width: 440px;
    padding: 13px 18px 14px 20px;
    border: 0;
    border-left: 3px solid #d79a2b;
    color: #aabac2 !important;
    background: linear-gradient(90deg, rgba(2, 11, 19, .9), rgba(2, 11, 19, .34));
    box-shadow: none;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 12px !important;
    letter-spacing: .04em;
    text-shadow: 0 2px 8px #000;
    backdrop-filter: blur(5px);
}

body.skin-agent .chapter-top .course-context-label::before {
    content: "N.A.T.O  /  MISSION BRIEFING";
    margin-bottom: 5px;
    color: #dca33b;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 10px;
    letter-spacing: .18em;
}

body.skin-agent .chapter-top .course-context-label h2 {
    margin: 0 0 4px;
    color: #f0f3f2 !important;
    font-family: "Bebas Neue", "Arial Narrow", sans-serif !important;
    font-size: clamp(30px, 2.25vw, 42px) !important;
    font-style: italic;
    line-height: .98;
    letter-spacing: .045em;
    text-transform: uppercase;
}

body.skin-agent .level-bar-wrapper {
    margin-top: -31px !important;
    width: 370px !important;
    height: 64px !important;
    z-index: 65 !important;
}

body.skin-agent #levelBar {
    width: 310px !important;
    height: 58px !important;
    border: 1px solid rgba(215, 154, 43, .72) !important;
    border-radius: 3px !important;
    background: linear-gradient(110deg, rgba(2, 13, 22, .98), rgba(7, 29, 42, .95)) !important;
    box-shadow: inset 0 0 22px rgba(24, 215, 239, .055), 0 12px 26px rgba(0, 0, 0, .38) !important;
}

body.skin-agent #levelBar > span {
    top: 39px !important;
    left: 65px !important;
    width: 218px !important;
    height: 8px !important;
    border: 1px solid rgba(24, 215, 239, .26) !important;
    border-radius: 0 !important;
    background: #020a11 !important;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, .8) !important;
}

body.skin-agent #myXPbar {
    height: 6px !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, #08b9dc, #27e6f5) !important;
    box-shadow: 0 0 10px rgba(24, 215, 239, .62);
}

body.skin-agent #myLvl {
    top: 14px !important;
    left: 10px !important;
    width: 45px !important;
    height: 45px !important;
    padding-top: 2px !important;
    border: 1px solid rgba(215, 154, 43, .8) !important;
    border-radius: 50% !important;
    color: #35e3f4 !important;
    background: #06131e !important;
    box-shadow: inset 0 0 14px rgba(24, 215, 239, .12);
}

body.skin-agent #myXP {
    top: 14px !important;
    left: 66px !important;
    color: #4ae8f7 !important;
    font-family: "Rajdhani", sans-serif !important;
    font-size: 22px !important;
    letter-spacing: .035em;
}

body.skin-agent #cardIcon {
    filter: drop-shadow(0 0 7px rgba(24, 215, 239, .34));
}

body.skin-agent .chapter-page-content {
    padding: 50px clamp(24px, 7.7vw, 136px) 80px !important;
}

body.skin-agent .chapter-top {
    position: relative;
    min-height: 72px;
    padding: 0 0 15px;
    border-bottom: 1px solid rgba(38, 114, 139, .38);
}

body.skin-agent .chapter-top::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: min(480px, 42vw);
    height: 1px;
    background: linear-gradient(90deg, #d79a2b, rgba(215, 154, 43, .08));
}

body.skin-agent .chapter-top h1 {
    margin: 0 410px 0 48px;
    color: #edf3f4 !important;
    font-size: clamp(34px, 3vw, 50px);
    font-style: italic;
    line-height: 1;
    letter-spacing: .045em;
    text-shadow: 0 0 24px rgba(24, 215, 239, .1);
}

body.skin-agent .chapter-top h1::before {
    content: "MISSION BRIEFING  /  ACTIVE CASE";
    display: block;
    margin-bottom: 5px;
    color: #c38b29;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 9px;
    font-style: normal;
    letter-spacing: .19em;
}

body.skin-agent .chapter-top .back-to-chapter,
body.skin-agent .chapter-top .back-to-chapter i {
    color: #a9c9d3 !important;
}

body.skin-agent .chapter-top .back-to-chapter {
    top: 25px;
}

body.skin-agent .chapter-button-collection {
    top: 4px;
    min-height: 50px;
    padding: 5px 10px;
    border: 1px solid rgba(28, 122, 151, .5) !important;
    border-radius: 4px 0 4px 0 !important;
    color: #8edce7 !important;
    background: linear-gradient(110deg, rgba(4, 20, 31, .96), rgba(6, 29, 42, .9)) !important;
    box-shadow: inset 0 0 22px rgba(24, 215, 239, .035), 0 12px 25px rgba(0, 0, 0, .24) !important;
}

body.skin-agent .chapter-button-collection a {
    border-radius: 2px;
}

body.skin-agent .chapter-button-collection a:hover {
    background: rgba(24, 215, 239, .1);
}

body.skin-agent .chapter-button-collection i:not(.red-color),
body.skin-agent .chapter-side-bar,
body.skin-agent .chapter-side-bar * {
    color: #57d9e9 !important;
}

body.skin-agent .chapter-side-bar {
    border: 1px solid rgba(215, 154, 43, .64) !important;
    border-radius: 3px !important;
    background: linear-gradient(110deg, rgba(4, 16, 26, .98), rgba(4, 24, 35, .96)) !important;
    box-shadow: inset 0 0 24px rgba(24, 215, 239, .035), 0 14px 28px rgba(0, 0, 0, .28) !important;
}

body.skin-agent .chapter-content {
    margin-top: 28px;
}

body.skin-agent .chapter-content .content-parent:not([type="2"]) {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(153, 111, 34, .72) !important;
    border-left: 3px solid #18cfe6 !important;
    border-radius: 2px 10px 2px 2px !important;
    color: #d7e1e5 !important;
    background:
        linear-gradient(rgba(32, 105, 127, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32, 105, 127, .035) 1px, transparent 1px),
        linear-gradient(135deg, rgba(8, 24, 35, .98), rgba(3, 13, 22, .99)) !important;
    background-size: 32px 32px, 32px 32px, auto !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .3), inset 0 0 34px rgba(24, 215, 239, .025) !important;
}

body.skin-agent .chapter-content .content-parent:not([type="2"])::before {
    width: 3px;
    background: linear-gradient(180deg, #18d7ef, #087f98) !important;
    box-shadow: 0 0 12px rgba(24, 215, 239, .5);
}

body.skin-agent .chapter-content .content-parent:not([type="2"]),
body.skin-agent .chapter-content .content-parent:not([type="2"]) *:not(.ql-syntax):not(.ql-syntax *) {
    color: #d7e1e5 !important;
}

body.skin-agent .chapter-content .content-parent[type="2"] {
    overflow: hidden;
    border: 1px solid rgba(215, 154, 43, .68) !important;
    border-left: 4px solid #18d7ef !important;
    border-radius: 2px 12px 2px 2px !important;
    box-shadow: 0 20px 46px rgba(0, 0, 0, .32) !important;
}

body.skin-agent .chapter-content .content-parent + .content-parent {
    margin-top: 18px;
}

body.skin-agent .main-button,
body.skin-agent .quiz-button,
body.skin-agent .button-quiz,
body.skin-agent .button,
body.skin-agent .color-main {
    border: 1px solid rgba(215, 154, 43, .72) !important;
    color: #031018 !important;
    background: linear-gradient(135deg, #e3ae49, #c8871e) !important;
    box-shadow: 0 8px 20px rgba(215, 154, 43, .2) !important;
}

body.skin-agent .dialog .dialog-content.settings-dialog {
    color: #dce7ec !important;
    background:
        linear-gradient(rgba(26, 110, 137, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 110, 137, .035) 1px, transparent 1px),
        linear-gradient(135deg, rgba(7, 25, 38, .99), rgba(3, 14, 24, .99)) !important;
    background-size: 28px 28px, 28px 28px, auto !important;
    border-color: rgba(215, 154, 43, .75) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .62), inset 0 0 34px rgba(24, 215, 239, .035) !important;
}

body.skin-agent .dialog .dialog-content.settings-dialog h1 {
    color: #eef4f5 !important;
    text-shadow: 0 0 18px rgba(24, 215, 239, .12);
}

body.skin-agent .global-settings-dialog label {
    color: #9fb3bc !important;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

body.skin-agent .global-settings-dialog select {
    color: #e4edf0 !important;
    caret-color: #18d7ef;
    border: 1px solid rgba(215, 154, 43, .72) !important;
    background-color: #061522 !important;
    box-shadow: inset 0 0 18px rgba(24, 215, 239, .035);
}

body.skin-agent .global-settings-dialog select:focus {
    outline: 1px solid #18d7ef;
    outline-offset: 1px;
    border-color: #18d7ef !important;
}

body.skin-agent .global-settings-dialog select option {
    color: #dce7ec !important;
    background: #07131f !important;
}

body.skin-agent .global-settings-dialog select option:checked {
    color: #031018 !important;
    background: #18bcd3 !important;
}

@media (max-width: 1050px) {
    body.skin-agent {
        --skin-hero-height: 380px;
        --skin-profile-size: 132px;
        --skin-profile-top: 49%;
    }

    body.skin-agent .main-container-header {
        top: 0;
        left: 0;
        width: 100%;
        padding-inline: 22px;
    }

    body.skin-agent .user-header-wrapper {
        height: 380px !important;
        min-height: 380px !important;
    }

    body.skin-agent .user-header-wrapper::after {
        right: 22px;
        bottom: 30px;
        min-width: 210px;
    }

    body.skin-agent .chapter-top .course-context-label {
        position: absolute !important;
        left: 0;
        top: -250px;
        width: 310px;
        max-width: 42vw;
        margin: 0 !important;
    }

    body.skin-agent .chapter-page-content {
        padding-inline: 34px !important;
    }
}

@media (max-width: 720px) {
    body.skin-agent {
        --skin-hero-height: 310px;
        --skin-profile-size: 112px;
        --skin-profile-top: 42%;
        --skin-profile-left: 72%;
    }

    body.skin-agent .main-container-header {
        height: 68px;
        min-height: 68px;
        padding: 8px 12px;
    }

    body.skin-agent .main-container-header .iiigel-icon-text,
    body.skin-agent .main-container-header #chapterLogoutBtn > div,
    body.skin-agent .main-container-header .logoutBtn > div,
    body.skin-agent .user-header-wrapper::after {
        display: none;
    }

    body.skin-agent .header-user-info {
        width: 190px;
    }

    body.skin-agent .user-header-wrapper {
        height: 310px !important;
        min-height: 310px !important;
    }

    body.skin-agent #profileTextContainer {
        display: block !important;
    }

    body.skin-agent .header-user-info .user-role {
        display: none !important;
    }

    body.skin-agent .header-user-info .user-info-name {
        font-size: 28px;
    }

    body.skin-agent .chapter-top .course-context-label {
        top: -180px;
        min-width: 0;
        width: 44vw;
        max-width: 44vw;
        height: 86px;
        padding: 10px 12px;
        overflow: hidden;
    }

    body.skin-agent .chapter-top .course-context-label h2 {
        font-size: 23px !important;
    }

    body.skin-agent .chapter-top .course-context-label::before {
        font-size: 8px;
        letter-spacing: .1em;
    }

    body.skin-agent .chapter-page-content {
        padding: 44px 16px 60px !important;
    }

    body.skin-agent .chapter-top h1 {
        margin-right: 0;
        font-size: 34px;
    }

    body.skin-agent .chapter-button-collection {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        margin-top: 16px;
    }
}

/* ==================FORCE-SKIN V2: JEDI ARCHIVE================== */
body.skin-force {
    --skin-label: "JEDI-ARCHIV AKTIV\A WISSEN / FOKUS / BALANCE";
    --skin-font-heading: "Cinzel", Georgia, serif;
    --skin-font-body: "Barlow", Arial, sans-serif;
    --skin-heading-transform: uppercase;
    --skin-heading-spacing: .035em;
    --skin-bg-solid: #cdbb96;
    --skin-surface: #ead9b5;
    --skin-surface-alt: #d9c195;
    --skin-ink: #302417;
    --skin-muted: #6f604d;
    --skin-accent: #9a6a2c;
    --skin-accent-strong: #5d3817;
    --skin-accent-soft: #d2b067;
    --skin-accent-2: #68d9f4;
    --skin-border: #8c6737;
    --skin-nav-ink: #382616;
    --skin-hero-image: url('/assets/skin-banners/force.png?v=force-archive-v2');
    --skin-hero-height: 414px;
    --skin-hero-position: center 52%;
    --skin-hero-overlay: rgba(68, 41, 13, .05);
    --skin-hero-border: 5px solid #8b5b23;
    --skin-profile-size: 156px;
    --skin-profile-top: 51%;
    --skin-profile-left: 50%;
    --skin-profile-right: auto;
    --skin-profile-translate: translate(-50%, -50%);
    --skin-radius: 4px 22px 4px 22px;
    --skin-button-radius: 3px 12px 3px 12px;
    --skin-page-bg:
        radial-gradient(circle at 15% 8%, rgba(255, 244, 210, .62), transparent 26%),
        radial-gradient(circle at 84% 35%, rgba(111, 76, 34, .16), transparent 30%),
        repeating-linear-gradient(5deg, rgba(91, 60, 27, .035) 0 1px, transparent 1px 9px),
        linear-gradient(135deg, #d6c39e, #efe1c0 48%, #c5aa7b);
    --skin-pattern:
        linear-gradient(30deg, transparent 0 48%, rgba(92, 62, 31, .07) 49% 50%, transparent 51%),
        radial-gradient(circle, rgba(88, 57, 24, .14) 0 1px, transparent 1.5px);
    --skin-pattern-size: 72px 72px, 43px 43px;
    --skin-pattern-opacity: .58;
    color: #302417;
}

body.skin-force main {
    position: relative;
    display: block;
    isolation: isolate;
}

body.skin-force .user-header-wrapper {
    border-bottom: var(--skin-hero-border) !important;
    box-shadow:
        inset 0 -85px 105px rgba(51, 28, 7, .38),
        0 10px 28px rgba(64, 38, 12, .28) !important;
}

body.skin-force .user-header-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(35, 20, 7, .18), transparent 27%, transparent 73%, rgba(35, 20, 7, .18)),
        linear-gradient(180deg, rgba(44, 27, 9, .1), transparent 32%, transparent 71%, rgba(35, 20, 7, .24));
}

body.skin-force .user-header-wrapper::after {
    left: auto !important;
    right: clamp(24px, 4vw, 74px) !important;
    top: auto !important;
    bottom: 25px !important;
    min-width: 292px;
    padding: 10px 20px 9px !important;
    white-space: pre-line;
    border: 1px solid rgba(212, 174, 97, .82) !important;
    border-left: 5px solid #7b4a1f !important;
    border-radius: 2px 18px 2px 18px !important;
    color: #fff2cc !important;
    background: linear-gradient(110deg, rgba(58, 34, 13, .92), rgba(110, 69, 27, .84)) !important;
    font-family: "Cinzel", Georgia, serif !important;
    font-size: 11px !important;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: .12em !important;
    text-align: center;
    text-shadow: 0 2px 4px rgba(18, 9, 2, .65);
    box-shadow: 0 13px 28px rgba(38, 20, 5, .35), inset 0 1px 0 rgba(255, 234, 179, .15);
    backdrop-filter: blur(8px);
}

/* Flache Archivnavigation im oberen Bannerbereich. */
body.skin-force .main-container-header {
    position: absolute;
    top: 14px;
    left: 4%;
    right: 4%;
    width: 92%;
    height: 66px;
    min-height: 66px;
    margin: 0;
    padding: 7px 14px 7px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(117, 78, 31, .7) !important;
    border-top: 2px solid rgba(224, 190, 117, .84) !important;
    border-radius: 3px 18px 3px 18px !important;
    color: #382616 !important;
    background:
        linear-gradient(90deg, rgba(239, 221, 178, .94), rgba(216, 188, 132, .91) 50%, rgba(235, 216, 174, .94)) !important;
    box-shadow: 0 10px 30px rgba(48, 28, 8, .28), inset 0 1px 0 rgba(255, 249, 226, .72) !important;
    backdrop-filter: blur(10px);
}

body.skin-force .main-container-header::before {
    content: "ARCHIV  /  TEMPELAKTE";
    position: absolute;
    left: 100px;
    bottom: 4px;
    color: rgba(91, 57, 23, .68);
    font-family: "Barlow", Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .18em;
}

body.skin-force .main-container-header .home {
    width: auto;
    margin-right: auto !important;
    gap: 9px;
}

body.skin-force .main-container-header .iiigel-icon {
    width: 62px;
    filter: sepia(1) saturate(2.2) hue-rotate(345deg) brightness(.55);
}

body.skin-force .main-container-header .iiigel-icon-text {
    display: block;
    color: #3b2817 !important;
    font-family: "Cinzel", Georgia, serif !important;
    font-size: 20px;
    font-weight: 700;
}

body.skin-force .main-container-header #chapterGroupName {
    display: none;
}

body.skin-force .main-container-header .header-button,
body.skin-force .main-container-header .global-settings-button {
    position: relative;
    top: auto;
    width: auto;
    min-width: 42px;
    min-height: 42px;
    margin: 0;
    padding: 7px 11px;
    border: 1px solid transparent;
    border-radius: 2px 10px 2px 10px;
    color: #3a2716 !important;
    background: rgba(255, 246, 218, .28) !important;
}

body.skin-force .main-container-header .header-button,
body.skin-force .main-container-header .header-button > div {
    color: #3a2716 !important;
    font-family: "Barlow", Arial, sans-serif !important;
    font-size: 16px;
    font-weight: 600;
}

body.skin-force .main-container-header .material-icons {
    color: #70471e !important;
    font-family: "Material Icons" !important;
}

body.skin-force .main-container-header .header-home {
    flex-direction: row;
}

body.skin-force .main-container-header .header-home-underline {
    display: none !important;
}

body.skin-force .main-container-header .header-button:hover,
body.skin-force .main-container-header .global-settings-button:hover {
    border-color: rgba(113, 76, 31, .58);
    background: rgba(255, 246, 218, .7) !important;
}

body.skin-force .main-container-header .logoutBtn {
    border-color: rgba(120, 72, 27, .68);
    background: rgba(111, 65, 24, .12) !important;
}

body.skin-force .main-container-header .logoutBtn img {
    width: 22px;
    filter: sepia(1) saturate(2.5) hue-rotate(340deg) brightness(.5);
}

body.skin-force .header-user-info {
    width: 390px;
    flex-direction: column;
    align-items: center;
    z-index: 8;
}

body.skin-force .header-user-info .head-container {
    margin: 0 !important;
}

body.skin-force .header-user-info #profilePicture {
    margin: 0;
    border: 5px solid #c89d53 !important;
    outline: 3px solid rgba(83, 50, 19, .9);
    outline-offset: 4px;
    background: #d5bd88;
    box-shadow:
        0 0 0 9px rgba(220, 188, 119, .3),
        0 18px 32px rgba(41, 22, 6, .45) !important;
}

body.skin-force #profileTextContainer {
    min-width: 330px;
    margin-top: 14px;
    padding: 7px 20px 8px;
    border: 1px solid rgba(205, 168, 91, .64);
    border-left: 4px solid #8a5423;
    border-radius: 2px 14px 2px 14px;
    background: linear-gradient(90deg, rgba(55, 31, 11, .9), rgba(104, 65, 26, .86));
    box-shadow: 0 10px 25px rgba(39, 20, 5, .33);
}

body.skin-force .header-user-info .user-info {
    padding: 0;
    color: #fff1cb !important;
    background: transparent !important;
    font-family: "Barlow", Arial, sans-serif !important;
    text-align: center;
    text-shadow: 0 2px 5px rgba(28, 13, 3, .75);
}

body.skin-force .header-user-info .user-info-name {
    font-family: "Cinzel", Georgia, serif !important;
    font-size: 22px;
    font-weight: 700;
}

body.skin-force .header-user-info .user-info-role {
    color: #e8c984 !important;
    font-size: 14px;
}

body.skin-force .level-bar-wrapper {
    margin-top: 13px !important;
    margin-left: clamp(20px, 5vw, 90px) !important;
    z-index: 70 !important;
}

body.skin-force #levelBar {
    width: 320px !important;
    border: 1px solid #795024 !important;
    border-left: 5px solid #a16c30 !important;
    border-radius: 2px 18px 2px 18px !important;
    background: linear-gradient(110deg, #ead7ab, #cba973) !important;
    box-shadow: 0 12px 25px rgba(63, 37, 10, .25), inset 0 1px 0 rgba(255, 249, 224, .7) !important;
}

body.skin-force #levelBar > span {
    border-color: rgba(92, 61, 27, .44) !important;
    background: #49321d !important;
}

body.skin-force #myLvl {
    color: #effcff !important;
    background: #207b8f !important;
    border-color: #b7f3ff !important;
}

body.skin-force #myXP {
    color: #3b2817 !important;
    font-family: "Cinzel", Georgia, serif !important;
    font-weight: 700 !important;
}

body.skin-force #myXPbar {
    background: linear-gradient(90deg, #80dff1, #32aeca 60%, #f0d591) !important;
    box-shadow: 0 0 10px rgba(86, 204, 232, .62);
}

body.skin-force .chapter-page-content {
    max-width: 1700px;
    margin-inline: auto;
    padding: 44px clamp(22px, 4vw, 68px) 100px !important;
}

body.skin-force .chapter-top {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "context context actions"
        "back title actions";
    align-items: center;
    column-gap: 14px;
    row-gap: 8px;
    min-height: 132px;
    margin: 24px 0 35px;
    padding: 19px 23px;
    border: 1px solid #91683a;
    border-left: 6px solid #805020;
    border-radius: 2px 22px 2px 22px;
    background:
        linear-gradient(90deg, rgba(255, 242, 205, .94), rgba(221, 193, 137, .92)),
        repeating-linear-gradient(0deg, transparent 0 29px, rgba(105, 71, 34, .07) 30px 31px);
    box-shadow: 0 19px 38px rgba(75, 43, 12, .2), inset 0 1px 0 rgba(255, 252, 237, .78);
}

body.skin-force .chapter-top::before {
    content: "ARCHIVDATENSATZ  /  AKTIVE LEKTION";
    position: absolute;
    top: -13px;
    right: 18px;
    padding: 3px 10px;
    border: 1px solid #987044;
    border-radius: 2px 9px 2px 9px;
    color: #fbe8b9;
    background: #68431f;
    font-family: "Barlow", Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
}

body.skin-force .chapter-top::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 8px;
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg, #65d6ee, rgba(101, 214, 238, .08) 52%, #84d7a2);
    box-shadow: 0 0 10px rgba(72, 187, 219, .38);
}

body.skin-force .chapter-top .course-context-label {
    position: relative !important;
    grid-area: context;
    left: auto;
    width: auto;
    margin: 0 !important;
    color: #765129 !important;
    font-family: "Barlow", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

body.skin-force .chapter-top .course-context-label::before {
    content: "ORDEN / ";
    color: #257e92;
}

body.skin-force .chapter-top .course-context-label h2 {
    display: inline;
    margin: 0;
    color: #704a22 !important;
    font-family: "Barlow", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700;
}

body.skin-force .chapter-top .back-to-chapter {
    grid-area: back;
}

body.skin-force .chapter-top .back-to-chapter,
body.skin-force .chapter-top .back-to-chapter i {
    color: #277f91 !important;
}

body.skin-force .chapter-top h1 {
    grid-area: title;
    margin: 0 !important;
    color: #3b2817 !important;
    font-family: "Cinzel", Georgia, serif !important;
    font-size: clamp(30px, 3vw, 48px) !important;
    line-height: 1.08;
    text-shadow: 0 1px 0 #fff0c6;
}

body.skin-force .chapter-button-collection {
    position: relative;
    grid-area: actions;
    top: auto;
    right: auto;
    min-height: 55px;
    padding: 11px 14px;
    gap: 23px;
    border: 1px solid #8d6334 !important;
    border-radius: 2px 15px 2px 15px !important;
    background: linear-gradient(115deg, #5b3718, #81552a) !important;
    box-shadow: 0 11px 24px rgba(55, 30, 7, .27), inset 0 1px 0 rgba(255, 224, 159, .14) !important;
}

body.skin-force .chapter-button-collection i:not(.red-color) {
    color: #91e4f4 !important;
}

body.skin-force .chapter-side-bar {
    right: 0 !important;
    width: 400px;
    transform: none;
    border: 1px solid #876039 !important;
    border-left: 5px solid #71441c !important;
    border-radius: 2px 20px 2px 20px !important;
    color: #382719 !important;
    background:
        radial-gradient(circle at 88% 8%, rgba(104, 214, 236, .13), transparent 22%),
        repeating-linear-gradient(0deg, transparent 0 31px, rgba(96, 64, 29, .055) 32px 33px),
        linear-gradient(135deg, rgba(242, 224, 183, .98), rgba(210, 181, 125, .98)) !important;
    box-shadow: 0 18px 38px rgba(68, 39, 10, .25), inset 0 1px 0 rgba(255, 250, 230, .72) !important;
}

body.skin-force .chapter-side-bar,
body.skin-force .chapter-side-bar *:not(.material-icons) {
    color: #382719 !important;
}

body.skin-force .chapter-side-bar h1 {
    font-family: "Cinzel", Georgia, serif !important;
    letter-spacing: .035em;
}

body.skin-force .chapter-side-bar .chapter-list-item {
    border-color: rgba(119, 82, 40, .44) !important;
    background: rgba(255, 243, 211, .48) !important;
}

body.skin-force .chapter-side-bar .chapter-list-item::before {
    border-color: #3da6bc !important;
}

body.skin-force .chapter-container.expanded .chapter-side-bar {
    position: absolute !important;
    height: 550px !important;
    z-index: 30;
}

body.skin-force .chapter-container.expanded .chapter-content,
body.skin-force .chapter-page-content.expanded .chapter-content-wrapper,
body.skin-force .chapter-container.expanded .computed-content,
body.skin-force .chapter-container.expanded .chapter-viewable,
body.skin-force .chapter-container.expanded .chapter-block-list {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
}

body.skin-force .chapter-content {
    margin-top: 38px;
}

body.skin-force .chapter-block-list > .content-parent:not([type="2"]) {
    position: relative;
    overflow: hidden;
    border: 1px solid #936b3d !important;
    border-left: 6px solid #7b4b1e !important;
    border-radius: 2px 24px 2px 24px !important;
    color: #332619 !important;
    background:
        radial-gradient(circle at 92% 7%, rgba(70, 175, 199, .1), transparent 24%),
        repeating-linear-gradient(4deg, rgba(94, 61, 27, .026) 0 1px, transparent 1px 8px),
        linear-gradient(130deg, rgba(248, 230, 189, .98), rgba(222, 191, 134, .98)) !important;
    box-shadow: 0 23px 48px rgba(73, 42, 11, .24), inset 0 1px 0 rgba(255, 251, 232, .74) !important;
}

body.skin-force .chapter-block-list > .content-parent:not([type="2"])::before {
    background: linear-gradient(#68401a, #b6803e 52%, #55bdd2) !important;
}

body.skin-force .chapter-block-list > .content-parent:nth-child(even):not([type="2"]) {
    border-left-color: #3b9fb4 !important;
}

body.skin-force .chapter-block-list > .content-parent + .content-parent {
    margin-top: 25px;
}

body.skin-force .chapter-content .content-parent:not([type="2"]),
body.skin-force .chapter-content .content-parent:not([type="2"]) .ql-editor,
body.skin-force .chapter-content .content-parent:not([type="2"]) .ql-editor > :not(.chapter-file-card),
body.skin-force .chapter-content .content-parent:not([type="2"]) .ql-editor > :not(.chapter-file-card) *:not(input):not(textarea):not(select):not(option):not(button) {
    color: #332619 !important;
}

body.skin-force .chapter-content .content-parent:not([type="2"]) :is(h1, h2, h3, h4) {
    color: #3c2917 !important;
    font-family: "Cinzel", Georgia, serif !important;
}

body.skin-force .chapter-content .content-parent:not([type="2"]) :is(a, strong, b) {
    color: #765022 !important;
}

body.skin-force .chapter-content .iiigel-text-box {
    color: #332619 !important;
    background: rgba(255, 239, 199, .72) !important;
    border-color: #9b713d !important;
}

body.skin-force .chapter-content .chapter-file-card,
body.skin-force .chapter-content .chapter-file-name {
    color: #1f2937 !important;
}

body.skin-force .chapter-content .chapter-file-meta {
    color: #667085 !important;
}

body.skin-force .chapter-content .chapter-file-download,
body.skin-force .chapter-content .chapter-file-download * {
    color: #ffffff !important;
}

body.skin-force .chapter-side-bar #add-chapter.white {
    border-color: #66401b !important;
    color: #fff3d0 !important;
    background: linear-gradient(135deg, #6c421d, #93642f) !important;
    box-shadow: 0 9px 18px rgba(68, 38, 9, .25) !important;
}

body.skin-force .chapter-side-bar #add-chapter.white :is(i, .btn-text) {
    color: #fff3d0 !important;
}

body.skin-force .dialog .dialog-content.settings-dialog {
    color: #342517 !important;
    background: linear-gradient(145deg, #f0dfb9, #cfae75) !important;
    border-color: #80582c !important;
}

body.skin-force .dialog .dialog-content.settings-dialog h1,
body.skin-force .global-settings-dialog label {
    color: #342517 !important;
}

body.skin-force .global-settings-dialog select,
body.skin-force .global-settings-dialog select option {
    color: #fff3d0 !important;
    background: #5d3b1d !important;
}

@media (max-width: 1050px) {
    body.skin-force {
        --skin-profile-size: 136px;
    }

    body.skin-force .user-header-wrapper::after {
        min-width: 230px;
        font-size: 9px !important;
    }

    body.skin-force .main-container-header {
        left: 2%;
        right: 2%;
        width: 96%;
    }

    body.skin-force .chapter-side-bar {
        width: 340px;
    }
}

@media (max-width: 720px) {
    body.skin-force {
        --skin-hero-height: 342px;
        --skin-profile-size: 108px;
        --skin-profile-top: 53%;
    }

    body.skin-force .main-container-header {
        top: 7px;
        height: 58px;
        min-height: 58px;
        padding: 6px 9px;
        gap: 3px;
    }

    body.skin-force .main-container-header::before,
    body.skin-force .main-container-header .iiigel-icon-text,
    body.skin-force .main-container-header .header-button > div,
    body.skin-force .user-header-wrapper::after {
        display: none !important;
    }

    body.skin-force .main-container-header .home,
    body.skin-force .main-container-header .header-button,
    body.skin-force .main-container-header .global-settings-button {
        min-width: 38px;
        min-height: 38px;
        padding: 5px 6px;
    }

    body.skin-force .main-container-header .iiigel-icon {
        width: 43px;
    }

    body.skin-force .header-user-info {
        width: 245px;
    }

    body.skin-force #profileTextContainer {
        min-width: 220px;
        margin-top: 11px;
    }

    body.skin-force .header-user-info .user-info-name {
        font-size: 17px;
    }

    body.skin-force .header-user-info .user-role {
        display: none;
    }

    body.skin-force .level-bar-wrapper {
        margin-left: 7px !important;
        transform: scale(.83);
        transform-origin: left center;
    }

    body.skin-force .chapter-page-content {
        padding: 34px 12px 72px !important;
    }

    body.skin-force .chapter-top {
        display: flex;
        flex-wrap: wrap;
        padding: 16px 13px;
    }

    body.skin-force .chapter-top::before {
        display: none;
    }

    body.skin-force .chapter-top .course-context-label {
        width: 100%;
    }

    body.skin-force .chapter-top h1 {
        width: calc(100% - 48px);
        font-size: 27px !important;
    }

    body.skin-force .chapter-button-collection {
        width: 100%;
        margin-top: 12px;
        justify-content: space-around;
    }

    body.skin-force .chapter-side-bar,
    body.skin-force .chapter-container.expanded .chapter-side-bar {
        position: relative !important;
        right: auto !important;
        width: 100%;
        margin-top: 12px;
    }
}

/* ==================ZEITREISE SKIN V3: CHRONO RUN================== */
/* Eigenständige Komposition: Chrononaut links, vertikale Zeitsteuerung rechts. */
body.skin-time {
    --skin-label: "⚡  ZEITKORRIDOR STABIL\A SPRUNGZIEL  ·  1985";
    --skin-font-heading: "Bebas Neue", "Arial Narrow", sans-serif;
    --skin-font-body: "Rajdhani", "Inter", sans-serif;
    --skin-heading-spacing: .04em;
    --skin-bg-solid: #020915;
    --skin-surface: #071525;
    --skin-surface-alt: #0d2035;
    --skin-ink: #e5eff4;
    --skin-muted: #8ea6b5;
    --skin-accent: #19d8f2;
    --skin-accent-strong: #087f9d;
    --skin-accent-soft: #67edfb;
    --skin-accent-2: #ff8a24;
    --skin-border: #945522;
    --skin-page-bg:
        radial-gradient(circle at 82% 3%, rgba(31, 148, 209, .15), transparent 28%),
        radial-gradient(circle at 15% 64%, rgba(255, 112, 23, .09), transparent 26%),
        linear-gradient(145deg, #020711, #071426 52%, #040817);
    --skin-pattern:
        linear-gradient(rgba(25, 154, 190, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(25, 154, 190, .055) 1px, transparent 1px),
        repeating-radial-gradient(circle at 83% 12%, transparent 0 44px, rgba(255, 138, 36, .075) 45px 46px, transparent 47px 72px);
    --skin-pattern-size: 38px 38px, 38px 38px, 310px 310px;
    --skin-pattern-opacity: .78;
    --skin-hero-image: url('/assets/skin-banners/time-chronorun-v2.png');
    --skin-hero-height: 430px;
    --skin-hero-position: center center;
    --skin-hero-overlay: rgba(0, 7, 18, .08);
    --skin-profile-size: 158px;
    --skin-profile-top: 43%;
    --skin-profile-left: 7.5%;
    --skin-profile-right: auto;
    --skin-profile-translate: translateY(-50%);
    --skin-hero-border: 3px solid #19d8f2;
    --skin-hero-shadow: inset 0 -100px 110px rgba(0, 8, 20, .52), 0 18px 44px rgba(0, 0, 0, .45);
    --skin-card-shadow: 0 22px 48px rgba(0, 0, 0, .38), inset 0 0 38px rgba(25, 216, 242, .045);
    --skin-radius: 3px 18px 3px 18px;
    --skin-button-radius: 3px 12px 3px 12px;
    --skin-progress-radius: 999px;
    --skin-nav-ink: #dff7fb;
}

body.skin-time::before {
    mask-image: linear-gradient(to bottom, transparent 0 340px, #000 500px);
}

body.skin-time main {
    position: relative;
    overflow: hidden;
}

body.skin-time .user-header-wrapper {
    background-image:
        linear-gradient(90deg, rgba(0, 7, 18, .18), rgba(0, 7, 18, .02) 50%, rgba(0, 7, 18, .16)),
        linear-gradient(180deg, transparent 58%, rgba(2, 9, 21, .5)),
        var(--skin-hero-image) !important;
}

body.skin-time .user-header-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0 23%, rgba(25, 216, 242, .17) 23% 23.08%, transparent 23.08% 86%, rgba(255, 138, 36, .18) 86% 86.08%, transparent 86.08%),
        linear-gradient(180deg, transparent 0 78%, rgba(25, 216, 242, .12) 78% 78.3%, transparent 78.3%);
}

body.skin-time .main-container-header {
    position: absolute;
    top: 24px;
    right: 28px;
    left: auto;
    width: 218px;
    height: 348px;
    min-height: 348px;
    padding: 17px;
    transform: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    border: 1px solid rgba(25, 216, 242, .66);
    border-right: 3px solid #ff8a24;
    border-radius: 22px 3px 22px 3px;
    background:
        linear-gradient(180deg, rgba(7, 18, 41, .95), rgba(14, 15, 42, .9)) !important;
    box-shadow: inset 0 0 32px rgba(25, 216, 242, .065), 0 20px 42px rgba(0, 0, 0, .46);
    backdrop-filter: blur(12px);
}

body.skin-time .main-container-header::before {
    content: "CHRONO CONTROL";
    display: block;
    order: -2;
    padding: 0 4px 9px;
    color: #ff9b3e;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 9px;
    letter-spacing: .17em;
    border-bottom: 1px solid rgba(255, 138, 36, .4);
}

body.skin-time .main-container-header .home {
    order: -1;
    width: 100%;
    min-height: 50px;
    margin: 0 0 3px;
    padding: 6px 8px;
    justify-content: flex-start;
    border: 1px solid rgba(25, 216, 242, .22);
    border-radius: 3px 12px 3px 12px;
    background: rgba(2, 14, 29, .42);
}

body.skin-time .main-container-header .iiigel-icon {
    width: 48px;
    height: 42px;
    filter: brightness(0) saturate(100%) invert(67%) sepia(95%) saturate(1744%) hue-rotate(152deg) brightness(101%) contrast(90%);
}

body.skin-time .main-container-header .iiigel-icon-text {
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 16px;
}

body.skin-time .main-container-header .header-button,
body.skin-time .main-container-header .global-settings-button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    margin: 0;
    padding: 0 11px;
    justify-content: flex-start;
    border: 1px solid transparent;
    border-radius: 3px 10px 3px 10px;
    color: #dceef4 !important;
    background: rgba(8, 26, 48, .42) !important;
    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

body.skin-time .main-container-header .header-button:hover,
body.skin-time .main-container-header .global-settings-button:hover {
    transform: translateX(-4px);
    border-color: rgba(25, 216, 242, .62);
    color: #65edfb !important;
    background: rgba(10, 52, 77, .72) !important;
}

body.skin-time .main-container-header .global-settings-button::after {
    content: "Einstellungen";
    margin-left: 9px;
    font-family: "Rajdhani", sans-serif !important;
    font-size: 14px;
}

body.skin-time .main-container-header .logoutBtn {
    margin-top: auto;
    border-color: rgba(255, 138, 36, .62);
    background: rgba(57, 26, 8, .52) !important;
}

body.skin-time .main-container-header .logoutBtn:hover {
    border-color: #ff9b3e;
    color: #ffb368 !important;
    background: rgba(92, 40, 8, .68) !important;
}

body.skin-time .main-container-header .logoutBtn img {
    filter: brightness(0) saturate(100%) invert(67%) sepia(90%) saturate(1436%) hue-rotate(339deg) brightness(102%) contrast(101%);
}

body.skin-time .header-user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 300px;
}

body.skin-time .header-user-info #profilePicture {
    margin: 0 0 14px;
    border: 3px solid #19d8f2 !important;
    background: #071525;
    box-shadow:
        0 0 0 4px rgba(2, 10, 21, .94),
        0 0 0 7px rgba(255, 138, 36, .8),
        0 0 0 13px rgba(25, 216, 242, .11),
        0 0 35px rgba(25, 216, 242, .26),
        0 20px 42px rgba(0, 0, 0, .58) !important;
}

body.skin-time .header-user-info .head-container,
body.skin-time .header-user-info .user-role {
    margin: 0;
}

body.skin-time .header-user-info .user-info {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #f1f6f7 !important;
    background: transparent;
    text-align: left;
    text-shadow: 0 3px 12px #000, 0 0 16px rgba(0, 0, 0, .8);
}

body.skin-time .header-user-info .user-info-name {
    font-family: "Bebas Neue", "Arial Narrow", sans-serif !important;
    font-size: clamp(31px, 2.3vw, 43px);
    font-style: italic;
    line-height: .95;
    letter-spacing: .045em;
    text-transform: uppercase;
}

body.skin-time .header-user-info .user-info-role {
    padding-top: 5px;
    color: #c8d8df !important;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.skin-time .user-header-wrapper::after {
    left: auto;
    right: 270px;
    top: 30px;
    bottom: auto;
    min-width: 250px;
    padding: 11px 16px 10px 21px;
    white-space: pre;
    border: 1px solid rgba(25, 216, 242, .66);
    border-left: 4px solid #19d8f2;
    border-radius: 2px 16px 2px 16px;
    color: #4de7f8;
    background: linear-gradient(100deg, rgba(2, 17, 32, .92), rgba(10, 23, 48, .72));
    box-shadow: inset 0 0 24px rgba(25, 216, 242, .05), 0 14px 32px rgba(0, 0, 0, .34);
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.75;
    letter-spacing: .13em;
}

body.skin-time .chapter-top .course-context-label {
    margin-top: -346px !important;
    margin-left: 340px;
    min-width: 420px;
    max-width: 610px;
    padding: 13px 19px 14px 23px;
    border: 0;
    border-left: 4px solid #ff8a24;
    color: #b8cad2 !important;
    background: linear-gradient(90deg, rgba(2, 13, 28, .88), rgba(2, 13, 28, .24));
    box-shadow: none;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 12px !important;
    letter-spacing: .04em;
    text-shadow: 0 2px 10px #000;
    backdrop-filter: blur(5px);
}

body.skin-time .chapter-top .course-context-label::before {
    content: "TEMPORAL DESTINATION  /  COURSE VECTOR";
    display: block;
    margin-bottom: 6px;
    color: #54e8f8;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 9px;
    letter-spacing: .17em;
}

body.skin-time .chapter-top .course-context-label h2 {
    margin: 0 0 4px;
    color: #ff9b3e !important;
    font-family: "Bebas Neue", "Arial Narrow", sans-serif !important;
    font-size: clamp(38px, 3.2vw, 58px) !important;
    font-style: italic;
    line-height: .94;
    letter-spacing: .035em;
    text-transform: uppercase;
}

body.skin-time .level-bar-wrapper {
    margin-top: -34px !important;
    width: 370px !important;
    height: 64px !important;
    z-index: 65 !important;
}

body.skin-time #levelBar {
    width: 310px !important;
    height: 58px !important;
    border: 1px solid rgba(25, 216, 242, .75) !important;
    border-radius: 999px !important;
    background: linear-gradient(110deg, rgba(3, 16, 34, .98), rgba(12, 22, 48, .95)) !important;
    box-shadow: inset 0 0 24px rgba(25, 216, 242, .07), 0 0 20px rgba(25, 216, 242, .08), 0 14px 30px rgba(0, 0, 0, .36) !important;
}

body.skin-time #levelBar > span {
    top: 39px !important;
    left: 65px !important;
    width: 218px !important;
    height: 8px !important;
    border: 1px solid rgba(25, 216, 242, .28) !important;
    background: #020a14 !important;
}

body.skin-time #myXPbar {
    height: 6px !important;
    background: linear-gradient(90deg, #19d8f2 0 72%, #ff8a24) !important;
    box-shadow: 0 0 10px rgba(25, 216, 242, .68);
}

body.skin-time #myLvl {
    border-color: #ff8a24 !important;
    color: #55e8f8 !important;
    background: #07162b !important;
}

body.skin-time #myXP {
    color: #55e8f8 !important;
}

body.skin-time .chapter-page-content {
    padding: 52px clamp(24px, 6.8vw, 122px) 90px !important;
}

body.skin-time .chapter-top {
    position: relative;
    min-height: 94px;
    padding: 14px 0 18px;
    border-top: 1px solid rgba(255, 138, 36, .45);
    border-bottom: 1px solid rgba(25, 216, 242, .35);
}

body.skin-time .chapter-top h1 {
    margin: 0 20px 0 430px;
    color: #ff9b3e !important;
    font-size: clamp(38px, 3.1vw, 54px);
    font-style: italic;
    line-height: 1;
    letter-spacing: .04em;
    text-shadow: 0 0 18px rgba(255, 138, 36, .16);
}

body.skin-time .chapter-top h1::before {
    content: "CHRONO FILE  /  ACTIVE TIMELINE";
    display: block;
    margin-bottom: 5px;
    color: #4be5f6;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 9px;
    font-style: normal;
    letter-spacing: .18em;
}

body.skin-time .chapter-top .back-to-chapter {
    left: 390px;
    top: 37px;
}

body.skin-time .chapter-top .back-to-chapter,
body.skin-time .chapter-top .back-to-chapter i {
    color: #8beaf5 !important;
}

body.skin-time .chapter-button-collection {
    top: 16px;
    right: auto;
    left: 0;
    width: 330px;
    min-height: 54px;
    padding: 6px 10px;
    border: 1px solid rgba(25, 216, 242, .58) !important;
    border-left: 4px solid #ff8a24 !important;
    border-radius: 2px 15px 2px 15px !important;
    color: #58e5f5 !important;
    background: linear-gradient(110deg, rgba(4, 18, 38, .96), rgba(12, 24, 51, .92)) !important;
    box-shadow: inset 0 0 24px rgba(25, 216, 242, .04), 0 14px 28px rgba(0, 0, 0, .28) !important;
}

body.skin-time .chapter-button-collection i:not(.red-color) {
    color: #54e6f6 !important;
}

body.skin-time .chapter-button-collection a:hover {
    background: rgba(25, 216, 242, .1);
}

body.skin-time .chapter-side-bar {
    left: 0 !important;
    right: auto !important;
    width: 360px;
    border: 1px solid rgba(255, 138, 36, .68) !important;
    border-radius: 2px 15px 2px 15px !important;
    color: #dbeaf0 !important;
    background: linear-gradient(110deg, rgba(5, 20, 40, .98), rgba(15, 23, 48, .96)) !important;
    box-shadow: inset 0 0 24px rgba(25, 216, 242, .035), 0 14px 30px rgba(0, 0, 0, .3) !important;
}

body.skin-time .chapter-side-bar * {
    color: #dbeaf0 !important;
}

body.skin-time .open-chapter-overview i {
    transition: transform .2s ease, color .2s ease;
}

body.skin-time .chapter-container.expanded .chapter-side-bar {
    position: absolute !important;
    height: 550px !important;
    z-index: 20;
    border-color: rgba(25, 216, 242, .82) !important;
    box-shadow: 0 24px 55px rgba(0, 0, 0, .52), inset 0 0 32px rgba(25, 216, 242, .055) !important;
}

/* Die Kapitelakte fährt als Overlay aus und darf den Lerninhalt nicht verengen. */
body.skin-time .chapter-container.expanded .chapter-content,
body.skin-time .chapter-page-content.expanded .chapter-content-wrapper,
body.skin-time .chapter-container.expanded .computed-content,
body.skin-time .chapter-container.expanded .chapter-viewable,
body.skin-time .chapter-container.expanded .chapter-block-list {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
}

body.skin-time .chapter-container.expanded .side-bar-h1-container {
    border-bottom: 1px solid rgba(255, 138, 36, .48);
}

body.skin-time .chapter-container.expanded .open-chapter-overview i {
    color: #ff9b3e !important;
    transform: rotate(180deg) !important;
}

body.skin-time .chapter-content {
    margin-top: 30px;
}

body.skin-time .chapter-block-list > .content-parent {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(25, 216, 242, .48) !important;
    border-radius: 3px 22px 3px 22px !important;
    box-shadow: 0 22px 48px rgba(0, 0, 0, .34), inset 0 0 36px rgba(25, 216, 242, .03) !important;
}

body.skin-time .chapter-block-list > .content-parent:nth-child(odd) {
    width: 96%;
    margin-right: auto;
    border-left: 4px solid #19d8f2 !important;
}

body.skin-time .chapter-block-list > .content-parent:nth-child(even) {
    width: 94%;
    margin-left: auto;
    border-right: 4px solid #ff8a24 !important;
}

body.skin-time .chapter-content .content-parent:not([type="2"]) {
    color: #dce9ef !important;
    background:
        linear-gradient(rgba(31, 133, 165, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 133, 165, .035) 1px, transparent 1px),
        linear-gradient(135deg, rgba(8, 25, 43, .99), rgba(5, 14, 31, .99)) !important;
    background-size: 34px 34px, 34px 34px, auto !important;
}

body.skin-time .chapter-content .content-parent:not([type="2"]),
body.skin-time .chapter-content .content-parent:not([type="2"]) *:not(.ql-syntax):not(.ql-syntax *) {
    color: #dce9ef !important;
}

body.skin-time .chapter-content .content-parent[type="2"],
body.skin-time .chapter-content .content-parent[type="2"] .quiz-wrapper,
body.skin-time .chapter-content .content-parent[type="2"] .memory-wrappper,
body.skin-time .chapter-content .content-parent[type="2"] .memory-wrapper {
    color: #e7f1f5 !important;
    background-color: #081729 !important;
}

body.skin-time .chapter-content .content-parent[type="2"] h1,
body.skin-time .chapter-content .content-parent[type="2"] h2,
body.skin-time .chapter-content .content-parent[type="2"] h3,
body.skin-time .chapter-content .content-parent[type="2"] p {
    color: #e7f1f5 !important;
}

body.skin-time .main-button,
body.skin-time .quiz-button,
body.skin-time .button-quiz,
body.skin-time .button,
body.skin-time .color-main {
    border: 1px solid rgba(25, 216, 242, .76) !important;
    color: #02111c !important;
    background: linear-gradient(135deg, #37e0f3, #13a9d2) !important;
    box-shadow: 0 8px 22px rgba(25, 216, 242, .18) !important;
}

body.skin-time .dialog .dialog-content.settings-dialog {
    color: #e5eff4 !important;
    background: linear-gradient(135deg, rgba(8, 28, 50, .99), rgba(10, 16, 40, .99)) !important;
    border-color: rgba(25, 216, 242, .7) !important;
}

body.skin-time .dialog .dialog-content.settings-dialog h1 {
    color: #ff9b3e !important;
}

body.skin-time .global-settings-dialog label {
    color: #9eb8c5 !important;
}

body.skin-time .global-settings-dialog select,
body.skin-time .global-settings-dialog select option {
    color: #e5eff4 !important;
    background: #07172a !important;
}

@media (max-width: 1100px) {
    body.skin-time {
        --skin-profile-size: 132px;
        --skin-profile-left: 8%;
    }

    body.skin-time .user-header-wrapper {
        height: 380px !important;
        min-height: 380px !important;
    }

    body.skin-time .main-container-header {
        right: 18px;
        width: 190px;
    }

    body.skin-time .user-header-wrapper::after {
        right: 230px;
    }

    body.skin-time .chapter-top .course-context-label {
        margin-left: 260px;
        min-width: 330px;
        max-width: 46vw;
    }

    body.skin-time .chapter-top h1 {
        margin-left: 360px;
    }

    body.skin-time .chapter-top .back-to-chapter {
        left: 325px;
    }

    body.skin-time .chapter-button-collection {
        width: 285px;
    }

    body.skin-time .chapter-side-bar {
        width: 310px;
    }
}

@media (max-width: 720px) {
    body.skin-time {
        --skin-hero-height: 330px;
        --skin-profile-size: 108px;
        --skin-profile-left: 22%;
        --skin-profile-top: 43%;
    }

    body.skin-time .user-header-wrapper {
        height: 330px !important;
        min-height: 330px !important;
    }

    body.skin-time .main-container-header {
        top: 10px;
        right: 10px;
        width: 54px;
        height: 242px;
        min-height: 242px;
        padding: 7px;
        gap: 5px;
        border-radius: 14px 2px 14px 2px;
    }

    body.skin-time .main-container-header::before,
    body.skin-time .main-container-header .iiigel-icon-text,
    body.skin-time .main-container-header .global-settings-button::after,
    body.skin-time .main-container-header .header-button > div,
    body.skin-time .user-header-wrapper::after {
        display: none;
    }

    body.skin-time .main-container-header .home,
    body.skin-time .main-container-header .header-button,
    body.skin-time .main-container-header .global-settings-button {
        width: 38px;
        min-width: 38px;
        min-height: 38px;
        padding: 0;
        justify-content: center;
    }

    body.skin-time .main-container-header .iiigel-icon {
        width: 34px;
        height: 32px;
    }

    body.skin-time .header-user-info {
        width: 170px;
    }

    body.skin-time #profileTextContainer {
        display: block !important;
    }

    body.skin-time .header-user-info .user-role {
        display: none !important;
    }

    body.skin-time .header-user-info .user-info-name {
        font-size: 26px;
    }

    body.skin-time .chapter-top .course-context-label {
        position: absolute !important;
        top: -168px;
        left: 10px;
        width: 50vw;
        min-width: 0;
        max-width: 50vw;
        height: 82px;
        margin: 0 !important;
        padding: 9px 11px;
        overflow: hidden;
    }

    body.skin-time .chapter-top .course-context-label h2 {
        font-size: 23px !important;
    }

    body.skin-time .chapter-page-content {
        padding: 44px 12px 65px !important;
    }

    body.skin-time .chapter-top {
        min-height: 178px;
    }

    body.skin-time .chapter-top h1 {
        margin: 0 0 16px 43px;
        font-size: 34px;
    }

    body.skin-time .chapter-top .back-to-chapter {
        left: 0;
        top: 35px;
    }

    body.skin-time .chapter-button-collection {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin-top: 14px;
    }

    body.skin-time .chapter-side-bar {
        position: relative !important;
        left: auto !important;
        width: 100%;
        margin-top: 12px;
    }

    body.skin-time .chapter-block-list > .content-parent:nth-child(n) {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ==================GRÜNER-NINJA-SKIN V3: BRICK DOJO================== */
body.skin-lloyd {
    --skin-label: "NINJA-SKIN AKTIV\A GRÜNER NINJA FREIGESCHALTET";
    --skin-font-heading: "Permanent Marker", "Bangers", cursive;
    --skin-font-body: "Rajdhani", sans-serif;
    --skin-heading-transform: none;
    --skin-heading-spacing: .015em;
    --skin-bg-solid: #031108;
    --skin-surface: #062313;
    --skin-surface-alt: #0a3219;
    --skin-ink: #f4ffe8;
    --skin-muted: #bdd4b3;
    --skin-accent: #75d432;
    --skin-accent-strong: #238629;
    --skin-accent-soft: #a6f05d;
    --skin-accent-2: #d4ac36;
    --skin-border: #6a8f2f;
    --skin-page-bg:
        linear-gradient(rgba(0, 12, 5, .48), rgba(0, 9, 4, .62)),
        url('/assets/skin-banners/lloyd-green-brick-tile-v3.png') 0 0 / 680px 680px repeat;
    --skin-pattern: none;
    --skin-pattern-size: auto;
    --skin-pattern-opacity: 0;
    --skin-nav-ink: #f7ffe9;
    --skin-hero-image: url('/assets/skin-banners/lloyd-brick-dojo-v2.png');
    --skin-hero-height: 356px;
    --skin-profile-size: 154px;
    --skin-profile-top: 41%;
    --skin-profile-left: 50%;
    --skin-profile-translate: translate(-50%, -50%);
    --skin-hero-position: center 12%;
    --skin-hero-overlay: rgba(0, 13, 7, .08);
    --skin-hero-border: 6px solid #5aa928;
    --skin-radius: 3px 20px 3px 20px;
    --skin-button-radius: 3px 13px 3px 13px;
    --skin-card-shadow: 0 20px 48px rgba(0, 0, 0, .46), inset 0 0 34px rgba(108, 216, 49, .035);
    color: #f4ffe8;
}

body.skin-lloyd main {
    position: relative;
    isolation: isolate;
}

body.skin-lloyd::before {
    display: none !important;
}

body.skin-lloyd .user-header-wrapper {
    border-bottom-color: #61bd2c !important;
    box-shadow:
        inset 0 -45px 70px rgba(0, 0, 0, .62),
        inset 0 0 75px rgba(94, 220, 45, .06),
        0 8px 0 #173b16 !important;
}

body.skin-lloyd .user-header-wrapper::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 46px;
    z-index: 2;
    pointer-events: none;
    opacity: .88;
    background:
        radial-gradient(circle, #668f2b 0 5px, #142e12 5.5px 8px, transparent 8.5px) 0 0 / 32px 22px repeat-x,
        linear-gradient(180deg, rgba(14, 57, 20, .2), #061509);
    border-top: 2px solid rgba(206, 173, 56, .72);
}

body.skin-lloyd .user-header-wrapper::after {
    right: clamp(26px, 7vw, 126px) !important;
    bottom: 78px !important;
    min-width: 250px;
    padding: 14px 22px 12px 24px !important;
    white-space: pre-line;
    border: 2px solid #b28d29 !important;
    border-left-width: 6px !important;
    border-radius: 3px 22px 3px 22px !important;
    color: #9eef52 !important;
    background:
        radial-gradient(circle, rgba(114, 205, 52, .25) 0 4px, transparent 4.5px) 12px 10px / 26px 26px,
        linear-gradient(110deg, rgba(4, 28, 13, .97), rgba(12, 55, 22, .93)) !important;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .07em !important;
    text-shadow: 0 2px 8px #000;
    box-shadow: 0 16px 32px rgba(0, 0, 0, .42), inset 0 0 28px rgba(117, 212, 50, .08);
}

body.skin-lloyd .main-container-header {
    position: absolute;
    top: 18px;
    left: auto;
    right: clamp(16px, 3vw, 54px);
    width: max-content;
    max-width: calc(100% - 32px);
    height: 62px;
    min-height: 62px;
    padding: 6px 8px;
    gap: 4px;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid rgba(181, 148, 43, .72) !important;
    border-bottom: 3px solid #477e27 !important;
    border-radius: 3px 18px 3px 18px;
    background:
        radial-gradient(circle, rgba(112, 198, 53, .2) 0 3px, transparent 3.5px) 8px 7px / 24px 24px,
        linear-gradient(110deg, rgba(2, 19, 8, .95), rgba(7, 42, 17, .93)) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .42), inset 0 0 22px rgba(107, 210, 49, .05) !important;
    backdrop-filter: blur(10px);
}

body.skin-lloyd .main-container-header .home,
body.skin-lloyd .main-container-header .header-button,
body.skin-lloyd .main-container-header .global-settings-button {
    width: auto;
    min-width: 38px;
    min-height: 38px;
    margin: 0;
    padding: 5px 8px;
    justify-content: center;
    border-radius: 3px 10px 3px 10px;
    color: #f7ffe9 !important;
}

body.skin-lloyd .main-container-header .home {
    margin-right: 5px;
    padding-right: 12px;
    justify-content: flex-start;
    border-right: 1px solid rgba(156, 195, 86, .28);
}

body.skin-lloyd .main-container-header .iiigel-icon {
    width: 55px;
    filter: brightness(0) invert(1) drop-shadow(0 2px 5px rgba(0, 0, 0, .6));
}

body.skin-lloyd .main-container-header .iiigel-icon-text {
    color: #f7ffe9 !important;
    text-shadow: 0 2px 6px #000;
}

body.skin-lloyd .main-container-header .header-button:hover,
body.skin-lloyd .main-container-header .global-settings-button:hover {
    color: #a8ef5f !important;
    background: rgba(99, 201, 46, .12) !important;
}

body.skin-lloyd .main-container-header .header-home {
    color: #a7ec66 !important;
}

body.skin-lloyd .main-container-header .header-home-underline {
    border-color: #79d938 !important;
    box-shadow: 0 0 8px rgba(121, 217, 56, .75);
}

body.skin-lloyd .main-container-header .logoutBtn {
    padding-inline: 13px;
    border: 1px solid rgba(196, 163, 55, .72);
}

body.skin-lloyd .main-container-header .logoutBtn img {
    filter: brightness(0) invert(1);
}

body.skin-lloyd .header-user-info {
    width: 310px;
    align-items: center;
}

body.skin-lloyd .header-user-info #profilePicture {
    position: relative;
    margin: 0;
    border: 5px solid #5fd136 !important;
    outline: 5px solid rgba(193, 157, 40, .88);
    outline-offset: 5px;
    background: #07190d;
    box-shadow:
        0 0 0 12px rgba(10, 55, 19, .86),
        0 0 0 15px rgba(103, 174, 45, .7),
        0 18px 36px rgba(0, 0, 0, .62) !important;
}

body.skin-lloyd .header-user-info #profilePicture::after {
    content: "";
    position: absolute;
    inset: -16px;
    z-index: -1;
    border-radius: 50%;
    background: repeating-conic-gradient(#b58d25 0 9deg, #336f25 9deg 18deg);
}

body.skin-lloyd #profileTextContainer {
    min-width: 292px;
    margin-top: 15px;
    padding: 10px 26px 8px;
    border: 2px solid #789a2f;
    border-left: 6px solid #c6a232;
    border-radius: 3px 14px 3px 14px;
    background: linear-gradient(110deg, rgba(3, 27, 12, .97), rgba(10, 62, 24, .95));
    box-shadow: 0 14px 28px rgba(0, 0, 0, .5), inset 0 0 18px rgba(114, 215, 50, .08);
}

body.skin-lloyd .header-user-info .user-info {
    padding: 0;
    color: #fbfff4 !important;
    background: transparent;
    font-size: 22px;
    font-weight: 700;
    text-shadow: 0 2px 8px #000;
}

body.skin-lloyd .header-user-info .user-role {
    margin-top: 5px;
}

body.skin-lloyd .header-user-info .user-info-role {
    color: #d4e9c6 !important;
    font-size: 15px;
}

body.skin-lloyd .level-bar-wrapper {
    margin-top: -42px !important;
    margin-left: clamp(24px, 10vw, 170px) !important;
    z-index: 70 !important;
}

body.skin-lloyd #levelBar {
    width: 310px !important;
    border: 2px solid #9b7b25 !important;
    background: linear-gradient(105deg, #f4f4e8, #dfe9d0) !important;
    box-shadow: 0 8px 0 #173315, 0 16px 30px rgba(0, 0, 0, .38) !important;
}

body.skin-lloyd #levelBar > span {
    background: #0a1c0c !important;
    border-color: #93aa79 !important;
}

body.skin-lloyd #myLvl {
    color: #ecffd9 !important;
    background: #1f7c28 !important;
    border-color: #d0a82d !important;
}

body.skin-lloyd #myXP {
    color: #276b25 !important;
    font-weight: 700 !important;
}

body.skin-lloyd #myXPbar {
    background: linear-gradient(90deg, #2e912a, #8bd53e) !important;
    box-shadow: 0 0 8px rgba(102, 205, 52, .5);
}

body.skin-lloyd .chapter-page-content {
    max-width: 1640px;
    margin-inline: auto;
    padding: 42px clamp(22px, 4.5vw, 76px) 90px !important;
}

body.skin-lloyd .chapter-top {
    position: relative;
    min-height: 104px;
    padding: 14px 0 22px;
    border-bottom: 1px solid rgba(115, 204, 55, .38);
}

body.skin-lloyd .chapter-top .course-context-label {
    left: 0;
    width: 390px;
    margin-top: -194px !important;
    padding: 10px 18px 12px;
    border-left: 6px solid #a9d846;
    background: linear-gradient(90deg, rgba(3, 25, 10, .94), rgba(5, 33, 14, .72), transparent);
    text-shadow: 0 3px 8px #000;
}

body.skin-lloyd .chapter-top .course-context-label h2 {
    margin: 0;
    color: #f8fff1 !important;
    font-family: "Permanent Marker", cursive !important;
    font-size: clamp(28px, 2.4vw, 41px) !important;
    line-height: 1.05;
    transform: rotate(-1deg);
}

body.skin-lloyd .chapter-top h1 {
    margin: 0 390px 0 42px;
    color: #f5ffed !important;
    font-family: "Permanent Marker", cursive !important;
    font-size: clamp(35px, 3vw, 50px);
    font-weight: 400;
    line-height: 1.1;
    text-shadow: 0 3px 10px #000, 2px 2px 0 rgba(24, 92, 30, .72);
    transform: rotate(-.6deg);
}

body.skin-lloyd .chapter-top .back-to-chapter,
body.skin-lloyd .chapter-top .back-to-chapter i {
    color: #eaffda !important;
}

body.skin-lloyd .chapter-button-collection {
    top: 10px;
    right: 0;
    min-height: 50px;
    border: 1px solid rgba(113, 211, 54, .7) !important;
    border-radius: 3px 15px 3px 15px !important;
    background: linear-gradient(110deg, rgba(3, 29, 12, .96), rgba(10, 52, 20, .94)) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .34), inset 0 0 18px rgba(120, 221, 57, .05) !important;
}

body.skin-lloyd .chapter-button-collection i:not(.red-color) {
    color: #8ee64e !important;
}

body.skin-lloyd .chapter-side-bar {
    right: 0 !important;
    width: 360px;
    border: 2px solid #708d2f !important;
    border-radius: 3px 17px 3px 17px !important;
    color: #f2ffe7 !important;
    background:
        radial-gradient(circle, rgba(99, 182, 45, .18) 0 4px, transparent 4.5px) 8px 8px / 28px 28px,
        linear-gradient(110deg, rgba(4, 29, 12, .99), rgba(10, 48, 19, .98)) !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, .4), inset 0 0 24px rgba(115, 217, 51, .045) !important;
}

body.skin-lloyd .chapter-side-bar,
body.skin-lloyd .chapter-side-bar * {
    color: #efffe4 !important;
}

body.skin-lloyd .chapter-container.expanded .chapter-side-bar {
    position: absolute !important;
    height: 550px !important;
    z-index: 30;
    border-color: #a0cf3f !important;
    box-shadow: 0 25px 58px rgba(0, 0, 0, .58), inset 0 0 30px rgba(113, 212, 50, .07) !important;
}

body.skin-lloyd .chapter-container.expanded .chapter-content,
body.skin-lloyd .chapter-page-content.expanded .chapter-content-wrapper,
body.skin-lloyd .chapter-container.expanded .computed-content,
body.skin-lloyd .chapter-container.expanded .chapter-viewable,
body.skin-lloyd .chapter-container.expanded .chapter-block-list {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
}

body.skin-lloyd .chapter-container.expanded .open-chapter-overview i {
    color: #d5ad36 !important;
    transform: rotate(180deg) !important;
}

body.skin-lloyd .chapter-content {
    margin-top: 34px;
    transform: none;
}

body.skin-lloyd .chapter-block-list > .content-parent {
    position: relative;
    overflow: hidden;
    border: 2px solid #537d2a !important;
    border-radius: 3px 18px 3px 18px !important;
    color: #efffe9 !important;
    background:
        radial-gradient(circle, rgba(113, 201, 54, .22) 0 4px, rgba(3, 21, 9, .3) 4.5px 7px, transparent 7.5px) 0 0 / 30px 22px repeat-x,
        radial-gradient(circle, rgba(113, 201, 54, .18) 0 4px, rgba(3, 21, 9, .3) 4.5px 7px, transparent 7.5px) 0 100% / 30px 22px repeat-x,
        linear-gradient(120deg, rgba(3, 24, 10, .99), rgba(5, 45, 18, .98) 58%, rgba(2, 27, 12, .99)) !important;
    box-shadow: 0 22px 48px rgba(0, 0, 0, .48), inset 0 0 38px rgba(106, 211, 48, .045) !important;
}

body.skin-lloyd .chapter-block-list > .content-parent + .content-parent {
    margin-top: 20px;
}

body.skin-lloyd .chapter-block-list > .content-parent:nth-child(even) {
    width: 96%;
    margin-left: auto;
    border-right: 6px solid #b3922e !important;
}

body.skin-lloyd .chapter-block-list > .content-parent:nth-child(odd) {
    width: 97.5%;
    margin-right: auto;
    border-left: 6px solid #70c933 !important;
}

body.skin-lloyd .chapter-content .content-parent:not([type="2"]),
body.skin-lloyd .chapter-content .content-parent:not([type="2"]) *:not(.ql-syntax):not(.ql-syntax *) {
    color: #efffe9 !important;
}

body.skin-lloyd .chapter-content .content-parent[type="2"],
body.skin-lloyd .chapter-content .content-parent[type="2"] .quiz-wrapper,
body.skin-lloyd .chapter-content .content-parent[type="2"] .memory-wrapper,
body.skin-lloyd .chapter-content .content-parent[type="2"] .memory-wrappper {
    color: #efffe9 !important;
    background-color: #062512 !important;
}

body.skin-lloyd .chapter-content .content-parent h1,
body.skin-lloyd .chapter-content .content-parent h2,
body.skin-lloyd .chapter-content .content-parent h3 {
    color: #f7fff1 !important;
    text-shadow: 0 3px 8px rgba(0, 0, 0, .7);
}

body.skin-lloyd .chapter-content .content-parent h1 {
    font-family: "Permanent Marker", cursive !important;
    font-weight: 400;
}

body.skin-lloyd .chapter-content strong,
body.skin-lloyd .chapter-content b,
body.skin-lloyd .chapter-content a {
    color: #a6ef57 !important;
}

body.skin-lloyd .main-button,
body.skin-lloyd .quiz-button,
body.skin-lloyd .button-quiz,
body.skin-lloyd .color-main,
body.skin-lloyd .btn-floating:not(.white) {
    border: 1px solid #b7942d !important;
    color: #071406 !important;
    background: linear-gradient(135deg, #a7ed54, #67bd31) !important;
    box-shadow: 0 8px 20px rgba(89, 184, 44, .26) !important;
}

body.skin-lloyd .dialog .dialog-content.settings-dialog {
    color: #efffe9 !important;
    background: linear-gradient(135deg, #051b0d, #0a3017) !important;
    border-color: #78952e !important;
}

body.skin-lloyd .dialog .dialog-content.settings-dialog h1 {
    color: #a5ea56 !important;
}

body.skin-lloyd .global-settings-dialog label {
    color: #c2d9b6 !important;
}

body.skin-lloyd .global-settings-dialog select,
body.skin-lloyd .global-settings-dialog select option {
    color: #efffe9 !important;
    background: #071c0e !important;
}

@media (max-width: 1100px) {
    body.skin-lloyd {
        --skin-profile-size: 132px;
    }

    body.skin-lloyd .main-container-header {
        left: auto;
        right: 18px;
    }

    body.skin-lloyd .user-header-wrapper::after {
        right: 22px !important;
        min-width: 220px;
        font-size: 14px !important;
    }

    body.skin-lloyd .chapter-top .course-context-label {
        width: 310px;
    }

    body.skin-lloyd .chapter-top h1 {
        margin-right: 330px;
    }

    body.skin-lloyd .chapter-side-bar {
        width: 320px;
    }

}

@media (max-width: 720px) {
    body.skin-lloyd {
        --skin-hero-height: 304px;
        --skin-profile-size: 106px;
        --skin-profile-top: 43%;
    }

    body.skin-lloyd .main-container-header {
        top: 8px;
        left: auto;
        right: 8px;
        width: max-content;
        max-width: calc(100% - 16px);
        height: 50px;
        min-height: 50px;
        gap: 3px;
    }

    body.skin-lloyd .main-container-header .iiigel-icon-text,
    body.skin-lloyd .main-container-header .header-button > div,
    body.skin-lloyd .main-container-header .global-settings-button + .header-button .header-home-text > div,
    body.skin-lloyd .user-header-wrapper::after,
    body.skin-lloyd .chapter-top .course-context-label {
        display: none !important;
    }

    body.skin-lloyd .main-container-header .home,
    body.skin-lloyd .main-container-header .header-button,
    body.skin-lloyd .main-container-header .global-settings-button {
        min-width: 34px;
        min-height: 34px;
        padding: 3px 6px;
    }

    body.skin-lloyd .main-container-header .iiigel-icon {
        width: 39px;
    }

    body.skin-lloyd .header-user-info {
        width: 220px;
    }

    body.skin-lloyd #profileTextContainer {
        min-width: 210px;
        padding: 7px 12px;
    }

    body.skin-lloyd .header-user-info .user-info {
        font-size: 18px;
    }

    body.skin-lloyd .header-user-info .user-role {
        display: none;
    }

    body.skin-lloyd .level-bar-wrapper {
        margin-left: 10px !important;
        transform: scale(.82);
        transform-origin: left center;
    }

    body.skin-lloyd .chapter-page-content {
        padding: 36px 12px 65px !important;
    }

    body.skin-lloyd .chapter-top {
        min-height: 164px;
    }

    body.skin-lloyd .chapter-top h1 {
        margin: 0 0 16px 42px;
        font-size: 33px;
    }

    body.skin-lloyd .chapter-button-collection {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        margin-top: 16px;
    }

    body.skin-lloyd .chapter-side-bar {
        position: relative !important;
        right: auto !important;
        width: 100%;
        margin-top: 12px;
    }

    body.skin-lloyd .chapter-container.expanded .chapter-side-bar {
        position: relative !important;
    }

    body.skin-lloyd .chapter-block-list > .content-parent:nth-child(n) {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

}

/* ==================KAPITEL HINZUFÜGEN: SKINÜBERGREIFENDER KONTRAST================== */
/* Sicherer Standard für Skins ohne eigene Buttondefinition. */
.chapter-side-bar #add-chapter.white {
    min-height: 40px;
    padding: 7px 12px !important;
    border: 2px solid #7fb0ef !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #185abc, #0b3f8a) !important;
    box-shadow: 0 8px 18px rgba(5, 42, 96, .3) !important;
    font-family: var(--skin-font-body, "Roboto", Arial, sans-serif) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

.chapter-side-bar #add-chapter.white i,
.chapter-side-bar #add-chapter.white .btn-text {
    color: #ffffff !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

.chapter-side-bar #add-chapter.white i.material-icons {
    flex: 0 0 25px;
    font-family: "Material Icons" !important;
    font-weight: normal !important;
    font-style: normal !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    white-space: nowrap;
}

.chapter-side-bar #add-chapter.white .btn-text {
    font-family: var(--skin-font-body, "Roboto", Arial, sans-serif) !important;
    line-height: 1.2;
    white-space: nowrap;
}

.chapter-side-bar #add-chapter.white:hover {
    filter: brightness(1.12);
}

.chapter-side-bar #add-chapter.white:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

/* Die gecrafteten Skins verwenden ihre eigene dunkle Akzentfarbe mit weißer Schrift. */
:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .chapter-side-bar #add-chapter.white {
    border-color: var(--skin-accent-2, var(--skin-accent-soft)) !important;
    color: #ffffff !important;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--skin-accent-strong) 88%, #000000),
        color-mix(in srgb, var(--skin-accent-strong) 62%, #000000)
    ) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--skin-accent-strong) 38%, transparent) !important;
}

:is(
    body.skin-medical,
    body.skin-schlappen,
    body.skin-survival,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-indi,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-force,
    body.skin-galaxy,
    body.skin-aviation,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber
) .chapter-side-bar #add-chapter.white :is(i, .btn-text) {
    color: #ffffff !important;
}

/* ==================INDI-SKIN V3: TEMPEL-EXPEDITION================== */
body.skin-indi {
    --skin-label: "EXPEDITION AKTIV\A TEMPELARCHIV";
    --skin-font-heading: "Bangers", "Archivo Black", sans-serif;
    --skin-font-body: "Barlow Condensed", "Barlow", sans-serif;
    --skin-heading-transform: uppercase;
    --skin-heading-spacing: -.015em;
    --skin-bg-solid: #4b2b12;
    --skin-surface: #e4c58e;
    --skin-surface-alt: #d2a96b;
    --skin-ink: #321906;
    --skin-muted: #74502d;
    --skin-accent: #c66b19;
    --skin-accent-strong: #71320e;
    --skin-accent-soft: #eda93f;
    --skin-accent-2: #821f13;
    --skin-border: #704018;
    --skin-page-bg:
        linear-gradient(rgba(83, 43, 13, .13), rgba(55, 27, 8, .2)),
        url('/assets/skin-banners/indi-expedition-map-tile-v2.png') 0 0 / 880px 880px repeat;
    --skin-pattern: none;
    --skin-pattern-opacity: 0;
    --skin-nav-ink: #f8dfaa;
    --skin-hero-height: 402px;
    --skin-profile-size: 158px;
    --skin-profile-top: 42%;
    --skin-profile-left: 50%;
    --skin-profile-translate: translate(-50%, -50%);
    --skin-hero-position: center 54%;
    --skin-hero-overlay: rgba(44, 21, 5, .08);
    --skin-hero-border: 7px solid #8f4512;
    --skin-radius: 2px 15px 2px 15px;
    --skin-button-radius: 3px 10px 3px 10px;
    --skin-card-shadow: 0 20px 44px rgba(56, 26, 6, .34), inset 0 0 28px rgba(97, 49, 13, .06);
    color: #321906;
}

body.skin-indi::before {
    display: none !important;
}

body.skin-indi main {
    position: relative;
    isolation: isolate;
}

body.skin-indi .user-header-wrapper {
    border-bottom-color: #7b3510 !important;
    box-shadow:
        inset 0 -52px 75px rgba(35, 15, 3, .62),
        inset 0 0 60px rgba(235, 170, 58, .06),
        0 7px 0 #3b1c08 !important;
}

body.skin-indi .user-header-wrapper::after {
    top: 22px !important;
    right: clamp(22px, 4vw, 72px) !important;
    bottom: auto !important;
    min-width: 265px;
    padding: 11px 18px 10px !important;
    white-space: pre-line;
    border: 2px solid rgba(126, 77, 28, .82) !important;
    border-radius: 2px !important;
    color: #3b230f !important;
    background:
        linear-gradient(rgba(242, 220, 174, .91), rgba(219, 184, 126, .91)),
        url('/assets/skin-banners/indi-expedition-map-tile-v2.png') center / 520px 520px repeat !important;
    font-family: "Special Elite", monospace !important;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .1em !important;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 244, 211, .65);
    box-shadow: 0 10px 22px rgba(35, 15, 3, .28), inset 0 0 16px rgba(91, 45, 12, .06);
    transform: rotate(.6deg);
}

body.skin-indi .main-container-header {
    position: absolute;
    top: 315px;
    left: 8%;
    width: 84%;
    height: 72px;
    min-height: 72px;
    padding: 0 24px;
    gap: clamp(10px, 1.5vw, 25px);
    flex-flow: row nowrap;
    align-items: center;
    border: 1px solid rgba(220, 175, 92, .48) !important;
    border-top-color: rgba(247, 211, 142, .62) !important;
    border-radius: 2px 12px 2px 12px;
    color: #f8dfaa !important;
    background: linear-gradient(90deg, rgba(12, 13, 9, .76), rgba(29, 26, 16, .68) 48%, rgba(11, 12, 8, .76)) !important;
    box-shadow: 0 12px 26px rgba(23, 12, 3, .32), inset 0 1px 0 rgba(255, 230, 174, .14) !important;
    backdrop-filter: blur(11px);
}

body.skin-indi .main-container-header .home {
    margin-right: auto;
}

body.skin-indi .main-container-header .home,
body.skin-indi .main-container-header .header-button,
body.skin-indi .main-container-header .global-settings-button {
    width: auto;
    min-height: 40px;
    margin-block: 0;
    padding: 6px 10px;
    border-radius: 2px 8px 2px 8px;
    color: #f8dfaa !important;
}

body.skin-indi .main-container-header .header-button,
body.skin-indi .main-container-header .header-button > div,
body.skin-indi .main-container-header .material-icons,
body.skin-indi .main-container-header .iiigel-icon-text {
    color: #f8dfaa !important;
    font-family: "Barlow Condensed", sans-serif !important;
    text-shadow: 0 2px 4px rgba(22, 8, 1, .82);
}

body.skin-indi .main-container-header .material-icons {
    font-family: "Material Icons" !important;
}

body.skin-indi .main-container-header .iiigel-icon {
    width: 58px;
    filter: brightness(0) invert(91%) sepia(32%) saturate(739%) hue-rotate(339deg) brightness(100%) contrast(94%);
}

body.skin-indi .main-container-header .header-button:hover,
body.skin-indi .main-container-header .global-settings-button:hover {
    color: #ffd377 !important;
    background: rgba(234, 163, 51, .12) !important;
}

body.skin-indi .main-container-header .header-home-underline {
    border-color: #db8b27 !important;
    box-shadow: 0 0 8px rgba(219, 139, 39, .6);
}

body.skin-indi .main-container-header .logoutBtn {
    border: 1px solid rgba(224, 166, 75, .65);
}

body.skin-indi .main-container-header .logoutBtn img {
    filter: brightness(0) invert(91%) sepia(32%) saturate(739%) hue-rotate(339deg) brightness(100%) contrast(94%);
}

body.skin-indi .header-user-info {
    width: 330px;
    align-items: center;
}

body.skin-indi .header-user-info #profilePicture {
    margin: 0;
    border: 6px solid #a95112 !important;
    outline: 5px solid #5f3516;
    outline-offset: 4px;
    background: #2b1508;
    box-shadow: 0 0 0 12px rgba(202, 121, 35, .34), 0 18px 38px rgba(36, 15, 3, .56) !important;
}

body.skin-indi #profileTextContainer {
    min-width: 310px;
    margin-top: 14px;
    padding: 7px 22px 8px;
    border: 0;
    border-top: 1px solid rgba(241, 201, 126, .56);
    border-bottom: 2px solid rgba(171, 103, 34, .76);
    border-radius: 0;
    background: linear-gradient(90deg, transparent, rgba(17, 15, 9, .72) 14% 86%, transparent);
    box-shadow: none;
}

body.skin-indi .header-user-info .user-info {
    padding: 0;
    color: #ffe7b2 !important;
    background: transparent;
    font-family: "Barlow Condensed", sans-serif !important;
    font-size: 24px;
    font-weight: 700;
    text-shadow: 0 2px 5px #1d0b02;
}

body.skin-indi .header-user-info .user-role {
    margin-top: 5px;
}

body.skin-indi .header-user-info .user-info-role {
    color: #f1cd8e !important;
    font-size: 16px;
}

body.skin-indi .level-bar-wrapper {
    margin-top: 14px !important;
    margin-left: clamp(22px, 7vw, 118px) !important;
    z-index: 70 !important;
}

body.skin-indi #levelBar {
    width: 315px !important;
    border: 2px solid #8e602d !important;
    border-radius: 4px 18px 4px 18px !important;
    background:
        linear-gradient(rgba(241, 218, 173, .94), rgba(215, 177, 116, .95)),
        url('/assets/skin-banners/indi-expedition-map-tile-v2.png') center / 520px 520px repeat !important;
    box-shadow: 0 8px 0 rgba(79, 44, 16, .28), 0 14px 26px rgba(48, 22, 5, .25) !important;
}

body.skin-indi #levelBar > span {
    background: #1e1007 !important;
    border-color: #9d6a36 !important;
}

body.skin-indi #myLvl {
    color: #3a1d08 !important;
    background: #d99a3d !important;
    border-color: #5b2d0c !important;
}

body.skin-indi #myXP {
    color: #4b2a11 !important;
    font-family: "Barlow Condensed", sans-serif !important;
    font-weight: 700 !important;
}

body.skin-indi #myXPbar {
    background: linear-gradient(90deg, #8a2b12, #d67d21, #f0b94f) !important;
    box-shadow: 0 0 8px rgba(218, 126, 32, .44);
}

body.skin-indi .chapter-page-content {
    max-width: 1680px;
    margin-inline: auto;
    padding: 50px clamp(22px, 4vw, 68px) 96px !important;
}

body.skin-indi .chapter-top {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "context context context"
        "back title actions";
    align-items: center;
    column-gap: 14px;
    row-gap: 13px;
    min-height: 150px;
    padding: 16px 0 24px;
    border-top: 1px solid rgba(94, 48, 14, .35);
    border-bottom: 2px dashed rgba(115, 55, 16, .48);
}

body.skin-indi .chapter-top::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 7px;
    opacity: .32;
    background: repeating-linear-gradient(90deg, #8f2916 0 12px, transparent 12px 22px);
}

body.skin-indi .chapter-top .course-context-label {
    position: relative !important;
    grid-area: context;
    left: 0;
    width: 440px;
    margin: 0 !important;
    padding: 0 0 0 18px;
    border-left: 7px solid #8b2415;
    background: linear-gradient(90deg, rgba(18, 16, 10, .58), transparent 88%);
}

body.skin-indi .chapter-top .course-context-label::before {
    content: "ARCHÄOLOGISCHE EXPEDITION  /  FELDAKTE";
    display: block;
    margin-bottom: 4px;
    color: #f0c477;
    font-family: "Special Elite", monospace !important;
    font-size: 10px;
    letter-spacing: .15em;
}

body.skin-indi .chapter-top .course-context-label h2,
body.skin-indi .chapter-top h1 {
    color: #f3a62d !important;
    font-family: "Bangers", "Archivo Black", sans-serif !important;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: .025em;
    -webkit-text-stroke: .8px #6f1e10;
    text-shadow: 2px 3px 0 #8a2512, 4px 6px 0 rgba(48, 20, 4, .62);
}

body.skin-indi .chapter-top .course-context-label h2 {
    margin: 0;
    font-size: clamp(34px, 3vw, 52px) !important;
    line-height: 1;
}

body.skin-indi .chapter-top h1 {
    grid-area: title;
    margin: 0 !important;
    font-size: clamp(43px, 3.5vw, 63px);
    line-height: 1.05;
    transform: skewX(-7deg);
}

body.skin-indi .chapter-top .back-to-chapter {
    grid-area: back;
}

body.skin-indi .chapter-top .back-to-chapter,
body.skin-indi .chapter-top .back-to-chapter i {
    color: #6f1f10 !important;
}

body.skin-indi .chapter-button-collection {
    position: relative;
    grid-area: actions;
    top: auto;
    right: 0;
    min-height: 52px;
    border: 2px solid #8f541d !important;
    border-radius: 3px 12px 3px 12px !important;
    color: #f5d79d !important;
    background: linear-gradient(180deg, rgba(93, 49, 16, .98), rgba(46, 21, 6, .98)) !important;
    box-shadow: 0 12px 25px rgba(51, 23, 5, .36), inset 0 1px 0 rgba(255, 218, 145, .18) !important;
}

body.skin-indi .chapter-button-collection i:not(.red-color) {
    color: #e9ad50 !important;
}

body.skin-indi .chapter-side-bar {
    right: 0 !important;
    width: 375px;
    transform: rotate(.18deg);
    border: 3px double #704018 !important;
    border-radius: 2px 15px 2px 15px !important;
    color: #321906 !important;
    background:
        linear-gradient(rgba(233, 202, 148, .91), rgba(221, 181, 119, .94)),
        url('/assets/skin-banners/indi-expedition-map-tile-v2.png') center / 620px 620px repeat !important;
    box-shadow: 0 18px 38px rgba(54, 25, 6, .34), inset 0 0 25px rgba(91, 45, 12, .07) !important;
}

body.skin-indi .chapter-side-bar,
body.skin-indi .chapter-side-bar *:not(.material-icons) {
    color: #321906 !important;
}

body.skin-indi .chapter-side-bar h1 {
    font-family: "Special Elite", monospace !important;
    letter-spacing: .04em;
}

body.skin-indi .chapter-side-bar .chapter-list-item {
    border-color: rgba(83, 43, 14, .54) !important;
    background: rgba(247, 224, 180, .46) !important;
}

body.skin-indi .chapter-container.expanded .chapter-side-bar {
    position: absolute !important;
    height: 550px !important;
    z-index: 30;
    box-shadow: 0 26px 58px rgba(48, 21, 5, .5), inset 0 0 28px rgba(91, 45, 12, .08) !important;
}

body.skin-indi .chapter-container.expanded .chapter-content,
body.skin-indi .chapter-page-content.expanded .chapter-content-wrapper,
body.skin-indi .chapter-container.expanded .computed-content,
body.skin-indi .chapter-container.expanded .chapter-viewable,
body.skin-indi .chapter-container.expanded .chapter-block-list {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
}

body.skin-indi .chapter-container.expanded .open-chapter-overview i {
    color: #8a2512 !important;
    transform: rotate(180deg) !important;
}

body.skin-indi .chapter-content {
    margin-top: 34px;
    transform: none;
}

body.skin-indi .chapter-block-list > .content-parent {
    position: relative;
    overflow: hidden;
    border: 3px double #744317 !important;
    border-radius: 2px 16px 2px 16px !important;
    color: #321906 !important;
    background:
        linear-gradient(rgba(236, 205, 151, .92), rgba(222, 181, 116, .94)),
        url('/assets/skin-banners/indi-expedition-map-tile-v2.png') center / 760px 760px repeat !important;
    box-shadow: 0 22px 46px rgba(60, 28, 7, .34), inset 0 0 32px rgba(91, 45, 12, .075) !important;
}

body.skin-indi .chapter-block-list > .content-parent::before {
    background: linear-gradient(#8a2415, #b85b1c, #7a1d12) !important;
}

body.skin-indi .chapter-block-list > .content-parent:nth-child(odd) {
    width: 97%;
    margin-right: auto;
}

body.skin-indi .chapter-block-list > .content-parent:nth-child(even) {
    width: 95%;
    margin-left: auto;
}

body.skin-indi .chapter-block-list > .content-parent + .content-parent {
    margin-top: 22px;
}

body.skin-indi .chapter-content .content-parent,
body.skin-indi .chapter-content .content-parent *:not(.material-icons):not(.material-icons-outlined):not(.ql-syntax):not(.ql-syntax *) {
    color: #321906 !important;
}

body.skin-indi .chapter-content .content-parent h1,
body.skin-indi .chapter-content .content-parent h2,
body.skin-indi .chapter-content .content-parent h3 {
    color: #5c220d !important;
    font-family: "Bangers", "Archivo Black", sans-serif !important;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: .025em;
    text-shadow: 1px 2px 0 rgba(255, 224, 161, .45);
}

body.skin-indi .chapter-content strong,
body.skin-indi .chapter-content b,
body.skin-indi .chapter-content a {
    color: #7c2113 !important;
}

body.skin-indi .chapter-side-bar #add-chapter.white {
    border-color: #d69a42 !important;
    color: #fff0c9 !important;
    background: linear-gradient(135deg, #74340f, #351706) !important;
    box-shadow: 0 8px 18px rgba(55, 23, 5, .35) !important;
}

body.skin-indi .chapter-side-bar #add-chapter.white :is(i, .btn-text) {
    color: #fff0c9 !important;
}

body.skin-indi .dialog .dialog-content.settings-dialog {
    color: #321906 !important;
    background:
        linear-gradient(rgba(237, 207, 156, .96), rgba(220, 179, 115, .97)),
        url('/assets/skin-banners/indi-expedition-map-tile-v2.png') center / 720px 720px repeat !important;
    border-color: #744317 !important;
}

body.skin-indi .dialog .dialog-content.settings-dialog h1 {
    color: #6c250d !important;
}

body.skin-indi .global-settings-dialog label {
    color: #68421f !important;
}

body.skin-indi .global-settings-dialog select,
body.skin-indi .global-settings-dialog select option {
    color: #321906 !important;
    background: #e6c58c !important;
}

@media (max-width: 1100px) {
    body.skin-indi {
        --skin-profile-size: 136px;
    }

    body.skin-indi .main-container-header {
        left: 4%;
        width: 92%;
    }

    body.skin-indi .user-header-wrapper::after {
        min-width: 220px;
        font-size: 12px !important;
    }

    body.skin-indi .chapter-top .course-context-label {
        width: 340px;
    }

    body.skin-indi .chapter-top h1 {
        margin: 0 !important;
    }

    body.skin-indi .chapter-side-bar {
        width: 330px;
    }
}

@media (max-width: 720px) {
    body.skin-indi {
        --skin-hero-height: 330px;
        --skin-profile-size: 108px;
        --skin-profile-top: 39%;
        --skin-profile-left: 26%;
        --skin-profile-translate: translate(-50%, -50%);
    }

    body.skin-indi .main-container-header {
        top: 258px;
        left: 10px;
        width: calc(100% - 20px);
        height: 60px;
        min-height: 60px;
        padding: 5px 8px;
        gap: 3px;
    }

    body.skin-indi .main-container-header .iiigel-icon-text,
    body.skin-indi .main-container-header .header-button > div,
    body.skin-indi .user-header-wrapper::after,
    body.skin-indi .chapter-top .course-context-label {
        display: none !important;
    }

    body.skin-indi .main-container-header .home,
    body.skin-indi .main-container-header .header-button,
    body.skin-indi .main-container-header .global-settings-button {
        min-width: 38px;
        min-height: 38px;
        padding: 3px 6px;
    }

    body.skin-indi .main-container-header .iiigel-icon {
        width: 42px;
    }

    body.skin-indi .header-user-info {
        width: 190px;
    }

    body.skin-indi #profileTextContainer {
        min-width: 190px;
        padding: 6px 10px;
    }

    body.skin-indi .header-user-info .user-info {
        font-size: 19px;
    }

    body.skin-indi .header-user-info .user-role {
        display: none;
    }

    body.skin-indi .level-bar-wrapper {
        margin-left: 8px !important;
        transform: scale(.82);
        transform-origin: left center;
    }

    body.skin-indi .chapter-page-content {
        padding: 38px 12px 68px !important;
    }

    body.skin-indi .chapter-top {
        display: flex;
        flex-wrap: wrap;
        min-height: 176px;
    }

    body.skin-indi .chapter-top h1 {
        width: calc(100% - 54px);
        margin: 0 0 18px 0 !important;
        font-size: 34px;
    }

    body.skin-indi .chapter-button-collection {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        margin-top: 16px;
    }

    body.skin-indi .chapter-side-bar,
    body.skin-indi .chapter-container.expanded .chapter-side-bar {
        position: relative !important;
        right: auto !important;
        width: 100%;
        margin-top: 12px;
        transform: none;
    }

    body.skin-indi .chapter-block-list > .content-parent:nth-child(n) {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ==================TECH-SKIN V3: MAKER LAB / BLUEPRINT================== */
body.skin-tech {
    --skin-label: "MAKER LAB  //  SYSTEM ONLINE";
    --skin-font-heading: "Oxanium", sans-serif;
    --skin-font-body: "Outfit", Arial, sans-serif;
    --skin-heading-transform: uppercase;
    --skin-heading-spacing: .045em;
    --skin-bg-solid: #061427;
    --skin-surface: #0b213b;
    --skin-surface-alt: #102c4b;
    --skin-ink: #eef9ff;
    --skin-muted: #9eb8ce;
    --skin-accent: #27d8ff;
    --skin-accent-strong: #087db3;
    --skin-accent-soft: #83ecff;
    --skin-accent-2: #8b63ff;
    --skin-border: #2777a3;
    --skin-page-bg:
        radial-gradient(circle at 82% 4%, rgba(139, 99, 255, .18), transparent 27%),
        radial-gradient(circle at 12% 34%, rgba(39, 216, 255, .12), transparent 30%),
        linear-gradient(rgba(38, 138, 185, .13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(38, 138, 185, .13) 1px, transparent 1px),
        linear-gradient(145deg, #061426, #0a1c34 56%, #101636);
    --skin-pattern:
        linear-gradient(rgba(105, 218, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(105, 218, 255, .08) 1px, transparent 1px),
        radial-gradient(circle, rgba(137, 99, 255, .6) 0 2px, transparent 2.5px);
    --skin-pattern-size: 96px 96px, 96px 96px, 192px 192px;
    --skin-pattern-opacity: .62;
    --skin-nav-ink: #eaf9ff;
    --skin-hero-height: 390px;
    --skin-profile-size: 146px;
    --skin-profile-top: 56%;
    --skin-profile-left: clamp(34px, 5.5vw, 104px);
    --skin-profile-translate: translateY(-50%);
    --skin-hero-position: center 52%;
    --skin-hero-overlay: rgba(8, 30, 69, .08);
    --skin-hero-border: 4px solid #27d8ff;
    --skin-radius: 4px 20px 4px 20px;
    --skin-button-radius: 4px 12px 4px 12px;
    --skin-card-shadow: 0 22px 52px rgba(0, 5, 18, .42), inset 0 1px 0 rgba(137, 224, 255, .08);
    color: #eef9ff;
}

body.skin-tech::before {
    z-index: -1;
}

body.skin-tech main {
    position: relative;
    isolation: isolate;
}

body.skin-tech .user-header-wrapper {
    border-bottom-color: #27d8ff !important;
    box-shadow:
        inset 0 -82px 96px rgba(3, 20, 48, .38),
        inset 0 0 55px rgba(89, 114, 255, .09),
        0 9px 0 rgba(74, 74, 210, .38) !important;
}

body.skin-tech .user-header-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(3, 18, 43, .42), transparent 36%),
        repeating-linear-gradient(0deg, transparent 0 47px, rgba(103, 220, 255, .075) 48px 49px);
}

body.skin-tech .user-header-wrapper::after {
    right: 286px !important;
    bottom: 23px !important;
    padding: 8px 14px !important;
    border: 1px solid rgba(121, 232, 255, .72) !important;
    border-radius: 2px 13px 2px 13px !important;
    color: #dffaff !important;
    background: rgba(4, 31, 64, .72) !important;
    font-family: "Oxanium", sans-serif !important;
    font-size: 11px !important;
    letter-spacing: .14em !important;
    box-shadow: inset 0 0 18px rgba(39, 216, 255, .09), 0 8px 22px rgba(0, 12, 32, .28);
    backdrop-filter: blur(9px);
}

/* Eine geschlossene Werkzeugkonsole statt auseinanderfallender Einzelbuttons. */
body.skin-tech .main-container-header {
    position: absolute;
    top: 20px;
    right: 24px;
    left: auto;
    width: 246px;
    height: auto;
    min-height: 344px;
    margin: 0;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    border: 1px solid rgba(111, 220, 255, .7) !important;
    border-left-width: 4px !important;
    border-radius: 4px 22px 4px 22px;
    color: #eaf9ff !important;
    background:
        linear-gradient(155deg, rgba(6, 30, 63, .94), rgba(14, 26, 61, .9)) !important;
    box-shadow: 0 18px 42px rgba(1, 12, 34, .42), inset 0 0 28px rgba(39, 216, 255, .065) !important;
    backdrop-filter: blur(14px);
}

body.skin-tech .main-container-header::before {
    content: "CONTROL NODE / 09";
    padding: 2px 5px 8px;
    border-bottom: 1px solid rgba(94, 213, 255, .26);
    color: #7eeaff;
    font-family: "Outfit", Arial, sans-serif;
    font-size: 9px;
    letter-spacing: .15em;
}

body.skin-tech .main-container-header #chapterGroupName {
    display: none;
}

body.skin-tech .main-container-header .home,
body.skin-tech .main-container-header .header-button,
body.skin-tech .main-container-header .global-settings-button {
    position: relative;
    top: auto;
    width: 100% !important;
    min-height: 43px;
    margin: 0 !important;
    padding: 7px 10px;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 3px 10px 3px 10px;
    color: #eaf9ff !important;
    background: rgba(20, 68, 108, .2) !important;
}

body.skin-tech .main-container-header .home {
    min-height: 62px;
    border-color: rgba(120, 225, 255, .28);
    background: rgba(17, 72, 116, .28) !important;
}

body.skin-tech .main-container-header .home:hover,
body.skin-tech .main-container-header .header-button:hover,
body.skin-tech .main-container-header .global-settings-button:hover {
    border-color: rgba(118, 230, 255, .72);
    background: rgba(30, 137, 183, .25) !important;
}

body.skin-tech .main-container-header .iiigel-icon {
    width: 52px;
    filter: brightness(0) invert(82%) sepia(44%) saturate(990%) hue-rotate(156deg) brightness(103%) contrast(102%);
}

body.skin-tech .main-container-header .iiigel-icon-text,
body.skin-tech .main-container-header .header-button,
body.skin-tech .main-container-header .header-button > div,
body.skin-tech .main-container-header .material-icons {
    color: #eaf9ff !important;
    font-size: 15px;
    text-shadow: 0 2px 6px rgba(0, 8, 25, .7);
}

body.skin-tech .main-container-header,
body.skin-tech .main-container-header *:not(.material-icons):not(.material-icons-outlined) {
    font-family: "Outfit", Arial, sans-serif !important;
}

body.skin-tech .main-container-header .material-icons {
    font-family: "Material Icons" !important;
    color: #67e5ff !important;
}

body.skin-tech .main-container-header .global-settings-button::after {
    content: "Einstellungen";
    color: #eaf9ff;
    font-family: "Outfit", Arial, sans-serif;
    font-size: 14px;
}

body.skin-tech .main-container-header .header-home {
    flex-direction: row;
    align-items: center;
}

body.skin-tech .main-container-header .header-home-underline {
    display: none !important;
}

body.skin-tech .main-container-header .logoutBtn {
    margin-top: auto !important;
    border-color: rgba(139, 99, 255, .68);
    background: rgba(73, 45, 139, .24) !important;
}

body.skin-tech .main-container-header .logoutBtn img {
    width: 22px;
    filter: brightness(0) invert(82%) sepia(44%) saturate(990%) hue-rotate(156deg) brightness(103%) contrast(102%);
}

body.skin-tech .header-user-info {
    width: min(610px, calc(100vw - 340px));
    flex-direction: row;
    align-items: center;
}

body.skin-tech .header-user-info #profilePicture {
    margin: 0;
    border: 4px solid #2cddff !important;
    border-radius: 20% !important;
    outline: 3px solid rgba(139, 99, 255, .85);
    outline-offset: 4px;
    clip-path: polygon(12% 0, 88% 0, 100% 12%, 100% 88%, 88% 100%, 12% 100%, 0 88%, 0 12%);
    background: #07172c;
    box-shadow: 0 0 28px rgba(40, 216, 255, .38), 0 18px 36px rgba(1, 14, 37, .38) !important;
}

body.skin-tech .header-user-info #profile-picture {
    border-radius: 17% !important;
}

body.skin-tech .header-user-info .head-container {
    margin: 0 0 0 20px;
}

body.skin-tech #profileTextContainer,
body.skin-tech .header-user-info .user-role {
    padding: 7px 13px 8px;
    border-left: 3px solid #27d8ff;
    border-radius: 2px 9px 2px 9px;
    background: rgba(5, 28, 59, .78);
    box-shadow: inset 0 0 18px rgba(39, 216, 255, .055), 0 8px 20px rgba(0, 12, 31, .22);
    backdrop-filter: blur(7px);
}

body.skin-tech .header-user-info .user-role {
    margin-left: 9px;
    border-left-color: #8b63ff;
}

body.skin-tech .header-user-info .user-info,
body.skin-tech .header-user-info .user-info-role {
    padding: 0;
    color: #edfbff !important;
    background: transparent;
    text-shadow: 0 2px 7px rgba(0, 8, 24, .7);
}

body.skin-tech .header-user-info .user-info-name {
    font-family: "Oxanium", sans-serif !important;
    font-size: 25px;
    font-weight: 700;
}

body.skin-tech .header-user-info .user-info-role {
    color: #c8baff !important;
    font-size: 14px;
}

body.skin-tech .level-bar-wrapper {
    margin-top: 15px !important;
    margin-left: clamp(18px, 5vw, 96px) !important;
    z-index: 70 !important;
}

body.skin-tech #levelBar {
    width: 306px !important;
    border: 1px solid rgba(91, 218, 255, .65) !important;
    border-left: 5px solid #27d8ff !important;
    border-radius: 3px 16px 3px 16px !important;
    background: linear-gradient(135deg, rgba(7, 34, 65, .97), rgba(17, 33, 76, .96)) !important;
    box-shadow: 0 12px 28px rgba(0, 11, 30, .35), inset 0 0 18px rgba(39, 216, 255, .07) !important;
}

body.skin-tech #levelBar > span {
    border-color: rgba(113, 218, 255, .35) !important;
    background: #031124 !important;
}

body.skin-tech #myLvl {
    color: #07182b !important;
    background: #66e5ff !important;
    border-color: #d8faff !important;
}

body.skin-tech #myXP {
    color: #e9faff !important;
    font-family: "Oxanium", sans-serif !important;
    font-weight: 700 !important;
}

body.skin-tech #myXPbar {
    background: linear-gradient(90deg, #25d7ff, #8170ff) !important;
    box-shadow: 0 0 10px rgba(44, 217, 255, .58);
}

body.skin-tech .chapter-page-content {
    max-width: 1700px;
    margin-inline: auto;
    padding: 46px clamp(22px, 4vw, 70px) 100px !important;
}

body.skin-tech .chapter-top {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "context context actions"
        "back title actions";
    align-items: center;
    column-gap: 13px;
    row-gap: 9px;
    min-height: 132px;
    margin: 24px 0 32px;
    padding: 18px 22px;
    border: 1px solid rgba(63, 184, 230, .43);
    border-left: 5px solid #27d8ff;
    border-radius: 3px 18px 3px 18px;
    background: linear-gradient(100deg, rgba(8, 33, 60, .91), rgba(12, 29, 61, .7));
    box-shadow: 0 18px 38px rgba(0, 9, 27, .3), inset 0 1px 0 rgba(143, 227, 255, .08);
}

body.skin-tech .chapter-top::before {
    content: "ACTIVE BUILD / LESSON MODULE";
    position: absolute;
    top: -14px;
    right: 18px;
    padding: 2px 8px;
    border: 1px solid rgba(63, 184, 230, .28);
    border-radius: 2px 7px 2px 7px;
    background: #081d36;
    color: rgba(131, 236, 255, .36);
    font-size: 8px;
    letter-spacing: .15em;
}

body.skin-tech .chapter-top .course-context-label {
    position: relative !important;
    grid-area: context;
    left: auto;
    width: auto;
    margin: 0 !important;
    color: #8bdfff !important;
    font-size: 11px !important;
    letter-spacing: .09em;
    text-transform: uppercase;
}

body.skin-tech .chapter-top .course-context-label::before {
    content: "PROJECT / ";
    color: #957cff;
}

body.skin-tech .chapter-top .course-context-label h2 {
    display: inline;
    margin: 0;
    color: #8bdfff !important;
    font-family: "Outfit", Arial, sans-serif !important;
    font-size: 12px !important;
    letter-spacing: .12em;
}

body.skin-tech .chapter-top .back-to-chapter {
    grid-area: back;
}

body.skin-tech .chapter-top .back-to-chapter,
body.skin-tech .chapter-top .back-to-chapter i {
    color: #73e8ff !important;
}

body.skin-tech .chapter-top h1 {
    grid-area: title;
    margin: 0 !important;
    color: #f1fbff !important;
    font-family: "Oxanium", sans-serif !important;
    font-size: clamp(31px, 3vw, 50px) !important;
    font-weight: 700;
    line-height: 1.08;
    text-shadow: 0 0 18px rgba(39, 216, 255, .18);
}

body.skin-tech .chapter-button-collection {
    position: relative;
    grid-area: actions;
    top: auto;
    right: auto;
    min-height: 54px;
    padding: 11px 14px;
    gap: 24px;
    border: 1px solid rgba(84, 214, 255, .54) !important;
    border-radius: 3px 14px 3px 14px !important;
    background: rgba(6, 27, 56, .9) !important;
    box-shadow: inset 0 0 17px rgba(39, 216, 255, .06), 0 11px 25px rgba(0, 8, 25, .32) !important;
}

body.skin-tech .chapter-button-collection i:not(.red-color) {
    color: #45ddff !important;
}

body.skin-tech .chapter-side-bar {
    right: 0 !important;
    width: 390px;
    border: 1px solid rgba(69, 206, 255, .55) !important;
    border-left: 4px solid #8b63ff !important;
    border-radius: 3px 17px 3px 17px !important;
    color: #eaf9ff !important;
    background:
        linear-gradient(rgba(7, 31, 61, .95), rgba(13, 28, 61, .96)),
        linear-gradient(rgba(74, 205, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 205, 255, .08) 1px, transparent 1px) !important;
    background-size: auto, 28px 28px, 28px 28px !important;
    box-shadow: 0 18px 38px rgba(0, 8, 27, .38), inset 0 0 22px rgba(39, 216, 255, .055) !important;
}

body.skin-tech .chapter-side-bar,
body.skin-tech .chapter-side-bar *:not(.material-icons) {
    color: #eaf9ff !important;
}

body.skin-tech .chapter-side-bar h1 {
    font-family: "Oxanium", sans-serif !important;
    letter-spacing: .07em;
}

body.skin-tech .chapter-side-bar .chapter-list-item {
    border-color: rgba(89, 187, 224, .35) !important;
    background: rgba(18, 58, 91, .5) !important;
}

body.skin-tech .chapter-container.expanded .chapter-side-bar {
    position: absolute !important;
    height: 550px !important;
    z-index: 30;
}

body.skin-tech .chapter-container.expanded .chapter-content,
body.skin-tech .chapter-page-content.expanded .chapter-content-wrapper,
body.skin-tech .chapter-container.expanded .computed-content,
body.skin-tech .chapter-container.expanded .chapter-viewable,
body.skin-tech .chapter-container.expanded .chapter-block-list {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
}

body.skin-tech .chapter-content {
    margin-top: 38px;
}

body.skin-tech .chapter-block-list > .content-parent:not([type="2"]) {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(61, 181, 224, .48) !important;
    border-left: 5px solid #27d8ff !important;
    border-radius: 3px 22px 3px 22px !important;
    color: #edf9ff !important;
    background:
        linear-gradient(125deg, rgba(9, 35, 64, .97), rgba(15, 30, 65, .96)) !important;
    box-shadow: 0 24px 50px rgba(0, 7, 24, .4), inset 0 1px 0 rgba(137, 225, 255, .075) !important;
}

body.skin-tech .chapter-block-list > .content-parent:not([type="2"])::before {
    background: linear-gradient(#28d9ff, #765dff) !important;
}

body.skin-tech .chapter-block-list > .content-parent:nth-child(even):not([type="2"]) {
    border-left-color: #8b63ff !important;
}

body.skin-tech .chapter-block-list > .content-parent + .content-parent {
    margin-top: 24px;
}

/* Auch gespeicherte schwarze Editorfarben werden auf den dunklen Modulen lesbar. */
body.skin-tech .chapter-content .content-parent:not([type="2"]),
body.skin-tech .chapter-content .content-parent:not([type="2"]) .ql-editor,
body.skin-tech .chapter-content .content-parent:not([type="2"]) .ql-editor > :not(.chapter-file-card),
body.skin-tech .chapter-content .content-parent:not([type="2"]) .ql-editor > :not(.chapter-file-card) *:not(input):not(textarea):not(select):not(option):not(button) {
    color: #edf9ff !important;
}

body.skin-tech .chapter-content .content-parent:not([type="2"]) :is(h1, h2, h3, h4) {
    color: #f4fcff !important;
    font-family: "Oxanium", sans-serif !important;
    text-transform: uppercase;
    letter-spacing: .035em;
}

body.skin-tech .chapter-content .content-parent:not([type="2"]) :is(a, strong, b) {
    color: #71e8ff !important;
}

body.skin-tech .chapter-content .iiigel-text-box {
    color: #edf9ff !important;
    background: rgba(17, 48, 83, .88) !important;
    box-shadow: inset 0 0 18px rgba(39, 216, 255, .055);
}

body.skin-tech .chapter-content .chapter-file-card,
body.skin-tech .chapter-content .chapter-file-name {
    color: #1f2937 !important;
}

body.skin-tech .chapter-content .chapter-file-meta {
    color: #667085 !important;
}

body.skin-tech .chapter-content .chapter-file-download,
body.skin-tech .chapter-content .chapter-file-download * {
    color: #ffffff !important;
}

body.skin-tech .chapter-side-bar #add-chapter.white {
    border-color: #59dfff !important;
    color: #061629 !important;
    background: linear-gradient(135deg, #7ceaff, #b8f5ff) !important;
    box-shadow: 0 0 18px rgba(39, 216, 255, .24) !important;
}

body.skin-tech .chapter-side-bar #add-chapter.white :is(i, .btn-text) {
    color: #061629 !important;
}

body.skin-tech .dialog .dialog-content.settings-dialog {
    color: #eaf9ff !important;
    background: linear-gradient(145deg, #0a223e, #121d43) !important;
    border-color: #36bde8 !important;
}

body.skin-tech .dialog .dialog-content.settings-dialog h1,
body.skin-tech .global-settings-dialog label {
    color: #eaf9ff !important;
}

body.skin-tech .global-settings-dialog select,
body.skin-tech .global-settings-dialog select option {
    color: #eefaff !important;
    background: #0b2340 !important;
}

@media (max-width: 1050px) {
    body.skin-tech {
        --skin-profile-size: 126px;
        --skin-profile-left: 32px;
    }

    body.skin-tech .main-container-header {
        right: 14px;
        width: 224px;
    }

    body.skin-tech .user-header-wrapper::after {
        right: 252px !important;
    }

    body.skin-tech .header-user-info {
        width: calc(100vw - 275px);
    }

    body.skin-tech .chapter-side-bar {
        width: 340px;
    }
}

@media (max-width: 720px) {
    body.skin-tech {
        --skin-hero-height: 330px;
        --skin-profile-size: 105px;
        --skin-profile-top: 60%;
        --skin-profile-left: 18px;
    }

    body.skin-tech .main-container-header {
        top: 10px;
        left: 10px;
        right: 10px;
        width: auto;
        min-height: 58px;
        height: 58px;
        padding: 6px 8px;
        flex-direction: row;
        gap: 4px;
        border-left-width: 1px !important;
    }

    body.skin-tech .main-container-header::before,
    body.skin-tech .main-container-header .iiigel-icon-text,
    body.skin-tech .main-container-header .header-button > div,
    body.skin-tech .main-container-header .global-settings-button::after,
    body.skin-tech .user-header-wrapper::after {
        display: none !important;
    }

    body.skin-tech .main-container-header .home,
    body.skin-tech .main-container-header .header-button,
    body.skin-tech .main-container-header .global-settings-button {
        width: auto !important;
        min-width: 40px;
        min-height: 40px;
        padding: 5px 7px;
        justify-content: center;
    }

    body.skin-tech .main-container-header .home {
        margin-right: auto !important;
    }

    body.skin-tech .main-container-header .iiigel-icon {
        width: 43px;
    }

    body.skin-tech .main-container-header .logoutBtn {
        margin-top: 0 !important;
    }

    body.skin-tech .header-user-info {
        width: calc(100vw - 30px);
    }

    body.skin-tech .header-user-info .head-container {
        margin-left: 13px;
    }

    body.skin-tech .header-user-info .user-role {
        display: none;
    }

    body.skin-tech .header-user-info .user-info-name {
        font-size: 17px;
    }

    body.skin-tech .level-bar-wrapper {
        margin-left: 7px !important;
        transform: scale(.83);
        transform-origin: left center;
    }

    body.skin-tech .chapter-page-content {
        padding: 34px 12px 70px !important;
    }

    body.skin-tech .chapter-top {
        display: flex;
        flex-wrap: wrap;
        padding: 16px 13px;
    }

    body.skin-tech .chapter-top .course-context-label {
        width: 100%;
    }

    body.skin-tech .chapter-top h1 {
        width: calc(100% - 48px);
        font-size: 28px !important;
    }

    body.skin-tech .chapter-button-collection {
        width: 100%;
        margin-top: 12px;
        justify-content: space-around;
    }

    body.skin-tech .chapter-side-bar,
    body.skin-tech .chapter-container.expanded .chapter-side-bar {
        position: relative !important;
        right: auto !important;
        width: 100%;
        margin-top: 12px;
    }
}

/* ==================GAMER-SKIN V3: NEON ESPORTS ARENA================== */
/*
 * Die technische Skin-ID bleibt aus Kompatibilitätsgründen "ninja".
 * Sichtbar ist dieser Skin vollständig als Gamer-/E-Sport-Skin gestaltet.
 */
body.skin-ninja {
    --skin-label: "GAMER-SKIN AKTIV\A RANKED LEARNING ONLINE";
    --skin-font-heading: "Russo One", sans-serif;
    --skin-font-body: "Rajdhani", Arial, sans-serif;
    --skin-heading-transform: none;
    --skin-heading-spacing: .018em;
    --skin-bg-solid: #020714;
    --skin-surface: #07152b;
    --skin-surface-alt: #0b1d38;
    --skin-ink: #eef8ff;
    --skin-muted: #9dafc4;
    --skin-accent: #16dbff;
    --skin-accent-strong: #086da7;
    --skin-accent-soft: #79edff;
    --skin-accent-2: #d72cff;
    --skin-border: #245988;
    --skin-page-bg:
        radial-gradient(circle at 84% 7%, rgba(215, 44, 255, .17), transparent 28%),
        radial-gradient(circle at 14% 36%, rgba(22, 219, 255, .12), transparent 31%),
        linear-gradient(rgba(26, 111, 169, .105) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 111, 169, .105) 1px, transparent 1px),
        linear-gradient(145deg, #020713, #061126 54%, #100725);
    --skin-pattern:
        linear-gradient(135deg, transparent 0 48%, rgba(27, 124, 188, .07) 49% 51%, transparent 52%),
        radial-gradient(circle, rgba(24, 220, 255, .58) 0 1.5px, transparent 2px),
        radial-gradient(circle, rgba(221, 44, 255, .5) 0 1.5px, transparent 2px);
    --skin-pattern-size: 64px 64px, 127px 113px, 173px 149px;
    --skin-pattern-opacity: .7;
    --skin-nav-ink: #f1f8ff;
    --skin-hero-height: 422px;
    --skin-profile-size: 154px;
    --skin-profile-top: 45%;
    --skin-profile-left: 50%;
    --skin-profile-right: auto;
    --skin-profile-translate: translate(-50%, -50%);
    --skin-hero-position: center 57%;
    --skin-hero-overlay: rgba(1, 7, 20, .08);
    --skin-hero-border: 3px solid #16dbff;
    --skin-radius: 3px 18px 3px 18px;
    --skin-button-radius: 3px 10px 3px 10px;
    --skin-card-shadow: 0 24px 54px rgba(0, 2, 14, .5), inset 0 1px 0 rgba(100, 224, 255, .07);
    color: #eef8ff;
}

body.skin-ninja main {
    position: relative;
    isolation: isolate;
}

body.skin-ninja .user-header-wrapper {
    border-bottom-color: #16dbff !important;
    box-shadow:
        inset 0 -100px 105px rgba(1, 7, 25, .58),
        inset 0 0 65px rgba(121, 35, 231, .09),
        0 8px 0 rgba(184, 38, 255, .52) !important;
}

body.skin-ninja .user-header-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(1, 5, 16, .28), transparent 32%, transparent 67%, rgba(1, 5, 16, .22)),
        repeating-linear-gradient(0deg, transparent 0 51px, rgba(43, 154, 221, .055) 52px 53px);
}

body.skin-ninja .user-header-wrapper::after {
    left: auto !important;
    right: clamp(24px, 4vw, 76px) !important;
    bottom: 25px !important;
    min-width: 280px;
    padding: 10px 17px 9px !important;
    white-space: pre-line;
    border: 1px solid rgba(47, 222, 255, .72) !important;
    border-right: 4px solid #d72cff !important;
    border-radius: 3px 15px 3px 15px !important;
    color: #e9faff !important;
    background: linear-gradient(120deg, rgba(4, 20, 48, .88), rgba(28, 9, 54, .84)) !important;
    font-family: "Russo One", sans-serif !important;
    font-size: 12px !important;
    line-height: 1.35;
    letter-spacing: .08em !important;
    text-align: center;
    text-shadow: 0 0 10px rgba(22, 219, 255, .36);
    box-shadow: 0 12px 28px rgba(0, 3, 18, .42), inset 0 0 18px rgba(22, 219, 255, .055);
    backdrop-filter: blur(10px);
}

/* Flaches Turnier-HUD über dem Banner. */
body.skin-ninja .main-container-header {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    width: 100%;
    height: 78px;
    min-height: 78px;
    margin: 0;
    padding: 10px clamp(24px, 5vw, 92px);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(8px, 1.4vw, 22px);
    border: 0 !important;
    border-bottom: 1px solid rgba(32, 191, 241, .44) !important;
    border-radius: 0;
    background: linear-gradient(180deg, rgba(1, 6, 18, .97), rgba(3, 12, 30, .79)) !important;
    box-shadow: 0 8px 25px rgba(0, 2, 13, .38), inset 0 -1px 0 rgba(211, 44, 255, .24) !important;
    backdrop-filter: blur(10px);
}

body.skin-ninja .main-container-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: linear-gradient(90deg, #16dbff, transparent 35%, transparent 65%, #d72cff);
    box-shadow: 0 0 12px rgba(31, 215, 255, .55);
}

body.skin-ninja .main-container-header #chapterGroupName {
    display: none;
}

body.skin-ninja .main-container-header .home {
    width: auto;
    margin-right: auto !important;
    gap: 10px;
}

body.skin-ninja .main-container-header .iiigel-icon {
    width: 60px;
    filter: brightness(0) invert(78%) sepia(83%) saturate(1919%) hue-rotate(146deg) brightness(102%) contrast(105%);
}

body.skin-ninja .main-container-header .iiigel-icon-text {
    display: block;
    color: #effaff !important;
    font-family: "Rajdhani", Arial, sans-serif !important;
    font-size: 22px;
    font-weight: 600;
}

body.skin-ninja .main-container-header .header-button,
body.skin-ninja .main-container-header .global-settings-button {
    position: relative;
    top: auto;
    width: auto;
    min-width: 42px;
    min-height: 42px;
    margin: 0;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 3px 9px 3px 9px;
    color: #eaf8ff !important;
    background: rgba(7, 25, 51, .42) !important;
}

body.skin-ninja .main-container-header .header-button,
body.skin-ninja .main-container-header .header-button > div,
body.skin-ninja .main-container-header .material-icons {
    color: #eaf8ff !important;
    font-family: "Rajdhani", Arial, sans-serif !important;
    font-size: 17px;
    font-weight: 600;
}

body.skin-ninja .main-container-header .material-icons {
    color: #3fe2ff !important;
    font-family: "Material Icons" !important;
}

body.skin-ninja .main-container-header .header-button:hover,
body.skin-ninja .main-container-header .global-settings-button:hover {
    border-color: rgba(47, 222, 255, .58);
    background: rgba(16, 76, 117, .34) !important;
}

body.skin-ninja .main-container-header .header-home {
    flex-direction: row;
}

body.skin-ninja .main-container-header .header-home-underline {
    display: none !important;
}

body.skin-ninja .main-container-header .logoutBtn {
    border-color: rgba(224, 49, 255, .72);
    background: rgba(83, 17, 102, .24) !important;
}

body.skin-ninja .main-container-header .logoutBtn img {
    width: 22px;
    filter: brightness(0) invert(81%) sepia(100%) saturate(2072%) hue-rotate(274deg) brightness(107%) contrast(102%);
}

body.skin-ninja .header-user-info {
    width: 370px;
    align-items: center;
    z-index: 8;
}

body.skin-ninja .header-user-info #profilePicture {
    margin: 0;
    border: 4px solid #19dcff !important;
    outline: 4px solid rgba(196, 44, 255, .88);
    outline-offset: 5px;
    background: #030a1b;
    box-shadow:
        0 0 0 10px rgba(20, 70, 150, .38),
        0 0 34px rgba(22, 219, 255, .58),
        0 20px 38px rgba(0, 2, 14, .58) !important;
}

body.skin-ninja #profileTextContainer {
    min-width: 300px;
    margin-top: 17px;
    padding: 6px 20px 8px;
    border: 0;
    border-top: 1px solid rgba(44, 220, 255, .68);
    border-bottom: 2px solid rgba(208, 45, 255, .74);
    border-radius: 0;
    background: linear-gradient(90deg, transparent, rgba(3, 13, 34, .82) 13% 87%, transparent);
}

body.skin-ninja .header-user-info .user-role {
    margin-top: 5px;
}

body.skin-ninja .header-user-info .user-info {
    padding: 0;
    color: #f3fbff !important;
    background: transparent;
    font-family: "Rajdhani", Arial, sans-serif !important;
    text-align: center;
    text-shadow: 0 2px 8px #000716;
}

body.skin-ninja .header-user-info .user-info-name {
    font-family: "Russo One", sans-serif !important;
    font-size: 23px;
}

body.skin-ninja .header-user-info .user-info-role {
    color: #b99aff !important;
    font-size: 15px;
}

body.skin-ninja .level-bar-wrapper {
    margin-top: 15px !important;
    margin-left: clamp(20px, 5vw, 94px) !important;
    z-index: 70 !important;
}

body.skin-ninja #levelBar {
    width: 310px !important;
    border: 1px solid rgba(41, 219, 255, .62) !important;
    border-left: 5px solid #16dbff !important;
    border-right: 4px solid #d72cff !important;
    border-radius: 3px 17px 3px 17px !important;
    background: linear-gradient(120deg, rgba(4, 20, 47, .98), rgba(24, 8, 49, .97)) !important;
    box-shadow: 0 13px 29px rgba(0, 2, 17, .42), inset 0 0 18px rgba(22, 219, 255, .055) !important;
}

body.skin-ninja #levelBar > span {
    border-color: rgba(112, 217, 255, .36) !important;
    background: #020a18 !important;
}

body.skin-ninja #myLvl {
    color: #020b18 !important;
    background: #4be5ff !important;
    border-color: #e5fbff !important;
}

body.skin-ninja #myXP {
    color: #effaff !important;
    font-family: "Russo One", sans-serif !important;
    font-weight: 400 !important;
}

body.skin-ninja #myXPbar {
    background: linear-gradient(90deg, #16dbff, #8266ff 60%, #e22aff) !important;
    box-shadow: 0 0 11px rgba(30, 218, 255, .58);
}

body.skin-ninja .chapter-page-content {
    max-width: 1700px;
    margin-inline: auto;
    padding: 46px clamp(22px, 4vw, 70px) 100px !important;
}

body.skin-ninja .chapter-top {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "context context actions"
        "back title actions";
    align-items: center;
    column-gap: 14px;
    row-gap: 9px;
    min-height: 134px;
    margin: 25px 0 34px;
    padding: 19px 23px;
    border: 1px solid rgba(38, 196, 241, .42);
    border-left: 5px solid #16dbff;
    border-right: 4px solid #d72cff;
    border-radius: 3px 19px 3px 19px;
    background: linear-gradient(105deg, rgba(4, 22, 49, .94), rgba(23, 7, 47, .82));
    box-shadow: 0 20px 42px rgba(0, 2, 18, .4), inset 0 1px 0 rgba(83, 224, 255, .075);
}

body.skin-ninja .chapter-top::before {
    content: "MATCH LOBBY  /  ACTIVE LESSON";
    position: absolute;
    top: -14px;
    right: 18px;
    padding: 3px 9px;
    border: 1px solid rgba(48, 204, 247, .34);
    border-radius: 2px 8px 2px 8px;
    color: #67e8ff;
    background: #061329;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .11em;
}

body.skin-ninja .chapter-top .course-context-label {
    position: relative !important;
    grid-area: context;
    left: auto;
    width: auto;
    margin: 0 !important;
    color: #7feaff !important;
    font-family: "Rajdhani", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

body.skin-ninja .chapter-top .course-context-label::before {
    content: "QUEUE / ";
    color: #dd62ff;
}

body.skin-ninja .chapter-top .course-context-label h2 {
    display: inline;
    margin: 0;
    color: #8ceeff !important;
    font-family: "Rajdhani", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700;
    letter-spacing: .1em;
}

body.skin-ninja .chapter-top .back-to-chapter {
    grid-area: back;
}

body.skin-ninja .chapter-top .back-to-chapter,
body.skin-ninja .chapter-top .back-to-chapter i {
    color: #51e3ff !important;
}

body.skin-ninja .chapter-top h1 {
    grid-area: title;
    margin: 0 !important;
    color: #f3fbff !important;
    font-family: "Russo One", sans-serif !important;
    font-size: clamp(31px, 3vw, 50px) !important;
    line-height: 1.08;
    text-shadow: 0 0 18px rgba(22, 219, 255, .18);
}

body.skin-ninja .chapter-button-collection {
    position: relative;
    grid-area: actions;
    top: auto;
    right: auto;
    min-height: 55px;
    padding: 11px 14px;
    gap: 24px;
    border: 1px solid rgba(48, 214, 255, .52) !important;
    border-radius: 3px 14px 3px 14px !important;
    background: linear-gradient(115deg, rgba(4, 24, 53, .94), rgba(35, 9, 61, .91)) !important;
    box-shadow: 0 12px 27px rgba(0, 2, 17, .42), inset 0 0 18px rgba(24, 218, 255, .055) !important;
}

body.skin-ninja .chapter-button-collection i:not(.red-color) {
    color: #3de2ff !important;
}

body.skin-ninja .chapter-side-bar {
    right: 0 !important;
    width: 400px;
    transform: none;
    border: 1px solid rgba(49, 208, 251, .53) !important;
    border-left: 4px solid #d72cff !important;
    border-radius: 3px 17px 3px 17px !important;
    color: #eef9ff !important;
    background:
        linear-gradient(rgba(4, 22, 50, .96), rgba(25, 8, 49, .97)),
        linear-gradient(rgba(48, 189, 241, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(48, 189, 241, .08) 1px, transparent 1px) !important;
    background-size: auto, 28px 28px, 28px 28px !important;
    box-shadow: 0 19px 42px rgba(0, 2, 18, .46), inset 0 0 24px rgba(22, 219, 255, .05) !important;
}

body.skin-ninja .chapter-side-bar,
body.skin-ninja .chapter-side-bar *:not(.material-icons) {
    color: #eef9ff !important;
}

body.skin-ninja .chapter-side-bar h1 {
    font-family: "Russo One", sans-serif !important;
    letter-spacing: .045em;
}

body.skin-ninja .chapter-side-bar .chapter-list-item {
    border-color: rgba(67, 170, 216, .4) !important;
    background: rgba(16, 51, 87, .48) !important;
}

body.skin-ninja .chapter-container.expanded .chapter-side-bar {
    position: absolute !important;
    height: 550px !important;
    z-index: 30;
}

body.skin-ninja .chapter-container.expanded .chapter-content,
body.skin-ninja .chapter-page-content.expanded .chapter-content-wrapper,
body.skin-ninja .chapter-container.expanded .computed-content,
body.skin-ninja .chapter-container.expanded .chapter-viewable,
body.skin-ninja .chapter-container.expanded .chapter-block-list {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
}

body.skin-ninja .chapter-content {
    margin-top: 38px;
}

body.skin-ninja .chapter-block-list > .content-parent:not([type="2"]) {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(44, 190, 235, .48) !important;
    border-left: 5px solid #16dbff !important;
    border-radius: 3px 22px 3px 22px !important;
    color: #eef9ff !important;
    background:
        radial-gradient(circle at 88% 10%, rgba(214, 44, 255, .08), transparent 27%),
        linear-gradient(125deg, rgba(4, 23, 51, .98), rgba(18, 8, 43, .97)) !important;
    box-shadow: 0 25px 54px rgba(0, 2, 17, .48), inset 0 1px 0 rgba(91, 225, 255, .07) !important;
}

body.skin-ninja .chapter-block-list > .content-parent:not([type="2"])::before {
    background: linear-gradient(#16dbff, #7962ff 55%, #dc2cff) !important;
}

body.skin-ninja .chapter-block-list > .content-parent:nth-child(even):not([type="2"]) {
    border-left-color: #d72cff !important;
}

body.skin-ninja .chapter-block-list > .content-parent + .content-parent {
    margin-top: 24px;
}

/* Inline gespeicherte dunkle Editorfarben werden auf dem HUD lesbar. */
body.skin-ninja .chapter-content .content-parent:not([type="2"]),
body.skin-ninja .chapter-content .content-parent:not([type="2"]) .ql-editor,
body.skin-ninja .chapter-content .content-parent:not([type="2"]) .ql-editor > :not(.chapter-file-card),
body.skin-ninja .chapter-content .content-parent:not([type="2"]) .ql-editor > :not(.chapter-file-card) *:not(input):not(textarea):not(select):not(option):not(button) {
    color: #eef9ff !important;
}

body.skin-ninja .chapter-content .content-parent:not([type="2"]) :is(h1, h2, h3, h4) {
    color: #f4fbff !important;
    font-family: "Russo One", sans-serif !important;
    text-shadow: 0 0 15px rgba(25, 216, 255, .13);
}

body.skin-ninja .chapter-content .content-parent:not([type="2"]) :is(a, strong, b) {
    color: #5ee7ff !important;
}

body.skin-ninja .chapter-content .iiigel-text-box {
    color: #eef9ff !important;
    background: rgba(12, 40, 76, .88) !important;
    box-shadow: inset 0 0 18px rgba(24, 218, 255, .055);
}

body.skin-ninja .chapter-content .chapter-file-card,
body.skin-ninja .chapter-content .chapter-file-name {
    color: #1f2937 !important;
}

body.skin-ninja .chapter-content .chapter-file-meta {
    color: #667085 !important;
}

body.skin-ninja .chapter-content .chapter-file-download,
body.skin-ninja .chapter-content .chapter-file-download * {
    color: #ffffff !important;
}

body.skin-ninja .chapter-side-bar #add-chapter.white {
    border-color: #36dcff !important;
    color: #020b19 !important;
    background: linear-gradient(135deg, #76ebff, #e09aff) !important;
    box-shadow: 0 0 19px rgba(41, 217, 255, .25) !important;
}

body.skin-ninja .chapter-side-bar #add-chapter.white :is(i, .btn-text) {
    color: #020b19 !important;
}

body.skin-ninja .dialog .dialog-content.settings-dialog {
    color: #eef9ff !important;
    background: linear-gradient(145deg, #071a35, #1c0a38) !important;
    border-color: #27bee9 !important;
}

body.skin-ninja .dialog .dialog-content.settings-dialog h1,
body.skin-ninja .global-settings-dialog label {
    color: #eef9ff !important;
}

body.skin-ninja .global-settings-dialog select,
body.skin-ninja .global-settings-dialog select option {
    color: #eef9ff !important;
    background: #081a34 !important;
}

@media (max-width: 1050px) {
    body.skin-ninja {
        --skin-profile-size: 136px;
    }

    body.skin-ninja .user-header-wrapper::after {
        min-width: 230px;
        font-size: 10px !important;
    }

    body.skin-ninja .main-container-header {
        padding-inline: 22px;
    }

    body.skin-ninja .chapter-side-bar {
        width: 340px;
    }
}

@media (max-width: 720px) {
    body.skin-ninja {
        --skin-hero-height: 340px;
        --skin-profile-size: 108px;
        --skin-profile-top: 53%;
    }

    body.skin-ninja .main-container-header {
        height: 62px;
        min-height: 62px;
        padding: 7px 10px;
        gap: 3px;
    }

    body.skin-ninja .main-container-header .iiigel-icon-text,
    body.skin-ninja .main-container-header .header-button > div,
    body.skin-ninja .user-header-wrapper::after {
        display: none !important;
    }

    body.skin-ninja .main-container-header .home,
    body.skin-ninja .main-container-header .header-button,
    body.skin-ninja .main-container-header .global-settings-button {
        min-width: 39px;
        min-height: 39px;
        padding: 5px 7px;
    }

    body.skin-ninja .main-container-header .iiigel-icon {
        width: 44px;
    }

    body.skin-ninja .header-user-info {
        width: 240px;
    }

    body.skin-ninja #profileTextContainer {
        min-width: 220px;
        margin-top: 12px;
    }

    body.skin-ninja .header-user-info .user-info-name {
        font-size: 18px;
    }

    body.skin-ninja .header-user-info .user-role {
        display: none;
    }

    body.skin-ninja .level-bar-wrapper {
        margin-left: 7px !important;
        transform: scale(.83);
        transform-origin: left center;
    }

    body.skin-ninja .chapter-page-content {
        padding: 35px 12px 72px !important;
    }

    body.skin-ninja .chapter-top {
        display: flex;
        flex-wrap: wrap;
        padding: 16px 13px;
    }

    body.skin-ninja .chapter-top::before {
        display: none;
    }

    body.skin-ninja .chapter-top .course-context-label {
        width: 100%;
    }

    body.skin-ninja .chapter-top h1 {
        width: calc(100% - 48px);
        font-size: 28px !important;
    }

    body.skin-ninja .chapter-button-collection {
        width: 100%;
        margin-top: 12px;
        justify-content: space-around;
    }

    body.skin-ninja .chapter-side-bar,
    body.skin-ninja .chapter-container.expanded .chapter-side-bar {
        position: relative !important;
        right: auto !important;
        width: 100%;
        margin-top: 12px;
    }
}

/* ==================GALAXY-SKIN V2: HEDGEHOG GUARDIANS================== */
body.skin-galaxy {
    --skin-label: "GALAXY-CREW ONLINE\A MISSION / LERNEN / BESCHUETZEN";
    --skin-font-heading: "Oxanium", "Barlow", sans-serif;
    --skin-font-body: "Barlow", Arial, sans-serif;
    --skin-heading-transform: uppercase;
    --skin-heading-spacing: .025em;
    --skin-bg-solid: #020817;
    --skin-surface: #071c3a;
    --skin-surface-alt: #0b2850;
    --skin-ink: #eefaff;
    --skin-muted: #9bb8cb;
    --skin-accent: #26d8ff;
    --skin-accent-strong: #075d93;
    --skin-accent-soft: #80ecff;
    --skin-accent-2: #f04fc0;
    --skin-border: #2079ae;
    --skin-nav-ink: #effbff;
    --skin-hero-image: url('/assets/skin-banners/galaxy.png?v=galaxy-guardians-v2');
    --skin-hero-height: 458px;
    --skin-hero-position: center 57%;
    --skin-hero-overlay: rgba(2, 7, 27, .06);
    --skin-hero-border: 4px solid #24d8ff;
    --skin-profile-size: 150px;
    --skin-profile-top: 22%;
    --skin-profile-left: 50%;
    --skin-profile-right: auto;
    --skin-profile-translate: translate(-50%, -50%);
    --skin-radius: 0;
    --skin-button-radius: 2px 10px 2px 10px;
    --skin-page-bg:
        radial-gradient(circle at 82% 12%, rgba(238, 62, 190, .2), transparent 25%),
        radial-gradient(circle at 13% 38%, rgba(23, 187, 244, .16), transparent 30%),
        radial-gradient(circle at 50% 76%, rgba(255, 154, 42, .08), transparent 29%),
        linear-gradient(138deg, #010713, #06162e 52%, #130827);
    --skin-pattern:
        radial-gradient(circle, rgba(108, 228, 255, .72) 0 1px, transparent 1.7px),
        radial-gradient(circle, rgba(255, 91, 205, .52) 0 1.2px, transparent 1.8px),
        linear-gradient(120deg, transparent 0 49%, rgba(34, 124, 184, .06) 50%, transparent 51%);
    --skin-pattern-size: 109px 97px, 157px 139px, 74px 74px;
    --skin-pattern-opacity: .78;
    color: #eefaff;
}

body.skin-galaxy main {
    position: relative;
    display: block;
    isolation: isolate;
}

body.skin-galaxy #content-wrapper {
    position: relative;
    isolation: isolate;
}

/* Seitliche Schiffssensoren, rein dekorativ und ohne Layoutbreite. */
body.skin-galaxy #content-wrapper::before,
body.skin-galaxy #content-wrapper::after {
    content: "";
    position: fixed;
    top: 29vh;
    bottom: 7vh;
    width: 17px;
    z-index: 0;
    pointer-events: none;
    opacity: .72;
    background:
        repeating-linear-gradient(180deg, #2bdcff 0 3px, transparent 3px 20px, #ef42c1 20px 23px, transparent 23px 42px),
        linear-gradient(90deg, rgba(30, 191, 244, .5), transparent);
    filter: drop-shadow(0 0 8px rgba(40, 217, 255, .65));
}

body.skin-galaxy #content-wrapper::before {
    left: 8px;
    clip-path: polygon(0 0, 100% 18px, 100% calc(100% - 18px), 0 100%);
}

body.skin-galaxy #content-wrapper::after {
    right: 8px;
    transform: scaleX(-1);
    clip-path: polygon(0 0, 100% 18px, 100% calc(100% - 18px), 0 100%);
}

body.skin-galaxy .user-header-wrapper {
    border-bottom: var(--skin-hero-border) !important;
    box-shadow:
        inset 0 -96px 112px rgba(1, 5, 22, .55),
        0 7px 0 rgba(227, 48, 189, .48),
        0 19px 46px rgba(0, 2, 16, .55) !important;
}

body.skin-galaxy .user-header-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0, 5, 24, .22), transparent 31%, transparent 68%, rgba(0, 5, 24, .18)),
        linear-gradient(180deg, rgba(0, 4, 20, .22), transparent 23%, transparent 74%, rgba(0, 4, 20, .35));
}

body.skin-galaxy .user-header-wrapper::after {
    left: clamp(24px, 5vw, 90px) !important;
    right: auto !important;
    top: auto !important;
    bottom: 32px !important;
    min-width: 310px;
    padding: 11px 20px 10px 27px !important;
    white-space: pre-line;
    clip-path: polygon(13px 0, 100% 0, calc(100% - 15px) 100%, 0 100%, 0 13px);
    border: 0 !important;
    color: #eafaff !important;
    background: linear-gradient(110deg, rgba(3, 24, 56, .94), rgba(40, 9, 61, .9)) !important;
    font-family: "Oxanium", sans-serif !important;
    font-size: 11px !important;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .11em !important;
    text-align: left;
    text-shadow: 0 0 10px rgba(38, 220, 255, .4);
    box-shadow: inset 4px 0 0 #27d8ff, inset 0 -2px 0 #e947c2, 0 15px 32px rgba(0, 2, 19, .4);
    backdrop-filter: blur(9px);
}

/* Raumschiff-Navigation mit freier Mitte fuer das Profil. */
body.skin-galaxy .main-container-header {
    position: absolute;
    top: 0;
    left: 2%;
    right: 2%;
    width: 96%;
    height: 76px;
    min-height: 76px;
    margin: 0;
    padding: 8px 25px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    clip-path: polygon(28px 0, calc(100% - 28px) 0, 100% 27px, calc(100% - 17px) 100%, 66% 100%, 64% 75%, 36% 75%, 34% 100%, 17px 100%, 0 27px);
    border: 0 !important;
    border-radius: 0 !important;
    color: #effbff !important;
    background: linear-gradient(90deg, rgba(2, 19, 48, .97), rgba(9, 35, 72, .91) 42%, rgba(36, 10, 65, .94)) !important;
    box-shadow: inset 0 2px 0 #27d8ff, inset 0 -2px 0 rgba(220, 52, 193, .75), 0 14px 31px rgba(0, 2, 19, .43) !important;
    backdrop-filter: blur(10px);
}

body.skin-galaxy .main-container-header::before,
body.skin-galaxy .main-container-header::after {
    content: "";
    position: absolute;
    bottom: 9px;
    width: 115px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #2adeff);
    box-shadow: 0 0 9px rgba(35, 220, 255, .8);
}

body.skin-galaxy .main-container-header::before {
    left: 18%;
}

body.skin-galaxy .main-container-header::after {
    right: 18%;
    transform: scaleX(-1);
    background: linear-gradient(90deg, transparent, #ef46c2);
    box-shadow: 0 0 9px rgba(239, 70, 194, .7);
}

body.skin-galaxy .main-container-header .home {
    width: auto;
    margin-right: auto !important;
    gap: 9px;
}

body.skin-galaxy .main-container-header #chapterGroupName {
    display: none;
}

body.skin-galaxy .main-container-header .iiigel-icon {
    width: 59px;
    filter: brightness(0) invert(88%) sepia(43%) saturate(4580%) hue-rotate(154deg) brightness(103%) contrast(107%);
}

body.skin-galaxy .main-container-header .iiigel-icon-text {
    display: block;
    color: #effbff !important;
    font-family: "Oxanium", sans-serif !important;
    font-size: 20px;
    font-weight: 600;
}

body.skin-galaxy .main-container-header .header-button,
body.skin-galaxy .main-container-header .global-settings-button {
    position: relative;
    top: auto;
    width: auto;
    min-width: 42px;
    min-height: 42px;
    margin: 0;
    padding: 7px 11px;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    border: 1px solid transparent;
    border-radius: 0;
    color: #effbff !important;
    background: rgba(12, 46, 83, .62) !important;
}

body.skin-galaxy .main-container-header .header-button,
body.skin-galaxy .main-container-header .header-button > div {
    color: #effbff !important;
    font-family: "Barlow", Arial, sans-serif !important;
    font-size: 16px;
    font-weight: 600;
}

body.skin-galaxy .main-container-header .material-icons {
    color: #3be1ff !important;
    font-family: "Material Icons" !important;
}

body.skin-galaxy .main-container-header .header-home {
    flex-direction: row;
}

body.skin-galaxy .main-container-header .header-home-underline {
    display: none !important;
}

body.skin-galaxy .main-container-header .header-button:hover,
body.skin-galaxy .main-container-header .global-settings-button:hover {
    border-color: rgba(44, 221, 255, .64);
    background: rgba(23, 93, 139, .66) !important;
}

body.skin-galaxy .main-container-header .logoutBtn {
    box-shadow: inset 0 0 0 1px rgba(239, 74, 195, .76);
    background: rgba(88, 20, 102, .48) !important;
}

body.skin-galaxy .main-container-header .logoutBtn img {
    width: 22px;
    filter: brightness(0) invert(86%) sepia(98%) saturate(1799%) hue-rotate(277deg) brightness(105%) contrast(103%);
}

body.skin-galaxy .header-user-info {
    width: 370px;
    flex-direction: column;
    align-items: center;
    z-index: 9;
}

body.skin-galaxy .header-user-info .head-container {
    margin: 0 !important;
}

body.skin-galaxy .header-user-info #profilePicture {
    margin: 0;
    border: 4px solid #2bdcff !important;
    outline: 3px solid rgba(235, 65, 196, .92);
    outline-offset: 5px;
    background: #03132c;
    box-shadow: 0 0 0 9px rgba(23, 86, 153, .38), 0 0 33px rgba(42, 217, 255, .62), 0 17px 34px rgba(0, 2, 18, .6) !important;
}

body.skin-galaxy #profileTextContainer {
    min-width: 315px;
    margin-top: 13px;
    padding: 6px 18px 7px;
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
    border: 0;
    background: linear-gradient(90deg, rgba(4, 25, 57, .93), rgba(44, 11, 64, .9));
    box-shadow: inset 0 2px 0 rgba(45, 220, 255, .78), inset 0 -2px 0 rgba(237, 70, 195, .72), 0 11px 25px rgba(0, 2, 17, .4);
}

body.skin-galaxy .header-user-info .user-info {
    padding: 0;
    color: #f2fbff !important;
    background: transparent !important;
    font-family: "Barlow", Arial, sans-serif !important;
    text-align: center;
    text-shadow: 0 2px 7px #00071d;
}

body.skin-galaxy .header-user-info .user-info-name {
    font-family: "Oxanium", sans-serif !important;
    font-size: 21px;
    font-weight: 700;
}

body.skin-galaxy .header-user-info .user-info-role {
    color: #dca2ff !important;
    font-size: 14px;
}

body.skin-galaxy .level-bar-wrapper {
    margin-top: 13px !important;
    margin-left: auto !important;
    margin-right: clamp(24px, 5vw, 92px) !important;
    z-index: 70 !important;
}

body.skin-galaxy #levelBar {
    width: 315px !important;
    clip-path: polygon(18px 0, 100% 0, calc(100% - 13px) 100%, 0 100%, 0 18px);
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(115deg, rgba(4, 25, 57, .97), rgba(44, 10, 63, .96)) !important;
    box-shadow: inset 4px 0 0 #2bdcff, inset 0 -2px 0 #e848c2, 0 12px 28px rgba(0, 2, 18, .45) !important;
}

body.skin-galaxy #levelBar > span {
    border-color: rgba(86, 205, 242, .37) !important;
    background: #020a1b !important;
}

body.skin-galaxy #myLvl {
    color: #081127 !important;
    background: #91f063 !important;
    border-color: #e9ffd8 !important;
}

body.skin-galaxy #myXP {
    color: #f2fbff !important;
    font-family: "Oxanium", sans-serif !important;
    font-weight: 600 !important;
}

body.skin-galaxy #myXPbar {
    background: linear-gradient(90deg, #2bdcff, #626eff 48%, #ee46bd 78%, #ffb340) !important;
    box-shadow: 0 0 12px rgba(43, 220, 255, .58);
}

body.skin-galaxy .chapter-page-content {
    max-width: 1740px;
    margin-inline: auto;
    padding: 47px clamp(26px, 5vw, 82px) 105px !important;
}

body.skin-galaxy .chapter-top {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "context context actions"
        "back title actions";
    align-items: center;
    column-gap: 14px;
    row-gap: 9px;
    min-height: 142px;
    margin: 25px 0 38px;
    padding: 22px 29px;
    clip-path: polygon(26px 0, calc(100% - 78px) 0, 100% 48px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 55px 100%, 0 calc(100% - 43px), 0 26px);
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(110deg, rgba(4, 27, 60, .96), rgba(8, 34, 70, .9) 57%, rgba(44, 10, 65, .91));
    box-shadow: inset 0 0 0 1px rgba(43, 216, 255, .54), inset 5px 0 0 #2cdcff, inset 0 -3px 0 rgba(235, 67, 191, .75), 0 21px 45px rgba(0, 2, 19, .44);
}

body.skin-galaxy .chapter-top::before {
    content: "CREW DECK / ACTIVE MISSION";
    position: absolute;
    top: 9px;
    right: 28px;
    color: #78eaff;
    font-family: "Oxanium", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .13em;
}

body.skin-galaxy .chapter-top::after {
    content: "";
    position: absolute;
    left: 22%;
    right: 16%;
    bottom: 9px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #2bdcff 18% 47%, transparent 47% 55%, #ec47bf 55% 82%, transparent);
    box-shadow: 0 0 9px rgba(41, 213, 255, .55);
}

body.skin-galaxy .chapter-top .course-context-label {
    position: relative !important;
    grid-area: context;
    left: auto;
    width: auto;
    margin: 0 !important;
    color: #8eeaff !important;
    font-family: "Barlow", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

body.skin-galaxy .chapter-top .course-context-label::before {
    content: "SEKTOR / ";
    color: #f170cd;
}

body.skin-galaxy .chapter-top .course-context-label h2 {
    display: inline;
    margin: 0;
    color: #90ebff !important;
    font-family: "Barlow", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700;
}

body.skin-galaxy .chapter-top .back-to-chapter {
    grid-area: back;
}

body.skin-galaxy .chapter-top .back-to-chapter,
body.skin-galaxy .chapter-top .back-to-chapter i {
    color: #54e2ff !important;
}

body.skin-galaxy .chapter-top h1 {
    grid-area: title;
    margin: 0 !important;
    color: #f3fbff !important;
    font-family: "Oxanium", sans-serif !important;
    font-size: clamp(31px, 3vw, 50px) !important;
    line-height: 1.05;
    text-shadow: 0 0 18px rgba(41, 218, 255, .22);
}

body.skin-galaxy .chapter-button-collection {
    position: relative;
    grid-area: actions;
    top: auto;
    right: auto;
    min-height: 57px;
    padding: 11px 14px;
    gap: 23px;
    transform: none;
    clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(115deg, rgba(3, 32, 69, .97), rgba(52, 11, 70, .93)) !important;
    box-shadow: inset 0 0 0 1px rgba(48, 217, 255, .5), inset 0 -3px 0 rgba(237, 66, 190, .7), 0 12px 27px rgba(0, 2, 17, .43) !important;
}

body.skin-galaxy .chapter-button-collection i:not(.red-color) {
    color: #41e1ff !important;
}

/* Kapitelmodul links statt rechts; beim Oeffnen bleibt es ein Overlay. */
body.skin-galaxy .chapter-side-bar {
    left: 0 !important;
    right: auto !important;
    width: 410px;
    transform: none;
    clip-path: polygon(23px 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%, 0 23px);
    border: 0 !important;
    border-radius: 0 !important;
    color: #eefaff !important;
    background:
        radial-gradient(circle at 14% 8%, rgba(45, 218, 255, .13), transparent 25%),
        linear-gradient(145deg, rgba(3, 24, 56, .98), rgba(42, 9, 61, .98)) !important;
    box-shadow: inset 0 0 0 1px rgba(48, 213, 255, .54), inset 5px 0 0 #2bdcff, inset 0 -3px 0 #ea47bd, 0 20px 45px rgba(0, 2, 20, .52) !important;
}

body.skin-galaxy .chapter-side-bar::before {
    content: "NAV-COM";
    position: absolute;
    top: 14px;
    right: 18px;
    color: #e966c8;
    font-family: "Oxanium", sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .16em;
}

body.skin-galaxy .chapter-side-bar,
body.skin-galaxy .chapter-side-bar *:not(.material-icons) {
    color: #eefaff !important;
}

body.skin-galaxy .chapter-side-bar h1 {
    font-family: "Oxanium", sans-serif !important;
    letter-spacing: .045em;
}

body.skin-galaxy .chapter-side-bar .chapter-list-item {
    border-color: rgba(67, 178, 224, .43) !important;
    background: rgba(13, 51, 90, .58) !important;
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}

body.skin-galaxy .chapter-container.expanded .chapter-side-bar {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    height: 550px !important;
    z-index: 30;
}

body.skin-galaxy .chapter-container.expanded .chapter-content,
body.skin-galaxy .chapter-page-content.expanded .chapter-content-wrapper,
body.skin-galaxy .chapter-container.expanded .computed-content,
body.skin-galaxy .chapter-container.expanded .chapter-viewable,
body.skin-galaxy .chapter-container.expanded .chapter-block-list {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.skin-galaxy .chapter-content {
    position: relative;
    margin-top: 41px;
}

body.skin-galaxy .chapter-block-list {
    position: relative;
}

body.skin-galaxy .chapter-block-list::before,
body.skin-galaxy .chapter-block-list::after {
    content: "";
    position: absolute;
    top: 45px;
    bottom: 45px;
    width: 11px;
    z-index: 2;
    pointer-events: none;
    background: repeating-linear-gradient(180deg, #2adfff 0 12px, transparent 12px 25px, #ec4bc2 25px 34px, transparent 34px 51px);
    box-shadow: 0 0 10px rgba(40, 218, 255, .52);
}

body.skin-galaxy .chapter-block-list::before {
    left: -17px;
}

body.skin-galaxy .chapter-block-list::after {
    right: -17px;
    transform: scaleY(-1);
}

body.skin-galaxy .chapter-block-list > .content-parent:not([type="2"]) {
    position: relative;
    overflow: hidden;
    clip-path: polygon(25px 0, calc(100% - 78px) 0, 100% 44px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 52px 100%, 0 calc(100% - 48px), 0 25px);
    border: 0 !important;
    border-radius: 0 !important;
    color: #eefaff !important;
    background:
        radial-gradient(circle at 91% 10%, rgba(234, 64, 189, .1), transparent 25%),
        linear-gradient(122deg, rgba(4, 25, 58, .98), rgba(7, 34, 70, .96) 58%, rgba(35, 9, 58, .97)) !important;
    box-shadow: inset 0 0 0 1px rgba(44, 202, 245, .5), inset 5px 0 0 #26d9ff, inset 0 -3px 0 rgba(236, 69, 193, .72), 0 25px 55px rgba(0, 2, 19, .5) !important;
}

body.skin-galaxy .chapter-block-list > .content-parent:not([type="2"])::before {
    width: 180px !important;
    height: 4px !important;
    left: 32px !important;
    top: 0 !important;
    background: linear-gradient(90deg, #2bdcff, transparent) !important;
    box-shadow: 0 0 12px rgba(42, 220, 255, .66);
}

body.skin-galaxy .chapter-block-list > .content-parent:not([type="2"])::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 67px;
    width: 27px;
    height: 93px;
    pointer-events: none;
    opacity: .72;
    background:
        repeating-linear-gradient(180deg, #ee4ac1 0 5px, transparent 5px 14px),
        linear-gradient(90deg, transparent, rgba(42, 218, 255, .42));
    filter: drop-shadow(0 0 7px rgba(235, 69, 191, .54));
}

body.skin-galaxy .chapter-block-list > .content-parent:nth-child(even):not([type="2"]) {
    clip-path: polygon(76px 0, calc(100% - 25px) 0, 100% 25px, 100% calc(100% - 49px), calc(100% - 48px) 100%, 24px 100%, 0 calc(100% - 24px), 0 44px);
    box-shadow: inset 0 0 0 1px rgba(232, 72, 193, .48), inset -5px 0 0 #eb48c2, inset 0 -3px 0 rgba(42, 218, 255, .7), 0 25px 55px rgba(0, 2, 19, .5) !important;
}

body.skin-galaxy .chapter-block-list > .content-parent + .content-parent {
    margin-top: 27px;
}

body.skin-galaxy .chapter-content .content-parent:not([type="2"]),
body.skin-galaxy .chapter-content .content-parent:not([type="2"]) .ql-editor,
body.skin-galaxy .chapter-content .content-parent:not([type="2"]) .ql-editor > :not(.chapter-file-card),
body.skin-galaxy .chapter-content .content-parent:not([type="2"]) .ql-editor > :not(.chapter-file-card) *:not(input):not(textarea):not(select):not(option):not(button) {
    color: #eefaff !important;
}

body.skin-galaxy .chapter-content .content-parent:not([type="2"]) :is(h1, h2, h3, h4) {
    color: #f3fbff !important;
    font-family: "Oxanium", sans-serif !important;
    text-shadow: 0 0 15px rgba(38, 215, 255, .16);
}

body.skin-galaxy .chapter-content .content-parent:not([type="2"]) :is(a, strong, b) {
    color: #5de9ff !important;
}

body.skin-galaxy .chapter-content .iiigel-text-box {
    color: #eefaff !important;
    background: rgba(12, 49, 87, .88) !important;
    border-color: #2fb8df !important;
}

body.skin-galaxy .chapter-content .chapter-file-card,
body.skin-galaxy .chapter-content .chapter-file-name {
    color: #1f2937 !important;
}

body.skin-galaxy .chapter-content .chapter-file-meta {
    color: #667085 !important;
}

body.skin-galaxy .chapter-content .chapter-file-download,
body.skin-galaxy .chapter-content .chapter-file-download * {
    color: #ffffff !important;
}

body.skin-galaxy .chapter-side-bar #add-chapter.white {
    border-color: #36dcff !important;
    color: #071229 !important;
    background: linear-gradient(135deg, #6ceaff, #f08bd7) !important;
    box-shadow: 0 0 20px rgba(42, 218, 255, .27) !important;
}

body.skin-galaxy .chapter-side-bar #add-chapter.white :is(i, .btn-text) {
    color: #071229 !important;
}

body.skin-galaxy .dialog .dialog-content.settings-dialog {
    color: #eefaff !important;
    background: linear-gradient(145deg, #061b39, #290b43) !important;
    border-color: #2cc8ed !important;
}

body.skin-galaxy .dialog .dialog-content.settings-dialog h1,
body.skin-galaxy .global-settings-dialog label {
    color: #eefaff !important;
}

body.skin-galaxy .global-settings-dialog select,
body.skin-galaxy .global-settings-dialog select option {
    color: #eefaff !important;
    background: #071b39 !important;
}

@media (max-width: 1050px) {
    body.skin-galaxy {
        --skin-profile-size: 132px;
    }

    body.skin-galaxy .user-header-wrapper::after {
        min-width: 245px;
        font-size: 9px !important;
    }

    body.skin-galaxy .main-container-header {
        left: 1%;
        right: 1%;
        width: 98%;
    }

    body.skin-galaxy .chapter-side-bar {
        width: 350px;
    }
}

@media (max-width: 720px) {
    body.skin-galaxy {
        --skin-hero-height: 350px;
        --skin-profile-size: 104px;
        --skin-profile-top: 25%;
    }

    body.skin-galaxy #content-wrapper::before,
    body.skin-galaxy #content-wrapper::after,
    body.skin-galaxy .user-header-wrapper::after {
        display: none !important;
    }

    body.skin-galaxy .main-container-header {
        height: 60px;
        min-height: 60px;
        padding: 6px 10px;
        gap: 3px;
        clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%, 0 12px);
    }

    body.skin-galaxy .main-container-header::before,
    body.skin-galaxy .main-container-header::after,
    body.skin-galaxy .main-container-header .iiigel-icon-text,
    body.skin-galaxy .main-container-header .header-button > div {
        display: none !important;
    }

    body.skin-galaxy .main-container-header .home,
    body.skin-galaxy .main-container-header .header-button,
    body.skin-galaxy .main-container-header .global-settings-button {
        min-width: 38px;
        min-height: 38px;
        padding: 5px 6px;
    }

    body.skin-galaxy .main-container-header .iiigel-icon {
        width: 43px;
    }

    body.skin-galaxy .header-user-info {
        width: 240px;
    }

    body.skin-galaxy #profileTextContainer {
        min-width: 215px;
        margin-top: 10px;
    }

    body.skin-galaxy .header-user-info .user-info-name {
        font-size: 17px;
    }

    body.skin-galaxy .header-user-info .user-role {
        display: none;
    }

    body.skin-galaxy .level-bar-wrapper {
        margin-right: 6px !important;
        transform: scale(.82);
        transform-origin: right center;
    }

    body.skin-galaxy .chapter-page-content {
        padding: 36px 13px 75px !important;
    }

    body.skin-galaxy .chapter-top {
        display: flex;
        flex-wrap: wrap;
        padding: 17px 14px;
        clip-path: polygon(13px 0, calc(100% - 22px) 0, 100% 15px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
    }

    body.skin-galaxy .chapter-top::before {
        display: none;
    }

    body.skin-galaxy .chapter-top .course-context-label {
        width: 100%;
    }

    body.skin-galaxy .chapter-top h1 {
        width: calc(100% - 48px);
        font-size: 27px !important;
    }

    body.skin-galaxy .chapter-button-collection {
        width: 100%;
        margin-top: 12px;
        justify-content: space-around;
    }

    body.skin-galaxy .chapter-side-bar,
    body.skin-galaxy .chapter-container.expanded .chapter-side-bar {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        width: 100%;
        margin-top: 12px;
    }

    body.skin-galaxy .chapter-block-list::before,
    body.skin-galaxy .chapter-block-list::after {
        display: none;
    }
}

/* Magie-Skin V2 – abschliessende Header-Anordnung (muss nach den Shared-Regeln stehen). */
body.skin-magic {
    --skin-hero-height: 430px;
    --skin-profile-size: 158px;
    --skin-profile-top: 58%;
    --skin-profile-left: clamp(34px, 7vw, 122px);
    --skin-profile-translate: translateY(-50%);
}

body.skin-magic .main-container-header {
    position: absolute !important;
    inset: 18px 3.5% auto !important;
    z-index: 90;
    display: flex;
    width: 93% !important;
    height: 74px !important;
    min-height: 74px !important;
    margin: 0 !important;
    padding: 9px 14px !important;
    gap: 8px;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start;
    border: 1px solid rgba(239, 208, 113, .7);
    border-radius: 22px 4px 22px 4px !important;
    background: linear-gradient(90deg, rgba(28, 10, 38, .95), rgba(61, 24, 73, .91) 54%, rgba(29, 11, 43, .96)) !important;
    box-shadow: 0 0 0 1px rgba(148, 82, 197, .22) inset, 0 0 24px rgba(172, 99, 224, .24), 0 14px 30px rgba(14, 4, 19, .34);
    backdrop-filter: blur(9px);
}

body.skin-magic .main-container-header .home {
    order: 0;
    flex: 0 0 auto;
    width: auto !important;
    min-width: 146px;
    margin: 0 8px 0 0 !important;
    padding: 3px 10px;
    justify-content: flex-start !important;
}

body.skin-magic .main-container-header #chapterGroupName {
    order: 1;
    display: block !important;
    flex: 1 1 340px;
    width: auto !important;
    min-width: 160px;
    max-width: 560px;
    margin: 0 auto 0 0 !important;
    padding: 4px 14px;
    overflow: hidden;
    color: #ffe59a !important;
    font-family: var(--skin-font-heading) !important;
    font-size: clamp(16px, 1.45vw, 23px) !important;
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: .025em;
    white-space: normal;
    text-overflow: ellipsis;
    text-shadow: 0 0 5px rgba(255, 236, 166, .88), 0 0 14px rgba(232, 177, 62, .7), 0 0 28px rgba(194, 113, 44, .46), 0 2px 2px rgba(31, 8, 33, .92) !important;
}

body.skin-magic .main-container-header #chapterGroupName * {
    color: inherit !important;
    text-shadow: inherit !important;
}

body.skin-magic .chapter-top h1,
body.skin-magic .chapter-content h1,
body.skin-magic .chapter-content h2,
body.skin-magic .chapter-content h3,
body.skin-magic .chapter-block-list h1,
body.skin-magic .chapter-block-list h2,
body.skin-magic .chapter-block-list h3 {
    color: #f8d778 !important;
    text-shadow: 0 0 5px rgba(255, 235, 160, .64), 0 0 15px rgba(214, 155, 48, .46), 0 2px 3px rgba(35, 8, 40, .9) !important;
}

body.skin-magic .main-container-header .header-button,
body.skin-magic .main-container-header .global-settings-button {
    order: 2;
    flex: 0 0 auto;
    width: auto !important;
    min-width: 42px;
    min-height: 44px;
    margin: 0 !important;
    padding: 8px 11px;
    justify-content: center !important;
    border: 1px solid transparent;
    border-radius: 12px 2px 12px 2px;
}

body.skin-magic .main-container-header .header-home {
    flex-direction: row !important;
}

body.skin-magic .main-container-header .header-home::before,
body.skin-magic .main-container-header .header-home::after {
    display: none !important;
}

body.skin-magic .main-container-header .logoutBtn {
    width: auto !important;
    min-width: 132px;
    margin: 0 !important;
}

body.skin-magic .header-user-info {
    z-index: 72;
    width: 330px;
    align-items: center !important;
    text-align: center;
}

body.skin-magic #profileTextContainer {
    min-width: 300px;
    margin-top: 15px;
    padding: 7px 20px 8px;
    border: 1px solid rgba(239, 208, 113, .6);
    border-radius: 14px 2px 14px 2px;
    background: linear-gradient(90deg, rgba(38, 13, 48, .92), rgba(75, 31, 84, .88));
    box-shadow: 0 0 18px rgba(184, 104, 221, .2);
}

body.skin-magic .level-bar-wrapper {
    z-index: 70 !important;
    margin-top: -38px !important;
    margin-left: clamp(370px, 31vw, 600px) !important;
}

body.skin-magic .user-header-wrapper::after {
    right: 5% !important;
    bottom: 24px;
    max-width: 330px;
}

@media (max-width: 1180px) {
    body.skin-magic .main-container-header {
        inset: 12px 2% auto !important;
        width: 96% !important;
    }

    body.skin-magic .main-container-header .home {
        min-width: 106px;
        margin-right: 2px !important;
    }

    body.skin-magic .main-container-header #chapterGroupName {
        flex-basis: 220px;
        max-width: 340px;
        padding-inline: 7px;
        font-size: 15px !important;
    }

    body.skin-magic .main-container-header .header-button,
    body.skin-magic .main-container-header .global-settings-button {
        padding-inline: 7px;
    }

    body.skin-magic .main-container-header .logoutBtn {
        min-width: 108px;
    }
}

@media (max-width: 820px) {
    body.skin-magic {
        --skin-hero-height: 390px;
        --skin-profile-size: 126px;
        --skin-profile-top: 57%;
        --skin-profile-left: 50%;
        --skin-profile-translate: translate(-50%, -50%);
    }

    body.skin-magic .main-container-header {
        inset: 8px 2% auto !important;
        width: 96% !important;
        height: 60px !important;
        min-height: 60px !important;
        padding: 6px 8px !important;
        gap: 3px;
        border-radius: 16px 3px 16px 3px !important;
    }

    body.skin-magic .main-container-header .home {
        min-width: 48px;
        margin-right: 0 !important;
        padding-inline: 3px;
    }

    body.skin-magic .main-container-header #chapterGroupName {
        flex-basis: 130px;
        min-width: 94px;
        padding: 3px 4px;
        font-size: 12px !important;
        line-height: 1.1;
    }

    body.skin-magic .main-container-header .header-button,
    body.skin-magic .main-container-header .global-settings-button {
        min-width: 36px;
        min-height: 38px;
        padding: 6px;
    }

    body.skin-magic .main-container-header .header-button span,
    body.skin-magic .main-container-header .global-settings-button span,
    body.skin-magic .main-container-header .logoutBtn span {
        display: none;
    }

    body.skin-magic .main-container-header .logoutBtn {
        min-width: 38px;
    }

    body.skin-magic .header-user-info {
        width: 250px;
    }

    body.skin-magic #profileTextContainer {
        min-width: 220px;
        margin-top: 10px;
        padding: 5px 10px;
    }

    body.skin-magic .level-bar-wrapper {
        margin-top: -30px !important;
        margin-left: 8px !important;
        transform: scale(.82);
        transform-origin: left center;
    }

    body.skin-magic .user-header-wrapper::after {
        display: none;
    }
}

@media (max-width: 560px) {
    body.skin-magic .main-container-header #chapterGroupName {
        display: none !important;
    }

    body.skin-magic .main-container-header {
        justify-content: space-between;
    }
}

/* Magie-Skin V2.1 – echte Kursdaten im Header und abschliessende Kontraste. */
body.skin-magic .main-container-header #chapterGroupName .course-context-label {
    position: static !important;
    inset: auto !important;
    display: block;
    width: 100%;
    margin: 0 !important;
    padding: 0;
    overflow: hidden;
    color: #f3ddb0 !important;
    font-family: var(--skin-font-body) !important;
    font-size: 13px !important;
    line-height: 1.15;
    letter-spacing: .045em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.skin-magic .main-container-header #chapterGroupName .course-context-label h2 {
    margin: 0 0 3px !important;
    overflow: hidden;
    color: #ffd96c !important;
    font-family: var(--skin-font-heading) !important;
    font-size: clamp(17px, 1.35vw, 22px) !important;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .035em;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: 0 0 4px rgba(255, 239, 171, .72), 0 0 11px rgba(223, 165, 49, .58), 0 2px 2px rgba(31, 8, 33, .92) !important;
}

body.skin-magic .header-user-info .user-role {
    position: relative;
    display: block;
    width: auto;
    min-width: 150px;
    margin: 7px 0 0 !important;
    padding: 4px 12px 5px;
    border: 1px solid rgba(239, 208, 113, .32);
    border-radius: 9px 2px 9px 2px;
    background: rgba(34, 11, 43, .8);
}

body.skin-magic .header-user-info .user-info-role {
    margin: 0 !important;
    color: #f2dfc0 !important;
    font-size: 14px;
    line-height: 1.15;
}

body.skin-magic .chapter-top h1 {
    color: #f7d36d !important;
    text-shadow: 0 0 3px rgba(255, 236, 157, .58), 0 0 9px rgba(214, 155, 48, .4), 0 2px 2px rgba(35, 8, 40, .86) !important;
}

body.skin-magic .chapter-side-bar,
body.skin-magic .chapter-side-bar h1,
body.skin-magic .chapter-side-bar h2,
body.skin-magic .chapter-side-bar h3,
body.skin-magic .chapter-side-bar p,
body.skin-magic .chapter-side-bar .chapter-list-item,
body.skin-magic .chapter-side-bar .chapter-list-item *:not(.material-icons),
body.skin-magic .chapter-side-bar .open-chapter-overview i {
    color: #fff0d2 !important;
}

body.skin-magic .chapter-block-list > .content-parent:not([type="2"]),
body.skin-magic .chapter-block-list > .content-parent:not([type="2"]) :is(p, li, strong, em, blockquote, label),
body.skin-magic .chapter-content > .content-parent:not([type="2"]),
body.skin-magic .chapter-content > .content-parent:not([type="2"]) :is(p, li, strong, em, blockquote, label) {
    color: #f7e9da !important;
}

body.skin-magic .chapter-block-list > .content-parent:not([type="2"]) a,
body.skin-magic .chapter-content > .content-parent:not([type="2"]) a {
    color: #f3c95c !important;
}

@media (max-width: 1180px) {
    body.skin-magic .main-container-header #chapterGroupName .course-context-label {
        font-size: 11px !important;
    }

    body.skin-magic .main-container-header #chapterGroupName .course-context-label h2 {
        font-size: 15px !important;
    }
}

/* Magie-Skin V2.2 – ruhigere Navigation und goldene Statusfarben. */
body.skin-magic .main-container-header {
    border: 0 !important;
    border-bottom: 1px solid rgba(239, 208, 113, .54) !important;
    border-radius: 12px 2px 12px 2px !important;
    background: linear-gradient(90deg, rgba(31, 11, 40, .84), rgba(61, 24, 73, .7) 54%, rgba(29, 11, 43, .8)) !important;
    box-shadow: 0 10px 24px rgba(14, 4, 19, .24) !important;
}

body.skin-magic .main-container-header::before {
    display: none !important;
}

body.skin-magic .main-container-header .home,
body.skin-magic .main-container-header .header-button,
body.skin-magic .main-container-header .global-settings-button,
body.skin-magic .main-container-header .logoutBtn {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.skin-magic .main-container-header .header-button:hover,
body.skin-magic .main-container-header .global-settings-button:hover,
body.skin-magic .main-container-header .logoutBtn:hover {
    border: 0 !important;
    background: rgba(239, 208, 113, .08) !important;
    box-shadow: none !important;
}

body.skin-magic .main-container-header .iiigel-icon {
    width: 56px !important;
    height: auto;
    filter: brightness(0) saturate(100%) invert(87%) sepia(48%) saturate(666%) hue-rotate(352deg) brightness(102%) contrast(102%) drop-shadow(0 0 5px rgba(232, 177, 62, .28));
}

body.skin-magic .main-container-header .iiigel-icon-text {
    color: #f6e6bd !important;
    font-size: 20px;
    text-shadow: 0 0 7px rgba(231, 177, 64, .24);
}

body.skin-magic .main-container-header .home {
    min-width: 128px;
    gap: 7px;
}

body.skin-magic .main-container-header .header-home {
    display: flex;
    align-items: center;
    justify-content: center !important;
}

body.skin-magic .main-container-header .header-home-text {
    display: flex;
    height: 100%;
    gap: 4px;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

body.skin-magic .main-container-header .header-home-text > div,
body.skin-magic .main-container-header .header-home-text .material-icons {
    display: flex;
    margin: 0 !important;
    align-items: center;
    line-height: 1 !important;
}

body.skin-magic .main-container-header .header-home-underline {
    display: none !important;
}

body.skin-magic .main-container-header .logoutBtn img {
    filter: brightness(0) saturate(100%) invert(84%) sepia(57%) saturate(721%) hue-rotate(353deg) brightness(103%) contrast(99%);
}

body.skin-magic .back-to-chapter,
body.skin-magic .back-to-chapter i {
    color: #f6d469 !important;
    text-shadow: 0 0 8px rgba(229, 167, 50, .5);
}

body.skin-magic #myXP {
    color: #f8d873 !important;
    font-family: var(--skin-font-heading) !important;
    text-shadow: 0 0 5px rgba(255, 232, 145, .5), 0 0 11px rgba(218, 154, 43, .34);
}

body.skin-magic #myXPbar {
    background: linear-gradient(90deg, #e9ad2f, #ffe38b 48%, #a66bd0) !important;
    box-shadow: 0 0 9px rgba(236, 189, 67, .48);
}

body.skin-magic #myLvl {
    border-color: #f4d676 !important;
    color: #2b1234 !important;
    background: #f0c75d !important;
}

body.skin-magic .chapter-side-bar .chapter-list-item.finished,
body.skin-magic .chapter-side-bar .chapter-list-item.active,
body.skin-magic .chapter-side-bar .chapter-list-item.selected,
body.skin-magic .all-chapters .chapter-list-item.selected {
    border-color: #ffd45f !important;
    color: #2a1231 !important;
    background: linear-gradient(135deg, #e3a72c, #ffe188 52%, #c48a20) !important;
    box-shadow: 0 0 9px rgba(255, 210, 79, .58), inset 0 1px 0 rgba(255, 250, 211, .72) !important;
}

body.skin-magic .chapter-side-bar .chapter-list-item.finished *:not(.material-icons),
body.skin-magic .chapter-side-bar .chapter-list-item.active *:not(.material-icons),
body.skin-magic .chapter-side-bar .chapter-list-item.selected *:not(.material-icons),
body.skin-magic .all-chapters .chapter-list-item.selected *:not(.material-icons) {
    color: #2a1231 !important;
    text-shadow: none !important;
}

body.skin-magic .chapter-side-bar .chapter-list-item.finished::before,
body.skin-magic .chapter-side-bar .chapter-list-item.active::before,
body.skin-magic .chapter-side-bar .chapter-list-item.selected::before {
    border-color: #fff2b3 !important;
    background: #ffd45f !important;
    box-shadow: 0 0 9px rgba(255, 210, 79, .8);
}

body.skin-magic .chapter-side-bar .chapter-list-item.finished::after,
body.skin-magic .chapter-side-bar .chapter-list-item.active::after,
body.skin-magic .chapter-side-bar .chapter-list-item.selected::after {
    border-color: #e6b139 !important;
}

/* Magie-Skin V2.3 – gemeinsame Grundlinie fuer die komplette Navigation. */
body.skin-magic .main-container-header {
    align-items: center !important;
}

body.skin-magic .main-container-header .home,
body.skin-magic .main-container-header #chapterGroupName,
body.skin-magic .main-container-header .header-button,
body.skin-magic .main-container-header .global-settings-button,
body.skin-magic .main-container-header .logoutBtn {
    align-self: center !important;
    display: flex !important;
    height: 48px !important;
    min-height: 48px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
    line-height: 1 !important;
}

body.skin-magic .main-container-header .home {
    flex-direction: row;
}

body.skin-magic .main-container-header .iiigel-icon {
    width: 52px !important;
    max-height: 42px;
    margin: 0 !important;
    object-fit: contain;
}

body.skin-magic .main-container-header .iiigel-icon-text,
body.skin-magic .main-container-header .header-button > div,
body.skin-magic .main-container-header .global-settings-button > i,
body.skin-magic .main-container-header .header-home-text,
body.skin-magic .main-container-header .header-home-text > div,
body.skin-magic .main-container-header .header-home-text > i,
body.skin-magic .main-container-header .logoutBtn > div,
body.skin-magic .main-container-header .logoutBtn > img {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-self: center !important;
    line-height: 1 !important;
    vertical-align: middle;
}

body.skin-magic .main-container-header #chapterGroupName {
    justify-content: flex-start;
}

body.skin-magic .main-container-header #chapterGroupName .course-context-label {
    display: flex;
    height: 48px;
    flex-direction: column;
    justify-content: center;
}

body.skin-magic .main-container-header .header-home-text {
    height: auto;
}

/* Magie-Skin V2.4 – optische Schriftgrundlinie statt reiner Boxzentrierung. */
body.skin-magic .main-container-header .header-home {
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
}

body.skin-magic .main-container-header .header-home-text {
    transform: translateY(-1px) !important;
}

body.skin-magic .main-container-header .iiigel-icon-text {
    transform: translateY(-2px) !important;
}

body.skin-magic .main-container-header #chapterGroupName .course-context-label {
    transform: translateY(4px) !important;
}

body.skin-magic .main-container-header > .header-button:not(.header-home),
body.skin-magic .main-container-header > .global-settings-button {
    transform: translateY(0) !important;
}

/* Zaubermeister-Skin: kleine gezielte Korrekturen. */
body.skin-headmaster .main-container-header .logoutBtn {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.skin-headmaster .main-container-header .logoutBtn img {
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(86%) sepia(44%) saturate(730%) hue-rotate(356deg) brightness(103%) contrast(101%) drop-shadow(0 0 4px rgba(224, 184, 80, .48));
}

body.skin-headmaster .chapter-container.expanded .chapter-side-bar {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    height: 550px !important;
    z-index: 30;
}

body.skin-headmaster .chapter-container.expanded .chapter-content,
body.skin-headmaster .chapter-page-content.expanded .chapter-content-wrapper,
body.skin-headmaster .chapter-container.expanded .computed-content,
body.skin-headmaster .chapter-container.expanded .chapter-viewable,
body.skin-headmaster .chapter-container.expanded .chapter-block-list {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.skin-headmaster .chapter-side-bar .chapter-list-item.active {
    border-color: #f4cf63 !important;
    box-shadow: 0 0 0 2px rgba(244, 207, 99, .9), 0 0 17px rgba(244, 207, 99, .72), 0 0 34px rgba(181, 115, 226, .3) !important;
}

body.skin-headmaster .chapter-side-bar .chapter-list-item.active::before {
    border-color: #fff0ac !important;
    background: #f4cf63 !important;
    box-shadow: 0 0 10px rgba(244, 207, 99, .9);
}

body.skin-headmaster .chapter-top h1,
body.skin-headmaster .back-to-chapter,
body.skin-headmaster .back-to-chapter i {
    color: #f4cf63 !important;
    text-shadow: 0 0 5px rgba(255, 234, 151, .56), 0 0 13px rgba(220, 171, 57, .4);
}

/* ==================CYBER-SKIN V2: GREEN NETWORK================== */
body.skin-cyber {
    --skin-font-heading: "Rubik Glitch", "Arial Black", sans-serif;
    --skin-font-body: "Agdasima", "Arial Narrow", sans-serif;
    --skin-heading-transform: none;
    --skin-heading-spacing: .035em;
    --skin-ink: #effff6;
    --skin-muted: #b4d9c5;
    --skin-border: #176b4b;
    --skin-surface: #061a16;
    --skin-surface-alt: #0a2820;
    --skin-nav-ink: #ecfff5;
    --skin-profile-top: 55%;
    --skin-profile-right: 6%;
    --skin-profile-left: auto;
    --skin-profile-translate: translateY(-50%);
}

body.skin-cyber,
body.skin-cyber button,
body.skin-cyber input,
body.skin-cyber select,
body.skin-cyber textarea {
    font-family: "Agdasima", "Arial Narrow", sans-serif;
}

body.skin-cyber h1,
body.skin-cyber h2,
body.skin-cyber h3,
body.skin-cyber #chapter-title,
body.skin-cyber .side-bar-h1-container h1 {
    color: #ecfff5 !important;
    font-family: "Rubik Glitch", "Arial Black", sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: .035em;
    text-shadow: 0 0 7px rgba(70, 255, 154, .28);
}

/* Das alte linke Menue wird zu einer stabilen horizontalen Systemleiste. */
body.skin-cyber .main-container-header {
    position: absolute !important;
    inset: 18px 3% auto !important;
    z-index: 90;
    display: flex;
    width: 94% !important;
    height: 72px !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 9px 15px !important;
    gap: 8px;
    flex-flow: row nowrap !important;
    align-items: center !important;
    border: 2px solid transparent !important;
    border-radius: 4px 22px 4px 22px !important;
    background:
        linear-gradient(90deg, rgba(1, 10, 11, .96), rgba(4, 28, 22, .93) 56%, rgba(2, 14, 14, .97)) padding-box,
        linear-gradient(100deg, #65ffae, #168e5b 38%, #043d2e 72%, #12231e) border-box !important;
    box-shadow: 0 0 21px rgba(37, 233, 128, .18), 0 14px 30px rgba(0, 6, 5, .42) !important;
    backdrop-filter: blur(10px);
}

body.skin-cyber .main-container-header .home {
    order: 0;
    display: flex;
    flex: 0 0 auto;
    width: auto !important;
    min-width: 150px;
    margin: 0 10px 0 0 !important;
    padding: 3px 8px;
    gap: 8px;
    align-items: center;
    justify-content: flex-start !important;
}

body.skin-cyber .main-container-header #chapterGroupName {
    order: 1;
    display: flex !important;
    flex: 1 1 320px;
    width: auto !important;
    min-width: 150px;
    max-width: 520px;
    height: 50px;
    margin: 0 auto 0 0 !important;
    padding: 2px 12px;
    overflow: hidden;
    align-items: center;
}

body.skin-cyber .main-container-header #chapterGroupName .course-context-label {
    position: static !important;
    inset: auto !important;
    display: flex;
    width: 100%;
    height: 48px;
    margin: 0 !important;
    padding: 0;
    overflow: hidden;
    color: #a9d9be !important;
    flex-direction: column;
    justify-content: center;
    font-family: "Agdasima", sans-serif !important;
    font-size: 15px !important;
    line-height: 1.05;
    letter-spacing: .05em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.skin-cyber .main-container-header #chapterGroupName .course-context-label h2 {
    margin: 0 0 2px !important;
    overflow: hidden;
    color: #68ffad !important;
    font-family: "Rubik Glitch", sans-serif !important;
    font-size: clamp(18px, 1.45vw, 25px) !important;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: 0 0 8px rgba(75, 255, 157, .46) !important;
}

body.skin-cyber .main-container-header .header-button,
body.skin-cyber .main-container-header .global-settings-button {
    order: 2;
    display: flex;
    flex: 0 0 auto;
    width: auto !important;
    min-width: 42px;
    min-height: 44px;
    margin: 0 !important;
    padding: 7px 10px;
    align-items: center;
    justify-content: center !important;
    border: 1px solid transparent;
    border-radius: 3px 12px 3px 12px;
    color: #eafff3 !important;
    background: transparent !important;
}

body.skin-cyber .main-container-header .header-button:hover,
body.skin-cyber .main-container-header .global-settings-button:hover {
    border-color: rgba(83, 255, 169, .36);
    background: rgba(37, 233, 128, .08) !important;
    box-shadow: 0 0 12px rgba(37, 233, 128, .16);
}

body.skin-cyber .main-container-header .header-button,
body.skin-cyber .main-container-header .header-button > div,
body.skin-cyber .main-container-header .header-home-text > div,
body.skin-cyber .main-container-header .material-icons {
    color: #eafff3 !important;
    font-family: "Agdasima", "Arial Narrow", sans-serif;
    font-size: 21px;
    line-height: 1;
}

body.skin-cyber .main-container-header .material-icons {
    color: #62ffa9 !important;
    font-family: "Material Icons" !important;
    font-size: 25px;
}

body.skin-cyber .main-container-header .iiigel-icon {
    width: 56px;
    filter: brightness(0) saturate(100%) invert(87%) sepia(42%) saturate(843%) hue-rotate(86deg) brightness(105%) contrast(102%) drop-shadow(0 0 5px rgba(57, 255, 150, .36));
}

body.skin-cyber .main-container-header .iiigel-icon-text {
    color: #eafff3 !important;
    font-family: "Agdasima", sans-serif !important;
    font-size: 24px;
    line-height: 1;
}

body.skin-cyber .main-container-header .header-home {
    top: auto !important;
    flex-direction: row;
}

body.skin-cyber .main-container-header .header-home-underline {
    display: none !important;
}

body.skin-cyber .main-container-header .logoutBtn {
    width: auto !important;
    min-width: 124px;
}

body.skin-cyber .main-container-header .logoutBtn img {
    filter: brightness(0) saturate(100%) invert(84%) sepia(55%) saturate(765%) hue-rotate(87deg) brightness(105%) contrast(102%);
}

body.skin-cyber .user-header-wrapper {
    width: 100% !important;
    margin-left: 0 !important;
}

body.skin-cyber .header-user-info {
    align-items: flex-end;
}

body.skin-cyber .header-user-info .user-info,
body.skin-cyber .header-user-info .user-info * {
    color: #effff6 !important;
    font-family: "Agdasima", sans-serif !important;
    text-shadow: 0 1px 3px #00100a, 0 0 9px rgba(57, 255, 150, .26);
}

body.skin-cyber .header-user-info .user-info-name {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: .035em;
}

body.skin-cyber .header-user-info .user-info-role {
    font-size: 18px;
}

/* Verlaufskanten: leuchtendes Gruen laeuft kontrolliert in Dunkelgruen aus. */
body.skin-cyber .chapter-block-list > .content-parent:not([type="2"]),
body.skin-cyber .chapter-content > .content-parent:not([type="2"]),
body.skin-cyber .chapter-side-bar,
body.skin-cyber .chapter-button-collection {
    border: 2px solid transparent !important;
    background:
        linear-gradient(145deg, rgba(5, 31, 25, .97), rgba(7, 23, 21, .98)) padding-box,
        linear-gradient(135deg, #62ffab 0%, #168b59 34%, #074632 65%, #081b17 100%) border-box !important;
    box-shadow: 0 0 17px rgba(37, 233, 128, .12), inset 0 0 25px rgba(20, 114, 77, .06) !important;
}

body.skin-cyber .chapter-block-list > .content-parent:nth-child(even):not([type="2"]) {
    background:
        linear-gradient(145deg, rgba(6, 27, 24, .98), rgba(4, 18, 17, .98)) padding-box,
        linear-gradient(315deg, #56fda3 0%, #14794f 36%, #063d2e 67%, #071a16 100%) border-box !important;
}

body.skin-cyber .chapter-content,
body.skin-cyber .chapter-content p,
body.skin-cyber .chapter-content li,
body.skin-cyber .chapter-content strong,
body.skin-cyber .chapter-content em,
body.skin-cyber .chapter-content blockquote,
body.skin-cyber .chapter-content label,
body.skin-cyber .chapter-content .content-parent {
    color: #eafff3 !important;
    font-family: "Agdasima", "Arial Narrow", sans-serif !important;
}

body.skin-cyber .chapter-content p,
body.skin-cyber .chapter-content li,
body.skin-cyber .chapter-content blockquote {
    font-size: clamp(19px, 1.35vw, 24px);
    line-height: 1.35;
}

body.skin-cyber .chapter-content a {
    color: #69ffad !important;
}

body.skin-cyber .chapter-top h1,
body.skin-cyber .back-to-chapter,
body.skin-cyber .back-to-chapter i {
    color: #73ffb4 !important;
    text-shadow: 0 0 8px rgba(63, 255, 155, .42);
}

/* Kapitelmodul: helle Schrift und klarer aktiver Netzwerkstatus. */
body.skin-cyber .chapter-side-bar,
body.skin-cyber .chapter-side-bar h1,
body.skin-cyber .chapter-side-bar p,
body.skin-cyber .chapter-side-bar .chapter-list-item,
body.skin-cyber .chapter-side-bar .chapter-list-item *:not(.material-icons) {
    color: #eafff3 !important;
    font-family: "Agdasima", "Arial Narrow", sans-serif !important;
}

body.skin-cyber .chapter-side-bar h1 {
    font-family: "Rubik Glitch", sans-serif !important;
}

body.skin-cyber .chapter-side-bar .chapter-list-item {
    border-color: rgba(101, 194, 146, .38) !important;
    background: rgba(4, 22, 19, .78) !important;
    font-size: 22px;
}

body.skin-cyber .chapter-side-bar .chapter-list-item.finished {
    border-color: rgba(61, 223, 135, .58) !important;
    background: rgba(24, 118, 76, .2) !important;
}

body.skin-cyber .chapter-side-bar .chapter-list-item.active,
body.skin-cyber .chapter-side-bar .chapter-list-item.selected {
    border-color: #62ffab !important;
    background: linear-gradient(100deg, rgba(21, 112, 73, .38), rgba(4, 29, 23, .9)) !important;
    box-shadow: 0 0 0 1px rgba(98, 255, 171, .56), 0 0 12px rgba(56, 255, 151, .58), 0 0 27px rgba(25, 190, 105, .28) !important;
}

body.skin-cyber .chapter-side-bar .chapter-list-item.active::before,
body.skin-cyber .chapter-side-bar .chapter-list-item.selected::before {
    border-color: #dcffeb !important;
    background: #62ffab !important;
    box-shadow: 0 0 10px rgba(74, 255, 158, .9);
}

body.skin-cyber .chapter-side-bar .chapter-list-item.active::after,
body.skin-cyber .chapter-side-bar .chapter-list-item.selected::after {
    border-color: #48e897 !important;
}

body.skin-cyber .chapter-side-bar .open-chapter-overview i,
body.skin-cyber .chapter-side-bar .overview-edit-container i {
    color: #65ffae !important;
}

body.skin-cyber .chapter-side-bar #add-chapter.white,
body.skin-cyber .chapter-side-bar #add-chapter.white :is(i, .btn-text) {
    color: #03130e !important;
}

body.skin-cyber .chapter-container.expanded .chapter-side-bar {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    height: 550px !important;
    z-index: 30;
}

body.skin-cyber .chapter-container.expanded .chapter-content,
body.skin-cyber .chapter-page-content.expanded .chapter-content-wrapper,
body.skin-cyber .chapter-container.expanded .computed-content,
body.skin-cyber .chapter-container.expanded .chapter-viewable,
body.skin-cyber .chapter-container.expanded .chapter-block-list {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.skin-cyber #levelBar {
    border: 2px solid transparent !important;
    background:
        linear-gradient(90deg, #061b16, #0a2420) padding-box,
        linear-gradient(90deg, #5effa9, #128556 55%, #063a2d) border-box !important;
}

body.skin-cyber #myXP {
    color: #dffff0 !important;
    font-family: "Agdasima", sans-serif !important;
    font-weight: 700 !important;
    text-shadow: 0 0 7px rgba(57, 255, 150, .36);
}

body.skin-cyber #myXPbar {
    background: linear-gradient(90deg, #65ffae, #20d982 58%, #0b754c) !important;
    box-shadow: 0 0 9px rgba(62, 255, 156, .55);
}

@media (max-width: 1050px) {
    body.skin-cyber .main-container-header {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: 70px !important;
        min-height: 70px !important;
        border-radius: 0 !important;
    }

    body.skin-cyber .main-container-header .home {
        min-width: 112px;
    }

    body.skin-cyber .main-container-header #chapterGroupName {
        flex-basis: 210px;
        max-width: 320px;
    }

    body.skin-cyber .main-container-header #chapterGroupName .course-context-label h2 {
        font-size: 16px !important;
    }
}

@media (max-width: 700px) {
    body.skin-cyber .main-container-header #chapterGroupName,
    body.skin-cyber .main-container-header .iiigel-icon-text,
    body.skin-cyber .main-container-header .header-button > div {
        display: none !important;
    }

    body.skin-cyber .main-container-header .home {
        min-width: 54px;
        margin-right: auto !important;
    }

    body.skin-cyber .main-container-header .header-button,
    body.skin-cyber .main-container-header .global-settings-button {
        min-width: 38px;
        padding-inline: 6px;
    }
}

/* Cyber-Skin V2.1 – schwebende Navigation ohne Leistenflaeche. */
body.skin-cyber {
    --skin-profile-size: 118px;
    --skin-profile-top: 57%;
}

body.skin-cyber .main-container-header {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

body.skin-cyber .main-container-header::before,
body.skin-cyber .main-container-header::after {
    display: none !important;
}

body.skin-cyber .main-container-header .home,
body.skin-cyber .main-container-header #chapterGroupName,
body.skin-cyber .main-container-header .header-button,
body.skin-cyber .main-container-header .global-settings-button,
body.skin-cyber .main-container-header .logoutBtn,
body.skin-cyber .main-container-header .header-button:hover,
body.skin-cyber .main-container-header .global-settings-button:hover,
body.skin-cyber .main-container-header .logoutBtn:hover {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.skin-cyber .main-container-header .home {
    transform: translateY(-6px) !important;
}

body.skin-cyber .main-container-header .iiigel-icon,
body.skin-cyber .main-container-header .iiigel-icon-text {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-self: center;
    line-height: 1 !important;
}

body.skin-cyber .main-container-header #chapterGroupName {
    height: 58px;
    align-items: center;
}

body.skin-cyber .main-container-header #chapterGroupName .course-context-label {
    height: 58px;
    justify-content: center;
    transform: translateY(-1px);
}

body.skin-cyber .main-container-header #chapterGroupName .course-context-label h2 {
    margin: 0 0 1px !important;
    font-size: clamp(29px, 2.25vw, 38px) !important;
    line-height: .95;
    text-shadow: 0 0 7px rgba(75, 255, 157, .52), 0 0 17px rgba(28, 194, 105, .28) !important;
}

body.skin-cyber .header-user-info {
    width: 280px;
}

body.skin-cyber .header-user-info .head-container,
body.skin-cyber .header-user-info #profileTextContainer,
body.skin-cyber .header-user-info .user-role,
body.skin-cyber .header-user-info .user-info,
body.skin-cyber .header-user-info .user-info * {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.skin-cyber .header-user-info #profileTextContainer {
    margin-top: 10px;
    padding: 0 !important;
}

body.skin-cyber .header-user-info .user-role {
    margin-top: 5px !important;
    padding: 0 !important;
}

body.skin-cyber .header-user-info .user-info-name {
    font-size: 25px;
}

body.skin-cyber #cardIcon {
    filter: brightness(0) saturate(100%) invert(84%) sepia(60%) saturate(809%) hue-rotate(86deg) brightness(104%) contrast(103%) drop-shadow(0 0 6px rgba(55, 255, 149, .48));
}

@media (max-width: 1050px) {
    body.skin-cyber {
        --skin-profile-size: 108px;
    }

    body.skin-cyber .main-container-header .home {
        transform: translateY(-3px) !important;
    }

    body.skin-cyber .main-container-header #chapterGroupName .course-context-label h2 {
        font-size: 25px !important;
    }
}

/* Cyber-Skin V2.2 – klares Gruen statt Tuerkis, Kursname aus dem Header entfernt. */
body.skin-cyber {
    --skin-accent: #69df4b;
    --skin-accent-strong: #237d32;
    --skin-accent-soft: #9bec73;
    --skin-accent-2: #4fbd43;
    --skin-border: #276e35;
}

body.skin-cyber .main-container-header #chapterGroupName {
    display: none !important;
}

body.skin-cyber .main-container-header .home {
    margin-right: auto !important;
}

body.skin-cyber .main-container-header .iiigel-icon {
    filter: brightness(0) saturate(100%) invert(81%) sepia(57%) saturate(704%) hue-rotate(55deg) brightness(98%) contrast(96%) drop-shadow(0 0 5px rgba(88, 218, 70, .38));
}

body.skin-cyber .main-container-header .material-icons,
body.skin-cyber .back-to-chapter,
body.skin-cyber .back-to-chapter i,
body.skin-cyber .chapter-side-bar .open-chapter-overview i,
body.skin-cyber .chapter-side-bar .overview-edit-container i {
    color: #7be15a !important;
    text-shadow: 0 0 7px rgba(78, 196, 63, .36);
}

body.skin-cyber .chapter-block-list > .content-parent:not([type="2"]),
body.skin-cyber .chapter-content > .content-parent:not([type="2"]),
body.skin-cyber .chapter-side-bar,
body.skin-cyber .chapter-button-collection {
    background:
        linear-gradient(145deg, rgba(5, 31, 20, .97), rgba(7, 23, 17, .98)) padding-box,
        linear-gradient(135deg, #82e657 0%, #319b3e 34%, #195e2d 66%, #0b2115 100%) border-box !important;
    box-shadow: 0 0 15px rgba(79, 190, 66, .12), inset 0 0 24px rgba(48, 139, 55, .055) !important;
}

body.skin-cyber .chapter-block-list > .content-parent:nth-child(even):not([type="2"]) {
    background:
        linear-gradient(145deg, rgba(6, 27, 19, .98), rgba(4, 18, 13, .98)) padding-box,
        linear-gradient(315deg, #79dc50 0%, #2b8d39 36%, #174f29 68%, #091c12 100%) border-box !important;
}

body.skin-cyber .chapter-side-bar .chapter-list-item.active,
body.skin-cyber .chapter-side-bar .chapter-list-item.selected {
    border-color: #76df51 !important;
    background: linear-gradient(100deg, rgba(49, 129, 53, .4), rgba(7, 31, 19, .92)) !important;
    box-shadow: 0 0 0 1px rgba(118, 223, 81, .58), 0 0 12px rgba(82, 199, 65, .56), 0 0 26px rgba(45, 139, 53, .26) !important;
}

body.skin-cyber .chapter-side-bar .chapter-list-item.active::before,
body.skin-cyber .chapter-side-bar .chapter-list-item.selected::before {
    border-color: #e7ffd9 !important;
    background: #7be15a !important;
    box-shadow: 0 0 9px rgba(93, 210, 72, .86);
}

body.skin-cyber #myXPbar {
    background: linear-gradient(90deg, #94ed67, #55c94b 58%, #267c35) !important;
    box-shadow: 0 0 8px rgba(82, 194, 66, .5);
}

body.skin-cyber #cardIcon {
    filter: hue-rotate(275deg) saturate(1.18) brightness(.96) contrast(1.08) drop-shadow(0 0 5px rgba(82, 196, 66, .5));
}

/* ==================PRAKTISCHE SMARTPHONE-ANSICHT================== */
@media (max-width: 700px) {
    .main-container-header,
    #mainHeader {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        display: flex !important;
        width: 100% !important;
        min-height: 62px !important;
        height: 62px !important;
        margin: 0 !important;
        padding: 7px 10px !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-flow: row nowrap !important;
        gap: 5px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    #mainHeader > .home {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        margin: 0 auto 0 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #mainHeader .iiigel-icon {
        width: 40px !important;
        height: 40px !important;
        max-width: 40px !important;
        object-fit: contain !important;
    }

    #mainHeader .iiigel-icon-text,
    #mainHeader > a[href="users"],
    #mainHeader .header-home-text > div,
    #mainHeader .header-home-underline,
    #mainHeader #chapterGroupName {
        display: none !important;
    }

    #mainHeader .global-settings-button,
    #mainHeader .header-button,
    #mainHeader .logoutBtn {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 7px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    #mainHeader .header-home {
        top: auto !important;
        flex-direction: row !important;
    }

    #mainHeader .header-home-text,
    #mainHeader .global-settings-button i,
    #mainHeader .header-home-text i {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        font-size: 27px !important;
    }

    #mainHeader .logoutBtn > div { display: none !important; }

    #mainHeader .logoutBtn img {
        display: block !important;
        width: 27px !important;
        height: 27px !important;
        margin: 0 !important;
        object-fit: contain !important;
    }

    .user-header-wrapper {
        position: relative !important;
        width: 100% !important;
        height: 170px !important;
        min-height: 170px !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .header-info-background {
        width: 100% !important;
        height: 170px !important;
        margin: 0 !important;
    }

    .header-user-info {
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        align-items: center !important;
    }

    #profilePicture,
    .header-user-img {
        width: 84px !important;
        height: 84px !important;
        min-width: 84px !important;
        min-height: 84px !important;
        margin: 0 !important;
    }

    .header-user-info #profile-picture {
        width: 100% !important;
        height: 100% !important;
    }

    .header-user-info #profileTextContainer {
        display: flex !important;
        margin: 6px 0 0 !important;
    }

    .header-user-info .user-info-name {
        max-width: 92vw;
        font-size: 17px !important;
        white-space: nowrap;
    }

    .header-user-info .user-role { display: none !important; }

    .chapter-top .course-context-label,
    #chapterGroupName .course-context-label {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        margin: 0 0 14px !important;
        padding: 9px 12px !important;
        box-sizing: border-box !important;
        border-radius: 9px !important;
        color: var(--black) !important;
        background: var(--grey-bg) !important;
        font-size: 15px !important;
        line-height: 1.25 !important;
        text-align: left !important;
        transform: none !important;
    }

    .chapter-top .course-context-label h2,
    #chapterGroupName .course-context-label h2 {
        margin: 0 0 3px !important;
        color: var(--black) !important;
        font-size: 18px !important;
        line-height: 1.2 !important;
    }

    .chapter-top {
        flex-wrap: wrap !important;
    }
}

/* Chapter navigation states. Skin-specific colors remain authoritative;
   standard iiigel blue/green are only fallbacks. */
.chapter-side-bar .chapter-list-item.active:not(.finished) {
    background: var(--skin-surface-alt, var(--blue-bg)) !important;
    border: 1px solid var(--skin-accent, var(--blue)) !important;
}

.chapter-side-bar .chapter-list-item.finished:not(.active) {
    background: #01c87522 !important;
    border: 1px solid var(--green) !important;
}

.chapter-side-bar .chapter-list-item.finished:not(.active)::before {
    background: var(--green) !important;
}

.chapter-side-bar .chapter-list-item.finished:not(.active):not(:last-child)::after {
    border-color: var(--green) !important;
}

.chapter-side-bar .chapter-list-item.finished.active {
    background: #01c87522 !important;
    border: 1px solid var(--skin-accent, var(--blue)) !important;
}

.chapter-side-bar .chapter-list-item.finished.active::before {
    background: var(--skin-accent, var(--blue)) !important;
}

.chapter-side-bar .chapter-list-item.finished.active:not(:last-child)::after {
    border-color: var(--skin-accent, var(--blue)) !important;
}

/* Battle: responsive fullscreen layout */
.full-screen.battle-active {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden !important;
    background: url('../assets/graphics/quiz-background.png') center / cover no-repeat;
}

.full-screen.battle-active .full-screen-top {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    flex: 0 0 auto;
    gap: clamp(12px, 2vw, 28px);
    width: min(100%, 1280px);
    margin: 0 auto !important;
    padding: clamp(8px, 1.5vh, 16px) clamp(16px, 3vw, 40px) 6px !important;
    box-sizing: border-box;
}

.full-screen.battle-active .full-screen-top > h2 {
    flex: 0 0 auto;
    margin: 0;
    font-size: clamp(26px, 3vw, 42px) !important;
    line-height: 1.05;
}

.full-screen.battle-active .full-screen-top .auto-top,
.full-screen.battle-active .full-screen-top .package-top-editor {
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.full-screen.battle-active .full-screen-top .ql-editor,
.full-screen.battle-active .full-screen-top .ql-editor p {
    overflow-wrap: anywhere;
    font-size: clamp(17px, 1.8vw, 26px) !important;
    line-height: 1.25 !important;
    text-align: center;
}

.full-screen.battle-active .quiz-background {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    height: auto !important;
    padding: 4px clamp(16px, 4vw, 56px) 16px !important;
    box-sizing: border-box;
    overflow: hidden;
    background: transparent !important;
}

.full-screen.battle-active .battle-mask {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    width: min(100%, 1400px);
    height: auto;
    margin: 0 auto;
    padding: 0 0 12px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: hidden;
}

.full-screen.battle-active .battle-mask .quiz-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    flex: 0 0 auto;
    gap: clamp(12px, 3vw, 30px);
    width: 100%;
    margin: 0 0 8px;
}

.full-screen.battle-active .quiz-top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
}

.full-screen.battle-active .quiz-top-content h2 {
    margin: 0;
    font-size: clamp(28px, 4vw, 48px) !important;
    line-height: 1.05;
}

.full-screen.battle-active .quiz-top-content .base-timer {
    width: clamp(82px, 10vw, 120px);
    height: clamp(82px, 10vw, 120px);
    margin-top: 8px;
}

.full-screen.battle-active .num-pages {
    min-width: 0;
}

.full-screen.battle-active .battle-points-info {
    flex: 0 0 auto;
    width: min(100%, 1000px);
    margin: 0 auto clamp(8px, 1.8vh, 18px) !important;
    padding: 0 8px;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

.full-screen.battle-active .battle-points-short {
    display: none;
}

.full-screen.battle-active .battle-mask .question-collection {
    flex: 0 0 auto;
    align-items: flex-start;
    min-height: 0;
    max-height: none !important;
    overflow: visible !important;
}

.full-screen.battle-active .battle-mask .question:not(.ac) {
    height: 0 !important;
    max-height: 0;
    overflow: hidden !important;
    visibility: hidden;
}

.full-screen.battle-active .battle-mask .question,
.full-screen.battle-active .battle-mask .question.ac > div:not(.page-title) {
    min-width: 0;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
    overflow: visible;
}

.full-screen.battle-active .battle-mask .ql-container.centered,
.full-screen.battle-active .battle-mask .ql-container.centered .ql-editor,
.full-screen.battle-active .battle-mask .ql-container.centered .ql-editor p {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}

.full-screen.battle-active .battle-mask .page-title {
    margin: 0 auto;
    padding: 8px 16px;
    box-sizing: border-box;
}

.full-screen.battle-active .battle-mask .page-title .ql-editor,
.full-screen.battle-active .battle-mask .page-title .ql-editor p {
    overflow-wrap: anywhere;
    font-size: clamp(20px, 2.7vw, 36px) !important;
    line-height: 1.2 !important;
    text-align: center;
}

.full-screen.battle-active .battle-mask .page-title .ql-formula,
.full-screen.battle-active .battle-mask .page-title .katex {
    max-width: 100%;
    font-size: 1em !important;
}

.full-screen.battle-active .text-answer {
    width: min(calc(100% - 32px), 760px) !important;
    min-height: 52px;
    margin: clamp(8px, 2vh, 20px) auto !important;
    box-sizing: border-box;
}

.full-screen.battle-active .next-q-bottom {
    flex: 0 0 auto;
    width: min(calc(100% - 32px), 420px);
    margin: clamp(8px, 1.8vh, 18px) auto 0;
    text-align: center;
}

.full-screen.battle-active .next-q-bottom .next-question {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100%;
    margin-top: 6px;
    box-sizing: border-box;
}

.full-screen.battle-active .leave-battle {
    z-index: 5;
    top: 24px;
    right: 24px;
    padding: 10px 16px !important;
    font-size: clamp(15px, 1.5vw, 20px);
}

.full-screen.battle-active.battle-state-queue .quiz-background {
    padding-top: clamp(16px, 4vh, 40px) !important;
    overflow-y: auto;
}

.full-screen.battle-active .battle-queue {
    display: flex;
    flex-direction: column;
    width: min(100%, 600px);
    height: auto;
    min-height: 0;
    margin: auto;
}

.full-screen.battle-active .battle-queue .vs-display {
    width: 100%;
    margin-top: clamp(12px, 2vh, 20px);
}

.full-screen.battle-active .battle-queue .queue-bottom-buttons {
    flex: 0 0 auto;
}

.full-screen.battle-active.battle-state-leaderboard .battle-mask > .quiz-top,
.full-screen.battle-active.battle-state-leaderboard .battle-points-info {
    display: none;
}

.full-screen.battle-active.battle-state-leaderboard .leaderboard {
    height: auto;
    min-height: 0;
    padding: 20px 0;
    box-sizing: border-box;
}

@media (max-width: 900px), (max-height: 650px) {
    .full-screen.battle-active {
        overflow: hidden !important;
    }

    .full-screen.battle-active .full-screen-top {
        display: block !important;
        width: 100%;
        padding: clamp(4px, 1vh, 8px) 10px 2px !important;
    }

    .full-screen.battle-active .full-screen-top > h2 {
        display: none;
    }

    .full-screen.battle-active .full-screen-top .ql-editor,
    .full-screen.battle-active .full-screen-top .ql-editor p {
        font-size: clamp(14px, 4.2vw, 20px) !important;
        line-height: 1.18 !important;
        text-align: center;
    }

    .full-screen.battle-active .quiz-background {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        padding: 4px 8px max(6px, env(safe-area-inset-bottom)) !important;
        overflow: hidden;
    }

    .full-screen.battle-active .leave-battle {
        position: absolute !important;
        top: 4px;
        right: 8px;
        margin: 0;
        padding: 7px 10px !important;
        font-size: 12px;
        line-height: 1.15;
    }

    .full-screen.battle-active .battle-mask {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        padding-bottom: 4px;
        overflow: hidden;
    }

    .full-screen.battle-active .battle-mask .quiz-top {
        grid-template-columns: clamp(52px, 9vh, 66px) minmax(0, 1fr);
        gap: 6px;
        margin-bottom: 3px;
        padding-top: 34px;
    }

    .full-screen.battle-active .quiz-top-content {
        min-width: 0;
    }

    .full-screen.battle-active .quiz-top-content h2 {
        display: none;
    }

    .full-screen.battle-active .quiz-top-content .base-timer {
        width: clamp(52px, 9vh, 66px);
        height: clamp(52px, 9vh, 66px);
        margin-top: 0;
    }

    .full-screen.battle-active .quiz-top-content .base-timer__label {
        font-size: clamp(14px, 2.5vh, 17px);
        line-height: 1.05;
    }

    .full-screen.battle-active .time-small {
        font-size: 9px;
    }

    .full-screen.battle-active .page-indicator {
        height: 7px;
    }

    .full-screen.battle-active .battle-points-info {
        margin-bottom: clamp(3px, 1vh, 8px) !important;
        padding: 0;
        font-size: clamp(10px, 2.8vw, 12px);
        line-height: 1.15;
    }

    .full-screen.battle-active .battle-points-long {
        display: none;
    }

    .full-screen.battle-active .battle-points-short {
        display: inline;
    }

    .full-screen.battle-active .battle-mask .page-title {
        width: 100%;
        padding: clamp(2px, 0.8vh, 6px) 2px;
    }

    .full-screen.battle-active .battle-mask .page-title .ql-editor,
    .full-screen.battle-active .battle-mask .page-title .ql-editor p {
        font-size: clamp(17px, 5vw, 24px) !important;
        line-height: 1.15 !important;
        text-align: center;
    }

    .full-screen.battle-active .battle-mask .page-title .ql-formula,
    .full-screen.battle-active .battle-mask .page-title .katex {
        font-size: 0.92em !important;
    }

    .full-screen.battle-active .text-answer {
        width: calc(100% - 16px) !important;
        min-height: clamp(42px, 7vh, 50px);
        height: clamp(42px, 7vh, 50px);
        margin: clamp(4px, 1.2vh, 9px) auto !important;
        padding: 8px 12px !important;
        font-size: 16px !important;
    }

    .full-screen.battle-active .next-q-bottom {
        width: calc(100% - 16px);
        margin-top: clamp(3px, 1vh, 8px);
        font-size: 11px;
        line-height: 1.15;
    }

    .full-screen.battle-active .next-q-bottom > div:first-child:not(.next-question) {
        display: none;
    }

    .full-screen.battle-active .next-q-bottom .next-question {
        min-height: 40px;
        margin-top: 3px;
        padding: 8px 12px !important;
        font-size: 16px;
    }

    .full-screen.battle-active .waiting-text {
        font-size: 18px;
    }

    .full-screen.battle-active.battle-state-queue .quiz-background {
        min-height: 0;
        padding-top: 14px !important;
    }

    .full-screen.battle-active .battle-queue {
        width: 100%;
        margin: 0 auto;
    }

    .full-screen.battle-active .battle-queue > h4 {
        margin: 0 0 6px;
        font-size: 30px;
    }

    .full-screen.battle-active .battle-queue .queue-text {
        font-size: 18px;
    }

    .full-screen.battle-active .battle-queue .vs-display {
        max-height: min(52vh, 440px);
        overflow: hidden;
        border-radius: 16px;
    }

    .full-screen.battle-active .battle-queue .vs-display > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .full-screen.battle-active .battle-queue .vs-top .self {
        width: clamp(72px, 24vw, 100px);
        height: clamp(72px, 24vw, 100px);
    }

    .full-screen.battle-active .leaderboard .points-board,
    .full-screen.battle-active .leaderboard .points-row {
        width: min(100%, 620px);
    }
}

@media (max-width: 420px) {
    .full-screen.battle-active .battle-queue .queue-bottom-buttons {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 12px;
    }

    .full-screen.battle-active .battle-queue .queue-bottom-buttons .button {
        box-sizing: border-box;
        margin: 0;
    }
}

/* ========================================================================== */
/* Neumorphism skin                                                           */
/* ========================================================================== */

body.skin-neumorphism {
    --neu-bg: #e7ecf2;
    --neu-surface: #e7ecf2;
    --neu-surface-light: #f1f5f9;
    --neu-text: #334155;
    --neu-muted: #64748b;
    --neu-blue: #185abc;
    --neu-blue-soft: #dce7f7;
    --neu-green: #198754;
    --neu-shadow: 10px 10px 24px #c2c8cf, -10px -10px 24px #ffffff;
    --neu-shadow-soft: 6px 6px 14px #c5cbd2, -6px -6px 14px #ffffff;
    --neu-shadow-small: 3px 3px 8px #c4cad1, -3px -3px 8px #ffffff;
    --neu-inset: inset 4px 4px 9px #c7cdd4, inset -4px -4px 9px #ffffff;
    --black: var(--neu-text);
    --white: var(--neu-surface);
    --light-grey: var(--neu-bg);
    --border-grey: transparent;
    color: var(--neu-text);
    background: var(--neu-bg) !important;
}

body.skin-neumorphism::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 14% 10%, rgba(255,255,255,.82), transparent 28%),
        radial-gradient(circle at 86% 82%, rgba(185,202,222,.42), transparent 30%),
        var(--neu-bg);
}

body.skin-neumorphism main,
body.skin-neumorphism #content-wrapper,
body.skin-neumorphism .main-container,
body.skin-neumorphism .chapter-page-content {
    background: transparent !important;
}

body.skin-neumorphism .main-container-header {
    background: var(--neu-surface) !important;
    border: 0 !important;
    box-shadow: 0 12px 28px rgba(148, 163, 184, .26);
}

body.skin-neumorphism .main-container-header .home,
body.skin-neumorphism .header-info-background,
body.skin-neumorphism .user-header-wrapper::before {
    background: transparent !important;
}

body.skin-neumorphism .user-header-wrapper,
body.skin-neumorphism .chapter-side-bar,
body.skin-neumorphism .content-parent:not([type="2"]),
body.skin-neumorphism .chapter-button-collection,
body.skin-neumorphism #add-course,
body.skin-neumorphism #add-group,
body.skin-neumorphism .dialog .dialog-content.settings-dialog,
body.skin-neumorphism .chapter-item {
    border: 0 !important;
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-shadow);
}

body.skin-neumorphism .group-tile,
body.skin-neumorphism .course-tile,
body.skin-neumorphism .tile,
body.skin-neumorphism .tileOuterBox {
    border: 0 !important;
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-shadow-soft) !important;
}

body.skin-neumorphism .group-tile:hover,
body.skin-neumorphism .course-tile:hover,
body.skin-neumorphism .tile:hover,
body.skin-neumorphism .chapter-item:not(.editing):hover {
    box-shadow: 13px 13px 27px #bec5cc, -13px -13px 27px #ffffff !important;
    transform: translateY(-2px);
}

body.skin-neumorphism .group-tile-infos,
body.skin-neumorphism .course-tile-info,
body.skin-neumorphism .tileInfoWrapper {
    background: linear-gradient(145deg, rgba(255,255,255,.38), rgba(218,225,233,.62)) !important;
    border: 0 !important;
}

body.skin-neumorphism .group-image,
body.skin-neumorphism .course-image,
body.skin-neumorphism .tileCoursePictureDiv,
body.skin-neumorphism .header-user-img,
body.skin-neumorphism #profilePicture,
body.skin-neumorphism #profile-picture {
    border-color: var(--neu-bg) !important;
    box-shadow: var(--neu-inset), var(--neu-shadow-small);
}

body.skin-neumorphism .iiigel-icon-text,
body.skin-neumorphism .user-info,
body.skin-neumorphism .user-info *,
body.skin-neumorphism .home-paragraph-header,
body.skin-neumorphism #courseHeadline,
body.skin-neumorphism .groupBar,
body.skin-neumorphism .chapter-top h1,
body.skin-neumorphism .chapter-head,
body.skin-neumorphism .title-text-big,
body.skin-neumorphism .tile-text-big,
body.skin-neumorphism .chapter-side-bar *,
body.skin-neumorphism .chapter-item {
    color: var(--neu-text) !important;
}

body.skin-neumorphism .tile-text-small,
body.skin-neumorphism .group-member-count,
body.skin-neumorphism .chapter-list-item-pos,
body.skin-neumorphism .chapter-list-item-pos-max {
    color: var(--neu-muted) !important;
}

body.skin-neumorphism .global-settings-button,
body.skin-neumorphism .header-button,
body.skin-neumorphism .logoutBtn,
body.skin-neumorphism .quiz-button,
body.skin-neumorphism .button-quiz,
body.skin-neumorphism .button,
body.skin-neumorphism .main-button,
body.skin-neumorphism .color-main,
body.skin-neumorphism .btn-floating:not(.white),
body.skin-neumorphism .chapter-button-collection a,
body.skin-neumorphism .chapter-button-collection .btn-floating,
body.skin-neumorphism #add-chapter.white {
    border: 0 !important;
    color: var(--neu-blue) !important;
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-shadow-small) !important;
}

body.skin-neumorphism .global-settings-button:hover,
body.skin-neumorphism .header-button:hover,
body.skin-neumorphism .logoutBtn:hover,
body.skin-neumorphism .quiz-button:hover,
body.skin-neumorphism .button:hover,
body.skin-neumorphism .main-button:hover,
body.skin-neumorphism .btn-floating:not(.white):hover {
    color: #0f4b9f !important;
    background: var(--neu-surface-light) !important;
}

body.skin-neumorphism .global-settings-button:active,
body.skin-neumorphism .header-button:active,
body.skin-neumorphism .logoutBtn:active,
body.skin-neumorphism .quiz-button:active,
body.skin-neumorphism .button:active,
body.skin-neumorphism .main-button:active,
body.skin-neumorphism .switch-active,
body.skin-neumorphism .chapter-item.finished {
    box-shadow: var(--neu-inset) !important;
}

body.skin-neumorphism .global-settings-button i,
body.skin-neumorphism .header-home-text > div,
body.skin-neumorphism .header-home-text > i,
body.skin-neumorphism .icon-blue,
body.skin-neumorphism .chapter-button-collection i:not(.red-color),
body.skin-neumorphism .back-to-chapter i,
body.skin-neumorphism #add-chapter.white i,
body.skin-neumorphism #add-chapter.white .btn-text {
    color: var(--neu-blue) !important;
}

body.skin-neumorphism input:not([type="checkbox"]):not([type="radio"]),
body.skin-neumorphism select,
body.skin-neumorphism textarea,
body.skin-neumorphism .global-settings-dialog select {
    border: 0 !important;
    color: var(--neu-text) !important;
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-inset) !important;
}

body.skin-neumorphism #levelBar,
body.skin-neumorphism .progress-bar-wrapper,
body.skin-neumorphism .chapter-item-progress {
    border: 0 !important;
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-inset) !important;
}

body.skin-neumorphism #levelBar > span,
body.skin-neumorphism .progress-bar,
body.skin-neumorphism .chapter-item-progress.finished {
    background: linear-gradient(90deg, #185abc, #6d91c5) !important;
    box-shadow: 2px 2px 6px rgba(24,90,188,.28);
}

body.skin-neumorphism #myLvl,
body.skin-neumorphism #myXP,
body.skin-neumorphism .level-bar-wrapper .material-icons {
    color: var(--neu-blue) !important;
}

body.skin-neumorphism .chapter-content .content-parent[type="2"],
body.skin-neumorphism .chapter-content .content-parent[type="2"] .quiz-wrapper,
body.skin-neumorphism .chapter-content .content-parent[type="2"] .memory-wrappper,
body.skin-neumorphism .quiz-preview,
body.skin-neumorphism .start-quiz-container {
    background-color: #ffffff !important;
}

body.skin-neumorphism .ql-syntax.hljs,
body.skin-neumorphism .ql-syntax {
    box-shadow: var(--neu-inset);
}

body.skin-neumorphism .dialog .dialog-content,
body.skin-neumorphism .course-dialog .dialog-content-wrapper {
    color: var(--neu-text);
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-shadow) !important;
}

body.skin-neumorphism .chapter-edit-content {
    color: #202124 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.skin-neumorphism .chapter-edit-content .content-parent {
    border: 1px solid #dadce0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.skin-neumorphism .chapter-edit-content input:not([type="checkbox"]):not([type="radio"]),
body.skin-neumorphism .chapter-edit-content select,
body.skin-neumorphism .chapter-edit-content textarea {
    color: #202124 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

@media (max-width: 700px) {
    body.skin-neumorphism {
        --neu-shadow: 7px 7px 17px #c2c8cf, -7px -7px 17px #ffffff;
        --neu-shadow-soft: 5px 5px 12px #c5cbd2, -5px -5px 12px #ffffff;
    }

    body.skin-neumorphism .group-tile:hover,
    body.skin-neumorphism .course-tile:hover,
    body.skin-neumorphism .tile:hover,
    body.skin-neumorphism .chapter-item:not(.editing):hover {
        transform: none;
    }
}

/* Neumorphism skin v3: graphite surfaces with cyan/violet depth. */
body.skin-neumorphism {
    --neu-bg: #454851;
    --neu-surface: #4b4e58;
    --neu-surface-light: #525660;
    --neu-text: #f2f5f8;
    --neu-muted: #c0c8d2;
    --neu-blue: #36d6e7;
    --neu-blue-soft: #394e57;
    --neu-green: #56d39a;
    --neu-shadow: 12px 12px 26px rgba(42, 44, 52, .72), -10px -10px 23px rgba(100, 104, 116, .46);
    --neu-shadow-soft: 7px 7px 16px rgba(39, 41, 48, .7), -6px -6px 15px rgba(101, 105, 117, .42);
    --neu-shadow-small: 5px 5px 11px rgba(37, 39, 46, .72), -4px -4px 10px rgba(103, 107, 119, .42);
    --neu-inset: inset 4px 4px 10px rgba(35, 37, 44, .72), inset -4px -4px 10px rgba(103, 107, 119, .38);
    --black: var(--neu-text);
    --white: var(--neu-surface);
    --light-grey: var(--neu-bg);
    --grey-bg: var(--neu-surface);
    --primary-blue: var(--neu-blue);
    color: var(--neu-text);
    background: var(--neu-bg) !important;
}

body.skin-neumorphism::before {
    background:
        radial-gradient(circle at 12% 8%, rgba(53, 215, 232, .09), transparent 28%),
        radial-gradient(circle at 88% 72%, rgba(171, 91, 222, .1), transparent 30%),
        linear-gradient(145deg, #4b4e57 0%, #42454e 100%) !important;
}

body.skin-neumorphism .main-container-header {
    padding: 10px 16px;
    border: 1px solid rgba(135, 140, 153, .34) !important;
    background: #4b4e58 !important;
    box-shadow: var(--neu-shadow) !important;
}

body.skin-neumorphism #mainHeader > .header-button,
body.skin-neumorphism #mainHeader > .global-settings-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-height: 58px !important;
    height: 58px !important;
    margin: 8px !important;
    padding: 0 22px !important;
    border: 1px solid rgba(126, 132, 145, .32) !important;
    border-radius: 16px !important;
    color: var(--neu-text) !important;
    background: #474a53 !important;
    box-shadow: var(--neu-shadow-small) !important;
}

body.skin-neumorphism #mainHeader > .header-button {
    width: 168px !important;
    min-width: 168px !important;
}

body.skin-neumorphism #mainHeader > .global-settings-button {
    width: 58px !important;
    min-width: 58px !important;
    padding: 0 !important;
}

body.skin-neumorphism #mainHeader > .header-button:hover,
body.skin-neumorphism #mainHeader > .global-settings-button:hover {
    color: #76eff7 !important;
    background: #4d505a !important;
    box-shadow: 5px 5px 12px rgba(34, 36, 43, .72), -4px -4px 11px rgba(106, 110, 122, .44), 0 0 16px rgba(54, 214, 231, .14) !important;
}

body.skin-neumorphism #mainHeader > .header-button:active,
body.skin-neumorphism #mainHeader > .global-settings-button:active {
    box-shadow: var(--neu-inset) !important;
}

body.skin-neumorphism #mainHeader .header-home {
    top: 0;
}

body.skin-neumorphism #mainHeader .header-home-text,
body.skin-neumorphism #mainHeader .header-home-text > div,
body.skin-neumorphism #mainHeader .header-home-text > i,
body.skin-neumorphism #mainHeader .header-button > div,
body.skin-neumorphism #mainHeader .global-settings-button i {
    color: inherit !important;
}

body.skin-neumorphism #mainHeader .header-home-underline {
    border-color: var(--neu-blue) transparent transparent transparent;
}

body.skin-neumorphism #mainHeader .logoutBtn img {
    filter: invert(1) brightness(1.35);
}

body.skin-neumorphism .user-header-wrapper {
    border-color: rgba(116, 123, 137, .35) !important;
    background:
        radial-gradient(circle at 13% -22%, rgba(74, 222, 235, .17) 0 26%, transparent 26.4%),
        radial-gradient(circle at 86% 126%, rgba(168, 90, 220, .18) 0 28%, transparent 28.4%),
        linear-gradient(135deg, #454953 0%, #3f424b 54%, #484a54 100%) !important;
}

body.skin-neumorphism .user-header-wrapper::before {
    background: rgba(73, 221, 235, .07) !important;
    box-shadow: 0 0 70px rgba(52, 215, 231, .14) !important;
}

body.skin-neumorphism .user-header-wrapper::after {
    background: rgba(174, 91, 222, .08) !important;
    box-shadow: 0 0 75px rgba(174, 91, 222, .15);
}

body.skin-neumorphism .header-user-img,
body.skin-neumorphism #profilePicture {
    border-color: #525660 !important;
    background: #4b4e58;
    box-shadow: 8px 8px 18px rgba(30, 32, 38, .72), -6px -6px 16px rgba(102, 107, 119, .4), 0 0 18px rgba(54, 214, 231, .17) !important;
}

body.skin-neumorphism .iiigel-icon-text,
body.skin-neumorphism .user-info,
body.skin-neumorphism .user-info *,
body.skin-neumorphism .home-paragraph-header,
body.skin-neumorphism #courseHeadline,
body.skin-neumorphism .groupBar,
body.skin-neumorphism .chapter-top h1,
body.skin-neumorphism .chapter-head,
body.skin-neumorphism .title-text-big,
body.skin-neumorphism .tile-text-big,
body.skin-neumorphism .chapter-side-bar *,
body.skin-neumorphism .chapter-item,
body.skin-neumorphism .content-parent:not([type="2"]) {
    color: var(--neu-text) !important;
}

body.skin-neumorphism .user-info-role,
body.skin-neumorphism .tile-text-small,
body.skin-neumorphism .group-member-count,
body.skin-neumorphism .chapter-list-item-pos,
body.skin-neumorphism .chapter-list-item-pos-max {
    color: var(--neu-muted) !important;
}

body.skin-neumorphism .chapter-side-bar,
body.skin-neumorphism .content-parent:not([type="2"]),
body.skin-neumorphism .chapter-button-collection,
body.skin-neumorphism #add-course,
body.skin-neumorphism #add-group,
body.skin-neumorphism .dialog .dialog-content.settings-dialog,
body.skin-neumorphism .chapter-item,
body.skin-neumorphism .group-tile,
body.skin-neumorphism .course-tile,
body.skin-neumorphism .tile,
body.skin-neumorphism .tileOuterBox {
    border-color: rgba(125, 131, 144, .28) !important;
    background: var(--neu-surface) !important;
}

body.skin-neumorphism .chapter-button-collection {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px !important;
    border-radius: 20px !important;
    box-shadow: var(--neu-shadow-soft) !important;
}

body.skin-neumorphism .chapter-button-collection > a,
body.skin-neumorphism .chapter-button-collection > .btn-floating {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(127, 133, 146, .28) !important;
    border-radius: 15px !important;
    background: #474a53 !important;
    box-shadow: var(--neu-shadow-small) !important;
}

body.skin-neumorphism .chapter-button-collection > a i {
    margin: 0 !important;
    font-size: 28px !important;
    line-height: 1 !important;
    color: var(--neu-blue) !important;
}

body.skin-neumorphism .chapter-button-collection > a i.red-color {
    color: #ff7181 !important;
}

body.skin-neumorphism input:not([type="checkbox"]):not([type="radio"]),
body.skin-neumorphism select,
body.skin-neumorphism textarea,
body.skin-neumorphism .global-settings-dialog select {
    color: var(--neu-text) !important;
    background: #444750 !important;
    box-shadow: var(--neu-inset) !important;
}

body.skin-neumorphism .chapter-content .content-parent[type="2"],
body.skin-neumorphism .chapter-content .content-parent[type="2"] .quiz-wrapper,
body.skin-neumorphism .chapter-content .content-parent[type="2"] .memory-wrappper,
body.skin-neumorphism .quiz-preview,
body.skin-neumorphism .start-quiz-container,
body.skin-neumorphism .dialog .dialog-content,
body.skin-neumorphism .course-dialog .dialog-content-wrapper {
    color: var(--neu-text) !important;
    background-color: var(--neu-surface) !important;
}

body.skin-neumorphism #levelBar,
body.skin-neumorphism .progress-bar-wrapper,
body.skin-neumorphism .chapter-item-progress {
    background: #3f424a !important;
}

body.skin-neumorphism #levelBar > span,
body.skin-neumorphism .progress-bar,
body.skin-neumorphism .chapter-item-progress.finished {
    background: linear-gradient(90deg, #35d7e8, #9c5cdb) !important;
    box-shadow: 0 0 12px rgba(53, 215, 232, .28);
}

@media (max-width: 700px) {
    body.skin-neumorphism #mainHeader > .header-button,
    body.skin-neumorphism #mainHeader > .global-settings-button {
        width: 46px !important;
        min-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 7px !important;
    }

    body.skin-neumorphism .chapter-button-collection > a,
    body.skin-neumorphism .chapter-button-collection > .btn-floating {
        width: 48px !important;
        min-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
    }
}

/* Neumorphism skin refinement: calm surfaces, compact depth and a clean hero. */
body.skin-neumorphism {
    --neu-bg: #edf2f7;
    --neu-surface: #f7f9fc;
    --neu-surface-light: #ffffff;
    --neu-text: #24364b;
    --neu-muted: #66768a;
    --neu-blue: #1764c0;
    --neu-blue-soft: #dce9f8;
    --neu-shadow: 0 10px 26px rgba(73, 91, 113, .11), 0 2px 6px rgba(73, 91, 113, .07);
    --neu-shadow-soft: 5px 5px 12px rgba(164, 175, 188, .34), -5px -5px 12px rgba(255, 255, 255, .9);
    --neu-shadow-small: 3px 3px 7px rgba(164, 175, 188, .3), -3px -3px 7px rgba(255, 255, 255, .88);
    --neu-inset: inset 3px 3px 7px rgba(169, 180, 193, .3), inset -3px -3px 7px rgba(255, 255, 255, .9);
    background: #edf2f7 !important;
}

body.skin-neumorphism::before {
    background: linear-gradient(180deg, #f7f9fc 0, #edf2f7 420px, #eaf0f6 100%) !important;
}

body.skin-neumorphism .main-container-header {
    top: 48px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .9) !important;
    border-radius: 20px;
    background: rgba(247, 249, 252, .96) !important;
    box-shadow: 0 8px 24px rgba(61, 78, 99, .12), 0 1px 3px rgba(61, 78, 99, .08) !important;
}

body.skin-neumorphism .main-container-header .home {
    background: transparent !important;
    box-shadow: none !important;
}

body.skin-neumorphism .user-header-wrapper {
    position: relative;
    isolation: isolate;
    min-height: 280px;
    margin-top: 82px;
    overflow: hidden;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .9) !important;
    border-bottom: 1px solid rgba(132, 153, 178, .18) !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, #dbe7f4 0%, #eef4fa 48%, #f8fafc 100%) !important;
    box-shadow: none !important;
}

body.skin-neumorphism .user-header-wrapper::before,
body.skin-neumorphism .user-header-wrapper::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    pointer-events: none;
}

body.skin-neumorphism .user-header-wrapper::before {
    top: -220px;
    left: 7%;
    background: rgba(255, 255, 255, .62) !important;
    box-shadow: none !important;
}

body.skin-neumorphism .user-header-wrapper::after {
    right: 8%;
    bottom: -275px;
    background: rgba(174, 199, 226, .27);
}

body.skin-neumorphism .header-info-background {
    display: none !important;
}

body.skin-neumorphism .header-user-info {
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

body.skin-neumorphism .header-user-img,
body.skin-neumorphism #profilePicture {
    width: 170px;
    height: 170px;
    border: 7px solid rgba(247, 249, 252, .94) !important;
    background: #f7f9fc;
    box-shadow: 0 9px 24px rgba(49, 68, 91, .18) !important;
}

body.skin-neumorphism .user-info-name {
    font-size: 24px;
    letter-spacing: -.01em;
}

body.skin-neumorphism .user-info-role {
    color: var(--neu-muted) !important;
    font-size: 16px;
}

body.skin-neumorphism .head-container {
    margin-top: 10px;
}

body.skin-neumorphism .header-user-info .user-role {
    margin-top: 0;
}

body.skin-neumorphism .chapter-side-bar,
body.skin-neumorphism .content-parent:not([type="2"]),
body.skin-neumorphism .chapter-button-collection,
body.skin-neumorphism #add-course,
body.skin-neumorphism #add-group,
body.skin-neumorphism .dialog .dialog-content.settings-dialog,
body.skin-neumorphism .chapter-item {
    border: 1px solid rgba(255, 255, 255, .82) !important;
    background: rgba(247, 249, 252, .92) !important;
    box-shadow: var(--neu-shadow) !important;
}

body.skin-neumorphism .chapter-button-collection {
    padding: 8px !important;
    border-radius: 16px !important;
}

body.skin-neumorphism .group-tile:hover,
body.skin-neumorphism .course-tile:hover,
body.skin-neumorphism .tile:hover,
body.skin-neumorphism .chapter-item:not(.editing):hover {
    box-shadow: 7px 7px 16px rgba(151, 164, 179, .34), -6px -6px 15px rgba(255, 255, 255, .88) !important;
    transform: translateY(-1px);
}

body.skin-neumorphism .global-settings-button,
body.skin-neumorphism .header-button,
body.skin-neumorphism .logoutBtn,
body.skin-neumorphism .chapter-button-collection a,
body.skin-neumorphism .chapter-button-collection .btn-floating {
    border: 1px solid rgba(255, 255, 255, .78) !important;
    border-radius: 12px !important;
}

@media (max-width: 700px) {
    body.skin-neumorphism .main-container-header {
        border-radius: 0 0 16px 16px !important;
    }

    body.skin-neumorphism .user-header-wrapper {
        min-height: 170px;
        margin-top: 0;
    }

    body.skin-neumorphism .header-user-info {
        top: 50%;
    }

    body.skin-neumorphism .header-user-img,
    body.skin-neumorphism #profilePicture {
        width: 84px;
        height: 84px;
        border-width: 4px !important;
    }
}

/* Keep the graphite v3 palette authoritative over the earlier refinement. */
body.skin-neumorphism {
    --neu-bg: #454851;
    --neu-surface: #4b4e58;
    --neu-surface-light: #525660;
    --neu-text: #f2f5f8;
    --neu-muted: #c0c8d2;
    --neu-blue: #36d6e7;
    --neu-blue-soft: #394e57;
    --neu-green: #56d39a;
    --neu-shadow: 12px 12px 26px rgba(42, 44, 52, .72), -10px -10px 23px rgba(100, 104, 116, .46);
    --neu-shadow-soft: 7px 7px 16px rgba(39, 41, 48, .7), -6px -6px 15px rgba(101, 105, 117, .42);
    --neu-shadow-small: 5px 5px 11px rgba(37, 39, 46, .72), -4px -4px 10px rgba(103, 107, 119, .42);
    --neu-inset: inset 4px 4px 10px rgba(35, 37, 44, .72), inset -4px -4px 10px rgba(103, 107, 119, .38);
    --black: var(--neu-text);
    --white: var(--neu-surface);
    --light-grey: var(--neu-bg);
    --grey-bg: var(--neu-surface);
    --primary-blue: var(--neu-blue);
    color: var(--neu-text);
    background: var(--neu-bg) !important;
}

body.skin-neumorphism::before {
    background:
        radial-gradient(circle at 12% 8%, rgba(53, 215, 232, .09), transparent 28%),
        radial-gradient(circle at 88% 72%, rgba(171, 91, 222, .1), transparent 30%),
        linear-gradient(145deg, #4b4e57 0%, #42454e 100%) !important;
}

body.skin-neumorphism .main-container-header {
    padding: 10px 16px;
    border-color: rgba(135, 140, 153, .34) !important;
    background: #4b4e58 !important;
    box-shadow: var(--neu-shadow) !important;
}

body.skin-neumorphism .user-header-wrapper {
    border-color: rgba(116, 123, 137, .35) !important;
    background:
        radial-gradient(circle at 13% -22%, rgba(74, 222, 235, .17) 0 26%, transparent 26.4%),
        radial-gradient(circle at 86% 126%, rgba(168, 90, 220, .18) 0 28%, transparent 28.4%),
        linear-gradient(135deg, #454953 0%, #3f424b 54%, #484a54 100%) !important;
    box-shadow: none !important;
}

body.skin-neumorphism .user-header-wrapper::before {
    background: rgba(73, 221, 235, .07) !important;
    box-shadow: 0 0 70px rgba(52, 215, 231, .14) !important;
}

body.skin-neumorphism .user-header-wrapper::after {
    background: rgba(174, 91, 222, .08) !important;
    box-shadow: 0 0 75px rgba(174, 91, 222, .15) !important;
}

body.skin-neumorphism .header-user-img,
body.skin-neumorphism #profilePicture {
    border-color: #525660 !important;
    background: #4b4e58;
    box-shadow: 8px 8px 18px rgba(30, 32, 38, .72), -6px -6px 16px rgba(102, 107, 119, .4), 0 0 18px rgba(54, 214, 231, .17) !important;
}

body.skin-neumorphism .chapter-side-bar,
body.skin-neumorphism .content-parent:not([type="2"]),
body.skin-neumorphism .chapter-button-collection,
body.skin-neumorphism #add-course,
body.skin-neumorphism #add-group,
body.skin-neumorphism .dialog .dialog-content.settings-dialog,
body.skin-neumorphism .chapter-item,
body.skin-neumorphism .group-tile,
body.skin-neumorphism .course-tile,
body.skin-neumorphism .tile,
body.skin-neumorphism .tileOuterBox {
    border-color: rgba(125, 131, 144, .28) !important;
    background: var(--neu-surface) !important;
}

body.skin-neumorphism .chapter-button-collection {
    gap: 10px;
    padding: 12px !important;
    border-radius: 20px !important;
    box-shadow: var(--neu-shadow-soft) !important;
}

body.skin-neumorphism .chapter-button-collection > a,
body.skin-neumorphism .chapter-button-collection > .btn-floating {
    border-color: rgba(127, 133, 146, .28) !important;
    border-radius: 15px !important;
    background: #474a53 !important;
    box-shadow: var(--neu-shadow-small) !important;
}

body.skin-neumorphism .group-tile:hover,
body.skin-neumorphism .course-tile:hover,
body.skin-neumorphism .tile:hover,
body.skin-neumorphism .chapter-item:not(.editing):hover {
    box-shadow: 9px 9px 20px rgba(35, 37, 44, .72), -7px -7px 18px rgba(103, 107, 119, .42), 0 0 18px rgba(54, 214, 231, .1) !important;
}

/* Neumorphism skin v4: one continuous surface, floating controls and a round XP dial. */
body.skin-neumorphism {
    --neu-bg: #4a4e58;
    --neu-surface: #4a4e58;
    --neu-raised: #3c3f48;
    --neu-inset-surface: #3a3d46;
    --neu-text: #f3f5f8;
    --neu-muted: #c3c8d0;
    --neu-blue: #36d8e8;
    --neu-violet: #a86add;
    --neu-shadow: 10px 10px 24px rgba(29, 31, 37, .48), -8px -8px 20px rgba(105, 110, 122, .25);
    --neu-shadow-soft: 7px 7px 16px rgba(29, 31, 37, .44), -6px -6px 15px rgba(105, 110, 122, .22);
    --neu-shadow-small: 5px 5px 12px rgba(27, 29, 35, .5), -4px -4px 10px rgba(105, 110, 122, .22);
    --neu-inset: inset 4px 4px 10px rgba(28, 30, 36, .58), inset -3px -3px 8px rgba(103, 108, 120, .2);
    --black: var(--neu-text);
    --white: var(--neu-surface);
    --light-grey: var(--neu-bg);
    --grey-bg: var(--neu-bg);
    color: var(--neu-text);
    background: linear-gradient(145deg, #59606a 0%, #4a4e58 38%, #41444e 100%) fixed !important;
}

body.skin-neumorphism::before {
    display: none !important;
}

body.skin-neumorphism,
body.skin-neumorphism button,
body.skin-neumorphism input,
body.skin-neumorphism select,
body.skin-neumorphism textarea,
body.skin-neumorphism a,
body.skin-neumorphism p,
body.skin-neumorphism h1,
body.skin-neumorphism h2,
body.skin-neumorphism h3,
body.skin-neumorphism h4,
body.skin-neumorphism .user-info,
body.skin-neumorphism .iiigel-icon-text,
body.skin-neumorphism .chapter-item,
body.skin-neumorphism .tile-text-big,
body.skin-neumorphism .tile-text-small {
    font-family: "Work Sans", "Segoe UI", sans-serif !important;
}

body.skin-neumorphism {
    font-weight: 300;
}

body.skin-neumorphism h1,
body.skin-neumorphism h2,
body.skin-neumorphism h3,
body.skin-neumorphism h4,
body.skin-neumorphism .user-info-name,
body.skin-neumorphism .chapter-head,
body.skin-neumorphism .title-text-big,
body.skin-neumorphism .tile-text-big {
    font-weight: 400 !important;
    letter-spacing: .015em !important;
}

body.skin-neumorphism .main-container-header {
    top: 48px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.skin-neumorphism .main-container-header .home {
    padding: 0 12px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.skin-neumorphism #mainHeader > .header-button,
body.skin-neumorphism #mainHeader > .global-settings-button {
    min-height: 64px !important;
    height: 64px !important;
    margin: 7px 10px !important;
    border: 1px solid rgba(117, 122, 134, .2) !important;
    border-radius: 18px !important;
    color: var(--neu-text) !important;
    background: var(--neu-raised) !important;
    box-shadow: var(--neu-shadow-small) !important;
    font-size: 18px !important;
    font-weight: 300 !important;
}

body.skin-neumorphism #mainHeader > .header-button {
    width: 178px !important;
    min-width: 178px !important;
}

body.skin-neumorphism #mainHeader > .global-settings-button {
    width: 64px !important;
    min-width: 64px !important;
}

body.skin-neumorphism #mainHeader > .header-button:hover,
body.skin-neumorphism #mainHeader > .global-settings-button:hover {
    color: #72eff7 !important;
    background: #40434c !important;
    box-shadow: 6px 6px 14px rgba(24, 26, 31, .54), -5px -5px 12px rgba(109, 114, 126, .24), 0 0 18px rgba(54, 216, 232, .13) !important;
}

body.skin-neumorphism #mainHeader > .header-button:active,
body.skin-neumorphism #mainHeader > .global-settings-button:active {
    background: var(--neu-inset-surface) !important;
    box-shadow: var(--neu-inset) !important;
}

body.skin-neumorphism .user-header-wrapper {
    min-height: 300px;
    margin-top: 92px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: inset 0 -1px 0 rgba(27, 29, 35, .46), inset 0 -2px 0 rgba(111, 116, 128, .15) !important;
}

body.skin-neumorphism .user-header-wrapper::before,
body.skin-neumorphism .user-header-wrapper::after {
    display: none !important;
}

body.skin-neumorphism .header-user-img,
body.skin-neumorphism #profilePicture {
    border: 6px solid #4d515b !important;
    background: var(--neu-raised) !important;
    box-shadow: 10px 10px 23px rgba(27, 29, 35, .5), -7px -7px 18px rgba(106, 111, 123, .22) !important;
}

body.skin-neumorphism main,
body.skin-neumorphism #content-wrapper,
body.skin-neumorphism .main-container,
body.skin-neumorphism .chapter-page-content,
body.skin-neumorphism .chapter-content {
    color: var(--neu-text) !important;
    background: transparent !important;
}

body.skin-neumorphism .content-parent,
body.skin-neumorphism .content-parent:not([type="2"]),
body.skin-neumorphism .chapter-content .content-parent[type="2"],
body.skin-neumorphism .chapter-content .content-parent[type="2"] .quiz-wrapper,
body.skin-neumorphism .chapter-content .content-parent[type="2"] .memory-wrappper,
body.skin-neumorphism .quiz-preview,
body.skin-neumorphism .start-quiz-container {
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--neu-text) !important;
    background: transparent !important;
    box-shadow: inset 0 -1px 0 rgba(26, 28, 34, .52), inset 0 -2px 0 rgba(111, 116, 128, .14) !important;
}

body.skin-neumorphism .chapter-side-bar {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: inset 1px 0 0 rgba(105, 110, 122, .14), inset 2px 0 0 rgba(27, 29, 35, .42) !important;
}

body.skin-neumorphism .chapter-item,
body.skin-neumorphism .chapter-list-item {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: inset 0 -1px 0 rgba(25, 27, 32, .48), inset 0 -2px 0 rgba(107, 112, 124, .13) !important;
}

body.skin-neumorphism .chapter-item.active,
body.skin-neumorphism .chapter-item.selected,
body.skin-neumorphism .chapter-list-item.active,
body.skin-neumorphism .chapter-list-item.selected,
body.skin-neumorphism .chapter-item.finished {
    color: #70ecf5 !important;
    background: var(--neu-inset-surface) !important;
    box-shadow: var(--neu-inset) !important;
}

body.skin-neumorphism .chapter-button-collection {
    gap: 14px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.skin-neumorphism .chapter-button-collection > a,
body.skin-neumorphism .chapter-button-collection > .btn-floating {
    width: 60px !important;
    min-width: 60px !important;
    height: 60px !important;
    min-height: 60px !important;
    border: 1px solid rgba(117, 122, 134, .18) !important;
    border-radius: 18px !important;
    background: var(--neu-raised) !important;
    box-shadow: var(--neu-shadow-small) !important;
}

body.skin-neumorphism .chapter-button-collection > a:hover,
body.skin-neumorphism .chapter-button-collection > .btn-floating:hover {
    background: #40434c !important;
    box-shadow: 6px 6px 14px rgba(24, 26, 31, .54), -5px -5px 12px rgba(109, 114, 126, .24), 0 0 17px rgba(54, 216, 232, .12) !important;
}

body.skin-neumorphism .chapter-button-collection > a:active,
body.skin-neumorphism .chapter-button-collection > .btn-floating:active {
    background: var(--neu-inset-surface) !important;
    box-shadow: var(--neu-inset) !important;
}

body.skin-neumorphism input:not([type="checkbox"]):not([type="radio"]),
body.skin-neumorphism select,
body.skin-neumorphism textarea,
body.skin-neumorphism .global-settings-dialog select {
    border: 1px solid rgba(29, 31, 37, .24) !important;
    border-radius: 12px !important;
    color: var(--neu-text) !important;
    background: var(--neu-inset-surface) !important;
    box-shadow: var(--neu-inset) !important;
    font-weight: 300 !important;
}

body.skin-neumorphism .level-bar-wrapper {
    width: 154px !important;
    height: 154px !important;
    margin-top: -66px !important;
    left: 28px !important;
    border: 1px solid rgba(117, 122, 134, .18);
    border-radius: 50%;
    background: var(--neu-raised);
    box-shadow: 11px 11px 24px rgba(27, 29, 35, .52), -8px -8px 19px rgba(105, 110, 122, .23), 0 0 22px rgba(54, 216, 232, .06);
}

body.skin-neumorphism #levelBar {
    top: 7px !important;
    left: 7px !important;
    width: 140px !important;
    height: 140px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #3d4049 !important;
    box-shadow: var(--neu-inset) !important;
}

body.skin-neumorphism #achievementButton {
    top: 25px !important;
    left: 52px !important;
    width: 50px !important;
    height: 50px !important;
}

body.skin-neumorphism .level-achievement-face {
    border: 2px solid rgba(76, 224, 235, .7) !important;
    background: #33363f !important;
    box-shadow: 5px 5px 11px rgba(22, 24, 29, .58), -3px -3px 9px rgba(99, 104, 116, .2), 0 0 13px rgba(54, 216, 232, .2) !important;
}

body.skin-neumorphism #achievementButton #myLvl {
    color: var(--neu-blue) !important;
    background: transparent !important;
    font-family: "Work Sans", "Segoe UI", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
}

body.skin-neumorphism #achievementButton #myLvlLabel {
    color: var(--neu-muted) !important;
    font-family: "Work Sans", "Segoe UI", sans-serif !important;
    font-size: 8px !important;
    font-weight: 300 !important;
}

body.skin-neumorphism #myXP {
    top: 82px !important;
    left: 0 !important;
    width: 154px !important;
    color: var(--neu-text) !important;
    font-family: "Work Sans", "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    text-align: center;
    letter-spacing: .04em;
}

body.skin-neumorphism #levelBar > span {
    top: 112px !important;
    left: 25px !important;
    width: 90px !important;
    height: 2px !important;
    overflow: visible;
    border: 0 !important;
    border-radius: 2px !important;
    background: #272a32 !important;
    box-shadow: inset 1px 1px 2px rgba(16, 18, 22, .72), 0 1px 0 rgba(105, 110, 122, .15) !important;
}

body.skin-neumorphism #myXPbar {
    top: 0 !important;
    left: 0 !important;
    height: 2px !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: linear-gradient(90deg, var(--neu-blue), var(--neu-violet)) !important;
    box-shadow: 0 0 7px rgba(54, 216, 232, .45), 0 0 9px rgba(168, 106, 221, .2) !important;
}

body.skin-neumorphism #cardIcon {
    top: 49px !important;
    left: 174px !important;
    height: 58px !important;
    filter: drop-shadow(6px 7px 9px rgba(24, 26, 31, .48));
}

body.skin-neumorphism .group-tile,
body.skin-neumorphism .course-tile,
body.skin-neumorphism .tile,
body.skin-neumorphism .tileOuterBox {
    border-color: rgba(117, 122, 134, .15) !important;
    background: #41444d !important;
    box-shadow: var(--neu-shadow-soft) !important;
}

body.skin-neumorphism .dialog .dialog-content,
body.skin-neumorphism .course-dialog .dialog-content-wrapper {
    color: var(--neu-text) !important;
    background: #444751 !important;
    box-shadow: var(--neu-shadow) !important;
}

body.skin-neumorphism .chapter-edit-content {
    color: var(--neu-text) !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.skin-neumorphism .chapter-edit-content .content-parent {
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--neu-text) !important;
    background: transparent !important;
    box-shadow: inset 0 -1px 0 rgba(26, 28, 34, .52), inset 0 -2px 0 rgba(111, 116, 128, .14) !important;
}

body.skin-neumorphism .chapter-edit-content input:not([type="checkbox"]):not([type="radio"]),
body.skin-neumorphism .chapter-edit-content select,
body.skin-neumorphism .chapter-edit-content textarea {
    border-color: rgba(29, 31, 37, .24) !important;
    color: var(--neu-text) !important;
    background: var(--neu-inset-surface) !important;
    box-shadow: var(--neu-inset) !important;
}

@media (max-width: 700px) {
    body.skin-neumorphism .main-container-header {
        background: transparent !important;
        box-shadow: none !important;
    }

    body.skin-neumorphism #mainHeader > .header-button,
    body.skin-neumorphism #mainHeader > .global-settings-button {
        width: 48px !important;
        min-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 7px !important;
        border-radius: 14px !important;
    }

    body.skin-neumorphism .user-header-wrapper {
        min-height: 170px;
        margin-top: 0;
    }

    body.skin-neumorphism .level-bar-wrapper {
        width: 154px !important;
        height: 154px !important;
        margin-top: -50px !important;
        left: 15px !important;
        transform: scale(.78);
        transform-origin: left top;
    }

    body.skin-neumorphism .chapter-button-collection > a,
    body.skin-neumorphism .chapter-button-collection > .btn-floating {
        width: 50px !important;
        min-width: 50px !important;
        height: 50px !important;
        min-height: 50px !important;
        border-radius: 15px !important;
    }
}

/* Neumorphism skin v5: integrated header dial, restrained media and fine navigation. */
body.skin-neumorphism {
    --neu-bg: #464a54;
    --neu-surface: #464a54;
    --neu-raised: #383b44;
    --neu-inset-surface: #353840;
    --neu-text: #f0f2f5;
    --neu-body-text: #d1d5dc;
    --neu-muted: #aeb5bf;
    --neu-blue: #48d4df;
    --neu-violet: #9870cb;
    --neu-shadow-small: 8px 8px 18px rgba(23, 25, 30, .58), -7px -7px 16px rgba(111, 117, 130, .28);
    background:
        radial-gradient(circle at 8% 4%, rgba(67, 187, 198, .1), transparent 31%),
        radial-gradient(circle at 91% 91%, rgba(126, 91, 166, .09), transparent 34%),
        linear-gradient(138deg, #606772 0%, #535862 24%, #454953 57%, #373a43 100%) fixed !important;
}

body.skin-neumorphism .iiigel-icon {
    filter: grayscale(.72) saturate(.34) brightness(1.22) contrast(.88);
    opacity: .88;
}

body.skin-neumorphism #profile-picture {
    filter: grayscale(.48) saturate(.55) contrast(.92) brightness(.96);
}

body.skin-neumorphism #cardIcon {
    filter: grayscale(.88) saturate(.28) brightness(1.22) contrast(.88) drop-shadow(6px 7px 10px rgba(20, 22, 27, .52));
    opacity: .82;
}

body.skin-neumorphism #mainHeader > .header-button,
body.skin-neumorphism #mainHeader > .global-settings-button,
body.skin-neumorphism .chapter-button-collection > a,
body.skin-neumorphism .chapter-button-collection > .btn-floating,
body.skin-neumorphism .button,
body.skin-neumorphism .main-button,
body.skin-neumorphism .quiz-button,
body.skin-neumorphism .button-quiz,
body.skin-neumorphism .btn-floating:not(.white),
body.skin-neumorphism #add-chapter.white {
    border-color: rgba(117, 123, 136, .16) !important;
    background: var(--neu-raised) !important;
    box-shadow: var(--neu-shadow-small) !important;
}

body.skin-neumorphism #mainHeader > .header-button:hover,
body.skin-neumorphism #mainHeader > .global-settings-button:hover,
body.skin-neumorphism .chapter-button-collection > a:hover,
body.skin-neumorphism .chapter-button-collection > .btn-floating:hover,
body.skin-neumorphism .button:hover,
body.skin-neumorphism .main-button:hover,
body.skin-neumorphism .quiz-button:hover {
    color: #78edf4 !important;
    background: #3d4049 !important;
    box-shadow: 8px 8px 19px rgba(19, 21, 26, .62), -7px -7px 16px rgba(113, 119, 132, .3), 0 0 19px rgba(72, 212, 223, .13) !important;
}

body.skin-neumorphism #mainHeader .material-icons,
body.skin-neumorphism #mainHeader .material-icons-outlined,
body.skin-neumorphism .chapter-button-collection .material-icons,
body.skin-neumorphism .chapter-button-collection .material-icons-outlined,
body.skin-neumorphism .chapter-side-bar .material-icons,
body.skin-neumorphism .chapter-side-bar .material-icons-outlined {
    font-family: "Material Icons Outlined" !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 23px !important;
}

body.skin-neumorphism #mainHeader .logoutBtn img {
    filter: grayscale(1) invert(1);
    opacity: .78;
}

body.skin-neumorphism .level-bar-wrapper {
    position: fixed !important;
    top: 22px !important;
    left: 50% !important;
    z-index: 1100 !important;
    width: 112px !important;
    height: 112px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    border-color: rgba(117, 123, 136, .15);
    background: var(--neu-raised);
    box-shadow: 9px 9px 21px rgba(21, 23, 28, .6), -7px -7px 17px rgba(111, 117, 130, .27), 0 0 17px rgba(72, 212, 223, .06);
}

body.skin-neumorphism #levelBar {
    top: 6px !important;
    left: 6px !important;
    width: 100px !important;
    height: 100px !important;
}

body.skin-neumorphism #achievementButton {
    top: 16px !important;
    left: 37px !important;
    width: 38px !important;
    height: 38px !important;
}

body.skin-neumorphism .level-achievement-face {
    border-width: 1px !important;
}

body.skin-neumorphism #achievementButton #myLvl {
    padding-top: 0 !important;
    font-size: 12px !important;
    line-height: 20px !important;
}

body.skin-neumorphism #achievementButton #myLvlLabel {
    bottom: 3px !important;
    font-size: 7px !important;
}

body.skin-neumorphism #myXP {
    top: 62px !important;
    left: 0 !important;
    width: 112px !important;
    font-size: 11px !important;
}

body.skin-neumorphism #levelBar > span {
    top: 83px !important;
    left: 17px !important;
    width: 66px !important;
    height: 1px !important;
}

body.skin-neumorphism #myXPbar {
    height: 1px !important;
    box-shadow: 0 0 6px rgba(72, 212, 223, .54), 0 0 7px rgba(152, 112, 203, .24) !important;
}

body.skin-neumorphism #cardIcon {
    top: 32px !important;
    left: 122px !important;
    height: 48px !important;
}

body.skin-neumorphism .chapter-content .computed-content,
body.skin-neumorphism .chapter-content .computed-content p,
body.skin-neumorphism .chapter-content .computed-content li,
body.skin-neumorphism .chapter-content .computed-content span,
body.skin-neumorphism .chapter-content .computed-content strong,
body.skin-neumorphism .chapter-content .computed-content h1,
body.skin-neumorphism .chapter-content .computed-content h2,
body.skin-neumorphism .chapter-content .computed-content h3,
body.skin-neumorphism .chapter-content .computed-content h4,
body.skin-neumorphism .chapter-content .ql-editor,
body.skin-neumorphism .chapter-content .ql-editor p,
body.skin-neumorphism .chapter-content .ql-editor li,
body.skin-neumorphism .chapter-content .ql-editor span,
body.skin-neumorphism .chapter-content .ql-editor strong,
body.skin-neumorphism .chapter-content .ql-editor h1,
body.skin-neumorphism .chapter-content .ql-editor h2,
body.skin-neumorphism .chapter-content .ql-editor h3,
body.skin-neumorphism .chapter-content .ql-editor h4 {
    color: var(--neu-body-text) !important;
}

body.skin-neumorphism .chapter-content .computed-content h1,
body.skin-neumorphism .chapter-content .computed-content h2,
body.skin-neumorphism .chapter-content .computed-content h3,
body.skin-neumorphism .chapter-content .computed-content h4,
body.skin-neumorphism .chapter-content .ql-editor h1,
body.skin-neumorphism .chapter-content .ql-editor h2,
body.skin-neumorphism .chapter-content .ql-editor h3,
body.skin-neumorphism .chapter-content .ql-editor h4 {
    color: #e5e8ed !important;
    font-weight: 400 !important;
}

body.skin-neumorphism .chapter-content .computed-content [class*="iiigel-text-box"],
body.skin-neumorphism .chapter-content .ql-editor [class*="iiigel-text-box"] {
    border-color: rgba(72, 212, 223, .34) !important;
    color: var(--neu-body-text) !important;
    background: #393c45 !important;
    box-shadow: inset 3px 3px 8px rgba(22, 24, 29, .46), inset -2px -2px 6px rgba(100, 106, 118, .16) !important;
}

body.skin-neumorphism .chapter-side-bar {
    width: 350px;
    height: 52px;
    border: 0 !important;
    border-radius: 12px !important;
    background: rgba(54, 57, 66, .58) !important;
    box-shadow: inset 4px 4px 11px rgba(24, 26, 31, .45), inset -3px -3px 9px rgba(100, 106, 118, .16) !important;
}

body.skin-neumorphism .chapter-container.expanded .chapter-side-bar {
    height: 500px;
}

body.skin-neumorphism .chapter-page-content.expanded .chapter-content-wrapper {
    width: calc(100% - 350px);
}

body.skin-neumorphism .side-bar-h1-container {
    height: 52px;
    padding: 12px 16px;
}

body.skin-neumorphism .side-bar-h1-container h1 {
    color: #e4e7eb !important;
    font-size: 18px !important;
    font-weight: 300 !important;
}

body.skin-neumorphism .chapter-list-parent {
    height: 420px;
}

body.skin-neumorphism .overview-edit-container {
    min-height: 48px;
}

body.skin-neumorphism .overview-edit-container #add-chapter {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
}

body.skin-neumorphism .chapter-side-bar .chapter-list-item {
    min-height: 58px;
    height: 58px;
    margin: 0 14px 0 28px;
    padding: 10px 14px;
    border: 0 !important;
    border-radius: 0 !important;
    color: #d8dce2 !important;
    background: transparent !important;
    box-shadow: inset 0 -1px 0 rgba(23, 25, 30, .52), inset 0 -2px 0 rgba(107, 113, 125, .12) !important;
    font-size: 15px;
    font-weight: 300 !important;
}

body.skin-neumorphism .chapter-side-bar .chapter-list-item span {
    color: inherit !important;
    font-weight: 400 !important;
}

body.skin-neumorphism .chapter-side-bar .chapter-list-item::before {
    left: -15px;
    width: 6px;
    height: 6px;
    background: #8e959f;
    box-shadow: 0 0 0 2px rgba(57, 60, 69, .95);
}

body.skin-neumorphism .chapter-side-bar .chapter-list-item:not(:last-child)::after {
    top: 31px;
    left: -13px;
    width: 1px;
    height: 58px;
    border: 0 !important;
    background: linear-gradient(180deg, rgba(174, 181, 191, .62), rgba(116, 123, 134, .22)) !important;
}

body.skin-neumorphism .chapter-side-bar .chapter-list-item.active,
body.skin-neumorphism .chapter-side-bar .chapter-list-item.selected,
body.skin-neumorphism .chapter-side-bar .chapter-list-item.finished {
    border: 0 !important;
    color: #e7eaee !important;
    background: #343740 !important;
    box-shadow: inset 4px 4px 10px rgba(20, 22, 27, .54), inset -3px -3px 8px rgba(99, 105, 117, .16) !important;
}

body.skin-neumorphism .chapter-side-bar .chapter-list-item.active::before,
body.skin-neumorphism .chapter-side-bar .chapter-list-item.selected::before {
    background: var(--neu-blue) !important;
    box-shadow: 0 0 8px rgba(72, 212, 223, .48);
}

body.skin-neumorphism .chapter-side-bar .chapter-list-item.active::after {
    border: 0 !important;
    background: linear-gradient(180deg, var(--neu-blue), rgba(72, 212, 223, .18)) !important;
}

body.skin-neumorphism .chapter-list-item-pos {
    top: 34px;
    right: 12px;
}

body.skin-neumorphism .chapter-list-item-pos,
body.skin-neumorphism .chapter-list-item-pos * {
    color: var(--neu-muted) !important;
    font-size: 11px !important;
    font-weight: 300 !important;
}

@media (max-width: 1200px) {
    body.skin-neumorphism .level-bar-wrapper {
        left: 45% !important;
    }
}

@media (max-width: 900px) {
    body.skin-neumorphism .level-bar-wrapper {
        top: 78px !important;
        left: 82px !important;
        transform: scale(.78) !important;
        transform-origin: top left !important;
    }
}

@media (max-width: 700px) {
    body.skin-neumorphism .level-bar-wrapper {
        position: absolute !important;
        top: 76px !important;
        left: 14px !important;
        transform: scale(.7) !important;
    }

    body.skin-neumorphism .chapter-side-bar {
        width: min(350px, calc(100vw - 20px));
    }

    body.skin-neumorphism .chapter-page-content.expanded .chapter-content-wrapper {
        width: 100%;
    }
}

/* Neumorphism skin v6: aligned navigation, anchored XP dial and engraved branding. */
body.skin-neumorphism .chapter-side-bar .chapter-list-item.active,
body.skin-neumorphism .chapter-side-bar .chapter-list-item.selected {
    top: 0 !important;
    bottom: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
    color: var(--neu-blue) !important;
    background: transparent !important;
    box-shadow: inset 0 -1px 0 rgba(23, 25, 30, .52), inset 0 -2px 0 rgba(107, 113, 125, .12) !important;
}

body.skin-neumorphism .chapter-side-bar .chapter-list-item.active .chapter-designation,
body.skin-neumorphism .chapter-side-bar .chapter-list-item.selected .chapter-designation {
    color: var(--neu-blue) !important;
}

body.skin-neumorphism .chapter-side-bar .chapter-list-item.finished:not(.active):not(.selected) {
    color: #d8dce2 !important;
    background: transparent !important;
    box-shadow: inset 0 -1px 0 rgba(23, 25, 30, .52), inset 0 -2px 0 rgba(107, 113, 125, .12) !important;
}

body.skin-neumorphism .level-bar-wrapper {
    position: absolute !important;
    top: 24px !important;
    left: calc(14% + 315px) !important;
    width: 138px !important;
    height: 138px !important;
    margin: 0 !important;
    transform: none !important;
}

body.skin-neumorphism #levelBar {
    top: 6px !important;
    left: 6px !important;
    width: 126px !important;
    height: 126px !important;
}

body.skin-neumorphism #achievementButton {
    top: 19px !important;
    left: 46px !important;
    width: 46px !important;
    height: 46px !important;
}

body.skin-neumorphism #achievementButton #myLvl {
    font-size: 14px !important;
    line-height: 23px !important;
}

body.skin-neumorphism #achievementButton #myLvlLabel {
    bottom: 4px !important;
    font-size: 8px !important;
}

body.skin-neumorphism #myXP {
    top: 78px !important;
    left: 0 !important;
    width: 138px !important;
    font-size: 13px !important;
}

body.skin-neumorphism #levelBar > span {
    top: 104px !important;
    left: 22px !important;
    width: 82px !important;
}

body.skin-neumorphism #cardIcon {
    top: 43px !important;
    left: 148px !important;
    height: 52px !important;
}

body.skin-neumorphism .main-container-header .home .iiigel-icon {
    filter:
        grayscale(1)
        brightness(1.38)
        contrast(.58)
        drop-shadow(-1px -1px 0 rgba(255, 255, 255, .2))
        drop-shadow(1px 1px 0 rgba(20, 22, 27, .72));
    opacity: .68;
}

body.skin-neumorphism .main-container-header .home .iiigel-icon-text {
    color: #d5d9df !important;
    text-shadow: -1px -1px 0 rgba(255, 255, 255, .16), 1px 1px 0 rgba(18, 20, 25, .78);
    font-weight: 300 !important;
}

body.skin-neumorphism .chapter-top .course-context-label {
    position: absolute !important;
    min-width: 230px;
    max-width: 320px;
    margin-top: -188px !important;
    padding: 11px 15px 12px !important;
    box-sizing: border-box;
    border: 1px solid rgba(29, 31, 37, .28);
    border-radius: 11px;
    color: #aeb5bf !important;
    background: linear-gradient(105deg, #332f3d, #353942 72%) !important;
    box-shadow: inset 4px 4px 10px rgba(20, 22, 27, .56), inset -3px -3px 8px rgba(96, 102, 114, .14), 0 0 15px rgba(72, 212, 223, .035);
    font-size: 11px !important;
    font-weight: 300 !important;
    line-height: 1.35;
    letter-spacing: .035em;
}

body.skin-neumorphism .chapter-top .course-context-label h2 {
    margin: 0 0 3px !important;
    color: #d7dbe1 !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    line-height: 1.2;
    letter-spacing: .025em !important;
}

body.skin-neumorphism .content-parent:not([type="0"]):not(.full-screen)::after {
    top: 10px;
    bottom: 10px;
    width: 2px;
    border-radius: 2px;
    background: #dfba54;
    box-shadow: 0 0 5px rgba(223, 186, 84, .18);
}

body.skin-neumorphism .content-parent.finished::after,
body.skin-neumorphism .finished[type="4"]::after,
body.skin-neumorphism .status-finished::after {
    width: 2px !important;
    background: #62c995 !important;
    box-shadow: 0 0 5px rgba(98, 201, 149, .18) !important;
}

body.skin-neumorphism .content-parent.incorrect::after {
    width: 2px !important;
    background: #d87882 !important;
}

body.skin-neumorphism .status-option::after {
    width: 2px !important;
    background: linear-gradient(180deg, #dfba54 0 50%, #62c995 50% 100%) !important;
}

body.skin-neumorphism .index-indicator,
body.skin-neumorphism .content-parent .color-blue,
body.skin-neumorphism .content-parent .parameter-edit {
    border: 0 !important;
    color: #cbd0d7 !important;
    background: #373a43 !important;
    box-shadow: inset 3px 3px 8px rgba(20, 22, 27, .5), inset -2px -2px 6px rgba(98, 104, 116, .14) !important;
    font-weight: 400 !important;
}

@media (max-width: 1300px) {
    body.skin-neumorphism .level-bar-wrapper {
        left: 385px !important;
        transform: scale(.88) !important;
        transform-origin: top left !important;
    }
}

@media (max-width: 900px) {
    body.skin-neumorphism .level-bar-wrapper {
        top: 70px !important;
        left: 18px !important;
        transform: scale(.72) !important;
    }
}

/* Neumorphism skin v7: composed profile header and deeply inset task inputs. */
body.skin-neumorphism .user-header-wrapper {
    position: relative !important;
    min-height: 310px;
}

body.skin-neumorphism .user-header-wrapper .level-bar-wrapper {
    position: absolute !important;
    top: 18px !important;
    left: 5% !important;
    width: 150px !important;
    height: 150px !important;
    margin: 0 !important;
    transform: none !important;
}

body.skin-neumorphism .user-header-wrapper #levelBar {
    top: 6px !important;
    left: 6px !important;
    width: 138px !important;
    height: 138px !important;
}

body.skin-neumorphism .user-header-wrapper #achievementButton {
    top: 22px !important;
    left: 50px !important;
    width: 50px !important;
    height: 50px !important;
}

body.skin-neumorphism .user-header-wrapper #myXP {
    top: 84px !important;
    width: 150px !important;
    font-size: 13px !important;
}

body.skin-neumorphism .user-header-wrapper #levelBar > span {
    top: 113px !important;
    left: 23px !important;
    width: 92px !important;
}

body.skin-neumorphism .user-header-wrapper #cardIcon {
    top: 49px !important;
    left: 158px !important;
    height: 52px !important;
}

body.skin-neumorphism .user-header-wrapper > .course-context-label {
    position: absolute !important;
    top: 190px !important;
    left: 4% !important;
    min-width: 250px;
    max-width: 310px;
    margin: 0 !important;
}

body.skin-neumorphism .header-user-info {
    top: 87px !important;
    left: 57% !important;
    display: grid !important;
    grid-template-columns: 88px auto;
    grid-template-rows: auto auto;
    column-gap: 17px;
    row-gap: 2px;
    align-items: center;
    transform: translateX(-50%) !important;
}

body.skin-neumorphism .header-user-info #profilePicture,
body.skin-neumorphism .header-user-info .header-user-img {
    position: relative;
    grid-column: 1;
    grid-row: 1 / 3;
    width: 88px !important;
    min-width: 88px !important;
    height: 88px !important;
    min-height: 88px !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.skin-neumorphism .header-user-info #profile-picture {
    display: block;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50%;
}

body.skin-neumorphism .header-user-info #profilePicture::after {
    content: "";
    position: absolute;
    inset: -4px;
    z-index: 2;
    border: 1px solid rgba(242, 244, 247, .66);
    border-radius: 50%;
    box-shadow: inset 1px 1px 1px rgba(18, 20, 25, .72), inset -1px -1px 1px rgba(255, 255, 255, .32);
    pointer-events: none;
}

body.skin-neumorphism .header-user-info #profileTextContainer {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    justify-content: flex-start;
    margin: 0 !important;
}

body.skin-neumorphism .header-user-info > .user-role {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    justify-content: flex-start;
    margin: 0 !important;
}

body.skin-neumorphism .header-user-info .user-info-name {
    font-size: 20px !important;
    text-align: left;
    white-space: nowrap;
}

body.skin-neumorphism .header-user-info .user-info-role {
    margin: 0;
    font-size: 12px !important;
    text-align: left;
}

body.skin-neumorphism .main-container-header .home .iiigel-icon {
    filter:
        grayscale(1)
        brightness(1.28)
        contrast(.48)
        drop-shadow(-1px -1px 0 rgba(18, 20, 25, .82))
        drop-shadow(1px 1px 0 rgba(255, 255, 255, .24));
    opacity: .58;
}

body.skin-neumorphism .main-container-header .home .iiigel-icon-text {
    color: #cbd0d7 !important;
    text-shadow: -1px -1px 0 rgba(18, 20, 25, .82), 1px 1px 0 rgba(255, 255, 255, .22);
}

body.skin-neumorphism .chapter-list-parent {
    box-sizing: border-box;
    padding-top: 14px;
}

body.skin-neumorphism .overview-edit-container {
    box-sizing: border-box;
    min-height: 62px;
    padding: 9px 13px 13px;
}

body.skin-neumorphism .overview-edit-container #add-chapter,
body.skin-neumorphism .overview-edit-container #add-chapter.white {
    margin: 4px 0 0 7px !important;
    background: #383b44 !important;
    box-shadow: 8px 8px 18px rgba(20, 22, 27, .6), -8px -8px 17px rgba(114, 120, 133, .34) !important;
}

@media (max-width: 900px) {
    body.skin-neumorphism .user-header-wrapper .level-bar-wrapper {
        top: 14px !important;
        left: 18px !important;
        transform: scale(.8) !important;
        transform-origin: top left !important;
    }

    body.skin-neumorphism .user-header-wrapper > .course-context-label {
        top: 174px !important;
        left: 18px !important;
    }

    body.skin-neumorphism .header-user-info {
        top: 82px !important;
        left: 67% !important;
    }
}

@media (max-width: 700px) {
    body.skin-neumorphism .user-header-wrapper {
        min-height: 205px !important;
    }

    body.skin-neumorphism .user-header-wrapper .level-bar-wrapper {
        top: 12px !important;
        left: 10px !important;
        transform: scale(.62) !important;
    }

    body.skin-neumorphism .user-header-wrapper > .course-context-label {
        top: 128px !important;
        left: 10px !important;
        min-width: 190px;
        max-width: 48vw;
    }

    body.skin-neumorphism .header-user-info {
        top: 58px !important;
        left: 68% !important;
        grid-template-columns: 64px auto;
        column-gap: 11px;
    }

    body.skin-neumorphism .header-user-info #profilePicture,
    body.skin-neumorphism .header-user-info .header-user-img {
        width: 64px !important;
        min-width: 64px !important;
        height: 64px !important;
        min-height: 64px !important;
    }

    body.skin-neumorphism .header-user-info .user-info-name {
        max-width: 30vw;
        overflow: hidden;
        font-size: 14px !important;
        text-overflow: ellipsis;
    }
}

/* Neumorphism skin v8: inset package answers and final header refinements. */
body.skin-neumorphism .package-question .editorAnswer:not(.correct):not(.wrong),
body.skin-neumorphism .package-question .input.editorAnswer:not(.correct):not(.wrong) {
    overflow: hidden;
    padding: 0 !important;
    color: #e2e5ea !important;
    background: #343740 !important;
    border: 1px solid rgba(18, 20, 25, .56) !important;
    box-shadow:
        inset 6px 6px 13px rgba(18, 20, 25, .68),
        inset -5px -5px 12px rgba(102, 108, 121, .16) !important;
}

body.skin-neumorphism .package-question .editorAnswer:not(.correct):not(.wrong) .ql-container,
body.skin-neumorphism .package-question .editorAnswer:not(.correct):not(.wrong) .ql-editor {
    color: #e2e5ea !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.skin-neumorphism .package-question .editorAnswer:not(.correct):not(.wrong) .ql-editor {
    min-height: 42px;
    padding: 10px 12px !important;
}

body.skin-neumorphism .package-question .editorAnswer:not(.correct):not(.wrong) .ql-editor.ql-blank::before {
    left: 12px !important;
    color: rgba(226, 229, 234, .52) !important;
}

body.skin-neumorphism .package-question .package-index {
    color: #cbd0d7 !important;
    font-weight: 400 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}

body.skin-neumorphism .overview-edit-container {
    overflow: visible !important;
}

body.skin-neumorphism .overview-edit-container #add-chapter,
body.skin-neumorphism .overview-edit-container #add-chapter.white {
    box-shadow:
        -9px -9px 20px rgba(116, 122, 135, .38),
        9px 9px 19px rgba(17, 19, 24, .68),
        inset 1px 1px 0 rgba(255, 255, 255, .035) !important;
}

body.skin-neumorphism .main-container-header .home .iiigel-icon {
    filter:
        grayscale(1)
        brightness(1.18)
        contrast(.4)
        drop-shadow(-.7px -.7px 0 rgba(17, 19, 24, .86))
        drop-shadow(.7px .7px 0 rgba(245, 247, 250, .2));
    opacity: .5;
}

body.skin-neumorphism .main-container-header .home .iiigel-icon-text {
    color: #c8ccd2 !important;
    text-shadow: -.7px -.7px 0 rgba(17, 19, 24, .82), .7px .7px 0 rgba(245, 247, 250, .2);
}

/* Neumorphism skin v9: compact graphite course and group tiles. */
body.skin-neumorphism .group-tile,
body.skin-neumorphism .course-tile {
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(116, 122, 135, .18) !important;
    border-radius: 18px !important;
    background: #41444d !important;
    box-shadow:
        -9px -9px 20px rgba(110, 116, 129, .28),
        11px 11px 24px rgba(20, 22, 27, .62) !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

body.skin-neumorphism .group-tile:hover,
body.skin-neumorphism .course-tile:hover {
    border-color: rgba(54, 216, 232, .25) !important;
    box-shadow:
        -11px -11px 24px rgba(112, 118, 131, .32),
        14px 14px 29px rgba(18, 20, 25, .7),
        0 0 0 1px rgba(54, 216, 232, .08) !important;
    transform: translateY(-3px);
}

body.skin-neumorphism .group-image,
body.skin-neumorphism .course-image {
    position: relative;
    overflow: hidden;
    height: 210px !important;
    border-radius: 17px 17px 0 0 !important;
    background: #343740 !important;
    box-shadow:
        inset 0 -12px 22px rgba(18, 20, 25, .38),
        inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

body.skin-neumorphism .group-image::after,
body.skin-neumorphism .course-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(42, 45, 53, .06) 45%, rgba(35, 37, 44, .58) 100%),
        linear-gradient(125deg, rgba(78, 216, 227, .06), rgba(157, 102, 202, .08));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035);
    pointer-events: none;
}

body.skin-neumorphism .group-image > img,
body.skin-neumorphism .course-image > img {
    filter: grayscale(.48) saturate(.58) brightness(.8) contrast(1.06);
    transform: scale(1.015);
    transition: filter .28s ease, transform .35s ease;
}

body.skin-neumorphism .group-tile:hover .group-image > img,
body.skin-neumorphism .course-tile:hover .course-image > img {
    filter: grayscale(.27) saturate(.72) brightness(.86) contrast(1.06);
    transform: scale(1.035);
}

body.skin-neumorphism .group-tile-infos,
body.skin-neumorphism .course-tile-info,
body.skin-neumorphism .tileInfoWrapper {
    box-sizing: border-box;
    padding: 17px 19px 19px !important;
    border: 0 !important;
    border-radius: 0 0 17px 17px !important;
    color: #d9dde4 !important;
    background: #41444d !important;
    box-shadow:
        inset 0 1px 0 rgba(109, 115, 128, .18),
        inset 0 2px 0 rgba(22, 24, 29, .46) !important;
}

body.skin-neumorphism .group-member-infos,
body.skin-neumorphism .course-tile-member {
    align-items: center;
    justify-content: flex-start;
    min-height: 50px;
}

body.skin-neumorphism .group-owner-img,
body.skin-neumorphism .course-owner {
    box-sizing: border-box;
    flex: 0 0 48px;
    width: 48px !important;
    height: 48px !important;
    margin: 0 13px 0 0 !important;
    padding: 3px;
    overflow: hidden;
    border: 1px solid rgba(242, 244, 247, .48);
    border-radius: 50%;
    background: #393c45;
    box-shadow:
        inset 2px 2px 4px rgba(18, 20, 25, .7),
        inset -1px -1px 3px rgba(255, 255, 255, .16);
}

body.skin-neumorphism .group-owner-img > img,
body.skin-neumorphism .course-owner > img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    filter: grayscale(.72) saturate(.38) contrast(.96);
}

body.skin-neumorphism .group-member-details {
    min-width: 0;
    margin: 0 !important;
}

body.skin-neumorphism .group-owner-name,
body.skin-neumorphism .course-dropdown .course-title span,
body.skin-neumorphism .course-owner-name {
    overflow: hidden;
    color: #dfe3e8 !important;
    font-size: 15px !important;
    font-weight: 350 !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: .01em;
}

body.skin-neumorphism .group-member-wrapper {
    min-height: 24px;
    margin-top: 4px;
}

body.skin-neumorphism .group-member-images {
    align-items: center;
}

body.skin-neumorphism .group-member-img {
    margin-right: -4px;
    overflow: visible;
}

body.skin-neumorphism .group-member-img > img {
    width: 22px;
    height: 22px;
    border: 1px solid #41444d;
    filter: grayscale(.52) saturate(.55) brightness(.88);
}

body.skin-neumorphism .group-member-img > img + img {
    margin-left: -4px;
}

body.skin-neumorphism .group-member-count,
body.skin-neumorphism .course-member-count {
    margin: 3px 0 0 9px !important;
    color: #9fa6b0 !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    line-height: 1.35 !important;
}

body.skin-neumorphism .group-name {
    margin-top: 14px;
    padding-top: 13px;
    box-shadow:
        inset 0 1px 0 rgba(21, 23, 28, .5),
        inset 0 2px 0 rgba(105, 111, 123, .12);
}

body.skin-neumorphism .group-name .tile-text-big,
body.skin-neumorphism .tileNameBox .course-tile-text,
body.skin-neumorphism .tile-text-big {
    color: #e3e6eb !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    letter-spacing: .025em;
}

body.skin-neumorphism .group-name .tile-text-big {
    margin-top: 0;
}

body.skin-neumorphism .group-name .tile-text-small,
body.skin-neumorphism .tileNameBox .tile-text-small,
body.skin-neumorphism .tile-text-small {
    color: #aeb4bd !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    line-height: 1.4 !important;
}

body.skin-neumorphism .group-name .tile-text-small {
    gap: 12px;
    margin-top: 6px;
}

body.skin-neumorphism .group-subject-label,
body.skin-neumorphism .course-subject-label:not(label) {
    padding: 4px 9px !important;
    border: 1px solid rgba(54, 216, 232, .2) !important;
    border-radius: 999px !important;
    color: #c8cdd5 !important;
    background: #353841 !important;
    box-shadow:
        inset 2px 2px 5px rgba(19, 21, 26, .58),
        inset -1px -1px 4px rgba(101, 107, 119, .14) !important;
    font-size: 11px !important;
    font-weight: 350 !important;
    white-space: nowrap;
}

body.skin-neumorphism .group-delete-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin: 0 0 0 10px !important;
    padding: 0 !important;
    border: 1px solid rgba(118, 124, 137, .16) !important;
    border-radius: 10px !important;
    color: #ef7985 !important;
    background: #3c3f48 !important;
    box-shadow:
        4px 4px 9px rgba(19, 21, 26, .62),
        -3px -3px 8px rgba(105, 111, 123, .24) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
}

body.skin-neumorphism .group-delete-btn .material-icons {
    color: #ef7985 !important;
    font-family: "Material Icons Outlined" !important;
    font-size: 17px !important;
}

body.skin-neumorphism .group-delete-btn:hover {
    color: #ff929c !important;
    background: #3c3f48 !important;
    box-shadow:
        6px 6px 12px rgba(18, 20, 25, .68),
        -5px -5px 11px rgba(108, 114, 126, .28) !important;
    transform: translateY(-1px);
}

body.skin-neumorphism .course-export-btn,
body.skin-neumorphism .course-card-settings-btn {
    border: 1px solid rgba(118, 124, 137, .16) !important;
    color: #55d3df !important;
    background: #3b3e47 !important;
    box-shadow:
        4px 4px 9px rgba(19, 21, 26, .62),
        -3px -3px 8px rgba(105, 111, 123, .24) !important;
}

body.skin-neumorphism .course-export-btn i,
body.skin-neumorphism .course-card-settings-btn i {
    color: #55d3df !important;
    font-family: "Material Icons Outlined" !important;
}

body.skin-neumorphism .join-group-input {
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(18, 20, 25, .5) !important;
    border-radius: 10px !important;
    color: #e1e4e9 !important;
    background: #353841 !important;
    box-shadow:
        inset 4px 4px 9px rgba(18, 20, 25, .62),
        inset -3px -3px 8px rgba(102, 108, 120, .15) !important;
}

body.skin-neumorphism .join-group-input::placeholder {
    color: #939aa5 !important;
}

body.skin-neumorphism #join-group-title {
    color: #e3e6eb !important;
    font-size: 16px;
    font-weight: 400;
}

body.skin-neumorphism .join-group-btn {
    align-self: flex-start;
    margin-top: 4px;
    padding: 8px 13px;
    border-radius: 10px;
    color: #55d3df !important;
    background: #3c3f48;
    box-shadow:
        4px 4px 9px rgba(19, 21, 26, .6),
        -3px -3px 8px rgba(105, 111, 123, .22);
    font-size: 13px;
    font-weight: 400;
}

@media (max-width: 700px) {
    body.skin-neumorphism .group-image,
    body.skin-neumorphism .course-image {
        height: 178px !important;
    }

    body.skin-neumorphism .group-tile-infos,
    body.skin-neumorphism .course-tile-info,
    body.skin-neumorphism .tileInfoWrapper {
        padding: 14px 15px 16px !important;
    }
}

/* Neumorphism skin v10: unified course controls and sculpted switches. */
body.skin-neumorphism .course-tile-info .subject_wraper_div {
    align-items: center;
    gap: 14px;
    margin-top: 14px !important;
    padding-top: 13px;
    box-shadow:
        inset 0 1px 0 rgba(21, 23, 28, .5),
        inset 0 2px 0 rgba(105, 111, 123, .12);
}

body.skin-neumorphism .course-tile-info .subject_wraper_div .tileNameBox {
    flex: 1 1 auto;
    min-width: 0;
}

body.skin-neumorphism .course-tile-info .subject_wraper_div .course-subject-wrapper {
    flex: 0 0 auto;
    width: auto;
}

body.skin-neumorphism .course-tile-info .tileNameBox input.course-tile-text {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 8px 42px 8px 12px !important;
    border: 1px solid rgba(18, 20, 25, .46) !important;
    border-radius: 11px !important;
    color: #dfe3e8 !important;
    background: #353841 !important;
    box-shadow:
        inset 4px 4px 9px rgba(18, 20, 25, .6),
        inset -3px -3px 8px rgba(101, 107, 119, .14) !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 20px !important;
    text-indent: 0 !important;
}

body.skin-neumorphism .course-tile-info .tileNameBox input.course-tile-text:focus {
    border-color: rgba(54, 216, 232, .3) !important;
    outline: none !important;
    box-shadow:
        inset 4px 4px 9px rgba(18, 20, 25, .64),
        inset -3px -3px 8px rgba(101, 107, 119, .15),
        0 0 0 2px rgba(54, 216, 232, .07) !important;
}

body.skin-neumorphism .course-tile-info .course-subject label.course-subject-label {
    padding: 0 !important;
    color: #aeb4bd !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 300 !important;
}

body.skin-neumorphism .course-tile .general-switch-wrapper {
    gap: 10px;
    margin-top: 14px;
}

body.skin-neumorphism .course-tile .general-switch {
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    height: 36px;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid rgba(118, 124, 137, .14) !important;
    border-radius: 11px !important;
    color: #aeb4bd !important;
    background: #41444d !important;
    box-shadow:
        4px 4px 9px rgba(19, 21, 26, .56),
        -3px -3px 8px rgba(105, 111, 123, .2) !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    text-transform: none !important;
    transition: color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

body.skin-neumorphism .course-tile .general-switch:hover {
    color: #d9dde3 !important;
    transform: translateY(-1px);
}

body.skin-neumorphism .course-tile .general-switch.switch-active {
    border-color: rgba(54, 216, 232, .18) !important;
    color: #58d6e2 !important;
    background: #353841 !important;
    box-shadow:
        inset 4px 4px 9px rgba(18, 20, 25, .61),
        inset -3px -3px 8px rgba(101, 107, 119, .14),
        0 0 0 1px rgba(54, 216, 232, .04) !important;
    transform: none;
}

body.skin-neumorphism .course-tile .general-switch.switch-disabled {
    opacity: .46;
}

body.skin-neumorphism .course-tile .linearity-switch {
    min-height: 30px;
    gap: 8px;
}

body.skin-neumorphism .course-tile .linearity-switch input[type="checkbox"].ios8-switch + label {
    box-sizing: border-box;
    min-height: 30px;
    margin: 0 !important;
    padding: 0 0 0 58px !important;
    color: #aeb4bd !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    line-height: 30px !important;
    cursor: pointer;
}

body.skin-neumorphism .course-tile .linearity-switch input[type="checkbox"].ios8-switch + label::before {
    box-sizing: border-box;
    top: 1px !important;
    left: 0 !important;
    width: 50px !important;
    height: 28px !important;
    border: 1px solid rgba(18, 20, 25, .54) !important;
    border-radius: 999px !important;
    background: #343740 !important;
    box-shadow:
        inset 4px 4px 9px rgba(17, 19, 24, .68),
        inset -3px -3px 8px rgba(101, 107, 119, .15) !important;
}

body.skin-neumorphism .course-tile .linearity-switch input[type="checkbox"].ios8-switch + label::after {
    box-sizing: border-box;
    top: 4px !important;
    left: 3px !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    border: 1px solid rgba(123, 129, 141, .24) !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #565a64, #454850) !important;
    box-shadow:
        3px 3px 7px rgba(17, 19, 24, .68),
        -2px -2px 6px rgba(117, 123, 136, .25) !important;
    transform: translateX(0);
    transition: transform .24s ease, background .24s ease, box-shadow .24s ease !important;
}

body.skin-neumorphism .course-tile .linearity-switch input[type="checkbox"].ios8-switch:checked + label::before,
body.skin-neumorphism .course-tile .linearity-switch input[type="checkbox"].ios8-switch:checked:not(.switch) + label::before {
    border-color: rgba(54, 216, 232, .2) !important;
    background: linear-gradient(90deg, #303840, #343740) !important;
    box-shadow:
        inset 4px 4px 9px rgba(17, 19, 24, .7),
        inset -3px -3px 8px rgba(101, 107, 119, .14),
        inset 12px 0 14px rgba(54, 216, 232, .1) !important;
}

body.skin-neumorphism .course-tile .linearity-switch input[type="checkbox"].ios8-switch:checked + label::after {
    margin-left: 0 !important;
    border-color: rgba(79, 220, 232, .34) !important;
    background: linear-gradient(145deg, #59616a, #464b54) !important;
    box-shadow:
        3px 3px 7px rgba(17, 19, 24, .68),
        -2px -2px 6px rgba(117, 123, 136, .25),
        0 0 8px rgba(54, 216, 232, .18) !important;
    transform: translateX(22px);
}

body.skin-neumorphism .course-tile .linearity-switch input[type="checkbox"].ios8-switch + label:hover::after {
    box-shadow:
        4px 4px 9px rgba(17, 19, 24, .72),
        -3px -3px 7px rgba(117, 123, 136, .28) !important;
}

body.skin-neumorphism .course-tile .linearity-switch input[type="checkbox"].ios8-switch.switch-disabled + label {
    cursor: not-allowed;
    opacity: .48;
}

@media (max-width: 700px) {
    body.skin-neumorphism .course-tile-info .subject_wraper_div {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
    }

    body.skin-neumorphism .course-tile-info .subject_wraper_div .course-subject-wrapper {
        align-self: flex-start;
    }
}

/* Keep student answers readable across every skin. */
body[class*="skin-"] .input:not(.correct):not(.wrong):not(.quiz-green):not(.quiz-red),
body[class*="skin-"] .input:not(.correct):not(.wrong):not(.quiz-green):not(.quiz-red) .ql-editor,
body[class*="skin-"] .input:not(.correct):not(.wrong):not(.quiz-green):not(.quiz-red) .ql-editor * {
    color: var(--black) !important;
}

html body[class*="skin-"] .chapter-content .content-parent .package-question .editorAnswer.correct,
html body[class*="skin-"] .chapter-content .content-parent .package-question .editorAnswer.correct .ql-editor,
html body[class*="skin-"] .chapter-content .content-parent .package-question .editorAnswer.correct .ql-editor *,
html body[class*="skin-"] .text-answer.quiz-green {
    color: #173b2a !important;
}

html body[class*="skin-"] .chapter-content .content-parent .package-question .editorAnswer.wrong,
html body[class*="skin-"] .chapter-content .content-parent .package-question .editorAnswer.wrong .ql-editor,
html body[class*="skin-"] .chapter-content .content-parent .package-question .editorAnswer.wrong .ql-editor *,
html body[class*="skin-"] .text-answer.quiz-red {
    color: #4a2024 !important;
}

html body[class*="skin-"] input.text-answer.quiz-green {
    background: #d6fae8 !important;
    border-color: #1ba260 !important;
}

html body[class*="skin-"] input.text-answer.quiz-red {
    background: #ffd9d9 !important;
    border-color: #9f1e22 !important;
}

body[class*="skin-"] .answer-wrapper:is(
    .quiz-blue,
    .quiz-red,
    .quiz-pink,
    .quiz-yellow-1,
    .quiz-green,
    .quiz-yellow-2
),
body[class*="skin-"] .answer-wrapper:is(
    .quiz-blue,
    .quiz-red,
    .quiz-pink,
    .quiz-yellow-1,
    .quiz-green,
    .quiz-yellow-2
) .ql-editor,
body[class*="skin-"] .answer-wrapper:is(
    .quiz-blue,
    .quiz-red,
    .quiz-pink,
    .quiz-yellow-1,
    .quiz-green,
    .quiz-yellow-2
) .ql-editor * {
    color: #17222d !important;
}

/* Keep native and Materialize selection controls readable in every skin. */
body[class*="skin-"] {
    --selection-control-bg: var(--grey);
    --selection-control-fg: var(--black);
    --selection-color-scheme: light;
}

:is(
    body.skin-dark,
    body.skin-rpg,
    body.skin-lcars,
    body.skin-agent,
    body.skin-time,
    body.skin-lloyd,
    body.skin-smuggler,
    body.skin-tech,
    body.skin-ninja,
    body.skin-galaxy,
    body.skin-magic,
    body.skin-headmaster,
    body.skin-cyber,
    body.skin-neumorphism
) {
    --selection-color-scheme: dark;
}

body.skin-minecraft {
    --selection-control-bg: var(--mc-parchment-light);
    --selection-control-fg: var(--mc-ink);
}

body.skin-rpg {
    --selection-control-bg: #0d0d0d;
    --selection-control-fg: var(--rpg-cream);
}

body.skin-neumorphism {
    --selection-control-bg: var(--neu-inset-surface);
    --selection-control-fg: var(--neu-text);
}

body[class*="skin-"] select {
    color: var(--selection-control-fg) !important;
    background-color: var(--selection-control-bg) !important;
    color-scheme: var(--selection-color-scheme);
}

body[class*="skin-"] select option,
body[class*="skin-"] select optgroup {
    color: var(--selection-control-fg) !important;
    background-color: var(--selection-control-bg) !important;
}

body[class*="skin-"] .select-wrapper input.select-dropdown {
    color: var(--selection-control-fg) !important;
    background-color: var(--selection-control-bg) !important;
}

body[class*="skin-"] .select-wrapper .caret {
    fill: var(--selection-control-fg) !important;
}

body[class*="skin-"] .dropdown-content.select-dropdown {
    color: var(--selection-control-fg) !important;
    background-color: var(--selection-control-bg) !important;
}

body[class*="skin-"] .dropdown-content.select-dropdown li > span {
    color: var(--selection-control-fg) !important;
}

body[class*="skin-"] .dropdown-content.select-dropdown li:hover,
body[class*="skin-"] .dropdown-content.select-dropdown li.active,
body[class*="skin-"] .dropdown-content.select-dropdown li.selected {
    background-color: var(--blue-bg) !important;
}