@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');
/* ==================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;
    --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;
    /*--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: 30px;
    justify-items: center;
    align-items: flex-end;
    margin-top: 20px;
}





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

.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-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{
    width: 250px;
    height: 65px;
    background: var(--primary-blue) !important;
    border-radius: 5px;
    padding: 5px;
}

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

.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);
}
/* ===============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 {
    appearance: none;
    overflow: visible;
    width: 40%;
    height: 15px;
    margin-left: 5px;
    -webkit-appearance: none !important;
    background-color: var(--orange);
    border-radius: 10px;
    transition: all 0.5s;
    outline: none;
}

#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{
    display: flex;
    flex-direction: column !important;
    justify-content: flex-start;
}

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

#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: 20px;
    line-height: 30px;
    color: #5F6368;
    margin-left: 20 !important;
}

.tile-text-big{
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    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: 36px;
    line-height: 100%;
    color: #202124;
}

.general-switch-wrapper{
    display: flex;
    justify-content: space-around;
    gap: 16px;
}

.general-switch{
    display: flex !important;
    justify-content: center;
    align-items: center;
    background: #F4F8FE;
    border-radius: 5px;
    height: 50px;
    width: auto;
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    text-align: center;
    letter-spacing: 0.005em;
    color: var(--blue);
    padding: 14px 20.23px 13px 20.23px;
}

.switch-active{
    background: var(--blue);
    color: #FFFFFF;
}

.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{
    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: 170px !important;
    width: 282px !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;
}

h1 {
    margin: 0 !important;
    font-size: 32px !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);
}

h1 {
    margin: 0 !important;
}


.chapter-top{
    display: flex;
    margin: 40px 0px 20px 0px;
}

.chapter-top h1{
    font-weight: 700;
}

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

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

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

.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-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%;
}

.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: 99;
    position: absolute;
    background: white;
    padding: 10px;
    width: 250px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.blocked-chapter span{
    color: grey !important;
}

.chapter-list-item.blocked-chapter::before{
    background: grey !important;
}

.chapter-list-item.blocked-chapter::after{
    border-color: grey !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;
}


.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: 96px !important;
    font-weight: 900;
    color: black;
}

.administration-header h2{
    margin-top: 0px;
    margin-left: 20px;
    font-weight: 400;
    color: var(--blue);
}


.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: 30px;
    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: 76px;
    height: 76px;
    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: 22px;
    line-height: 100%;
    color: #00A3FF;

}

.user-details-admin {
    margin-top: 14px;
    margin-left: 15px;
}

.user-name-display:not(.full){
    color: #5f6368;
    margin-top: 10px;
}

.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{
    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);
}

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

.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{
    margin: 25px;
    height: 50px;
    width: 50px;
    margin-right: 15px;
}

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

.tileNameBox input{
    border: none !important;
    box-shadow: none !important;
    font-size: 22px !important;
    width: 100%;
    color: #444 !important;
}


.tileNameBox input[readonly="readonly"]{
    cursor: default !important;
}


.editor-page{
    width: 100%;
    padding: 0px 30px;
}

.grid-editor-parent i{
    cursor: pointer;
}


.editors-headline{
    color: var(--blue);
    font-size: 18px;
}


/* .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{
    padding-top: 55%;
    width: 100%;
    position: relative;
    height: 0;
}



.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);
}


.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%;
}

.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;
    width: 46px;
    height: 25.09px;
}
  
.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%;
}

.upload-file i{
    font-size: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.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: 18px;
        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: 140px;
    padding-right: 50px;
    padding-left: 50px;
    padding-bottom: 20px;
}


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

.quiz-regular{
    height: 100%;
    display: flex;
    flex-flow: column;
}

.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);
}

.package-question{
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 10px;
    width: 100%;
    justify-items: center;
    align-items: center;
}

.package-question .input{
    grid-column: 2;
    width: calc(100% - 30px);
}

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

.auto-task .solution-input {
    margin-right: 20px;
}

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


.example-tasks{
    display: flex;
    gap: 30px;
    margin-top: 30px;
}



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


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

    .quiz-regular {
        height: 90%;
    }
}

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

.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);
}

.block-options-overview{
    width: 100%;
}

.options-wrapper{
    margin-bottom: 10px;
}


.add-requirety{
    margin-left: auto;
}


.add-requirety i{
    color: white;
}

.multi-page-app-wrapper{
    display: flex;
}


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