* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased; text-decoration: none;
 }
 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;
  }
  *, input, textarea, button, select {
        font-family: inherit;
      }
  @font-face {
    font-family: "Inter";
    src: url("./fonts/inter-universal.ttf");
    font-weight: 1 999;
  }
  @font-face {
    font-family: "Nunito";
    src: url("./fonts/nunito-universal.ttf");
    font-weight: 1 999;
  }
  @font-face {
    font-family: "Lexend";
    src: url("./fonts/lexend-universal.ttf");
    font-weight: 1 999;
  }
  @font-face {
    font-family: "Rubik";
    src: url("./fonts/rubik-universal.ttf");
    font-weight: 1 999;
  }
  @keyframes error-animation {
    0% { transform: translateX(0) }
    25% { transform: translateX(7px) }
    50% { transform: translateX(-7px) }
    75% { transform: translateX(7px) }
    100% { transform: translateX(0) }
   }


   /* playerjs -- style overwriting */
   .video-js.vjs-fluid, .video-js.vjs-16-9, .video-js.vjs-4-3, .video-js.vjs-9-16, .video-js.vjs-1-1 {
        width: 95%;
        max-width: 95%;
   }
   .video-js {
        background-color: #000000;
        border-radius: 30px;
        z-index: 20;
   }
   .video-js .vjs-tech {
        background-color: #000000;
        border-radius: 30px;
   }
   .video-js .vjs-control-bar {
        background-color: #000000;
        border-radius: 30px;
        background-color: transparent;
        bottom: 3%;
   }
   .video-js .vjs-progress-holder {
        height: 1em;
   }
   .video-js .vjs-progress-holder .vjs-play-progress, .video-js .vjs-progress-holder .vjs-load-progress, .video-js .vjs-progress-holder .vjs-load-progress div {
        border-radius: 50px;
   }
   .video-js .vjs-load-progress {
        background: none;
   }
   .video-js .vjs-slider {
        background: none;
   }
   .video-js .vjs-load-progress div {
        background: rgba(46, 46, 46, 0.75);
   }
   .video-js .vjs-progress-control .vjs-mouse-display {
        background-color: #fff;
   }
   .video-js .vjs-play-progress:before {
        font-size: 3em;
   }
   .vjs-play-progress .vjs-slider-bar {
        border-radius: 50px;
   }

   /* playerjs -- style overwriting */
  .user--login-wrap-bcg {
    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;
    background-color: #ffffff;
  }
  .user--linkblock-reward-width {
    width: 50%;
  }
.nav--big {
    padding-inline: 2.5%;
/* padding-block: 20px; */
display: flex;
flex-direction: row;
width: 100%;
height: max-content;
justify-content: space-between;
align-items: center;
}
.flex-direction-row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
        align-items: center;
        width: 95%;
    }
    .flex-direction-row .user--class-exercise-answer-select-wrap {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 200px; 
      }
    .flex-direction-column {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 20px;
    }
.nav--big-intro {
        justify-content: center !important;
         /* Set a fallback background color */
    background-color: rgba(255, 255, 255, 0.5); /* semi-transparent white */

    /* Blur effect */
    /* Standard syntax */
    backdrop-filter: blur(10px);
    /* Prefix for Safari 9+ */
    -webkit-backdrop-filter: blur(10px);
}
.nav--logo-big {
    width: max-content;
    height: 30px;
}
.nav--logo-small {
    height: 30px;
    margin-block: 10px;
}
.nav--logo-small-intro {
        height: 30px;
    }
.login--auth-wrap {
    padding-inline: 50px;
    /* padding-block: 20px; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    min-height: 80vh;
    background-image: url('/styles/clsrm_upd_bcg.svg');
   /*  background-size: cover;
   legacy -- cover 
   */ 
   background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    flex-direction: column;
}
.login--auth-left {
    flex: 1;
}
.login--auth-right {
    flex: 1;
}
.login--auth-right h1 {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin-block-end: 20px;
}
.login--auth-form {
width: 100%;
height: max-content;
display: flex;
flex-direction: column;
gap: 15px;
align-items: center;
justify-content: center;
}

.login--auth-input {
    height: 65px;
    background-color: #ffffff;
    width: 80%;
    border: 2px solid #0C5CA450;
    text-align: center;
    color: #0C5CA4;
    font-family: 'Rubik', 'Inter', sans-serif;
    border-radius: 50px;
    padding: 20px;
    font-size: 20px;
}
@keyframes gradientAnimation {
    0% {
      background-position: 0% 50%;
    }
    25% {
      background-position: 50% 100%;
    }
    50% {
      background-position: 100% 50%;
    }
    75% {
      background-position: 50% 0%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
.login--auth-button {
        background-color: transparent;
        font-size: 23px;
        font-weight: 450;
        font-family: inherit;
        padding-inline: 20px;
        color: #D9D9D9;
        box-shadow: 0px 0px 3px 1px #D9D9D9;
        border-radius: 10px;
        width: max-content;
        padding-block: 10px;
        margin: 0 auto;
        transition: 0.25s all ease-in-out;
        cursor: pointer;
        margin-block: 0px;
        pointer-events: none;

}
.user--exercise-questions-wrap {
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
gap: 20px;
}

.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: 15px;
        padding-inline: 25px;
        justify-content: center;
        align-items: center;
        background: #ffffff;
        box-shadow: 0px 0px 3px 1px rgba(12, 92, 164, 0.25);
    border-radius: 5rem;
    justify-content: center;
    align-items: center;
}

.footer--main-wrap-block-svg {
        width: max-content;
        height: max-content;
        display: flex;
        flex-direction: row;
        gap: 10px;
}
.footer--main-wrap-block-svg-element {
width: 22px;
height: 22px;
cursor: pointer
}
.footer--main-wrap-block-svg-element svg {
        width: 100%;
        height: 100%;
}
.footer--main-wrap-block-svg-element svg path {
        fill: #484848
}
.footer--main-wrap-block-svg-element:hover svg path {
        fill: #1355A3;
}
.footer--main-links, .footer--main-links-clickable {
    font-size: 16px;
    font-weight: 450;
    color: #484848;
    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: 50px;
 /*border: 2px solid rgba(12, 92, 164, 0.50);*/
 /* border: 2px solid #0C5CA450; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-block: 30px;
    padding-inline: 0px;
}
.plus-icon {
        width: 30px;
        height: 30px;
}
.nav--status-bar-settings {
        width: 30px;
        height: 35px;
        cursor: pointer;
        transition: all 0.15s linear;
        display: none;
}
.nav--status-bar-settings:hover svg path {
        fill: rgba(12, 92, 164, 1);
}
.nav--status-bar-settings svg {
        width: 100%;
        height: 100%;
}
.user--class-generic-button-3-inactive {
        pointer-events: none;
        background-color: #bababa !important;
        color: #ffffff !important;
}
.nav--status-bar-info {
/* flex: 2; */
display: flex;
flex-direction: column;
display: none;
}
.nav--status-bar-name {
    text-align: center;
    font-weight: 800;
font-size: 22px;
letter-spacing: -0.02em;
 }
 .nav--status-bar-course {
    text-align: center;
    font-weight: 500;
    color: #bababa;
    font-size: 15px;
letter-spacing: -0.03em;
align-self: flex-start;
 }

 .nav--status-bar-image {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid transparent;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transform: translateZ(0); /* Force hardware acceleration */
      }
      
      .nav--status-bar-image::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.5), rgba(16, 185, 129, 0.5));
        opacity: 0;
        border-radius: 50%;
        transition: opacity 0.3s ease;
        z-index: 1;
      }
      
      .nav--status-bar-image:hover {
       
        transform: scale(1.08);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.25);
      }
      
      .nav--status-bar-image:hover::before {
        opacity: 0.3;
      }
      
      
      .nav--status-bar-image:active {
        transform: scale(0.96);
        transition: all 0.1s ease;
      }
      
    
      @keyframes pulse-border {
        0% {
          box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.6);
        }
        70% {
          box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);
        }
        100% {
          box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
        }
      }
      
      /* Add this class conditionally when there are new notifications */
      .nav--status-bar-image.has-notifications {
        animation: pulse-border 2s infinite;
      }
.nav--status-bar-image img {
        width: 100%;
        height: 100%;
        border-radius: 5rem;
        object-fit: cover;
}
rb {
        border-radius: 3px;
        padding-inline: 5px;
        padding-block: 3px;
        cursor: pointer;
}
ruby {
        display: inline-table !important;
}
.user--class-char-set {
width: 100%;
height: max-content;
padding: 20px;
border-radius: 15px;
background-color: #ffffff;
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
gap: 30px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.user--intro-char-set { 
        margin-block: 30px;
}

.user--popup-indicator-empty-block {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        height: max-content;
        padding: 10px;
        font-size: 25px;
        color: #5c5c5c;
        border: 0;
        background-color: white;
        font-weight: 350;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        flex-direction: column;
        
}
.element-display-flex-center {
        display: flex;
        justify-content: center;
        align-items: center;
}
.user--popup-indicator-empty-block .icon {
        width: 60px;
        height: 60px;
}
.user--popup-indicator-empty-block .icon svg {
        width: 100%;
        height: 100%;
}
.user--popup-indicator-empty-block .icon svg g path {
        fill: #F9F9F9;
}
.test--space {
    width: 100%;
    height: 100vh;
}

@-webkit-keyframes color-change-2x {
        0% {
            background: rgba(12, 92, 164, 1);
        }
        25% {
            background: rgba(20, 112, 184, 1);
        }
        50% {
            background: rgba(28, 132, 204, 1);
        }
        75% {
            background: rgba(20, 112, 184, 1);
        }
        100% {
            background: rgba(12, 92, 164, 0.1);
        }
    }
    @keyframes color-change-2x {
        0% {
            background: rgba(12, 92, 164, 1);
        }
        25% {
            background: rgba(20, 112, 184, 1);
        }
        50% {
            background: rgba(28, 132, 204, 1);
        }
        75% {
            background: rgba(20, 112, 184, 1);
        }
        100% {
            background: rgba(70, 141, 202, 0.399);
        }
    }
    
      @-webkit-keyframes color-change-2x-s {
        0% {
          background: rgb(103, 188, 137);
        }
        100% {
          background: rgb(103, 188, 137, 0.1);
        }
      }
      @keyframes color-change-2x-s {
        0% {
                background: rgb(103, 188, 137);
              }
              100% {
                background: rgb(103, 188, 137, 0.1);
              }
        }
      
      @-webkit-keyframes color-change-2x-e {
        0% {
          background: rgb(238, 116, 97);
        }
        100% {
                background: rgb(238, 116, 97, 0.1);
        }
      }
      @keyframes color-change-2x-e {
        0% {
                background: rgb(238, 116, 97);
              }
              100% {
                      background: rgb(238, 116, 97, 0.1);
              }
      }
      
      
    
    .liquid-auth {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        position: fixed;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .liquid-auth.processing,
    .liquid-auth.success,
    .liquid-auth.failure {
        background-size: 200% 200%;
    }
    
    .liquid-auth.processing {
        -webkit-animation: color-change-2x 2s linear infinite alternate both;
        animation: color-change-2x 2s linear infinite alternate both;
    }
    .liquid-auth.success {
        -webkit-animation: color-change-2x-s 1s linear infinite alternate both;
        animation: color-change-2x-s 1s linear infinite alternate both;
    }
    
    .liquid-auth.failure {
        -webkit-animation: color-change-2x-e 1s linear infinite alternate both;
        animation: color-change-2x-e 1s linear infinite alternate both;
    }
    
/* Join */
.user--join-main-wrap {
        width: 100%;
        height: max-content;
        background-color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 40px;
        flex-direction: column;
}
.user--join-main-button {
        cursor: pointer;
        background: #1355A3;
        font-family: 'Rubik', sans-serif;
        border-radius: 10px;
        width: max-content;
        height: max-content;
        color: #ffffff;
        font-size: 20px;
        padding-block: 10px;
        padding-inline: 20px;
        font-weight: 500;
}
.user--join-main-animation {
        width: 300px;
        height: 300px;
        margin-block-start: 40px;
        margin: 0 auto;
}
.user--join-main-text {
        text-align: center;
        font-size: 25px;
        font-weight: 600;
}
.user--join-main-form-wrap {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 15px;
        justify-content: center;
        align-items: center;
        margin-block: 40px;
        padding: 40px;
        border-radius: 40px;
        border: 3px solid #0C5CA450;        
}
/* .user--join-main-form-wrap-ns {
        width: 100%;
        height: max-content;
        display: flex;
        gap: 20px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-block: 40px;
        padding-block: 15px;
} */
.user--join-main-form-wrap input {
        width: 600px;
        height: max-content;
        background-color: #f9f9f9;
        border: 3px solid #a6a6a650;
        color: #1355A3;
        font-family: 'Rubik', 'Inter', sans-serif;
        border-radius: 50px;
        padding-block: 20px;
        padding-inline: 30px;
        font-size: 23px;
        font-weight: 500;
}
.user--join-main-removable-wrapper {
        width: 80%;
        height: max-content;
        margin: 0 auto;
        border-radius: 15px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: flex-start;
}
.user--join-main-removable-textual-big {
        width: 100%;
        font-size: 55px;
        font-weight: 700;
}
.user--join-main-removable-textual-tiny {
        width: 100%;
        font-size: 22px;
        color: #3F3F3F;
        font-weight: 450;
        margin-inline-start: 15px;
}
.removable {
        width: 100%;
        height: max-content;
}
/* Classroom */
.user--myClasses-wrap {
    padding-inline: 50px;
    position: relative;
}
.user--myPlayground-wrap {
    padding-inline: 2.5%;
}
.user--myClasses-hero {
margin-block-start: 40px;
margin-inline-start: 40px;
font-size: 40px;
font-weight: 800;
letter-spacing: -0.01em;
}

.user--myPlayground-hero {
  margin-block-start: 40px;
  font-size: 40px;
  font-weight: 800;
  width: 100%;
  text-align: left;
  letter-spacing: -0.03em;
  color: #2a3a4a;
  position: relative;
  display: inline-block;
  border-radius: 3px;
}

.user--classesSchedule-block {
        width: 100%;
        background: #ffffff;
       border: 0;
       box-shadow: rgba(0, 0, 0,0.1) 0px 0px 8px 4px;
        border-radius: 20px;
        height: max-content;
        padding: 50px;
            -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;
        font-size: 25px;
        font-weight: 400;
        position: relative;
        margin: 0 auto;
        margin-block-start: 20px; 
        gap: 15px;
        text-align: center;
    }

.user--classesSchedule-buttonBlock {
        width: max-content;
        height: max-content;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);
        position: absolute;
        padding-inline: 25px;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
        display: flex;
        gap: 15px;
        background: #ffffff;
 }
 .user--classesSchedule-buttonBlockCircle {
        width: max-content;
        height: max-content;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);
        position: absolute;
        padding-inline: 25px;
        border-radius: 5rem;
        box-shadow: rgba(12, 92, 164, 0.5) 0px 0px 2px 2px;
        display: flex;
        gap: 15px;
        background: #ffffff;
        display: flex;
        cursor: pointer;
        justify-content: center;
        align-items: center;
        transition: all 0.25s ease-in-out;
 }
 .user--classesSchedule-buttonBlockCircle:hover {
        background: #96b3d6;
 }
 .user--classesSchedule-buttonBlockCircle:hover svg path {
        fill: #ffffff;
 }
 .user--classesSchedule-buttonBlockCircle-inside {
        width: 40px;
        height: 40px;
 }
 .user--classesSchedule-buttonBlockCircle-inside svg {
        width: 100%;
        height: 100%;
        transition: all 0.25s ease-in-out;
 }
