* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased; text-decoration: none;
 }
 body {min-height: 100vh;}
 textarea, input { outline: none; padding: 0; margin: 0}
button {cursor: pointer; outline: none; border: none;}
ul li { list-style-type: none; }
i {
  font-style: normal;
}
html {
    background-color: #ffffff;
    font-size: 20px;
    color: #000000;
    font-family: "Rubik", sans-serif;
    font-weight: 400;
    overflow-x: hidden;
    letter-spacing: -0.03em;
    position: relative;
  }
  .html--fixed-area {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
   /* justify-content: center; */
  }
  
  @keyframes error-animation {
    0% { transform: translateX(0) }
    25% { transform: translateX(7px) }
    50% { transform: translateX(-7px) }
    75% { transform: translateX(7px) }
    100% { transform: translateX(0) }
   }
.login--main-wrap {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-image: url('../assets/auth-hero-image.svg');
    background-repeat: no-repeat;
    background-size: cover;
  }
  .user--linkblock-reward-width {
    width: 50%;
  }

.login--auth-left {
    flex: 1;
}
.user--classroom-wrap {
    width: 100%;
    overflow-x: hidden;
    height: 100%;
    min-height: 100vh;
}
.user--myClasses-wrap {
    padding-inline: 50px;
    position: relative;
}
.user--class-generic-button-2:hover {
background-color: #CCDDEC;
border-bottom: 3px solid #0C5CA4;
}

.login--auth-right {
    position: relative;
    width: max-content;
    height: max-content;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    gap: 10px;
    align-self: center;
    justify-self: center;
}
/* 
.login--auth-form {
width: 100%;
height: max-content;
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
justify-content: center;
padding-block: 20px;
padding-inline: 40px;
border-radius: 10px;
border: 1.5px solid #bbbbbb;
}  */

.login--auth-input {
    height: max-content;
    width: max-content;
    padding-inline: 20px;
    padding-block: 15px;
    border: 0;
    background-color: #ffffff;
    width: 450px;
    border-bottom: 1.5px #bbbbbb solid;
    color:rgb(12, 92, 164);
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: 20px;
}
.login--auth-input-error {
    border-bottom: 1px solid #bb4242 !important;
    animation: 0.3s linear error-animation;
}

.footer--main-wrap {
    width: 100%;
    height: max-content;
    padding-block: 20px;
    display: flex;
justify-content: center;
align-items: center;
}
.footer--main-wrap-block {
    display: flex;
    flex-direction: row;
    gap: 30px;
    width: max-content;
    height: max-content;
    padding-block: 10px;
    padding-inline: 20px;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
border-radius: 10px;
justify-content: center;
align-items: center;
}
.footer--main-links, .footer--main-links-clickable {
    font-size: 16px;
    font-weight: 400;
    color: #000000;
    transition: color 0.1s linear;
}
.footer--main-links-clickable:hover {
color: rgba(18, 86, 164, 1);
} 
.footer--main-compound {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    align-items: center;
}
.footer--main-compound-language {
    width: 20px;
    height: 10px;
}
.test--delimeter {
    width: 80%;
    height: 100px;
    background-color: #e4e4e4;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 30px;
    color: #000000;
    margin: 0 auto;
    margin-block: 20px;
    border-radius: 20px;
}
.nav--status-bar {
    width: max-content;
    height: max-content;
    max-height: 100px;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px;
}
.nav--status-bar-info {
    /* flex: 2; */
    display: flex;
    flex-direction: column;
    }
    .nav--status-bar-name {
        text-align: center;
        font-weight: 600;
    font-size: 20px;
    letter-spacing: -0.02em;
     }
     .nav--status-bar-course {
        text-align: center;
        font-weight: 500;
        font-size: 15px;
    letter-spacing: -0.03em;
    align-self: flex-start;
     }
     .nav--status-bar-settings {
        width: 25px;  
        height: 35px;
}
.nav--status-bar-settings svg {
        width: 100%;
        height: 100%;
}

.test--space {
    width: 100%;
    height: 100vh;
}
.user--myClasses-wrap {
    padding-inline: 50px;
}
.user--myPlayground-wrap {
    padding-inline: 50px;
}

.contributor--toolpanel-hero {
    margin-block-start: 30px;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.contributor--toolpanel-desc {
    font-size: 20px;
    font-weight: 400;
    color: #7c7c7c;
    transform: translateY(-20px);
}
.user--myClasses-h2 {
    margin-block-start: 30px;
    font-size: 45px;
    font-weight: 700;
    letter-spacing: -0.01em;  
}

.user--classesSchedule-notification {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
font-size: 18px;
text-align: center;
letter-spacing: -0.02em;
color: #000000;;
gap: 21px;
padding-inline: 10%;
}
.user--classesSchedule-notification img {
    width: 40px;
}
.user--linkblock-united {
    width: 100%;
    padding: 40px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-block: 20px;
    background-color: #F5F5F5;
    border-radius: 10px;
    gap: 20px;
}

.user--linkblock-reward-united {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.user--linkblock-wrap {
    width: 100%;
   /* border: 2.5px solid #D9D9D9 */
    border-radius: 15px;
    height: max-content;
    cursor: pointer;
    -webkit-animation: puff-in-center 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
    animation: puff-in-center 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
    animation-delay: 100ms;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 2px 2px;
    padding: 20px;
}
.constructor--library-main-wrapper {
    width: 100%;
    height:  max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}
.constructor--library-main-wrapper-block-wrapper {
    width: 100%;
    height: max-content;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 6px 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-direction: column;
}
.constructor--library-main-wrapper-block-wrapper-clear {
    width: 100%;
    height: max-content;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-direction: column;
}
.constructor--library-main-wrapper-block-wrapper-expanded {
    width: 100%;
    height: max-content;
    padding-inline: 40px;
    padding-block: 20px;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 6px 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-direction: column;
}


.user--linkblock-wrap-inner-desc {
    font-size: 18px;
    font-weight: 400;
}
.user--linkblock-wrap-inner-desc-bold {
    font-size: 15px;
    font-weight: 600;
}
.user--linkblock-wrap-preview {
    padding-block: 0px;
    }
    .user--linkblock-inside {
        display: flex;
        margin: 0 auto;
        justify-content: center;
        align-items: center;
        gap: 29px;
        width: 100%;
        font-size: 30px;
        text-align: center;
        font-weight: 600;
    }
    .user--linkblock-inside-circle {
        width: max-content;
        height: max-content;
    }
    .user--linkblock-inside-circle span {
       font-size: 50px;
       font-weight: 600;
       letter-spacing: -0.02em;
       color: #000000;
    }
    .user--linkblock-wrap-button-action {
    border-radius: 5rem;
    background: #0C5CA4;
    padding-block: 10px;
    padding-inline: 30px;
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    
    }
.user--exercise-span-indicator {
   font-size: 20px;
   font-weight: 400;
   font-family: inherit;
   letter-spacing: -0.02em;
   color: #7e7e7e;
}
.user--exercise-flex-column {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-direction: column;
}
.user--linkblock-wrap-inner-layer {
    width: 100%;
   height: max-content;
   background-color: #ffffff;
   border-radius: 15px;
   padding: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
   gap: 15px;
}
.user--linkblock-wrap-inner-column {
    width: 70%;
    height: max-content;
    display: flex;
    gap: 25px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 auto;

}
.user--linkblock-wrap-inner-layer-icon {
    width: 50px;
    height: 50px;
}
.user--linkblock-wrap-inner-layer-icon svg {
    width: 100%;
    height: 100%;
}
.user--traverse-loading-wrapper svg path{
    fill:rgb(173, 173, 173) !important;
}
.user--interactive-block-wrap {
    width: 100%;
    height: 100vh;
    position: relative;
    background-image: url('../assets/user-character-state.svg');
    background-repeat: no-repeat;
    background-size: 100%;
}
.user--key-wrap {
    width: max-content;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 16px;
}
.user--key-info {
    font-weight: 500;
font-size: 35px;
text-align: center;
letter-spacing: -0.02em;
color: #000000;
}
.user--key-info b {
font-weight: 900;
}

.user--key-button {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
}
.user--key-button img {
width: 30px;
}
.user--key-button span {
    font-weight: 800;
    font-size: 25px;
    text-align: center;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #759FD1;
}

.user--story-contributor-wrap {
    display: flex;
    width: 70%;
    margin: 0 auto;
    margin-block: 20px;
    flex-direction: row;
    /* gap: 50px; */
}
.user--contributor-add-wrap {
    display: flex;
    width: 100%;
    margin-block: 20px;
    flex-direction: row;
    /* gap: 50px; */
    z-index: 500;
    justify-content: center;
}
.user--achievement-block {
    background: rgba(217, 217, 217, 0.3);
border: 2.5px solid #D9D9D9;
border-radius: 30px;
width: max-content;
height: max-content;
padding: 30px;
display: flex;
align-items: center; 
gap: 30px;
min-width: 50%;
}
.user--contributor-add-block {
    background: rgba(217, 217, 217, 0.3);
border: 2.5px solid #D9D9D9;
border-radius: 30px;
width: max-content;
height: max-content;
padding: 30px;
display: flex;
align-items: center; 
gap: 30px;
min-width: 70%;
justify-content: center;
}
.user--contributor-story-block {
    background: rgba(217, 217, 217, 0.3);
border: 2.5px solid #D9D9D9;
border-radius: 30px;
width: 100%;
height: max-content;
padding: 30px;
display: flex;
flex-direction: column;
align-items: center; 
gap: 30px;
justify-content: center;
}
.user--contributor-story-block-input-header {
    font-size: 30px !important;
    font-weight: 500 !important;
    text-align: center;
}
.user--achievement-block-circle {
    width: 100px;
    min-width: 100px;
    height: 100px;
    background: #4DA6D9;
    /* border: 2.5px solid #000000; */
position: relative;
border-radius: 5rem;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.user--achievement-block-circle span {
    font-weight: 400;
    font-size: 12px;
    /* text-align: center; */
    color: #FFFFFF;
}
.user--achievement-block-circle-add {
    position: absolute;
    right: -5%;
    bottom: -10%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    font-size: 30px;
    font-weight: 900;
    color: #ffffff;
    border-radius: 5rem;
}
.user--achievement-block-text-wrap {
    display: flex;
    flex-direction: column;
    color: #2E2E2E;
}
.user--contributor-text-wrap {
    display: flex;
    flex-direction: column;
    color: #2E2E2E;
    width: 70%;
}
.user--achievement-block-text-wrap h1 {
    font-weight: 800;
font-size: 30px;
text-align: left;
margin-block: 5px;
}
.user--achievement-block-text-wrap h2 {
    font-weight: 400;
    font-size: 20px;
    letter-spacing: -0.01em;
    text-align: left;
}
.user--popup-bottom {
    width: 100%;
    position: sticky;
    bottom: 0;
    height: 35px;
    background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
display: flex;
justify-content: center;
align-items: center;
}
.user--popup-bottom-icon {
    width: 50px;
    height: 50px;
}
.user--preview-more {
    display: flex;
    width: max-content;
    height: max-content;
    gap: 10px;
}
.user--preview-more-circle {
    width: 20px;
    height: 20px;
    border-radius: 5rem;
    /* background: rgba(217, 217, 217, 0.3); */
    border: 2.5px solid #D9D9D9
}
.user--preview-block {
    background: rgba(217, 217, 217, 0.3);
border: 2.5px solid #D9D9D9;
border-radius: 30px;
width: 45%;
height: max-content;
padding: 20px;
display: flex;
align-items: center; 
gap: 20px;
justify-content: center;
}
.user--preview-secondary-wrap {
    background-color: transparent;
    width: 45%;
    height: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
}
.user--preview-secondary-block {
    background: rgba(217, 217, 217, 0.3);
border-radius: 30px;
width: 100%;
height: max-content;
display: flex;
justify-content: space-between;
align-items: center;
padding-inline: 10px;
min-height: 60px;
position: relative;
border: 2.5px solid #D9D9D9;
}
.user--preview-secondary-block-inside {
    flex: 1;
    height: max-content;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    max-width: 50%;
}
.user--preview-secondary-block-inside:nth-child(odd) {
    justify-content: flex-end;
}
.user--preview-secondary-block-inside:nth-child(odd) span {
    order: -1;
}
.user--preview-secondary-block-delimeter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 50%;
    border-radius: 1rem;
    background-color: rgba(175, 175, 175, 0.7);
}
.user--preview-secondary-block-inside img {
    width: 40px;
    height: 40px;
    border-radius: 5rem;
    object-fit: cover;
}
.user--preview-secondary-block-inside span {
    font-weight: 400;
    font-size: 21px;
}
.user--preview-secondary-more {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
flex: 1;
max-width: 50%;
}
.user--preview-secondary-more-particle {
    width: 40px;
    height: 15px;
    background: rgba(217, 217, 217, 0.3);
    border: 2.5px solid #D9D9D9;
    border-radius: 20px;
}
.user--achievement-block-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user--sticker-form, .user--story-form { 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: max-content;
    gap: 10px;
}
.user--exercise-builder-form { 
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: max-content;
    gap: 10px;
    background-color: #f4f4f4;
    border-radius: 20px;
    padding-block: 15px;
}

.user--class-exercise-labelinputwrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.user--class-items-grid-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
    grid-gap: 20px;
    width: 90%;
    position: relative;
}
.user--class-items-grid-wrap-main {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
    grid-gap: 20px;
    width: 90%;
    position: relative;
    padding: 20px;
    border-radius: 20px;
    border: 2px solid #D9D9D9;
    background-color: #ffffff;
    align-items: center;
    min-height: 150px;
}
.user--class-items-exercise-image-wrap-main {
    display: flex;
    width: 90%;
    height: max-content;
    flex-wrap: wrap;

}
.user--class-exercise-image-wrap-inside {
    display: flex;
    width: 100%;
    height: max-content;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    font-size: 20px;
    font-weight: 500;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 2px 2px;
    padding: 30px;
    border-radius: 10px;

}
.user--class-items-exercise-image-wrap {
    display: flex;
   width: 90%;
    height: max-content;
    align-items: center;
}
.constructor--exercise-list-option-desc-small {
    font-size: 18px;
}
.user--class-items-exercise-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    }
/* .user--class-items-grid-wrap > * {
    margin: 10px;
} */


.user--class-exercise-labelinputwrap label {
    font-weight: 550;
    font-size: 20px;
}
.user--exercise-builder-button-wrapper {
    grid-column: span 2;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-direction-column {
    display: flex;
    flex-direction: column;
}


.user--class-exercise-circle-true {
    border: 2.5px solid #87C2B1;
}

.user--class-exercise-circle-true:hover {
    background-color: #87C2B1;
}

.user--class-exercise-circle-false {
    border: 2.5px solid #FF9393;
}

.user--class-exercise-circle-false:hover {
    background-color: #FF9393;
}

.user--class-exercise-circle-true-answered {
    background-color: rgba(135, 194, 177, 0.50) !important;
}

.user--class-exercise-circle-false-answered {
    background-color: rgba(255, 147, 147, 0.50) !important;
}

.user--class-exercise-button {
    background-color: transparent;
    font-size: 25px;
    font-weight: 450;
    font-family: inherit;
    padding-inline: 20px;
    padding-block: 10px;
    color: #0C5CA4;
    border-bottom: 3px solid #0C5CA4;
    width: max-content;
    margin: 0 auto;
    transition: 0.25s all ease-in-out;
    cursor: pointer;
    margin-block: 30px;
}
.user--class-exercise-button-mini {
    background-color: transparent;
    font-size: 18px;
    font-weight: 450;
    font-family: inherit;
    padding-inline: 20px;
    padding-block: 10px;
    color: #0C5CA4;
    border-bottom: 3px solid #0C5CA4;
    width: max-content;
    margin: 0 auto;
    transition: 0.25s all ease-in-out;
    cursor: pointer;
}
.clicked {
    cursor: default !important;
    pointer-events: none !important;
    color: #D9D9D9;
}
.contributor--inline-control-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.user--class-exercise-button:hover {
    color: #ffffff;
            background: #0C5CA4;
            border-radius: 10px;
}
.user--class-exercise-button-mini:hover {
    color: #ffffff;
            background: #0C5CA4;
            border-radius: 10px;
}
.user--library-header-dynamic {
    width: 100%;
    height: max-content;
    /* padding-block: 10px; */
    display: flex;
    gap: 15px;
    align-self: flex-start;
    align-items: center;
}
.user--library-header-dynamic .icon-back {
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.user--library-header-dynamic .icon-back svg {
  width: 100%;
  height: 100%;
}
.constructor--library-traverse-wrapper {
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.user--library-header-dynamic-name {
    font-weight: 450;
    color: #000000;
    font-size: 25px;
    align-self: flex-start;
}

.user--exercise-builder-form input, .user--exercise-builder-form textarea, .user--exercise-builder-form select  {
    width: 90%;
    border: 2.5px solid #D9D9D9;
    padding: 15px;
    font-size: 16px;
    border-radius: 12px;
    font-family: inherit;
    -webkit-appearance: none;
    -moz-appearance: none; -webkit-appearance: none; appearance: none;
    }

    .user--slide-builder-input {
        width: 90%;
        border: 0px;
        padding: 15px;
        font-size: 16px;
        border-radius: 12px;
        font-family: inherit;
        -webkit-appearance: none;
        color: #000000;
        -moz-appearance: none; -webkit-appearance: none; appearance: none;
        }
        .user--slide-exercise-wrapper {
            width: 100%;
            height: max-content;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            padding: 10px;
            border-radius: 20px;
            background-color: #ffffff;
            gap: 15px;
        }
        .user--exercise-multiple_sequence_sdisplay {
            width: max-content;
            max-width: 60%;
            height: max-content;
            padding: 30px;
            border-radius: 30px;
            /* background-color: #f4f4f4; */
            display: flex;
            flex-direction: row;
            gap: 15px;
            justify-content: center;
            align-items: center;
            font-size: 27px;
           font-weight: 400;
           text-align: center;
    }
    
   
    .user--slide-builder-dialogue-expl {
        width: 100%;
    border: 0px;
    padding: 15px;
    font-size: 25px;
    border-radius: 12px;
    font-family: inherit;
    -webkit-appearance: none;
    -moz-appearance: none; -webkit-appearance: none; appearance: none;
    text-align: center;
    }
    .contrib--block-dialogue-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        /* align-items: center; */
        gap: 20px;
        width: 100%;

    }
    .user--class-dialogue-block-symbol {
       font-size: 40px;
       font-weight: 600;
       font-family: inherit;
       width: max-content;
       height: max-content;
       padding-inline: 20px;
       color: #EEEEEE;
    }
.user--story-form input, .user--story-form textarea, .user--story-form select {
    width: 90%;
    border: 2.5px solid #D9D9D9;
    padding: 15px;
    font-size: 16px;
    border-radius: 12px;
    font-family: inherit;
    -webkit-appearance: none;
    -moz-appearance: none; -webkit-appearance: none; appearance: none;
}
.user--exercise-builder-option-delete {
    font-size: 30px;
    background-color: transparent;
    font-weight: 600;
    width: max-content;
    height: max-content;
    color: #FF9393;
    /* display: flex;
    justify-content: center;
    align-items: center; */
    cursor: pointer;
}
.user--exercise-builder-slidedata-wrap {
    width: max-content;
    max-width: 90%;
    height: max-content;
    padding: 10px;
    /* border: 1px solid #777777; */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 400;
    font-family: inherit;
    gap: 10px;
    border-radius: 10px;
    background-color: #f5f5f5;
}
.user--exercise-builder-slidedata-wrap-inner {
    width: max-content;
    height: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    gap: 5px;
    border: 0px;
}
.user--exercise-builder-slidedata-wrap-inner-right {
    width: max-content;
    height: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    gap: 10px;
    border: 0px;
    color: #777777;
}
.user--class-exercise-header-classnumber, .user--class-exercise-header-slidenumber {
    background-color: transparent;
    font-size: 20px;
    font-weight: 900;
    border: 0;
    width: 3rem;
}
.user--exercise-builder-particular-hint-input {
    width: 100%;
    padding: 5px;
    font-size: 17px;
    border: 0px;
    font-family: inherit;
    -webkit-appearance: none;
    -moz-appearance: none; -webkit-appearance: none; appearance: none;
}
.user--sticker-form input, .user--sticker-form textarea {
    width: 450px;
    border: 2.5px solid #D9D9D9;
    padding: 10px;
    font-size: 17px;
    border-radius: 12px;
    font-family: inherit;
}
.user--contributor-form { 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: max-content;
    gap: 10px;
}
.user--contributor-form input, .user--contributor-form textarea {
    width: 80%;
    border: 2.5px solid #D9D9D9;
    padding: 13px;
    font-size: 17px;
    border-radius: 12px;
    font-family: inherit;
}
.user--sticker-form textarea {
    height: 100px;
    resize: none;
}
.user--story-form textarea {
    height: 200px;
    resize: none;
}
.user--sticker-form button, .user--contributor-form button, .user--story-form button  {
    border: 2.5px solid #1355A3;
    padding: 13px;
    font-size: 18px;
    font-weight: 600;
    width: max-content;
    height: max-content;
    background-color: transparent;
    border-radius: 5rem;
    font-family: inherit;
    text-transform: uppercase;
    color: #1355A3;
    margin-block-start: 10px;
    transition: background-color 0.15s linear;
}
.user--button-success {
    border: 2.5px solid #56cb98 !important;
    cursor: default;
    pointer-events:none;
    color: #56cb98 !important;
}
.user--button-success:hover {
    background-color: transparent !important;
}
.user--sticker-form button:hover {
    background-color: #ffffff;
}
.user--achievement-block-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 5rem;
}
.user--flex-two {
    flex-direction: row;
    flex-wrap: wrap;
}
.user--notification-dynamic {
    position: fixed;
    top: 30px;
    width: max-content;
    height: max-content;
    display: flex;
    border-radius: 5rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    padding: 20px;
    gap: 20px;
    border: 2.5px solid #0c5ca4;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;
}
.user--notification-dynamic svg {
    width: 45px;
    height: 45px;
    fill: rgb(94, 216, 94);
}
.user--notification-dynamic-inside {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: flex-start;
}
.user--notification-dynamic-inside h1 {
    font-size: 30px;
    font-weight: 650;
}
.user--notification-dynamic-inside h2 {
    font-size: 18px;
    font-weight: 400;
}


  .slide-in-blurred-top {
	-webkit-animation: slide-in-blurred-top 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
	        animation: slide-in-blurred-top 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
@-webkit-keyframes slide-in-blurred-top {
    0% {
      -webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
              transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
      -webkit-transform-origin: 50% 0%;
              transform-origin: 50% 0%;
      -webkit-filter: blur(40px);
              filter: blur(40px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0) scaleY(1) scaleX(1);
              transform: translateY(0) scaleY(1) scaleX(1);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      -webkit-filter: blur(0);
              filter: blur(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-blurred-top {
    0% {
      -webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
              transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
      -webkit-transform-origin: 50% 0%;
              transform-origin: 50% 0%;
      -webkit-filter: blur(40px);
              filter: blur(40px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0) scaleY(1) scaleX(1);
              transform: translateY(0) scaleY(1) scaleX(1);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      -webkit-filter: blur(0);
              filter: blur(0);
      opacity: 1;
    }
  }
  .slide-out-blurred-top {
	-webkit-animation: slide-out-blurred-top 0.45s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
	        animation: slide-out-blurred-top 0.45s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
@-webkit-keyframes slide-out-blurred-top {
    0% {
      -webkit-transform: translateY(0) scaleY(1) scaleX(1);
              transform: translateY(0) scaleY(1) scaleX(1);
      -webkit-transform-origin: 50% 0%;
              transform-origin: 50% 0%;
      -webkit-filter: blur(0);
              filter: blur(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateY(-1000px) scaleY(2) scaleX(0.2);
              transform: translateY(-1000px) scaleY(2) scaleX(0.2);
      -webkit-transform-origin: 50% 0%;
              transform-origin: 50% 0%;
      -webkit-filter: blur(40px);
              filter: blur(40px);
      opacity: 0;
    }
  }
  @keyframes slide-out-blurred-top {
    0% {
      -webkit-transform: translateY(0) scaleY(1) scaleX(1);
              transform: translateY(0) scaleY(1) scaleX(1);
      -webkit-transform-origin: 50% 0%;
              transform-origin: 50% 0%;
      -webkit-filter: blur(0);
              filter: blur(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateY(-1000px) scaleY(2) scaleX(0.2);
              transform: translateY(-1000px) scaleY(2) scaleX(0.2);
      -webkit-transform-origin: 50% 0%;
              transform-origin: 50% 0%;
      -webkit-filter: blur(40px);
              filter: blur(40px);
      opacity: 0;
    }
  }  
  .user--myClasses-note-descriptive {
    font-size: 20px;
    font-weight: 400;
    width: max-content;
    max-width: 50%;
    height: max-content;
    padding: 15px;
    border: 2.5px solid #D9D9D9;
    margin-block: 15px;
    border-radius: 30px;
    background-color: rgba(217, 217, 217, 0.3);
    padding-block-end: 25px;
  }
  .user--myClasses-note-descriptive-bigger {
    width: 70% !important;
    margin: 0 auto;
    max-width: none;
  }
  .user--note-descriptive-close {
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
  }
  .user--note-descriptive-close svg {
width: 25px;
height: 25px;
fill: #000000;
transition: fill 0.15s linear;
  }
  .user--note-descriptive-close svg:hover {
    fill: #1355A3;
      }

.user--flex-wrap {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    position: fixed;
    background-color: transparent; 
}
.user--header-middle-margin {
    margin-block: 30px;
}
/* @media (prefers-color-scheme: dark) {
    html {
        background-color: #161616;
        font-size: 20px;
        color: #e6e6e6;
        font-family: "Rubik", sans-serif;
        font-weight: 400;
        overflow-x: hidden;
        letter-spacing: -0.03em;
        position: relative; 
      }
} */

/* 
Exercise builder - construtor
*/
.user--slide-contents-wrap {
    width: 90%;
    height: max-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    position: relative;

}
.user--constructor-table-control-wrapper {
    width: max-content;
    height: max-content;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.user--class-table-main-wrpr {
    width: max-content;
    height: max-content;

}
.user--constructor-table-control-wrapper-icon {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.user--constructor-table-control-wrapper-icon svg {
    width: 100%;
    height: 100%;
}

.user--class-started-image {
    width: 200px;
    height: 150px;
    object-fit: cover;
    margin: 0 auto;
}
.user--exercise-builder-wrap {
    width: 100%;
    margin-block: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 20px;
    border-radius: 20px;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border: 0;
    box-shadow: 0 0 3px 1px #d9d9d9;
    background-color: #ffffff;
  }
  

.user--exercise-builder-choose-btn {
    font-size: 20px;
    font-weight: 600;
    color: #D9D9D9;
    flex-wrap: wrap;
    padding: 10px;
    border-radius: 10px;
    border: 2.5px solid #D9D9D9;
    transition: all 0.3s linear;
    cursor: pointer;
}
.user--exercise-builder-choose-btn:hover {
    color: #0C5CA4;
    border: 2.5px solid #0C5CA4;
}
.user--exercise-builder-particular-wrap {
    width: 100%;
    height: max-content;
    margin-block: 20px;
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
   /* border: 2.5px solid #D9D9D9; */
    border-radius: 20px;
}

/* SLIDE */
.user--slide-component-button-wrapper {
    width: 90%;
    margin-block: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px;
    border-radius: 10px;
    gap: 15px;
    border: 1.5px solid #D9D9D9;
}
.user--traverse-miniature-add-new-button-inactive {
    pointer-events: none !important;
    color: #f9f9f9;
}
.user--traverse-miniature-add-new-button-inactive .user--traverse-miniature-control-button-icon {
    box-shadow: rgba(12, 164, 153, 0.26) 0px 0px 2px 2px;
    background-color: rgba(12, 164, 153, 0.26);
}
.user--traverse-constructor-header {
    color: #7e7e7e;
    font-size: 30px;
    font-weight: 550;
}
.flex--column-centered {
    flex-direction: column !important;
    gap: 15px !important; 
    justify-content: center;
    align-items: center;
}
.user--traverse-desc-bold {
    font-size: 25px;
    font-weight: 500;
}
.user--slide-builder-particular-wrap {
    width: 100%;
    height: max-content;
    margin-block: 20px;
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
   /* border: 2.5px solid #D9D9D9; */
    border-radius: 20px;
}
.user--component-builder-choose-btn {
    font-size: 18px;
    font-weight: 500;
    color: #0C5CA4;
    background-color: transparent;
    flex-wrap: wrap;
    padding: 10px;
    border-bottom: 2px solid #D9D9D9;
    transition: all 0.3s linear;
    cursor: pointer;
}
.user--component-builder-choose-btn:hover {
    border-bottom: 2px solid #0C5CA4;
}
/* Class Inside Module */ 

.user-class-header-wrap-rest {
    width: 100%;
    height: max-content;
    padding: 30px;
    border-radius: 10px;
   box-shadow: 0px 0px 2px 2px rgba(217, 217, 217, 0.2);
    background-color: #ffffff;
    font-size: 24px;
    font-weight: 350;
    text-align: left;
    font-family: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}
.user--slide-builder-header-wrap-generic {
    width: 100%;
    height: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.exercise-builder-remove-complex {
        fill: #ffffff;
        position: absolute;
        border-radius: 50%;
        right: -15px;
        top: 0;
        transform: translateY(-50%);
        background-color: transparent;
}
#video-player {
    width: 50%;
    height: 50%;
}
#listening-player {
    width: 40%;
    height: 40%;
}
.user-class-player-wrap {
    width: 60%;
    height: max-content;
    padding: 30px;
    border-radius: 30px;
    /* border: 2.5px solid #C20B03; */
    /* background-color: rgba(194, 11, 3, 0.05); */
    font-size: 24px;
    font-weight: 350;
    text-align: left;
    font-family: inherit;
}
.user-class-header-wrap b {
    font-size: 27px;
    font-weight: 700;
}
.user--class-achievements-preview-wrap {
    width: 90%;
    height: max-content;
    padding-block: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: 30px
}
.user--class-achievements-preview-wrap img {
    width: 500px;
    height: 250px;
    border-radius: 30px;
    object-fit: cover;
}
.user--class-achievements-preview-descriptive { 
    width: 500px;
    height: max-content;
    min-height: 250px;
    padding: 30px;
    border-radius: 30px;
    border: 2.5px solid #C20B03;
    background-color: rgba(194, 11, 3, 0.05);
    font-size: 24px;
    font-weight: 400;
    text-align: left;
    font-family: inherit;
}
.user--class-timer {
    position: absolute;
    top: 2%;
    left: 1%;
    font-size: 12px;
    text-transform: uppercase;
    background: transparent;
    font-weight: 500;
    color: #ACACAC;
    border: 2.5px solid #D9D9D9;
    padding-block: 5px;
    padding-inline: 15px;
    border-radius: 30px;
    width: max-content;
    height: max-content;
    overflow: hidden;
     white-space: nowrap;
    transition: width 1s ease;
}
.user--contrib-success-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    align-items: center;
    font-family: inherit;
    font-size: 30px;
    font-weight: 600;
    color: #87C2B1;
}
.contrib--exercise-builder-checkbox {
    border-radius: 5px;
    border: 1px solid #777777;
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    background-color: transparent;
    transition: all 0.3s linear;
    cursor: pointer;
}
.contrib--render-media-selector {
    width: 90%;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: max-content;
    padding: 10px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.spin {
    animation: spin 1s linear infinite;
}
.exercise-builder-load-icon {
    animation: spin 1s linear infinite;
}
.exercise-builder-load-icon-small {
    width: 25px !important;
    height: 25px !important;
}
.exercise-builder-load-icon-small svg path {
    fill: #777777 !important;
}

.contrib--render-media-delimeter {
    width: 1px;
    height: 35px;
    background-color: #777777;
    border-radius: 2px;
    align-self: center;
}
.contrib--exercise-builder-checkbox-clicked {
    background-color: #87C2B1;
    border: 2px solid #87C2B1;
}
.user--class-questions-question {
    display: flex;
    width: 100%;
    height: max-content;
    font-size: 24px;
    font-weight: 400;
    text-align: left;
    font-family: inherit;
    align-items: center;
    gap: 20px;
}
.user--class-questions-question-num {
    font-size: 40px;
    color: rgba(194, 11, 3, 0.5);
    font-weight: 800;
}

.user--slidebuilder-content-image {
    width: 200px;
    min-height: 150px;
    height: auto;
    margin: 0 auto;
    object-fit: cover;
    margin-block: 10px;
    border-radius: 10px;

}
.user--class-delimeter {
    margin: 0 auto;
    width: 70px;
    height: 5px;
    border-radius: 5rem;
    background-color: #D9D9D9;
    margin-block: 30px;
}

.user--class-dialogue-line {
    width: 90%;
    height: max-content;
    border-radius: 20px;
    border: 0;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   text-align: left;      
}
.user--class-dialogue-line-title {
    font-size: 27px;
    font-weight: 500;
    font-family: inherit;
    text-align: center;
    margin-block: 20px;
}
.user--class-content-complex-block-image {
    width: 70%;
    height: 300px;
    background-repeat: no-repeat;
    background-size: contain;

}
.user--class-scribble-body {
    width: 70%;
    height: 350px;
    padding: 30px;
    border-radius: 30px;
    border: 2.5px solid #D9D9D9;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    align-items: center;
    margin-block: 20px;
}
.user--class-scribble-buttons-wrap {
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: center;
}
.user--class-scrribble-button { 
    border: 2.5px solid #0C5CA4;
border-radius: 50px;
font-size: 20px;
color: #0C5CA4;
text-transform: uppercase;
padding-block: 10px;
padding-inline: 10px;
font-weight: 550;
cursor: pointer;
transition: all 0.15s linear;
}
.user--class-scribble-hero {
    text-align: center;
    font-size: 24px;
    color: #D9D9D9;
}
.user--class-table-table-caption {
    font-size: 24px; 
    font-weight: 500;
    color: #000000;
}
.user--class-example-block-character {
    font-size: 50px;
    font-weight: 550;
}
.user--class-example-block-pinyin {
    font-size: 20px;
    font-weight: 550;
    color: #797777;
}
.user--class-example-char-wrap {
    width: max-content;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
    max-width: 15%;
}
.user--class-full-image {
    width: 90%;
    height: max-content;
    padding: 30px;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    align-items: center;
    margin-block-start: 20px;
   text-align: left;      
}
.user--class-full-image span {
    font-size: 22px;
    font-weight: 400;
}
.user--class-waiting-wrap {
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
}


.constructor--exercise-list-option-icon {
    width: 30px;
    height: 30px;
    background: #acbed6;
    border-radius: 5rem;
    margin-inline: 10px;
}
.constructor-additional-container {
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: flex-start;
}
.user--exercise-sequence-choice-block {
    border: 1.5px solid  rgba(12, 92, 164, 0.3) !important;
}
.user--class-waiting-timer {
    border: 5px solid #D9D9D9;
    min-width: 8rem;
    min-height: 8rem;
    width: max-content;
    height: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5rem;
    color: rgba(12, 92, 164, 1);
    font-size: 2.5rem;
    font-weight: 700;

}
/* EXERCISE */

.user--exercise-match-description {
    font-size: 22px;
    font-weight: 500;
    color: #000000;
}
.user--class-exercise-input-multiple {
    position: relative;
    opacity: 0.8;
    border: 1.5px solid #D9D9D9 ;
    border-radius: 20px !important;
    flex: 0 1 auto; /* this tells the input fields not to grow beyond their content or specified width, and to shrink if needed */
    width: calc(50% - 10px); /* assuming you want to leave a 10px gap between the inputs. Adjust as needed */
    box-sizing: border-box;
}

.user--class-waiting-wrap {
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
/* .user--class-exercise-header {
    width: 90%;
    height: max-content;
    padding: 30px;
    border-radius: 30px;
    border: 2.5px solid #D9D9D9;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
  margin-block-start: 20px; 
    font-size: 27px;
   font-weight: 400;
   text-align: center;
} */
.user--class-exercise-header-transparent {
    width: 90%;
    height: max-content;
    border: 0;
    font-size: 27px;
    padding-block-start: 30px;
    padding-inline: 30px;
   font-weight: 400;
   text-align: center;
}
.exercise-builder-circle-contrainer {
    gap: 30px;
}

.user--class-exercise-block-control-button-wrap {
    display: flex;
    width: 90%;
    padding: 5px;
    /* border: 1px solid #D9D9D9; */
    background-color: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px; 
    border-radius: 10px;
    height: max-content;
    gap: 15px;
    justify-content: center;
    align-items: center;
    align-self: center;
}

.user--class-waiting-timer {
    border: 5px solid #D9D9D9;
    min-width: 8rem;
    min-height: 8rem;
    width: max-content;
    height: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5rem;
    color: rgba(12, 92, 164, 1);
    font-size: 2.5rem;
    font-weight: 700;

}
/* .user--class-exercise-answer-block { 
    width: 90%;
    height: max-content;
    padding: 30px;
    border-radius: 30px; 
    border: 2.5px solid #D9D9D9;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    font-weight: 400;

} */
.user--class-exercise-input-multiple {
    position: relative;
    opacity: 0.8;
    border: 1.5px solid #D9D9D9 ;
    border-radius: 20px !important;
    flex: 0 1 auto; /* this tells the input fields not to grow beyond their content or specified width, and to shrink if needed */
    width: calc(50% - 10px); /* assuming you want to leave a 10px gap between the inputs. Adjust as needed */
    box-sizing: border-box;
}
.input-number {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 1.5px solid #2970af;
    background-color: #ffffff; 
    font-size: 18px;
    font-weight: 550;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.user--exercise-match-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    position: relative;
}

.user--class-exercise-answer-block-constructor { 
    width: 100%;
    height: max-content;
    padding: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    font-weight: 400;
 
}
.exercise-builder-add-icon, .exercise-builder-remove-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: transparent;
    cursor: pointer;
    
}
.exercise-builder-add-icon svg, .exercise-builder-remove-icon svg  {
    width: 100%;
    height: 100%;
}
.exercise-build-add-icon svg {
    fill: rgb(69, 195, 166) !important;
}
.user--traverse-loading-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30;
    height: 30px;
    background-color: transparent;
    cursor: pointer;
}
.user--traverse-class-button-selected {
color: rgba(12, 92, 164, 1);
}
.user--traverse-dropdown-button-miniature {
    width: max-content;
    height: max-content;
    padding-inline: 0px;
    padding-block: 0px;
    border: 0 !important;
    background-color: transparent !important;
}
.user--traverse-dropdown-button-miniature svg {
    width: 30px;
    height: 30px;
}
.user--traverse-dropdown-button-miniature svg path{
    fill:rgba(12, 92, 164, 1);
}
.user--traverse-loading-wrapper svg {
    width: 100%;
    height: 100%;
}
.user--traverse-loading-wrapper svg path{
    fill:rgb(173, 173, 173);
}
.user--traverse-add-wrapper svg path{
    fill:#56cb98;
}
/* .exercise-builder-remove-icon svg path{
    fill:#FF9393;
} */
.user--class-exercise-answer-block-transparent { 
    width: 90%;
    height: max-content;
    padding: 30px;
    border-radius: 30px; 
    /* border: 2.5px solid #D9D9D9; */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    font-weight: 400;
 
}
.user--traverse-miniature-slide-number {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    border: 0;
    font-size: 25px;
    font-weight: 500;
    background-color: transparent;
    position: absolute;
    top: 10px;
    background-color: #ffffff;
}
.user--traverse-miniature-wrapper {
    width: 100%;
    overflow-x: scroll;
    height: max-content;
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: flex-start;
    align-items: start;
    position: relative;
}
.user--class-table-wrapper {
    width: max-content;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    position: relative;
}
.user--class-table-table {
    width: 70%;
    text-align: center;
    border-collapse: collapse;
    background: transparent;
    margin: auto;
}
.user--class-table-table td {
    border: 0px;
    padding: 10px;
}
.user--class-table-table-outline td {
    border: 0px;
    border: 1px solid #000 !important;
    padding: 10px;
}
.user--traverse-miniature-wrapper * {
    flex-shrink: 0;
    }
.user--traverse-miniature-mini-wrapper {
display: flex;
flex-direction: row;
gap: 15px;
width: max-content;
height: max-content;
position: relative;
align-items: center;
}

.user--traverse-miniature-mini {
    width: 20vw;
    height: 20vh;
    background-color: #EEEEEE;
    border-radius: 20px;
    position: relative;
    transition: all 0.2s linear;
    display: flex; 
   justify-content: center;
   align-items: center; 
} 
.user--traverse-slide-contents-preview {
    width: 90%;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    padding: 35px;
    margin-block: 20px;
    border-radius: 20px;
}
.user--traverse-box-shadow {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}
.svg-inside svg {
    width: 100%;
    height: 100%;
}
.svg-inside svg path {
    fill: #000000;
}
.user--traverse-slide-contents-preview * {
    pointer-events: none;
}
.user--traverse-slide-contents-edit * {
    pointer-events: all !important;
}
.user--traverse-miniature-mini-slide-name {
    width: 90%;
    height: max-content;
    font-size: 20px;
    font-weight: 550px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.user--traverse-miniature-mini:hover {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.user--traverse-miniature-main-wrap {
    width: max-content;
    height: max-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    transition: all 0.25s linear;
}
.user--traverse-miniature-main {
    width: 30vw;
    height: 20vh;
    border-radius: 15px;
    background-color: rgba(12, 92, 164, 0.26);
    position: relative;
    display: flex;
    justify-content: center;
    transition: all 0.25s linear;
    cursor: pointer;
}
.user--popup-body-additional {
    padding-inline: 2.5%;
    min-height: 100%;
}
.user--traverse-new-wrapper {
    width: 100%;
    height: max-content;
    /* margin-block-end: 30px; */
}
.user--traverse-miniature-buttons-wrap {
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: row;
    gap: 20px;
    overflow: scroll;
    justify-content: space-around;
    padding-block-start: 3px;
}
.constructor--addcharacter-wrapper {
    width: 100%;
    height: max-content;
    border-radius: 15px;
    background-color: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
    display: flex;
    gap: 20px;
    padding: 20px;
    flex-direction: column;
    position: relative;
}
.constructor--addcharacter-elem-wrapper {
    width: 100%;
    height: max-content;
    /* justify-content: center; */
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}
.constructor--addcharacter-input {
    font-size: 20px;
    padding-block: 5px;
    padding-inline: 10px;
    text-align: center;
    font-weight: 450;
    border: 0;
    border-bottom: 1.5px solid #0C5CA450;
}
.constructor--addcharacter-desc {
    width: 100%;
    height: max-content;
    font-size: 25px;
    font-weight: 450;
    color: #000000;
}
.upload-interface-char {
    width: 100%;
}
.constructor--addcharacter-inside-added-desc {
    font-size: 16px;
    color: rgb(145, 145, 145);
    font-weight: 400;
} 
.constructor--addcharacter-addbutton {
    width: 40px;
    height: 40px;
    cursor: pointer;
    background-color: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5rem;
}
.constructor--addcharacter-addbutton svg {
    width: 80%;
    height: 80%;
}
.constructor--addcharacter-inside-block {
    width: 30%;
    height: max-content;
    display: flex;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
    border-radius: 15px;
    padding: 20px;
    flex-direction: column;
    gap: 20px;
}
.user--traverse-miniature-control-button-wrap {
width: max-content;
height: max-content;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-direction: column;
cursor: pointer;
align-self: start;
}
.user--traverse-miniature-control-button-icon {
width: 45px;
height: 45px;
border-radius: 50px;
background-color: transparent;
border: 2px solid #0C5CA4;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.25s linear;
}
.user--traverse-miniature-control-delete-icon {
    width: 45px;
    height: 45px;
    border-radius: 50px;
    background-color: transparent;
    border: 2px solid #FF9393;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.25s linear;
    cursor: pointer; 
    position: absolute;
    top: 30px;
    right: 0;
    transform: translateX(-50%);
    }
.contributor--inline-control-input {
    width: max-content;
    height: 45px;
    font-size: 18px;
    color: #000000;
    border-radius: 50px;
    background-color: transparent;
    border: 2px solid #0C5CA4;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-inline: 15px;
    transition: all 0.25s linear;
    }
.user--table-manage-button-icon {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    background-color: transparent;
    /* border: 2px solid #0C5CA4; */
    display: flex; 
    justify-content: center;
    align-items: center;
    transition: all 0.25s linear;
    cursor: pointer;
    }
.user--table-manage-button-icon svg {
        width: 100%;
        height: 100%;
    }
    /* .user--table-manage-button-icon svg path {
      fill: #000000;
    } */
.user--traverse-miniature-control-button-icon svg, .user--traverse-miniature-control-delete-icon svg {
    width: 100%;
    height: 100%;
}

.contrib--descriptive-icon-block {
    width: 70px;
    height: 70px;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    }

.contrib--descriptive-icon-block svg {
    width: 100%;
    height: 100%;
    }
.contrib--descriptive-icon-block svg path {
    stroke:rgba(0, 0, 0, 0.2);
}
.user--class-table-container {
    width: 100%;
    display: grid;
   /* grid-gap: 20px; */
    margin-block: 20px;
    position: relative;
    border-collapse: collapse;
}

.user--traverse-miniature-slide-number svg {
    width: 100%;
    height: 100%;
}

.user--table-table-cell-input {
border: 0px;
width: 100%;
height: 100%;
padding: 10px;
text-align: center;
font-size: 20px;
font-weight: 450px;
font-family: inherit;
}


    .contributor--class-updown-block {
        width: max-content;
        height: max-content;
        display: flex;
        flex-direction: row;
        gap: 10px;
        position: absolute;
       top: 0;
       transform: translateY(-50%);
        left: -10px;
        /* transform: translateX(-50%); */
        background-color: #ffffff;
        /* backdrop-filter: blur(5px); */
         padding-block: 5px;
         padding-inline: 15px;
         border-radius: 10px; 
         box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
        }
        .user--svg-disabled {
            pointer-events: none;
        }
        .user--svg-disabled svg path {
           stroke: #EEEEEE;
        }
        .contributor--auth-panel {
            width: 90%;
            height: max-content;
            min-height: calc(100vh - 65px);
            margin: 0 auto;
            display: flex;
        }
        .contributor-auth-upper-wrap {display: flex; justify-content: space-between; align-items: center;}
        .contributor-auth-image {
            width: 100px;
            height: 100px;
            background-color: #ffffff;
            border: 1.5px solid #bbbbbb;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: end;

        }
        .contributor-auth-image img {
            width: 90%;
            height: 90%; 
            object-fit: cover;
            ;
        }
        .contributor-auth-upper-text {
            font-size: 25px;
            font-weight: 500;
            padding-inline-end: 30px;
            color: #000000;
        }
    .contributor--class-exercise-centered-panel {
        width: max-content;
        height: max-content;
        display: flex;
        flex-direction: row;
        gap: 10px;
        position: absolute;
        top: -20px;
       left: 50%;
       transform: translate(-50%);
        /* transform: translateX(-50%); */
        background-color: #ffffff;
        /* backdrop-filter: blur(5px); */
         padding-block: 5px;
         padding-inline: 15px;
         border-radius: 10px; 
         z-index: 2;
         box-shadow: #0C5CA450 0px 0px 2px 2px;
        }
.user--traverse-miniature-control-button-icon:hover {
    background-color: #0C5CA4;
}
.user--traverse-miniature-control-delete-icon:hover {
    background-color: #FF9393;
}
.user--traverse-miniature-control-button-icon:hover svg path {
   fill: #ffffff;
}
.user--traverse-miniature-control-delete-icon:hover svg path {
    fill: #ffffff;
 }
.user--traverse-miniature-control-button-icon svg {
    width: 50%;
    height: 50%;
    }
    .user--traverse-miniature-control-delete-icon svg {
        width: 50%;
        height: 50%;
        }
.user--traverse-miniature-control-button-icon svg path {
    fill: #000000;
    }
.user--traverse-miniature-control-delete-icon svg path {
        fill: #000000;
        }
    .user--traverse-miniature-control-button-text {
        font-size: 18px;
        font-weight: 400;
        font-family: inherit;
        text-align: center;
        transition: all 0.25s linear;
        color: #000000;
    }
    .user--traverse-miniature-control-button-text:hover {
        color: #0C5CA4;
    }
.user--exercise-builder-checkbox-wrapper {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.display-tips-hidden {
    display: none !important;
}
.user--class-exercise-answer-block-multiple { 
    flex-direction: column;
}
.user--traverse-section-distributor {
display: flex;
width: max-content;
height: max-content;
}
.user--traverse-section-distributor-section-library {
    padding-block: 15px;
    padding-inline: 20px;
    font-size: 18px;
    width: max-content;
    height: max-content;
    font-weight: 450;
    font-family: inherit;
    color: #000000;
    cursor: pointer;
    transition: all 0.2s linear;
}
/* .sd-section-1 {
    border-radius: 20px 0 0 20px;
    border-left: 2px solid #EEEEEE;
}
.sd-section-2 {
    border-radius: 0px;
}
.sd-section-3 {
    border-radius: 0px 20px 20px 0px;
    border-right: 2px solid #EEEEEE;
}
.sd-section-active {
    background-color: #0C5CA4;
    color: #ffffff !important;
} */
.sd-section-library-1 {
    border-radius: 10px;
}
.sd-section-library-2 {
    border-radius: 10px;
}
.sd-section-library-3 {
    border-radius: 10px;
}
.sd-section-library-active {
    box-shadow: #0C5CA450 0px 0px 2px 2px;
    background-color: #ffffff;
    color: #000000 !important;
}
.user--traverse-section-distributor-section:hover {
    box-shadow: #0C5CA450 0px 0px 2px 2px;
    background-color: #ffffff;
    color: #000000 !important;
}
#audiouploadelem {
    display: none;
}
.user--class-exercise-question {
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: center;
    align-items: center;
}
.user--class-exercise-question p {
    font-weight: 500;
    font-size: 30px;
    margin-inline-end: 15px;
}

.user--class-exercise-circle-true {
    border: 2.5px solid #87C2B1;
}
.user--class-exercise-circle-true:hover {
    background-color: #87C2B1;
}
.user--class-exercise-circle-false {
    border: 2.5px solid #FF9393;
}
.user--class-exercise-circle-false:hover {
    background-color: #FF9393;
}
user--class-exercise-circle-true-answered {
    background-color: #87C2B1 !important;
}
user--class-exercise-circle-false-answered {
    background-color: #FF9393 !important;
}
.user--class-exercise-buttons-wrap {
    width: max-content;
    height: max-content;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 40px;
}
.contributor--sticker-item-grid {
    display: grid;
  grid-template-columns: 1fr 1fr 1fr; 
  width: 90%;
  gap: 20px;
}
.contributor--sticker-item-wrapper {
    width: 100%;
    height: max-content;
    box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.contributor--sticker-item-wrapper input, .contributor--sticker-item-wrapper textarea {
    font-size: 20px;
    font-weight: 400;
    text-align: left;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #CCCCCC;
    color: #000000;
    margin-inline: 15px;
    width: calc(100% - 15px);
    height: max-content;
    padding: 10px;
   }
.contributor--sticker-item-wrapper-big-input {
    font-size: 30px !important;
    font-weight: 500 !important;
    text-align: center !important;
   }
.contributor--sticker-item-wrapper img {
    max-width: 100%;
    width: 80px;
    height: 80px;
   /* max-height: 100%; */
   object-fit: cover;
   border-radius: 15px;
   margin: 0 auto;
   margin-block-start: 15px;
}
.user--class-pagination-wrapper {
    width: max-content;
    height: max-content;
    display: flex;
    gap: 10px;
    font-size: 20px;
    font-weight: 500;
    justify-content: center;
    align-items: center;
    margin-block: 20px;
    padding: 10px;
    box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}
.user--class-pagination-wrapper-btn {
width: 18px;
cursor: pointer;
pointer-events: all;
height: 18px;
}
.user--class-pagination-wrapper-btn-active svg path {
  fill: #0C5CA4 !important;
    }
    .user--class-pagination-wrapper-btn-inactive {
        pointer-events: none !important;
    }
    .user--class-pagination-wrapper-btn-inactive svg path {
        fill: rgb(203, 203, 203) !important;
          }
.user--class-pagination-wrapper-btn svg {
    width: 100%;
    height: 100%; 
}
.user--class-pagination-number-container {
    width: max-content;
    height: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.user--class-pagination-number-container-number {
    font-size: 20px;
    font-weight: 500;
    color: #000000;
   /* padding-block-end: 5px; */
    border-bottom: 2px solid #000000;
    cursor: pointer;
    transition: all 0.15s linear;
}

.user--class-pagination-number-container-number-active, .user--class-pagination-number-container-number:hover {
    color: #0C5CA4;
    border-bottom: 2px solid #0C5CA4;
}
/*
.user--class-exercise-button {
  
   border: 0;

    border-radius: 10px;
    font-size: 20px;
    background-color: #CCDDEC;
    color: #0C5CA4;
    text-transform: uppercase;
    padding-block: 10px;
    padding-inline: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s linear;
}
 */

/* .user--class-exercise-button:hover {
            background-color: #0C5CA4;
        
    } */
    

.user--class-exercise-button-hint {
    color: #D9D9D9;
}
.user--class-exercise-button-hint:hover {
    color: #0C5CA4 !important;
    border: 2.5px solid #0C5CA4 !important;
    background-color: transparent !important;

}
.slide-in-fwd-center {
-webkit-animation: slide-in-fwd-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: slide-in-fwd-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-fwd-center {
    0% {
      -webkit-transform: translateZ(-1400px);
              transform: translateZ(-1400px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-fwd-center {
    0% {
      -webkit-transform: translateZ(-1400px);
              transform: translateZ(-1400px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
      opacity: 1;
    }
  }
.user--class-waiting-buttons {
    width: max-content;
    height: max-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    gap: 15px;
}
.user--class-waiting-button {
    border: 2.5px solid #0C5CA4;
    border-radius: 50px;
    font-size: 20px;
    color: #0C5CA4;
    text-transform: uppercase;
    padding-block: 10px;
    padding-inline: 10px;
    font-weight: 550;
    cursor: pointer;
    transition: all 0.15s linear;
}
.user--class-waiting-button:hover {
            background-color: #0C5CA4;
            color: rgba(255, 255, 255) !important;
    }
    .user--class-exercise-input {
            width: 100%;
            height: max-content;
            min-height: 80px;
            background-color: transparent;
            text-align: center;
            font-size: 25px;
            font-weight: 450;
            font-family: inherit;
            letter-spacing: -0.03em;
            resize: none;
    }
    .user--class-exercise-match-input {
            width: 100%;
            height: max-content;
            min-height: 80px;
            background-color: transparent;
            text-align: center;
            font-size: 18px;
            font-weight: 450;
            font-family: inherit;
            letter-spacing: -0.03em;
            resize: none;
            border-radius: 0 0 20px 20px;
            background-color: #f4f4f4;
            border: 0;
            padding-inline: 10px;
    }
  
    .user--exercise-multiple_sequence_hint {
            font-size: 22px;
            font-weight: 600;
            color: #D9D9D9;
            flex-wrap: wrap;
            padding: 10px;
            border-radius: 10px;
            border: 2.5px solid #D9D9D9;
    }
    .user--class-check-input {
            width: 100%;
            height: max-content;
            min-height: 50px;
            border: 0px; 
            background-color: transparent;
            text-align: center;
            font-size: 25px;
            font-weight: 450;
            font-family: inherit;
            letter-spacing: -0.03em;
    }
    .user--class-exercise-header-inside {
        display: flex; 
        gap: 25px;
        justify-content: center;
        align-items: center; 
        flex-wrap: wrap;
        width: 100%;
}
    .user--class-exercise-header-inside svg {
            width: 100px;
            height: 40px;
    }
    .jello-horizontal {
            -webkit-animation: jello-horizontal 5s ease-in-out infinite alternate both;
                    animation: jello-horizontal 5s ease-in-out infinite alternate both;
    }
    /* ----------------------------------------------
* Generated by Animista on 2023-2-18 18:0:22
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation jello-horizontal
* ----------------------------------------
*/
@-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);
    }
  }
  .user--class-exercise-ab-clicked {
    border: 2.5px solid #0C5CA4; 
  }
  .user--assoc-story-text {
    display: block;
    width: 100%;
  }
  .user--traverse-miniature-mini-wrapper-info {
    box-shadow: #0C5CA450 0px 0px 2px 2px;
    border-radius: 15px;
    margin-inline-start: 2px;
}
  .user--class-exercise-textarea {
    width: 100%;
    height: max-content;
    min-height: 150px;
    background-color: transparent;
    text-align: center;
    font-size: 25px;
    font-weight: 450;
    font-family: inherit;
    letter-spacing: -0.03em;
    resize: none;
    border: 2.5px solid #D9D9D9; 
    width: 90%;
    border-radius: 30px;
    padding: 15px;
    margin-block: 20px;
}
.user--popup-assoc-buttons-wrap {
    display: flex;
    flex-direction: row;
    gap: 50px;
}
.user--class-exercise-originalword {
    font-size: 30px;
    font-weight: 600;
    font-family: inherit;
    color: #ffffff;
    background-color: #D9D9D9;
    margin-block: 20px;
    padding-block: 15px;
    padding-inline: 25px;
    justify-content: center;
    align-items: center;
    width: max-content;
    height: max-content;
    border-radius: 20px;
}
.user--class-assoc-showAssoc {
    width: max-content;
    height: max-content;
    font-size: 20px;
    font-weight: 500;
    color: #0C5CA4;
    cursor: pointer;
    transition: all 0.25s;
}
.exercise-builder-option {
 display: flex; 
 flex-direction: column;
 gap: 10px;
 justify-content: center;
 align-items: center;
 width: 80%;
}
.exercise-builder-option input {
    width: 100%;
    height: max-content;
    font-size: 20px;
    font-weight: 450px;
}

.radio-hidden {
    display: none;
}

.radio-label {
    display: inline-block;
    height: 20px;
    width: 20px;
    border: 2.5px solid #D9D9D9;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}
.user--exercise-builder-image-preview {
    width: 200px;
}
.image-wrapper {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* .image-wrapper img {
    width: 170px;
    height: 170px;
} */
.user--gridblock-image-wrapper {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    object-fit: cover;
    border-radius: 50%;
}
.user--gridblock-image-wrapper img {
    width: 170px;
    height: 170px;
}
.flex-wrap-option {
    width: 90% !important;
    height: max-content;
    flex-wrap: wrap;
    gap: 25px;
    flex-direction: row !important;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 2px 2px;
    padding-block-end: 30px;

}
.user--exercise-item-wrapper-additional {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* max-width: 300px; */
    gap: 10px;
    height: max-content;
}
.user--class-items-grid-additional-description {
    font-size: 20px;
    font-weight: 500;
    font-family: inherit;
    text-align: center;
}
.user--class-example-block-character-input {
background-color: transparent;
border: 0px;
width: 100%;
height: max-content;
font-size: 50px;
overflow-x: auto;
font-weight: 550;
text-align: center;
}
.user--class-dialogue-block-dialogue-input {
    background-color: transparent; 
    border: 0px;
    width: 100%;
    height: max-content;
    font-size: 25px;
    overflow-x: auto;
    font-weight: 500;
    text-align: left;

    }
    .user--class-dialogue-block-character {
        display: inline-block;
    }
    
    .user--class-dialogue-block-pinyin {
        display: block;
     
    }
    .user--class-dialogue-char-wrap {
        width: max-content;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
        align-items: center;
}
.library--traverse-slide-buffer {
    width: 100%;
    height: max-content;
    padding: 20px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
    border-radius: 10px;
    align-items: center;
    justify-content: space-between;
    box-shadow: rgba(12, 92, 164, 0.25) 0px 0px 2px 2px;
}
.library--slide-buffer-right-add-selected {
    width: max-content;
    height: max-content;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(12, 92, 164, 0.25) 0px 0px 2px 2px;
    color: rgba(12, 92, 164, 0.5);
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
}
.library--slide-buffer-right-add-selected .icon {
    width: 30px;
    height: 30px;
}
.library--slide-buffer-right-add-selected .icon svg {
    width: 100%;
    height: 100%;
}
.library--traverse-slide-buffer-left, .library--traverse-slide-buffer-right {
    width: max-content;
    height: max-content;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.library--traverse-slide-buffer-left-element {
    width: max-content;
    height: max-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0px;
    flex-wrap: wrap;
}
.library--traverse-slide-buffer-left-element-inner {
    width: max-content;
    height: max-content;
    color: #85add1;
    font-size: 40px;
    font-weight: 900;
}
.library--traverse-slide-buffer-left-element-inner-delete {
    width: 20px;
    height: 20px;
    cursor: pointer;

}
.library--slide-buffer-right-select-course-wrapper {
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: rgba(12, 92, 164, 0.25) 0px 0px 2px 2px;
}
.library--slide-buffer-right-select-course-wrapper span {
   color: #000000;
   font-size: 20px;
   font-weight: 450;
}
.library--copy-success {
    width: max-content;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-block: 20px;
    color:#67b562; 
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    margin-block: 20px;
    font-weight: 400;
}
.library--copy-success-icon {
    width: 50px;
    height: 50px;
}
.library--copy-success-icon svg {
    width: 100%;
    height: 100%;
}


.library--traverse-slide-buffer-left-element-inner-delete svg {
    width: 100%;
    height: 100%
}
.user--class-dialogue-block-character {
    font-size: 30px;
    font-weight: 550;
}
.user--class-dialogue-block-character-small {
    font-size: 18px !important;
}
.user--class-dialogue-block-pinyin {
    font-size: 18px;
    font-weight: 550;
    color: #797777;
}
.user--class-dialogue-block-pinyin-small {
    font-size: 14px !important;
}
.user--class-dialogue-line-wrap-big {
width: 100%;
height: max-content;
display: flex;
gap: 20px;
align-items: center;
}
.user--class-dialogue-line-separator {
    width: 35px;
    height: 35px;
}
.user--class-dialogue-line-separator svg {
    fill: #EEEEEE;
    width: 100%;
    height: 100%;

    }
    .user--class-dialogue-line-wrap {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        margin-bottom: 10px;
        width: 100%;
    }
.constructor--video-hint-wrap {
    width: 90%;
    height: max-content;
    padding-inline: 25px;
   text-align: left;
    border-inline-start: 4px solid #D9D9D9;
    border-inline-end: 4px solid #D9D9D9;
}
.user--class-exercise-buttons-wrap {
    width: max-content;
    height: max-content;
    display: flex;
    flex-direction: row;
    gap: 30px;
    padding-inline: 30px;
    border-radius: 10px;
}
.constructor-main-delimeter-short {
    width: 100px;
    height: 5px;
    background-color: #e4e4e4;
    border-radius: 5rem;
    margin-block: 30px;
}
.constructor--video-header-main-info {
    width: max-content;
    height: max-content;
    font-size: 30px;
    font-weight: 500;
}
.user--class-dialogue-block-pinyin-input { 
    background-color: transparent;
    border: 0px;
    width: 100%;
    height: max-content;
    font-size: 20px;
    overflow-x: auto;
    color: #797777;
    font-weight: 550px;
    padding-inline-start: 50px;
}

.image-loader {
    border-radius: 10px;
    width: 120px;
    height: 120px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.7;
    background: linear-gradient(45deg, #e9e9e9 0%, rgb(255, 255, 255) 100%);
    background-size: 200% 200%;
    animation: shimmer 3.5s infinite, pulsate 7s linear infinite;
}
.image-loader-static {
    border-radius: 100%;
    width: 120px;
    height: 120px;
    opacity: 0.7;
    background: linear-gradient(45deg, #e9e9e9 0%, rgb(255, 255, 255) 100%);
    background-size: 200% 200%;
    animation: shimmer 3.5s infinite;
}
.video-loader {
    border-radius: 5%;
    width: 150px;
    height: 120px;
    opacity: 0.7;
    background: linear-gradient(45deg, #e9e9e9 0%, rgb(255, 255, 255) 100%);
    background-size: 200% 200%;
    animation: shimmer 3.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 100% 0%; }
    50% { background-position: 0 100%; }
    100% { background-position: 100% 0%; }
} 

@keyframes pulsate {
        0% { transform: translate(-50%, -50%) scale(1); }
        50% { transform: translate(-50%, -50%) scale(1.1); }
        100% { transform: translate(-50%, -50%) scale(1); }
    }

.user--exercise-item-wrapper img {
    margin-block-end: 10px;
}

.radio-label::after {
    content: "";
    display: block;
    height: 20px;
    width: 20px;
    background-color: #87C2B1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 0;
}

.radio-hidden:checked + .radio-label::after {
    opacity: 1;
}
.exercise-builder-add-icon {
    /* width: 35px !important;
    height: 35px !important; */
    display: flex;
    justify-content: center;
    align-items: center; 
}

.exercise-builder-whitespace-icon {
    width: 130px !important;
    height: 40px !important;
    padding-inline: 20px !important;
    border: 1.5px solid #E9E9E9 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}
.exercise-builder-whitespace-icon svg  {
    width: 100%;
    height: 100%;
}
.exercise-builder-whitespace-icon:hover {
    border: 1.5px solid #0C5CA4 !important;
    background-color: transparent !important;
}

/* imported from classroom */


.slide-in-blurred-top {
	-webkit-animation: slide-in-blurred-top 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
	        animation: slide-in-blurred-top 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2023-7-13 12:30:19
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-blurred-top
 * ----------------------------------------
 */
 @-webkit-keyframes slide-in-blurred-top {
    0% {
      -webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
              transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
      -webkit-transform-origin: 50% 0%;
              transform-origin: 50% 0%;
      -webkit-filter: blur(40px);
              filter: blur(40px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0) scaleY(1) scaleX(1);
              transform: translateY(0) scaleY(1) scaleX(1);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      -webkit-filter: blur(0);
              filter: blur(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-blurred-top {
    0% {
      -webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
              transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
      -webkit-transform-origin: 50% 0%;
              transform-origin: 50% 0%;
      -webkit-filter: blur(40px);
              filter: blur(40px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0) scaleY(1) scaleX(1);
              transform: translateY(0) scaleY(1) scaleX(1);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      -webkit-filter: blur(0);
              filter: blur(0);
      opacity: 1;
    }
  }

  .slide-out-blurred-top {
	-webkit-animation: slide-out-blurred-top 0.45s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
	        animation: slide-out-blurred-top 0.45s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2023-7-13 12:30:43
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-out-blurred-top
 * ----------------------------------------
 */
 @-webkit-keyframes slide-out-blurred-top {
    0% {
      -webkit-transform: translateY(0) scaleY(1) scaleX(1);
              transform: translateY(0) scaleY(1) scaleX(1);
      -webkit-transform-origin: 50% 0%;
              transform-origin: 50% 0%;
      -webkit-filter: blur(0);
              filter: blur(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateY(-1000px) scaleY(2) scaleX(0.2);
              transform: translateY(-1000px) scaleY(2) scaleX(0.2);
      -webkit-transform-origin: 50% 0%;
              transform-origin: 50% 0%;
      -webkit-filter: blur(40px);
              filter: blur(40px);
      opacity: 0;
    }
  }
  @keyframes slide-out-blurred-top {
    0% {
      -webkit-transform: translateY(0) scaleY(1) scaleX(1);
              transform: translateY(0) scaleY(1) scaleX(1);
      -webkit-transform-origin: 50% 0%;
              transform-origin: 50% 0%;
      -webkit-filter: blur(0);
              filter: blur(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateY(-1000px) scaleY(2) scaleX(0.2);
              transform: translateY(-1000px) scaleY(2) scaleX(0.2);
      -webkit-transform-origin: 50% 0%;
              transform-origin: 50% 0%;
      -webkit-filter: blur(40px);
              filter: blur(40px);
      opacity: 0;
    }
  }
  

      .user--popup-wrap, .user--expand-full {
        z-index: 200;
        /* width: calc(100vw - (58px * 2));
    height: 90vh; */
    width: 100vw;
    height: 100vh;
         overflow-x: hidden;
         overflow-y: scroll;
         background: rgba(255, 255, 255, 0.85);
     -ms-overflow-style: none; 
     scrollbar-width: none;  
     backdrop-filter: blur(12.5px);
     -webkit-backdrop-filter: blur(12.5px);
     /* border-radius: 20px; */
     position: relative;
     text-align: center;
     margin: 0 auto;
     position: fixed;
     /* top: 2.5vh;
     left: 50px; */
    justify-self: center;
    align-self: center;
     border-radius: 10px;
     box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
     }
     .user--noblur-wrapper {
        z-index: 200;
    width: 100vw;
    height: 100vh;
         overflow-x: hidden;
         overflow-y: scroll;
     -ms-overflow-style: none; 
     scrollbar-width: none;  
     /* border-radius: 20px; */
     position: relative;
     text-align: center;
     margin: 0 auto;
     position: fixed;
     /* top: 2.5vh;
     left: 50px; */
    justify-self: center;
    align-self: center;
     border-radius: 10px;
     }
     .user—popup-achievement-wrap-2 {
        width: 100%;
    height: 100%;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: start;
    align-items: center;
    scrollbar-width: none;
    min-height: 100vh;
    }
    .user-popup-achievement-wrap::-webkit-scrollbar{
        display: none;
      }
    .user--exercise-block-tablelist-wrapper {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 25px;
        justify-content: center;
        align-items: center;
    }
    .has-tooltip:hover .custom-tooltip {
        visibility: visible;
        opacity: 1;
      }
      
      .custom-tooltip {
        visibility: hidden;
        opacity: 0;
        background-color: black;
        color: white;
        text-align: center;
        padding: 5px;
        border-radius: 4px;
        position: absolute;
        top: 0px;
        left: 50%;
        transform: translate(-50%, -100%);
        z-index: 1;
        transition: opacity 0.3s;
      }
      
      
      
      
      
      
      
    .block-truefalse-inside {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 25px;
        justify-content: center;
        align-items: center;
        padding-block: 10px;
        border-inline: 1.5px solid #D9D9D9;
    }
    .user--traverse-button-selected {
        background-color: #0C5CA4 !important;
    }
    .user--traverse-button-selected svg path {
        fill: #ffffff !important;
    }
    .user--class-name {
        margin-block-start: 15px !important;
        margin-block-end: 27px !important;
        font-size: 35px;
        font-weight: 500;
}
     .user--popup-wrap::-webkit-scrollbar { 
         display: none;
     }
   
        .user--popup-close-button {
            cursor: pointer; 
            position: absolute;
            top: 15px;
            right: 15px;
           /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            text-transform: uppercase;
            background: transparent; 
            font-weight: 600;
            color: #E08893;
            border: 0;
            border-bottom: 3px solid #FF939350;
            padding-block: 5px;
            padding-inline: 15px;
            width: max-content;
            height: max-content;
            margin: 0 auto;
            transition: 0.25s all ease-in-out;
            cursor: pointer;
        }
        
        .user--popup-close-button:hover {
            background: #FF9393;
            border-radius: 10px;
            color: #ffffff;
        }
        
       
        .contributor--video-progress-bar {
            width: max-content;
            height: max-content;
            padding-inline: 20px;
            color: #CBCBCB;
        }
         
        .user--class-submit-fileinput-wrapper {
            display: flex;
            flex-direction: row;
            gap: 10px;
            justify-content: center;
            align-items: center;
    }
    .user--class-submit-fileinput-wrapper span {
            font-size: 16px;
            color: #0C5CA4;
            transition: all 0.2s linear;
            cursor: pointer;
    }
    .user--class-submit-fileinput-wrapper span:hover {
            color: rgba(135,194,177, 1);
    }
    
    .user--class-submit-fileinput-icon {
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.2s linear;
    }
    .user--class-submit-fileinput-icon svg {
            width: 100%;
            height: 100%;
    }
    .user--class-submit-fileinput-icon svg:hover path {
            fill: rgba(135,194,177, 1);
    }
    .constructor--video-interface-wrapper {
        width: 100%;
        height: max-content;
        justify-content: center;
        align-items: center;
        display: flex;
        gap: 15px;
        flex-direction: column;
    }
     .user--popup-wrap h4 {
         font-weight: 800;
         font-size: 45px;
         letter-spacing: -0.01em;
         color: #2E2E2E;
         margin-block-end: 30px;
     }
     .user--achievement-wrap {
         display: flex;
         width: 100%;
         margin-block: 20px;
         flex-direction: row;
         /* gap: 50px; */
         z-index: 500;
     }
     .user--achievement-block {
         background: rgba(217, 217, 217, 0.3);
     border: 2.5px solid #D9D9D9;
     border-radius: 30px;
     width: 50%;
     height: max-content;
     padding: 20px;
     display: flex;
     align-items: center; 
     gap: 30px;
     margin-inline: 30px;
     }
     .user--achievement-block-circle {
         width: 100px;
         min-width: 100px;
         height: 100px;
         background: #4DA6D9;
         /* border: 2.5px solid #000000; */
     position: relative;
     border-radius: 5rem;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     }
     .user--achievement-block-circle span {
         font-weight: 400;
         font-size: 12px;
         /* text-align: center; */
         color: #FFFFFF;
     }
     .user--achievement-block-circle-add {
         position: absolute;
         right: -5%;
         bottom: -10%;
         width: 40px;
         height: 40px;
         display: flex;
         align-items: center;
         justify-content: center;
         background: rgba(0, 0, 0, 0.7);
         font-size: 30px;
         font-weight: 900;
         color: #ffffff;
         border-radius: 5rem;
     }

     .contrib--conf-div-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-block-start: 20px;
        padding-inline: 25px;
        padding-block: 15px;
        background-color: transparent;
        border-radius: 10px;
        gap: 30px;
        border: none;
        background-color: #ffffff;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
    }
    
    .contrib--conf-div-circle-done {
        width: 40px;
        height: 40px;
       border-radius: 50%;
        background: #90E1B5;
        display: flex;
        justify-content: center;
        align-items: center;
        
    }
    .contrib--conf-div-circle-edit {
        width: 40px;
        height: 40px;
       border-radius: 50%;
        background: #EECE5D;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    .contrib--conf-div-wrapper-secondary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 23px;
        font-weight: 450;
        font-family: inherit;
        cursor: pointer !important; 
    }
    .contrib--conf-div-wrapper-secondary svg {
        width: 50%;
        height: 50%;
    }
  
    


    /* wrap inside render

    /* Class Inside Module */ 
#video-player {
    width: 50%;
    height: 50%;
}
#listening-player {
    width: 40%;
    height: 40%;
}
.user-class-player-wrap {
    width: 60%;
    height: max-content;
    padding: 30px;
    border-radius: 30px;
    /* border: 2.5px solid #C20B03; */
    /* background-color: rgba(194, 11, 3, 0.05); */
    font-size: 24px;
    font-weight: 350;
    text-align: left;
    font-family: inherit;
}
.contrib--exercise-builder-traverse-wrapper {
    width: max-content;
    height: max-content;
    background-color: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
    border-radius: 10px;
    padding: 10px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contrib--exercise-builder-traverse-button {
    display: flex;
    width: max-content;
    height: max-content;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.contrib--exercise-builder-traverse-button svg {
    width: 40px;
    height: 40px;
}
.contrib--exercise-builder-traverse-button-descriptor {
    color: #0C5CA4;
    font-size: 20px;
    font-family: inherit;
    font-weight: 450px;
}
.user--traverse-header {
    width: max-content;
    height: max-content;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    align-self: baseline;
    margin-block: 30px;
}
.user--traverse-inside-icon {
    width: 100px;
    height: max-content;
}
.user--traverse-inside-icon svg {
    width: 100%;
    height: 100%;
}
.user--traverse-inside-icon svg path {
    fill: #DEDEDE;
}
.user--traverse-dropdown-wrap {
    width: max-content;
    height: max-content;
    display: flex;
    align-self: baseline;
    justify-content: center;
    align-items: center;
    transition: 0.25s all ease-in-out;
}

.user--traverse-dropdown-button {
    border-radius: 50px;
    border: 3px solid #DEDEDE;
    font-size: 20px;
    font-weight: 450;
    font-family: inherit;
    padding-inline: 25px;
    padding-block: 15px;
    background-color: transparent;
    transition: 0.25s all ease-in-out;
}

.user--traverse-dropdown {
    position: relative;
    display: inline-block;
    transition: 0.25s all ease-in-out;
}

.user--traverse-dropdown-content {
    display: none;
    z-index: 1;
    transition: 0.25s all ease-in-out;
}
   
.user--traverse-dropdown-content-initial {
display: flex !important;
background-color: transparent;
z-index: 1;
padding: 20px !important;
gap: 20px !important;
transition: 0.25s all ease-in-out;
width: 90vw;
align-content: flex-start;
justify-content: flex-start; 
flex-wrap: wrap;
}
.user--traverse-header-wrapper {
    width: max-content;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
    align-items: flex-start;
}
.user--traverse-dropdown-content .user--traverse-class-button {
    color: black;
    padding-block: 20px;
    text-decoration: none;
    display: block;
    background-color: transparent;
    margin: 0 auto;
    font-size: 20px;
    font-weight: 550;
    transition: 0.25s all ease-in-out;
    white-space: nowrap;
    background-color: #ffffff;
   /* backdrop-filter: blur(5px); */
    padding-block: 15px;
    padding-inline: 40px;
    border-radius: 10px; 
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    margin-block-end: 5px;
} 

.user--traverse-dropdown-content .user--traverse-class-button:hover {
    color: #0C5CA4;
    transition: 0.25s all ease-in-out;

}


.user--traverse-dropdown-transformed:hover .user--traverse-dropdown-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: 30px;
    border-radius: 10px;
    gap: 15px;
    background-color: #ffffff;
    box-shadow: 2px -2px 100px 33px rgba(221, 221, 221, 1), rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    transition: 0.25s all ease-in-out;
}

.user--traverse-dropdown:hover .user--traverse-dropdown-button {
    border: 3px solid #0C5CA4;
    transition: 0.25s all ease-in-out;
}

.user--traverse-inside-title {
    font-size: 40px !important;
    font-weight: 550 !important;
    font-family: inherit;
    color: #000000;
    margin-block-end: 0px !important;
}
.user--class-achievements-preview-wrap {
    width: 90%;
    height: max-content;
    padding-block: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: 30px
}
.user--class-achievements-preview-wrap img {
    width: 500px;
    height: 250px;
    border-radius: 30px;
    object-fit: cover;
}
.user--class-achievements-preview-descriptive { 
    width: 500px;
    height: max-content;
    min-height: 250px;
    padding: 30px;
    border-radius: 30px;
    border: 2.5px solid #C20B03;
    background-color: rgba(194, 11, 3, 0.05);
    font-size: 24px;
    font-weight: 400;
    text-align: left;
    font-family: inherit;
}
.user--class-notes-no-notes {
    display: flex;
    width: 100%;
    height: max-content;
    min-height: 150px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}
.user--class-notes-no-notes span {
    font-size: 20px;
    font-weight: 500; 
    color: #a7a7a7;
}
.user--class-notes-no-notes-icon {
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.user--class-notes-no-notes-icon svg {
    width: 100%;
    height: 100%;
}
.user--class-notes-no-notes-icon svg path {
    fill: #a7a7a7;
}
.user--class-timer {
    position: absolute;
    top: 2%;
    left: 1%;
    font-size: 12px;
    text-transform: uppercase;
    background: transparent;
    font-weight: 500;
    color: #ACACAC;
    border: 2.5px solid #D9D9D9;
    padding-block: 5px;
    padding-inline: 15px;
    border-radius: 30px;
    width: max-content;
    height: max-content;
    overflow: hidden;
     white-space: nowrap;
    transition: width 1s ease;
}
.user--class-questions-wrap {
    width: 90%;
    height: max-content;
    padding: 30px;
    border-radius: 30px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    align-items: center;
    margin-block: 20px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.user--class-questions-block-wrapper {
    width: 90%;
    height: max-content;
    margin: 0 auto;
    transition: all 0.3s ease;
}

.user--class-questions-question {
    display: flex;
    width: 100%;
    height: max-content;
    font-size: 24px;
    font-weight: 400;
    text-align: left;
            font-family: inherit;
    align-items: flex-start;
    gap: 20px;
            border-radius: 10px;
    padding: 15px;
    background-color: #fafafa;
    border-left: 4px solid;
    transition: all 0.2s ease;
}

.user--class-questions-question:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
  
.user--class-questions-question-num {
    font-size: 32px;
    font-weight: 800;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    color: white;
    transition: all 0.2s ease;
}

.user--slide-lottie-wrapper {
    border: 2px solid #0C5CA450;
    width: 100%;
    max-width: 600px;
    padding: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px; 
        border-radius: 20px;
        margin: 0 auto;
        transition: all 0.3s ease;
    }

.user--slide-lottie-wrapper:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }

.user--class-exercise-button-descriptive {
        width: 100%;
        height: max-content;
        padding-block: 15px;
        font-size: 18px;
        font-weight: 400;
        display: flex;
        justify-content: center;
        align-items: center;
    color: #333;
    line-height: 1.5;
    text-align: center;
    }

.exercise-builder-add-icon, .exercise-builder-remove-icon {
        cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exercise-builder-add-icon:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.exercise-builder-remove-icon:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}