.user--builder-textarea-wrapper {
        display: flex;
        flex-direction: column;
        gap: 15px;
}
.user--slide-builder-header-wrap-generic {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 15px;
}
.user--popup-achievement-block-inner {
        width: 90%;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 20px;
        flex-wrap: wrap;
}
.user--popup-achievement-block-inner-date {
        width: max-content;
        height: max-content;
        font-size: 25px;
        font-weight: 500;
        color: #979797;
}
.user--popup-achievement-block-inner-block {
        width: 100%;
        height: max-content;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
}
.user--classesSchedule-block b {
        font-size: 25px;
        font-weight: 550;
}
.user--classesSchedule-notification {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
        width: 70%;
font-size: 30px;
text-align: center;
letter-spacing: -0.02em;
margin: 0 auto;
color: #ACACAC;
gap: 21px;
}
.user--classesSchedule-notification img {
    width: 40px;
}
.user--linkblock-united {
        width: 100%;
        padding: 40px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        margin-block: 10px;
        border-radius: 30px;
        border: 1.5px solid transparent;
        background-image: 
        linear-gradient(270deg,
        rgba(255, 99, 71, 0.15),  /* Tomato Red */
        rgba(255, 182, 193, 0.15),  /* Soft Pink */
        rgba(173, 216, 230, 0.15),  /* Light Blue */
        rgba(255, 99, 132, 0.15),  /* Deep Red */
        rgba(216, 191, 216, 0.15),  /* Lavender */
        rgba(144, 238, 144, 0.15),  /* Light Green */
        rgba(255, 255, 0, 0.15),    /* Soft Yellow */
        rgba(224, 255, 255, 0.15),  /* Pale Turquoise */
        rgba(75, 0, 130, 0.15)      /* Indigo */
        );
        background-size: 1200% 1200%;
        animation: gradientShift 40s ease infinite;
        gap: 40px;
        position: relative;
        box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.8);
    }
    
    @keyframes gradientShift {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    .user--linkblock-inside-circle-image {
        width: 150px;
        height: 150px;
    }
    .user--linkblock-inside-circle-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
.user--linkblock-reward-wrap { 
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-block: 20px;
    padding-inline: 2.5%;
}
.user--linkblock-reward-united {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.nav--replacement-block {
        border-radius: 24px;
        width: max-content;
        height: max-content;
       
        display: flex;
        flex-direction: row;
        gap: 24px;
        justify-content: space-evenly;
        align-items: center;
        
        /* Modern glass morphism effect */
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        
        /* Subtle shadows for depth */
       
        background-clip: padding-box;
        
        /* Smooth transitions */
        transition: all 0.3s ease;
        
        /* Ensure it stands out */
        position: relative;
        z-index: 10;
    }
    
    /* 
    .nav--replacement-block:hover {
        box-shadow: 
            0 6px 20px rgba(0, 0, 0, 0.07),
            0 2px 4px rgba(0, 0, 0, 0.05),
            inset 0 0 0 1px rgba(255, 255, 255, 0.6);
        transform: translateY(-2px);
    }
    */
    /* Style for the items inside */
    .nav--replacement-block > * {
        transition: transform 0.2s ease;
    }
    
    .nav--replacement-block > *:hover {
        transform: scale(1.05);
    }
.expanded--control-block {
        border: 3px solid #0C5CA450;
        background-color: rgba(255, 255, 255, 0.8); 
        /* box-shadow: 0 2px 5px #0000001a; */
        backdrop-filter: blur(3px); 
         -webkit-backdrop-filter: blur(3px);
        position: sticky;
        top: 10px;
        border-radius: 5rem;
        width: max-content;
        height: max-content;
        padding-block: 10px;
        padding-inline: 30px;
        display: flex;
        flex-direction: row;
        gap: 30px;
        justify-content: space-evenly;
        align-items: center;
        margin-block-start: 20px;
        z-index: 30;
}
.expanded--control-block-icon {
        width: 30px;
        height: 30ppx;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
}
.expanded--control-block-icon svg {
        width: 100%;
        height: 100%;
}
.nav--replacement-block-back, .nav--replacement-block-chat {
        width: 35px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
}
.user--popup-collection-block-wrap {
        width: 100%;
        height: max-content;
}
.user--popup-collection-block-wrap h2 {
        text-align: center;
        font-weight: 800;
        font-size: 35px;
        margin-block-end: 20px;
}
.user--popup-collection-wrap {
        width: 100;
        height: max-content;
}
.nav--replacement-block-title {
        width: max-content;
        height: max-content;
        text-transform: lowercase;
        color: #000000;
        font-size: 23px;
        pointer-events: none;
        font-weight: 700;
}
.nav--replacement-block-back svg, .nav--replacement-block-chat svg {
        width: 100%;
        height: 100%;
}

.user--block-expanded-wrapper {
        width: 95%;
        margin: 0 auto;
        padding: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-block: 20px;
        background-color: #ffffff;
        border-radius: 30px;
        box-shadow: rgba(0, 0, 0,0.1) 0px 0px 8px 4px;
        gap: 30px;
        flex-direction: column;
    }
    .slide-wrapper {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        align-items: center;
    }

    .user--linkblock-wrap {
        width: 100%;
        border-radius: 20px;
        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: space-between;
        align-items: center;
        padding: 25px;
        height: 100%;
        border: none;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        
        /* Background with blur effect */
        background-color: rgba(255, 255, 255, 0.7);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        
        /* Fallback for browsers that don't support backdrop-filter */
        box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
        
        /* For Safari compatibility */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* Add this to enhance the blur effect with a subtle gradient overlay */
    .user--linkblock-wrap::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 20px;
        background: linear-gradient(120deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
        pointer-events: none;
        z-index: -1;
    }

.user--linkblock-wrap:hover {
    transform: translateY(-5px);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 24px;
}

.user--linkblock-wrap-h1 {
    font-size: 24px;
    font-weight: 700;
    align-self: center;
    color: #ffffff;
    padding: 12px 28px;
    border-radius: 50px;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.user--linkblock-wrap-inner {
    width: 100%;
    height: max-content;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    margin-top: 15px;
}

.user--linkblock-wrap-inner-desc {
    font-size: 17px;
    font-weight: 400;
    color: #505050;
    width: 90%;
    text-align: center;
    line-height: 1.5;
}

.user--linkblock-wrap-inner-desc-bold {
    font-size: 16px;
    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;
        position: absolute;
        top: 5px;
        right: 5px;
        /* opacity: 0.15; */
        z-index: -1;
       
        background-color: transparent;
        border-radius: 50px;
        width: 50px;
        height: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
}    
.user--linkblock-inside-circle span {
        font-size: 30px;
        font-weight: 400;
        letter-spacing: -0.02em;
        color: #000000;
}


.user--linkblock-inside-circle-icon {
        width: 70px;
        height: 70px;
    }
    .user--linkblock-inside-circle-icon svg {
      width: 100%;
      height: 100%;
    }
.user--linkblock-wrap-button-action {
    border-radius: 30px;
    background: #0C5CA4;
    padding: 10px 30px;
    width: max-content;
    margin: 0 auto;
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: rgba(12, 92, 164, 0.2) 0px 3px 8px;
}

.user--linkblock-wrap-button-action:hover {
    background: #0a4a85;
    transform: scale(1.05);
}

.user--linkblock-wrap-button-action-inactive {
    border-radius: 30px;
    background: #e0e0e0;
    padding: 10px 30px;
    width: max-content;
    margin: 0 auto;
    font-size: 16px;
    font-weight: 500;
    color: #a0a0a0;
    pointer-events: none;
}
.user--interactive-block-wrap {
    width: 100%;
    height: 100vh;
    position: relative;
    background-image: url('../assets/the_great_bridge.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 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--popup-wrap {
   /* width: calc(100vw - (50px * 2)); */
   width: 100vw;
    /* height: 95vh; */
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-block-start: 60px;
    background: rgba(255, 255, 255, 0.99);
/* border: 5px solid #D9D9D9; */
-ms-overflow-style: none; 
scrollbar-width: none;  
backdrop-filter: blur(12.5px);
-webkit-backdrop-filter: blur(12.5px);
/* border-radius: 20px; */
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
position: relative;
text-align: center;
margin: 0 auto;
position: fixed;
/* top: 2.5vh;
left: 50px; */
top: 0vh;
}
.user--popup-wrap::-webkit-scrollbar { 
    display: none;
}
.user--popup-story-main-inner {
        width: 100%;
        height: max-content;
        padding: 0px;
        display: flex;
        flex-wrap: wrap;
        gap: 60px;
        background-color: #ffffff;
        border-radius: 10px;
        justify-content: center;
        align-items: center;
    }
    .user--popup-story-main-inner-block {
        width: 100%;
        border: 1px solid #0C5CA450;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 15px;
        background-color: white;   
        border-radius: 30px;
        padding: 30px;
        /* min-height: 300px; */
    }
    .user--popup-story-main-inner-block h3 {
        font-size: 30px;
        font-weight: 800;
        text-align: center;
    }
    .user--popup-story-main-inner-block h2 {
        font-size: 22px;
        font-weight: 350;
        text-align: center;
        color: #5c5c5c;
    }
    .user--popup-story-main-inner-block-delim {
        width: 50%;
        height: 3px;
        border-radius: 5rem;
        background-color: #F5F5F5;
        margin-inline-start: 5%;
    }
.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-fold-button {
        cursor: pointer; 
        position: absolute;
        top: 4%;
        right: 4%;
       /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
        display: flex;
        transform: translateX(50%);
        justify-content: center;
        align-items: center;
        
        background: transparent; 
        width: 40px;
        height: 40px;
        margin: 0 auto;
        transition: 0.25s all ease-in-out;
        cursor: pointer;
    }
    .user--popup-fold-button svg {
        width: 100%;
        height: 100%;
    }
    .user--popup-fold-button:hover svg path {
       fill: rgba(255, 87, 87, 0.5);
    }
    
   
    
    .user--popup-videos-wrap {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .user--class-exercise-answer-truefalse-select {
        width: max-content;
height: max-content;
padding-block: 10px;
padding-inline: 30px;
background-color: #ffffff;
color: #000000;
cursor: pointer;
font-size: 23px;
font-weight: 500;
border-radius: 100px;
margin: 0 auto;
margin-block-start: 10px;
transition:all 0.2s linear
    }
    .user--exercise-truefalse-text {
        font-size: 23px;
        font-weight: 350;
        text-align: center;
        color: #5c5c5c;
    }
.user--popup-wrap h1 {
    font-weight: 750;
    font-size: 30px;
    letter-spacing: -0.01em;
    color: #000000;
    margin-block-end: 30px;
    margin-inline: 5%;
    align-self: flex-start;
    text-align: left;
}
.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-class-header-wrap-exercise {
                width: 100%;
                height: max-content;
                padding: 30px;
                border-radius: 20px;
                border: 2px solid #b8cce3;
                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--class-exercise-main-header {
        font-size: 30px;
        font-weight: 800;
        text-align: center;
}
.exercise-answer-block-multiple {
        width: 90%;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 40px;
        justify-content: center;
        align-items: center;
}
.multiple-choice-exercise {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 40px;
        justify-content: center;
        align-items: center;
}
.user--achievement-block-circle {
    width: 80px;
    min-width: 80px;
    height: 80px;
    background: #ffffff;
    /* border: 2.5px solid #000000; */
position: relative;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.user--achievement-block-circle img {
        width: 70%;
        height: 70%;
}
.user--achievement-block-text-h1 {
        font-size: 30px;
        font-weight: 600;
        color: #000000;
}
.user--achievement-block-text-h2 {
        font-size: 20px;
        font-weight: 400;
        color: #000000;
}
.user--popup-achievement-block-inner-block-wrap {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: row;
        gap: 15px;
        justify-content: space-around;
        align-items: 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--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: 15px;
    height: 15px;
}
.user--preview-more {
    display: flex;
    width: max-content;
    height: max-content;
    gap: 10px;
}
.disabled-button {
        cursor: not-allowed;
        background-color: #CCCCCC !important;
        pointer-events: none;
}
.inactive-button {
        color: #D9D9D9 !important;
        border-bottom: 3px solid #D9D9D9 !important;
        cursor: default !important;
        pointer-events: none !important;
}
.inactive-button-grey {
        color: #D9D9D9 !important;
        border-bottom: 3px solid #D9D9D9 !important;
        cursor: default !important;
        pointer-events: none !important;
}
#front-cover-animated {
        max-width: calc(100% - 25px);
       }
.user--preview-more-circle {
    width: 20px;
    height: 20px;
    border-radius: 5rem;
    background: #D9D9D9;
}
.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--course-display-name-main {
                border-radius: 10px;
            border: 0;
            display: flex;
            flex-direction: column;
            gap: 5px;
            }
            .user--course-display-name-main p {
                font-size: 20px;
                font-weight: 550;
                text-align: left;
                margin-inline: 10px;
            }
            .user--traverse-desc-bold {
                font-size: 30px;
                color: #7e7e7e;
                font-weight: 500;
            }
            .user--course-display-span-gray {
                color: #777777 !important;
            }
            .user--course-setting-main-custom-select {
                position: relative;    
                display: flex;
                align-items: center;
                width: calc(100% - 15px);
                gap: 5px;
                padding-block: 15px;
                padding-inline: 20px;
                border-radius: 15px;
                box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
            }
            .user--course-setting-main-custom-select-icon {
                display: inline-block;
                width: 25px;
                height: 25px;
                cursor: pointer;
                transition: transform 0.3s ease;
            }
            
            .user--course-setting-main-custom-select-icon svg {
                width: 100%;
                height: 100%; 
            }
            .user--course-setting-main-custom-select-icon:hover svg path {
                fill: #0C5CA4;
            }
            .user--course-setting-main-custom-select-icon-mini {
                display: inline-block;
                width: 20px; 
                height: 20px;
                cursor: pointer;
                transition: transform 0.3s ease;
            }
            
            .user--course-setting-main-custom-select-icon-mini svg {
                width: 100% !important;
                height: 100% !important; 
            }
            .user--course-setting-main-custom-select-icon-mini:hover svg path {
                fill: #0C5CA4;
            }
            .user--course-setting-main-custom-options-wrapper {
                display: none;  /* Hidden by default */
                position: absolute;
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
                box-shadow: rgba(12, 92, 164, 0.25) 0px 0px 8px 4px;
                border-radius: 15px;
                padding-block: 20px;
                padding-inline: 30px;
                width: 100%;  
                z-index: 1;  
            }
            .user--course-setting-main-custom-option {
                padding: 10px;
                cursor: pointer;
                font-weight: 500;
                font-size: 20px;
            }
            .user--course-setting-main-custom-option-selected {
                color: #0C5CA4;
               pointer-events: none;
            }
            .user--course-setting-main-custom-selected-value {
                display: inline-block;
                padding: 10px;
                border: 0;
                color: #0C5CA4;
                font-size: 20px;
                cursor: pointer;
                border-radius: 15px;
                font-weight: 500;
            }
            .user--popup-goals-wrap {
                width: 100%;
                height: max-content;
                display: flex;
                flex-direction: column;
                gap: 60px;
            }
            .user--course-setting-main-custom-select-mini {
                position: relative;    
                display: flex;
                align-items: center;
                width: calc(100% - 15px);
                margin-inline: 5px;
            }
            
            .user--course-setting-main-custom-selected-value-mini {
                display: inline-block;
                padding: 5px;
                border: 0;
                color: #275b88;
                font-size: 14px;
                cursor: pointer;
            }
            /* Show options when class is toggled */
            .user--course-setting-main-custom-options-wrapper.show-options {
                display: block;
                margin-block: -5px;
                width: max-content;
                overflow-y: scroll;
            }
.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;
}
.login--auth-button-active {
    cursor: pointer;
    color: #0C5CA4;
        box-shadow: rgba(12, 92, 164, 0.5) 0px 0px 2px 2px;
        pointer-events: all;

}
.login--auth-button-active:hover {
        color: #ffffff;
        background: #0C5CA4;
        box-shadow: rgba(12, 92, 164, 0.5) 0px 0px 0px 0px;
       
    }
/* .login--auth-input-error {
    border: 0 !important;
    box-shadow: #bb4242bb 0px 0px 2px 2px !important;
    animation: 0.4s linear error-animation;
} */
@keyframes error-animation {
    0% { transform: translateX(0) }
    25% { transform: translateX(15px) }
    50% { transform: translateX(-15px) }
    75% { transform: translateX(15px) }
    100% { transform: translateX(0) }
   }
   .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: 0;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 3px 1px ;
}
.user--notification-dynamic-2 {
        position: fixed;
        top: 30px;
        width: max-content;
        max-width: 50%;
        height: max-content; 
        display: flex;
        border-radius: 5rem;
        flex-direction: row;
        justify-content: space-around;
        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-3 {
        position: fixed;
        top: 30px;
        width: max-content;
        max-width: 45%;
        height: max-content; 
        display: flex;
        border-radius: 20px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background: #ffffff;
        padding: 20px;
        gap: 20px;
        transition: visibility 0.3s, opacity 0.3s ease; 
        border: 1px solid #D9D9D9;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -4px;
        overflow: hidden;
        transition: box-shadow 0.6s linear;
        min-width: 35%;
    }
    /* .user--traverse-miniature-selected-element-wrapper {
        width: 100%;
        border-collapse: collapse;
    } */
    .teacher--popup-content-table-wrapper table {
        border-collapse: collapse;
        border-spacing: 0px;
    }
    .teacher--popup-content-table-wrapper thead tr th {
        padding: 15px;
        text-transform: uppercase;
        background-color: #D9D9D9;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
            }
    .teacher--popup-content-table-wrapper td {
border: 1px solid #D9D9D9;
padding-inline: 15px;
padding-block: 25px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
    }
    .user--notification-dynamic-3.reverse-shadow {
        box-shadow: rgba(41, 90, 159, 0.2) 0px -60px 40px 4px;
      }
      
    .user--notification-fading-out {
        animation: fadeOut 0.5s forwards; 
      }
      
      .user--notification-fading-in {
        animation: fadeIn 0.5s forwards;
      }
      
      @keyframes fadeOut {
        0% { opacity: 1; }
        100% { opacity: 0; }
      }
      
      @keyframes fadeIn {
        0% { opacity: 0; }
        100% { opacity: 1; }
      }
      
    .user--notification-dynamic-svg {
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-basis: auto !important;
    }
    .user--notification-dynamic-svg svg {
        width: 90%;
        height: 90%;
    }
.slide-in-bck-center {
	-webkit-animation: slide-in-bck-center 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-bck-center 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2024-4-28 11:19:40
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-bck-center
 * ----------------------------------------
 */
 @-webkit-keyframes slide-in-bck-center {
        0% {
          -webkit-transform: translateZ(600px);
                  transform: translateZ(600px);
          opacity: 0;
        }
        100% {
          -webkit-transform: translateZ(0);
                  transform: translateZ(0);
          opacity: 1;
        }
      }
      @keyframes slide-in-bck-center { 
        0% {
          -webkit-transform: translateZ(600px);
                  transform: translateZ(600px);
          opacity: 0;
        }
        100% {
          -webkit-transform: translateZ(0);
                  transform: translateZ(0);
          opacity: 1;
        }
      }

.slide-out-fwd-center {
	-webkit-animation: slide-out-fwd-center 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: slide-out-fwd-center 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2024-4-28 11:23:22
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-out-fwd-center
 * ----------------------------------------
 */
 @-webkit-keyframes slide-out-fwd-center {
        0% {
          -webkit-transform: translateZ(1);
                  transform: translateZ(1);
          opacity: 1;
        }
        100% {
          -webkit-transform: translateZ(600px);
                  transform: translateZ(600px);
          opacity: 0;
        }
      }
      @keyframes slide-out-fwd-center {
        0% {
          -webkit-transform: translateZ(1);
                  transform: translateZ(1);
          opacity: 1;
        }
        100% {
          -webkit-transform: translateZ(600px);
                  transform: translateZ(600px);
          opacity: 0;
        }
      }
      
.user--popup-dynamic {
        align-self: center;
        justify-self: center;
        width: max-content;
        min-width: 70%;
        width: 70%;
        min-height: 250px;
        max-height: 85%;
        display: flex;
        border-radius: 40px;
        flex-direction: column;
        justify-content: flex-start; 
        align-items: center;
        background: #ffffff;
        padding: 20px;
        gap: 20px;
        border: 0;
        box-shadow: rgba(0, 0, 0, 0.04) 0px 0px 20px 10px;
        overflow-y: auto;
      }
      
.user--notification-dynamic svg {
    width: 45px;
    height: 45px;
    fill: rgb(94, 216, 94);
}
.user--notification-dynamic-2 svg {
        width: 45px;
        height: 45px;
        fill: #0c5ca4;
    }
.user--popup-dynamic svg {
        width: 65px;
        height: 65px;
        fill: #0c5ca4;
    }
.user--notification-dynamic-inside {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: flex-start;
}
.user--notification-dynamic-inside-2 {
        display: flex;
        flex-direction: column;
        gap: 5px;
        justify-content: center;
        align-items: flex-start;
    }
    .user--notification-dynamic-inside-3 {
        display: flex;
        flex-direction: column;
        gap: 0px;
        justify-content: center;
        align-items: flex-start;
        flex-grow: 1;
      /*  max-width: 60%;  */
        overflow: hidden;
    }
    .user--notification-body-limited {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all 0.3s ease;
    }
    .user--notification-dynamic-control-close svg {
        fill: #FF9393;
    }
    .user--notification-dynamic-controls-wrap {
       /* box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; */
        border-radius: 50px;
        width: max-content;
        height: max-content;
        padding: 10px;
        display: flex;
        gap: 10px;
    }
    .user--notification-dynamic-control {
        width: 30px;
        height: 30px;
        cursor: pointer;
    }
    .user--notification-dynamic-control svg {
        width: 100%;
        height: 100%;
    } 
.user--popup-dynamic-inside {
        display: flex;
        flex-direction: column;
        gap: 5px;
        justify-content: center;
        align-items: center;
        height: max-content;
        width: 100%;
    }
.user--notification-dynamic-inside h1 {
    font-size: 30px;
    font-weight: 650;
}
.user--notification-dynamic-inside-2 h1 {
        font-size: 30px;
        font-weight: 500;
    }
    .user--notification-dynamic-inside-3 h1 {
        font-size: 30px;
        font-weight: 500;
    }
.user--popup-dynamic-inside h1 {
        font-size: 55px;
        font-weight: 550;
        padding-block-end: 20px;
    }
.user--notification-dynamic-inside h2 {
    font-size: 18px;
    font-weight: 400;
}
.user--notification-dynamic-inside-2 h2 {
        font-size: 18px;
        font-weight: 400;
    }
    .user--notification-dynamic-inside-3 h2 {
        font-size: 18px;
        font-weight: 400;
        color: #6e6e6e;
    }
.user--popup-dynamic-inside h2 {
        font-size: 22px;
        font-weight: 400;
        text-align: center;
    }
    .user--popup-dynamic-inside h2 b {
        font-weight: 900;
    }
    .user--popup-dynamic-inside h3 {
        font-size: 33px;
        font-weight: 600;
        text-transform: uppercase;
       /* padding-block-end: 20px; */
    }
    .user--popup-dynamic-inside span {
        font-size: 20px;
        font-weight: 400;
        color: #7B7B7B;
        width: 90%;
    }
    .slide-in-blurred-top-cntr {
        -webkit-animation: slide-in-blurred-top-cntr 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
                animation: slide-in-blurred-top-cntr 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
      }
      
      @-webkit-keyframes slide-in-blurred-top-cntr {
        0% {
          -webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2) translate(-50%, -50%);
                  transform: translateY(-1000px) scaleY(2.5) scaleX(0.2) translate(-50%, -50%);
          -webkit-filter: blur(40px);
                  filter: blur(40px);
          opacity: 0;
        }
        100% {
          -webkit-transform: translateY(0) scaleY(1) scaleX(1) translate(-50%, -50%);
                  transform: translateY(0) scaleY(1) scaleX(1) translate(-50%, -50%);
          -webkit-filter: blur(0);
                  filter: blur(0);
          opacity: 1;
        }
      }
      
      @keyframes slide-in-blurred-top-cntr {
        0% {
          -webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2) translate(-50%, -50%);
                  transform: translateY(-1000px) scaleY(2.5) scaleX(0.2) translate(-50%, -50%);
          -webkit-filter: blur(40px);
                  filter: blur(40px);
          opacity: 0;
        }
        100% {
          -webkit-transform: translateY(0) scaleY(1) scaleX(1) translate(-50%, -50%);
                  transform: translateY(0) scaleY(1) scaleX(1) translate(-50%, -50%);
          -webkit-filter: blur(0);
                  filter: blur(0);
          opacity: 1;
        }
      }
      .slide-out-blurred-top-cntr {
        -webkit-animation: slide-out-blurred-top-cntr 0.45s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
                animation: slide-out-blurred-top-cntr 0.45s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
      }
      
      @-webkit-keyframes slide-out-blurred-top-cntr {
        0% {
          -webkit-transform: translateY(0) scaleY(1) scaleX(1) translate(-50%, -50%);
                  transform: translateY(0) scaleY(1) scaleX(1) translate(-50%, -50%);
          -webkit-filter: blur(0);
                  filter: blur(0);
          opacity: 1;
        }
        100% {
          -webkit-transform: translateY(-1000px) scaleY(2) scaleX(0.2) translate(-50%, -50%);
                  transform: translateY(-1000px) scaleY(2) scaleX(0.2) translate(-50%, -50%);
          -webkit-filter: blur(40px);
                  filter: blur(40px);
          opacity: 0;
        }
      }
      
      @keyframes slide-out-blurred-top-cntr {
        0% {
          -webkit-transform: translateY(0) scaleY(1) scaleX(1) translate(-50%, -50%);
                  transform: translateY(0) scaleY(1) scaleX(1) translate(-50%, -50%);
          -webkit-filter: blur(0);
                  filter: blur(0);
          opacity: 1;
        }
        100% {
          -webkit-transform: translateY(-1000px) scaleY(2) scaleX(0.2) translate(-50%, -50%);
                  transform: translateY(-1000px) scaleY(2) scaleX(0.2) translate(-50%, -50%);
          -webkit-filter: blur(40px);
                  filter: blur(40px);
          opacity: 0;
        }
      }
            
  .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--auth-waiting {
        -webkit-animation: puff-in-center 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
                animation: puff-in-center 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
  }
  @-webkit-keyframes puff-in-center {
    0% {
      -webkit-transform: scale(2);
              transform: scale(2);
      -webkit-filter: blur(4px);
              filter: blur(4px);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  @keyframes puff-in-center {
    0% {
      -webkit-transform: scale(2);
              transform: scale(2);
      -webkit-filter: blur(4px);
              filter: blur(4px);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  
  .user--flex-wrap {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
        align-items: center;
    position: fixed;
    background-color: transparent; 
    top: 0%;
    pointer-events: none;
    z-index: 10000;
}  
.user--notification-close-btn {
        width: 35px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ffffff;
        border-radius: 5rem; 
}
.mainpage--invitational-block {
        width: 70%;
        height: max-content;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 20px;
        font-size: 22px;
        font-weight: 400;
        border-radius: 15px;
        position: fixed;
        z-index: 3;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -60%);
        background-color: rgba(255, 255, 255, 0.9);
        box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 2px 2px;       
        backdrop-filter: blur(2px);  /* Apply a blur effect only to the background */
        -webkit-backdrop-filter: blur(2px);  /* For Safari and older Chrome browsers */
    }
    .mainpage-iframe {
        width: 100vw; height: 100vh; border: none; display: flex; justify-content: center; align-items: center; pointer-events: none;  
    }
    .slide-iframe-pdf {
        border: none; display: flex; gap: 0px; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: max-content;
    }
    .puff-out-center {
	-webkit-animation: puff-out-center 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
	        animation: puff-out-center 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2024-4-29 15:54:49
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation puff-out-center
 * ----------------------------------------
 */
 @-webkit-keyframes puff-out-center {
        0% {
          -webkit-transform: scale(1);
                  transform: scale(1);
          -webkit-filter: blur(0px);
                  filter: blur(0px);
          opacity: 1;
        }
        100% {
          -webkit-transform: scale(2);
                  transform: scale(2);
          -webkit-filter: blur(4px);
                  filter: blur(4px);
          opacity: 0;
        }
      }
      @keyframes puff-out-center {
        0% {
          -webkit-transform: scale(1);
                  transform: scale(1);
          -webkit-filter: blur(0px);
                  filter: blur(0px);
          opacity: 1;
        }
        100% {
          -webkit-transform: scale(2);
                  transform: scale(2);
          -webkit-filter: blur(4px);
                  filter: blur(4px);
          opacity: 0;
        }
      }
      

    
    
.user--notification-close-btn svg {
        width: 35px;
        height: 35px;
        fill: #0c5ca4;
}
.user--popup-dynamic-wrap {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
            align-items: center;
        position: fixed;
        background-color: rgba(255, 255, 255, 0.85);
        -webkit-backdrop-filter: blur(12.5px);
        backdrop-filter: blur(12.5px);
        top: 0%;
    }  
.user--classroom-wrap {
    width: 100%;
    overflow-x: hidden;
    height: 100%;
    min-height: 100vh;
}
/* ----------------------------------------------
 * Generated by Animista on 2023-1-20 17:43:42
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation puff-in-center
 * ----------------------------------------
 */
 @-webkit-keyframes puff-in-center {
    0% {
      -webkit-transform: scale(2);
              transform: scale(2);
      -webkit-filter: blur(4px);
              filter: blur(4px);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  @keyframes puff-in-center {
    0% {
      -webkit-transform: scale(2);
              transform: scale(2);
      -webkit-filter: blur(4px);
              filter: blur(4px);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  /* ----------------------------------------------
 * Generated by Animista on 2023-1-21 1:18:19
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-blur-out
 * ----------------------------------------
 */
@-webkit-keyframes text-blur-out {
    0% {
      -webkit-filter: blur(0.01);
              filter: blur(0.01);
    }
    100% {
      -webkit-filter: blur(12px) opacity(0%);
              filter: blur(12px) opacity(0%);
    }
  }
  @keyframes text-blur-out {
    0% {
      -webkit-filter: blur(0.01);
              filter: blur(0.01);
    }
    100% {
      -webkit-filter: blur(12px) opacity(0%);
              filter: blur(12px) opacity(0%);
    }
  }
  
.blur-out {
	-webkit-animation: text-blur-out 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-blur-out 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.puff-out-center {
	-webkit-animation: puff-out-center 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
	        animation: puff-out-center 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2023-1-21 1:34:59
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation puff-out-center
 * ----------------------------------------
 */
 @-webkit-keyframes puff-out-center {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
    100% {
      -webkit-transform: scale(2);
              transform: scale(2);
      -webkit-filter: blur(4px);
              filter: blur(4px);
      opacity: 0;
    }
  }
  @keyframes puff-out-center {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
    100% {
      -webkit-transform: scale(2);
              transform: scale(2);
      -webkit-filter: blur(4px);
              filter: blur(4px);
      opacity: 0;
    }
  }
  .html--fixed-area {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  .loading-indicator {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40px;
        font-weight: 500;
        background-color: #fffffffa;
  }
  .slide-in-blurred-top {
	-webkit-animation: slide-in-blurred-top 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
	        animation: slide-in-blurred-top 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2023-1-21 17:43:25
 * 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.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
	        animation: slide-out-blurred-top 0.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2023-1-21 17:44:8
 * 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--achievement-block-content-preview {
    width: 100px;
    min-width: 100px;
    height: 100px;
    background: #4DA6D9;
    /* border: 2.5px solid #000000; */
position: relative;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
  }
  .user--achievement-block-content-preview span {
    font-weight: 600;
    font-size: 13px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    /* text-align: center; */
    color: #000000;
    backdrop-filter: blur(12.5px);
    -webkit-backdrop-filter: blur(12.5px);
    padding: 5px;
    border-radius: 10px;
}
.more-circle-variant {
    border-radius: 5px !important;
}
.user—popup-achievement-wrap {
    width: 100%;
height: max-content;
display: flex;
flex-direction: column;
gap: 20px;
justify-content: center;
align-items: center;
padding-block-end: 80px;
}
.user--join-createform-wrapper {
        width: 100%;
        height: max-content;
}
.teacher—cclass-wrap {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        align-items: center;
}
.user--main-delimeter-short {
        width: 15px;
        height: 15px;
        background-color: #e4e4e4;
        border-radius: 5rem;
}
.user—popup-collection-wrap {
    width: 100%;
height: max-content;
display: flex;
flex-direction: column;
gap: 20px;
justify-content: center;
align-items: center;
}
* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased; text-decoration: none;
 }
 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;
  }
  
  @font-face {
    font-family: "Inter";
    src: url("./fonts/inter-universal.ttf");
    font-weight: 1 999;
  }
  @font-face {
    font-family: "Nunito";
    src: url("./fonts/nunito-universal.ttf");
    font-weight: 1 999;
  }
  @font-face {
    font-family: "Lexend";
    src: url("./fonts/lexend-universal.ttf");
    font-weight: 1 999;
  }
  @font-face {
    font-family: "Rubik";
    src: url("./fonts/rubik-universal.ttf");
    font-weight: 1 999;
  }
  @keyframes error-animation {
    0% { transform: translateX(0) }
    25% { transform: translateX(7px) }
    50% { transform: translateX(-7px) }
    75% { transform: translateX(7px) }
    100% { transform: translateX(0) }
   }


   /* playerjs -- style overwriting */
   .video-js.vjs-fluid, .video-js.vjs-16-9, .video-js.vjs-4-3, .video-js.vjs-9-16, .video-js.vjs-1-1 {
        width: 95%;
        max-width: 95%;
   }
   .video-js {
        background-color: #000000;
        border-radius: 30px;
        z-index: 20;
   }
   .video-js .vjs-tech {
        background-color: #000000;
        border-radius: 30px;
   }
   .video-js .vjs-control-bar {
        background-color: #000000;
        border-radius: 30px;
        background-color: transparent;
        bottom: 3%;
   }
   .video-js .vjs-progress-holder {
        height: 1em;
   }
   .video-js .vjs-progress-holder .vjs-play-progress, .video-js .vjs-progress-holder .vjs-load-progress, .video-js .vjs-progress-holder .vjs-load-progress div {
        border-radius: 50px;
   }
   .video-js .vjs-load-progress {
        background: none;
   }
   .video-js .vjs-slider {
        background: none;
   }
   .video-js .vjs-load-progress div {
        background: rgba(46, 46, 46, 0.75);
   }
   .video-js .vjs-progress-control .vjs-mouse-display {
        background-color: #fff;
   }
   .video-js .vjs-play-progress:before {
        font-size: 3em;
   }
   .vjs-play-progress .vjs-slider-bar {
        border-radius: 50px;
   }

   /* playerjs -- style overwriting */
  .user--login-wrap-bcg {
    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;
    background-color: #ffffff;
  }
  .user--linkblock-reward-width {
    width: 50%;
  }
.nav--big {
    padding-inline: 2.5%;
/* padding-block: 20px; */
display: flex;
flex-direction: row;
width: 100%;
height: max-content;
justify-content: space-between;
align-items: center;
}
.flex-direction-row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
        align-items: center;
        width: 95%;
    }
    .flex-direction-row .user--class-exercise-answer-select-wrap {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 200px; 
      }
    .flex-direction-column {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 20px;
    }
.nav--big-intro {
        justify-content: center !important;
         /* Set a fallback background color */
    background-color: rgba(255, 255, 255, 0.5); /* semi-transparent white */

    /* Blur effect */
    /* Standard syntax */
    backdrop-filter: blur(10px);
    /* Prefix for Safari 9+ */
    -webkit-backdrop-filter: blur(10px);
}
.nav--logo-big {
    width: max-content;
    height: 30px;
}
.nav--logo-small {
    height: 30px;
    margin-block: 10px;
}
.nav--logo-small-intro {
        height: 30px;
    }
.login--auth-wrap {
    padding-inline: 50px;
    /* padding-block: 20px; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    min-height: 80vh;
    background-image: url('/styles/clsrm_upd_bcg.svg');
   /*  background-size: cover;
   legacy -- cover 
   */ 
   background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    flex-direction: column;
}
.login--auth-left {
    flex: 1;
}
.login--auth-right {
    flex: 1;
}
.login--auth-right h1 {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin-block-end: 20px;
}
.login--auth-form {
width: 100%;
height: max-content;
display: flex;
flex-direction: column;
gap: 15px;
align-items: center;
justify-content: center;
}

.login--auth-input {
    height: 65px;
    background-color: #ffffff;
    width: 80%;
    border: 2px solid #0C5CA450;
    text-align: center;
    color: #0C5CA4;
    font-family: 'Rubik', 'Inter', sans-serif;
    border-radius: 50px;
    padding: 20px;
    font-size: 20px;
}
@keyframes gradientAnimation {
    0% {
      background-position: 0% 50%;
    }
    25% {
      background-position: 50% 100%;
    }
    50% {
      background-position: 100% 50%;
    }
    75% {
      background-position: 50% 0%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
.login--auth-button {
        background-color: transparent;
        font-size: 23px;
        font-weight: 450;
        font-family: inherit;
        padding-inline: 20px;
        color: #D9D9D9;
        box-shadow: 0px 0px 3px 1px #D9D9D9;
        border-radius: 10px;
        width: max-content;
        padding-block: 10px;
        margin: 0 auto;
        transition: 0.25s all ease-in-out;
        cursor: pointer;
        margin-block: 0px;
        pointer-events: none;

}
.user--exercise-questions-wrap {
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
gap: 20px;
}

.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: 15px;
        padding-inline: 25px;
        justify-content: center;
        align-items: center;
        background: #ffffff;
        box-shadow: 0px 0px 3px 1px rgba(12, 92, 164, 0.25);
    border-radius: 5rem;
    justify-content: center;
    align-items: center;
}

.footer--main-wrap-block-svg {
        width: max-content;
        height: max-content;
        display: flex;
        flex-direction: row;
        gap: 10px;
}
.footer--main-wrap-block-svg-element {
width: 22px;
height: 22px;
cursor: pointer
}
.footer--main-wrap-block-svg-element svg {
        width: 100%;
        height: 100%;
}
.footer--main-wrap-block-svg-element svg path {
        fill: #484848
}
.footer--main-wrap-block-svg-element:hover svg path {
        fill: #1355A3;
}
.footer--main-links, .footer--main-links-clickable {
    font-size: 16px;
    font-weight: 450;
    color: #484848;
    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: 50px;
 /*border: 2px solid rgba(12, 92, 164, 0.50);*/
 /* border: 2px solid #0C5CA450; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-block: 30px;
    padding-inline: 0px;
}
.plus-icon {
        width: 30px;
        height: 30px;
}
.nav--status-bar-settings {
        width: 30px;
        height: 35px;
        cursor: pointer;
        transition: all 0.15s linear;
        display: none;
}
.nav--status-bar-settings:hover svg path {
        fill: rgba(12, 92, 164, 1);
}
.nav--status-bar-settings svg {
        width: 100%;
        height: 100%;
}
.user--class-generic-button-3-inactive {
        pointer-events: none;
        background-color: #bababa !important;
        color: #ffffff !important;
}
.nav--status-bar-info {
/* flex: 2; */
display: flex;
flex-direction: column;
display: none;
}
.nav--status-bar-name {
    text-align: center;
    font-weight: 800;
font-size: 22px;
letter-spacing: -0.02em;
 }
 .nav--status-bar-course {
    text-align: center;
    font-weight: 500;
    color: #bababa;
    font-size: 15px;
letter-spacing: -0.03em;
align-self: flex-start;
 }


.nav--status-bar-image img {
        width: 100%;
        height: 100%;
        border-radius: 5rem;
        object-fit: cover;
}
rb {
        border-radius: 3px;
        padding-inline: 5px;
        padding-block: 3px;
        cursor: pointer;
}
ruby {
        display: inline-table !important;
}
.user--class-char-set {
width: 100%;
height: max-content;
padding: 20px;
border-radius: 15px;
background-color: #ffffff;
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
gap: 30px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.user--intro-char-set { 
        margin-block: 30px;
}

.user--popup-indicator-empty-block {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        height: max-content;
        padding: 10px;
        font-size: 25px;
        color: #5c5c5c;
        border: 0;
        background-color: white;
        font-weight: 350;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        flex-direction: column;
        
}
.element-display-flex-center {
        display: flex;
        justify-content: center;
        align-items: center;
}
.user--popup-indicator-empty-block .icon {
        width: 60px;
        height: 60px;
}
.user--popup-indicator-empty-block .icon svg {
        width: 100%;
        height: 100%;
}
.user--popup-indicator-empty-block .icon svg g path {
        fill: #F9F9F9;
}
.test--space {
    width: 100%;
    height: 100vh;
}

@-webkit-keyframes color-change-2x {
        0% {
            background: rgba(12, 92, 164, 1);
        }
        25% {
            background: rgba(20, 112, 184, 1);
        }
        50% {
            background: rgba(28, 132, 204, 1);
        }
        75% {
            background: rgba(20, 112, 184, 1);
        }
        100% {
            background: rgba(12, 92, 164, 0.1);
        }
    }
    @keyframes color-change-2x {
        0% {
            background: rgba(12, 92, 164, 1);
        }
        25% {
            background: rgba(20, 112, 184, 1);
        }
        50% {
            background: rgba(28, 132, 204, 1);
        }
        75% {
            background: rgba(20, 112, 184, 1);
        }
        100% {
            background: rgba(70, 141, 202, 0.399);
        }
    }
    
      @-webkit-keyframes color-change-2x-s {
        0% {
          background: rgb(103, 188, 137);
        }
        100% {
          background: rgb(103, 188, 137, 0.1);
        }
      }
      @keyframes color-change-2x-s {
        0% {
                background: rgb(103, 188, 137);
              }
              100% {
                background: rgb(103, 188, 137, 0.1);
              }
        }
      
      @-webkit-keyframes color-change-2x-e {
        0% {
          background: rgb(238, 116, 97);
        }
        100% {
                background: rgb(238, 116, 97, 0.1);
        }
      }
      @keyframes color-change-2x-e {
        0% {
                background: rgb(238, 116, 97);
              }
              100% {
                      background: rgb(238, 116, 97, 0.1);
              }
      }
      
      
    
    .liquid-auth {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        position: fixed;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .liquid-auth.processing,
    .liquid-auth.success,
    .liquid-auth.failure {
        background-size: 200% 200%;
    }
    
    .liquid-auth.processing {
        -webkit-animation: color-change-2x 2s linear infinite alternate both;
        animation: color-change-2x 2s linear infinite alternate both;
    }
    .liquid-auth.success {
        -webkit-animation: color-change-2x-s 1s linear infinite alternate both;
        animation: color-change-2x-s 1s linear infinite alternate both;
    }
    
    .liquid-auth.failure {
        -webkit-animation: color-change-2x-e 1s linear infinite alternate both;
        animation: color-change-2x-e 1s linear infinite alternate both;
    }
    
/* Join */
.user--join-main-wrap {
        width: 100%;
        height: max-content;
        background-color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 40px;
        flex-direction: column;
}
.user--join-main-button {
        cursor: pointer;
        background: #1355A3;
        font-family: 'Rubik', sans-serif;
        border-radius: 10px;
        width: max-content;
        height: max-content;
        color: #ffffff;
        font-size: 20px;
        padding-block: 10px;
        padding-inline: 20px;
        font-weight: 500;
}
.user--join-main-animation {
        width: 300px;
        height: 300px;
        margin-block-start: 40px;
        margin: 0 auto;
}
.user--join-main-text {
        text-align: center;
        font-size: 25px;
        font-weight: 600;
}
.user--join-main-form-wrap {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 15px;
        justify-content: center;
        align-items: center;
        margin-block: 40px;
        padding: 40px;
        border-radius: 40px;
        border: 3px solid #0C5CA450;        
}
/* .user--join-main-form-wrap-ns {
        width: 100%;
        height: max-content;
        display: flex;
        gap: 20px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-block: 40px;
        padding-block: 15px;
} */
.user--join-main-form-wrap input {
        width: 600px;
        height: max-content;
        background-color: #f9f9f9;
        border: 3px solid #a6a6a650;
        color: #1355A3;
        font-family: 'Rubik', 'Inter', sans-serif;
        border-radius: 50px;
        padding-block: 20px;
        padding-inline: 30px;
        font-size: 23px;
        font-weight: 500;
}
.user--join-main-removable-wrapper {
        width: 80%;
        height: max-content;
        margin: 0 auto;
        border-radius: 15px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: flex-start;
}
.user--join-main-removable-textual-big {
        width: 100%;
        font-size: 55px;
        font-weight: 700;
}
.user--join-main-removable-textual-tiny {
        width: 100%;
        font-size: 22px;
        color: #3F3F3F;
        font-weight: 450;
        margin-inline-start: 15px;
}
.removable {
        width: 100%;
        height: max-content;
}
/* Classroom */
.user--myClasses-wrap {
    padding-inline: 50px;
    position: relative;
}
.user--myPlayground-wrap {
    padding-inline: 2.5%;
}
.user--myClasses-hero {
margin-block-start: 40px;
margin-inline-start: 40px;
font-size: 40px;
font-weight: 800;
letter-spacing: -0.01em;
}


 
.user--classesSchedule-block {
        width: 100%;
        background: #ffffff;
       border: 0;
       box-shadow: rgba(0, 0, 0,0.1) 0px 0px 8px 4px;
        border-radius: 20px;
        height: max-content;
        padding: 50px;
            -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;
        font-size: 25px;
        font-weight: 400;
        position: relative;
        margin: 0 auto;
        margin-block-start: 20px; 
        gap: 15px;
        text-align: center;
    }

.user--classesSchedule-buttonBlock {
        width: max-content;
        height: max-content;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);
        position: absolute;
        padding-inline: 25px;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
        display: flex;
        gap: 15px;
        background: #ffffff;
 }
 .user--classesSchedule-buttonBlockCircle {
        width: max-content;
        height: max-content;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);
        position: absolute;
        padding-inline: 25px;
        border-radius: 5rem;
        box-shadow: rgba(12, 92, 164, 0.5) 0px 0px 2px 2px;
        display: flex;
        gap: 15px;
        background: #ffffff;
        display: flex;
        cursor: pointer;
        justify-content: center;
        align-items: center;
        transition: all 0.25s ease-in-out;
 }
 .user--classesSchedule-buttonBlockCircle:hover {
        background: #96b3d6;
 }
 .user--classesSchedule-buttonBlockCircle:hover svg path {
        fill: #ffffff;
 }
 .user--classesSchedule-buttonBlockCircle-inside {
        width: 40px;
        height: 40px;
 }
 .user--classesSchedule-buttonBlockCircle-inside svg {
        width: 100%;
        height: 100%;
        transition: all 0.25s ease-in-out;
 }
.user--builder-textarea-wrapper {
        display: flex;
        flex-direction: column;
        gap: 15px;
}
.user--slide-builder-header-wrap-generic {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 15px;
}
.user--popup-achievement-block-inner {
        width: 90%;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 20px;
        flex-wrap: wrap;
}
.user--popup-achievement-block-inner-date {
        width: max-content;
        height: max-content;
        font-size: 25px;
        font-weight: 500;
        color: #979797;
}
.user--popup-achievement-block-inner-block {
        width: 100%;
        height: max-content;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
}
.user--classesSchedule-block b {
        font-size: 25px;
        font-weight: 550;
}
.user--classesSchedule-notification {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
        width: 70%;
font-size: 30px;
text-align: center;
letter-spacing: -0.02em;
margin: 0 auto;
color: #ACACAC;
gap: 21px;
}
.user--classesSchedule-notification img {
    width: 40px;
}

.user--linkblock-reward-wrap { 
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-block: 20px;
    padding-inline: 2.5%;
}
.user--linkblock-reward-united {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.nav--replacement-block {
        /* border: 2px solid #0C5CA450; */
        border-radius: 5rem;
        width: max-content;
        height: max-content;
        
        /* padding-inline: 30px; */
        display: flex;
        flex-direction: row;
        gap: 30px;
        justify-content: space-evenly;
        align-items: center;
}
.expanded--control-block {
        border: 3px solid #0C5CA450;
        background-color: rgba(255, 255, 255, 0.8); 
        /* box-shadow: 0 2px 5px #0000001a; */
        backdrop-filter: blur(3px); 
         -webkit-backdrop-filter: blur(3px);
        position: sticky;
        top: 10px;
        border-radius: 5rem;
        width: max-content;
        height: max-content;
        padding-block: 10px;
        padding-inline: 30px;
        display: flex;
        flex-direction: row;
        gap: 30px;
        justify-content: space-evenly;
        align-items: center;
        margin-block-start: 20px;
        z-index: 30;
}
.expanded--control-block-icon {
        width: 30px;
        height: 30ppx;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
}
.expanded--control-block-icon svg {
        width: 100%;
        height: 100%;
}
.nav--replacement-block-back, .nav--replacement-block-chat {
        width: 35px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
}
.nav--replacement-block-back-star {
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
}
.nav--replacement-block-back-star svg {
        width: 100%;
        height: 100%;
}
.user--popup-collection-block-wrap {
        width: 100%;
        height: max-content;
}
.user--popup-collection-block-wrap h2 {
        text-align: center;
        font-weight: 800;
        font-size: 35px;
        margin-block-end: 20px;
}
.user--popup-collection-wrap {
        width: 100;
        height: max-content;
}
.nav--replacement-block-title {
        width: max-content;
        height: max-content;
        text-transform: lowercase;
        color: #000000;
        pointer-events: none;
        font-size: 23px;
        font-weight: 700;
}
.nav--replacement-block-back svg, .nav--replacement-block-chat svg {
        width: 100%;
        height: 100%;
}

.user--block-expanded-wrapper {
        width: 95%;
        margin: 0 auto;
        padding: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-block: 20px;
        background-color: #ffffff;
        border-radius: 30px;
        box-shadow: rgba(0, 0, 0,0.1) 0px 0px 8px 4px;
        gap: 30px;
        flex-direction: column;
    }
    .slide-wrapper {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        align-items: center;
    }




.user--linkblock-wrap-h1 {
    font-size: 24px;
    font-weight: 700;
    align-self: center;
    color: #ffffff;
    padding: 12px 28px;
    border-radius: 50px;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.user--linkblock-wrap-inner {
    width: 100%;
    height: max-content;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    margin-top: 15px;
}

.user--linkblock-wrap-inner-desc {
    font-size: 17px;
    font-weight: 400;
    color: #505050;
    width: 90%;
    text-align: center;
    line-height: 1.5;
}

.user--linkblock-wrap-inner-desc-bold {
    font-size: 16px;
    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-icon {
        width: 70px;
        height: 70px;
    }
    .user--linkblock-inside-circle-icon svg {
      width: 100%;
      height: 100%;
    }
.user--linkblock-wrap-button-action {
    border-radius: 30px;
    background: #0C5CA4;
    padding: 10px 30px;
    width: max-content;
    margin: 0 auto;
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: rgba(12, 92, 164, 0.2) 0px 3px 8px;
}

.user--linkblock-wrap-button-action:hover {
    background: #0a4a85;
    transform: scale(1.05);
}

.user--linkblock-wrap-button-action-inactive {
    border-radius: 30px;
    background: #e0e0e0;
    padding: 10px 30px;
    width: max-content;
    margin: 0 auto;
    font-size: 16px;
    font-weight: 500;
    color: #a0a0a0;
    pointer-events: none;
}
.user--interactive-block-wrap {
    width: 100%;
    height: 100vh;
    position: relative;
    background-image: url('../assets/the_great_bridge.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 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--popup-wrap {
   /* width: calc(100vw - (50px * 2)); */
   width: 100vw;
    /* height: 95vh; */
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-block-start: 60px;
    background: rgba(255, 255, 255, 0.99);
/* border: 5px solid #D9D9D9; */
-ms-overflow-style: none; 
scrollbar-width: none;  
backdrop-filter: blur(12.5px);
-webkit-backdrop-filter: blur(12.5px);
/* border-radius: 20px; */
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
position: relative;
text-align: center;
margin: 0 auto;
position: fixed;
/* top: 2.5vh;
left: 50px; */
top: 0vh;
}
.user--popup-wrap::-webkit-scrollbar { 
    display: none;
}
.user--popup-story-main-inner {
        width: 100%;
        height: max-content;
        padding: 0px;
        display: flex;
        flex-wrap: wrap;
        gap: 60px;
        background-color: #ffffff;
        border-radius: 10px;
        justify-content: center;
        align-items: center;
    }
    .user--popup-story-main-inner-block {
        width: 100%;
        border: 1px solid #0C5CA450;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 15px;
        background-color: white;   
        border-radius: 30px;
        padding: 30px;
        /* min-height: 300px; */
    }
    .user--popup-story-main-inner-block h3 {
        font-size: 30px;
        font-weight: 800;
        text-align: center;
    }
    .user--popup-story-main-inner-block h2 {
        font-size: 22px;
        font-weight: 350;
        text-align: center;
        color: #5c5c5c;
    }
    .user--popup-story-main-inner-block-delim {
        width: 50%;
        height: 3px;
        border-radius: 5rem;
        background-color: #F5F5F5;
        margin-inline-start: 5%;
    }
.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-fold-button {
        cursor: pointer; 
        position: absolute;
        top: 4%;
        right: 4%;
       /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
        display: flex;
        transform: translateX(50%);
        justify-content: center;
        align-items: center;
        
        background: transparent; 
        width: 40px;
        height: 40px;
        margin: 0 auto;
        transition: 0.25s all ease-in-out;
        cursor: pointer;
    }
    .user--popup-fold-button svg {
        width: 100%;
        height: 100%;
    }
    .user--popup-fold-button:hover svg path {
       fill: rgba(255, 87, 87, 0.5);
    }
    
   
    
    .user--popup-videos-wrap {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .user--class-exercise-answer-truefalse-select {
        width: max-content;
height: max-content;
padding-block: 10px;
padding-inline: 30px;
background-color: #ffffff;
color: #000000;
cursor: pointer;
font-size: 23px;
font-weight: 500;
border-radius: 100px;
margin: 0 auto;
margin-block-start: 10px;
transition:all 0.2s linear
    }
    .user--exercise-truefalse-text {
        font-size: 23px;
        font-weight: 350;
        text-align: center;
        color: #5c5c5c;
    }
.user--popup-wrap h1 {
    font-weight: 750;
    font-size: 30px;
    letter-spacing: -0.01em;
    color: #000000;
    margin-block-end: 30px;
    margin-inline: 5%;
    align-self: flex-start;
    text-align: left;
}
.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-class-header-wrap-exercise {
                width: 100%;
                height: max-content;
                padding: 30px;
                border-radius: 20px;
                border: 2px solid #b8cce3;
                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--class-exercise-main-header {
        font-size: 30px;
        font-weight: 800;
        text-align: center;
}
.exercise-answer-block-multiple {
        width: 90%;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 40px;
        justify-content: center;
        align-items: center;
}
.multiple-choice-exercise {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 40px;
        justify-content: center;
        align-items: center;
}
.user--achievement-block-circle {
    width: 80px;
    min-width: 80px;
    height: 80px;
    background: #ffffff;
    /* border: 2.5px solid #000000; */
position: relative;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.user--achievement-block-circle img {
        width: 70%;
        height: 70%;
}
.user--achievement-block-text-h1 {
        font-size: 30px;
        font-weight: 600;
        color: #000000;
}
.user--achievement-block-text-h2 {
        font-size: 20px;
        font-weight: 400;
        color: #000000;
}
.user--popup-achievement-block-inner-block-wrap {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: row;
        gap: 15px;
        justify-content: space-around;
        align-items: 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--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: 15px;
    height: 15px;
}
.user--preview-more {
    display: flex;
    width: max-content;
    height: max-content;
    gap: 10px;
}
.disabled-button {
        cursor: not-allowed;
        background-color: #CCCCCC !important;
        pointer-events: none;
}
.inactive-button {
        color: #D9D9D9 !important;
        border-bottom: 3px solid #D9D9D9 !important;
        cursor: default !important;
        pointer-events: none !important;
}
.inactive-button-grey {
        color: #D9D9D9 !important;
        border-bottom: 3px solid #D9D9D9 !important;
        cursor: default !important;
        pointer-events: none !important;
}
#front-cover-animated {
        max-width: calc(100% - 25px);
       }
.user--preview-more-circle {
    width: 20px;
    height: 20px;
    border-radius: 5rem;
    background: #D9D9D9;
}
.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--course-display-name-main {
                border-radius: 10px;
            border: 0;
            display: flex;
            flex-direction: column;
            gap: 5px;
            }
            .user--course-display-name-main p {
                font-size: 20px;
                font-weight: 550;
                text-align: left;
                margin-inline: 10px;
            }
            .user--traverse-desc-bold {
                font-size: 30px;
                color: #7e7e7e;
                font-weight: 500;
            }
            .user--course-display-span-gray {
                color: #777777 !important;
            }
            .user--course-setting-main-custom-select {
                position: relative;    
                display: flex;
                align-items: center;
                width: calc(100% - 15px);
                gap: 5px;
                padding-block: 15px;
                padding-inline: 20px;
                border-radius: 15px;
                box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
            }
            .user--course-setting-main-custom-select-icon {
                display: inline-block;
                width: 25px;
                height: 25px;
                cursor: pointer;
                transition: transform 0.3s ease;
            }
            
            .user--course-setting-main-custom-select-icon svg {
                width: 100%;
                height: 100%; 
            }
            .user--course-setting-main-custom-select-icon:hover svg path {
                fill: #0C5CA4;
            }
            .user--course-setting-main-custom-select-icon-mini {
                display: inline-block;
                width: 20px; 
                height: 20px;
                cursor: pointer;
                transition: transform 0.3s ease;
            }
            
            .user--course-setting-main-custom-select-icon-mini svg {
                width: 100% !important;
                height: 100% !important; 
            }
            .user--course-setting-main-custom-select-icon-mini:hover svg path {
                fill: #0C5CA4;
            }
            .user--course-setting-main-custom-options-wrapper {
                display: none;  /* Hidden by default */
                position: absolute;
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
                box-shadow: rgba(12, 92, 164, 0.25) 0px 0px 8px 4px;
                border-radius: 15px;
                padding-block: 20px;
                padding-inline: 30px;
                width: 100%;  
                z-index: 1;  
            }
            .user--course-setting-main-custom-option {
                padding: 10px;
                cursor: pointer;
                font-weight: 500;
                font-size: 20px;
            }
            .user--course-setting-main-custom-option-selected {
                color: #0C5CA4;
               pointer-events: none;
            }
            .user--course-setting-main-custom-selected-value {
                display: inline-block;
                padding: 10px;
                border: 0;
                color: #0C5CA4;
                font-size: 20px;
                cursor: pointer;
                border-radius: 15px;
                font-weight: 500;
            }
            .user--popup-goals-wrap {
                width: 100%;
                height: max-content;
                display: flex;
                flex-direction: column;
                gap: 60px;
            }
            .user--course-setting-main-custom-select-mini {
                position: relative;    
                display: flex;
                align-items: center;
                width: calc(100% - 15px);
                margin-inline: 5px;
            }
            
            .user--course-setting-main-custom-selected-value-mini {
                display: inline-block;
                padding: 5px;
                border: 0;
                color: #275b88;
                font-size: 14px;
                cursor: pointer;
            }
            /* Show options when class is toggled */
            .user--course-setting-main-custom-options-wrapper.show-options {
                display: block;
                margin-block: -5px;
                width: max-content;
                overflow-y: scroll;
            }
.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;
}
.login--auth-button-active {
    cursor: pointer;
    color: #0C5CA4;
        box-shadow: rgba(12, 92, 164, 0.5) 0px 0px 2px 2px;
        pointer-events: all;

}
.login--auth-button-active:hover {
        color: #ffffff;
        background: #0C5CA4;
        box-shadow: rgba(12, 92, 164, 0.5) 0px 0px 0px 0px;
       
    }
/* .login--auth-input-error {
    border: 0 !important;
    box-shadow: #bb4242bb 0px 0px 2px 2px !important;
    animation: 0.4s linear error-animation;
} */
@keyframes error-animation {
    0% { transform: translateX(0) }
    25% { transform: translateX(15px) }
    50% { transform: translateX(-15px) }
    75% { transform: translateX(15px) }
    100% { transform: translateX(0) }
   }
   .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: 0;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 3px 1px ;
}
.user--notification-dynamic-2 {
        position: fixed;
        top: 30px;
        width: max-content;
        max-width: 50%;
        height: max-content; 
        display: flex;
        border-radius: 5rem;
        flex-direction: row;
        justify-content: space-around;
        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-3 {
        position: fixed;
        top: 30px;
        width: max-content;
        max-width: 45%;
        height: max-content; 
        display: flex;
        border-radius: 20px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background: #ffffff;
        padding: 20px;
        gap: 20px;
        transition: visibility 0.3s, opacity 0.3s ease; 
        border: 1px solid #D9D9D9;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -4px;
        overflow: hidden;
        transition: box-shadow 0.6s linear;
        min-width: 35%;
    }
    /* .user--traverse-miniature-selected-element-wrapper {
        width: 100%;
        border-collapse: collapse;
    } */
    .teacher--popup-content-table-wrapper table {
        border-collapse: collapse;
        border-spacing: 0px;
    }
    .teacher--popup-content-table-wrapper thead tr th {
        padding: 15px;
        text-transform: uppercase;
        background-color: #D9D9D9;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
            }
    .teacher--popup-content-table-wrapper td {
border: 1px solid #D9D9D9;
padding-inline: 15px;
padding-block: 25px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
    }
    .user--notification-dynamic-3.reverse-shadow {
        box-shadow: rgba(41, 90, 159, 0.2) 0px -60px 40px 4px;
      }
      
    .user--notification-fading-out {
        animation: fadeOut 0.5s forwards; 
      }
      
      .user--notification-fading-in {
        animation: fadeIn 0.5s forwards;
      }
      
      @keyframes fadeOut {
        0% { opacity: 1; }
        100% { opacity: 0; }
      }
      
      @keyframes fadeIn {
        0% { opacity: 0; }
        100% { opacity: 1; }
      }
      
    .user--notification-dynamic-svg {
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-basis: auto !important;
    }
    .user--notification-dynamic-svg svg {
        width: 90%;
        height: 90%;
    }
.slide-in-bck-center {
	-webkit-animation: slide-in-bck-center 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-bck-center 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2024-4-28 11:19:40
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-bck-center
 * ----------------------------------------
 */
 @-webkit-keyframes slide-in-bck-center {
        0% {
          -webkit-transform: translateZ(600px);
                  transform: translateZ(600px);
          opacity: 0;
        }
        100% {
          -webkit-transform: translateZ(0);
                  transform: translateZ(0);
          opacity: 1;
        }
      }
      @keyframes slide-in-bck-center { 
        0% {
          -webkit-transform: translateZ(600px);
                  transform: translateZ(600px);
          opacity: 0;
        }
        100% {
          -webkit-transform: translateZ(0);
                  transform: translateZ(0);
          opacity: 1;
        }
      }

.slide-out-fwd-center {
	-webkit-animation: slide-out-fwd-center 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: slide-out-fwd-center 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2024-4-28 11:23:22
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-out-fwd-center
 * ----------------------------------------
 */
 @-webkit-keyframes slide-out-fwd-center {
        0% {
          -webkit-transform: translateZ(1);
                  transform: translateZ(1);
          opacity: 1;
        }
        100% {
          -webkit-transform: translateZ(600px);
                  transform: translateZ(600px);
          opacity: 0;
        }
      }
      @keyframes slide-out-fwd-center {
        0% {
          -webkit-transform: translateZ(1);
                  transform: translateZ(1);
          opacity: 1;
        }
        100% {
          -webkit-transform: translateZ(600px);
                  transform: translateZ(600px);
          opacity: 0;
        }
      }
      
.user--popup-dynamic {
        align-self: center;
        justify-self: center;
        width: max-content;
        min-width: 70%;
        width: 70%;
        min-height: 250px;
        max-height: 85%;
        display: flex;
        border-radius: 40px;
        flex-direction: column;
        justify-content: flex-start; 
        align-items: center;
        background: #ffffff;
        padding: 20px;
        gap: 20px;
        border: 0;
        box-shadow: rgba(0, 0, 0, 0.04) 0px 0px 20px 10px;
        overflow-y: auto;
      }
      
.user--notification-dynamic svg {
    width: 45px;
    height: 45px;
    fill: rgb(94, 216, 94);
}
.user--notification-dynamic-2 svg {
        width: 45px;
        height: 45px;
        fill: #0c5ca4;
    }
.user--popup-dynamic svg {
        width: 65px;
        height: 65px;
        fill: #0c5ca4;
    }
.user--notification-dynamic-inside {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: flex-start;
}
.user--notification-dynamic-inside-2 {
        display: flex;
        flex-direction: column;
        gap: 5px;
        justify-content: center;
        align-items: flex-start;
    }
    .user--notification-dynamic-inside-3 {
        display: flex;
        flex-direction: column;
        gap: 0px;
        justify-content: center;
        align-items: flex-start;
        flex-grow: 1;
      /*  max-width: 60%;  */
        overflow: hidden;
    }
    .user--notification-body-limited {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all 0.3s ease;
    }
    .user--notification-dynamic-control-close svg {
        fill: #FF9393;
    }
    .user--notification-dynamic-controls-wrap {
       /* box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; */
        border-radius: 50px;
        width: max-content;
        height: max-content;
        padding: 10px;
        display: flex;
        gap: 10px;
    }
    .user--notification-dynamic-control {
        width: 30px;
        height: 30px;
        cursor: pointer;
    }
    .user--notification-dynamic-control svg {
        width: 100%;
        height: 100%;
    } 
.user--popup-dynamic-inside {
        display: flex;
        flex-direction: column;
        gap: 5px;
        justify-content: center;
        align-items: center;
        height: max-content;
        width: 100%;
    }
.user--notification-dynamic-inside h1 {
    font-size: 30px;
    font-weight: 650;
}
.user--notification-dynamic-inside-2 h1 {
        font-size: 30px;
        font-weight: 500;
    }
    .user--notification-dynamic-inside-3 h1 {
        font-size: 30px;
        font-weight: 500;
    }
.user--popup-dynamic-inside h1 {
        font-size: 55px;
        font-weight: 550;
        padding-block-end: 20px;
    }
.user--notification-dynamic-inside h2 {
    font-size: 18px;
    font-weight: 400;
}
.user--notification-dynamic-inside-2 h2 {
        font-size: 18px;
        font-weight: 400;
    }
    .user--notification-dynamic-inside-3 h2 {
        font-size: 18px;
        font-weight: 400;
        color: #6e6e6e;
    }
.user--popup-dynamic-inside h2 {
        font-size: 22px;
        font-weight: 400;
        text-align: center;
    }
    .user--popup-dynamic-inside h2 b {
        font-weight: 900;
    }
    .user--popup-dynamic-inside h3 {
        font-size: 33px;
        font-weight: 600;
        text-transform: uppercase;
       /* padding-block-end: 20px; */
    }
    .user--popup-dynamic-inside span {
        font-size: 20px;
        font-weight: 400;
        color: #7B7B7B;
        width: 90%;
    }
    .slide-in-blurred-top-cntr {
        -webkit-animation: slide-in-blurred-top-cntr 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
                animation: slide-in-blurred-top-cntr 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
      }
      
      @-webkit-keyframes slide-in-blurred-top-cntr {
        0% {
          -webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2) translate(-50%, -50%);
                  transform: translateY(-1000px) scaleY(2.5) scaleX(0.2) translate(-50%, -50%);
          -webkit-filter: blur(40px);
                  filter: blur(40px);
          opacity: 0;
        }
        100% {
          -webkit-transform: translateY(0) scaleY(1) scaleX(1) translate(-50%, -50%);
                  transform: translateY(0) scaleY(1) scaleX(1) translate(-50%, -50%);
          -webkit-filter: blur(0);
                  filter: blur(0);
          opacity: 1;
        }
      }
      
      @keyframes slide-in-blurred-top-cntr {
        0% {
          -webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2) translate(-50%, -50%);
                  transform: translateY(-1000px) scaleY(2.5) scaleX(0.2) translate(-50%, -50%);
          -webkit-filter: blur(40px);
                  filter: blur(40px);
          opacity: 0;
        }
        100% {
          -webkit-transform: translateY(0) scaleY(1) scaleX(1) translate(-50%, -50%);
                  transform: translateY(0) scaleY(1) scaleX(1) translate(-50%, -50%);
          -webkit-filter: blur(0);
                  filter: blur(0);
          opacity: 1;
        }
      }
      .slide-out-blurred-top-cntr {
        -webkit-animation: slide-out-blurred-top-cntr 0.45s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
                animation: slide-out-blurred-top-cntr 0.45s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
      }
      
      @-webkit-keyframes slide-out-blurred-top-cntr {
        0% {
          -webkit-transform: translateY(0) scaleY(1) scaleX(1) translate(-50%, -50%);
                  transform: translateY(0) scaleY(1) scaleX(1) translate(-50%, -50%);
          -webkit-filter: blur(0);
                  filter: blur(0);
          opacity: 1;
        }
        100% {
          -webkit-transform: translateY(-1000px) scaleY(2) scaleX(0.2) translate(-50%, -50%);
                  transform: translateY(-1000px) scaleY(2) scaleX(0.2) translate(-50%, -50%);
          -webkit-filter: blur(40px);
                  filter: blur(40px);
          opacity: 0;
        }
      }
      
      @keyframes slide-out-blurred-top-cntr {
        0% {
          -webkit-transform: translateY(0) scaleY(1) scaleX(1) translate(-50%, -50%);
                  transform: translateY(0) scaleY(1) scaleX(1) translate(-50%, -50%);
          -webkit-filter: blur(0);
                  filter: blur(0);
          opacity: 1;
        }
        100% {
          -webkit-transform: translateY(-1000px) scaleY(2) scaleX(0.2) translate(-50%, -50%);
                  transform: translateY(-1000px) scaleY(2) scaleX(0.2) translate(-50%, -50%);
          -webkit-filter: blur(40px);
                  filter: blur(40px);
          opacity: 0;
        }
      }
            
  .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--auth-waiting {
        -webkit-animation: puff-in-center 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
                animation: puff-in-center 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
  }
  @-webkit-keyframes puff-in-center {
    0% {
      -webkit-transform: scale(2);
              transform: scale(2);
      -webkit-filter: blur(4px);
              filter: blur(4px);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  @keyframes puff-in-center {
    0% {
      -webkit-transform: scale(2);
              transform: scale(2);
      -webkit-filter: blur(4px);
              filter: blur(4px);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  
  .user--flex-wrap {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
        align-items: center;
    position: fixed;
    background-color: transparent; 
    top: 0%;
    pointer-events: none;
    z-index: 10000;
}  
.user--notification-close-btn {
        width: 35px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ffffff;
        border-radius: 5rem; 
}
.mainpage--invitational-block {
        width: 70%;
        height: max-content;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 20px;
        font-size: 22px;
        font-weight: 400;
        border-radius: 15px;
        position: fixed;
        z-index: 3;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -60%);
        background-color: rgba(255, 255, 255, 0.9);
        box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 2px 2px;       
        backdrop-filter: blur(2px);  /* Apply a blur effect only to the background */
        -webkit-backdrop-filter: blur(2px);  /* For Safari and older Chrome browsers */
    }
    .mainpage-iframe {
        width: 100vw; height: 100vh; border: none; display: flex; justify-content: center; align-items: center; pointer-events: none;  
    }
    .slide-iframe-pdf {
        border: none; display: flex; gap: 0px; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: max-content;
    }
    .puff-out-center {
	-webkit-animation: puff-out-center 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
	        animation: puff-out-center 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2024-4-29 15:54:49
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation puff-out-center
 * ----------------------------------------
 */
 @-webkit-keyframes puff-out-center {
        0% {
          -webkit-transform: scale(1);
                  transform: scale(1);
          -webkit-filter: blur(0px);
                  filter: blur(0px);
          opacity: 1;
        }
        100% {
          -webkit-transform: scale(2);
                  transform: scale(2);
          -webkit-filter: blur(4px);
                  filter: blur(4px);
          opacity: 0;
        }
      }
      @keyframes puff-out-center {
        0% {
          -webkit-transform: scale(1);
                  transform: scale(1);
          -webkit-filter: blur(0px);
                  filter: blur(0px);
          opacity: 1;
        }
        100% {
          -webkit-transform: scale(2);
                  transform: scale(2);
          -webkit-filter: blur(4px);
                  filter: blur(4px);
          opacity: 0;
        }
      }
      

    
    
.user--notification-close-btn svg {
        width: 35px;
        height: 35px;
        fill: #0c5ca4;
}
.user--popup-dynamic-wrap {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
            align-items: center;
        position: fixed;
        background-color: rgba(255, 255, 255, 0.85);
        -webkit-backdrop-filter: blur(12.5px);
        backdrop-filter: blur(12.5px);
        top: 0%;
    }  
.user--classroom-wrap {
    width: 100%;
    overflow-x: hidden;
    height: 100%;
    min-height: 100vh;
}
/* ----------------------------------------------
 * Generated by Animista on 2023-1-20 17:43:42
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation puff-in-center
 * ----------------------------------------
 */
 @-webkit-keyframes puff-in-center {
    0% {
      -webkit-transform: scale(2);
              transform: scale(2);
      -webkit-filter: blur(4px);
              filter: blur(4px);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  @keyframes puff-in-center {
    0% {
      -webkit-transform: scale(2);
              transform: scale(2);
      -webkit-filter: blur(4px);
              filter: blur(4px);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  /* ----------------------------------------------
 * Generated by Animista on 2023-1-21 1:18:19
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-blur-out
 * ----------------------------------------
 */
@-webkit-keyframes text-blur-out {
    0% {
      -webkit-filter: blur(0.01);
              filter: blur(0.01);
    }
    100% {
      -webkit-filter: blur(12px) opacity(0%);
              filter: blur(12px) opacity(0%);
    }
  }
  @keyframes text-blur-out {
    0% {
      -webkit-filter: blur(0.01);
              filter: blur(0.01);
    }
    100% {
      -webkit-filter: blur(12px) opacity(0%);
              filter: blur(12px) opacity(0%);
    }
  }
  
.blur-out {
	-webkit-animation: text-blur-out 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-blur-out 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.puff-out-center {
	-webkit-animation: puff-out-center 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
	        animation: puff-out-center 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2023-1-21 1:34:59
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation puff-out-center
 * ----------------------------------------
 */
 @-webkit-keyframes puff-out-center {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
    100% {
      -webkit-transform: scale(2);
              transform: scale(2);
      -webkit-filter: blur(4px);
              filter: blur(4px);
      opacity: 0;
    }
  }
  @keyframes puff-out-center {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
    100% {
      -webkit-transform: scale(2);
              transform: scale(2);
      -webkit-filter: blur(4px);
              filter: blur(4px);
      opacity: 0;
    }
  }
  .html--fixed-area {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  .loading-indicator {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40px;
        font-weight: 500;
        background-color: #fffffffa;
  }
  .slide-in-blurred-top {
	-webkit-animation: slide-in-blurred-top 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
	        animation: slide-in-blurred-top 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2023-1-21 17:43:25
 * 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.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
	        animation: slide-out-blurred-top 0.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2023-1-21 17:44:8
 * 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--achievement-block-content-preview {
    width: 100px;
    min-width: 100px;
    height: 100px;
    background: #4DA6D9;
    /* border: 2.5px solid #000000; */
position: relative;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
  }
  .user--achievement-block-content-preview span {
    font-weight: 600;
    font-size: 13px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    /* text-align: center; */
    color: #000000;
    backdrop-filter: blur(12.5px);
    -webkit-backdrop-filter: blur(12.5px);
    padding: 5px;
    border-radius: 10px;
}
.more-circle-variant {
    border-radius: 5px !important;
}
.user—popup-achievement-wrap {
    width: 100%;
height: max-content;
display: flex;
flex-direction: column;
gap: 20px;
justify-content: center;
align-items: center;
padding-block-end: 80px;
}
.user--join-createform-wrapper {
        width: 100%;
        height: max-content;
}
.teacher—cclass-wrap {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        align-items: center;
}
.user--main-delimeter-short {
        width: 15px;
        height: 15px;
        background-color: #e4e4e4;
        border-radius: 5rem;
}
.user—popup-collection-wrap {
    width: 100%;
height: max-content;
display: flex;
flex-direction: column;
gap: 20px;
justify-content: center;
align-items: center;
}
.user—popup-videos-wrap {
        width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    }
    .user—popup-stories-wrap {
        width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    }
    .user—popup-goals-wrap {
        width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    align-items: center;
    }
    .user--popup-schedule-teacher-name {
        font-size: 25px;
        font-weight: 450;
        align-self: flex-start;
        margin-inline-start: 5%;
    }
    .demo-class-inner {
        width: 90%;
        height: max-content;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 15px;
        min-height: 90%;
        align-self: start;
        justify-self: center;
        margin: 0 auto;
        border-radius: 15px;
        background-color: #ffffff;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
        padding: 30px;
    }
    .signup-class-inner {
        width: 90%;
        height: max-content;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 15px;
        min-height: 90%;
        align-self: start;
        justify-self: center;
        margin: 0 auto;
        border-radius: 15px;
        background-color: #ffffff;
        padding: 30px;
    }
    .demo-class-slide-header {
        text-align: center;
        width: 100%;
        height: max-content;
        font-size: 35px;
        font-weight: 700;
    }
    .intro-class-character img {
        width: 200px !important;
        height: 200px !important;
    }
    .user--popup-schedule-main-inner {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: row;
        gap: 20px;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        margin-block-end: 50px;
    } 
    .user--popup-schedule-main-inner-m {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: row;
        gap: 20px;
        justify-content: center;
        align-items: start;
        flex-wrap: wrap;
        margin-block-end: 50px;
    }
    .demo-class-main-block, .signup-class-main-block {
        width: 100vw;
        height: max-content;
        padding-block: 10px;
        display: flex;
    }
    .user--popup-schedule-main-inner-block {
        width: 30%;
        max-width: 30%;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        align-items: center;
        border-radius: 40px;
        background-color: #ffffff;
        border: 3px solid #0C5CA450;
        padding: 20px;
        position: relative;
    }
    .user--popup-schedule-main-inner-block-header {
        font-size: 22px;
        font-weight: 900;
        width: 100%;
        border-radius: 5rem;
        padding: 15px;
        justify-content: center;
        align-items: center;
        background-color: #0C5CA450;
        display: flex;
        gap: 10px;
        align-items: center;
        color: #ffffff;
    }
    .user--popup-schedule-main-inner-block-night {
        width: 70%;
        height: max-content;
        display: flex;
        gap: 30px;
        justify-content: space-between;
        border-radius: 5rem;
        box-shadow:rgba(0, 60, 114, 0.5) 0px 0px 2px 2px;
        font-size: 20px;
        font-weight: 500;
    }
    .user--popup-schedule-main-inner-block-night-icon {
        width: max-content;
        height: max-content;
    }
    .user--language-switch-title {
        font-size: 25px;
        font-weight: 600;
        color: #000000;
        align-self: flex-start;
        margin-block-start: 15px;
    }
    .user--language-switch-options-block {
        width: 100%;
        margin-block-end: 15px;
        padding: 30px;
        height: max-content;
        display: flex;
        gap: 20px;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border-radius: 15px;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
    }
    .user--language-switch-option {
        width: max-content;
        height: max-content;
        display: flex;
        font-size: 20px;
        gap: 20px;
        justify-content: center;
        align-items: center;
        padding-inline: 60px;
        padding-block: 10px;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
        cursor: pointer;
        transition: all 0.3s linear;
    }
    .user--language-switch-option:hover {
        box-shadow: rgba(12, 92, 164, 0.5) 0px 0px 2px 2px;
        font-weight: 600;
        color: rgba(12, 92, 164, 1);
    }
    .user--class-intro-content-box {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .intro--sticker-block {
        width: 100%;
        height: max-content;
        padding: 20px;
        box-shadow:rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        align-items: center;
    }
    .intro--sticker-block-name { 
        width: max-content;
        height: max-content;
        font-size: 25px;
        font-weight: 500;
        margin: 0 auto;
    }
    .intro--sticker-block-sticker {
        width: max-content;
        height: max-content;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .intro--sticker-block-sticker img {
        width: 250px;
        height: 250px;
        object-fit: cover;
    }
    .user--language-switch-option-selected {
        /* background-color: rgba(12, 92, 164, 0.5); */
        box-shadow: rgba(12, 92, 164, 0.5) 0px 0px 2px 2px;
        font-weight: 600;
        color: rgba(12, 92, 164, 1);
        pointer-events: none;
    }
    .user--popup-schedule-main-inner-block-time-slot {
        position: relative;
        width: 100%;
        height: max-content;
        display: flex;
        gap: 10px;
        justify-content: space-between;
        align-items: center;
        border-radius: 5rem;
        padding: 15px;
        justify-content: center;
        align-items: center;
        background-color: white;
        font-size: 22px;
        flex-direction: column;
        color: #5c5c5c;
        font-weight: 350;
        min-height: 55px;
        border: 2px solid #0C5CA450;
    }

    .user--popup-schedule-main-inner-block-time-slot-expand-info {
        width: 25px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        order: 1;
        box-shadow : rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
        border-radius: 5rem;
        cursor: pointer;
    }
    .user--popup-schedule-main-inner-block-expand {
        width: 40px;
        height: 40px;
        padding: 5px;
        border-radius: 5rem;
        background-color: #ffffff;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 50%;
        bottom: 0px;
        transform: translate(50%, 50%);
    }
    .user--popup-schedule-main-inner-block-expand svg {
        width: 100%;
        height: 100%; 
    }
    .user--popup-schedule-main-inner-block-time-slot-expand-info svg {
        width: 100;
        height: 100%;
        transition: all 0.3s ease;
    }
    .hidden {
        display: none;
    }
    .user--popup-schedule-main-inner-block-time-slot-expand-info:hover svg path:first-child {
        fill:rgba(51, 114, 173, 1)
    }
    .user--popup-schedule-main-inner-block-time-slot-expand-info:hover svg path:last-child {
        fill:white;
    }
    .user--popup-schedule-main-inner-block-time-slot span {
        font-size: 18px;
        font-weight: 450;
    }
    .user--popup-schedule-main-inner-block-time-slot-time {
        font-size: 15px;
        padding-inline: 10px;
        padding-block: 5px;
        border-radius: 5rem;
        background-color: #ffffff;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
        position: absolute;
        left: 50%;
        top: 0px;
        transform: translate(-50%, -50%);
        display: flex;  
        justify-content: center;
        align-items: center;
    }
    .user--popup-schedule-main-inner-block-night-icon svg {
        width: 20px;
        height: 20px;
    }
    .user—popup-schedule-wrap {
        width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    align-items: center;
    }
    .user—popup-card-wrap {
        width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    align-items: center;
    }


.user—popup-collection-block-wrap {
        width: calc(50% - 10px);
        height: max-content;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        gap: 15px;
        background-color: white;  
        border-radius: 10px;
        padding: 30px;
        min-height: 300px;
}
.user—popup-collection-block-wrap h2 {
        font-size: 30px;
        font-weight: 500;
        text-align: left;
}
.user—popup-collection-block-wrap h3 {
        font-size: 18px;
        font-weight: 400;
        text-align: left;
        padding-inline-start: 10%;
}
.user—popup-collection-block-wrap-delim {
        width: 50%;
        height: 3px;
        border-radius: 5rem;
        background-color: #F5F5F5;
        margin-inline-start: 5%;
}
.user--popup-achievement-block {
    background: #F5F5F5;
    border: 0;
    border-radius: 15px;
    width: 100%;
    height: max-content;
    padding: 20px;
    display: flex;
    align-items: center; 
    flex-direction: column;
    gap: 25px;
    justify-content: center;
}
.user--popup-video-block {
        background: rgba(217, 217, 217, 0.3);
        border: 2.5px solid #D9D9D9;
        border-radius: 5rem;
        width: 90%;
        height: max-content;
        padding: 13px;
        display: flex;
        align-items: center; 
        justify-content: space-between;
    }
    .user--popup-goals-block {
        background: #ffffff;
        border: 0;
        border-radius: 5rem;
        width: 100%;
        height: max-content;
        padding: 13px;
        display: flex;
        align-items: center; 
        justify-content: space-between;
       border: 1px solid #0C5CA450;
    }
    .user--popup-story-block {
        background: rgba(217, 217, 217, 0.3);
        border: 2.5px solid #D9D9D9;
        border-radius: 20px;
        width: 90%;
        height: max-content;
        padding: 20px;
        display: flex;
        align-items: center; 
        justify-content: center;
    }
    .user--popup-story-block-inside {
width: 100%;
height: max-content;
display: flex;
flex-direction: column;
gap: 15px;
color: #000000;
font-family: inherit;
        }
    .user--popup-story-block-inside h1 {
font-size: 35px;
font-weight: 600;
margin-block: 0;
    }
    .user--popup-story-block-inside h2 {
font-size: 22px;
font-weight: 400;
width: 70%;
margin: 0 auto;

    }
    .intro-class-continue-button, .welcome--block-three-main-showcase-inside-button, .notfound-return-button {
        width: max-content;
        height: max-content;
        font-size: 25px;
        font-weight: 450;
        color: #000000;
        padding-block: 10px;
        padding-inline: 20px;
        border-radius: 10px;
        box-shadow: rgba(12, 92, 164, 0.5) 0px 0px 2px 2px;
        transition: all 0.15s linear;
        cursor: pointer;
        margin-block: 20px;
    }
    .intro-class-continue-button-inactive { 
        pointer-events: none !important;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 2px 2px !important;
        background-color: #f1f1f1 !important;
        color: #b1b1b1 !important;
    }
    .intro-class-continue-button:hover, .welcome--block-three-main-showcase-inside-button:hover, .notfound-return-button:hover {
        color: rgba(12, 92, 164, 1);

    }
.user--popup-story-block-button {
        border: 2.5px solid #D9D9D9;
border-radius: 50px;
background: transparent;
font-weight: 700;
font-size: 22px;
color: #0C5CA4;
padding: 10px;
width: max-content;
text-transform: uppercase;
margin: 0 auto;
margin-block: 15px;
}
.user--preview-conduct-info {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: max-content;
        margin-block: 25px;
}
.user--preview-logout {
        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;
        width: max-content;
        font-family: inherit;
        background-color: #ffffff;
}
    .user--popup-video-block-p1 {
display: flex;
width: max-content;
justify-content: center;
align-items: center;
gap: 20px;
    }
    .user--popup-goals-block-p1 {
        display: flex;
        width: max-content;
        justify-content: center;
        align-items: center;
        gap: 20px;
            }
    .user--popup-video-block-p1 img {
        width: 50px;
        height: 50px;
        border-radius: 5rem;
    }
    .user--popup-video-block-p1 h2 {
        font-weight: 500;
        font-size: 30;
        font-family: inherit;
    }
    .user--popup-goals-block-p1 h2 {
        font-weight: 350;
        font-size: 30px;
        color: #5c5c5c;
        font-family: inherit;
    }

    .user--popup-video-block-p2 {
        display: flex;
        width: max-content;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }
    .user--popup-stories-block-p2 {
        display: flex;
        width: max-content;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }
    .user--popup-goals-block-p2 {
        display: flex;
        width: max-content;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }
    .user--popup-goals-block-p2 { 
        font-weight: 500;
        color: #5c5c5c;
        font-size: 22px;
    }
    .user--popup-video-block-p2 span {
        font-weight: 400;
        font-size: 22;
        font-family: inherit;
    }
    .user--popup-stories-block-p2 span {
        font-weight: 400;
        font-size: 22;
        font-family: inherit;
    }
    .user--popup-video-block-p2-circle {
        width: 50px;
        height: 50px;
        background-color: transparent;
        border: 2.5px solid #D9D9D9;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5rem;
    }
    .user--popup-video-block-p2-circle svg {
        width: 50%;
        height: 50%;
    }
   
    .user--popup-story-block-circle svg {
        width: 50%;
        height: 50%;
    }

.popup--header {
    margin-block: 15px;
    font-size: 45px;
    font-weight: 800;
}
.user--class-num {
        margin-block-start: 27px;
        margin-block-end: 0px !important; 
        font-size: 45px;
        font-weight: 700;
}
.user--class-name {
        margin-block-start: 15px !important;
        margin-block-end: 27px !important;
        font-size: 35px;
        font-weight: 500;
}
.slide-in-blurred-bottom {
	-webkit-animation: slide-in-blurred-bottom 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
	        animation: slide-in-blurred-bottom 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2023-1-22 1:14:39
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-blurred-bottom
 * ----------------------------------------
 */
 @-webkit-keyframes slide-in-blurred-bottom {
    0% {
      -webkit-transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
              transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
      -webkit-transform-origin: 50% 100%;
              transform-origin: 50% 100%;
      -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-bottom {
    0% {
      -webkit-transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
              transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
      -webkit-transform-origin: 50% 100%;
              transform-origin: 50% 100%;
      -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;
    }
  }
  .video-preview {
    background-repeat: no-repeat;
    background-size: cover;
  }
  .user--video-preview-wrap, .user--stories-preview-wrap {
   height: max-content;
   padding: 20px;
   /* background: rgba(217, 217, 217, 0.5); */
   border-radius: 5rem;
   display: flex;
   flex-direction: row;
   gap: 22px;
   justify-content: center;
   align-items: center;
   width: 100%;
  }

  .user--video-preview-wrap img, .user--stories-preview-wrap img {
    width: 60px;
    height: 60px;
    border-radius: 5rem;
    border: 2.5px solid #D9D9D9;
  }
 .user--stories-circle-wrap {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: max-content;
    height: max-content;
 }
 .user--stories-names-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: max-content;
    flex-direction: column;
    max-height: 120px;
    overflow-y: scroll;
    -ms-overflow-style: none; 
    scrollbar-width: none;  
 }
 .user--stories-names-wrap::-webkit-scrollbar {
    -ms-overflow-style: none; 
    scrollbar-width: none;  
 }
 .user--stories-names-wrap span {
    font-size: 20px;
    font-family: inherit;
    font-weight: 500;
    color: #000000;
 }
  .user--stories-preview-circle {
    width: 60px;
    height: 60px;
    background-color: transparent;
    border: 2.5px solid #D9D9D9;
    border-radius: 5rem;
  }
  .user--stories-preview-name {
    width: max-content;
    height: max-content;
    font-size: 16px;
    background-color: rgba(235, 235, 235, 0.5);
    font-family: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .user--video-preview-more, .user--stories-preview-more {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: max-content;
    height: max-content;
    gap: 5px;
    margin-inline-start: 10px;
  }
  .user--video-preview-more-el, .user--stories-preview-more-el {
    width: 30px;
    height: 10px;
    background: #D9D9D9;
    border-radius: 20px;
  }
  .user--preview-bcg-image {
    background-size: cover;
    background-repeat: no-repeat;
    object-fit: cover;
  }
  .user--form-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0);
        display: flex;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px); /* For Safari */
        z-index: 1000;
    }
    
    .user--form-overlay::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px); /* For Safari */
        z-index: -999; /* Ensure it is behind the overlay content */
    }
    
    .user--form-popup {
        background: white;
        padding: 20px;
        padding-block: 30px;
        padding-inline: 50px;
        border-radius: 30px;
        position: relative;
        z-index: 1;
        width: 90%;
        height: 90%;
        overflow-y: scroll;
    }
    
    .user--form-close-button {
        position: absolute;
        top: 10px;
        right: 10px;
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
    }
     
  .user--block-collection-inside-wrap {
        width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-radius: 30px;
  }
  .user--block-collection-inside-block {
   width: 100%;
   display: grid;
   grid-template-columns: 1fr 3fr;
   justify-content: center;
   align-items: center;
  }
  .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: 15px;
    }
    .user--class-pagination-number-container-number {
        font-size: 25px;
        font-weight: 500;
        color: #000000;
       /* padding-block-end: 5px; */
        border-bottom: 2px solid #000000;
        cursor: pointer;
        transition: all 0.15s linear;
    }

    .user--stickers-extended-personal-name {
        width: 100%;
        display: flex;
        align-items: flex-start;
        font-size: 35px;
        font-weight: 500;
        color: #000000;
        height: max-content;
    }
    .user--stickers-extended-personal-wrapper { 
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; 
        width: 100%;
        gap: 20px;
    }
   .user--expanded-achievements-display {
        display: flex;
        flex-direction: column;
        gap: 25px;
        padding-block-start: 40px;
   }
    .user--stickers-extended-personal-inside {
        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;
    justify-content: center;
    align-items: center;
    position: relative;
    gap: 15px;
    padding-block: 20px;
    }
    .user--stickers-extended-personal-image {
        width: 200px;
        position: relative;
        height: max-content;
        min-height: 200px;
        border-radius: 5rem;
        background-size: cover !important;
        background-repeat: no-repeat;
        flex-shrink: 0;
        background-color: transparent;
    }
        .user--stickers-extended-personal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    border-radius: 5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
      }
    .user--stickers-extended-personal-split {
        width: 70%;
        height: 1.5px;
        background-color: #D9D9D9;
        border-radius: 5rem;
    }
    .user--class-pagination-number-container-number-active, .user--class-pagination-number-container-number:hover {
        color: #0C5CA4;
        border-bottom: 2px solid #0C5CA4;
    }
  .user--block-collection-inside-block-image-wrap {
    width: 150px;
    position: relative;
    height: max-content;
    min-height: 150px;
    border-radius: 5rem;
    background-size: cover !important;
    background-repeat: no-repeat;
    flex-shrink: 0;
    background-color: transparent;
  }
  .user--block-collection-inside-block-image-wrap img {
width: 100%;
height: 100%;
object-fit: cover !important;
border-radius: 5rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
  }
  .user--block-collection-image-loader {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        height: 80%;
        object-fit: cover;
  }
  .user--exercise-block-image {
        width: 180px;
        height: max-content;
        object-fit: cover !important;
        border-radius: 10px;
          }
  .user--block-collection-inside-block-text-wrap {
    height: max-content;
    /* max-height: ; */
    font-size: 23px;
    font-family: inherit;
    font-weight: 350;
    color: #5c5c5c;
  }
  .user--collection-preview{
       /*  background-color: rgba(217, 217, 217, 0.5);
        border-radius: 5rem;
        padding: 20px;
        width: 100%;
        border: 2.5px solid #D9D9D9; */
        z-index: -1;
  }
  .user--achievements-preview {
        /* background-color: rgba(217, 217, 217, 0.5);
        border-radius: 5rem;
        padding: 20px;
        border: 2.5px solid #D9D9D9; */
        z-index: -1;
  }
  .user--popup-goals-upcoming, .user--popup-goals-finished {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
  }
  .user--popup-goals-upcoming h1, .user--popup-goals-finished h1 {
        align-self: flex-start;
        font-size: 35px;
        font-weight: 800;
        margin-block: 0;
  }
  .user--warning-block-text {
        font-size: 25px !important;
        font-weight: 400;
        font-family: inherit;
        color: #585858 !important;
        text-align: center;
        width: 100%;
        height: max-content;
        margin-block: 20px;
  }
  .user--warning-block-icon {
        width: 100px;
        height: 100px;
  }
  .user--warning-block-icon svg {
        width: 100%;
        height: 100%;
  }
  .classroom--form-frame-button-wrap {
        width: max-content;
        padding-inline: 20px;
        border-radius: 10px;
        /* box-shadow: rgba(12, 92, 164, 0.5) 0px 0px 2px 2px; */
        height: max-content;
        display: flex;
        flex-direction: row;
        gap: 20px;
        padding-block: 0;
        flex-wrap: wrap;
        margin-block: 10px;
        margin: 0 auto;
  }
.user--card-inside-wrap { 
        display: flex;
        flex-direction: column;
        width: 80%;
        height: max-content;
        position: relative;
        min-height: 100%;
        gap: 20px;
        justify-content: center;
        align-items: center;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
        border-radius: 10px;
        /* position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); */
}
.user--tutoring-inside-wrap { 
        display: flex;
        flex-direction: column;
        width: 90%;
        height: max-content;
        min-height: 100%;
        gap: 30px;
        justify-content: center;
        align-items: center;
}
.createClassForm {
        width: 100%;
        padding: 30px;
        border-radius: 20px;
        margin: 0 auto;
        background-color: transparent;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: start;
        justify-content: center;
    }
    .createClassFormLabel {
        font-size: 20px;
        font-weight: 500;
        text-align: left !important;
    }
    .createClassForm select,
    .createClassForm input[type="datetime-local"] {
        height: 40px;
        background-color: #ffffff;
        width: 500px;
        border: 2px solid #D9D9D9;
        color: #1355A3;
        font-family: 'Rubik', 'Inter', sans-serif;
        border-radius: 10px;
        padding: 20px;
        font-size: 17px;
    }
    
    .createClassForm input[type="submit"], .createClassForm input[type="date"], .createClassForm input[type="time"] {
        border: 2.5px solid #0C5CA4;
        border-radius: 50px;
        background-color: none;
        font-size: 20px;
        color: #0C5CA4;
        text-transform: uppercase;
        align-self: center;
        padding-block: 10px;
        padding-inline: 10px;
        font-weight: 550;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.15s linear;
        margin-block-start: 20px;
        width: max-content;
        }
        .createClassForm input[type="submit"]:hover,  .createClassForm input[type="date"]:hover , .createClassForm input[type="time"]:hover {
        background-color: #0C5CA4;
        color: rgba(255, 255, 255);
    }
    
     
.user--tutoring-inside-text {
font-size: 22px;
font-family: inherit;
font-weight: 400;
text-align: left;
width: 100%;
height: max-content;
} 
.user--tutoring-inside-text img {
        width: 100%;
        height: 100%;
        max-width: 700px;
        max-height: 600px;
        object-fit: cover;
        border-radius: 15px;
        border: 3px solid #D9D9D9;
        margin: 0 auto;
        padding: 20px;
        display: block;
        margin-block-start: 20px;
}
#countdown {
display: block;
font-size: 40px;
font-weight: 500;
margin-block: 10px;
}
.user--card-inside-button-left, .user--card-inside-button-right {
        width: max-content;
        height: max-content;
        padding-inline: 30px;
        padding-block: 7px;
        font-size: 25px;
        font-family: inherit;
        flex: 1;
        border-radius: 10px;
        font-weight: 500;
        transition: all 0.5s ease;
        cursor: pointer;
        position: absolute;
}
.user--line-1px {
        width: 50%;
        height: 5px;
        background-color: #e9e9e9;
        border-radius: 5rem;
        margin-block: 20px;
}
.user--card-inside-word-pinyin {
        width: max-content;
        height: max-content;
       /* padding-inline: 48px; 
        padding-block: 15px; */
        font-size: 20px;
        font-weight: 600;
        padding: 10px;
        color: #000000;
        justify-self: flex-start;
        align-self: flex-start;
        border-radius: 5rem;
       /* border: 2px solid #62a3db; */
}
.user--card-inside-block-word-wrapper {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: row;
        gap: 10px;
        justify-content: center;
        align-items: center;
        cursor: default !important;
}
.user--card-inside-button-continue {
        width: max-content;
        height: max-content;
        padding-inline: 30px;
        padding-block: 7px;
        font-size: 25px;
        font-family: inherit;
        flex: 1;
        border-radius: 10px;
        font-weight: 500;
        transition: all 0.5s ease;
        cursor: pointer;
        position: absolute;
}
.user--card-testing-wrap {
        display: flex;
        flex-direction: column;
        width: 90%;
        height: max-content;
        min-height: 100%;
        gap: 30px;
        justify-content: center;
        align-items: center;
        margin: 0 auto;

}
.user--card-choice-wrap {
        display: flex;
        flex-direction: row;
        width: 90%;
        gap: 15px;
        height: max-content;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
}
.user--card-testing-wrap h1 {
        font-size: 37px;
        font-weight: 600;
        margin-block-start: 30px;
        margin-block-end: 0px;
}
.user--card-inside-button-left {
background-color: #F3DDDE;

color: #CE777C;
top: 0px;
left: 0px;
transform: translate(0%, -50%);
}
.user--card-inside-button-left:hover {
        background-color: #CE777C;
        color: #ffffff;
}
.user--card-inside-button-right:hover {
        background-color: #67B48F;
        color: #ffffff;

}
.user--card-inside-button-right {
        background-color: #D9ECE3;
        color: #67B48F;
        top: 0px;
        right: 0px;
        transform: translate(0%, -50%);
}
.user--card-inside-button-continue {
        background-color: rgba(142, 173, 210, 1);
        color: #0C5CA4;
        top: 0px;
        right: 0px;
        transform: translate(0%, -50%);
        }
        .user--card-inside-button-continue:hover {
                background-color: #0C5CA4;
                color: #ffffff;
        
        }
        .user--card-inside-section-wrapper {
                width: max-content;
                height: max-content;
                padding: 10px;
                display: flex;
                background-color: white;
                border-radius: 10px;
                flex-direction: row;
                gap: 15px;
                justify-content: center;
                align-items: center;
                margin: 0 auto;
                box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 2px 2px;
        }
        .user--card-inside-section {
                font-size: 20px;
                font-weight: 400;
                text-transform: uppercase;
                transition: 0.2s all ease-in-out;
                cursor: pointer;
                margin-inline: 10px;
                color: #000000;
        }
        .user--card-inside-section:hover {
                font-weight: 600;
                color: #0C5CA4;
        }
        .user--card-inside-section-selected {
                font-weight: 600;
                color: #0C5CA4;
        }
        .user--card-inside-section-wrapper-main {
                width: max-content;
                height: max-content;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                gap: 15px;
        }
        .user--card-word-amount-wrapper {
                width: max-content;
                height: max-content;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: row;
                gap: 5px;
        }
        .user--card-inside-section-amount {
                font-size: 20px;
                font-weight: 550;
        }
        .intro--class-introduction-flex {
                display: flex;
                width: 100%;
                height: max-content;
                padding-inline: 5px;
                padding-block: 10px;
                flex-direction: row;
                gap: 20px;
                width: 100%;
                height: max-content;
                justify-content: center;
                align-items: center;
                margin-block: 20px;
        }
        .intro--class-introduction-flex-inside {
                width: 50%;
                font-size: 25px;
                font-weight: 500;
                text-align: center;
                color: #5c5c5c;
        }
.user--card-inside-block {
width: 100%;
background: transparent;
/* border: 2.5px solid #D9D9D9; */
width: 100%;
height: max-content;
/* min-height: // */
display: flex;
flex-direction: column;
gap: 20px;
padding: 30px;
justify-content: space-between;
align-items: center;
}
.user--card-inside-block-word {
font-weight: 500;
color: #5c5c5c;
font-size: 100px;
font-family: inherit;
text-transform: uppercase;
line-height: 0.7;
transition: all 0.15s linear;
}
.welcome--block-big-gap {
        width: 100vw;
        height: 20vh;
}
.user--card-inside-block-buttons-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 20px;
        justify-content: center;
        align-items: center;
        height: max-content;
        flex-wrap: wrap;
}
.user--card-inside-block-buttons-wrap .card-button {
        background-color: transparent;
        font-size: 25px;
        font-weight: 450;
        font-family: inherit;
        padding-inline: 20px;
        border-radius: 10px;
        padding-block: 10px;
        color: rgba(12, 92, 164, 1);
        /* border-bottom: 3px solid #0C5CA4; */
        box-shadow: rgba(12, 92, 164, 0.5) 0px 0px 2px 2px;
        width: max-content;
        margin: 0 auto;
        transition: 0.25s all ease-in-out;
        cursor: pointer;
}
.user--card-inside-block-buttons-wrap .card-clicked {
        background-color: transparent;
        font-size: 25px;
        font-weight: 450;
        font-family: inherit;
        padding-inline: 20px;
        padding-block: 10px;
        color: #D9D9D9;
        border-bottom: 3px solid #D9D9D9;
        pointer-events: none;
        width: max-content;
        margin: 0 auto;
        transition: 0.25s all ease-in-out;
        cursor: pointer;
}
.user--card-generic-button-inactive {
        width: max-content;
        height: max-content;
        padding-inline: 30px;
        padding-block: 7px;
        font-size: 25px;
        font-family: inherit;
        flex: 1;
        border-radius: 10px;
        font-weight: 500;
        transition: all 0.5s ease;
        pointer-events: none !important;
        position: absolute;
        background-color: #f2f2f2;
        color: #D9D9D9;
}
.user--card-button-generic {
        border: 0;
        border-radius: 10px;
        font-size: 20px;
        background-color: #0c5da4;
        color: #ffffff;

        text-transform: uppercase;
        padding-block: 10px;
        padding-inline: 10px;
        font-weight: 550;
        cursor: pointer;
        transition: all 0.15s linear;
        width: max-content;
        }
.user--card-inside-block-buttons-wrap .card-button:hover {   
       color: #ffffff;
       background-color: #0c5da4;
}
.user--preview-logout:hover {
        background-color: #0C5CA4;
        color: rgba(255, 255, 255);
}
.user--card-error-generic-wrap {
        display: flex;
        flex-direction: column;
        gap: 10px;
        font-weight: 450;
        font-size: 30px;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
}
.user--card-button-generic:hover {
        background-color: #0C5CA4;
        color: rgba(255, 255, 255);
}
.user-answer-block-multiple-structure {
         display: grid !important;
         grid-template-columns: repeat(2, 1fr);
         gap: 10px !important;
         position: relative !important;
}
.user--exercise-match-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        position: relative;
}
.user--exercise-item-wrapper {
        width: 100%;
        height: max-content;
        display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       margin-block-start: 20px;
      /* gap: 20px; */
      padding: 30px;
       border-radius: 40px;
       border: 2px solid #0C5CA450;
       background-color: #ffffff;
}
.user--exercise-item-wrapper-gap {
        width: 100%;
        height: max-content;
        display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       margin-block-start: 20px;
        gap: 20px;
      padding: 30px;
       border-radius: 40px;
       border: 2px solid #0C5CA450;
       background-color: #ffffff;
}
.user--exercise-match-image {
    width: 200px;
    height: auto;
    min-height: 200px;
    border-radius: 10px;
}

.image-wrapper {
    position: relative;
    width: max-content;
    min-width: 200px;
    min-height: 200px;
    height: max-content;
    padding: 20px;
}
.user-class-header-wrap ol {
        margin-inline-start: 30px;
}

.image-loader {
    border-radius: 20px;
    width: 120px;
    height: 120px;

    position: absolute;
    top: 50%;
    left: 50%;
   transform: translate(-50%, -50%); 
    opacity: 0.7;
    background: linear-gradient(45deg, rgba(0, 0,0, 0.2) 0%, rgb(255, 255, 255) 100%);
    background-size: 200% 200%;
    animation: shimmer 3.5s infinite, pulsate 7s linear infinite;
}
.user--block-collection-image-loader {
        border-radius: 5rem;
        width: 80px;
        height: 80px;
        opacity: 0.7;
        background: linear-gradient(45deg, rgba(0, 0,0, 0.2) 0%, rgb(255, 255, 255) 100%);
        background-size: 200% 200%;
        animation: shimmer 3.5s infinite, pulsate 7s linear infinite;    
}
.big-image-loader {
        width: 200px;  
        height: 200px;  
        transform: translate(0%, 0%) !important;
    }
    
.user--class-started-image {
        width: 200px;
        height: 150px;
        object-fit: cover;
        margin: 0 auto;
}

@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-match-description {
        font-size: 22px;
        font-weight: 500;
        color: #000000;
        padding-block: 20px;
}
.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-exercise-match-desc {
        width: 100%;
        height: max-content;
        min-height: 80px;
        background-color: transparent;
        text-align: center;
        font-size: 20px;
        font-weight: 350; 
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: inherit;
        letter-spacing: -0.03em;
        resize: none;
        border-radius: 20px 20px 0px 0px;
        background-color: #f4f4f4;
        border: 0;
        padding-inline: 10px; 
        margin-block-end: 2px;
}
.sequence-exercise, .table-list-exercise, .particle-exercise, .image-exercise {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
}
.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--button-clicked {
        cursor: default !important;
        pointer-events: none !important;
        background: transparent !important;
        color: #D9D9D9 !important;
        box-shadow: #98989850 0px 0px 3px 2px !important;
       /* border-bottom: 3px solid #D9D9D9 !important; */
}
.user--card-word-check {
        width: 90%;
        margin: 0 auto;
        margin-block: 20px;
        box-shadow:#0C5CA450 0px 0px 2px 2px;
        border-radius: 10px;
        border: 0;
        height: max-content;
        padding-block: 10px;
        padding-inline: 15px;
                background-color: transparent;
                text-align: center;
                font-size: 20px;
                font-weight: 400;
                font-family: inherit;
                letter-spacing: -0.03em;

}
        .user--card-word-check::placeholder {
                font-size: 20px;
                font-weight: 400;
                font-family: inherit;
                color: #0C5CA450;
        
}
.login--auth-banner {
        width: 350px;
        height: 350px;
        transition: transform 1s ease; 
} 
.login--auth-banner img {
        width: 100%;
        height: 100%;
        object-fit: contain;
}
.user--card-inside-word-margin {
margin-block: 20px; 
}
.user--card-inside-word-translation-wrap {
        width: 50%;
        height: max-content;
        padding-block: 20%;
        padding-inline: 10px;
        background-color: transparent;
        border: 2.5px solid #D9D9D9;
        font-size: 50px;
        font-weight: 700;
        font-family: inherit;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
}
.user--card-inside-word-translation-wrap svg {
        width: 60px;
        height: 60px;
        fill: rgba(217, 217, 217, 1);
        position: absolute;
        top: 5%;
        right: 0%;

}
.puff-in-center-cntr {
        -webkit-animation: puff-in-center-cntr 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
                animation: puff-in-center-cntr 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
      }
      
      @-webkit-keyframes puff-in-center-cntr {
        0% {
          -webkit-transform: scale(2) translate(-50%, -50%);
                  transform: scale(2) translate(-50%, -50%);
          -webkit-filter: blur(4px);
                  filter: blur(4px);
          opacity: 0;
        }
        100% {
          -webkit-transform: scale(1) translate(-50%, -50%);
                  transform: scale(1) translate(-50%, -50%);
          -webkit-filter: blur(0px);
                  filter: blur(0px);
          opacity: 1;
        }
      }
      
      @keyframes puff-in-center-cntr {
        0% {
          -webkit-transform: scale(2) translate(-50%, -50%);
                  transform: scale(2) translate(-50%, -50%);
          -webkit-filter: blur(4px);
                  filter: blur(4px);
          opacity: 0;
        }
        100% {
          -webkit-transform: scale(1) translate(-50%, -50%);
                  transform: scale(1) translate(-50%, -50%);
          -webkit-filter: blur(0px);
                  filter: blur(0px);
          opacity: 1;
        }
      }
      .puff-out-center-cntr {
        -webkit-animation: puff-out-center-cntr 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
                animation: puff-out-center-cntr 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
      }
      
      @-webkit-keyframes puff-out-center-cntr {
        0% {
          -webkit-transform: scale(1) translate(-50%, -50%);
                  transform: scale(1) translate(-50%, -50%);
          -webkit-filter: blur(0px);
                  filter: blur(0px);
          opacity: 1;
        }
        100% {
          -webkit-transform: scale(2) translate(-50%, -50%);
                  transform: scale(2) translate(-50%, -50%);
          -webkit-filter: blur(4px);
                  filter: blur(4px);
          opacity: 0;
        }
      }
      
      @keyframes puff-out-center-cntr {
        0% {
          -webkit-transform: scale(1) translate(-50%, -50%);
                  transform: scale(1) translate(-50%, -50%);
          -webkit-filter: blur(0px);
                  filter: blur(0px);
          opacity: 1;
        }
        100% {
          -webkit-transform: scale(2) translate(-50%, -50%);
                  transform: scale(2) translate(-50%, -50%);
          -webkit-filter: blur(4px);
                  filter: blur(4px);
          opacity: 0;
        }
      }
            
.puff-in-center {
	-webkit-animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
	        animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}
 @-webkit-keyframes puff-in-center {
        0% {
          -webkit-transform: scale(2);
                  transform: scale(2);
          -webkit-filter: blur(4px);
                  filter: blur(4px);
          opacity: 0;
        }
        100% {
          -webkit-transform: scale(1);
                  transform: scale(1);
          -webkit-filter: blur(0px);
                  filter: blur(0px);
          opacity: 1;
        }
      }
      @keyframes puff-in-center {
        0% {
          -webkit-transform: scale(2);
                  transform: scale(2);
          -webkit-filter: blur(4px);
                  filter: blur(4px);
          opacity: 0;
        }
        100% {
          -webkit-transform: scale(1);
                  transform: scale(1);
          -webkit-filter: blur(0px);
                  filter: blur(0px);
          opacity: 1;
        }
      }
      
      .puff-out-center {
	-webkit-animation: puff-out-center 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
	        animation: puff-out-center 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
}

 @-webkit-keyframes puff-out-center {
        0% {
          -webkit-transform: scale(1);
                  transform: scale(1);
          -webkit-filter: blur(0px);
                  filter: blur(0px);
          opacity: 1;
        }
        100% {
          -webkit-transform: scale(2);
                  transform: scale(2);
          -webkit-filter: blur(4px);
                  filter: blur(4px);
          opacity: 0;
        }
      }
      @keyframes puff-out-center {
        0% {
          -webkit-transform: scale(1);
                  transform: scale(1);
          -webkit-filter: blur(0px);
                  filter: blur(0px);
          opacity: 1;
        }
        100% {
          -webkit-transform: scale(2);
                  transform: scale(2);
          -webkit-filter: blur(4px);
                  filter: blur(4px);
          opacity: 0;
        }
      }
.user--cards-inside-notification-image {
        width: 300px;
        height: 250px;
        border-radius: 20px;
        margin: 0 auto;
        object-fit: cover;
        margin-block: 25px;
}
.login-auth-frame {
        width: 100%;
        height: max-content;
        margin: 0 auto;
        padding: 30px;
        border-radius: 40px;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(12.5px);
        -webkit-backdrop-filter: blur(12.5px);
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        align-items: center;
        border: 2px solid #0C5CA450;
}
.user--cards-inside-notification-wait {
        width: 300px;
        height: 250px;
        border-radius: 20px;
        margin: 0 auto;
        background-color: transparent;
        border: 2.5px solid #D9D9D9;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-block: 25px;
}
.user--long-option-wrapper-example-style {
       box-shadow: 0 0 2px 2px rgba(12, 92, 164, 0.3);
       position: relative;
       border-radius: 10px;
}
.user--long-option-wrapper-example-style::after {
        content: "пример";
        text-transform: uppercase; 
        font-weight: 500;
        font-size: 17px;
        display: block;
        position: absolute; 
        top: 0;
        right: 0;
        transform: translate(25%, -50%);
        border-radius: 5rem; 
        padding: 5px 10px; 
        background-color: rgba(12, 92, 164, 0.6);
        color: #ffffff;
      }
.user--cards-inside-notification-wait svg {
        width: 40%;
        height: 40%;
        fill: #D9D9D9;
}
.user--cards-inside-assoc-wrap {
        width: 90%;
        height: max-content;
        border: 2.5px solid #0C5CA4;
        background-color: #ffffff;
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        min-height: 250px;
        position: relative;
}
.teacher--control-div {
  width: 100%;
  height: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline: 10px;
  padding-block: 20px;
  gap: 13px;
  flex-wrap: wrap;
  /* border-radius: 20px; */
 border-top: 1px solid #D9D9D9;
 border-bottom: 1px solid #D9D9D9;
}
.user--main-small-popup-block-loader-wrap {
        width: 100%;
        height: max-content;
        min-height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
}
.user--schedule-person-info-header {
        font-size: 22px;
        font-weight: 500;
        margin-inline-start: 10px;
        margin-block-start: 20px;
        display: flex;
        flex-direction: column;
        gap: 30px;
}
.user--schedule-person-info-block {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: row;
        gap: 20px;
        justify-content: center;
        align-items: center;
        padding-inline: 20px;
        padding-block: 30px;
        border-radius: 15px;
        box-shadow: #0C5CA450 0px 0px 2px 2px;
        background-color: #ffffff;
}
.user--schedule-person-info-block-left, .user--schedule-person-info-block-right {
        width: 50%;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
        align-items: start;     
        flex: 1;
}
.user--schedule-person-info-block-left {
        padding-inline-start: 10px;
}
.user--schedule-person-info-title {
        font-size: 20px;
        font-weight: 500;
        text-align: left;
        color: #454545;
}
.user--schedule-person-info-block-left span {
        font-size: 20px;
        font-weight: 400;
        text-align: left; 
}
.teachers--main-block {
        width: 90%;
        margin-block: 30px;
        margin: 0 auto;
        height: max-content;
        padding-block: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
}

.user--payment-block {
        width: 90%;
        height: max-content;
        display: flex;
        padding-inline: 30px;
        padding-block: 30px;
        flex-direction: column;
        gap: 30px;
        justify-content: center;
        align-items: center;
        box-shadow: rgba(0, 0, 0,0.1) 0px 0px 2px 2px;
        border-radius: 15px;
}
.user--action-button-wrap {
        width: max-content;
        height: max-content;
        display: flex;
        flex-direction: row;
        gap: 20px;
        justify-content: center;
        align-items: center; 
        margin: 0 auto;
}
.payment-info-upper {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: row;
        gap: 20px;
        justify-content: space-between;
}
.payment-info-lower {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        align-items: center;
}
.payment-info-lower span {
        font-size: 22px;
        font-weight: 400;
}
.payment-info-upper span {
        font-size: 25px;
        font-weight: 500;
}
.user--payment-status {
        font-size: 25px;
        font-weight: 600;
        text-transform: uppercase;
        color: #ffffff;
        width: max-content;
        padding-inline: 20px;
        padding-block: 10px;
        border-radius: 50px;
}
.user--status-paid {
        background-color: #5399d4;
}
.user--status-completed {
        background-color: #54C28D;
}
.user--status-pending {
        background-color: #E08893;
}
.notfound--main-block {
        width: 90%;
        margin-block: 30px;
        margin: 0 auto;
        height: max-content;
        padding-block: 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
}
.teachers--desc-image, .notfound--desc-image {
        width: 150px;
        height: 150px;
        border-radius: 50rem;
        background: linear-gradient(45deg, #0c5ca420, #0c5ca450);
        display: flex;
        justify-content: center;
        align-items: center;
}
.teachers--desc-image img, .notfound--desc-image img {
        width: 90%;
        height: 90%;
        object-fit: cover;
}
.user--slide-builder-input {
        width: 100%;
        border: 2px solid #b8cce3;
        padding: 15px;
        font-size: 20px;
        border-radius: 50px;
        font-family: inherit;
        -webkit-appearance: none;
        color: #5c5c5c;
        font-weight: 350;
        -moz-appearance: none; -webkit-appearance: none; appearance: none;
        }
.teachers--main-block h1, .notfound--desc-image h1 {
        font-weight: 500;
        font-size: 35px;
        width: max-content;
        margin: 0 auto;
        margin-block: 30px;
        max-width: 90%;
}
.teacher--continue-button-wrapper {
        display: flex;
        margin-block-end: 20px;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 30px;
}

.service--teacher-info-main {
        width: 60%;
        margin: 0 auto;
        padding-inline: 30px;
        padding-block: 40px;
        border-radius: 20px;
        box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        align-items: center;
}
.service--teacher-info-main-pic {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: contain;
        box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
}
.service--teacher-info-main-name {
        font-size: 30px;
        font-weight: 500;
}
.service--teacher-info-main-price-main { 
        width: 100%;
        height: max-content;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
}
.service--teacher-info-main-price, .service--teacher-info-main-price-desc {
        font-size: 22px;
}
.service--teacher-info-main-price-desc {
        font-weight: 500;
}
.teacher--slide-button,
.teacher--continue-button {
        border: 0;
        box-shadow: #0C5CA450 0px 0px 2px 2px;
        border-radius: 50px;
        font-size: 15px;
        color: #0C5CA4;
        text-transform: uppercase;
        padding-block: 10px;
        padding-inline: 15px;
        font-weight: 550;
        cursor: pointer;
        text-align: center;
        background-color: #ffffff; 
        position: relative;
}
.teacher--slide-button:hover,
.teacher--continue-button:hover {
        box-shadow: #0C5CA4 0px 0px 2px 2px;
        color: #0C5CA4;
        background-color: #0C5CA450;
        transition: all 0.15s linear;
}
.teacher--current-slide {
        color: #d9d9d9;
        pointer-events: none;
        background-color: rgba(0, 0, 0, 0.05);
        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
}
.teacher--current-slide-icon {
        pointer-events: none;
}
.teacher--current-slide-icon svg path {
        fill: #D9D9D9;
}
.teacher--highlighted-element {
       /* box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px; */
       transition: all 0.3s linear;
       /* box-shadow: rgba(194, 11, 3, 0.4) 5px 5px, rgba(194, 11, 3, 0.3) 10px 10px, rgba(194, 11, 3, 0.2) 15px 15px, rgba(194, 11, 3, 0.1) 20px 20px, rgba(194, 11, 3, 0.05) 25px 25px; */
       box-shadow: #0C5CA4 0px 0px 4px 2px!important;
}
.viewed-indicator {
        position: absolute;
        top: -5px;
        right: 3px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #c6d5e8ff;
        box-shadow: #0C5CA4 0px 0px 1px 1px;
    }
    .not-viewed-indicator {
        position: absolute;
        top: -5px;
        right: 3px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 0;
        box-shadow: #0C5CA450 0px 0px 2px 2px;
        background-color: #ffffff; 
    }
.user--cards-inside-assoc-wrap span {
        font-size: 30px;
        font-weight: 600;
}

.user--cards-inside-assoc-select-wrap {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: flex-start;

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

 @-webkit-keyframes slide-in-elliptic-bottom-fwd {
        0% {
                transform: translateX(-50%) translateY(600px) rotateX(30deg) scale(0);
                transform-origin: 50% 100%;
                opacity: 0;
              }
              100% {
                transform: translateX(-50%) translateY(0) rotateX(0) scale(1);
                transform-origin: 50% -1400px;
                opacity: 1;
              }
      }
      @keyframes slide-in-elliptic-bottom-fwd {
        0% {
                transform: translateX(-50%) translateY(600px) rotateX(30deg) scale(0);
                transform-origin: 50% 100%;
                opacity: 0;
              }
              100% {
                transform: translateX(-50%) translateY(0) rotateX(0) scale(1);
                transform-origin: 50% -1400px;
                opacity: 1;
              }
      }
      .slide-out-elliptic-bottom-bck {
	-webkit-animation: slide-out-elliptic-bottom-bck 0.4s ease-in both;
	        animation: slide-out-elliptic-bottom-bck 0.4s ease-in both;
}
@keyframes slide-out-elliptic-bottom-bck {
        0% {
          transform: translateX(-50%) translateY(0) rotateX(0) scale(1);
          transform-origin: 50% -1400px;
          opacity: 1;
        }
        100% {
          transform: translateX(-50%) translateY(600px) rotateX(30deg) scale(0);
          transform-origin: 50% 100%;
          opacity: 1;
        }
      }
      
      @-webkit-keyframes slide-out-elliptic-bottom-bck {
        0% {
          -webkit-transform: translateX(-50%) translateY(0) rotateX(0) scale(1);
          -webkit-transform-origin: 50% -1400px;
          opacity: 1;
        }
        100% {
          -webkit-transform: translateX(-50%) translateY(600px) rotateX(30deg) scale(0);
          -webkit-transform-origin: 50% 100%;
          opacity: 1;
        }
      }
      
.user--cards-inside-assoc-select-individual {
        display: flex;
        flex-direction: column;
        gap: 15px;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        max-width: 40%;
        border-radius: 1rem;
        transition: all 0.1s linear;
        padding: 15px;
}
.image-wrapper-modified {
        width: 120px;
        height: 120px;
        margin-block: 15px;
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
}
.inactive {
        /* background-color: #e2e2e2 !important; */
        pointer-events: none !important;
    }
.inactive svg path {
        color: #f9f9f9;
}    
.image-wrapper-modified img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px;
}
.user--cards-inside-assoc-select-individual:hover {
        background-color: #f9f9f9;
 }
.user--cards-inside-assoc-select-individual-image-wrap {
        width: 130px;
        height: 130px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5rem; 
       /*  background-color: #d9d9d9; */
       background-color: transparent;
        transition: all 0.1s linear;
}
.user--cards-inside-assoc-select-individual img {
        width: 100%;
        height: 100%;
        transition: transform 0.2s ease-in-out;
}
.user--cards-inside-assoc-select-individual:hover img {
        transform: scale(1.2);
      }
.user--cards-inside-assoc-select-individual-desc {
        font-size: 15px;
        font-weight: 450;
        font-family: inherit;
        color: #d9d9d9;
        text-align: center;
}
.user--cards-inside-assoc-select-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;
}
.user--cards-select-assoc-text {
        font-size: 35px;
        font-weight: 600;
        font-family: inherit;
}
.user--cards-inside-assoc-select-button:hover {
        background-color: #0C5CA4;
        color: rgba(255, 255, 255);
        transition: all 0.15s linear;
        border-radius: 10px;
}
.button-primary-after {
        border: 2.5px solid #D9D9D9 !important;
        color: #D9D9D9 !important
}
.button-primary-after:hover {
        border: 2.5px solid #0C5CA4 !important;
        color: #ffffff !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;
        }
      }
      .flip-2-hor-bottom-1 {
	-webkit-animation: flip-2-hor-bottom-1 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: flip-2-hor-bottom-1 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2023-2-2 12:34:13
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-2-hor-bottom-1
 * ----------------------------------------
 */
 @-webkit-keyframes flip-2-hor-bottom-1 {
        0% {
          -webkit-transform: translateY(0) rotateX(0);
                  transform: translateY(0) rotateX(0);
          -webkit-transform-origin: 50% 100%;
                  transform-origin: 50% 100%;
        }
        100% {
          -webkit-transform: translateY(0%) rotateX(360deg);
                  transform: translateY(0%) rotateX(360deg);
          -webkit-transform-origin: 50% 0%;
                  transform-origin: 50% 0%;
        }
      }
      @keyframes flip-2-hor-bottom-1 {
        0% {
          -webkit-transform: translateY(0) rotateX(0);
                  transform: translateY(0) rotateX(0);
          -webkit-transform-origin: 50% 100%;
                  transform-origin: 50% 100%;
        }
        100% {
          -webkit-transform: translateY(0%) rotateX(360deg);
                  transform: translateY(0%) rotateX(360deg);
          -webkit-transform-origin: 50% 0%;
                  transform-origin: 50% 0%;
        }
      } 
      
      .user--cards-inside-button-back {
        position: absolute;
        left: 12px;
        top: 12px;
        width: 25px;
        height: 25px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
     }
     .user--cards-inside-button-back svg {
        width: 100%;
        height: 100%;
        fill: #0C5CA4;
     }

     .flip-2-hor-top-1 {
	-webkit-animation: flip-2-hor-top-1 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: flip-2-hor-top-1 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2023-2-2 13:3:40
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-2-hor-top-1
 * ----------------------------------------
 */
 @-webkit-keyframes flip-2-hor-top-1 {
        0% {
          -webkit-transform: translateY(0) rotateX(0);
                  transform: translateY(0) rotateX(0);
          -webkit-transform-origin: 50% 0%;
                  transform-origin: 50% 0%;
        }
        100% {
          -webkit-transform: translateY(0%) rotateX(-360deg);
                  transform: translateY(0%) rotateX(-360deg);
          -webkit-transform-origin: 50% 100%;
                  transform-origin: 50% 100%;
        }
      }
      @keyframes flip-2-hor-top-1 {
        0% {
          -webkit-transform: translateY(0) rotateX(0);
                  transform: translateY(0) rotateX(0);
          -webkit-transform-origin: 50% 0%;
                  transform-origin: 50% 0%;
        }
        100% {
          -webkit-transform: translateY(0%) rotateX(-360deg);
                  transform: translateY(0%) rotateX(-360deg);
          -webkit-transform-origin: 50% 100%;
                  transform-origin: 50% 100%;
        }
      }
      
      .user--cards-inside-assoc-passive-wrap {
        width: 100%;
        height: max-content;
        padding-inline: 15px;
        font-size: 25px;
        font-weight: 550;
        text-align: center;
      }
      #countdown-close {
        color: rgba(125, 228, 166);
        font-weight: 900;
      }

      @-webkit-keyframes fadeIn { 
        0% { opacity: 0; }
        100% { opacity: 1; }
      }
      
      @keyframes fadeIn {
        0% { opacity: 0; }
        100% { opacity: 1; }
      }

      @-webkit-keyframes fadeOut { 
        0% { opacity: 1; }
        100% { opacity: 0; }
      }
      
      @keyframes fadeOut {
        0% { opacity: 1; }
        100% { opacity: 0; }
      }

 .fadeInWrap {
	-webkit-animation: fadeIn 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: fadeIn 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
.fadeOutWrap {
	-webkit-animation: fadeOut 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: fadeOut 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
.user—assoc-inside-content-block {
        width: 90%;
        height: max-content;
        min-height: 150px;
        background: transparent;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 450;
        border: 0;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 5px;
        font-size: 28px;
        padding: 20px;
        margin-block: 20px;
        text-align: center;
}
.user--card-loader {
        width: 80px;
        height: 80px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
}
.lds-ripple {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 100%;
      }
      .lds-ripple div {
        position: absolute;
        border: 4px solid #D9D9D9;
        opacity: 1;
        border-radius: 50%;
        animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
      }
      .lds-ripple div:nth-child(2) {
        animation-delay: -0.5s; 
      }
      .tilt-in-fwd-tr {
	-webkit-animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.bounce-in-top {
	-webkit-animation: bounce-in-top 1.1s both;
	        animation: bounce-in-top 1.1s both;
}
/* ----------------------------------------------
 * Generated by Animista on 2024-4-25 13:36:14
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-in-top
 * ----------------------------------------
 */
 @-webkit-keyframes bounce-in-top {
        0% {
          -webkit-transform: translateY(-500px);
                  transform: translateY(-500px);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
          opacity: 0;
        }
        38% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
          opacity: 1;
        }
        55% {
          -webkit-transform: translateY(-65px);
                  transform: translateY(-65px);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
        }
        72% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
        81% {
          -webkit-transform: translateY(-28px);
                  transform: translateY(-28px);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
        }
        90% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
        95% {
          -webkit-transform: translateY(-8px);
                  transform: translateY(-8px);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
        }
        100% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
      }
      @keyframes bounce-in-top {
        0% {
          -webkit-transform: translateY(-500px);
                  transform: translateY(-500px);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
          opacity: 0;
        }
        38% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
          opacity: 1;
        }
        55% {
          -webkit-transform: translateY(-65px);
                  transform: translateY(-65px);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
        }
        72% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
        81% {
          -webkit-transform: translateY(-28px);
                  transform: translateY(-28px);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
        }
        90% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
        95% {
          -webkit-transform: translateY(-8px);
                  transform: translateY(-8px);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
        }
        100% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
      }
      
/* ----------------------------------------------
 * Generated by Animista on 2024-4-25 13:32:26
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tilt-in-fwd-tr
 * ----------------------------------------
 */
 @-webkit-keyframes tilt-in-fwd-tr {
        0% {
          -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
                  transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
          opacity: 0;
        }
        100% {
          -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
                  transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
          opacity: 1;
        }
      }
      @keyframes tilt-in-fwd-tr {
        0% {
          -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
                  transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
          opacity: 0;
        }
        100% {
          -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
                  transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
          opacity: 1;
        }
      }
      
      @keyframes lds-ripple {
        0% {
          top: 36px;
          left: 36px;
          width: 0;
          height: 0;
          opacity: 0;
        }
        4.9% {
          top: 36px;
          left: 36px;
          width: 0;
          height: 0;
          opacity: 0;
        }
        5% {
          top: 36px;
          left: 36px;
          width: 0;
          height: 0;
          opacity: 1;
        }
        100% {
          top: 0px;
          left: 0px;
          width: 72px;
          height: 72px;
          opacity: 0;
        }
      }
      
/* Class Inside Module */ 
.user-class-header-wrap {
        width: 100%;
        height: max-content;
        padding: 30px;
        border-radius: 40px;
        /* border: 3px solid #0C5CA450; */
        background-color: #0c5ca410 !important;
        font-size: 26px;
        color: #000000;
        font-weight: 300;
        text-align: center;
        font-family: inherit;
}
.user-signup-header-wrap {
        width: 100%;
        height: max-content;
        padding: 30px;
        border-radius: 40px;
        border: 3px solid #0C5CA450;
        background-color: #ffffff !important;
        font-size: 24px;
        font-weight: 350;
        text-align: left;
        font-family: inherit;
}
.user-intro-header-wrap {
        width: 100%;
        height: max-content;
        padding: 25px;
        border-radius: 40px;
        border: 3px solid #0C5CA450;
        background-color: #0C5CA410 !important;
        font-size: 23px;
        font-weight: 350;
        color: #5c5c5c;
        text-align: left;
        display: flex;
        flex-direction: column;
        gap: 20px;
        font-family: inherit;
}
.user-intro-header-wrap-inner {
        display: flex;
        flex-direction: column;
}
.user-intro-header-wrap-inner img {
        width: 250px;
        height: 250px;
        object-fit: cover;
        border-radius: 20px;
        margin: 0 auto;
        margin-block: 40px;
}
.user-intro-header-wrap-inner h2 { 
        font-size: 25px;
        font-weight: 800;
}
.user-intro-header-wrap-inner p {
        font-size: 23px;
        font-weight: 350;
        color: #5c5c5c;
}
#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: 20px;
        /* 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;
}
.contrib--render-media-selector-desc {
        font-size: 20px;
        font-weight: 450;
        color: #000000;
}
.user--exercise-builder-block-description {
        font-size: 20px;
        font-weight: 350;
        color: #7e7e7e;
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
}
.intro--comment-split {
        width: 90px;
        height: 8px;
        background-color: #0c5ca4;
        margin-block: 40px;
        border-radius: 5rem;
}
.intro--comment-split-smallgap {
        width: 70px;
        height: 5px;
        background-color: #0c5ca4;
        margin-block: 20px;
        border-radius: 5rem;
}
.intro--comment-vertical-delim {
        width: 5px;
        height: 30px;
        border-radius: 15rem;
        background-color: #0c5ca450;
}
.intro--comment-line {
        width: 80%;
        font-size: 25px;
        font-weight: 350;
        color: #5c5c5c; 
}
.intro--comment-main {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: center;
        justify-content: space-between;
        width: 100%;
}
.intro--comment-block {
        width: 100%;
        height: max-content;
        padding: 30px;
        border-radius: 40px;
        border: 3px solid #0C5CA450;
        background-color: #0C5CA410;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        flex-wrap: wrap;
        gap: 20px;
        align-items: center;
}
.intro-comment-block-avatar {
        width: 50px;
        height: 50px;
        border-radius: 5rem;
        background-color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
}
.intro-comment-block-avatar img {
        width: 60%;
        height: 60%;
        object-fit: contain;
}
.user--class-achievements-preview-wrap {
        width: 100%;
        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: 20px;
        object-fit: cover;
}
.user--class-achievements-preview-descriptive { 
        width: 500px;
        height: max-content;
        min-height: 250px;
        padding: 30px;
        border-radius: 40px !important;
        border: 0;
        background-color: #ffffff !important; 
        border: 3px solid #0C5CA450;
        font-size: 23px;
        font-weight: 350;
        color: #5c5c5c;
        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-content-image-wrap ol {
        margin-inline-start: 30px;
}
.user--class-timer {
        position: absolute;
        top: 2%;
        left: 1%;
        font-size: 12px;
        text-transform: uppercase;
        background: transparent;
        font-weight: 500;
        color: #ACACAC;
        border: 0;
        padding-block: 5px;
        padding-inline: 15px;
        border-radius: 5px;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
        width: max-content;
        height: max-content;
        overflow: hidden;
         white-space: nowrap;
        transition: width 1s ease;
}
.user--linkblock-loader {
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
animation: spin 2s linear infinite;
}
.user--linkblock-loader svg {
        width: 50%;
        height: 50%;
}
.user--linkblock-loader svg path {
        fill: #cfcfcf;
}
.user--class-questions-wrap {
        width: 100%;
        height: max-content;
        padding: 40px;
        border-radius: 40px;
        border: 3px solid #0C5CA450;
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        gap: 30px;
        justify-content: center;
        align-items: center;
        margin-block: 20px;
}
.user--long-options-wrapper {
        width: 100%;
        margin-inline: 1%;
        height: max-content;
        display: grid; /* Change to grid */
        grid-template-columns: repeat(2, 1fr); /* Define two equal-width columns */
        gap: 10px;
        border-radius: 10px;
        border: 0;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
        background: #FFF;
    }
    
    
    .user--long-option-wrapper {
        box-sizing: border-box;
        flex-direction: column;
        display: flex;
        gap: 10px;
        padding: 20px;
    }
    
    .user--long-option-wrapper h1 {
        text-align: center;
        align-self: center;
        font-size: 23px;
        color: #D9D9D9;
        font-weight: 600;
    }
    .user--long-option-wrapper-plain-text {
        width: 100%;
        height: max-content;
        font-size: 17px;
        font-weight: 400;
    }
.user--class-questions-question {
        display: flex;
        width: 100%;
        height: max-content;
        font-size: 23px;
        font-weight: 350;
        color: #5c5c5c;
        text-align: left;
        font-family: inherit;
        align-items: center;
        gap: 20px;
        border-radius: 10px;
        padding-inline-start: 10px;
}
.user--class-questions-question-num {
        font-size: 50px;
        color: rgba(184, 204, 227, 1);
        font-weight: 900;
}
.user--class-content-image-wrap, .user--class-content-complex-block, .user--class-full-image, .user--class-items-grid-wrap-main, .user--class-hanzi-display-wrapper {
        width: 100%;
        height: max-content;
        padding: 40px;
        border-radius: 40px;
        border: 1px solid #c5c5c5;
        /*     box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px !important; */
        color: #5c5c5c;
        font-size: 20px;
        font-weight: 350;
        background-color: #ffffff !important;
        display: flex;
        flex-direction: column;
        gap: 0px;
        justify-content: center;
        align-items: center;
        margin-block-start: 20px;
       text-align: left;
}

      .bounce-out-top {
	-webkit-animation: bounce-out-top 1.5s both;
	        animation: bounce-out-top 1.5s both;
}
.heartbeat {
	-webkit-animation: heartbeat 1.5s ease-in-out both;
	        animation: heartbeat 1.5s ease-in-out both;
}
/* ----------------------------------------------
 * Generated by Animista on 2024-4-29 13:20:34
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
 @-webkit-keyframes heartbeat {
        from {
          -webkit-transform: scale(1);
                  transform: scale(1);
          -webkit-transform-origin: center center;
                  transform-origin: center center;
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
        10% {
          -webkit-transform: scale(0.91);
                  transform: scale(0.91);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
        }
        17% {
          -webkit-transform: scale(0.98);
                  transform: scale(0.98);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
        33% {
          -webkit-transform: scale(0.87);
                  transform: scale(0.87);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
        }
        45% {
          -webkit-transform: scale(1);
                  transform: scale(1);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
      }
      @keyframes heartbeat {
        from {
          -webkit-transform: scale(1);
                  transform: scale(1);
          -webkit-transform-origin: center center;
                  transform-origin: center center;
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
        10% {
          -webkit-transform: scale(0.91);
                  transform: scale(0.91);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
        }
        17% {
          -webkit-transform: scale(0.98);
                  transform: scale(0.98);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
        33% {
          -webkit-transform: scale(0.87);
                  transform: scale(0.87);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
        }
        45% {
          -webkit-transform: scale(1);
                  transform: scale(1);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
      }
      
/* ----------------------------------------------
 * Generated by Animista on 2024-4-29 13:17:48
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-out-top
 * ----------------------------------------
 */
 @-webkit-keyframes bounce-out-top {
        0% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
        5% {
          -webkit-transform: translateY(-30px);
                  transform: translateY(-30px);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
        }
        15% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
        25% {
          -webkit-transform: translateY(-38px);
                  transform: translateY(-38px);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
        }
        38% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
        52% {
          -webkit-transform: translateY(-75px);
                  transform: translateY(-75px);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
        }
        70% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
        85% {
          opacity: 1;
        }
        100% {
          -webkit-transform: translateY(-800px);
                  transform: translateY(-800px);
          opacity: 0;
        }
      }
      @keyframes bounce-out-top {
        0% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
        5% {
          -webkit-transform: translateY(-30px);
                  transform: translateY(-30px);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
        }
        15% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
        25% {
          -webkit-transform: translateY(-38px);
                  transform: translateY(-38px);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
        }
        38% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
        52% {
          -webkit-transform: translateY(-75px);
                  transform: translateY(-75px);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
        }
        70% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
        85% {
          opacity: 1;
        }
        100% {
          -webkit-transform: translateY(-800px);
                  transform: translateY(-800px);
          opacity: 0;
        }
      }
      
.user--class-content-image-wrap img {
        width: 100%;
        height: max-content;
        max-height: 500px;
        margin: 0 auto;
        object-fit: contain;
        border-radius: 10px;
}
.user--class-delimeter {
        margin: 0 auto;
        width: 150px;
        height: 5px;
        border-radius: 5rem;
        background-color: #0C5CA450;
        margin-block: 30px;
}
.user--exercise-builder-table-input-name {
        width: 90%;
    border: 2px solid #0C5CA450;
    text-align: center;
    padding: 15px;
    font-size: 20px;
    border-radius: 50px;
    font-family: inherit;
    -webkit-appearance: none;
    font-weight: 550;
    color: #5c5c5c;
    -moz-appearance: none; -webkit-appearance: none; appearance: none;
    }
    .user--table-table-cell {
        border: 2px solid #0C5CA450;
     /*  border-radius: 10px; */
    }
   

    .controls-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        position: relative;
        width: 150px;
        height: 150px;
        border-radius: 0px;
      /*  bottom: 0;
        right: 0; */
        background-color: #0C5CA410;
        padding: 10px;
    }
    .contributor--class-table-row-buttons-block {
    width: max-content;
    height: max-content;
    display: flex;
    flex-direction: row;
    gap: 10px;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    /* backdrop-filter: blur(5px); */
     padding-block: 5px;
     padding-inline: 15px;
     border-radius: 50px;
     border: 4px solid #b8cce3
    }
    .contributor--class-table-column-buttons-block {
        width: max-content;
        height: max-content;
        display: flex;
        flex-direction: row;
        gap: 10px;
        position: absolute;
        top: 50%;
        transform: translate(50%, -50%);
        right: 0px;
        /* transform: translateX(-50%); */
        background-color: #ffffff;
        /* backdrop-filter: blur(5px); */
         padding-block: 5px;
         padding-inline: 15px;
         padding-block: 5px;
        padding-inline: 15px;
        border-radius: 50px;
        border: 4px solid #b8cce3
        }
.user--exercise-hint-mini {
        width: 100%;
        height: max-content;
        padding: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        font-weight: 350;
        color: #5c5c5c;
}
.user--class-table-table {
        width: 100%;
        text-align: center;
        border-collapse: collapse;
        background: transparent;
        margin: auto;
       /* box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px; */
        border: 2px solid #0C5CA450;
        border-radius: 20px;
    }
    .user--class-table-table td {
        border: 0px;
        padding: 10px;
        transition: all 0.15s linear;
    }
    .user--class-table-table td:hover {
        border-radius: 10px !important;
        background-color: color(srgb 0.9568 0.9569 0.957);
    }
    .user--class-table-table-outline td {
        border: 0px;
        border: 2px solid #0C5CA450 !important;
        padding: 10px;
        font-weight: 350;
        color: #5c5c5c;
    }

.user--class-content-complex-block span {
        font-size: 23px;
        font-weight: 350;
        color: #5c5c5c;

}
.user--class-content-complex-block-image {
        width: 300px;
        height: 300px;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 20px;
}
.welcome--block-one-main, .welcome--block-two-main, .welcome--block-three-main {
        width: 95%;
        height: max-content;
        margin: 0 auto;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 30px;
}
.welcome--block-one-main-slogan {
        font-size: 35px;
        font-weight: 600;
        color: #000000;
        width: 100%;
        text-align: center;
}
.welcome--block-one-main-flex, .welcome--block-three-main-flex {
        width: 100%;
        height: max-content;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin-block-start: 30px;
        transition: margin-block-start 0.5s ease; 
}
.constructor-main-buttons-wrapper {
        width: 90%;
        max-width: 90%;
        overflow-x: scroll;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 15px;
        padding-block: 15px;
        padding-inline: 20px;      
        border-radius: 50px;
        height: max-content;
}
.constructor-main-buttons-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 10%;
        height: 100%;
        pointer-events: none;
        
        /* Gradient background to fake blur intensity */
        background: linear-gradient(to left, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    
        /* Add a second pseudo-element for stronger blur */
    }
    
    .constructor-main-buttons-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 15%;
        height: 100%;
        pointer-events: none;
        
        /* Stronger blur */
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
    
        /* Gradient mask to create a natural blur fade */
        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 1) 80%);
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 1) 80%);
    }
.welcome--block-one-main-flex-textual, .welcome--block-one-main-flex-textual, .teachers--block-textual {
        width: 100%;
        height: max-content;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
        align-items: start;
}
.welcome--block-one-main-showcase-inside-img, .welcome--block-three-main-showcase-inside-img, .welcome--block-iframe-image {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background-color: #f9f9f9;
        box-shadow: 0px 0px 2px 2px #0c5ca450;
        display: flex;
        justify-content: center;
        align-items: center;
}
.welcome--block-iframe-image {
        animation: none;  
        position: absolute;
        will-change: transform;
}
@keyframes floatBubble {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-20px); 
        }
    }
    .container.bubbling {
        position: relative;
        height: 90vh; 
        overflow: hidden;
    }
    
.welcome--block-one-main-showcase-inside-img img, .welcome--block-three-main-showcase-inside-img img, .welcome--block-iframe-image img {
        width: 80%;
        height: 80%;
}
.welcome--block-one-main-showcase-inside-desc, .welcome--block-three-main-showcase-inside-desc {
        font-size: 18px;
        font-weight: 400;
        color: #585858;
        width: 100%;
        text-align: center;
        height: max-content;
}
.welcome--block-one-main-flex-lottie, .welcome--block-three-main-flex-lottie {
        flex: 1;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
}
.welcome--block-one-main-flex-lottie img, .welcome--block-two-main-flex-lottie img, .welcome--block-three-main-flex-lottie img {
        width: 250px;
        height: 250px;
}
.welcome-block-interactive-scene {
        width: 100%;
        height: max-content;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-block-start: 90px;

} 
.welcome--block-two-main-flex-lottie {
        width: max-content;
        height: max-content;
}
.welcome-block-two-main-chat {
        width: 90%;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 30px;
        justify-content: start;
        align-items: center;
}
.welcome-block-two-main-chat-sent {
        width: 100%;
        height: max-content;
        padding: 20px;
        display: flex;
        flex-direction: column;
        font-size: 20px;
        font-weight: 400;
        background-color: #D1E0EE;
        border-radius: 10px;
}
.welcome-block-two-main-chat-sender {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: row;
        gap: 10px;
        justify-content: start;
        align-items: center;
        font-size: 20px;
        font-weight: 500;
        
}
.welcome-block-two-main-chat-sender-icon {
        width: 40px;
        height: 40px;
        border-radius: 5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0px 0px 2px 2px #D0D0D0; 
}
.welcome-block-two-main-chat-sender-icon img {
        width: 70%;
        height: 70%;
        object-fit: contain;
}
.welcome--block-two-main-chat-sent {
        width: 100%;
        height: max-content;
        padding: 20px;
        display: flex;
        gap: 10px; 
        flex-direction: column;
        font-size: 20px;
        font-weight: 400;
        background-color: #F5F5F5;
        border-radius: 10px;
}
.welcome--block-two-main-chat-sent p {
        /* text-indent: 1em;
        padding-left: -1em; */
}
.welcome--block-one-main-flex-textual-h2, .welcome--block-three-main-flex-textual-h2, .teachers--block-textual-h2 {
        font-size: 25px;
        font-weight: 500;
        width: 80%;
        text-align: left;
}
.welcome--block-one-main-flex-textual-p, .welcome--block-three-main-flex-textual-p, .teachers--block-textual-p { 
        margin-inline-start: 20px;
        font-size: 18px;
        font-weight: 400;
        color: #585858;
        width: 100%;
}
.notfound-block-textual-p {
        font-size: 18px;
        font-weight: 400;
        color: #585858;
        width: 100%;
        text-align: center;
}
.teachers--block-textual {
        width: 70%;
        align-self: flex-start;
}
.teachers--block-textual-p {
        margin-inline-start: 0px !important;
}
.teachers--block-image {
        width: 700px;
        height: 350px;
        box-shadow: 0px 0px 3px 3px #1354A350;
        border-radius: 15px;
        margin-block-end: 30px;
}
.teachers--block-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
}
.welcome--block-one-intro-invitation {
        width: 90%;
        height: max-content;
        border-radius: 15px;
        padding-inline: 40px;
        padding-block: 20px;
        display: flex;
        flex-direction: row;
        gap: 40px;
        background-color: #ffffff;
        box-shadow: 0px 0px 3px 3px #1354A350;
        justify-content: center;
        align-items: center;
}
.user--traverse-info-inside-block-option input, .user--traverse-info-inside-block-option textarea  {
        width: 100%;
        height: max-content;
        background-color: #ffffff;
        border: 2px solid #0c5ca420;
        border-radius: 50px;
        padding: 15px;
        font-size: 20px;
        color: #5c5c5c;
    }
    .user--traverse-info-word-wrapper {
        width: 100%;
        height: max-content;
        border-radius: 20px;
        border: 2px solid #0c5ca450;
        display: flex;
        text-align: center;
        padding: 20px;
        flex-direction: column;
        gap: 15px;
    }
    .user--traverse-info-word-wrapper input, .user--traverse-info-word-wrapper textarea {
        font-size: 20px;
        text-align: center;
        background-color: transparent;
        border: 1px solid #5c5c5c;
        border-radius: 50px;
        color: #5c5c5c;
        font-weight: 350;
        height: max-content;
        padding: 20px;
       }
.welcome--block-one-intro-invitation-img {
        width: 70px;
        height: 70px;
        background-color: #ffffff;
        box-shadow: 0px 0px 2px 1px #b1b1b1;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5rem;
}
.textual-tiny-transformed {
        transform: translateY(-15px);
}
.welcome--block-one-intro-invitation-img img {
        width: 80%;
        height: 80%;
        object-fit: contain;
}
.welcome--block-one-intro-invitation-block {
        width: max-content;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 5px;
}
.welcome--block-one-intro-invitation-header {
        font-size: 22px;
        font-weight: 500;
        color: #000000;
}
.welcome--block-one-intro-invitation-desc {
        font-size: 18px;
        margin-inline-start: 15px;
        font-weight: 400;
        color: #000000;
}

.welcome--block-one-intro-invitation-button {
        width: max-content;
        height: max-content;
        padding-block: 15px;
        padding-inline: 20px;
        border-radius: 5rem;
        background-color: #0C5CA4;
        font-size: 20px;
        font-weight: 550;
        text-transform: uppercase;
        color: #ffffff;
        cursor: pointer;
}
.welcome--block-one-main-showcase, .welcome--block-three-main-showcase {
        width: 90%;
        margin: 0 auto;
        position: relative;
        display: flex;
        flex-direction: row;
        gap: 20px;
        margin-block-start: 10%;
}
.welcome--block-one-main-animdemo, .welcome--block-three-main-animdemo {
        width: 90%;
        height: max-content;
        display: flex;
        justify-content: center;
        align-items: center;
}
.welcome--block-one-main-showcase-anim, .welcome--block-three-main-showcase-anim {
        width: 100%;
        height: max-content; 
        min-height: 400px;
        flex: 1;
        background-color: #ffffff;
        border-radius: 20px;
        box-shadow: 0px 0px 3px 3px #1354A350;
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: start;
        align-items: center;
        padding: 30px;
}
.welcome--block-one-main-showcase-inside-header, .welcome--block-three-main-showcase-inside-header {
        font-size: 25px;
        font-weight: 500;
        color: #000000;
        width: 100%;
        text-align: center;
}
.welcome--block-one-main-showcase-anim1 {
        z-index: 3; 
    }
    .welcome--block-three-main-showcase-anim1 {
        z-index: 3; 
        transform: translateY(250px);
    }
    
    .welcome--block-one-main-showcase-anim2 {
        z-index: 2; 
        transform: translateY(250px);
    }
    .welcome--block-three-main-showcase-anim2 {
        z-index: 2; 
    }
    
    .welcome--block-one-main-showcase-anim3 {
        z-index: 1; 
    }
.user--class-scribble-body {
        width: 70%;
        height: 350px;
        padding: 30px;
        border-radius: 20px;
        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-example-block {
        width: 100%;
        height: max-content;
        padding: 2.5rem;
        border-radius: var(--radius-lg);
        background: linear-gradient(to bottom, #ffffff, #f8f9fa);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: flex-start;
        align-items: center;
        margin-block: 2rem;
        box-shadow: var(--shadow-xl);
        transition: var(--transition);
        position: relative;
}

.user--class-example-block::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(45deg, #0C5CA4, #b8cce3, #0C5CA4);
        border-radius: calc(var(--radius-lg) + 2px);
        z-index: -1;
        animation: borderGradient 3s ease infinite;
}

@keyframes borderGradient {
        0% {
                background-position: 0% 50%;
        }
        50% {
                background-position: 100% 50%;
        }
        100% {
                background-position: 0% 50%;
        }
}
.user--class-items-grid-item {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 10px;
}
.user--slide-builder-example-expl {
        width: 100%;
        border: 0px;
        padding: 15px;
        font-size: 20px;
        border: 2px solid #0C5CA450;
        font-weight: 350;
        color: #5c5c5c;
        border-radius: 50px;
        font-family: inherit;
        -webkit-appearance: none;
        text-align: center;
        -moz-appearance: none; -webkit-appearance: none; appearance: none;
        }
        .user--class-exercise-additional-butons-wrap {
                display: flex;
                width: max-content;
                height: max-content;
                border-radius: 16px;
                border: 2px solid rgba(184, 204, 227, 0.7);
                padding: 12px 20px;
                margin: 16px auto;
                gap: 12px;
                transition: all 0.2s ease-in-out;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
                backdrop-filter: blur(5px);
            }
            .user--class-exercise-additional-butons-wrap:hover {
                box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
                transform: translateY(-2px);
            }
            .user--class-exercise-additional-butons-wrap-no-border {
                display: flex;
                width: max-content;
                height: max-content;
                border-radius: 16px;
                padding: 12px 20px;
                margin: 16px auto;
                gap: 12px;
                transition: all 0.2s ease-in-out;
            }
            .user--class-example-block-pinyin-input { 
                background-color: transparent;
                border: 0px;
                width: 100%;
                height: max-content;
                font-size: 18px;
                overflow-x: auto;
                color: #5c5c5c;
                font-weight: 350px;
                text-align: center;
            }
.user--class-example-block-character {
        font-size: 40px !important;
        font-weight: 700 !important;
}
.user--class-dialogue-block-character {
        font-size: 30px !important;
        font-weight: 550 !important;
}
.user--class-example-block-pinyin {
        font-size: 20px;
        font-weight: 550;
        color: #797777;
}
.user--class-dialogue-block-pinyin {
        font-size: 18px;
        font-weight: 550;
        color: #797777;
}
.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-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-example-char-wrap {
        width: max-content;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 12px;
        justify-content: center;
        align-items: center;
        padding: 1rem;
        background: white;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        transition: var(--transition);
}
.user--class-dialogue-char-wrap {
        width: max-content;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
        align-items: center;
}

.user--class-full-image span {
        padding-block-end:1.75rem;
        line-height: 1.7;
        color: #374151;
        font-size: 1.05rem;
        letter-spacing: 0.01em
}
.user--class-character-image-intro {
        width: 250px;
        height: 250px;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        gap: 30px;
        justify-content: center;
        align-items: center;
       text-align: left;      
       border-radius: 20px;
}
.user--class-full-image span b {
        font-size: 23px;
        font-weight: 400;
        color: #5c5c5c;
}
.user--class-full-image img {
        width: 50%;
        height: auto;
        min-height: 350px;
        object-fit: contain;
        border-radius: 20px;

}
.user--class-character-image-intro img {
        width: 100%;
        height: auto;
        object-fit: contain;
}
.user--class-intro-banner {
        width: 90%;
        height: max-content;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        gap: 30px;
        justify-content: center;
        align-items: center;
       text-align: left;      
       border-radius: 20px;
}
.user--class-intro-banner img {
        width: 100%;
        min-height: 250px;
        height: auto;
        object-fit: contain;
}
.user--intro-small-image-block {
        width: 300px;
        height: 300px;
        object-fit: cover;
        border-radius: 20px;
        margin-block: 20px;
}
.user--class-exercise-wrap {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
}
.user--class-waiting-wrap {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        margin-block-start: 20px;
}

    .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-wrap-main, .user--class-hanzi-display-wrapper {
        display: grid !important;
        grid-template-columns: repeat(3, 30%);
        gap: 20px !important;
        justify-content: center;
        align-items: start;
        width: 100% !important;
    }
    .user--gridblock-image-wrapper {
        position: relative;
        width: 200px;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        object-fit: cover;
        border-radius: 10px;
    }
    .user--gridblock-image-wrapper img {
        width: 170px;
        height: 170px;
    }
    .user--class-items-grid-additional-description {
        font-size: 23px;
        font-weight: 500;
        font-family: inherit;
        text-align: center;
    }
    .constructor-grid-textarea {
        border: 2px solid #0C5CA450;
        border-radius: 15px;
        text-align: center;
        font-weight: 350;
        color: #5c5c5c;
        width: 100%;
        height: max-content;
}
/*
.user--class-exercise-header {
        width: 90%;
        height: max-content;
        padding: 30px;
        border-radius: 5rem;
        background-color: white;
        display: flex;
        flex-direction: row;
        gap: 10px;
        justify-content: center;
        align-items: center;
        font-size: 25px;
       font-weight: 350;
       color: #000000;
       text-align: center;
       flex-wrap: wrap;
      border: 2px solid #0C5CA450; 
       margin: 0 auto;
}
       */

       .user--class-exercise-header {
        width: 100%;
        height: max-content;
        /* padding: 30px; */
        border-radius: 5rem;
        background-color: white;
        /* box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px; */
        display: flex;
        flex-direction: row;
        gap: 10px;
        justify-content: start;
        align-items: center;
        /* margin-block-start: 20px; */
        font-size: 30px;
        font-weight: 550;
        color: #000000;
        text-align: center;
        flex-wrap: wrap;
        /* border: 2px solid #0C5CA450; */
        margin: 0 auto;
        text-align: left;
    
    }

.user--class-exercise-header-inp {
        width: 90%;
        height: max-content;
        padding: 15px;
        border-radius: 20px;
        background: #f9f9f9;
        /*border: 2.5px solid #D9D9D9;
        background-color: #f4f4f4; */
      /*  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px; */
        display: flex;
        flex-direction: row;
        gap: 10px;
        justify-content: flex-start;
        text-align: left;
        align-items: center;
     /*   margin-block-start: 20px; */
        font-size: 35px;
       font-weight: 550;
       color: #000000;
       text-align: center;
       flex-wrap: wrap;
      border: 0px; 
      font-size: 22px;
       margin: 0 auto;
}
.user--class-exercise-header-ninp {
        width: 90%;
        height: max-content;
        padding: 15px;
        border-radius: 20px;
        background: #ffffff;
        /*border: 2.5px solid #D9D9D9;
        background-color: #f4f4f4; */
      /*  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px; */
        display: flex;
        flex-direction: row;
        gap: 10px;
        justify-content: flex-start;
        text-align: left;
        align-items: center;
     /*   margin-block-start: 20px; */
        font-size: 35px;
       font-weight: 550;
       color: #000000;
       text-align: center;
       flex-wrap: wrap;
      border: 0px; 
      font-size: 22px;
       margin: 0 auto;
}
.user--class-exercise-header-expl {
        width: 90%;
        height: max-content;
        padding: 15px;
        border-radius: 20px;
        background: #E7EFF6;
        /*border: 2.5px solid #D9D9D9;
        background-color: #f4f4f4; */
      /*  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px; */
        display: flex;
        flex-direction: row;
        gap: 10px;
        justify-content: center;
        align-items: center;
     /*   margin-block-start: 20px; */
        font-size: 25px;
       font-weight: 450;
       color: #000000;
       text-align: center;
       flex-wrap: wrap;
      border: 0px; 
      font-size: 22px;
       margin: 0 auto;
}
.user--class-exercise-header-modified {
        width: 90%;
        height: max-content;
        padding: 15px;
        border-radius: 5rem;
        background-color: white;
        display: flex;
        flex-direction: row;
        gap: 50px;
        justify-content: center;
        align-items: center;
        font-size: 25px;
       font-weight: 300;
       color: #000000;
       text-align: center;
       flex-wrap: wrap;
       border: 3px solid #0C5CA450;
}

.user--exercise-sequence-choice-block {
        width: 90%;
        height: max-content;
        padding: 30px;
        border-radius: 10px;
        /*border: 2.5px solid #D9D9D9;
        background-color: #f4f4f4; */
        background-color: white;
      /*  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px; */
        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;
       flex-wrap: wrap;
       border: 0px solid #d7d7d7;
       box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 2px 2px;
}
.user--exercise-sequence-choice-block {
        box-shadow: 0 0 2px 2px rgba(12, 92, 164, 0.3) !important;
}
.exercise-header-underlined {
        border: 0;
        /* border-top: 2px rgba(12, 92, 164, 0.3) solid; */
        box-shadow: none !important;
        border-radius: 0px !important;
        background-color: transparent;
}
.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: 100%;
        height: max-content;
        padding: 0px;
        border-radius: 10px; 
        border: 0;
        display: flex;
        gap: 40px;
        justify-content: center;
        align-items: center;
        font-size: 25px;
        font-weight: 400;
        flex-direction: column;
     
}
.user--intro-exercise-answer-block {
        box-shadow: 0 0 2px 2px rgba(12, 92, 164, 1) !important;
        width: 95% !important;
}
.user--class-exercise-answer-block-multiple { 
        flex-direction: column;
}
.user--class-exercise-question {
        display: flex;
        flex-direction: row;
        gap: 20px;
        justify-content: center;
        align-items: center;
        padding: 20px;
        border: 3px solid #f9f9f9;
        border-radius: 40px; 
        flex-wrap: wrap;
        width: 100%;
}
.user--intro-exercise-question {
        box-shadow: none !important;
}
.user--class-waiting-timer {
        padding-block: 47px;
}
.user--class-exercise-question p {
        font-weight: 350;
        font-size: 30px;
        margin-inline-end: 15px;
        color: #5c5c5c;
        text-align: center;
        width: 100%;
}
.user--match-exercise {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        align-items: center;
}
.user--class-exercise-answer-select-wrap:hover {
        background-color: #0C5CA450 !important;
}
.user--class-exercise-answer-select-wrap {
        width: max-content;
        cursor: pointer;
        height: max-content;
        padding-block: 10px;
        padding-inline: 30px;
        border-radius: 5rem;
        background-color: #ffffff;
        border: 2px solid #0C5CA450;
        transition: all 0.15s linear;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 15px;
        box-sizing: border-box;
        flex-shrink: 0;
        flex-grow: 0;
        font-size: 23px;
        font-weight: 350;
}
.user--class-exercise-answer-select-circle { 
        width: 40px;
        height: 40px;
        background: transparent;
        border: 0;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 2px 2px;
        border-radius: 5rem;
        transition: all 0.1s linear;
        cursor: pointer;
        padding: 20px;
}
.user--exercise-image-wrapper {
        max-width: 50%;
        width: max-content;
        height: max-content;
        position: relative;
}
.user--exercise-image-wrapper img {
        object-fit: contain;
        width: 100%;
        height: 100%;
        border-radius: 10px;
}
.user--exercise-block-tablelist-wrapper {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 25px;
        justify-content: center;
        align-items: center;
    }
    .user--exercise-match-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        position: relative;
    }
   .user--exercise-block-truefalse-wrapper {
        display: flex;
        flex-direction: column; 
        gap: 10px;
        padding: 40px;
        border-radius: 30px;
       border: 3px solid #0C5CA4;
   }
   .exercise-answer-block-row-wrap {
        flex-direction: row !important;
        flex-wrap: wrap;
   }
.user--class-exercise-circle-true {
        border: 0;
        box-shadow: rgba(135,194,177, 1) 0px 0px 2px 2px;
}
.user--class-exercise-circle-true:hover {
        background-color: rgba(135,194,177, 0.5);
}
.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;
        gap: 30px;
        /* box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2); */
        padding-inline: 30px;
        border-radius: 10px;
        padding-block: 10px;
}
.user--class-submit-fileinput-wrapper {
        display: flex;
        flex-direction: row;
        gap: 20px;
        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: 40px;
        height: 40px;
        cursor: pointer;
        transition: all 0.2s linear;
}
.user--slide-lottie-wrapper {
        border: 2px solid #0C5CA450;
        width: 100%;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 15px;
        border-radius: 30px;
    }
    .user--class-exercise-button-descriptive {
        width: 100%;
        height: max-content;
        padding-block: 20px;
        font-size: 20px;
        font-weight: 350;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #5c5c5c;
    }
.user--class-submit-fileinput-icon svg {
        width: 100%;
        height: 100%;
}
.user--class-submit-fileinput-icon svg:hover path {
        fill: rgba(135,194,177, 1);
}
.user--exercise-sequence-block-wrap {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 20px; 
        padding-inline: 20px;
        margin-block: 20px;
        justify-content: center;
        align-items: center;
    }
    .user--exercise-sequence-main-wrap {
        width: 90%;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
.user--class-exercise-button {
                background-color: transparent;
                font-size: 23px;
                font-weight: 450;
                font-family: inherit;
                padding-inline: 20px;
                padding-block: 10px;
                color: #0C5CA4;
                border: 0;
                background-color: #ffffff;
                box-shadow: #0C5CA450 0px 0px 3px 2px;
                width: max-content;
                margin: 0 auto;
                transition: 0.25s all ease-in-out;
                cursor: pointer;
                /* margin-block: 30px; */
                border-radius: 10px;
}
[id^="listening-player-"] {
      width: 60% !important;
      margin-block: 15px;
    }
.user--class-exercise-button:hover {
        color: #ffffff;
        background: #0C5CA4;
        }
        .user--class-generic-button-2 {
                background-color: transparent;
                font-size: 20px;
                font-weight: 550;
                text-transform: uppercase;
                font-family: inherit;
                padding-inline: 15px;
                padding-block: 5px;
                color: #0C5CA4;
                border-bottom: 3px solid #CCDDEC;
                width: max-content;
                margin: 0 auto;
                transition: 0.25s all ease-in-out;
                cursor: pointer;
                /* margin-block: 30px; */
}
.user--class-generic-button-3 {
width: max-content;
height: max-content;
max-width: 100%;
padding: 12px 24px;
background-color: #0C5CA4;
color: #ffffff;
cursor: pointer;
font-size: 16px;
font-weight: 500;
border-radius: 30px;
align-items: center;
justify-content: center;
margin: 0 auto;
display: flex;
gap: 10px;
margin-top: 15px;
transition: all 0.3s ease;
box-shadow: rgba(12, 92, 164, 0.2) 0px 3px 8px;
}

.user--class-generic-button-3:hover {
background-color: #0a4a85;
transform: translateY(-2px);
box-shadow: rgba(12, 92, 164, 0.3) 0px 6px 12px;
}
.user--class-generic-button-3-h {
        background-color: #0C5CA4;
}
.user--class-generic-button-3-tiny {
        width: max-content;
        height: max-content;
        padding-block: 15px;
        padding-inline: 25px;
        background-color: #0C5CA490;
        color: #ffffff;
        cursor: pointer;
        font-size: 20px;
        font-weight: 500;
        border-radius: 100px;
        margin: 0 auto;
        margin-block-start: 10px;
        transition:all 0.2s linear;
        max-width: 100%;
        overflow: hidden; 
        text-overflow: ellipsis; 
        white-space: nowrap;
        display: flex;
        gap: 10px;
        justify-content: center;
        align-items: center;
        }
        .user--class-generic-button-3-supertiny {
                width: max-content;
                height: max-content;
                padding-block: 10px;
                padding-inline: 20px;
                background-color: #0C5CA490;
                color: #ffffff;
                cursor: pointer;
                font-size: 18px;
                font-weight: 500;
                border-radius: 100px;
                margin: 0 auto;
                transition:all 0.2s linear;
                max-width: 100%;
                overflow: hidden; 
                text-overflow: ellipsis; 
                white-space: nowrap;
                display: flex;
                gap: 10px;
                justify-content: center;
                align-items: center;
                flex: 0 0 auto;
                }
        .user--class-generic-button-3-tiny-close {
                width: max-content;
                height: max-content;
                cursor: pointer; 
                position: absolute;
                top: 3%;
                right: 3%;
                padding-block: 15px;
                padding-inline: 25px;
                background-color: #EFC3C9;
                color: #ffffff;
                cursor: pointer;
                font-size: 20px;
                font-weight: 500;
                border-radius: 100px;
                margin: 0 auto;
                margin-block-start: 10px;
                transition:all 0.2s linear;
                max-width: 100%;
                overflow: hidden; 
                text-overflow: ellipsis; 
                white-space: nowrap;
                display: flex;
                gap: 10px;
                justify-content: center;
                align-items: center;
                }
                .user--class-generic-button-3-tiny-close:hover {
                        background-color: #E08893;
                }
                .user--class-generic-button-3-tiny-close-relative {
                        width: max-content;
                        height: max-content;
                        cursor: pointer; 
                        position: relative;
                        padding-block: 15px;
                        padding-inline: 25px;
                        background-color: #EFC3C9;
                        color: #ffffff;
                        cursor: pointer;
                        font-size: 20px;
                        font-weight: 500;
                        border-radius: 100px;
                        /* margin: 0 auto; */
                        transition:all 0.2s linear;
                        box-shadow: rgba(255, 255, 255, 0.5) 0px 10px 50px;
                        max-width: 100%;
                        overflow: hidden; 
                        text-overflow: ellipsis; 
                        white-space: nowrap;
                        display: flex;
                        gap: 10px;
                        justify-content: center;
                        align-items: center;
                        }
                        .user--class-generic-button-3-tiny-close:hover {
                                background-color: #E08893;
                        }
.loader-jello {
        width: 50px;
        height: 50px;
        background: linear-gradient(45deg, #020344, #28b8d5);
        border-radius: 50%;
        margin-block: 30px;     
        margin: 0 auto;
}
.jello-horizontal {
        -webkit-animation: jello-horizontal 0.9s infinite both;
        animation: jello-horizontal 0.9s infinite both
    }

    @-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-generic-button-3:hover {
        background-color: #0C5CA4;
        color: #ffffff;
        }
.user--class-generic-button-2:hover {
        background-color: #CCDDEC;
        border-bottom: 3px solid #0C5CA4;
        }
        .user--class-more-button {
                align-self: flex-end;
        }
.user--class-exercise-button-hint {
        color: #0C5CA4;
      /*  border-bottom: 3px solid #0C5CA4; */
}
.user--exercise-particle-line-wrapper {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: max-content;
        align-items: center;
        gap: 15px;
    }
.user--exercise-particle-line-wrapper-constrained {
        width: 90%;
    }
    .user--exercise-builder-particular-multiplechoice-input, .user--exercise-builder-sequence-input {
        width: 90%; 
        border-radius: 20px;
    /* background-color: rgba(217, 217, 217, 0.2); */
    border: 1.5px solid #f6f6f6;
    padding: 20px;
    font-size: 16px;
    color: #5c5c5c;
    font-weight: 350;
    font-family: inherit;
    -webkit-appearance: none;
    -moz-appearance: none; -webkit-appearance: none; appearance: none;
    }

    .user--class-exercise-question-tr {
        display: flex;
        flex-direction: column;
        gap: 15px;
        justify-content: center;
        align-items: center;
        width: 90%;
        border-radius: 20px;
        background-color: #ffffff;
        padding: 40px;
        border: 0px;
    }
    .user--class-exercise-question-tr p {
        font-weight: 500;
        font-size: 30px;
        margin-inline-end: 15px;
    } 
   
    .user--panel-story-mwrapper-header {
        width: 100%;
        height: max-content;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
    .user--panel-story-mwrapper-header-h1 {
        font-size: 30px;
        font-weight: 800;
        color: #ffffff;
        width: 100%;
        overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

    }
    .user--panel-story-mwrapper-header-icon {
       width: 40px;
       height: 40px;
       cursor: pointer;
    }
    .user--panel-story-mwrapper-header-icon:hover svg {
        stroke:rgb(12, 92, 164)
    }
    .user--panel-story-mwrapper-header-icon svg {
        width: 100%;
        height: 100%;
    }
    .user--panel-story-mwrapper-desc {
        width: 90%;
        height: max-content;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        gap: 20px;

    }
    .user--panel-story-mwrapper-desc-visual {
        width: 70px;
        height: 70px;
        box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.25);
        background-color: #ffffff;
        border-radius: 10px;
    }
    .user--panel-story-mwrapper-desc span {
      font-size: 20px;
        width: 100%;
        height: max-content;
      font-weight: 400;
      max-width: 70%;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
    }
.user--panel-story-mwrapper-controller {
        position: absolute;
        left: 0%;
        transform: translate(-50%, -50%);
        top: 50%;
        width: max-content;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 15px;
        box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.25);
        padding-inline: 5px;
        padding-block: 10px;
        border-radius: 10px;
        background-color: #ffffff;
}
.user--panel-video-mwrapper-controller {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 50%);
        bottom: 0%;
        width: max-content;
        height: max-content;
        display: flex;
        flex-direction: row;
        gap: 15px;
        box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.25);
        padding-inline: 5px;
        padding-block: 10px;
        border-radius: 10px;
        background-color: #ffffff;
}
.user--panel-video-auxpanel {
        width: 90%;
        height: fit-content;
        border-radius: 10px;
        padding-block-start: 20px;
        padding-inline: 20px;
        padding-block-end: 35px;
        position: relative;
        color: #000000;
        font-size: 20px;
        box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.25);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 15px;
}
.user--panel-video-auxpanel span {
        border-bottom: 1px solid rgba(0,0,0,0.25);
}
.repeated {
        position: relative;
    }
    .repeated::after {
        content: attr(data-repetitions);
        position: absolute;
        top: 0%;
        left: 50%;
        transform: translate(-50%, -100%);
        color: rgba(12, 92, 164, 0.5);
        border-top: 1px solid rgba(12, 92, 164, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px;
        font-weight: 500;
        width: max-content;
        height: max-content;
        padding: 15px;
        background: transparent;
          } 

.user--panel-story-mwrapper-controller-icon {
        width: 25px;
        height: 25px;
        cursor: pointer;
}
.user--panel-story-mwrapper-controller-icon:hover svg path{
        fill: rgba(12, 92, 164, 0.5);
        stroke: rgba(12, 92, 164, 0.5);
}
.user--panel-story-mwrapper-controller-icon-clicked {
        pointer-events: none;
}
.user--panel-story-mwrapper-controller-icon-clicked svg path {
        stroke: rgba(12, 92, 164, 0.5);
}
.user--panel-story-mwrapper-controller-icon svg {
        width: 100%;
        height: 100%;
}
.user--panel-story-mwrapper-controller-icon-small {
        width: 25px;
        height: 25px;
        cursor: pointer;
}
.user--panel-story-mwrapper-controller-icon-small svg {
        width: 50%;
        height: 50%;
}
.user--panel-story-word-highlighted {
        background-color: rgba(184, 255, 214, 1);
        border-radius: 5px;
        padding-inline: 5px;
}
.user--course-display-select-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
}
.user--cb-hidden {
        display: none;
    }
    
    .user--cb-rotated {
        transform: rotate(180deg);
        transition: transform 0.3s ease;
    }

    
 
    
    .user--panel-video-mwrapper-panel {
        width: 90%;
        height: max-content;
        max-height: 90vh;
        min-height: 80vh;
        position: relative;
        border-radius: 10px;
        background: #000000;
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding-inline: 40px;
        padding-block-start: 40px;
        padding-block-end: 10px;
        justify-content: center;
        align-items: center;

    }
    .user--panel-story-mwrapper-panel-text {
        width: 100%;
        height: max-content;
        max-height: 80%;
        border-radius: 15px;
        background: #ffffff;
        font-size: 22px;
        color: #5c5c5c;
        gap: 10px;
        padding: 20px;
        overflow-y: auto;
        text-align: center;
    }
    .user--popup-video-main-button-wrapper {
        width: max-content;
        height: max-content;
        display: flex;
        gap: 15px;
        margin: 0 auto;
    }
    .user--panel-story-mwrapper-panel-controls {
        width: max-content;
        height: max-content;
        display: flex;
        gap: 10px;
        font-size: 20px;
        font-weight: 500;
        justify-content: center;
        align-items: center;
    }
    
    .user--panel-story-mwrapper-panel-controls-btn {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }
    .user--panel-story-mwrapper-panel-controls-btn svg {
        width: 100%;
        height: 100%;
    }

    .user--exercise-particle-line-wrapper textarea, .user--exercise-particle-line-wrapper input {
        width: 100%;
        height: max-content;
        padding-inline: 30px;
        padding-block: 10px;
        background-color: transparent;
        text-align: center;
        font-size: 23px;
        font-weight: 350;
        color: #5c5c5c;
        border: 0;
        border: 2px solid #0C5CA450;
        border-radius: 30rem;
        font-weight: 400;
        font-family: inherit;
        letter-spacing: -0.03em;
    }
    
    .user--exercise-particle-line-left,
    .user--exercise-particle-line-right {
        width: max-content;
        min-width: 40%;
        display: flex;
        gap: 20px;
        align-items: center;
    }
    .user--exercise-particle-line-left {
        justify-content: flex-start;
    }
    .user--exercise-particle-line-right {
        justify-content: flex-end;
    }
    .user--exercise-particle-line-left span,
    .user--exercise-particle-line-right span {
       width: max-content;
       height: max-content;
       padding-block: 0px;
        font-size: 40px;
        color: #0C5CA4;
        font-weight: 900;
    }
    .user--exercise-particle-line-left-input, .user--exercise-particle-line-right-input {
        font-size: 23px;
        font-weight: 350;
        color: #5c5c5c;
    }
    
    .user--exercise-particle-line-left-input input,
    .user--exercise-particle-line-right-input input {
        width: 100%;
    }
    
.user--class-exercise-button-hint:hover {
        color: #ffffff;
        background: #0C5CA4;
        border-radius: 10px;
}
.user--class-hint-wrap {
        width: 50%;
        height: max-content;
        padding: 30px;
        border-radius: 20px; 
        border: 2.5px solid #D9D9D9; 
        justify-content: center;
        align-items: center;
        font-size: 20px;
        font-weight: 400;
}
.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-exercise-input-textarea {
                resize: vertical !important;
        }
        .user--class-exercise-input {
                width: 100%;
                height: max-content;
                min-height: 80px;
                background-color: #ffffff;
                text-align: center;
                font-size: 23px;
                font-weight: 350;
                font-family: inherit;
                letter-spacing: -0.03em;
                resize: none;
                border: 2px solid #0C5CA450;
                border-radius: 5rem;
        }
        .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;
                text-align: center;
            }
            .user--class-dialogue-block-dialogue-input {
                background-color: transparent;
                border: 0px;
                width: 100%;
                height: max-content;
                font-size: 30px;
                overflow-x: auto;
                font-weight: 550;
                text-align: center;
                }
                .user--class-dialogue-block, .user--slidebuilder-achievement-preview, .user--class-table-wrapper, .contributor--builder-audio-wrapper, .user--slide-pdf-wrapper, .hanzi-container, .lottie-container  {
                        width: 100%;
                        height: max-content;
                        padding: 1.5rem;
                        border-radius: 16px;
                        border: 1px solid #eaeaea;
                        display: flex;
                        flex-direction: column;
                        gap: 10px;
                        background-color: #f8fafc;
                        justify-content: flex-start;
                        align-items: center;
                        margin-block: 20px;
                        flex-wrap: wrap;
                        position: relative;
                        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
                    }
                    .user--class-dialogue-line-wrap {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        justify-content: center;
                        margin-bottom: 10px;
                        width: 100%;
                    }
                    
                    .user--class-dialogue-line-wrap input {
                        margin-bottom: 5px;
                        padding: 5px;
                        width: 100%;
                        box-sizing: border-box;
                        border: 1px solid #ccc;
                        border-radius: 4px;
                    }
                    .user--slide-builder-dialogue-expl {
                        width: 100%;
                    border: 0px;
                    padding: 15px;
                    font-size: 16px;
                    border-radius: 12px;
                    font-family: inherit;
                    -webkit-appearance: none;
                    border-radius: 50px;
                    border: 2px solid #0C5CA450;
                    text-align: center;
                    font-weight: 550;
                    color: #5c5c5c;
                    -moz-appearance: none; -webkit-appearance: none; appearance: none;
                    }
                    .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: 75px;
                    }
                    .user--class-dialogue-line-wrap {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        justify-content: center;
                        margin-bottom: 10px;
                        width: 100%;
                    }
                    .user--class-dialogue-block-dialogue-input {
                        background-color: transparent;
                        border: 0px;
                        width: 100%;
                        height: max-content;
                        font-size: 30px;
                        overflow-x: auto;
                        font-weight: 550;
                        text-align: left;
                    
                        }
                        .user--class-dialogue-block-character {
                                display: inline-block;
                            }
                            
                            .user--class-dialogue-block-pinyin {
                                display: block;
                                font-size: 18px;
                                font-weight: 550;
                                color: #797777;
                            }         
                            .user--class-dialogue-line {
                                width: 100%;
                                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-dialogue-line-wrap-big {
                                width: 100%;
                                height: max-content;
                                display: flex;
                                gap: 20px;
                                align-items: center;
                                }
                   
                            .user--class-dialogue-line-title {
                                font-size: 27px;
                                font-weight: 500;
                                font-family: inherit;
                                text-align: center;
                                margin-block: 20px;
                            }                      
        .user--class-exercise-match-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;
                border-radius: 0 0 20px 20px;
                background-color: #f4f4f4;
                border: 0;
        }
        .user--exercise-multiple_sequence_sdisplay {
                width: max-content;
                max-width: 60%;
                height: max-content;
                padding: 30px;
                border-radius: 20px;
                /* 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--exercise-multiple_sequence_hint {
                font-size: 23px;
                font-weight: 400;
                color: #D9D9D9;
                flex-wrap: wrap;
                padding-block: 10px;
                padding-inline: 20px;
                border-radius: 5rem;
                border: 2px 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; 
        }
        .user--class-exercise-header-inside svg {
                width: 100px;
                height: 40px;
        }
       
      @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    
    .spin {
        animation: spin 2s linear infinite;
    }
    .exercise-builder-load-icon {
        animation: spin 2s linear infinite;
    }
    .user--traverse-loading-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        background-color: transparent;
        cursor: pointer;
        margin: 0 auto;
    }
    .user--registration-pending-main {
        width: 90%;
        height: max-content;
        padding: 30px;
        border-radius: 40px;
        background-color: #ffffff;
        border: 3px solid #0C5CA450;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        flex-direction: column;
        margin: 0 auto;
        margin-block: 50px;
    }
    .user--registration-pending-main-header {
        width: 100%;
        height: max-content;
        font-size: 40px;
        font-weight: 700;
        margin: 0 auto;
        text-align: left;
    } 
    .user--registration-pending-main-desc {
        width: 80%;
        height: max-content;
        font-size: 18px;
        font-weight: 450;
        margin: 0 auto;
        color: #5B5B5B;
    }
    .user--registration-pending-main-image {
        width: max-content;
        height: max-content;
    }
    .user--registration-pending-main-image img {
        width: 200px;
        height: 200px;
        object-fit: cover;
    }
    .user--traverse-loading-wrapper svg {
        width: 100%;
        height: 100%;
    }
    .user--course-display-loading-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 20px;
        height: 20px;
        background-color: transparent;
        margin-inline: 25px;
    }
    .user--course-display-loading-wrapper svg {
        width: 100%;
        height: 100%;
    }
    .user--course-display-loading-wrapper svg path {
        fill: #777777;
    }
    .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--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: column;
       gap: 15px;
    }
    .constructor--exercise-list-main {
        display: grid;
        grid-template-columns: repeat(2, 1fr);          
        gap: 40px;            
        width: 90%;
        align-items: center;
        height: max-content;
        position: relative;
    }
    .bold-text {
        font-weight: 600 !important;
    }
    .italics-text {
        font-style: italic !important;
    }
    .constructor--exercise-list-option-name {
        width: 100%;
        height: max-content;
        display: flex;
        flex-wrap: wrap;
        font-weight: 450;
        font-size: 25px;
        color: #000000;
        justify-content: center;
    }
    .user--class-exercise-header-slidename {
        width: 90%;
        height: max-content;
        padding: 20px;
        border: 0px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        border-radius: 20px;
        justify-content: center;
        align-items: center;
     /*   margin-block-start: 20px; */
        font-size: 25px;
       font-weight: 600;
       font-family: inherit;
       text-align: center;
       background: #f9f9f9;
    }
    .option-wrapper-row {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: row;
        gap: 20px;
        justify-content: center;
        align-items: center;
    }
    .user--exercise-builder-block-truefalse-inside, .user--exercise-builder-block-multiple-choice-inside, .user--exercise-builder-block-sequence-inside, .user--exercise-builder-block-match-inside {
        width: 90%;
        gap: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: max-content;
        padding: 30px;
        border-radius: 20px;
        border: 0px;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    }
    .user--class-hint-wrap {
        width: 100%;
        height: max-content;
        padding: 20px;
        border-radius: 20px; 
        border: 2px solid #85ADD1; 
        justify-content: center;
        align-items: center;
        font-size: 20px;
        font-weight: 400;
    }
    .constructor--exercise-list-option-desc {
        width: 100%;
        height: max-content;
        display: flex;
        flex-wrap: wrap;
        font-weight: 350;
        color: #5c5c5c;
        font-size: 20px;
        justify-content: center;
    }
    .constructor--exercise-list-option-wrapper {
        width: 100%;
        height: 100%;
        padding-block: 20px;
        padding-inline: 30px;
        border: 2px solid #0C5CA450;   
        display: flex;
        flex-direction: column;
        gap: 15px;
        justify-content: space-between;
        align-items: center;
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.2s linear;
    }
    .constructor--exercise-list-option-wrapper:hover {
        background-color: #0C5CA420;
    }
    .user--linkblock-clear {
        width: 100%;
        padding: 0px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin-block: 20px;
        background-color: #ffffff;
        gap: 40px;
    }
    .user--linkblock-wrap-inner-column {
        width: 100%;
        height: max-content;
        display: flex;
        gap: 15px;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 0 auto;

    }
    .user--linkblock-wrap-inner-layer-icon {
        width: 70px;
        height: 70px;
    }
    .user--linkblock-wrap-inner-layer-icon svg {
        width: 100%;
        height: 100%;
    }
    .user--traverse-loading-wrapper svg path{
        fill:rgb(173, 173, 173) !important;
    }
    .user--loader-generic-small {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 25px;
        height: 25px;
        background-color: transparent;
        cursor: pointer;
        margin-block: 20px;
    }
    .user--loader-generic-small svg {
        width: 100%;
        height: 100%;
    }
    .user--loader-generic-small svg path{
        fill:#777777 !important;
    }
      @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--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: 20px;
        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;
}
.user--class-assoc-showAssoc:hover {
        text-decoration: solid underline #0C5CA4 2px;
        text-underline-offset: 2px;
}
.user--class-assoc-showAssocInside {
        width: 90%;
        height: max-content;
        font-size: 20px;
        font-weight: 400;
        color: #7B7B7B; 
        padding-block: 10px;
        margin-block-start: 20px;
        border-top: 1.5px solid #D9D9D9;
        border-bottom: 1.5px solid #D9D9D9;
        border-width: 40%;
}
.user--class-assoc-collection-wrap {
        width: 100%;
        height: max-content;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-block: 30px;
}
.user--class-assoc-collection-img-wrap {
        width: max-content;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        align-items: center;
}
.user--class-assoc-collection-img {
        width: 30%;
        height: 20%;
        min-width: 200px;
        min-height: 150px;
        border-radius: 20px;
        background-color: transparent;
        border: 0;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 2px 2px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
}
.user--class-assoc-collection-img-test {
        width: 350px;
        height: 270px;
        /* min-width: 200px;
        min-height: 150px; */
        border-radius: 20px;
        background-color: transparent;
        border: 2.5px solid #D9D9D9; 
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
}
.user--card-rest-choice-box {
        width: max-content;
        display: flex;
        flex-direction: row;
        gap: 10px;
        margin-block-end: 10px;
}
.user--card-rest-survey-main {
        display: flex;
        flex-direction: column;
        gap: 10px;
        font-size: 27px;
        font-weight: 500;
        align-items: center;
        background-color: #D9D9D9;
}
.user--card-rest-choice-box span {
        font-size: 20px;
        font-weight: 500;
        color: #000000;
        transition: all 0.15s linear;
        border-radius: 5rem;
        padding-inline: 10px;
        padding-block: 5px;
        border: 2px solid #000000;
        background: #ffffff;
        cursor: pointer;
}
.user--card-rest-choice-box span:hover {
        color:rgba(12, 92, 164, 1);
        border: 2px solid rgba(12, 92, 164, 1);
}
.user--class-assoc-collection-input {
        width: 30%;
        height: max-content;
        min-width: 200px;
        height: max-content;
        padding: 5px;
        border: 0px; 
        background-color: transparent;
        text-align: center;
        font-size: 18px;
        font-weight: 400;
        font-family: inherit;
        letter-spacing: -0.03em;
        border-bottom: 2px solid #D9D9D9;
        color: #000000;
}
.user--class-assoc-collection-input::placeholder {
        font-size: 18px;
        font-weight: 400;
        font-family: inherit;
        color: #D9D9D9;
}
.user--class-assoc-collection-del {
        width: 5px;
        height: 5px;
        background-color: #D9D9D9;
        border-radius: 5rem;
        margin-inline: 20px;
}
.user--class-assoc-collection-image-search {
        width: 25px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
}
.user--class-assoc-collection-image-search svg {
        width: 100%;
        height: 100%;
        fill: #0C5CA4;
        transition: all 0.1s linear;
        stroke-width: 5px;
}
.user--group-main-wrapper {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 90%;
        height: max-content;
        margin: 0 auto;
        align-items: flex-start;

}
.user--group-main-header {
        font-size: 25px;
        margin-inline-start: 10px;
        font-weight: 500;
}

.user--group-creation-wrapper {

}
.user--group-main-grey-desc {
        font-size: 18px;
        font-weight: 400;
        text-align: left;
        color: #7B7B7B;
        margin-inline-start: 10px;
}
.user--class-assoc-collection-image-search svg:hover {
        fill: #5ea6e5;
}
.scale-in-center {
	-webkit-animation: scale-in-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


 @-webkit-keyframes scale-in-center {
        0% {
          -webkit-transform: scale(0);
                  transform: scale(0);
          opacity: 1;
        }
        100% {
          -webkit-transform: scale(1);
                  transform: scale(1);
          opacity: 1;
        }
      }
      @keyframes scale-in-center {
        0% {
          -webkit-transform: scale(0);
                  transform: scale(0);
          opacity: 1;
        }
        100% {
          -webkit-transform: scale(1);
                  transform: scale(1);
          opacity: 1;
        }
      }
      
      .scale-out-center {
	-webkit-animation: scale-out-center 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: scale-out-center 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

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

      .spinner-small svg {
        width: 30% !important;
        height: 30% !important;
      }
      .spinner-small svg path {
        fill: rgba(133, 173, 209, 1) !important;
      }
      .gradient-image-load {
        animation-duration: 1.8s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: placeHolderShimmer;
        animation-timing-function: linear;
        background: #f6f7f8;
        background: linear-gradient(to right, #fafafa 8%, #f4f4f4 38%, #fafafa 54%);
        background-size: 1000px 640px;
        position: relative;
        
    }
    
    @keyframes placeHolderShimmer{
        0%{
            background-position: -468px 0
        }
        100%{
            background-position: 468px 0
        }
    }
    
    
    .user--class-assoc-collection-image-search-wrap {
        width: max-content;
        height: max-content;
        align-items: center;
        justify-content: center;
        display: flex;
        gap: 10px;
    }
    .user--class-assoc-collection-image-reload {
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    .user--class-assoc-collection-image-reload svg {
        width: 100%;
        height: 100%;
        fill: #0C5CA4;
        transition: all 0.1s linear;
        stroke-width: 5px;
}
.user--class-assoc-collection-image-reload svg:hover {
        fill: #5ea6e5;
}
.user--class-assoc-collection-inout-coloured {
        border-bottom: 2px solid #0C5CA4 !important;
}
.user--class-assoc-drawing-canvas {
        width: 90%;
        height: 400px;
        border: 2.5px solid #D9D9D9; 
        border-radius: 20px;
        position: relative;
        margin-block: 20px;
}

.preview-research-fc {
        margin: 0 auto; 
        color: #ffffff; 
        margin-block: 50px; 
        width: 50%; 
        height: 150px; 
        cursor: pointer; 
        background-color: #000000; 
        text-align: center; 
        font-size: 70px; 
        display: flex; 
        justify-content: center; 
        align-items: center; 
        border-radius: 5rem;
}
.preview-wrap {
       height: max-content;
        margin-block: 58px;
        padding-inline: 50px;
        display: flex;
        justify-content: center;

}
.preview--flashcards-wrap {
        width: 60%;
        height: max-content;
        display: flex;
        flex-direction: column;
        gap: 10px;
       /* background-color: #5ea6e5; */
       border: 5px solid #0C5CA4 !important;
        padding: 15px;
        border-radius: 2rem;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: all 0.5s ease;
}
.preview--flashcards-wrap:hover {
        transform: scale(1.05);
        box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
}
.preview--flashcards-wrap h1 {
       font-size: 50px;
       font-weight: 700;
       font-family: inherit;
       color: #000000;
}
.preview--flashcards-wrap p {
        font-size: 20px;
        font-weight: 400;
        font-family: inherit;
        color: #000000;
 }

 .user--cards-drawing-canvas {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
} 
.user--cards-drawing-canvas-tools-panel {
      width: max-content;
      padding-inline: 15px;
      padding-block: 10px;
      border: 2.5px solid #D9D9D9;
      border-radius: 5rem;
      display: flex;
      justify-content: center;
      gap: 15px;
      height: max-content;
      margin-block-end: 20px;
      transition: all 0.1s linear;

}
.user--cards-drawing-canvas-tools-panel button {
border: 2.5px solid #000000;
background: transparent;
border-radius: 50px;
color: #0C5CA4;
padding-inline: 10px;
font-weight: 550;
cursor: pointer;
 }
 .user--cards-drawing-canvas-tools-panel button svg {
      fill:  #000000;
      width: 30px;
      height: 30px; 
 }
 .range-slider {
        display: flex;
        justify-content: center;
        align-items: center;
 }
 .range-slider input[type="range"] {
        -webkit-appearance: none;
        width: 100%;
        height: 6px;
        background-color: #ccc;
        border-radius: 3px;
        outline: none;
        cursor: pointer;
      }
      
      .range-slider input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
        background-color:var(--slider-thumb-color, #000);
        border-radius: 50%;
        cursor: pointer;
      }
      
      .range-slider input[type="range"]::-moz-range-thumb {
        width: 16px;
        height: 16px;
        background-color: var(--slider-thumb-color, #000);
        border-radius: 50%;
        cursor: pointer;
      }
      
      .range-slider input[type="range"]::-ms-thumb {
        width: 16px;
        height: 16px;
        background-color: var(--slider-thumb-color, #000);
        border-radius: 50%;
        cursor: pointer;
      }

 /* input[type="range"]::-webkit-slider-thumb, input[type="range"]::-webkit-media-slider-thumb {
        background-color: #0C5CA4 !important;
 }
      input[type="range"]::-webkit-slider-runnable-track {
        display: flex;
        align-items: center;
        background-color: #0C5CA4;
        height: 40px;
        border-radius: 50px;
      } */
      .user--popup-dynamic-color-picker-wrap input[type="color"] {
        opacity: 0;
        position: absolute;
        z-index: 1;
        cursor: pointer;
        width: 40px;
        height: 40px;
      } 
      .user--popup-dynamic-color-picker-wrap::after {
        content: '';
        display: block;
        width: 40px;
        height: 40px;
        background-color: var(--color-picker-bcg, #000);;
        border-radius: 50px;
      } 
      .user--popup-dynamic-generate-sentence-btn {
        width: max-content;
        display: flex;
       justify-content: center;
       align-items: center;
        gap: 20px;
        background-color: transparent;
        height: max-content;
        min-height: 60px;
        border-radius: 10rem;
        font-size: 25px;
        font-weight: 400;
        color: #000000;
        cursor: pointer;
        padding-inline-end: 20px;
        transition: all 0.1s linear;
        border: 0;
        box-shadow: rgba(0,0,0,0.1) 0px 0px 2px 2px;
      }
      .user--popup-dynamic-generate-sentence-btn-clicked {
        cursor: default;
        pointer-events: none;
        background-color: #D9D9D950;
      }
      .user--popup-dynamic-generate-sentence-svg-clicked {
        cursor: default;
        pointer-events: none;
        background-color: none;
      }
      .user--popup-dynamic-generate-sentence-svg-clicked svg {
        fill: #D9D9D9 !important; 
      }
      .user--popup-dynamic-generate-sentence-btn:hover {
        background-color: #D9D9D950;
      }
      .user--popup-dynamic-generate-sentence-btn-svg-wrap {
        width: 60px;
        height: 60px;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        /* background-color: #D9D9D9; */
      }
      .user--popup-dynamic-generate-sentence-btn-svg-wrap svg {
        width: 30px;
        height: 30px;
        fill: #0C5CA450;
      }
      .user--card-character {
        cursor: pointer;
        transition: text 0.3s ease-in-out;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .user--card-character-pinyin {
        font-size: 20px !important;
        color: rgb(217, 217, 217) !important;
      }
      .user--card-pencil-draw {
        animation-name: pencil-use;
        animation-duration: 2s;
        animation-iteration-count: infinite;
      }
      @keyframes pencil-use {
        0% {
          transform: translateX(0) rotate(0deg);
        }
        25% {
          transform: translateX(30px) rotate(10deg);
        }
        50% {
          transform: translateX(60px) rotate(0deg);
        }
        75% {
          transform: translateX(30px) rotate(-10deg);
        }
        100% {
          transform: translateX(0) rotate(0deg);
        }
      }
      .user--cards-select-prwrap-styling {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 20px;
        width: 100%;
      }
      @keyframes disappear {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 0.5;
          transform: scale(0.9);
        }
        100% {
          opacity: 0;
          transform: scale(0.8);
        }
      }
      
      .appear-animation {
        opacity: 0;
        animation-name: fade-in;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
      }
      
      .welcome--block-iframe-image-anim {
        opacity: 0;  
        animation: fadeInAnim 10s ease-in-out forwards;  
    }
    .fadeoutanim {
        animation: fadeOutAnim 1s ease-in-out forwards;  
    }

    
    @keyframes fadeInAnim {
        from {
            opacity: 0; 
        }
        to {
            opacity: 1;  
        }
    }
    @keyframes fadeOutAnim {
        from {
            opacity: 1; 
        }
        to {
            opacity: 0;  
        }
    }
      @keyframes fade-in {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      
      .disappear-animation {
        opacity: 0;
        animation-name: fade-out;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
      }
      
      @keyframes fade-out {
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
        }
      }
      .user--card-hero-text-bb-wrap {
        display: flex;
        width: 100%;
        height: max-content;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
      }
      .user--card-hero-text-bb-wrap-back-button {
       width: 20px;
       height: 20px;
       display: flex;
       justify-content: center;
       align-items: center;
       cursor: pointer;
      }
      .user--card-hero-text-bb-wrap-back-button svg {
        fill: #000000;
        width: 100%;
        height: auto;
      }
      .user--card-beta-label {
        position: relative;
      }
      @-webkit-keyframes fade-in {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      @keyframes fade-in {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }      
      .user--class-button-wrap-done {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 35px;
        height: 35px;
        -webkit-animation: fade-in 1.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 1.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
      }
      .user--class-button-wrap-done svg {
        width: 100%;
        height: 100%; 
      }
      .user--card-beta-label::after {
        content: "Beta";
        position: absolute;
        top: 0px;
        right: 0px;
        transform: translate(30%, -50%);
        font-size: 16px;
        border-radius: 5rem;
        background-color: #0C5CA480;
        color: white;
        padding: 2px 8px;
        font-family: inherit;
      }
     .user--card-success-wrap {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        height: max-content;
        justify-content: center;
        align-items: center;
     }
     .user--card-success-wrap span {
        font-size: 30px;
        font-weight: 450;
        font-family: inherit;
        color: #000000;
        text-align: center;
     }
     .user--card-success-wrap svg {
       fill: rgba(125, 228, 166);
       width: 79px;
       height: 70px;
     }
     .user--card-drawing-assoc-wrap {
        border: 2.5px solid #D9D9D9; 
        border-radius: 20px;
        margin-block: 15px;
     }
     .scale-in-center {
	-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes scale-in-center {
        0% {
          -webkit-transform: scale(0);
                  transform: scale(0);
          opacity: 1;
        }
        100% {
          -webkit-transform: scale(1);
                  transform: scale(1);
          opacity: 1;
        }
      }
      @keyframes scale-in-center {
        0% {
          -webkit-transform: scale(0);
                  transform: scale(0);
          opacity: 1;
        }
        100% {
          -webkit-transform: scale(1);
                  transform: scale(1);
          opacity: 1;
        }
      }

      .scale-out-center {
	-webkit-animation: scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@-webkit-keyframes scale-out-center {
        0% {
          -webkit-transform: scale(1);
                  transform: scale(1);
          opacity: 1;
        }
        100% {
          -webkit-transform: scale(0);
                  transform: scale(0);
          opacity: 1;
        }
      }
      @keyframes scale-out-center {
        0% {
          -webkit-transform: scale(1);
                  transform: scale(1);
          opacity: 1;
        }
        100% {
          -webkit-transform: scale(0);
                  transform: scale(0);
          opacity: 1;
        }
      }
      .user--notes-button-active {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
        width: 50px;
        height: 50px;
        background: #ffffff;
        cursor: pointer; 
        position: fixed; 
        bottom: 15px;
        right: 1%;
        box-shadow: #0C5CA4 0px 0px 2px 2px;
        transition: all 0.3s linear;
    }
    
      .user--notes-button-active svg {
        width: 50%;
        height: 50%;
      }
      .user--notes-button-active svg path {
      fill: #000000;
      }

      .user--controls-button-active {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
        width: 50px;
        height: 50px;
        background: #ffffff;
        cursor: pointer; 
        position: fixed; 
        bottom: 15px;
        left: 1%;
        box-shadow: #0C5CA4 0px 0px 2px 2px;
        transition: all 0.3s linear;
    }
    
      .user--controls-button-active svg {
        width: 50%;
        height: 50%;
      }
      .user--controls-button-active svg path {
        fill: #000000;
      }
 
      .user--class-media-controller {
        display: flex;
        flex-direction: row;
        gap: 20px;  
        position: absolute;
        bottom: 15px;
        width: max-content;
        left: 50%;
        transform: translate(-50%, 0%);
        height: max-content;
        padding: 10px;
        /* In development */
        display: none !important;

        border-radius: 5rem;
       transition: all 0.3s linear;
       /* box-shadow: 2px -2px 100px 33px rgba(221, 221, 221, 1), rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; */
       backdrop-filter: blur(10px);
       background: rgba(208, 208, 208, 0.1);
       -webkit-backdrop-filter: blur(10px);
    }
    .user--class-media-controller-button {
        width: 45px;
        height: 45px;
        border-radius: 5rem;
        background: rgba(136, 136, 136, 0.1);
        box-shadow: 0 0 2px 0px #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s linear;
    }
    .user--class-media-controller-button:hover {
        background-color: #0C5CA450;
    }
    .user--class-media-controller-button-active {
        background-color: #0C5CA450;
    }
    .user--class-media-controller-button:hover svg path {
        fill: #ffffff;
    }
    .user--class-media-controller-button svg {
        width: 60%;
        height: 60%;
    }
      .user--class-notes-box {
        display: flex;
        flex-direction: column;  
        position: absolute;
        bottom: 15px;
        width: 50%;
        height: 45%;  
        border-radius: 20px;
        /* overflow: auto; */
        background: #ffffff;
       left: 50%;
       transition: all 0.3s linear;
       box-shadow: 2px -2px 100px 33px rgba(221, 221, 221, 1), rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    }
    .user--class-controls-box {
        display: flex;
        flex-direction: column;  
        position: absolute;
        bottom: 15px;
        width: 50%;
        height: 45%;  
        border-radius: 20px;
        /* overflow: auto; */
        background: #ffffff;
       left: 50%;
       /* transform: translateX(-50%); */
       transition: all 0.3s linear;
       box-shadow: 2px -2px 100px 33px rgba(221, 221, 221, 1), rgba(0, 0, 0, 0.06) 0px 1px 2px 0px
    }
    
    .notes-wrapper {
        display: flex;
        flex-direction: column;
        /* Add other styles as necessary */
    }
    
    .user--class-notes-input-wrapper {
       width: 100%;
       height: max-content;
       background-color: #ffffff;
       padding: 10px;
       border-top: 1px solid #d9d9d9;
       border-radius: 0px 0px 20px 20px;
       position: relative;
    }
    .user--class-notes-input-wrapper-input {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        resize: none;
        font-size: 16px;
        font-family: inherit;
        color: #000000;
    }
    .user--class-notes-input-wrapper-send {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
        width: 40px;
        height: 40px;
        background: #D9D9D9;
        cursor: pointer; 
        position: absolute; 
        top: 50%;
        right: 2%;
        box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
        transition: all 0.3s linear;
        transform: translateY(-50%);
    }
    .user--class-notes-input-wrapper-send svg {
        width: 45%;
        height: 45%;
        fill: #ffffff;
    }
    .user--class-notes-handle {
        position: absolute;
        width: 20px;
        height: 20px;
        position: absolute;
        border-radius: 5rem;
    top: 0;
    right: 0;
    /* transform: translate(50%, 50%); */
    background-color: transparent;
    cursor: se-resize;
    }
    .user--class-notes-handle svg {
        width: 70%;
        height: 70%;
    }

    .user--class-notes-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: start;
        width: 100%;
        overflow-y: auto;
        height: 100%;
        padding: 15px;
        overflow-y: scroll;
    }
    .user--class-controls-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: start;
        width: 100%;
        overflow-y: auto;
        height: 100%;
        overflow-y: scroll;
        padding: 15px;
        
    }
    .user--exercise-block-wrapper {
        width: 100%;
        border-radius: 40px;
        background-color: #E7EEF6;
    }
    .user--class-controls-descriptor {
        font-family: inherit;
        font-size: 25px;
        font-weight: 550;
        text-align: left;
        padding-inline-start: 15px;
        margin-block: 10px;
    }
    .user--class-notes-block-wrapper {
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: row;
        gap: 20px;
        justify-content: center;
        align-items: center;
        padding: 10px;
    }
    .user--class-notes-block-inside-dot {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: rgba(12, 92, 164, 0.1);
        border: 0px;
        flex-shrink: 0;
    }
    .user--class-notes-block-inside-block {
        width: 100%;
        height: max-content;
        font-size: 17px;
        font-family: inherit;
        color: #000000;
        padding-block: 20px;
        padding-inline: 10px;
        border-radius: 10px;
        background-color: rgba(0, 0, 0, 0.02);
        border: 0px;
        overflow-wrap: anywhere;
        box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2)
    }
    
    .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: 25px;
        font-weight: 500;
        color: #87C2B1;
    }
    .user--notes-button-active {
        /* Add your existing styles */
        /* To smoothly transition the background color change, uncomment the following line */
        /* transition: background-color 0.3s ease; */
    }
    
    /* Create a style for a note */
    .note {
        display: flex;
    }
    
    /* Create a style for the note's indicator circle */
    .note .indicator {
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }
    
    /* Different colors for the indicator based on who left the note */
    .note.teacher .indicator {
        background: grey;
    }
    
    .note.student .indicator {
        background: blue;
    }
    

    /* Inherited from CTRB */
    .user--traverse-miniature-control-delete-icon {
        width: 30px;
        height: 30px;
        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: 0px;
        right: 0%;
        transform: translate(-50%, 50%);
        }
        .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;
                padding-block: 3px;
            }
            .user--traverse-miniature-wrapper * {
                flex-shrink: 0;
                }
        .user--traverse-header {
                width: max-content;
                height: max-content;
                display: flex;
                gap: 20px;
                justify-content: center;
                align-items: center;
                align-self: baseline;
                margin-block-end: 20px;
                margin-block-start: 27px;
            }
            .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-inside-title {
                font-size: 30px !important;
                font-weight: 700 !important;
                font-family: inherit;
                color: #000000;
                margin-block-end: 0px !important;
            }
            .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;
                align-self: center;
            }
            
            .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;
                background-color: transparent;
                z-index: 1;
                transition: 0.25s all ease-in-out;
            }
            
            .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-class-button svg {
                width: 30px;
                height: 30px;
            }
                .user--traverse-class-button svg path {
                        fill: rgba(24, 135, 95, 0.68);
                }
            .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-dropdown-content .user--traverse-class-button:hover {
                color: #0C5CA4;
                transition: 0.25s all ease-in-out;
            
            }
           
            .user--traverse-section-distributor {
                display: flex;
                width: max-content;
                height: max-content;
                }
                .user--schedule-week-distributor {
                        display: flex;
                width: 100%;
                height: max-content;
                justify-content: center;
                align-items: center;
                }
                .user--traverse-section-distributor-section, .user--schedule-week-distributor-section {
                        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;
                }
                .user--traverse-section-distributor-section-user {
                        padding-block: 15px;
                        padding-inline: 20px;
                        font-size: 18px;
                        width: max-content;
                        height: max-content;
                        font-weight: 450;
                        font-family: inherit;
                        color: #000000;
                        border: 0;
                        cursor: pointer;
                        border-radius: 10px;
                        transition: all 0.2s linear;
                }
                .sd-section-active-user {
                        background-color: white;
                        color: #000000 !important;
                        pointer-events: none;
                        box-shadow: #c5d4e8 0px 0px 2px 2px;
                    }
                .sd-section-1 {
                        border-radius: 10px;
                }
                .sd-section-2 {
                        border-radius: 10px;
                }
                .sd-section-3 {
                        border-radius: 10px;
                }
                .sd-section-active {
                        box-shadow: #0C5CA450 0px 0px 2px 2px;
                        background-color: #ffffff;
                        color: #000000 !important;
                        pointer-events: none !important;
                }
                .user--traverse-class-button-selected {
                        color: rgba(12, 92, 164, 1);
                        }
                .user--generic-form-button-wrapper {
                        width: 100%;
                        height: max-content;
                        display: flex;
                        flex-wrap: wrap;
                        gap: 20px;
                        justify-content: center;
                        align-items: center;
                }
                .user--join-main-banner {
                        width: 100%;
                        height: max-content;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                }
                .user--join-main-banner img {
                       width: 240px;
                       height: 180px;
                       object-fit: contain;
                       /* margin-inline-end: 10%; */
                }
                .user--traverse-slide-contents-preview {
                                width: 100%;
                                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-new-wrapper {
                                width: 100%;
                                height: max-content;
                                margin-block-end: 30px;
                            }
            .user--traverse-dropdown:hover .user--traverse-dropdown-content {
                display: block;
                transition: 0.25s all ease-in-out;
            }
            .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--homework-check-dynamic {
                width: 90%;
                height: max-content;
                display: flex;
                flex-direction: column;
                gap: 20px;
                justify-content: center;
                align-items: center;
            }
            .user--homework-check-overview {
                width: 100%;
                height: max-content;
                display: flex;
                flex-direction: column;
                gap: 20px;
                justify-content: center;
                align-items: center;
            }
            .user--homework-check-course-wrapper {
                width: 100%;
                height: max-content;
                display: flex;
                flex-direction: column;
                gap: 20px;
                justify-content: center;
                align-items: center;
            }
            .user--homework-check-course-name {
                font-weight: 450;
                color: #929292;
                font-size: 25px;
                align-self: flex-start;
            }
            .user--homework-check-course-inside-name {
                font-weight: 450;
                color: #000000;
                font-size: 25px;
                align-self: flex-start;
            }
            .user--homework-check-course-inside-upper {
                width: max-content;
                height: max-content;
                /* padding-block: 10px; */
                display: flex;
                gap: 15px;
                align-self: flex-start;
            }
            .user--homework-check-course-inside-upper .icon-back {
                width: 30px;
                height: 30px;
            }
            .user--homework-check-course-inside-upper .icon-back svg {
              width: 100%;
              height: 100%;
            }
            .user--homework-check-homework-list {
                width: 100%;
                height: max-content;
                display: flex;
                flex-direction: column;
                gap: 50px;
                justify-content: center;
                align-items: center;
                padding-block: 30px;
            }
            .user--homework-check-homework-inactive-icon {
                pointer-events: none;
            }
            .user--homework-check-homework-inactive-icon svg path {
                fill: #b9b9b9 !important;
            }
            .user--homework-check-homework-wrp {
                width: 90%;
                height: max-content;
                padding-block-start: 30px;
                padding-block-end: 50px;
                padding-inline: 30px;
                display: flex;
                gap: 15px;
                justify-content: center;
                align-items: center;
                border: 2px solid #D9D9D9;
                border-radius: 20px;
                position: relative;
                flex-direction: column;
            }
            .user--homework-check-eval-board {
                width: max-content;
                height: max-content;
                padding-block: 10px;
                padding-inline: 20px;
                display: flex;
                justify-content: center;
                background-color: white;
                align-items: center;
                gap: 20px;
                box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 2px 2px;
                border-radius: 10px;
                align-items: center;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translate(-50%, 50%);
            }
            .user--homework-check-eval-icon {
                width: 30px;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
            }
            .user--homework-check-eval-textual {
                width: 70px;
                height: max-content;
                padding-inline: 10px;
                font-size: 20px;
                font-weight: 450;
                color: #000000;
                border: 0;
                background-color: transparent;
            }
            .user--homework-check-eval-icon svg {
                width: 80%;
                height: 80%;
            }
            .user--homework-check-course-block {
                width: 100%;
                height: max-content;
                position: relative;
                display: flex;
                padding: 50px;
                border-radius: 20px;
                justify-content: center;
                align-items: center;
                box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 2px 2px;
            }
            .user--homework-check-class-list {
                width: 80%;
                height: max-content;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-wrap: wrap;
                gap: 20px;
            }
            .user--homework-check-class-nwrapper {
                width: max-content;
                height: max-content;
                background-color: #ffffff;
                border: 0;
                box-shadow: rgba(0,0,0,0.1) 0px 0px 2px 2px;
                border-radius: 10px;
                display: flex;
                padding-inline: 20px;
                padding-block: 10px;
                gap: 20px;
                cursor: pointer;
                justify-content: center;
                align-items: center;
                transition: all 0.15s linear;
            }
            .user--homework-check-class-nwrapper:hover {
                background-color: #f2f2f2;
            }
            .user--homework-check-class-nwrapper .cname {
                font-size: 20px;
                font-weight: 400;
                color: #000000;
            }
            .user--homework-check-class-nwrapper .amount-active {
                font-size: 20px;
                font-weight: 500;
                color: #3372AD;
            }
            .user--homework-check-class-nwrapper .amount-passive {
                font-size: 20px;
                font-weight: 500;
                color: #C5C5C5;
            }
            .user--homework-check-visual {
                width: 40px;
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 10px;
                box-shadow: rgba(0,0,0,0.05) 0px 0px 2px 2px;
                border: 0;
                background-color: #ffffff;
                position: absolute;
                left: 0%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
            .user--homework-check-visual svg {
                width: 70%;
                height: 70%;
            }
            .user--homework-inside-visual {
                width: 40px;
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 10px;
                box-shadow: rgba(0,0,0,0.05) 0px 0px 2px 2px;
                border: 0;
                background-color: #ffffff;
                position: absolute;
                right: 0%;
                bottom: 0%;
                transform: translate(0%, 50%);
            }
            .user--homework-check-homework-ans-wrapper {
                width: 100%;
                height: max-content;
                display: flex;
                flex-direction: column;
                gap: 15px;
            }
            .user--homework-check-homework-ans-wrapper h2 {
                font-size: 20px;
                color: #000000;
                font-weight: 450;
               text-align: left;
               transform: translateY(10px);
            }
            .user--homework-check-homework-ex-task {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                align-self: flex-start;
                flex-direction: column;
            }
            .user--homework-check-homework-ex-task p {
                font-size: 25px;
                color: #b9b9b9;
                font-weight: 450;
               justify-self: flex-start;
            }
            .user--homework-check-homework-inp-wrapper {
                width: 100%;
                padding: 15px;
                border-radius: 10px;
                border: 1px solid #d9d9d9;
                position: relative;
            }
            .user--homework-check-homework-inp-wrapper textarea {
                width: 100%;
                height: max-content;
                padding-inline: 10px;
                font-size: 20px;
                font-weight: 450;
                color: #000000;
                border: 0;
                background-color: transparent;
            }
            .user--homework-check-homework-inp-wrapper-part textarea {
                width: 100%;
                height: max-content; 
                padding-inline: 10px;
                font-size: 20px;
                font-weight: 450;
                color: #000000;
                border: 0;
                background-color: transparent;
            }
            .user--homework-check-eval-icon-clicked {
                pointer-events: none;
            }
            .user--homework-check-eval-icon-clicked svg path {
                fill: #50C779 !important;
            }
            .user--homework-check-complete-icon svg path {
                fill: rgb(51, 114, 173);
            }
            
            .user--homework-check-eval-wrapper-shrunk {
                width: 0 !important;
                height: 0 !important;
                padding-block-start: 0;
                padding-block-end: 0;
            }
            .user--homework-inside-visual svg {
                width: 50%;
                height: 50%;
            }
            .user--homework-check-class-nwrapper .split {
               width: 2.5px;
               height: 25px;
               border-radius: 5rem;
               background-color: #dddddd;
            }
            .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--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-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-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-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-dropdown:hover .user--traverse-dropdown-button {
                border: 3px solid #0C5CA4;
                transition: 0.25s all ease-in-out;
            }


        .user--traverse-section-distributor {
                display: flex;
                width: max-content;
                height: max-content;
                margin-block: 15px;
                gap: 2px;
                }
                .user--traverse-section-distributor-section {
                    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;
                }
                .user--popup-schedule-main-inner-blocks {
                        width: 100%;
                        height: max-content;
                }
                .user--traverse-section-distributor-section:hover, user--schedule-week-distributor-section:hover {
                    box-shadow: #0C5CA450 0px 0px 2px 2px;
                }
                /* Teacher processing */
                .teacher--popup-content-table-wrapper {
                        width: 100%;
                        height: max-content;
                        display: flex;
                        flex-direction: column;
                        gap: 20px;
                        padding: 20px;
                        background-color: transparent;
                        overflow-y: auto;
                }
                .teacher--popup-content-table {
                        display: grid;
                      /*  grid-template-columns: auto auto auto auto; */
                        grid-gap: 10px;
                        padding: 10px;
                }
                .teacher--popup-content-table-item {
                        background-color: #ffffff;
                        border: 1px solid rgba(0, 0, 0, 0.8);
                        padding: 20px;
                        font-size: 30px;
                        text-align: center;
                }
                .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: 0px;
                        box-shadow: #0C5CA450 0px 0px 2px 2px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        transition: all 0.25s linear;
                        }
                        .user--traverse-miniature-control-button-icon svg {
                                width: 100%;
                                height: 100%;
                            }
                            .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: 90%;
                                    height: 90%;
                                    }
                            .user--traverse-miniature-control-button-icon svg path {
                                fill: #000000;
                                }
                                .user--traverse-miniature-control-buttons-wrap {
                                        display: flex;
                                        flex-direction: row;
                                        gap: 15px;
                                        flex-wrap: wrap;
                                        justify-content: center;
                                        align-items: center;
                                        width: 100%;
                                        position: relative;
                                        margin: 0 auto;
                                }
                                .user--traverse-miniature-control-button-wrap .description {
                                        display: none;
                                        position: absolute;
                                        bottom: 0;
                                        width: max-content;
                                        max-width: 100%;
                                        height: 100%;
                                        left: 50%;
                                        transform: translateX(-50%); /* Center it horizontally */
                                        padding: 10px;
                                        border-radius: 5px;
                                        background-color: #ffffff;
                                        box-shadow: 0px 0px 3px 1px #0C5CA450;
                                        color: #0C5CA4;
                                        font-weight: 400;
                                    }
                                      
                                    .user--traverse-miniature-control-button-wrap:hover .description {
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                    }
                                    .user--class-exercise-additional-buttons-wrap {
                                        display: flex;
                                        width: max-content;
                                        padding: 10px;
                                        border: 1px solid #b8cce3; 
                                        border-radius: 50px;
                                        background-color: transparent;
                                        height: max-content;
                                        gap: 20px;
                                        justify-content: center;
                                        align-items: center;
                                        margin: 0 auto;
                                    }
                                    .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;
                                        margin: 0 auto;
                                    }
                                    .exercise-builder-add-icon svg, .exercise-builder-remove-icon svg  {
                                        width: 100%;
                                        height: 100%;
                                    }
                                    .user--controls-handler-wrapper {
                                        width: max-content;
                                        max-width: 55%;
                                        height: max-content;
                                        min-width: 50%;
                                        max-height: 70%;
                                        overflow-y: scroll;
                                        padding: 20px;
                                        display: flex;
                                        flex-direction: column;
                                        gap: 10px;
                                        justify-content: start;
                                        align-items: center;
                                        border-radius: 0px;
                                        background-color: #ffffff;
                                        box-shadow: 2px -2px 100px 33px rgba(221, 221, 221, 1), rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
                                        position: absolute;
                                        top: 50%;
                                        left: 50%;
                                        transform: translate(-50%, -50%);
                                        border-radius: 10px;
                                    }
                                    .user--group-create-button {
                                        font-size: 20px;
                                        font-weight: 500;
                                        color: #0C5CA4;
                                        margin-inline-start: 10px;
                                        cursor: pointer;
                                    }
                                    .user--group-create-success-message {
                                        font-size: 20px;
                                        font-weight: 400px;
                                        color: #28a745;
                                    }
                                    .error-color {
                                        color: #dc3545 !important;
                                    }
                                    .user--processing-wrapper {
                                        width: max-content;
                                        max-width: 70%;
                                        height: max-content;
                                        min-width: 50%;
                                        
                                        max-height: 70vh;
                                        overflow-y: scroll;
                                        padding-inline: 50px;
                                        display: flex;
                                        flex-direction: column;
                                        gap: 10px;
                                        justify-content: start;
                                        align-items: center;
                                        border-radius: 0px;
                                        background-color: #ffffff;
                                        box-shadow: 2px -2px 100px 33px rgba(221, 221, 221, 1), rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
                                        position: absolute;
                                        /* top: 50%; */
                                        left: 50%;
                                        transform: translateX(-50%);
                                        border-radius: 10px;
                                        z-index: 2;
                                        padding-block: 30px;
                                        margin-block: 20px;
                                    }
                                    .user--panel-story-mwrapper-controller-icon-small:hover svg path {
                                        fill: rgba(12, 92, 164, 1);
                                    }
                                    .user--controls-settings-wrapper {
                                        width: 100%;
                                        height: max-content;
                                        height: 100%;
                                        overflow-y: scroll;
                                        padding: 20px;
                                        display: flex;
                                        flex-direction: column;
                                        gap: 10px;
                                        justify-content: start;
                                        align-items: center;
                                        border-radius: 0px;
                                        background-color: rgba(255,255,255,0.9);
                                        backdrop-filter: blur(10px);
                                        -webkit-backdrop-filter: blur(10px);
                                        box-shadow: 2px -2px 100px 33px rgba(221, 221, 221, 1), rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
                                        position: fixed;
                                        top: 50%;
                                        left: 50%;
                                        transform: translate(-50%, -50%);
                                        border-radius: 10px;
                                        z-index: 9999;
                                        /* background-image: url('https://classroom.alexanderkireev.org/assets/user-panel-bcg.svg');
                                        background-size: cover;
                                        background-position: center;
                                        background-repeat: no-repeat; */
                                    }

                                    .user--chat-interface-wrapper {
                                        width: 95%;
                                        height: max-content;
                                        height: 95%;
                                        overflow: hidden;
                                        padding: 20px;
                                        display: flex;
                                        flex-direction: column;
                                        gap: 10px;
                                        justify-content: start;
                                        align-items: center;
                                        border-radius: 40px;
                                        border: 3px solid #0C5CA450;
                                        background-color: rgba(255, 255, 255, 0.95);
                                        backdrop-filter: blur(20px);
                                        -webkit-backdrop-filter: blur(20px);
                                        box-shadow: 2px -2px 100px 33px rgba(221, 221, 221, 1), rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
                                        position: fixed;
                                        top: 50%;
                                        left: 50%;
                                        transform: translate(-50%, -50%);
                                        z-index: 9999;
                                    }
                                  
                                    .user--controls-handler-wrapper h1 {
                                        font-size: 35px;
                                        font-weight: 600;
                                        font-family: inherit;
                                        align-self: left;
                                        margin-block-end: 0px;
                                        margin-inline-start: 10px;
                                        text-align: left;
                                        align-self: baseline;
                                    }
                                    .user--processing-wrapper h1 {
                                        font-size: 35px;
                                        font-weight: 600;
                                        font-family: inherit;
                                        align-self: left;
                                        margin-block-end: 0px;
                                        margin-inline-start: 10px;
                                        text-align: left;
                                        align-self: baseline;
                                    }
                                    .user--controls-settings-wrapper h1 {
                                        font-size: 30px;
                                        font-weight: 500;
                                        font-family: inherit;
                                        align-self: left;
                                        margin-block-end: 0px;
                                        margin-inline-start: 10px;
                                        text-align: left;
                                        align-self: baseline;
                                    }
                                    .user--dynamic-popup-invite-wrap {
                                        width: 100%;
                                        height: max-content;
                                        display: flex;
                                        flex-direction: column;
                                        gap: 15px;
                                        justify-content: center;
                                        align-items: center;
                                    }
                                    .user--dynamic-popup-settings-wrap {
                                        width: 100%;
                                        height: max-content;
                                        display: flex;
                                        flex-direction: column;
                                        gap: 15px;
                                        justify-content: center;
                                        align-items: center;
                                    }
                                    .user--dynamic-popup-invite-wrap-desc {
                                        font-size: 20px;
                                        font-weight: 400;
                                        font-family: inherit;
                                        text-align: center;
                                        width: 100%;
                                        padding-block: 5px;
                                        padding-inline: 10px;
                                        text-align: left;
                                    }
                                    .user--dynamic-popup-settings-header {
                                        width: 100%;
                                        height: max-content;
                                        display: flex;
                                        gap: 20px;
                                        font-size: 30px;
                                        font-weight: 800;
                                        justify-content: flex-start;
                                        align-items: center;
                                    }
                                    .user--dynamic-popup-settings-header-icon {
                                        width: 70px;
                                        height: 70px;
                                    }
                                    .user--settings-main-control-wrap {
                                        width: 100%;
                                        margin-block: 10px;
                                        display: flex;
                                        justify-content: start;
                                        align-items: center;
                                        flex-wrap: wrap;
                                        padding: 20px;
                                        border-radius: 20px;
                                        gap: 15px;
                                        border: 3px solid #0C5CA450;
                                    }
                                    .user--settings-main-control-button {
                                        font-size: 18px;
                                        font-weight: 500;
                                        color: #0C5CA4;
                                        background-color: transparent;
                                        flex-wrap: wrap;
                                        padding-block: 10px;
                                        padding-inline: 15px;
                                        background-color: #0C5CA450;
                                        border-radius: 5rem;
                                        transition: all 0.3s linear;
                                        cursor: pointer;
                                    }
                                    .user--settings-main-control-button:hover {
                                        background-color: #0C5CA4;
                                        color: #ffffff;
                                    }
                                    .user--dynamic-popup-settings-header-icon svg {
                                        width: 100%;
                                        height: 100%;
                                    }
                                    .user--course-setting-main-inside {
                                        width: 50%;
                                        justify-self: center;
                                        align-self: center;
                                        margin-block: 20px;
                                        height: max-content;
                                        text-align: left;
                                        display: flex;
                                        gap: 10px;
                                        flex-direction: column;
                                    }
                                    .user--course-setting-main-inside h5 {
                                        font-size: 25px;
                                        color: #7e7e7e;
                                    }
                                    .user--settings-info-main-inside {
                                        width: 100%;
                                        justify-self: center;
                                        align-self: center;
                                        margin-block: 20px;
                                        height: max-content;
                                        text-align: left;
                                        display: flex;
                                        gap: 10px;
                                        flex-direction: column;
                                    }
                                    .user--settings-grid-block-upper {
                                        width: 100%;
                                        height: max-content;
                                        display: grid;
                                        grid-template-columns: 1fr 1fr;
                                        grid-gap: 20px;
                                        justify-content: center;
                                        align-items: center;
                                        margin-block: 20px;
                                    }
                                    .user--settings-main-picture-interface {
                                        width: 100%;
                                        height: max-content;
                                        display: flex;
                                        flex-direction: column;
                                        gap: 20px;
                                        justify-content: center;
                                        align-items: center;
                                    }
                                    .user--settings-main-picture-interface-imgw {
                                        width: 150px;
                                        height: 150px;
                                        border-radius: 50%;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        background-color: #ffffff;
                                        box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.25);
                                        transition: all 0.15s linear;
                                        cursor: pointer;
                                    }
                                    .user--settings-main-picture-interface-imgw:hover {
                                        box-shadow: 0px 0px 2px 1px rgba(133, 173, 209, 1);
                                    }
                                    /* .user--settings-main-picture-interface-imgw:hover svg path {
                                        fill: rgba(133, 173, 209, 1);
                                    } */
                                    .user--settings-main-picture-interface-imgw-text {
                                        width: 100%;
                                        height: 100%;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        font-size: 22px;
                                        font-weight: 500;
                                        color: #000000;
                                        cursor: pointer;
                                        transition: all 0.15s linear;
                                        text-transform: uppercase;
                                    }
                                    .user--settings-main-picture-interface-imgw-text:hover {
                                        color: rgba(133, 173, 209, 1);
                                    }
                                    .user--settings-main-picture-interface-imgw svg {
                                        width: 50%;
                                        height: 50%;
                                    }
                                        .user--settings-main-picture-interface-imgw img {
                                                width: 100%;
                                                height: 100%;
                                                border-radius: 50%;
                                                object-fit: cover;
                                        }

                                    .user--setting-main-form-wrap-ns-value {
                                        font-size: 25px;
                                        font-weight: 600;
                                        text-align: left;
                                        background-color: #ffffff;
                                        border: 0;
                                        color: #85add1;
                                        margin-inline: 15px;
                                        width: calc(100% - 15px);
                                        height: max-content;
                                        padding: 10px;
                                       }
                                       .user--course-setting-main-form-wrap-ns {
                                        padding-inline: 20px;
                                        padding-block: 25px;
                                        border-radius: 20px;
                                        width: 100%;
                                        display: flex;
                                        gap: 5px;
                                        flex-direction: column;
                                        height: max-content;
                                        box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
                                        background-color: #ffffff;
                                       }
                                       .user--course-setting-main-form-wrap-ns p {
                                        font-size: 20px;
                                        font-weight: 550;
                                        text-align: left;
                                        margin-block-start: 20px;
                                        margin-block-end: 10px;
                                       }
                                    .user--dynamic-popup-settings-wrap-desc {
                                        font-size: 20px;
                                        font-weight: 400;
                                        font-family: inherit;
                                        text-align: center;
                                        width: 100%;
                                        padding-block: 5px;
                                        padding-inline: 10px;
                                        text-align: left;
                                    }
                                .user--student-name-input {
                                        font-size: 20px;
                                        font-weight: 400;
                                        text-align: left;
                                        background-color: #ffffff;
                                        border: 0;
                                        border-bottom: 1px solid #CCCCCC;
                                        color: #000000;
                                        margin-inline: 15px;
                                        width: calc(100% - 15px);
                                        height: max-content;
                                        padding: 10px;
                                }
                                .user--table-manage-button-icon {
                                        width: 40px;
                                        height: 40px;
                                        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--invite-student-key-wrapper {
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        gap: 10px;
                                        padding: 15px;
                                        border-radius: 10px;
                                        box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
                                        border: 0;
                                       }
                                       .user--invite-student-key-wrapper span b {
                                        font-weight: 500;
                                       }
                                       .user--join-main-step-two {
                                        width: 100%;
                                        height: max-content;
                                        display: flex;
                                        gap: 10px;
                                        flex-direction: column;
                                        margin-block-end: 30px;
                                
                                       }
                                       .user--join-header {
                                        font-size: 40px;
                                        margin-inline-start: 10px;
                                        font-weight: 600;
                                        text-align: left; 
                                       }
                                       .user--join-header-exp {
                                        font-size: 50px;
                                        font-weight: 700;
                                        margin-inline-start: 10px;
                                        margin-block-end: 10px;
                                        align-self: flex-start;
                                       }
                                       .user--join-header-exp-tiny {
                                        font-size: 30px;
                                        font-weight: 700;
                                        margin-inline-start: 10px;
                                        margin-block-end: 10px;
                                        align-self: flex-start;
                                       }
                                       .user--join-main-form-wrap-ns {
                                        padding-inline: 15px;
                                        
                                        border-radius: 20px;
                                        width: 100%;
                                        display: flex;
                                        gap: 5px;
                                        flex-direction: column;
                                        height: max-content;
                                        
                                        background-color: #ffffff;
                                       }
                                       .user--join-main-form-wrap-ns p {
                                        font-size: 25px;
                                        font-weight: 400;
                                        text-align: left;
                                        margin-inline: 10px;
                                        margin-block-start: 20px;
                                        margin-block-end: 10px;
                                       }
                                       .user--join-main-form-wrap-ns input {
                                        height: max-content;
                                        margin-inline: 15px;
                                        width: calc(100% - 15px);
                                        background-color: #f9f9f9;
                                        border: 3px solid #a6a6a650;
                                        color: #1355A3;
                                        font-family: 'Rubik', 'Inter', sans-serif;
                                        border-radius: 50px;
                                        padding-block: 20px;
                                        padding-inline: 30px;
                                        font-size: 23px;
                                        font-weight: 500;
                                       }
                                       .user--join-input-highlighted {
                                        border: 3px solid #57e3ad50 !important;
                                       }
                                      
                                       /* form generic constructor styling */

                                       .user--generic-form-main {
                                        width: 100%;
                                        height: max-content;
                                        /* text-align: left; */
                                        display: flex;
                                        flex-direction: column;
                                    }
                                       .user--generic-form-main-inside {
                                        width: 50%;
                                        justify-self: center;
                                        align-self: center;
                                        margin-block: 20px;
                                        height: max-content;
                                        text-align: left;
                                        display: flex;
                                        gap: 10px;
                                        flex-direction: column;
                                    }
                                    .user--generic-form-main-inside h1 {
                                        font-size: 25px;
                                        font-weight: 500;
                                        font-family: inherit;
                                        text-align: left;
                                        align-self: baseline;
                                        margin-block-end: 0px;
                                    }
                                    .user--generic-form-main-inside-full {
                                        width: 100%;
                                        justify-self: center;
                                        align-self: center;
                                        margin-block: 20px;
                                        height: max-content;
                                        text-align: left;
                                        display: flex;
                                        gap: 30px;
                                        flex-direction: column;
                                    }
                                    .user--generic-form-main-inside-full h1 {
                                        font-size: 40px;
                                        font-weight: 700;
                                        font-family: inherit;
                                        text-align: left;
                                        align-self:center;
                                        margin-block-end: 0px;
                                    }
                                    .user--generic-form-main-form-wrap-ns {
                                        padding: 40px;
                                        border-radius: 30px;
                                        width: 95%;
                                        margin: 0 auto;
                                        display: flex;
                                        gap: 5px;
                                        flex-direction: column;
                                        height: max-content;
                                        box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
                                        background-color: #ffffff;
                                       }
                                       .user--generic-form-main-form-wrap-ns p {
                                        font-size: 23px;
                                        font-weight: 350;
                                        text-align: left;
                                        margin-inline: 10px;
                                        margin-block-start: 20px;
                                       }
                                       .user--generic-form-main-form-wrap-ns input {
                                        font-size: 23px;
                                        font-weight: 400;
                                        text-align: left;
                                        background-color: #EFEFEF;
                                        border: 0;
                                        border-radius: 50px;
                                        width: 100%;
                                        color: #000000;
                                        
                                        width: 100%;
                                        height: max-content;
                                        padding: 15px;
                                       }
                                       .input-wrapper {
                                        display: flex;
                                        flex-direction: column;
                                        gap: 15px;
                                       }
                                       .user--generic-form-input-highlighted {
                                        border-bottom: 1px solid #95b767 !important;
                                       }
                                       .user--generic-form-main-custom-select {
                                        position: relative;    
                                        display: flex;
                                        align-items: center;
                                        width: calc(100% - 15px);
                                        gap: 5px;
                                        margin-inline: 15px;
                                        border-bottom: 1px solid #CCCCCC;
                                    }
                                    .user--generic-form-main-custom-selected-value {
                                        display: inline-block;
                                        padding: 10px;
                                        border: 0;
                                        color: #0C5CA4;
                                        font-size: 20px;
                                        cursor: pointer;
                                    }
                                    .user--generic-form-main-custom-select-icon {
                                        display: inline-block;
                                        width: 20px;
                                        height: 20px;
                                        cursor: pointer;
                                        transition: transform 0.3s ease;
                                    }
                                    
                                    .user--generic-form-main-custom-select-icon svg {
                                        width: 100%;
                                        height: 100%; 
                                    }
                                    .user--generic-form-main-custom-select-icon:hover svg path {
                                        fill: #0C5CA4;
                                    }
                                    .user--generic-form-main-custom-options-wrapper {
                                        display: none;  /* Hidden by default */
                                        position: absolute;
                                        top: 100%;
                                        left: 0;
                                        border: 1px solid #0C5CA4;
                                        border-radius: 10px;
                                        background-color: #fff;
                                        width: 100%;  
                                        z-index: 1;  
                                    }
                                    
                                    /* Show options when class is toggled */
                                    .user--generic-form-main-custom-options-wrapper.show-options {
                                        display: block;
                                        margin-block: -5px;
                                    }
                                    .user--generic-form-main-custom-option {
                                        padding: 10px;
                                        cursor: pointer;
                                    }
                                    
                                    /* Optional, for better visual feedback */
                                    .user--generic-form-main-custom-option:hover {
                                        color: #0C5CA4;
                                    }
                                    .user--generic-form-main-custom-option-selected {
                                        color: #0C5CA4;
                                       pointer-events: none;
                                    }
                                    .user--generic-button-v2 {
                                        background-color: transparent;
                                        font-size: 23px;
                                        font-weight: 450;
                                        font-family: inherit;
                                        padding-inline: 20px;
                                        padding-block: 10px;
                                        color: #0C5CA4;
                                        box-shadow: #0C5CA450 0px 0px 3px 2px;
                                        width: max-content;
                                        margin: 0 auto;
                                        transition: 0.25s all ease-in-out;
                                        cursor: pointer;
                                        margin-block: 30px;
                                        border-radius: 10px;
                                    }
                                    .user--generic-delete-v2 {
                                        color: #FF9393 !important;
                                        border-bottom: 3px solid #FF939350 !important;
                                    }

                                    .teacher--continue-button-icon {
                                        width: 45px;
                                        height: 45px;
                                        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;
                                        transition: all 0.15s linear;
                                    }
                                    .teacher--continue-button-icon:hover {
                                        background-color: #0C5CA450;
                                        box-shadow: #0C5CA4 0px 0px 2px 2px;
                                    }
                                    .teacher--continue-button-icon:hover svg path {
                                        fill: #0C5CA4;
                                    }
                                        .teacher--continue-button-icon svg {
                                                width: 80%;
                                                height: 80%;
                                        }
                                    .user--generic-button-v2:hover {
                                            color: #ffffff;
                                            background: #0C5CA4;
                                        }
                                        .user--generic-delete-v2:hover {
                                                color: #ffffff !important;
                                                background: #FF9393 !important;
                                                border-radius: 10px;
                                            }
                                



                                            @media only screen and (max-width: 700px) {
                                                .nav--big {
                                                        padding-inline: 5%;
                                                        padding-block: 10px;
                                                        flex-direction: row;
                                                        flex-wrap: wrap;
                                                        justify-content: space-between;

                                                }
                                                .user--linkblock-wrap::before {
                                                        border-radius: 35px !important;
                                                }
                                                .user--chat-interface-wrapper {
                                                        width: 100%;
                                                        height: 100%;
                                                        border-radius: 0;
                                                        border: 0px;
                                                        padding: 10px;
                                                }
                                                .nav--logo-small {
                                                        height: 25px;
                                                }
                                                .nav--logo-small-intro {
                                                        height: 20px;
                                                }
                                                .login--auth-wrap {
                                                        flex-direction: column;
                                                        padding-inline: 0;
                                                        padding-block: 15px;
                                                }
                                               
                                                .login-auth-frame {
                                                       width: 100%; 
                                                       box-shadow: none;
                                                       padding-block: 10px;
                                                       padding-inline: 0px;
                                                       border-radius: 0px;
                                                     /*  box-shadow: rgba(0, 0, 0,0.1) 0px 0px 8px 4px; */
                                                }
                                                .user--controls-settings-wrapper {
                                                        padding: 2.5%;
                                                }
                                                .image-wrapper-modified img {
                                                        width: 100%;
                                                        height: 100%;
                                                        object-fit: cover;
                                                }
                                                .login--auth-right {
                                                        width: 100%;
                                                }
                                                .login--auth-right h1 {
                                                        font-size: 25px;
                                                }
                                                .user--exercise-builder-particular-multiplechoice-input, .user--exercise-builder-sequence-input, .user--slide-lottie-wrapper, .user--slide-builder-dialogue-expl {
                                                        border-radius: 20px; 
                                                }
                                                .user--slide-lottie-wrapper { 
                                                        font-size: 18px;
                                                }
                                                .controls-container {
                                                        width: 150px;
                                                        height: 150px;
                                                        margin-block: 30px;
                                                }
                                                .contributor--class-table-column-buttons-block {
                                                        flex-direction: column;
                                                        padding-inline: 5px;
                                                }
                                           
                                                .user--class-table-wrapper {
                                                        padding-block-end: 40px;
                                                        border-radius: 40px;
                                                }
                                                .login--auth-input {
                                                        width: 95%;
                                                        height: max-content;
                                                        padding: 10px;
                                                        font-size: 18px;
                                                        border-radius: 0px;
                                                        border: 0px;
                                                        background-color: transparent;
                                                        box-shadow: none !important;
                                                       border-bottom: 1.5px solid rgba(0, 0, 0, 0.2);
                                                }
                                                .login--auth-form {
                                                        gap: 30px;
                                                }
                                                .login--auth-button {
                                                        font-size: 20px;
                                                        margin-block: 0px;
                                                }       
                                                .footer--main-wrap-block {
                                                        gap: 20px;
                                                }
                                                .user--join-main-banner {
                                                        justify-content: center;
                                                }
                                                .signup-class-inner {
                                                        width: 100%;
                                                        padding: 20px;
                                                }
                                                .user--join-main-removable-textual-big {
                                                        font-size: 30px;
                                                }
                                                .user--join-main-removable-textual-tiny {
                                                        font-size: 20px;
                                                        margin-inline-start: 0px;
                                                }
                                                .intro-comment-block-avatar { 
                                                        width: 100px;
                                                        height: 100px;
                                                }
                                                .user--class-char-set {
                                                        flex-direction: column;
                                                }
                                                
                                                .user-signup-header-wrap {
                                                        border-radius: 20px;
                                                        padding: 20px;
                                                        font-size: 20px;
                                                }
                                                .user--join-header-exp-tiny {
                                                        font-size: 25px;
                                                }
                                                .user--join-main-form-wrap-ns {
                                                        padding-inline: 0px;
                                                }
                                                .user--join-main-form-wrap-ns p {
                                                        font-size: 20px;
                                                }
                                                .intro--sticker-block {
                                                        padding: 10px;
                                                }
                                                .user--join-main-form-wrap-ns input {
                                                        font-size: 20px;
                                                        padding-block: 15px;
                                                        padding-inline: 25px;
                                                }
                                                .user--class-generic-button-3 {
                                                        font-size: 20px;
                                                        overflow: hidden;
                                                        text-overflow: ellipsis;
                                                        white-space: nowrap;

                                                }
                                                .user--class-exercise-header-slidename {
                                                        font-size: 22px;
                                                        font-weight: 400;
                                                        width: 100%;
                                                        padding: 20px;
                                                }
                                                .user--exercise-builder-block-truefalse-inside, .user--exercise-builder-block-multiple-choice-inside, .user--exercise-builder-block-sequence-inside, .user--exercise-builder-block-match-inside {
                                                        width: 100%;
                                                        border: 1px solid #d7d7d7;
                                                        border-radius: 20px;
                                                        padding: 15px;
                                                }
                                                .user--exercise-builder-block-description {
                                                        width: 100%;
                                                        text-align: center;
                                                }
                                                .answer-buttons {
                                                        display: flex;
                                                        justify-content: center;
                                                        align-items: center;
                                                        width: 100%;
                                                        height: max-content;
                                                        flex-wrap: wrap;
                                                }
                                                .user--class-exercise-question-tr {
                                                        width: 100%;
                                                        padding: 15px;
                                                }
                                                .option-wrapper-row {
                                                        flex-direction: column;
                                                }
                                                .user--exercise-builder-particular-multiplechoice-input, .user--exercise-builder-sequence-input {
                                                        width: 100%;
                                                }
                                                .user--join-main-banner img {
                                                        margin-inline-end: 0;
                                                }
                                                .footer--main-links, .footer--main-links-clickable {
                                                        font-size: 14px;
                                                        white-space: nowrap;
                                                }
                                                .notfound--main-block { 
                                                        width: 95%;
                                                        margin-block: 50px;
                                                }
                                                .notfound--desc-image {
                                                        width: 150px;
                                                        height: 150px;
                                                }
                                                .notfound--main-block h1 {
                                                        font-size: 25px;
                                                }
                                                .notfound-return-button {
                                                        font-size: 20px;
                                                }
                                                .user--class-generic-button-3-tiny {
                                                        font-size: 18px;
                                                        max-width: 100%;
                                                        overflow: hidden;
                                                        text-overflow: ellipsis;
                                                        white-space: nowrap;
                                                        
                                                } 
                                                .user--class-generic-button-3-supertiny {
                                                        font-size: 16px;
                                                        max-width: 100%;
                                                        overflow: hidden;
                                                        text-overflow: ellipsis;
                                                        white-space: nowrap;
                                                        
                                                } 
                                                .user--join-main-banner img {
                                                        width: 200px;
                                                        height: 120px;
                                                }
                                                .tiny-width-100 {
                                                        width: 100%;
                                                }
                                                .footer--main-wrap-block {
                                                        width: 100%;
                                                        justify-content: flex-start;
                                                        overflow-x: scroll;
                                                }
                                                .footer--main-wrap-block {
                                                        width: 100%;
                                                        border-radius: 0px;
                                                        padding-inline: 10px;
                                                        padding-block: 15px;
                                                }
                                                .user-intro-header-wrap {
                                                        padding: 10px;
                                                        border-radius: 10px;
                                                }
                                              
                                                .nav--status-bar {
                                                        padding: 0px;
                                                        border: none;
                                                        box-shadow: none;
                                                }
                                                .welcome--block-big-gap {
                                                        display: none;
                                                }
                                                .nav--status-bar-image {
                                                        display: none;
                                                }
                                                .nav--status-bar-info {
                                                        display: none;
                                                }
                                                .nav--status-bar-settings {
                                                        width: 25px;
                                                        height: max-content;
                                                        display: block;
                                                }
                                                .user--myClasses-wrap {
                                                        padding-inline: 0px;
                                                }
                                                .user--classesSchedule-block {
                                                        border-radius: 0px;
                                                        padding-inline: 15px;
                                                        padding-block: 30px;
                                                        font-size: 20px;
                                                }
                                              
                                                .user--myPlayground-hero, .user--myClasses-hero {
                                                        
                                                        margin: 0 auto;
                                                        font-size: 30px;
                                                        text-align: center;
                                                }
                                                .user--myPlayground-wrap {
                                                        padding-inline: 0;
                                                }
                                                .user--class-exercise-header-modified {
                                                        width: 100%;
                                                        border-radius: 20px;
                                                }
                                                .user--linkblock-united {
                                                        border-radius: 40px;
                                                        grid-template-columns: repeat(1, 1fr);
                                                        padding-block: 10px;
                                                        gap: 10px !important;
                                                        padding-inline: 0;
                                                }
                                                .user-intro-header-wrap {
                                                        font-size: 20px;
                                                        background-color: transparent;
                                                }
                                                .user--class-exercise-header { 
                                                        width: 100%;
                                                }
                                                .user--exercise-item-wrapper {
                                                padding: 0px;
                                        }
                                                .user--linkblock-wrap-h1 {
                                                        font-size: 25px;
                                                        padding-inline: 5%;
                                                }
                                                .user-intro-header-wrap-inner img {
                                                        width: 200px;
                                                        height: 200px;
                                                }

                                                .user--linkblock-wrap-inner {
                                                        padding-inline: 10px;
                                                        padding-block: 15px;
                                                        border-radius: 0px;
                                                        gap: 10px;
                                                        background-color: transparent;
                                                }
                                                .teachers--desc-image {
                                                        width: 150px;
                                                        height: 150px;
                                                }
                                                .teachers--main-block h1 {
                                                        font-size: 30px;
                                                        max-width: 95%;
                                                        text-align: center;
                                                }
                                                .teachers--block-textual {
                                                        width: 95%;
                                                }
                                                .teachers--block-image {
                                                        width: 300px;
                                                        height: 170px;
                                                }
                                                .user--panel-story-mwrapper-panel {
                                                        width: 100%;
                                                        border: none;
                                                        padding: 0px;
                                                }
                                                .user--linkblock-wrap {
                                                gap: 10px;
                                                border: none;
                                                margin: 0 auto;
                                                width: calc(100% - 20px);
                                                
                                                border-radius: 35px !important;
                                                background-color: rgba(0, 0, 0, 0.05);
                                                }
                                                .constructor--exercise-list-main {
                                                        grid-template-columns: 1fr;
                                                        gap: 20px;
                                                        width: 100%;
                                                }
                                                .user--notification-dynamic-3 {
                                                width: 90%;
                                                flex-direction: column;
                                                max-width: 90%;
                                                top: 5vw;
                                                border-radius: 20px;
                                                gap: 10px;
                                                border: 0px;
                                                box-shadow: 2px -2px 100px 33px rgba(221, 221, 221, 1), rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
                                                }
                                                .user--notification-dynamic-inside-3 {
                                                        width: 100%;
                                                        padding-inline: 0px !important;
                                                }
                                                .mainpage-iframe {
                                                        border-radius: 10px;
                                                }
                                                .user--notification-dynamic-svg {
                                                        width: 30px;
                                                        height: 30px;
                                                }
                                                .user--notification-dynamic-control {
                                                        width: 25px;
                                                        height: 25px;
                                                        }
                                                        .user--notification-dynamic {
                                                                width: 90%;
                                                                border-radius: 20px;
                                                                padding: 15px;
                                                                top: calc(5vw);
                                                                justify-content: stretch;
                                                                box-shadow: 2px -2px 100px 33px rgba(221, 221, 221, 1), rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
                                                        }
                                                        .user--notification-dynamic-svg {
                                                                width: 30px;
                                                                height: 30px;
                                                        }
                                                        .user--popup-achievement-block-inner-block {
                                                                grid-template-columns: repeat(1, 1fr);
                                                        }
                                                        .user--popup-achievement-block-inner {
                                                                width: 100%;    
                                                                gap: 10px;
                                                        }
                                                        .user--popup-achievement-block {
                                                                border-radius: 0px;
                                                                background-color: white;
                                                                box-shadow: rgba(0, 0, 0,0.1) 0px 0px 2px 2px;
                                                        }
                                                        .user--achievement-block-text-h1 {
                                                                font-size: 25px;
                                                        }
                                                        .user--achievement-block-text-h2 {
                                                                font-size: 18px;
                                                        }
                                                        .user--achievement-block-circle {
                                                                box-shadow: rgba(0, 0, 0,0.1) 0px 0px 2px 2px;
                                                        }
                                                        .user--popup-achievement-block-inner-date {
                                                                padding-inline-start: 5%;
                                                                font-size: 20px;
                                                        }
                                                        .user--popup-wrap h1 {
                                                                font-size: 30px;
                                                                font-weight: 600;
                                                                text-align: start;
                                                        }
                                                        .user--popup-story-main-inner {
                                                                width: 100%;
                                                                border-radius: 0px;
                                                               padding: 0px;
                                                               background-color: #ffffff;
                                                        }
                                                        .user—popup-collection-block-wrap {
                                                                width: 100%;
                                                                padding-inline: 0;
                                                                padding-block: 20px;
                                                                border-radius: 0;
                                                                box-shadow: rgba(0, 0, 0,0.1) 0px 0px 2px 2px;
                                                        }
                                                        .user—popup-collection-block-wrap h2 {
                                                                font-size: 25px;
                                                                margin-inline-start: 5%;
                                                        }
                                                        .user--block-collection-inside-block {
                                                                width: 100%;
                                                                border-bottom: 0;
                                                        }
                                                        .user--block-collection-inside-block-text-wrap {
                                                                font-size: 18px;
                                                        }
                                                        .user--stickers-extended-personal-wrapper {
                                                                grid-template-columns: 1fr;
                                                        }
                                                        .user--stickers-extended-personal-name {
                                                                font-size: 30px;
                                                        }
                                                        .user--popup-goals-upcoming h1, .user--popup-goals-finished h1 {
                                                                font-size: 20px !important;
                                                        }
                                                        .user--popup-goals-block {
                                                                width: 100%;
                                                                padding-inline: 2.5%;
                                                                padding-block: 20px;
                                                                border-radius: 0;
                                                                flex-direction: column;
                                                                border-radius: 20px;
                                                                
                                                        }
                                                        .user--popup-goals-block-p1, .user--popup-goals-block-p2 {
                                                                flex-direction: column;
                                                                width: 100%;
                                                                font-size: 20px;
                                                        }
                                                        .user--popup-story-block-circle {
                                                                width: 40px;
                                                                height: 40px;
                                                        }
                                                        .user--popup-goals-block-p1 h2, .user--popup-goals-block-p2 h2 {
                                                                font-size: 25px;
                                                        }
                                                        .user--popup-story-main-inner-block {
                                                                width: 100%;
                                                                background-color: #ffffff;
                                                                padding-inline: 10px;
                                                                padding-block: 20px;
                                                                border-radius: 20px;
                                                        }
                                                        .user--popup-story-main-inner-block h3 {
                                                                font-size: 25px;
                                                        }
                                                        .user--popup-story-main-inner-block-delim {
                                                                height: 2px;
                                                                background-color: #e7e7e7;
                                                        }
                                                        .user--popup-indicator-empty-block {
                                                                width: 100%;
                                                                border-radius: 0px;
                                                        }
                                                        .user--notification-dynamic-inside-3 h1 {
                                                                font-size: 25px;
                                                            
                                                        }
                                                        
                                                        .user--notification-dynamic-inside-3 h2 {
                                                                font-size: 16px;
                                                             
                                                        }
                                                        .login--auth-banner {
                                                                width: 100%;
                                                                height: 25vh;
                                                        }
                                                        .welcome--block-one-main-slogan {
                                                                font-size: 25px;
                                                        }
                                                        .welcome--block-one-main-flex, .welcome--block-three-main-flex {
                                                                flex-direction: column;
                                                        }
                                                        .welcome--block-one-main-flex-textual-h2, .welcome--block-three-main-flex-textual-h2 {
                                                                font-size: 22px;
                                                                width: 95%;
                                                        }
                                                        .welcome--block-one-main-flex-textual-p, .welcome--block-three-main-flex-textual-p {
                                                                font-size: 18px;
                                                                margin-inline-start: 0px;
                                                                width: 80%;
                                                        }
                                                        .welcome--block-one-main-flex-lottie img, .welcome--block-two-main-flex-lottie img, .welcome--block-three-main-flex-lottie img {
                                                                width: 150px;
                                                                height: 150px;
                                                        }
                                                        .welcome--block-one-main-flex-lottie, .welcome--block-three-main-flex-lottie {
                                                                order: -1;
                                                        }
                                                        .user--panel-story-mwrapper-header-h1 {
                                                                width: 100%;
                                                               
                                                                display: flex;
                                                                
                                                        }
                                                        .welcome--block-one-main-showcase, .welcome--block-three-main-showcase {
                                                                flex-direction: column;
                                                                width: 100%;
                                                        }
                                                        .welcome--block-one-main-showcase-anim, .welcome--block-three-main-showcase-anim {
                                                                padding: 10px;
                                                                border-radius: 15px;
                                                                min-height: max-content;
                                                        }
                                                        .welcome--block-one-main-showcase-inside-header, .welcome--block-three-main-showcase-inside-header {
                                                                font-size: 22px;
                                                        }
                                                        .welcome--block-one-main-showcase-inside-img, .welcome--block-three-main-showcase-inside-img, .welcome--block-iframe-image {
                                                                width: 120px;
                                                                height: 120px;
                                                        }
                                                        .welcome-block-interactive-scene {
                                                                margin-block-start: 20px;
                                                        }
                                                        .mainpage--invitational-block {
                                                                width: calc(100% - 6px);
                                                        }
                                                        .mainpage--invitational-block span {
                                                                font-size: 18px;
                                                        }
                                                        .user--class-full-image span {
                                                                font-size: 22px;
                                                        }
                                                        .welcome--block-one-intro-invitation {
                                                                width: 100%;
                                                                max-width: 100%;
                                                                flex-direction: column;
                                                                gap: 20px;
                                                                padding-block: 20px;
                                                                padding-inline: 10px;
                                                        }
                                                        .welcome--block-one-intro-invitation-button {
                                                                font-size: 18px;
                                                                padding-block: 10px;
                                                                padding-inline: 15px;
                                                        }
                                                        .welcome--block-one-main-flex-lottie img, .welcome--block-two-main-flex-lottie img, .welcome--block-three-main-flex-lottie img {
                                                                width: 150px;
                                                                height: 150px;
                                                        }
                                                        .welcome-block-two-main-chat {
                                                                width: 100%;
                                                                gap: 15px;
                                                        }
                                                        .welcome-block-two-main-chat-sent, .welcome-block-two-main-chat-sender, .welcome--block-two-main-chat-sent {
                                                                font-size: 18px;
                                                                width: 100%;
                                                        }
                                                        .intro-class-continue-button, .welcome--block-three-main-showcase-inside-button {
                                                                font-size: 18px;
                                                        }
                                                        .welcome--block-one-main, .welcome--block-two-main, .welcome--block-three-main {
                                                                padding-block: 20px;
                                                                padding-inline: 0px;
                                                        }
                                                        .welcome--block-one-intro-invitation-block {
                                                                width: 100%;
                                                                max-width: 100%;
                                                                height: max-content;
                                                        }
                                                        .user--controls-settings-wrapper {
                                                                min-height: 100%;
                                                                max-height: 100%;
                                                                max-width: 100%;
                                                                min-width: 100%;
                                                        }
                                                        .user--dynamic-popup-settings-header {
                                                                font-size: 25px;

                                                        }
                                                        .user--dynamic-popup-settings-header-icon {
                                                                display: none;
                                                        }
                                                        .user--settings-grid-block-upper {
                                                                grid-template-columns: 1fr;
                                                                overflow-x: hidden;
                                                        }
                                                        .user--controls-settings-wrapper h1 {
                                                                font-size: 20px;
                                                        }
                                                        .user--course-setting-main-form-wrap-ns {
                                                                padding-inline: 10px;
                                                                padding-block: 15px;
                                                        }
                                                        .user--course-setting-main-form-wrap-ns p {
                                                                font-size: 18px;
                                                        }
                                                        .user--exercise-hint-mini {
                                                                text-align: center;
                                                        }
                                                        .user--setting-main-form-wrap-ns-value {
                                                                font-size: 18px;
                                                        }
                                                        .user--settings-main-picture-interface {
                                                                padding: 15px;
                                                                border-radius: 15px;
                                                                background-color: #ffffff;
                                                                border: 1px solid #CCCCCC;
                                                        }
                                                        .user--settings-main-picture-interface-imgw {
                                                                border-radius: 20px;
                                                                width: 90px;
                                                                height: 90px;
                                                        }
                                                        .user--settings-main-picture-interface-imgw-text {
                                                                font-size: 18px;
                                                                text-align: center;
                                                        }
                                                        .user--settings-main-picture-interface-imgw img {
                                                                border-radius: 50%;
                                                                opacity: 0.8 !important;
                                                        } 
                                                        .user--popup-close-button {
                                                                position: relative;
                                                                top: 0px;
                                                                right: 0px;
                                                                font-size: 18px;
                                                        }
                                                        .user--class-generic-button-2 {
                                                                font-size: 18px;
                                                        }
                                                        .user--exercise-sequence-block-wrap {
                                                                margin-block: 0px;
                                                        }
                                                        .user--traverse-header {
                                                                width: 100%;
                                                                margin-block: 20px;
                                                                background-color:  #ffffff;
                                                                box-shadow: rgba(0, 0, 0,0.1) 0px 0px 2px 2px;
                                                                border-radius: 15px;
                                                                padding-block: 10px;
                                                                padding-inline: 15px;
                                                                flex-direction: column;
                                                                gap: 10px;
                                                        }
                                                        .user--traverse-dropdown-button-miniature {
                                                                transform: rotate(90deg);
                                                        }
                                                        .user--linkblock-reward-wrap {
                                                                padding-inline: 0px;
                                                        }
                                                        .user--traverse-dropdown-content {
                                                                position: relative !important;
                                                        }
                                                        .user--traverse-new-wrapper {
                                                                margin-block-end: 0px;
                                                        }
                                                        .user--traverse-miniature-main-wrap {
                                                                width: 50%;
                                                        }
                                                        .user--traverse-miniature-mini-wrapper {
                                                                width: 100%;
                                                                height: 100%;
                                                        }
                                                        .demo-class-inner {
                                                                width: 100%;
                                                                padding: 10px;
                                                                box-shadow: none;
                                                        }
                                                        .user--class-intro-banner img {
                                                                object-fit: cover;
                                                                min-height: 200px;
                                                        }
                                                        .intro--comment-block {
                                                                width: 95%;
                                                                border-radius: 10px;
                                                                flex-direction: column;
                                                                padding: 10px;
                                                        }
                                                        .intro--comment-line {
                                                                width: 90%;
                                                                font-size: 18px;
                                                        }
                                                        .intro--comment-vertical-delim {
                                                                transform: rotate(90deg);
                                                        }
                                                        .user-intro-header-wrap-inner p {
                                                                font-size: 17px;
                                                        }
                                                        .welcome--block-one-main-showcase-anim2, .welcome--block-three-main-showcase-anim1 {
                                                                transform: none;
                                                        }
                                                        .intro-class-continue-button {
                                                                font-size: 22px;
                                                        }
                                                        .demo-class-slide-header {
                                                                font-size: 25px;
                                                        }
                                                        .user--traverse-new-wrapper {
                                                                overflow-x: scroll;
                                                        }
                                                        .user--traverse-miniature-main, .user--traverse-miniature-mini {
                                                                width: 100%;
                                                                height: 50vw;
                                                        }
                                                        .user--traverse-slide-contents-preview {
                                                                width: 100vw;
                                                                box-shadow: rgba(0, 0, 0,0.1) 0px 0px 2px 2px;
                                                                padding: 10px;
                                                                border-radius: 0px;
                                                                min-height: 100vw;
                                                        } 
                                                        .user--traverse-inside-title {
                                                                font-size: 25px !important;
                                                                text-align: left;
                                                                margin-block-start: 0px;
                                                                margin-block-end: 0px;
                                                        }
                                                        .user--traverse-dropdown-content {
                                                                box-shadow: rgba(0, 0, 0,0.1) 0px 0px 2px 2px;
                                                                background-color: #ffffff;
                                                                border-radius: 15px;
                                                                padding: 15px;
                                                                min-height: 70px;
                                                        }
                                                        .user-class-header-wrap {
                                                                font-size: 18px;
                                                                padding: 10px;
                                                                border-radius: 15px;
                                                                width: 100%;
                                                        }
                                                        .user--class-exercise-button {
                                                                font-size: 20px;
                                                        }
                                                        .user--class-delimeter {
                                                                height: 3px;
                                                        }
                                                        .user--class-exercise-header, .user--exercise-sequence-choice-block {
                                                                margin-block-start: 10px;
                                                                padding: 15px;
                                                                font-size: 18px;
                                                                font-weight: 300;
                                                                width: 100% !important;
                                                                border-radius: 20px;
                                                        }
                                                        .user--class-exercise-question {
                                                                width: 100%;
                                                                border-radius: 20px;
                                                                padding-inline: 10px;
                                                                padding-block: 20px;
                                                        }
                                                        .exercise-answer-block-multiple {
                                                                width: 100%;
                                                        }
                                                        .user--class-exercise-question p {
                                                                text-align: center;
                                                                font-weight: 500;
                                                        }
                                                        .flex-direction-row {
                                                                width: 100%;

                                                        }
                                                        .flex-direction-row .user--class-exercise-answer-select-wrap {
                                                                width: 100%;
                                                                min-width: none;
                                                                max-width: 100%;
                                                        }
                                                        .user--exercise-sequence-choice-block {
                                                                padding: 10px;
                                                                border-top: 2px rgba(242, 242, 242, 1) solid;
                                                                font-size: 20px;
                                                                font-weight: 500;
                                                        }
                                                        .user--class-exercise-header-inside svg {
                                                                width: 60px;
                                                                height: 30px;
                                                        }
                                                        .user--class-exercise-question {
                                                                flex-wrap: wrap;
                                                                width: 100%;
                                                                padding: 10px;
                                                        }
                                                        .user--class-exercise-input {
                                                                min-height: auto;
                                                                padding-block: 10px;
                                                                padding-inline: 5px;
                                                                font-size: 20px;
                                                                font-weight: 400;
                                                                width: 90%;
                                                        }
                                                        .user--class-items-grid-wrap-main {
                                                                border-radius: 20px;
                                                        }
                                                        .user--class-exercise-answer-block {
                                                                width: 100%;
                                                                padding-inline: 0px;
                                                                padding-block: 5%;
                                                        }
                                                        .user--exercise-block-wrapper {
                                                                display: flex;
                                                                flex-direction: column;
                                                                gap: 20px;
                                                        }
                                                        .user--exercise-match-container {
                                                                grid-template-columns: 1fr;
                                                                width: 100%;
                                                        }
                                                        .user--exercise-item-wrapper {
                                                                width: 100%;
                                                                margin: 0 auto;
                                                                border-radius: 15px; 
                                                                padding-block-end: 20px;
                                                        }
                                                
                                                          
                                                        .user--class-exercise-match-input {
                                                                font-size: 20px;
                                                                background-color: #ffffff;
                                                                border-radius: 50px;
                                                                width: 95%;
                                                                margin: 0 auto;
                                                                border: 2px solid rgba(0, 0, 0, 0.05);
                                                                min-height: auto;
                                                                padding-block: 20px;
                                                                font-weight: 400;
                                                        }
                                                        .user--class-submit-fileinput-wrapper {
                                                                flex-direction: column;
                                                        }
                                                        .user--exercise-particle-answer-block {
                                                                width: 100%;
                                                        }
                                                        .user--exercise-match-description {
                                                                font-size: 20px;
                                                                padding-block-start: 20px;
                                                                padding-block-end: 0px;
                                                        }
                                                        .user--class-exercise-question p {
                                                                flex-basis: 100%;
                                                                margin-inline-end: 0px;
                                                                margin-inline-start: 10px;
                                                                text-align: left;
                                                                font-size: 20px;
                                                        }
                                                        .user--class-exercise-buttons-wrap {
                                                                width: 100%;
                                                                flex-wrap: wrap;
                                                                gap: 10px;
                                                                
                                                        }
                                                        .user--exercise-block-truefalse-wrapper {
                                                                padding: 10px;
                                                                width: 100%;
                                                        }
                                                        .user--exercise-truefalse-text {
                                                                font-size: 20px;
                                                                font-weight: 500;
                                                                margin-block-end: 10px;
                                                        }
                                                        .user--exercise-match-image {
                                                                width: 80%;
                                                                margin: 0 auto;
                                                                min-height: auto;
                                                        }
                                                        .user--class-exercise-answer-select-circle {
                                                                width: 30px;
                                                                height: 30px;
                                                        }
                                                        .user--class-exercise-answer-select-wrap {
                                                                font-size: 20px;
                                                        }
                                                        .image-wrapper {
                                                        width: 100%;
                                                        min-width: 150px;
                                                        min-height: 150px;
                                                        }
                                                        .user--linkblock-clear {
                                                                grid-template-columns: 1fr;
                                                        }
                                                        .user--block-expanded-wrapper {
                                                                padding: 15px;
                                                                gap: 15px;
                                                        }
                                                        .section-selector { 
                                                                margin: 0 auto 0px auto !important;
                                                        }
                                                        .nav--replacement-block {
                                                                width: 100% !important;
                                                                border: none;
                                                                justify-content: space-between;
                                                                padding-inline: 0;
                                                        }
                                                        .nav--replacement-block-title {
                                                                font-size: 23px;
                                                                font-weight: 500;
                                                                color: #000000;
                                                        }
                                                        .user--exercise-particle-line-wrapper {
                                                                justify-content: center;
                                                        }
                                                        .user--linkblock-reward-wrap { 
                                                                margin-inline: 0px !important;
                                                        }
                                                        .user--class-exercise-header-inside {
                                                                flex-wrap: wrap;
                                                                width: 100%;
                                                        }
                                                        .user--exercise-sequence-block-wrap {
                                                                border-inline: none;
                                                        }
                                                        .user--exercise-particle-line-left, .user--exercise-particle-line-right {
                                                                flex-direction: column;
                                                        }
                                                        .user--exercise-particle-line-left span, .user--exercise-particle-line-right span {
                                                                font-size: 25px;
                                                                border-bottom: none;
                                                                order: -1;
                                                        }
                                                       
                                                        .user--exercise-particle-line-left-input, .user--exercise-particle-line-right-input {
                                                                font-size: 18px;
                                                        }
                                                        .user--exercise-particle-line-wrapper textarea, .user--exercise-particle-line-wrapper input {
                                                               border: 1px solid rgba(0, 0, 0, 0.05);
                                                        }
                                                        .user--class-content-complex-block {
                                                                width: 100%;
                                                                border-radius: 15px;
                                                                padding-block: 20px;
                                                                padding-inline: 10px;
                                                                margin-block-start: 0px;
                                                        }
                                                        .user--class-table-table tbody tr, .user--class-table-table tr {
                                                        display: grid;
                                                        grid-template-columns: repeat(4, 1fr);
                                                        }
                                                        .user--class-table-table tbody tr td,  .user--class-table-table tr td {
                                                                width: 100%;
                                                                overflow: hidden;
                                                                text-overflow: clip;
                                                                overflow-wrap: break-word;
                                                                word-wrap: break-word;
                                                        }
                                                        .user--traverse-miniature-mini-slide-name {
                                                                overflow: hidden;
                                                                text-overflow: ellipsis;
                                                        }
                                                        .user--long-options-wrapper {
                                                                width: 90%;
                                                        }
                                                        .user--class-content-image-wrap {
                                                                width: 100%;
                                                                border-radius: 15px;
                                                                padding-block: 20px;
                                                                padding-inline: 2.5%;
                                                        }
                                                        .user--class-table-table-caption {
                                                                font-size: 20px;
                                                                font-weight: 500;
                                                        }
                                                        .user--class-table-table {
                                                                width: 100%;
                                                        }
                                                        .user--class-achievements-preview-wrap {
                                                                width: 100%;
                                                                padding-block: 0px;
                                                        }
                                                        .user--class-achievements-preview-descriptive {
                                                                border-radius: 15px;
                                                                width: 100%;
                                                                border: 0px !important;
                                                                background-color: #ffffff !important;
                                                                box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px !important;
                                                                gap: 10px;
                                                                padding-inline: 10px;
                                                                padding-block: 15px;
                                                        }
                                                        .user--class-questions-wrap {
                                                                width: 100%;
                                                                border-radius: 15px;
                                                                gap: 15px;
                                                                padding-inline: 10px;
                                                                padding-block: 15px;
                                                                margin-block: 0px;
                                                        }
                                                        .user--class-questions-question {
                                                                padding-inline-start: 0px;
                                                                font-size: 20px;
                                                        }
                                                        .user--class-questions-question-num {
                                                                font-size: 25px;
                                                                overflow: hidden;
                                                                text-overflow: clip;
                                                                overflow-wrap: break-word;
                                                                word-wrap: break-word;
                                                        }
                                                        .user--class-example-block {
                                                                padding-block: 15px;
                                                                padding-inline: 10px;
                                                                border-radius: 20px;
                                                                flex-wrap: wrap;
                                                                justify-content: center;
                                                                gap: 20px;
                                                                margin-block: 0px;
                                                        }
                                                        .user--class-example-block-character {
                                                                font-size: 25px;
                                                        }
                                                        .user--class-example-block-pinyin {
                                                                font-size: 20px;
                                                        }
                                                        .user--class-content-complex-block-dialogue {
                                                                width: 100%;
                                                                border-radius: 15px;
                                                                padding-block: 15px;
                                                                padding-inline: 10px;
                                                        }
                                                        .user--class-dialogue-line {
                                                                width: 100%;

                                                        }
                                                        .user--class-dialogue-line-title {
                                                                font-size: 25px;
                                                                margin-block-start: 20px;
                                                                margin-block-end: 15px;
                                                        }
                                                        .user--class-dialogue-line-separator {
                                                                width: 25px;
                                                                height: 25px;
                                                        }
                                                        .user--class-dialogue-block-character {
                                                                font-size: 20px;
                                                                font-weight: 400;
                                                        }
                                                        .user--class-dialogue-block-pinyin {
                                                                font-weight: 400;
                                                        }
                                                       #front-cover-animated {
                                                        max-width: 95vw;
                                                       }
                                                       .login--auth-left {
                                                        width: 100%;
                                                       }
                                                       .login--auth-wrap {
                                                        gap: 20px;
                                                       }
                                                       .user--slidebuilder-content-image {
                                                        position: relative !important;
                                                        width: 40%;
                                                        margin-block-end: 20px;
                                                        min-height: auto;
                                                       }
                                                       .user--gridblock-image-wrapper {
                                                        width: 100%;
                                                        height: 100%;
                                                       }
                                                       .user--class-items-grid-additional-description {
                                                        font-size: 18px;
                                                       }
                                                       .user--class-items-grid-wrap-main {
                                                        width: 100%;
                                                        padding-inline: 10px;
                                                        padding-block: 15px;
                                                        grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
                                                       }
                                                       .user—popup-achievement-wrap {
                                                        width: 100%;
                                                        margin-block-start: 20px;
                                                        margin: 0 auto;
                                                       }
                                                       .user--class-name {
                                                        font-size: 25px !important;
                                                        margin-block: 15px !important; 
                                                       }
                                                       .user--class-timer {
                                                        top: 5px;
                                                        left: 5px;
                                                        font-weight: 410;
                                                        box-shadow: none;
                                                        font-size: 10px;
                                                       }
                                                       .user--notes-button-active, .user--controls-button-active {
                                                        width: 40px;
                                                        height: 40px;
                                                       }
                                                       .user--controls-button-active {
                                                        transform: translate(2.5vw, -180%);
                                                       }
                                                       .user--notes-button-active {
                                                        transform: translate(-2.5vw, -180%);
                                                       }
                                                       .user--class-media-controller {
                                                        transform: translate(-50%, -180%);
                                                       }
                                                       .user--class-controls-box, .user--class-notes-box {
                                                        width: 95%;
                                                        border-radius: 15px;
                                                        
                                                       }
                                                       .user--class-controls-wrapper {
                                                        padding: 10px;
                                                        overflow-y: scroll;
                                                       }
                                                       .user--class-controls-descriptor {
                                                        padding-inline-start: 0px;
                                                        font-size: 20px;
                                                        
                                                       }
                                                       .teacher--continue-button-wrapper {
                                                        gap: 15px;
                                                       }
                                                       .teacher--continue-button-icon {
                                                        width: 35px;
                                                        height: 35px;
                                                       }
                                                       @-webkit-keyframes slide-in-elliptic-bottom-fwd {
                                                        0% {
                                                                transform: translateX(-50%) translateY(600px) rotateX(30deg) scale(0);
                                                                transform-origin: 50% 100%;
                                                                opacity: 0;
                                                              }
                                                              100% {
                                                                transform: translateX(-50%) translateY(0) rotateX(0) scale(1);
                                                                transform-origin: 50% -1400px;
                                                                opacity: 1;
                                                              }
                                                      }
                                                      @keyframes slide-in-elliptic-bottom-fwd {
                                                        0% {
                                                                transform: translateX(-50%) translateY(600px) rotateX(30deg) scale(0);
                                                                transform-origin: 50% 100%;
                                                                opacity: 0;
                                                              }
                                                              100% {
                                                                transform: translateX(-50%) translateY(-50%) rotateX(0) scale(1);
                                                                transform-origin: 50% -1400px;
                                                                opacity: 1;
                                                              }
                                                      }
                                                  
                                                @keyframes slide-out-elliptic-bottom-bck {
                                                        0% {
                                                          transform: translateX(-50%) translateY(-50%) rotateX(0) scale(1);
                                                          transform-origin: 50% -1400px;
                                                          opacity: 1;
                                                        }
                                                        100% {
                                                          transform: translateX(-50%) translateY(600px) rotateX(30deg) scale(0);
                                                          transform-origin: 50% 100%;
                                                          opacity: 1;
                                                        }
                                                      }
                                                      
                                                      @-webkit-keyframes slide-out-elliptic-bottom-bck {
                                                        0% {
                                                          -webkit-transform: translateX(-50%) translateY(0) rotateX(0) scale(1);
                                                          -webkit-transform-origin: 50% -1400px;
                                                          opacity: 1;
                                                        }
                                                        100% {
                                                          -webkit-transform: translateX(-50%) translateY(600px) rotateX(30deg) scale(0);
                                                          -webkit-transform-origin: 50% 100%;
                                                          opacity: 1;
                                                        }
                                                      }
                                                      .user--traverse-section-distributor {
                                                        width: 100%;
                                                        flex-wrap: wrap;
                                                        justify-content: center;
                                                        align-items: center; 
                                                        background-color: #ffffff;
                                                        box-shadow: rgba(0, 0, 0,0.1) 0px 0px 2px 2px;
                                                        padding: 15px;
                                                        border-radius: 15px;
                                                      }
                                                      .user--traverse-section-distributor-section {
                                                        padding-block: 10px;
                                                        padding-inline: 20px;
                                                      }
                                                      .teacher--popup-content-table-wrapper {
                                                        padding-inline: 0;
                                                        padding-block: 15px;
                                                      }
                                                      .user--controls-handler-wrapper {
                                                        width: 95%;
                                                        max-width: 95%;
                                                        min-width: 95%;
                                                        height: 95%;
                                                        padding-inline: 10px;
                                                        padding-block: 10px;
                                                      }
                                                      .user--processing-wrapper {
                                                        width: 95%;
                                                        max-width: 95%;
                                                        min-width: 95%;
                                                        height: 95%;
                                                        padding-inline: 10px;
                                                        padding-block: 10px;
                                                      }
                                                      .user--popup-wrap h1 { 
                                                        font-size: 25px;
                                                        margin: 0 auto;
                                                      }
                                                      .user--generic-form-main-inside-full h1 {
                                                        font-size: 20px;
                                                      }
                                                      .user--generic-form-main-form-wrap-ns p {
                                                        margin-block-start: 0px;
                                                        font-size: 18px;
                                                      }
                                                      .user--generic-form-main-inside-full {
                                                        width: 100%;
                                                      }
                                                      .user--generic-form-main-custom-selected-value {
                                                        font-size: 18px;
                                                      }
                                                      .user--generic-form-main-form-wrap-ns input {
                                                        font-size: 18px;
                                                      }
                                                    
                                                      .teacher--popup-content-table-wrapper td {
                                                        max-width: 100% !important;
                                                        width: calc(100vw - 5%);
                                                        border: 0;
                                                        padding: 10px;
        
                                                      } 
                                                      .teacher--popup-content-table-wrapper table tbody tr {
                                                        display: flex;
                                                        flex-direction: column;
                                                        border: 1px solid #CCCCCC;
                                                        border-radius: 15px;
                                                        margin-block-end: 15px;
                                                      }
                                                      .teacher--popup-content-table-wrapper table thead {
                                                        padding: 1px;
                                                      }
                                                      .teacher--popup-content-table-wrapper table thead tr {
                                                        display: flex;
                                                        flex-wrap: wrap;
                                                        background-color: #ffffff;
                                                        box-shadow: rgba(0, 0, 0,0.1) 0px 0px 2px 2px;
                                                        padding: 10px;
                                                        border-radius: 15px;
                                                        margin-block-end: 15px;
                                                        justify-content: center;
                                                        align-items: center;
                                                        gap: 10px;

                                                      }
                                                      .teacher--popup-content-table-wrapper thead tr th {
                                                        background-color: #ffffff;
                                                        padding-block: 0px;
                                                        padding-inline: 10px;
                                                        font-weight: 450;
                                                        font-size: 20px;
                                                        text-transform: unset;
                                                      }
                                                      .teacher--popup-content-table-wrapper table {
                                                        border-collapse: unset;
                                                        border-spacing: revert;

                                                      }
                                                      .user--traverse-miniature-control-button-icon {
                                                        width: 35px;
                                                        height: 35px;
                                                        background-color: #ffffff;
                                                        box-shadow: #0C5CA450 0px 0px 2px 2px;
                                                        border: 0px;
                                                      }
                                                      .user--course-setting-main-custom-options-wrapper.show-options {
                                                        z-index: 10;
                                                        width: 100%;
                                                      }
                                                      .user--traverse-desc-bold {
                                                        font-size: 20px;
                                                      }
                                                      .user--course-setting-main-custom-selected-value {
                                                        font-size: 18px;
                                                      }
                                                      .user--course-setting-main-custom-select-icon {
                                                        width: 22px;
                                                        height: 22px;
                                                      }
                                                      .user--classesSchedule-block b {
                                                        font-size: 20px;
                                                      }
                                                      .user--homework-check-visual {
                                                        display: none;
                                                      }
                                                      .user--homework-check-course-block {
                                                        border-radius: 15px;
                                                        padding-block: 15px;
                                                        padding-inline: 10px;
                                                        flex-wrap: wrap;
                                                      }
                                                      .user--homework-check-course-name {
                                                        font-size: 20px;
                                                      }
                                                      .user--homework-check-class-nwrapper {
                                                        padding-inline: 15px;
                                                        gap: 15px;
                                                      }
                                                      .user--homework-check-course-wrapper {
                                                        gap: 10px;
                                                      }
                                                      .classroom--form-frame-button-wrap {
                                                        margin-block: 10px;
                                                        max-width: 90%;
                                                      }
                                                      .user--popup-fold-button {
                                                        width: 40px;
                                                        height: 40px;
                                                        top: 0px;
                                                        margin-block-start: 20px;
                                                        right: 0px;
                                                        position: relative;
                                                        transform: none;
                                                        transition: 0.1s all linear;
                                                      }
                                                      .user--class-items-grid-wrap-main-variable {
                                                        grid-template-columns: repeat(auto-fill, minmax(90%, 1fr));
                                                    }
                                                    .user--traverse-miniature-control-button-wrap-variable {
                                                        position: absolute;
                                                        top: 0%;
                                                        left: 0%;
                                                        transform: translate(calc(-100% - 12.5px), 0%);
                                                        z-index: 1;
                                                    }
                                                    .user--traverse-miniature-wrapper-variable {
                                                        gap: 60px !important;
                                                    }
                                                    .user--card-inside-wrap {
                                                        width: 95%;

                                                    }
                                                    .user--card-inside-block {
                                                        padding-inline: 10px;
                                                        padding-block: 30px;
                                                    }
                                                    .user--card-inside-button-left, .user--card-inside-button-right, .user--card-inside-button-continue {
                                                        width: 50%;
                                                        transform: none;
                                                        font-size: 22px;
                                                    }
                                                    .user--card-inside-button-left {
                                                        border-radius: 10px 0px 0px 10px;
                                                    }
                                                    .user--card-inside-button-right, .user--card-inside-button-continue {
                                                        border-radius: 0px 10px 10px 0px;
                                                    }
                                                    .user--card-inside-block-buttons-wrap {
                                                        display: flex;
                                                        flex-wrap: wrap;
                                                        width: 100%;
                                                        gap: 10px;
                                                    }
                                                    .user--card-inside-section-wrapper-main {
                                                        width: 95%;
                                                    }
                                                    .user--card-inside-section-wrapper {
                                                        width: 100%;
                                                    }
                                                    .user--card-inside-block-buttons-wrap .card-button {
                                                        font-size: 20px;
                                                        padding-inline: 10px;
                                                    }
                                                    .user--popup-dynamic {
                                                        width: 95%;
                                                        min-width: 95%;
                                                        min-height: 50%;
                                                        max-height: calc(100vh - 80px);
                                                        border-radius: 20px;
                                                        justify-content: center;
                                                        padding: 10px;
                                                    }
                                                    .user--popup-dynamic-generate-sentence-btn {
                                                        width: 100%;
                                                        flex-wrap: wrap;
                                                        font-size: 20px;
                                                        padding-block: 15px;
                                                        min-height: auto;
                                                        border-radius: 10px;
                                                    }
                                                    .user--popup-dynamic-generate-sentence-btn-svg-wrap {
                                                        width: 30px;
                                                        height: 30px;
                                                    }
                                                    .user--popup-schedule-main-inner {
                                                        gap: 40px;
                                                    }
                                                    .user--card-inside-block-word-wrapper {
                                                        margin-block-start: 50px;
                                                    }
                                                    .user--cards-inside-notification-image {
                                                        width: 200px;
                                                        height: 150px;
                                                        margin-block: 0;
                                                        border-radius: 15px;

                                                    }
                                                    .user--cards-select-assoc-text {
                                                        font-size: 22px;
                                                        margin: 0 auto;
                                                    }
                                                    .user--cards-inside-assoc-select-wrap {
                                                        flex-direction: column;
                                                        width: 100%;
                                                        flex-wrap: wrap;
                                                        gap: 20px;
                                                        justify-content: center;
                                                        align-items: center;
                                                    }
                                                    .user--cards-select-prwrap-styling {
                                                        overflow-x: scroll;
                                                        justify-content: flex-start;
                                                        padding-block-end: 20px;
                                                    }
                                                    .user--cards-inside-assoc-select-individual {
                                                        width: 95%;
                                                        max-width: 95%;
                                                        border-radius: 15px;
                                                        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
                                                    }
                                                    .user--cards-inside-assoc-select-individual-image-wrap {
                                                        width: 100px;
                                                        height: 100px;
                                                    }
                                                    .user--cards-inside-assoc-select-button {
                                                        font-size: 20px;
                                                    }
                                                    .user--popup-dynamic-inside h3 {
                                                        font-size: 22px;
                                                        
                                                    }
                                                    .user--popup-schedule-main-inner-block {
                                                        width: 100%;
                                                        max-width: 100%;
                                                    }
                                                    .user--popup-dynamic-inside span {
                                                        font-size: 16px;
                                                    }
                                                    .user--class-exercise-originalword {
                                                        font-size: 20px;
                                                        width: 95%;
                                                        flex-wrap: wrap;
                                                        background-color: #ffffff;
                                                        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
                                                        border-radius: 10px;
                                                        color: #7B7B7B;
                                                        font-weight: 450;

                                                    }
                                                    /* .image-loader { 
                                                        position: relative;
                                                        top: auto;
                                                        left: auto;
                                                        transform: none;
                                                    } */
                                                    .user--class-exercise-textarea {
                                                        width: 95%;
                                                        border: 1px solid #d9d9d9;
                                                        font-size: 18px;
                                                        border-radius: 10px;
                                                    }
                                                    .user--popup-assoc-buttons-wrap {
                                                        gap: 20px;
                                                        flex-wrap: wrap;
                                                        width: 95%;
                                                        justify-content: center;
                                                    }
                                                    .user--class-assoc-showAssoc {
                                                    margin-block: 15px;
                                                    }
                                                    .user--cards-inside-assoc-select-individual:hover {
                                                        background-color: #ffffff;
                                                    }
                                                    .user--card-beta-label::after {
                                                        left: 50%;
                                                        transform: translate(-50%, -50%);
                                                        width: max-content;
                                                    }
                                                    .user--card-hero-text-bb-wrap {
                                                        width: 90%;
                                                    }
                                                    .user--cards-inside-button-back {
                                                        left: 2.5%;
                                                    }
                                                    .user--class-assoc-collection-wrap {
                                                        flex-direction: column;
                                                        gap: 20px;
                                                    }
                                                    .user--class-assoc-collection-img {
                                                        border-radius: 10px;
                                                        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
                                                    }
                                                    .user—popup-card-wrap {
                                                        margin-block-start: 20px;
                                                    }
                                                    .user--card-inside-block-word {
                                                        font-size: 40px;
                                                    }
                                                    .user--popup-dynamic-inside h1 {
                                                        font-size: 30px;
                                                    }
                                                    .user--card-inside-word-pinyin {
                                                        font-size: 18px;
                                                        padding-block: 5px;
                                                        padding-inline: 10px;
                                                        align-self: center;
                                                    }
                                                    .user--card-character-pinyin {
                                                        font-size: 18px !important;
                                                        background-color: none !important;
                                                    }
                                                    .user--class-assoc-drawing-canvas {
                                                        width: 95%;
                                                        height: 300px;
                                                        border: 0;
                                                        border-radius: 10px;
                                                        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
                                                    }
                                                    .user--cards-drawing-canvas-tools-panel {
                                                        width: 95%;
                                                        border-radius: 15px;
                                                        border: 0;
                                                        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 2px 2px;
                                                    }
                                                    .user--cards-drawing-canvas-tools-panel button {
                                                        border: 0;
                                                        border-radius: 10px;
                                                    }
                                                    .user--class-exercise-wrap {
                                                        width: 100%;
                                                    }
                                                    /* .login--auth-input-error {
                                                        box-shadow: none;
                                                        animation: 0.4s linear error-animation;
                                                        border-bottom: 1.5px solid #bb4242bb !important;
                                                    } */
                                                   
                                            }

                                            @media screen and (min-width: 2000px) {
                                                .user--login-wrap-bcg, body {
                                                        width: 70%;
                                                        margin: 0 auto;
                                                }
                                                .user--controls-settings-wrapper {
                                                        width: 70%;
                                                        max-width: 70%;
                                                }
                                                .user—popup-card-wrap {
                                                        width: 70%;
                                                }
                                                .user—popup-achievement-wrap {
                                                        width: 70%;
                                                        margin: 0 auto;
                                                }
                                                .user—popup-goals-wrap {
                                                        width: 70%;
                                                        margin: 0 auto;
                                                }
                                                .user--class-generic-button-3-tiny {
                                                        font-size: 18px;
                                                }
                                                .user—popup-collection-wrap {
                                                        width: 70%;
                                                        margin: 0 auto;
                                                }
                                                .user—popup-stories-wrap {
                                                        width: 70%;
                                                        margin: 0 auto;  
                                                }
                                                .user—popup-videos-wrap {
                                                        width: 70%;
                                                        margin: 0 auto;  
                                                }
                                               
                                            }
                                            @media screen and (min-width: 2500px) {
                                                .user--login-wrap-bcg, body {
                                                        width: 60%;
                                                        margin: 0 auto;
                                                }
                                                .user--controls-settings-wrapper {
                                                        width: 60%;
                                                        max-width: 60%;
                                                }
                                                .user—popup-card-wrap {
                                                        width: 60%;
                                                }
                                                .user—popup-achievement-wrap {
                                                        width: 60%;
                                                        margin: 0 auto;
                                                }
                                                .user—popup-goals-wrap {
                                                        width: 60%;
                                                        margin: 0 auto;
                                                }
                                                .user—popup-collection-wrap {
                                                        width: 60%;
                                                        margin: 0 auto;
                                                }
                                                .user—popup-stories-wrap {
                                                        width: 60%;
                                                        margin: 0 auto;  
                                                }
                                                .user—popup-videos-wrap {
                                                        width: 60%;
                                                        margin: 0 auto;  
                                                }
                                            }
                                            @media screen and (min-width: 3000px) {
                                                .user--login-wrap-bcg, body {
                                                        width: 50%;
                                                        margin: 0 auto;
                                                }
                                                .user--controls-settings-wrapper {
                                                        width: 50%;
                                                        max-width: 50%;
                                                } 
                                                .user—popup-card-wrap {
                                                        width: 50%;
                                                }
                                              
                                                .user—popup-achievement-wrap {
                                                        width: 50%;
                                                        margin: 0 auto;
                                                } 
                                                .user—popup-goals-wrap {
                                                        width: 50%;
                                                        margin: 0 auto;
                                                }
                                                .user—popup-collection-wrap {
                                                        width: 50%;
                                                        margin: 0 auto;
                                                }
                                                .user—popup-stories-wrap {
                                                        width: 50%;
                                                        margin: 0 auto;  
                                                }
                                                .user—popup-videos-wrap {
                                                        width: 50%;
                                                        margin: 0 auto;  
                                                }
                                            }