/* /Layout/PlayerLayout.razor.rz.scp.css */
article[b-tcfzaw4gad]{
    display: flex;
    justify-content: center;
}
/* /Layout/SystemLayout.razor.rz.scp.css */
/* Article */

article[b-3kqaakktin] {
  min-height: 100svh;
}

/* Header */

header[b-3kqaakktin] {
  width: auto;
  color: #fffeff;
  background: #0a2744;
}

/* Header : Header */

.header[b-3kqaakktin] {
  width: auto;
  display: flex;
  justify-content: center;
}

.header-contain[b-3kqaakktin] {
  width: 70%;
  padding: 2vh 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-headin[b-3kqaakktin] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.menu-button[b-3kqaakktin] {
  display: none;
}

.menu-button-content[b-3kqaakktin] {
  height: clamp(28px, 4vw, 33px);
  width: clamp(28px, 4vw, 33px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #c9c7cf;
  border-radius: 6px;
  font-size: clamp(12px, 2vw, 16px);
  color: #c9c7cf;
  cursor: pointer;
}

.header-logo-title[b-3kqaakktin] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 12px);
}

.header-logo[b-3kqaakktin] {
  height: clamp(28px, 4vw, 35px);
}

.header-logo img[b-3kqaakktin] {
  height: clamp(28px, 4vw, 35px);
}

.header-title[b-3kqaakktin] {
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 700;
  letter-spacing: 0.03em;
}

[b-3kqaakktin]::placeholder {
  color: #636270;
}

.header-content[b-3kqaakktin] {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 30px);
}

nav[b-3kqaakktin] {
  display: flex;
  align-items: center;
  gap: clamp(15px, 3vw, 30px);
}

.header-box[b-3kqaakktin] {
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: clamp(6px, 2vw, 10px);
}

.header-icon[b-3kqaakktin] {
  font-size: clamp(12px, 2vw, 14px);
}

.header-name[b-3kqaakktin] {
  font-size: clamp(10px, 1.5vw, 12px);
  font-weight: 500;
  letter-spacing: 0.03em;
}

.active > .header-box[b-3kqaakktin] {
  color: #2383e2;
}

.header-account[b-3kqaakktin] {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 12px);
}

.header-account-notification[b-3kqaakktin] {
  height: clamp(28px, 4vw, 32px);
  width: clamp(28px, 4vw, 32px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.header-account-notification > i[b-3kqaakktin] {
  font-size: clamp(20px, 3vw, 29px);
  color: #c9c7cf;
}

.notification-star[b-3kqaakktin] {
  width: clamp(12px, 2vw, 16px);
  height: clamp(12px, 2vw, 16px);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2383e2;
  color: white;
  position: absolute;
  top: 0;
  right: 0;
  font-size: clamp(6px, 1vw, 8px);
}

.header-account-content[b-3kqaakktin] {
  position: relative;
}

.header-account-logo[b-3kqaakktin] {
  width: clamp(32px, 5vw, 40px);
  height: clamp(32px, 5vw, 40px);
  padding: clamp(2px, 1vw, 4px);
  border: 3px solid #2383e2;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #2383e2;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Drop */

.drop[b-3kqaakktin] {
  position: absolute;
  top: 0px;
  right: -10px;
  width: 250px;
  padding-bottom: 7px;
  border-radius: 8px;
  box-shadow: 0px 4px 17px #0c121c4d;
  color: black;
  background: white;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  transform: translateY(17px);
  z-index: 9999;
}

.drop.view[b-3kqaakktin] {
  opacity: 1;
  visibility: visible;
  transform: translateY(40px);
}

.drop-headin[b-3kqaakktin] {
  padding: 17px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.drop-headin-none[b-3kqaakktin] {
  width: clamp(30px, 5vw, 39px);
  min-width: clamp(30px, 5vw, 39px);
  height: clamp(30px, 5vw, 39px);
  border-radius: 50%;
  border: 3px solid #2383e2;
  font-size: clamp(12px, 1.5vw, 16px);
  font-weight: 700;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2383e2;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.drop-headin-content[b-3kqaakktin] {
  width: auto;
}

.drop-headin-name[b-3kqaakktin] {
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 600;
  letter-spacing: 0.03em;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-transform: capitalize;
  text-overflow: ellipsis;
}

.drop-headin-subname[b-3kqaakktin] {
  font-size: clamp(10px, 1.2vw, 12px);
  letter-spacing: 0.06em;
  color: #767882;
}

.drop-line[b-3kqaakktin] {
  border-bottom: 1px solid #dfe0e1;
}

.drop-content[b-3kqaakktin] {
  padding: clamp(10px, 2vw, 14px) clamp(15px, 3vw, 21px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vw, 11px);
  cursor: pointer;
}

.drop-box[b-3kqaakktin] {
  color: #3b3c41;
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 17px);
  cursor: pointer;
}

.drop-icon[b-3kqaakktin] {
  font-size: clamp(11px, 1.5vw, 13px);
}

.drop-name[b-3kqaakktin] {
  font-size: clamp(10px, 1.5vw, 12px);
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Popup Nav */
.pop-nav[b-3kqaakktin] {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;

  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  transform: translateX(-25px);
}

.pop-nav.view[b-3kqaakktin] {
  opacity: 1;
  visibility: visible;
  transform: translateX(0px);
}
.pop-nav-content[b-3kqaakktin] {
  height: 100%;
  width: 300px;
  background: white;
  box-shadow: 0px 4px 17px #0c121c4d;
}
.pop-nav-top[b-3kqaakktin] {
  background: #0a2744;
  padding: 2vh clamp(20px, 5vw, 30px);
}

.nav-logo-title[b-3kqaakktin] {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 12px);
}

.nav-logo[b-3kqaakktin] {
  height: clamp(32px, 5vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-logo img[b-3kqaakktin] {
  height: clamp(28px, 4vw, 35px);
}

.nav-title[b-3kqaakktin] {
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: white;
}

.pop-nav-options[b-3kqaakktin] {
  padding: clamp(20px, 5vw, 30px);
  display: flex;
  flex-direction: column;
}

.pop-nav-option[b-3kqaakktin] {
  display: flex;
  align-items: center;
  gap: clamp(10px, 3vw, 15px);
  padding: clamp(10px, 3vw, 15px) clamp(15px, 4vw, 20px);
  border-radius: 6px;

  font-size: clamp(10px, 1.5vw, 12px);
  font-weight: 700;
  color: #061b3a;
}

.pop-nav-option i[b-3kqaakktin] {
  font-size: clamp(12px, 2vw, 14px);
}

.active > .pop-nav-option[b-3kqaakktin] {
  background-color: #2382e21f;
  color: #2383e2;
}
.active i[b-3kqaakktin] {
  color: #2383e2;
}

/* Section */

section[b-3kqaakktin] {
  min-height: 100svh;
  padding: 4vh 0px 10vh;
  display: flex;
  justify-content: center;
}

.content[b-3kqaakktin] {
  width: 70%;
  display: flex;
  gap: 30px;
}

.content-body[b-3kqaakktin] {
  width: 70%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Side Display */
.side-display[b-3kqaakktin] {
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.side-display-box[b-3kqaakktin] {
  padding: 30px;
  border: 1px solid #d6dce9;
  border-radius: 17px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}

.side-display-image img[b-3kqaakktin] {
  width: 120px;
}

.side-display-box-titles[b-3kqaakktin] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.side-display-box-title[b-3kqaakktin] {
  font-size: 19px;
  font-weight: 600;
  color: #111925;
  letter-spacing: 3%;
}

.side-display-box-subtitle[b-3kqaakktin] {
  font-size: 13px;
  font-weight: 400;
  color: #737373;
  letter-spacing: 2%;
}

/* Footer */

footer[b-3kqaakktin] {
  display: flex;
  justify-content: center;
  background: #0a2744;
}

.footer[b-3kqaakktin] {
  width: 70%;
  padding: 5vh 0px 4vh;
}

.footer-content[b-3kqaakktin] {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.6px;
  color: #fffeff;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Responsive */

@media screen and (max-width: 1300px) {
  .side-display[b-3kqaakktin] {
    display: none;
  }

  .header-contain[b-3kqaakktin],
  .content[b-3kqaakktin], .footer[b-3kqaakktin] {
    width: 80%;
  }

  .content-body[b-3kqaakktin] {
    width: 100% !important;
  }
}

@media screen and (max-width: 1000px) {
  nav[b-3kqaakktin] {
    display: none;
  }
  .menu-button[b-3kqaakktin] {
    display: block;
  }
  .header-contain[b-3kqaakktin],
  .content[b-3kqaakktin], .footer[b-3kqaakktin] {
    width: 90%;
  }
}

@media screen and (max-width: 400px) {
  .pop-nav-content[b-3kqaakktin] {
    width: 100%;
  }
}
/* /Pages/AuthPages/Login.razor.rz.scp.css */
section[b-mfa5p6ecw6] {
  width: 100%;
  display: flex;
  height: 100svh;
}

.info-pane[b-mfa5p6ecw6] {
  width: 60%;
  background: #eceff5;
  background: url("images/background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Content */
.content[b-mfa5p6ecw6] {
  width: 40%;
  background: #eceff5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh clamp(2vw, 2vw, 5vw);
}

.form-content[b-mfa5p6ecw6] {
  width: clamp(300px, 40vw, 350px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 5vw, 30px);
}

.form-title[b-mfa5p6ecw6] {
  font-size: clamp(18px, 4vw, 25px);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding-bottom: clamp(6px, 2vw, 10px);
}
.form-title span[b-mfa5p6ecw6] {
  color: #2383e2;
  font-weight: 800;
}

.form-inputs[b-mfa5p6ecw6] {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 3vw, 20px);
}

.form-input[b-mfa5p6ecw6] {
  display: flex;
  position: relative;
}

.form-input .left-icon[b-mfa5p6ecw6] {
  position: absolute;
  height: 100%;
  padding-left: 10px;
  font-size: clamp(13px, 2vw, 16px);
}

.form-input .right-icon[b-mfa5p6ecw6] {
  position: absolute;
  right: 0px;
  height: 100%;
  padding-right: 10px;
  font-size: clamp(13px, 2vw, 16px);
  cursor: pointer;
}

.form-input input[b-mfa5p6ecw6] {
  width: 100%;
  height: clamp(38px, 6vw, 45px);
  border: none;
  outline: none;
  border-radius: 6px;
  padding: 0px 35px;
}

.form-error[b-mfa5p6ecw6] {
  font-size: clamp(11px, 2vw, 12px);
  font-weight: 300;
  background: #ffdce4;
  height: clamp(38px, 6vw, 45px);
  padding: 0px clamp(10px, 4vw, 20px);
  border-radius: 6px;
  display: flex;
  align-items: center;
}

.loading-icon[b-mfa5p6ecw6] {
  position: absolute;
  height: 100%;
  left: 0;
  padding-left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(13px, 2vw, 16px);
}
.auth-button[b-mfa5p6ecw6] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 10px);
  height: clamp(38px, 6vw, 45px);
  padding: 0px clamp(10px, 4vw, 20px);
  border-radius: 6px;
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 700;
  cursor: pointer;
  background: #2383e2;
  color: white;
}

.no-account[b-mfa5p6ecw6] {
  text-align: center;
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 400;
  color: #737373;
}
.no-account span[b-mfa5p6ecw6] {
  font-weight: 600;
  color: #2383e2;
}

/* responsive */
@media (max-width: 1000px) {
  .info-pane[b-mfa5p6ecw6],
  .content[b-mfa5p6ecw6] {
    width: 50%;
  }
}

@media (max-width: 900px) {
  .info-pane[b-mfa5p6ecw6] {
    display: none;
  }
  .content[b-mfa5p6ecw6] {
    width: 100%;
  }
}
/* /Pages/AuthPages/Register.razor.rz.scp.css */
section[b-4tu1awmpo9] {
  width: 100%;
  display: flex;
  height: 100svh;
}

.info-pane[b-4tu1awmpo9] {
  width: 60%;
  background: #eceff5;
  background: url("images/background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Content */
.content[b-4tu1awmpo9] {
  width: 40%;
  background: #eceff5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 5vw;
}

.form-content[b-4tu1awmpo9] {
  width: clamp(260px, 40vw, 350px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 5vw, 30px);
}

.form-title[b-4tu1awmpo9] {
  font-size: clamp(18px, 4vw, 25px);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding-bottom: clamp(6px, 2vw, 10px);
}
.form-title span[b-4tu1awmpo9] {
  color: #2383e2;
  font-weight: 800;
}

.form-inputs[b-4tu1awmpo9] {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 3vw, 20px);
}

.form-input[b-4tu1awmpo9] {
  display: flex;
  position: relative;
}

.form-input .left-icon[b-4tu1awmpo9] {
  position: absolute;
  height: 100%;
  padding-left: 10px;
  font-size: clamp(13px, 2vw, 16px);
}

.form-input .right-icon[b-4tu1awmpo9] {
  position: absolute;
  right: 0px;
  height: 100%;
  padding-right: 10px;
  font-size: clamp(13px, 2vw, 16px);
  cursor: pointer;
}

.form-input input[b-4tu1awmpo9] {
  width: 100%;
  height: clamp(38px, 6vw, 45px);
  border: none;
  outline: none;
  border-radius: 6px;
  padding: 0px 35px;
}

.form-error[b-4tu1awmpo9] {
  font-size: clamp(11px, 2vw, 12px);
  font-weight: 300;
  background: #ffdce4;
  height: clamp(38px, 6vw, 45px);
  padding: 0px clamp(10px, 4vw, 20px);
  border-radius: 6px;
  display: flex;
  align-items: center;
}

.loading-icon[b-4tu1awmpo9] {
  position: absolute;
  height: 100%;
  left: 0;
  padding-left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(13px, 2vw, 16px);
}
.auth-button[b-4tu1awmpo9] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 10px);
  height: clamp(38px, 6vw, 45px);
  padding: 0px clamp(10px, 4vw, 20px);
  border-radius: 6px;
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 700;
  cursor: pointer;
  background: #2383e2;
  color: white;
}

.no-account[b-4tu1awmpo9] {
  text-align: center;
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 400;
  color: #737373;
}
.no-account span[b-4tu1awmpo9] {
  font-weight: 600;
  color: #2383e2;
}

/* responsive */
@media (max-width: 1000px) {
  .info-pane[b-4tu1awmpo9],
  .content[b-4tu1awmpo9] {
    width: 50%;
  }
}

@media (max-width: 900px) {
  .info-pane[b-4tu1awmpo9] {
    display: none;
  }
  .content[b-4tu1awmpo9] {
    width: 100%;
  }
}
/* /Pages/EnrollmentPages/Enrollment.razor.rz.scp.css */
section[b-kjao56xzff] {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 3vw, 20px);
  min-height: 100svh;
  padding: clamp(16px, 4vw, 30px) 0px;
}

.section-top[b-kjao56xzff] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 4vw, 30px);
  padding: 0px clamp(16px, 4vw, 30px);
}

.back-button[b-kjao56xzff],
.logout-button[b-kjao56xzff] {
  width: clamp(28px, 6vw, 35px);
  height: clamp(28px, 6vw, 35px);
  border-radius: 6px;
  border: 1px solid #d6dce9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(14px, 3vw, 18px);
  cursor: pointer;
}

.section-logo-name[b-kjao56xzff] {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1vw, 6px);
  font-size: clamp(14px, 3vw, 17px);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.section-top img[b-kjao56xzff] {
  height: clamp(18px, 4vw, 30px);
}

/* Nav */
.nav-lines[b-kjao56xzff] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-line[b-kjao56xzff] {
  width: 50%;
  height: 3px;
  background: #d6dce9;
  transition: all 0.4s ease-in-out;
}

.nav-line.active[b-kjao56xzff] {
  background: #2383e2;
}

/* Content */
.content[b-kjao56xzff] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: clamp(24px, 6vw, 40px);
}

.content-body[b-kjao56xzff] {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 6vw, 40px);
}

.content-top[b-kjao56xzff] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 6vw, 50px);
}

.content-titles[b-kjao56xzff] {
  max-width: 700px;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 2vw, 10px);
}

.content-title[b-kjao56xzff] {
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.content-subtitle[b-kjao56xzff] {
  font-size: clamp(11px, 2vw, 12px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #737373;
}

.content-button[b-kjao56xzff] {
  position: relative;
  height: clamp(40px, 6vw, 45px);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 10px);
  padding: 0px clamp(12px, 4vw, 30px);
  background: #d6dce9;
  color: black;
  font-size: clamp(12px, 2vw, 14px);
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.content-button.bottom[b-kjao56xzff] {
  display: none;
}

.content-button-loading[b-kjao56xzff] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2383e2;
  color: white;
  border-radius: 6px;
}

.content-button-loading i[b-kjao56xzff] {
  font-size: clamp(14px, 3vw, 18px);
}

.content-button.selected[b-kjao56xzff] {
  background: #2383e2;
  color: white;
}

.content-button i[b-kjao56xzff] {
  font-size: clamp(12px, 2vw, 16px);
}

/* Exams */
.exams-list[b-kjao56xzff] {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 3vw, 20px);
}

.exam-option[b-kjao56xzff] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 3vw, 20px);
  background: white;
  border-radius: clamp(10px, 3vw, 14px);
  padding: clamp(10px, 3vw, 15px);
  cursor: pointer;
  border: 2px solid white;

  font-size: clamp(11px, 2vw, 12px);
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* Subjects */
.subjects-list[b-kjao56xzff] {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 3vw, 20px);
}

.subject-option[b-kjao56xzff] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 3vw, 20px);
  background: white;
  border-radius: clamp(10px, 3vw, 14px);
  padding: clamp(10px, 3vw, 15px);
  cursor: pointer;
  font-size: clamp(11px, 2vw, 12px);
  font-weight: 700;
  letter-spacing: 0.03em;
  border: 2px solid white;
}

.subject-info[b-kjao56xzff] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vw, 20px);
}

.subject-info img[b-kjao56xzff] {
  height: clamp(12px, 2vw, 18px);
}

.exam-option.selected[b-kjao56xzff],
.subject-option.selected[b-kjao56xzff] {
  border: 2px solid #2383e2;
}

.selection-indicator[b-kjao56xzff] {
  width: clamp(16px, 4vw, 25px);
  height: clamp(16px, 4vw, 25px);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #2383e2;
  font-size: clamp(10px, 2vw, 12px);
  color: #2383e2;
  visibility: hidden;
}

.exam-option.selected .selection-indicator[b-kjao56xzff],
.subject-option.selected .selection-indicator[b-kjao56xzff] {
  visibility: visible;
}

/* Responsive */
@media screen and (max-width: 1200px) {
  .content-body[b-kjao56xzff] {
    width: 80%;
  }
}

@media screen and (max-width: 900px) {
  .content-body[b-kjao56xzff] {
    width: 90%;
  }
}

@media screen and (max-width: 800px) {
  .content-button.top[b-kjao56xzff] {
    display: none;
  }
  .content-button.bottom[b-kjao56xzff] {
    display: flex;
  }
}
/* /Pages/SystemPages/Home.razor.rz.scp.css */
/* Welcome */
.welcome-pane[b-sey71o75az] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 2vw, 20px);
}

.welcom-pane-name[b-sey71o75az] {
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 800;
  color: #132c51;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}

.welcom-pane-text[b-sey71o75az] {
  font-size: clamp(10px, 1.2vw, 12px);
  font-weight: 600;
  color: #93989f;
  letter-spacing: 0.03em;
  padding-top: clamp(2px, 0.5vw, 3px);
}

.exam-pane[b-sey71o75az] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1vw, 8px);
  padding: clamp(6px, 1vw, 10px) clamp(10px, 3vw, 20px);
  border-radius: 8px;
  background: #e3e3ec;
  font-size: clamp(11px, 1.2vw, 13px);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.exam-pane i[b-sey71o75az] {
  font-size: clamp(12px, 1.4vw, 14px);
  color: #a9abb8;
}

/* Statistics */
.statistics-pane[b-sey71o75az] {
  display: flex;
  gap: clamp(10px, 2vw, 20px);
}
.statistics-pane > div[b-sey71o75az] {
  width: 50%;
}

.statistics-week[b-sey71o75az] {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vw, 20px);
  padding: clamp(20px, 3vw, 30px);
  background: #ffffff;
  border-radius: 14px;
  align-items: center;
}

.weekly-title[b-sey71o75az] {
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #344a6a;
  width: 100%;
}

.outer-progress-container[b-sey71o75az] {
  position: relative;
  width: clamp(100px, 20vw, 140px);
  height: clamp(100px, 20vw, 140px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: bold;
  color: #2a3e52;
}

/* progress */
.progress-container[b-sey71o75az] {
  position: relative;
  width: clamp(100px, 20vw, 140px);
  height: clamp(100px, 20vw, 140px);
  border-radius: 100%;
  background: #f8f8f8;
  overflow: hidden;
}

.progress-content[b-sey71o75az] {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.progress-value[b-sey71o75az] {
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.wave-container[b-sey71o75az] {
  position: absolute;
  width: 100%;
  bottom: 0px;
  background: #2383e2
}

.wave[b-sey71o75az] {
  position: absolute;
  width: 110%;
  height: 10px;
  top: -15px;
  animation: moveLeft-b-sey71o75az 3s ease-in-out infinite;
}

.wave svg[b-sey71o75az] {
  width: 100%;
  height: 100%;
}

@keyframes moveLeft-b-sey71o75az {
  0% {
    left: 0;
  }
  50% {
    left: -10%;
  }
  100% {
    left: 0;
  }
}

.statistics-scores[b-sey71o75az] {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vw, 20px);
}

.statistics-scores-box[b-sey71o75az] {
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 20px);
  padding: clamp(20px, 3vw, 30px);
  border-radius: 14px;
  background: #c1e0ff;
}

.streak-box[b-sey71o75az] {
  background: white;
}

.statistics-scores-icon[b-sey71o75az] {
  font-size: clamp(30px, 4vw, 40px);
  color: #2383e2;
}
.statistics-scores-icon.fade[b-sey71o75az] {
  color: #c1e0ff;
}

.statistics-scores-title[b-sey71o75az] {
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 700;
  color: #2383e2;
  letter-spacing: 0.02em;
  padding-top: 3px;
}

.statistics-scores-value[b-sey71o75az] {
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Daily Challenge */
.daily-challenge-pane[b-sey71o75az] {
  border-radius: 14px;
  padding: clamp(20px, 3vw, 30px);
  background: #fdfdfd;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.daily-challenge-info[b-sey71o75az] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 2vw, 15px);
}

.daily-challenge-title[b-sey71o75az] {
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 800;
  color: #344a6a;
  letter-spacing: 0.02em;
}

.daily-challenge-subtitle[b-sey71o75az] {
  font-size: clamp(10px, 1.2vw, 12px);
  font-weight: 400;
  color: #6f89a9;
  letter-spacing: 0.02em;
  max-width: 300px;
}

.challenge-button a[b-sey71o75az] {
  display: flex;
  align-items: center;
  gap: 10px;
  height: clamp(32px, 4vw, 38px);
  padding: 0px clamp(20px, 5vw, 30px);
  border-radius: 38px;
  font-size: clamp(11px, 1.2vw, 13px);
  font-weight: 700;
  background: #2383e2;
  color: white;
}

.daily-challenge-image img[b-sey71o75az] {
  height: clamp(80px, 10vw, 120px);
}

/* Studying */
.title-seeall[b-sey71o75az] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(6px, 1vw, 10px) 10px 0px;
}

.section-title[b-sey71o75az],
.section-seeall[b-sey71o75az] {
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.section-seeall[b-sey71o75az] {
  color: #2383e2;
  font-weight: 800;
}

.study-boxes[b-sey71o75az] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(10px, 2vw, 20px);
  row-gap: clamp(10px, 2vw, 20px);
}

/* Study Box */
.study-box[b-sey71o75az] {
  background: white;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.study-box-image[b-sey71o75az] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 3vw, 30px);
}

.study-box-image img[b-sey71o75az] {
  height: clamp(50px, 8vw, 70px);
}

.study-box-info[b-sey71o75az] {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 30px);
  padding: clamp(20px, 3vw, 30px);
}

.study-box-subject[b-sey71o75az] {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vw, 10px);
}

.study-box-title[b-sey71o75az] {
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 800;
  color: #2383e2;
  letter-spacing: 0.03em;
}

.study-box-topic[b-sey71o75az] {
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 700;
  color: #344a6a;
  letter-spacing: 0.02em;
}

.study-box-calc[b-sey71o75az] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 2vw, 20px);
}

.study-box-topics[b-sey71o75az] {
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 600;
  color: #9ca3b1;
  letter-spacing: 0.02em;
}

.study-progress[b-sey71o75az] {
  width: clamp(80px, 20vw, 120px);
  height: 10px;
  background: #eaedf4;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
}

.study-progress-inner[b-sey71o75az] {
  height: 10px;
  background: #49a1f9;
  border-radius: 10px;
}

/* Switch Exam */
.switch-div[b-sey71o75az] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.switch-content[b-sey71o75az] {
  width: 90%;
  max-width: 420px;
  background: white;
  border-radius: 14px;
  padding: clamp(20px, 3vw, 30px);
}

.switch-close[b-sey71o75az] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.switch-close-button[b-sey71o75az] {
  width: clamp(28px, 6vw, 35px);
  height: clamp(28px, 6vw, 35px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(14px, 3vw, 16px);
  color: black;
  border: 1px solid #dbdbdb;
  border-radius: 100%;
  cursor: pointer;
}

.switch-title[b-sey71o75az] {
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
}

.switch-exams[b-sey71o75az] {
  padding: 30px 0 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vw, 15px);
}

.switch-exam[b-sey71o75az] {
  height: 45px;
  padding: 0 clamp(10px, 3vw, 15px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 6px;
  cursor: pointer;
  background: #eceff5;
}

.switch-action-button.active[b-sey71o75az] {
  background: #ff6387;
  color: white;
}

.switch-loading[b-sey71o75az] {
  color: #2383e2;
  font-size: clamp(14px, 1.8vw, 18px);
  border-radius: 6px;
}

.switch-settings[b-sey71o75az] {
  padding-top: 20px;
  display: flex;
  justify-content: flex-end;
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #2383e2;
}

.switch-settings p[b-sey71o75az] {
  cursor: pointer;
}

@media screen and (max-width: 500px) {
  .study-box-calc[b-sey71o75az] {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .study-box-progress[b-sey71o75az],
  .study-progress[b-sey71o75az] {
    min-width: 100%;
    width: 100%;
  }
}
/* /Pages/SystemPages/Learn/Learn.razor.rz.scp.css */
/* Subjects */
.subjects-title[b-6x8d1vg8ei] {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #132c51;
}

.subjects-box[b-6x8d1vg8ei] {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 30px);
}

/* Study Box */
.study-box[b-6x8d1vg8ei] {
  background: white;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
}

.study-box-image[b-6x8d1vg8ei] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 3vw, 30px);
  height: 100%;
  min-width: clamp(100px, 15vw, 150px);
}

.study-box-image img[b-6x8d1vg8ei] {
  height: clamp(40px, 6vw, 50px);
}

.study-box-info[b-6x8d1vg8ei] {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 30px);
  padding: clamp(20px, 3vw, 30px);
}

.study-box-subject[b-6x8d1vg8ei] {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vw, 10px);
}

.study-box-title[b-6x8d1vg8ei] {
  font-size: clamp(10px, 1.2vw, 12px);
  font-weight: 800;
  color: #2383e2;
  letter-spacing: 0.03em;
}

.study-box-topic[b-6x8d1vg8ei] {
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 700;
  color: #344a6a;
  letter-spacing: 0.02em;
}

.study-box-calc[b-6x8d1vg8ei] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 2vw, 20px);
}

.study-box-topics[b-6x8d1vg8ei] {
  font-size: clamp(10px, 1.2vw, 12px);
  font-weight: 600;
  color: #9ca3b1;
  letter-spacing: 0.02em;
}

.study-progress[b-6x8d1vg8ei] {
  width: clamp(80px, 20vw, 120px);
  height: 10px;
  background: #eaedf4;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
}

.study-progress-inner[b-6x8d1vg8ei] {
  height: 10px;
  background: #49a1f9;
  border-radius: 10px;
}

/* Enroll */
.enroll-box[b-6x8d1vg8ei] {
  background: #e1e5ef;
  border-radius: 14px;
  padding: clamp(20px, 3vw, 30px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 2vw, 20px);
  cursor: pointer;
}

.enroll-title[b-6x8d1vg8ei] {
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 700;
  color: #65758f;
  letter-spacing: 0.02em;
  padding-bottom: 5px;
}

.enroll-subtitle[b-6x8d1vg8ei] {
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 400;
  color: #8b9095;
  letter-spacing: 0.02em;
}

.enroll-button[b-6x8d1vg8ei] {
  min-width: clamp(35px, 5vw, 45px);
  width: clamp(35px, 5vw, 45px);
  height: clamp(35px, 5vw, 45px);
  background: #68b4ff;
  color: white;
  font-size: clamp(18px, 2.5vw, 25px);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Enrollment */
.enrollment-pane[b-6x8d1vg8ei] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.enrollment-content[b-6x8d1vg8ei] {
  width: 90%;
  max-width: 500px;
  max-height: 70vh;
  background: white;
  border-radius: 14px;
  padding: clamp(20px, 3vw, 30px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 30px);
}

.enrollment-close[b-6x8d1vg8ei] {
  display: flex;
  justify-content: flex-end;
}

.enrollment-close-button[b-6x8d1vg8ei] {
  width: clamp(28px, 4vw, 35px);
  height: clamp(28px, 4vw, 35px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(14px, 2vw, 16px);
  color: black;
  border: 1px solid #dbdbdb;
  border-radius: 100%;
  cursor: pointer;
}

.enrollment-title[b-6x8d1vg8ei] {
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
}

.enrollment-subjects[b-6x8d1vg8ei] {
  flex-grow: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vw, 20px);
  min-height: 20vh;
}

.subject-option[b-6x8d1vg8ei] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 2vw, 20px);
  background: #f6f8fd;
  border-radius: 14px;
  padding: clamp(10px, 2vw, 15px) clamp(15px, 4vw, 20px);
  cursor: pointer;
  font-size: clamp(10px, 1.2vw, 12px);
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 2px solid #f6f8fd;
}

.subject-info[b-6x8d1vg8ei] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 20px);
}

.subject-info img[b-6x8d1vg8ei] {
  height: clamp(12px, 1.5vw, 14px);
}

.exam-option.selected[b-6x8d1vg8ei],
.subject-option.selected[b-6x8d1vg8ei] {
  border: 2px solid #2383e2;
}

.selection-indicator[b-6x8d1vg8ei] {
  width: clamp(20px, 3vw, 25px);
  height: clamp(20px, 3vw, 25px);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #2383e2;
  font-size: clamp(10px, 1.2vw, 12px);
  color: #2383e2;
  visibility: hidden;
}

.exam-option.selected .selection-indicator[b-6x8d1vg8ei],
.subject-option.selected .selection-indicator[b-6x8d1vg8ei] {
  visibility: visible;
}

.enrollment-button[b-6x8d1vg8ei] {
  position: relative;
  width: 100%;
  min-height: clamp(40px, 6vh, 50px);
  height: clamp(40px, 6vh, 50px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 6px;
  cursor: pointer;
  background: #eceff5;
}

.enrollment-loading[b-6x8d1vg8ei] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2383e2;
  color: white;
  font-size: clamp(14px, 2vw, 18px);
  border-radius: 6px;
}

/* Responsive */
@media screen and (max-width: 500px) {
  .study-box-calc[b-6x8d1vg8ei] {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .study-box-progress[b-6x8d1vg8ei],
  .study-progress[b-6x8d1vg8ei] {
    min-width: 100%;
    width: 100%;
  }
}
/* /Pages/SystemPages/Learn/LessonDetails.razor.rz.scp.css */
.top-nav-topic[b-gyoeq6dfxp] {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vw, 10px);
  padding-bottom: clamp(15px, 4vw, 30px);

  border-bottom: 1px solid #dbdbdb;
}

.top-nav-progress[b-gyoeq6dfxp] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-nav[b-gyoeq6dfxp] {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.5vw, 8px);
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 500;
  color: #2383e2;
  cursor: pointer;
}

.top-nav i[b-gyoeq6dfxp] {
  font-size: clamp(16px, 3vw, 18px);
}

.top-topic-button[b-gyoeq6dfxp] {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(10px, 2vw, 20px);
}

.top-topic-info[b-gyoeq6dfxp] {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 2vw, 10px);
}

.top-topic[b-gyoeq6dfxp] {
  font-size: clamp(18px, 4vw, 20px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #132c51;
}

.top-subtitle[b-gyoeq6dfxp] {
  font-size: clamp(10px, 2vw, 11px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #737373;
}

.topic-button[b-gyoeq6dfxp] {
  min-width: clamp(80px, 20vw, 110px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 10px);
  height: clamp(28px, 5vw, 38px);
  border-radius: 38px;
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 700;
  background-color: #49a1f9;
  color: white;
  cursor: pointer;
}

.top-stats[b-gyoeq6dfxp] {
  display: flex;
  gap: clamp(12px, 4vw, 30px);
  padding-top: clamp(4px, 3vw, 8px);
}

.top-stat[b-gyoeq6dfxp] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: clamp(3px, 1vw, 6px);
}

.stat-title[b-gyoeq6dfxp] {
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 600;
  color: rgba(17, 25, 37, 1);
}

.stat-value[b-gyoeq6dfxp] {
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 400;
  color: #737373;
}

/* Credit */

.credit[b-gyoeq6dfxp] {
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #5c6578;
  max-width: 600px;
}

.credit-title[b-gyoeq6dfxp] {
  padding-left: clamp(10px, 2vw, 12px);
  margin-bottom: clamp(-12px, -2vw, -10px);
  font-size: clamp(11px, 2vw, 12px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #354a6a;
}

.contributors[b-gyoeq6dfxp] {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contributor[b-gyoeq6dfxp] {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 20px);
}

.indicator[b-gyoeq6dfxp] {
  width: clamp(24px, 4vw, 30px);
  height: clamp(24px, 4vw, 30px);
  border-radius: 50%;
  background-color: #49a1f9;
  color: white;
  font-size: clamp(12px, 2vw, 14px);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
}

.contributor-name[b-gyoeq6dfxp] {
  font-size: clamp(12px, 2vw, 14px);
  font-weight: 700;
  color: #132c51;
}

.contributor-role[b-gyoeq6dfxp] {
  font-size: clamp(10px, 2vw, 12px);
  font-weight: 500;
  color: #737373;
}
/* /Pages/SystemPages/Learn/Subject.razor.rz.scp.css */
.top-nav-subject[b-uga1th6okq] {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vw, 10px);
}

.top-nav[b-uga1th6okq] {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.5vw, 8px);
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 500;
  color: #2383e2;
}

.top-nav i[b-uga1th6okq] {
  font-size: clamp(16px, 3vw, 18px);
}

.top-subject[b-uga1th6okq] {
  font-size: clamp(18px, 4vw, 20px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #132c51;
}

.top-subtitle[b-uga1th6okq] {
  font-size: clamp(10px, 2vw, 11px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #737373;
  max-width: 300px;
}

.subject-nav[b-uga1th6okq] {
  display: flex;
  align-items: flex-end;
  border-bottom: 2px solid #dbdbdb;
  padding-top: clamp(8px, 2vw, 10px);
}

.subject-nav-option[b-uga1th6okq] {
  padding: clamp(8px, 2vw, 10px) clamp(16px, 5vw, 20px);
  font-size: clamp(12px, 2vw, 14px);
  letter-spacing: 0.03em;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid #dbdbdb;
  margin-bottom: -2px;
}

.subject-nav-option.selected[b-uga1th6okq] {
  color: #2383e2;
  border-bottom: 2px solid #2383e2;
}

/* Unit */
.subject-unit[b-uga1th6okq] {
  padding-left: clamp(10px, 2vw, 12px);
  margin-bottom: clamp(-12px, -2vw, -10px);
  font-size: clamp(11px, 2vw, 12px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #354a6a;
}

/* Progress */
.statistics-box[b-uga1th6okq] {
  display: flex;
  gap: clamp(16px, 4vw, 30px);
}

.progress-box[b-uga1th6okq] {
  width: 80%;
  padding: clamp(18px, 4vw, 30px) 0px;
  padding-bottom: clamp(8px, 2vw, 10px);
  border-radius: clamp(8px, 2vw, 14px);
  background: white;
}

.statistics[b-uga1th6okq] {
  width: 20%;
}

/* Progress : box */
.progress-title[b-uga1th6okq] {
  padding-left: clamp(12px, 3vw, 30px);
  padding-bottom: clamp(8px, 2vw, 15px);
  font-size: clamp(13px, 3vw, 15px);
  font-weight: 700;
  letter-spacing: 0.03em;
  border-bottom: 1px solid #eceff5;
}

.progress-info[b-uga1th6okq] {
  padding: clamp(12px, 3vw, 30px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vw, 30px);
}

.progress-container[b-uga1th6okq] {
  position: relative;
  width: clamp(100px, 20vw, 140px);
  height: clamp(100px, 20vw, 140px);
  border-radius: 100%;
  background: #f8f8f8;
  overflow: hidden;
}

.progress-content[b-uga1th6okq] {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.pie-title[b-uga1th6okq] {
  font-size: clamp(10px, 2vw, 12px);
  font-weight: 300;
  letter-spacing: 0.02em;
  padding-top: 2px;
}
.pie-value[b-uga1th6okq] {
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.wave-container[b-uga1th6okq] {
  position: absolute;
  width: 100%;
  bottom: 0px;
  background: linear-gradient(to bottom, #2383e2, #4495e6);
}

.wave[b-uga1th6okq] {
  position: absolute;
  width: 110%;
  height: 10px;
  top: -15px;
  animation: moveLeft-b-uga1th6okq 3s ease-in-out infinite;
}

.wave svg[b-uga1th6okq] {
  width: 100%;
  height: 100%;
}

@keyframes moveLeft-b-uga1th6okq {
  0% {
    left: 0;
  }
  50% {
    left: -10%;
  }
  100% {
    left: 0;
  }
}

.progress-details[b-uga1th6okq] {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vw, 15px);
}

.detail-title[b-uga1th6okq] {
  font-size: clamp(13px, 3vw, 16px);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.detail-subtitle[b-uga1th6okq] {
  font-size: clamp(10px, 2vw, 12px);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #a5a7b5;
  padding-top: 2px;
}

/* Statistics */
.statistics[b-uga1th6okq] {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 4vw, 30px);
}

.statistic[b-uga1th6okq] {
  padding: clamp(12px, 3vw, 20px);
  background: white;
  border-radius: clamp(8px, 2vw, 14px);

  display: flex;
  flex-direction: column;
  gap: clamp(6px, 2vw, 10px);
  text-align: center;
}

.statistic-title[b-uga1th6okq] {
  font-size: clamp(15px, 4vw, 20px);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.statistic-subtitle[b-uga1th6okq] {
  font-size: clamp(10px, 2vw, 12px);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #a5a7b5;
  padding-top: 2px;
}

/* Unenroll */
.unenroll-box[b-uga1th6okq] {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vw, 10px);
  max-width: 70%;
}

.unenroll-text[b-uga1th6okq] {
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #5c6578;
}

.unenroll-pane[b-uga1th6okq] {
  display: flex;
}

.unenroll-button[b-uga1th6okq] {
  font-size: clamp(13px, 2vw, 14px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ff6387;
  cursor: pointer;
}

/* Popup */

.unenroll-div[b-uga1th6okq] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.unenroll-content[b-uga1th6okq] {
  max-width: clamp(300px, 80vw, 420px);
  background: white;
  border-radius: clamp(8px, 2vw, 14px);
  padding: clamp(16px, 5vw, 30px);
}

.unenroll-close[b-uga1th6okq] {
  display: flex;
  justify-content: flex-end;
}

.unenroll-close-button[b-uga1th6okq] {
  width: clamp(28px, 6vw, 35px);
  height: clamp(28px, 6vw, 35px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(14px, 3vw, 16px);
  color: black;
  border: 1px solid #dbdbdb;
  border-radius: 100%;
  cursor: pointer;
}

.unenroll-image[b-uga1th6okq] {
  height: clamp(80px, 18vw, 120px);
  padding-top: clamp(16px, 4vw, 30px);
  text-align: center;
}
.unenroll-image img[b-uga1th6okq] {
  height: 100%;
}

.unenroll-title[b-uga1th6okq] {
  padding-top: clamp(16px, 4vw, 30px);
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
}

.unenroll-subtitle[b-uga1th6okq] {
  padding-top: clamp(8px, 2vw, 10px);
  font-size: clamp(12px, 3vw, 14px);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #9195b3;
  text-align: center;
  padding-bottom: clamp(16px, 4vw, 30px);
}

.unenroll-action-buttons[b-uga1th6okq] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vw, 20px);
}

.unenroll-action-button[b-uga1th6okq] {
  position: relative;
  width: 100%;
  height: clamp(38px, 6vw, 45px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(13px, 2vw, 14px);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 6px;
  cursor: pointer;
  background: #eceff5;
}
.unenroll-action-button.active[b-uga1th6okq] {
  background: #ff6387;
  color: white;
}

.unenrol-loading[b-uga1th6okq] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff6387;
  color: white;
  font-size: clamp(15px, 3vw, 18px);
  border-radius: 6px;
}

/* Responsive */
@media screen and (max-width: 800px) {
  .statistics-box[b-uga1th6okq] {
    flex-direction: column;
  }

  .progress-box[b-uga1th6okq],
  .statistics[b-uga1th6okq] {
    width: 100%;
  }

  .statistics[b-uga1th6okq] {
    flex-direction: row;
  }

  .statistic[b-uga1th6okq] {
    width: 100%;
  }
}

@media screen and (max-width: 500px) {
  .unenroll-box[b-uga1th6okq] {
    max-width: 100%;
  }
}
/* /Pages/SystemPages/Learn/Topic.razor.rz.scp.css */
.top-nav-topic[b-kkphmgvbvq] {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vw, 10px);
  padding-bottom: clamp(15px, 4vw, 30px);

  border-bottom: 1px solid #dbdbdb;
}

.top-nav-progress[b-kkphmgvbvq] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-nav[b-kkphmgvbvq] {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.5vw, 8px);
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 500;
  color: #2383e2;
}

.top-nav i[b-kkphmgvbvq] {
  font-size: clamp(16px, 3vw, 18px);
}

.top-progress[b-kkphmgvbvq] {
  width: clamp(80px, 20vw, 120px);
  height: 10px;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
}
.top-progress-inner[b-kkphmgvbvq] {
  height: 10px;
  border-radius: 10px;
}

.top-topic-button[b-kkphmgvbvq] {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(10px, 2vw, 20px);
}

.top-topic-info[b-kkphmgvbvq] {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 2vw, 10px);
}

.top-topic[b-kkphmgvbvq] {
  font-size: clamp(18px, 4vw, 20px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #132c51;
}

.top-subtitle[b-kkphmgvbvq] {
  font-size: clamp(10px, 2vw, 11px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #737373;
}

.topic-button[b-kkphmgvbvq] {
  min-width: clamp(80px, 20vw, 110px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 10px);
  height: clamp(28px, 5vw, 38px);
  border-radius: 38px;
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 700;
  background-color: #49a1f9;
  color: white;
  cursor: pointer;
}
/* /Pages/SystemPages/Locked/Locked.razor.rz.scp.css */
.locked-section[b-b5mzh04vu4] {
  display: flex;
  justify-content: center;
  padding: clamp(3vh, 5vw, 8vh) clamp(10px, 4vw, 30px);
}

.locked-content[b-b5mzh04vu4] {
  max-width: clamp(320px, 60vw, 500px);
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: clamp(10px, 3vw, 20px);
}

.locked-image img[b-b5mzh04vu4] {
  width: clamp(120px, 30vw, 300px);
}

.locked-title[b-b5mzh04vu4] {
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 800;
  color: #132c51;
  text-align: center;
}

.locked-text[b-b5mzh04vu4] {
  font-size: clamp(10px, 1.5vw, 14px);
  font-weight: 600;
  color: #5e6369;
  text-align: center;
  margin-top: clamp(-10px, -1vw, -5px);
}

.locked-focus[b-b5mzh04vu4] {
  margin-top: clamp(8px, 2vw, 16px);
  width: 100%;
  background-color: white;
  padding: clamp(16px, 4vw, 30px);
  border-radius: clamp(8px, 2vw, 14px);
  display: flex;
  align-items: center;
  gap: clamp(10px, 3vw, 20px);
  border: 2px solid #2383e2;
}

.locked-focus-titles[b-b5mzh04vu4] {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1vw, 8px);
}
.locked-focus-title[b-b5mzh04vu4] {
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 700;
}

.locked-focus-text[b-b5mzh04vu4] {
  font-size: clamp(10px, 1.2vw, 14px);
  font-weight: 600;
  color: #5e6369;
}

.locked-focus-check[b-b5mzh04vu4] {
  font-size: clamp(20px, 2vw, 30px);
  color: #2383e2;
}

.locked-points[b-b5mzh04vu4] {
  margin-top: clamp(8px, 2vw, 16px);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 3vw, 20px);
}

.locked-point[b-b5mzh04vu4] {
  display: flex;
  gap: clamp(8px, 2vw, 15px);
}

.locked-point-icon[b-b5mzh04vu4] {
  min-width: clamp(32px, 6vw, 50px);
  width: clamp(32px, 6vw, 50px);
  height: clamp(32px, 6vw, 50px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  background-color: #2383e2;
  color: white;
  font-size: clamp(12px, 2vw, 20px);
}

.locked-point-titles[b-b5mzh04vu4] {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1vw, 8px);
  padding-top: clamp(4px, 1vw, 8px);
}

.locked-point-title[b-b5mzh04vu4] {
  font-size: clamp(12px, 1.5vw, 16px);
  font-weight: 700;
}
.locked-point-text[b-b5mzh04vu4] {
  font-size: clamp(10px, 1.2vw, 14px);
  font-weight: 600;
  color: #5e6369;
}
/* /Pages/SystemPages/Players/Challenge.razor.rz.scp.css */
.player[b-ut4remta3t] {
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.player-content[b-ut4remta3t] {
  width: 100%;
  flex-grow: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px 0px 5vh;
}
/* /Pages/SystemPages/Players/Lesson.razor.rz.scp.css */
.player[b-fr454a0pg5] {
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.player-content[b-fr454a0pg5] {
  width: 100%;
  flex-grow: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px 0px 5vh;
}
/* /Pages/SystemPages/Players/Quiz.razor.rz.scp.css */
.player[b-hphbevxtx7] {
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.player-content[b-hphbevxtx7] {
  width: 100%;
  flex-grow: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px 0px 5vh;
}
/* /Pages/SystemPages/Players/Test.razor.rz.scp.css */
.player[b-sbkkrencdq] {
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.player-content[b-sbkkrencdq] {
  width: 100%;
  flex-grow: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px 0px 5vh;
}
/* /Pages/SystemPages/Settings/EnrollmentSettings.razor.rz.scp.css */
.top-nav-settings[b-r45q8vcqsv] {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vw, 10px);
  padding-bottom: clamp(15px, 4vw, 20px);
  border-bottom: 1px solid #dbdbdb;
}

.top-nav[b-r45q8vcqsv] {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.5vw, 8px);
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 500;
  color: #2383e2;
}

.top-nav i[b-r45q8vcqsv] {
  font-size: clamp(16px, 3vw, 18px);
}

.top-title[b-r45q8vcqsv] {
  font-size: clamp(18px, 4vw, 20px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #132c51;
}

.top-subtitle[b-r45q8vcqsv] {
  font-size: clamp(10px, 2vw, 11px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #737373;
  max-width: 300px;
}

.details-title[b-r45q8vcqsv] {
  padding-left: clamp(10px, 2vw, 12px);
  margin-bottom: clamp(-12px, -2vw, -10px);
  font-size: clamp(11px, 2vw, 12px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #354a6a;
}

.exam-option[b-r45q8vcqsv] {
  display: flex;
  align-items: center;
  background: #f6f8fd;
  border-radius: clamp(10px, 3vw, 14px);
  padding: clamp(15px, 5vw, 20px);
  cursor: pointer;
  font-size: clamp(11px, 2vw, 12px);
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: clamp(-12px, -2vw, -10px);
}

.new-enroll-button-pane[b-r45q8vcqsv] {
  display: flex;
}

.new-enroll-button[b-r45q8vcqsv] {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 10px);
  height: clamp(36px, 5vw, 40px);
  padding: 0px clamp(20px, 6vw, 30px);
  border-radius: 6px;
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 700;
  background: #2383e2;
  color: white;
  cursor: pointer;
}

.enrollment-pane[b-r45q8vcqsv] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.enrollment-content[b-r45q8vcqsv] {
  width: clamp(300px, 90vw, 500px);
  max-height: 70vh;
  background: white;
  border-radius: clamp(10px, 3vw, 14px);
  padding: clamp(20px, 5vw, 30px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 5vw, 30px);
}

.enrollment-top-buttons[b-r45q8vcqsv] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.enrollment-back-button[b-r45q8vcqsv],
.enrollment-close-button[b-r45q8vcqsv] {
  width: clamp(28px, 5vw, 35px);
  height: clamp(28px, 5vw, 35px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(14px, 3vw, 16px);
  color: black;
  border: 1px solid #dbdbdb;
  border-radius: 100%;
  cursor: pointer;
}

.enrollment-title[b-r45q8vcqsv] {
  font-size: clamp(16px, 3.5vw, 18px);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
}

.enrollment-subjects[b-r45q8vcqsv] {
  flex-grow: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 4vw, 20px);
  min-height: 20vh;
}

.subject-option[b-r45q8vcqsv] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(15px, 4vw, 20px);
  background: #f6f8fd;
  border-radius: clamp(10px, 3vw, 14px);
  padding: clamp(12px, 4vw, 15px) clamp(15px, 5vw, 20px);
  font-size: clamp(11px, 2vw, 12px);
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 2px solid #f6f8fd;
  cursor: pointer;
}

.subject-info[b-r45q8vcqsv] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(15px, 4vw, 20px);
}

.subject-info img[b-r45q8vcqsv] {
  height: clamp(12px, 3vw, 14px);
}

.exam-option.selected[b-r45q8vcqsv],
.subject-option.selected[b-r45q8vcqsv] {
  border: 2px solid #2383e2;
}

.selection-indicator[b-r45q8vcqsv] {
  width: clamp(20px, 6vw, 25px);
  height: clamp(20px, 6vw, 25px);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #2383e2;
  font-size: clamp(11px, 3vw, 12px);
  color: #2383e2;
  visibility: hidden;
}

.exam-option.selected .selection-indicator[b-r45q8vcqsv],
.subject-option.selected .selection-indicator[b-r45q8vcqsv] {
  visibility: visible;
}

.enrollment-button[b-r45q8vcqsv] {
  position: relative;
  width: 100%;
  height: clamp(42px, 6vw, 50px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 2.5vw, 14px);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 6px;
  cursor: pointer;
  background: #eceff5;
}

.enrollment-loading[b-r45q8vcqsv] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2383e2;
  color: white;
  font-size: clamp(14px, 3vw, 18px);
  border-radius: 6px;
}

/* Responsive override */
@media screen and (max-width: 700px) {
  .enrollment-content[b-r45q8vcqsv] {
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    max-height: 100%;
    border-radius: 0px;
  }
}
/* /Pages/SystemPages/Settings/ExamEnrollmentSettings.razor.rz.scp.css */
.top-nav-settings[b-5w38xiaba6] {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vw, 10px);
  padding-bottom: clamp(15px, 4vw, 20px);
}

.top-nav[b-5w38xiaba6] {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.5vw, 8px);
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 500;
  color: #2383e2;
}

.top-nav i[b-5w38xiaba6] {
  font-size: clamp(16px, 3vw, 18px);
}

.top-titles-button[b-5w38xiaba6] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 2vw, 10px);
}

.top-title[b-5w38xiaba6] {
  font-size: clamp(18px, 4vw, 20px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #132c51;
}

.top-subtitle[b-5w38xiaba6] {
  font-size: clamp(10px, 2vw, 11px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #737373;
  max-width: 300px;
}

.switch-button[b-5w38xiaba6] {
  position: relative;
  min-width: 110px;
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 10px);
  height: clamp(36px, 5vw, 38px);
  padding: 0px clamp(16px, 5vw, 20px);
  border-radius: 38px;
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 700;
  background-color: #49a1f9;
  color: white;
  cursor: pointer;
}

.switch-loader[b-5w38xiaba6] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #49a1f9;
  color: white;
  font-size: clamp(16px, 3vw, 18px);
  border-radius: 38px;
}

.subject-nav[b-5w38xiaba6] {
  display: flex;
  align-items: flex-end;
  border-bottom: 2px solid #dbdbdb;
  padding-top: clamp(8px, 2vw, 10px);
}

.subject-nav-option[b-5w38xiaba6] {
  padding: clamp(8px, 2vw, 10px) clamp(16px, 5vw, 20px);
  font-size: clamp(11px, 2vw, 14px);
  letter-spacing: 0.03em;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid #dbdbdb;
  margin-bottom: -2px;
}

.subject-nav-option.selected[b-5w38xiaba6] {
  color: #2383e2;
  border-bottom: 2px solid #2383e2;
}

/* details title */
.details-title[b-5w38xiaba6] {
  padding-left: clamp(10px, 2vw, 12px);
  margin-bottom: clamp(-12px, -2vw, -10px);
  font-size: clamp(11px, 2vw, 12px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #354a6a;
}

/* Subjects list */
.subject-option[b-5w38xiaba6] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 3vw, 20px);
  background: #f6f8fd;
  border-radius: clamp(10px, 3vw, 14px);
  padding: clamp(15px, 5vw, 20px) clamp(15px, 5vw, 20px);
  font-size: clamp(11px, 2vw, 12px);
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 2px solid #f6f8fd;
  margin-bottom: clamp(-12px, -2vw, -10px);
  cursor: pointer;
}

.subject-info[b-5w38xiaba6] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vw, 20px);
}

.subject-info img[b-5w38xiaba6] {
  height: clamp(12px, 2vw, 14px);
}

/* Unenroll */
.unenroll-box[b-5w38xiaba6] {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vw, 10px);
  max-width: 70%;
}

.unenroll-text[b-5w38xiaba6] {
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #5c6578;
}

.unenroll-pane[b-5w38xiaba6] {
  display: flex;
}

.unenroll-button[b-5w38xiaba6] {
  font-size: clamp(12px, 2vw, 14px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ff6387;
  cursor: pointer;
}

/* Unenroll Popup */
.unenroll-div[b-5w38xiaba6] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.unenroll-content[b-5w38xiaba6] {
  max-width: clamp(300px, 80vw, 420px);
  background: white;
  border-radius: clamp(8px, 2vw, 14px);
  padding: clamp(16px, 5vw, 30px);
}

.unenroll-close[b-5w38xiaba6] {
  display: flex;
  justify-content: flex-end;
}

.unenroll-close-button[b-5w38xiaba6] {
  width: clamp(28px, 6vw, 35px);
  height: clamp(28px, 6vw, 35px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(14px, 3vw, 16px);
  color: black;
  border: 1px solid #dbdbdb;
  border-radius: 100%;
  cursor: pointer;
}

.unenroll-image[b-5w38xiaba6] {
  height: clamp(80px, 18vw, 120px);
  padding-top: clamp(16px, 4vw, 30px);
  text-align: center;
}
.unenroll-image img[b-5w38xiaba6] {
  height: 100%;
}

.unenroll-title[b-5w38xiaba6] {
  padding-top: clamp(16px, 4vw, 30px);
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
}

.unenroll-subtitle[b-5w38xiaba6] {
  padding-top: clamp(8px, 2vw, 10px);
  font-size: clamp(12px, 3vw, 14px);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #9195b3;
  text-align: center;
  padding-bottom: clamp(16px, 4vw, 30px);
}

.unenroll-action-buttons[b-5w38xiaba6] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vw, 20px);
}

.unenroll-action-button[b-5w38xiaba6] {
  position: relative;
  width: 100%;
  height: clamp(38px, 6vw, 45px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(13px, 2vw, 14px);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 6px;
  cursor: pointer;
  background: #eceff5;
}
.unenroll-action-button.active[b-5w38xiaba6] {
  background: #ff6387;
  color: white;
}

.unenroll-action-button.good[b-5w38xiaba6] {
  background: #2383e2;
  color: white;
}

.unenrol-loading[b-5w38xiaba6] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff6387;
  color: white;
  font-size: clamp(15px, 3vw, 18px);
  border-radius: 6px;
}

/* Responsive */
@media screen and (max-width: 700px) {
  .enrollment-content[b-5w38xiaba6] {
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    max-height: 100%;
    border-radius: 0px;
  }
}
/* /Pages/SystemPages/Settings/ProfileSettings.razor.rz.scp.css */
.settings-top[b-4liiblbu22] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: clamp(12px, 3vw, 20px);
  border-bottom: 1px solid #dbdbdb;
}

.top-nav-settings[b-4liiblbu22] {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 2vw, 10px);
}

.top-nav[b-4liiblbu22] {
  display: flex;
  align-items: center;
  gap: clamp(5px, 2vw, 8px);
  font-size: clamp(11px, 1.5vw, 13px);
  font-weight: 500;
  color: #2383e2;
}

.top-nav i[b-4liiblbu22] {
  font-size: clamp(14px, 2vw, 18px);
}

.top-title[b-4liiblbu22] {
  font-size: clamp(16px, 3vw, 20px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #132c51;
}

.top-subtitle[b-4liiblbu22] {
  font-size: clamp(9px, 1.5vw, 11px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #737373;
  max-width: clamp(200px, 40vw, 300px);
}

.profile-image[b-4liiblbu22] {
  width: clamp(32px, 5vw, 45px);
  height: clamp(32px, 5vw, 45px);
  padding: clamp(2px, 1vw, 4px);
  border: 3px solid #2383e2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2383e2;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Options */
.settings-options[b-4liiblbu22] {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 3vw, 20px);
}

.settings-option[b-4liiblbu22] {
  display: flex;
  gap: clamp(12px, 3vw, 20px);
  background: white;
  padding: clamp(12px, 3vw, 20px);
  border-radius: clamp(8px, 2vw, 14px);
}

.option-icon[b-4liiblbu22] {
  width: clamp(30px, 5vw, 45px);
  min-width: clamp(30px, 5vw, 45px);
  height: clamp(30px, 5vw, 45px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #deedfb;
  color: #2383e2;
  border-radius: 100%;
}

.option-details[b-4liiblbu22] {
  flex-grow: 1;
  padding-top: clamp(2px, 1vw, 4px);
}

.option-top-info[b-4liiblbu22] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 2vw, 10px);
}

.option-open-action[b-4liiblbu22] {
  width: clamp(22px, 4vw, 30px);
  height: clamp(22px, 4vw, 30px);
  font-size: clamp(10px, 2vw, 13px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2383e2;
  color: white;
  border-radius: 100%;
  cursor: pointer;
}

.option-close-action[b-4liiblbu22] {
  font-size: clamp(11px, 2vw, 14px);
  font-weight: 600;
  color: #2383e2;
  cursor: pointer;
}

.option-title[b-4liiblbu22] {
  font-size: clamp(13px, 2vw, 16px);
  font-weight: 600;
}

.option-value[b-4liiblbu22] {
  font-size: clamp(10px, 1.5vw, 12px);
  font-weight: 500;
  color: #737373;
  padding-top: clamp(1px, 0.5vw, 3px);
}

.name-value[b-4liiblbu22] {
  text-transform: capitalize;
}

.option-button-pane[b-4liiblbu22] {
  display: flex;
}

.option-button[b-4liiblbu22] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 10px);
  height: clamp(35px, 5vw, 45px);
  padding: 0px clamp(14px, 5vw, 20px);
  border-radius: clamp(4px, 1vw, 6px);
  font-size: clamp(11px, 2vw, 14px);
  font-weight: 700;
  cursor: pointer;
  background: #2383e2;
  color: white;
}

.loading-icon[b-4liiblbu22] {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(10px, 2vw, 13px);
  background-color: #2383e2;
  border-radius: clamp(4px, 1vw, 6px);
}

.option-drop[b-4liiblbu22] {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 3vw, 15px);
  padding-top: clamp(12px, 3vw, 20px);
}

.form-input[b-4liiblbu22] {
  display: flex;
  position: relative;
  height: clamp(35px, 5vw, 45px);
}

.form-input .left-icon[b-4liiblbu22] {
  position: absolute;
  height: 100%;
  padding-left: clamp(6px, 2vw, 10px);
  font-size: clamp(12px, 2vw, 16px);
}

.form-input .right-icon[b-4liiblbu22] {
  position: absolute;
  right: 0px;
  height: 100%;
  padding-right: clamp(6px, 2vw, 10px);
  font-size: clamp(12px, 2vw, 16px);
  cursor: pointer;
}

.form-input input[b-4liiblbu22] {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  border-radius: clamp(6px, 2vw, 8px);
  padding: 0px clamp(10px, 2vw, 14px);
  background-color: #f1f3f8;
}

.error-text[b-4liiblbu22] {
  font-size: clamp(10px, 1.5vw, 12px);
  color: #ff809d;
  padding-left: clamp(4px, 1vw, 6px);
}

/* Delete Account */
.delete-box[b-4liiblbu22] {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 2vw, 10px);
  max-width: 70%;
}

.delete-text[b-4liiblbu22] {
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #5c6578;
}

.delete-pane[b-4liiblbu22] {
  display: flex;
}

.delete-button[b-4liiblbu22] {
  font-size: clamp(12px, 2vw, 14px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ff6387;
  cursor: pointer;
}

/* Success Popup */
.success-popup[b-4liiblbu22] {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  transform: translateY(clamp(10px, 2vh, 17px));
}

.success-popup.view[b-4liiblbu22] {
  opacity: 1;
  visibility: visible;
  transform: translateY(clamp(20px, 4vh, 30px));
}

.success-content[b-4liiblbu22] {
  width: clamp(180px, 50vw, 250px);
  padding: clamp(16px, 4vw, 30px) clamp(12px, 4vw, 20px);
  border-radius: clamp(6px, 2vw, 10px);
  background-color: #ffffff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 15px);

  font-size: clamp(13px, 2vw, 16px);
  font-weight: 400;
  box-shadow: 0px 4px 17px #0c121c4d;
}

.success-icon[b-4liiblbu22] {
  width: clamp(25px, 4vw, 35px);
  height: clamp(25px, 4vw, 35px);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 2vw, 15px);

  border: 3px solid #2383e2;
  color: #2383e2;
}

/* Delete Account */
.delete-div[b-4liiblbu22] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.delete-content[b-4liiblbu22] {
  max-width: clamp(300px, 90vw, 420px);
  background: white;
  border-radius: clamp(10px, 2vw, 14px);
  padding: clamp(20px, 5vw, 30px);
}

.delete-close[b-4liiblbu22] {
  display: flex;
  justify-content: flex-end;
}

.delete-close-button[b-4liiblbu22] {
  width: clamp(28px, 4vw, 35px);
  height: clamp(28px, 4vw, 35px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(13px, 2vw, 16px);
  color: black;
  border: 1px solid #dbdbdb;
  border-radius: 100%;
  cursor: pointer;
}

.delete-image[b-4liiblbu22] {
  height: clamp(80px, 20vw, 120px);
  padding-top: clamp(20px, 5vw, 30px);
  text-align: center;
}

.delete-image img[b-4liiblbu22] {
  height: 100%;
}

.delete-title[b-4liiblbu22] {
  padding-top: clamp(20px, 5vw, 30px);
  font-size: clamp(16px, 3vw, 18px);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
}

.delete-subtitle[b-4liiblbu22] {
  padding-top: clamp(8px, 2vw, 10px);
  font-size: clamp(11px, 2vw, 12px);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #9195b3;
  text-align: center;
  padding-bottom: clamp(20px, 5vw, 30px);
}

.delete-error[b-4liiblbu22] {
  padding-top: clamp(4px, 1vw, 6px);
}

.delete-action-buttons[b-4liiblbu22] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 4vw, 20px);
  padding-top: clamp(15px, 4vw, 20px);
}

.delete-action-button[b-4liiblbu22] {
  position: relative;
  width: 100%;
  height: clamp(38px, 5vw, 45px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 2vw, 14px);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 6px;
  cursor: pointer;
  background: #eceff5;
}

.delete-action-button.active[b-4liiblbu22] {
  background: #ff6387;
  color: white;
}

.delete-loading[b-4liiblbu22] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff6387;
  color: white;
  font-size: clamp(14px, 2vw, 18px);
  border-radius: 6px;
}
/* /Pages/SystemPages/Settings/Settings.razor.rz.scp.css */
/* User Image and Name */
.user-image-name[b-vfoy51p33i] {
  display: flex;
  flex-direction: column;
}

.user-image[b-vfoy51p33i] {
  width: clamp(80px, 12vw, 100px);
  height: clamp(80px, 12vw, 100px);
  border-radius: 100%;
  border: clamp(4px, 0.7vw, 6px) solid #2383e2;
  background-color: #2383e2;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.edit-image[b-vfoy51p33i] {
  position: absolute;
  bottom: 0;
  right: clamp(-10px, -2vw, -13px);
  width: clamp(28px, 5vw, 35px);
  height: clamp(28px, 5vw, 35px);
  font-size: clamp(12px, 1.5vw, 14px);
  background-color: white;
  color: #2383e2;
  border-radius: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.upload-loading[b-vfoy51p33i] {
  font-size: clamp(24px, 3vw, 30px);
  color: white;
}

.user-name[b-vfoy51p33i] {
  padding-left: clamp(4px, 1vw, 6px);
  padding-top: clamp(6px, 1.5vw, 10px);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #344a6a;
  text-transform: capitalize;
}

.user-email[b-vfoy51p33i] {
  padding-left: clamp(4px, 1vw, 6px);
  padding-top: clamp(2px, 0.5vw, 3px);
  font-size: clamp(10px, 1.2vw, 12px);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #2383e2;
}

/* Statistics */
.statistics-scores[b-vfoy51p33i] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 30px);
}

.statistics-scores-box[b-vfoy51p33i] {
  padding: clamp(20px, 3vw, 30px);
  border-radius: 14px;
  background: #c1e0ff;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 20px);
}

.streak-box[b-vfoy51p33i] {
  background: white;
}

.statistics-scores-icon[b-vfoy51p33i] {
  font-size: clamp(30px, 4vw, 40px);
  color: #2383e2;
}

.statistics-scores-icon.fade[b-vfoy51p33i] {
  color: #c1e0ff;
}

.statistics-scores-title[b-vfoy51p33i] {
  font-size: clamp(10px, 1.2vw, 12px);
  font-weight: 700;
  color: #2383e2;
  letter-spacing: 0.02em;
  padding-top: clamp(2px, 0.5vw, 3px);
}

.statistics-scores-value[b-vfoy51p33i] {
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Options */
.options-title[b-vfoy51p33i] {
  padding: clamp(6px, 1.2vw, 10px) clamp(6px, 1.2vw, 10px) 0;
  font-size: clamp(10px, 1.2vw, 12px);
  font-weight: 700;
  color: #576072;
  letter-spacing: 0.03em;
}

.option[b-vfoy51p33i] {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 20px);
  background: white;
  border-radius: 14px;
  padding: clamp(20px, 3vw, 30px);
}

.option-icon[b-vfoy51p33i] {
  font-size: clamp(24px, 3vw, 30px);
  color: #68b4ff;
}

.option-info[b-vfoy51p33i] {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 1vw, 3px);
}

.option-title[b-vfoy51p33i] {
  font-size: clamp(12px, 1.6vw, 14px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #344a6a;
}

.option-subtitle[b-vfoy51p33i] {
  font-size: clamp(10px, 1.2vw, 12px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #9aa1af;
}

.option-arrow[b-vfoy51p33i] {
  font-size: clamp(16px, 2vw, 20px);
  color: #68b4ff;
}

/* Subscription Popup */
.subscription-pane[b-vfoy51p33i] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.subscription-content[b-vfoy51p33i] {
  width: 500px;
  max-width: 500px;
  max-height: 70vh;
  background: white;
  border-radius: 14px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.subscription-close[b-vfoy51p33i] {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 15px;
}

.subscription-close-button[b-vfoy51p33i] {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: black;
  border: 1px solid #dbdbdb;
  border-radius: 100%;
  cursor: pointer;
}

.subscription-title[b-vfoy51p33i] {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 3%;
  text-align: center;
}

.subscription-subtitle[b-vfoy51p33i] {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 3%;
  text-align: center;
  color: #9aa1af;
  padding-bottom: 10px;
}

.price-prompt[b-vfoy51p33i] {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 2px solid #2383e2;
  border-radius: 14px;
}

.price-value[b-vfoy51p33i] {
  font-size: 14px;
  font-weight: 700;
}

.price-sub[b-vfoy51p33i] {
  font-size: 12px;
  font-weight: 400;
  color: #9aa1af;
  padding-top: 3px;
}

.price-check[b-vfoy51p33i] {
  width: 35px;
  min-width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  font-size: 14px;
  border: 2px solid #2383e2;
  color: #2383e2;
}

.premium-points[b-vfoy51p33i] {
  padding-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.premium-point[b-vfoy51p33i] {
  display: flex;
  gap: 20px;
}

.point-icon[b-vfoy51p33i] {
  width: 35px;
  min-width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  background: #2383e2;
  color: white;
  font-size: 14px;
}

.point-title[b-vfoy51p33i] {
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 4px;
}

.point-description[b-vfoy51p33i] {
  font-size: 12px;
  font-weight: 400;
  color: #9aa1af;
}

.premium-button[b-vfoy51p33i] {
  margin-top: 15px;
  height: 50px;
  min-height: 50px;
  border-radius: 8px;
  background: #2383e2;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.premium-button i[b-vfoy51p33i] {
  font-size: 16px;
}

/* Error Popup */
.error-popup[b-vfoy51p33i] {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  transform: translateY(clamp(10px, 2vw, 17px));
}

.error-popup.view[b-vfoy51p33i] {
  opacity: 1;
  visibility: visible;
  transform: translateY(clamp(15px, 3vw, 30px));
}

.error-content[b-vfoy51p33i] {
  width: clamp(200px, 40vw, 300px);
  padding: clamp(15px, 3vw, 30px) clamp(10px, 2vw, 20px);
  border-radius: clamp(6px, 1vw, 10px);
  background-color: #ffffff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 15px);

  font-size: clamp(14px, 2vw, 16px);
  font-weight: 400;
  box-shadow: 0px 4px 17px #0c121c4d;
}

.error-icon[b-vfoy51p33i] {
  width: clamp(25px, 4vw, 35px);
  height: clamp(25px, 4vw, 35px);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 2vw, 15px);

  border: clamp(2px, 0.4vw, 3px) solid #ff6387;
  color: #ff6387;
}
/* /Pages/SystemPages/Tests/Challenges.razor.rz.scp.css */
.top-nav-subject[b-v5cboy6vb8] {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vw, 10px);
  padding-bottom: clamp(15px, 4vw, 30px);

  border-bottom: 1px solid #dbdbdb;
}

.top-nav[b-v5cboy6vb8] {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.5vw, 8px);
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 500;
  color: #2383e2;
}

.top-nav i[b-v5cboy6vb8] {
  font-size: clamp(16px, 3vw, 18px);
}

.top-subject[b-v5cboy6vb8] {
  font-size: clamp(18px, 4vw, 20px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #132c51;
}

.top-subtitle[b-v5cboy6vb8] {
  font-size: clamp(10px, 2vw, 11px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #737373;
  max-width: 300px;
}

/* Subjects heading   */
.subjects-heading[b-v5cboy6vb8] {
  padding-left: clamp(10px, 2vw, 12px);
  margin-bottom: clamp(-12px, -2vw, -10px);
  font-size: clamp(11px, 2vw, 12px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #354a6a;
}

/* Subjects */
.subject-box[b-v5cboy6vb8] {
  background: white;
  border-radius: clamp(10px, 3vw, 14px);
  overflow: hidden;
  display: flex;
  cursor: pointer;
}
.subject-box-image[b-v5cboy6vb8] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(15px, 5vw, 30px);
  height: 100%;
  min-width: clamp(90px, 15vw, 150px);
}

.subject-box-image img[b-v5cboy6vb8] {
  height: clamp(24px, 5vw, 40px);
  color: white;
  filter: brightness(0) saturate(100%) invert(100%);
}

.subject-box-details[b-v5cboy6vb8] {
  display: flex;
  gap: clamp(6px, 2vw, 10px);
  height: 100%;
  width: 100%;
  padding: clamp(15px, 5vw, 30px);
}

.subject-box-info[b-v5cboy6vb8] {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(16px, 4vw, 30px);
}

.subject-box-subject[b-v5cboy6vb8] {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 1vw, 5px);
}

.subject-box-title[b-v5cboy6vb8] {
  font-size: clamp(13px, 3vw, 16px);
  font-weight: 800;
  letter-spacing: 0.03em;
}

.subject-box-subtitle[b-v5cboy6vb8] {
  font-size: clamp(10px, 2vw, 12px);
  font-weight: 500;
  color: #a1a8b7;
  letter-spacing: 0.02em;
}

.subject-questions[b-v5cboy6vb8] {
  font-size: clamp(9px, 1.5vw, 10px);
  font-weight: 700;
  color: #2483e2;
  letter-spacing: 0.02em;
}

.subject-box-icon[b-v5cboy6vb8] {
  min-width: clamp(20px, 4vw, 25px);
  height: clamp(20px, 4vw, 25px);
  border-radius: 100%;
  border: 1px solid #ebeef5;
  background: #f8f9fb;
  font-size: clamp(12px, 2vw, 14px);
  color: #bfc6d8;

  display: flex;
  align-items: center;
  justify-content: center;
}
/* /Pages/SystemPages/Tests/Exams.razor.rz.scp.css */
.top-nav-subject[b-kyvkapo4b9] {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vw, 10px);
  padding-bottom: clamp(15px, 4vw, 30px);

  border-bottom: 1px solid #dbdbdb;
}

.top-nav[b-kyvkapo4b9] {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.5vw, 8px);
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 500;
  color: #2383e2;
}

.top-nav i[b-kyvkapo4b9] {
  font-size: clamp(16px, 3vw, 18px);
}

.top-subject[b-kyvkapo4b9] {
  font-size: clamp(18px, 4vw, 20px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #132c51;
}

.top-subtitle[b-kyvkapo4b9] {
  font-size: clamp(10px, 2vw, 11px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #737373;
  max-width: 300px;
}

/* Subjects heading   */
.subjects-heading[b-kyvkapo4b9] {
  padding-left: clamp(10px, 2vw, 12px);
  margin-bottom: clamp(-12px, -2vw, -10px);
  font-size: clamp(11px, 2vw, 12px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #354a6a;
}

/* Subjects */
.subject-box[b-kyvkapo4b9] {
  background: white;
  border-radius: clamp(10px, 3vw, 14px);
  overflow: hidden;
  display: flex;
  cursor: pointer;
}
.subject-box-image[b-kyvkapo4b9] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(15px, 5vw, 30px);
  height: 100%;
  min-width: clamp(90px, 15vw, 150px);
}

.subject-box-image img[b-kyvkapo4b9] {
  height: clamp(24px, 5vw, 40px);
  color: white;
  filter: brightness(0) saturate(100%) invert(100%);
}

.subject-box-details[b-kyvkapo4b9] {
  display: flex;
  gap: clamp(6px, 2vw, 10px);
  height: 100%;
  width: 100%;
  padding: clamp(15px, 5vw, 30px);
}

.subject-box-info[b-kyvkapo4b9] {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(16px, 4vw, 30px);
}

.subject-box-subject[b-kyvkapo4b9] {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 1vw, 5px);
}

.subject-box-title[b-kyvkapo4b9] {
  font-size: clamp(13px, 3vw, 16px);
  font-weight: 800;
  letter-spacing: 0.03em;
}

.subject-box-subtitle[b-kyvkapo4b9] {
  font-size: clamp(10px, 2vw, 12px);
  font-weight: 500;
  color: #a1a8b7;
  letter-spacing: 0.02em;
}

.subject-questions[b-kyvkapo4b9] {
  font-size: clamp(9px, 1.5vw, 10px);
  font-weight: 700;
  color: #2483e2;
  letter-spacing: 0.02em;
}

.subject-box-icon[b-kyvkapo4b9] {
  min-width: clamp(20px, 4vw, 25px);
  height: clamp(20px, 4vw, 25px);
  border-radius: 100%;
  border: 1px solid #ebeef5;
  background: #f8f9fb;
  font-size: clamp(12px, 2vw, 14px);
  color: #bfc6d8;

  display: flex;
  align-items: center;
  justify-content: center;
}
/* /Pages/SystemPages/Tests/Papers.razor.rz.scp.css */
.top-nav-subject[b-45fk3szf0r] {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vw, 10px);
  padding-bottom: clamp(15px, 4vw, 30px);

  border-bottom: 1px solid #dbdbdb;
}

.top-nav[b-45fk3szf0r] {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.5vw, 8px);
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 500;
  color: #2383e2;
}

.top-nav i[b-45fk3szf0r] {
  font-size: clamp(16px, 3vw, 18px);
}

.top-subject[b-45fk3szf0r] {
  font-size: clamp(18px, 4vw, 20px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #132c51;
}

.top-subtitle[b-45fk3szf0r] {
  font-size: clamp(10px, 2vw, 11px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #737373;
  max-width: 300px;
}

/* Subjects heading   */
.subjects-heading[b-45fk3szf0r] {
  padding-left: clamp(10px, 2vw, 12px);
  margin-bottom: clamp(-12px, -2vw, -10px);
  font-size: clamp(11px, 2vw, 12px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #354a6a;
}

/* Subjects */
.subject-box[b-45fk3szf0r] {
  background: white;
  border-radius: clamp(10px, 3vw, 14px);
  overflow: hidden;
  display: flex;
  cursor: pointer;
}
.subject-box-image[b-45fk3szf0r] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(15px, 5vw, 30px);
  height: 100%;
  min-width: clamp(90px, 15vw, 150px);
}

.subject-box-image img[b-45fk3szf0r] {
  height: clamp(24px, 5vw, 40px);
  color: white;
  filter: brightness(0) saturate(100%) invert(100%);
}

.subject-box-details[b-45fk3szf0r] {
  display: flex;
  gap: clamp(6px, 2vw, 10px);
  height: 100%;
  width: 100%;
  padding: clamp(15px, 5vw, 30px);
}

.subject-box-info[b-45fk3szf0r] {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(16px, 4vw, 30px);
}

.subject-box-subject[b-45fk3szf0r] {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 1vw, 5px);
}

.subject-box-title[b-45fk3szf0r] {
  font-size: clamp(13px, 3vw, 16px);
  font-weight: 800;
  letter-spacing: 0.03em;
}

.subject-box-subtitle[b-45fk3szf0r] {
  font-size: clamp(10px, 2vw, 12px);
  font-weight: 500;
  color: #a1a8b7;
  letter-spacing: 0.02em;
}

.subject-questions[b-45fk3szf0r] {
  font-size: clamp(9px, 1.5vw, 10px);
  font-weight: 700;
  color: #2483e2;
  letter-spacing: 0.02em;
}

.subject-box-icon[b-45fk3szf0r] {
  min-width: clamp(20px, 4vw, 25px);
  height: clamp(20px, 4vw, 25px);
  border-radius: 100%;
  border: 1px solid #ebeef5;
  background: #f8f9fb;
  font-size: clamp(12px, 2vw, 14px);
  color: #bfc6d8;

  display: flex;
  align-items: center;
  justify-content: center;
}
/* /Pages/SystemPages/Tests/Quizzes.razor.rz.scp.css */
.top-nav-subject[b-6yxg14wqn1] {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vw, 10px);
  padding-bottom: clamp(15px, 4vw, 30px);

  border-bottom: 1px solid #dbdbdb;
}

.top-nav[b-6yxg14wqn1] {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.5vw, 8px);
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 500;
  color: #2383e2;
}

.top-nav i[b-6yxg14wqn1] {
  font-size: clamp(16px, 3vw, 18px);
}

.top-subject[b-6yxg14wqn1] {
  font-size: clamp(18px, 4vw, 20px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #132c51;
}

.top-subtitle[b-6yxg14wqn1] {
  font-size: clamp(10px, 2vw, 11px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #737373;
  max-width: 300px;
}

/* Subjects heading   */
.subjects-heading[b-6yxg14wqn1] {
  padding-left: clamp(10px, 2vw, 12px);
  margin-bottom: clamp(-12px, -2vw, -10px);
  font-size: clamp(11px, 2vw, 12px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #354a6a;
}

/* Subjects */
.subject-box[b-6yxg14wqn1] {
  background: white;
  border-radius: clamp(10px, 3vw, 14px);
  overflow: hidden;
  display: flex;
  cursor: pointer;
}
.subject-box-image[b-6yxg14wqn1] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(15px, 5vw, 30px);
  height: 100%;
  min-width: clamp(90px, 15vw, 150px);
}

.subject-box-image img[b-6yxg14wqn1] {
  height: clamp(24px, 5vw, 40px);
  color: white;
  filter: brightness(0) saturate(100%) invert(100%);
}

.subject-box-details[b-6yxg14wqn1] {
  display: flex;
  gap: clamp(6px, 2vw, 10px);
  height: 100%;
  width: 100%;
  padding: clamp(15px, 5vw, 30px);
}

.subject-box-info[b-6yxg14wqn1] {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(16px, 4vw, 30px);
}

.subject-box-subject[b-6yxg14wqn1] {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 1vw, 5px);
}

.subject-box-title[b-6yxg14wqn1] {
  font-size: clamp(13px, 3vw, 16px);
  font-weight: 800;
  letter-spacing: 0.03em;
}

.subject-box-subtitle[b-6yxg14wqn1] {
  font-size: clamp(10px, 2vw, 12px);
  font-weight: 500;
  color: #a1a8b7;
  letter-spacing: 0.02em;
}

.subject-questions[b-6yxg14wqn1] {
  font-size: clamp(9px, 1.5vw, 10px);
  font-weight: 700;
  color: #2483e2;
  letter-spacing: 0.02em;
}

.subject-box-icon[b-6yxg14wqn1] {
  min-width: clamp(20px, 4vw, 25px);
  height: clamp(20px, 4vw, 25px);
  border-radius: 100%;
  border: 1px solid #ebeef5;
  background: #f8f9fb;
  font-size: clamp(12px, 2vw, 14px);
  color: #bfc6d8;

  display: flex;
  align-items: center;
  justify-content: center;
}
/* /Pages/SystemPages/Tests/SubjectMocks.razor.rz.scp.css */
.top-nav-subject[b-o1jo5wzf38] {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vw, 10px);
  padding-bottom: clamp(15px, 4vw, 30px);
  border-bottom: 1px solid #dbdbdb;
}

.top-nav[b-o1jo5wzf38] {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.5vw, 8px);
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 500;
  color: #2383e2;
}

.top-nav i[b-o1jo5wzf38] {
  font-size: clamp(16px, 3vw, 18px);
}

.top-subject[b-o1jo5wzf38] {
  font-size: clamp(18px, 4vw, 20px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #132c51;
}

.top-subtitle[b-o1jo5wzf38] {
  font-size: clamp(10px, 2vw, 11px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #737373;
  max-width: 300px;
}

/* Subject heading   */
.subjects-heading[b-o1jo5wzf38] {
  padding-left: clamp(10px, 2vw, 12px);
  margin-bottom: clamp(-12px, 2vw, -10px);
  font-size: clamp(11px, 2vw, 12px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #354a6a;
}

/* Papers */
.paper-box[b-o1jo5wzf38] {
  background: white;
  border-radius: clamp(10px, 3vw, 14px);
  overflow: hidden;
  display: flex;
  padding: clamp(15px, 5vw, 30px);
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 3vw, 30px);
  cursor: pointer;
}

.paper-name[b-o1jo5wzf38] {
  font-size: clamp(13px, 3vw, 16px);
  font-weight: 800;
  letter-spacing: 0.03em;
  padding-bottom: clamp(4px, 2vw, 8px);
}

.paper-info[b-o1jo5wzf38] {
  font-size: clamp(10px, 2vw, 12px);
  font-weight: 500;
  color: #737373;
  letter-spacing: 0.02em;
}

.paper-indicator[b-o1jo5wzf38] {
  min-width: clamp(20px, 4vw, 30px);
  height: clamp(20px, 4vw, 30px);
  border-radius: 100%;
  border: 1px solid #ebeef5;
  background: #f8f9fb;
  font-size: clamp(12px, 2vw, 16px);
  color: #bfc6d8;

  display: flex;
  align-items: center;
  justify-content: center;
}
/* /Pages/SystemPages/Tests/SubjectPapers.razor.rz.scp.css */
.top-nav-subject[b-s15q5nz827] {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vw, 10px);
  padding-bottom: clamp(15px, 4vw, 30px);
  border-bottom: 1px solid #dbdbdb;
}

.top-nav[b-s15q5nz827] {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.5vw, 8px);
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 500;
  color: #2383e2;
}

.top-nav i[b-s15q5nz827] {
  font-size: clamp(16px, 3vw, 18px);
}

.top-subject[b-s15q5nz827] {
  font-size: clamp(18px, 4vw, 20px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #132c51;
}

.top-subtitle[b-s15q5nz827] {
  font-size: clamp(10px, 2vw, 11px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #737373;
  max-width: 300px;
}

/* Subject heading   */
.subjects-heading[b-s15q5nz827] {
  padding-left: clamp(10px, 2vw, 12px);
  margin-bottom: clamp(-12px, 2vw, -10px);
  font-size: clamp(11px, 2vw, 12px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #354a6a;
}

/* Papers */
.paper-box[b-s15q5nz827] {
  background: white;
  border-radius: clamp(10px, 3vw, 14px);
  overflow: hidden;
  display: flex;
  padding: clamp(15px, 5vw, 30px);
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 3vw, 30px);
  cursor: pointer;
}

.paper-name[b-s15q5nz827] {
  font-size: clamp(13px, 3vw, 16px);
  font-weight: 800;
  letter-spacing: 0.03em;
  padding-bottom: clamp(4px, 2vw, 8px);
}

.paper-info[b-s15q5nz827] {
  font-size: clamp(10px, 2vw, 12px);
  font-weight: 500;
  color: #737373;
  letter-spacing: 0.02em;
}

.paper-indicator[b-s15q5nz827] {
  min-width: clamp(20px, 4vw, 30px);
  height: clamp(20px, 4vw, 30px);
  border-radius: 100%;
  border: 1px solid #ebeef5;
  background: #f8f9fb;
  font-size: clamp(12px, 2vw, 16px);
  color: #bfc6d8;

  display: flex;
  align-items: center;
  justify-content: center;
}
/* /Pages/SystemPages/Tests/TestDetails.razor.rz.scp.css */
.top-nav-topic[b-hvw7h7q132] {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vw, 10px);
  padding-bottom: clamp(15px, 4vw, 30px);

  border-bottom: 1px solid #dbdbdb;
}

.top-nav-progress[b-hvw7h7q132] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-nav[b-hvw7h7q132] {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.5vw, 8px);
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 500;
  color: #2383e2;
  cursor: pointer;
}

.top-nav i[b-hvw7h7q132] {
  font-size: clamp(16px, 3vw, 18px);
}

.top-topic-button[b-hvw7h7q132] {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(10px, 2vw, 20px);
}

.top-topic-info[b-hvw7h7q132] {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 2vw, 10px);
}

.top-topic[b-hvw7h7q132] {
  font-size: clamp(18px, 4vw, 20px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #132c51;
}

.top-subtitle[b-hvw7h7q132] {
  font-size: clamp(10px, 2vw, 11px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #737373;
}

.topic-button[b-hvw7h7q132] {
  min-width: clamp(80px, 20vw, 110px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 10px);
  height: clamp(28px, 5vw, 38px);
  border-radius: 38px;
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 700;
  background-color: #49a1f9;
  color: white;
  cursor: pointer;
}

.top-stats[b-hvw7h7q132] {
  display: flex;
  gap: clamp(12px, 4vw, 30px);
  padding-top: clamp(4px, 3vw, 8px);
}

.top-stat[b-hvw7h7q132] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: clamp(3px, 1vw, 6px);
}

.stat-title[b-hvw7h7q132] {
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 600;
  color: rgba(17, 25, 37, 1);
}

.stat-value[b-hvw7h7q132] {
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 400;
  color: #737373;
}

/* History */

.history-title[b-hvw7h7q132] {
  padding-left: clamp(10px, 2vw, 12px);
  margin-bottom: clamp(-12px, -2vw, -10px);
  font-size: clamp(11px, 2vw, 12px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #354a6a;
}

.paper-box[b-hvw7h7q132] {
  background: white;
  border-radius: clamp(10px, 3vw, 14px);
  overflow: hidden;
  display: flex;
  padding: clamp(15px, 5vw, 30px);
  align-items: center;
  gap: clamp(12px, 3vw, 30px);
}

.circular-progress[b-hvw7h7q132] {
  position: relative;
  width: clamp(40px, 10vw, 60px);
  min-width: clamp(40px, 10vw, 60px);
  height: clamp(40px, 10vw, 60px);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circular-progress-inner[b-hvw7h7q132] {
  position: absolute;
  width: clamp(28px, 6vw, 40px);
  height: clamp(28px, 6vw, 40px);
  border-radius: 100%;
  background-color: white;
}

.paper-name[b-hvw7h7q132] {
  font-size: clamp(13px, 3vw, 16px);
  font-weight: 800;
  letter-spacing: 0.03em;
  padding-bottom: clamp(4px, 2vw, 8px);
}

.paper-info[b-hvw7h7q132] {
  font-size: clamp(10px, 2vw, 12px);
  font-weight: 500;
  color: #737373;
  letter-spacing: 0.02em;
}
/* /Pages/SystemPages/Tests/Tests.razor.rz.scp.css */
.tests-title[b-gmu9f73iz7] {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #132c51;
}

.tests-subtitle[b-gmu9f73iz7] {
  padding-top: clamp(2px, 0.5vw, 3px);
  color: #596274;
  font-size: clamp(10px, 1.2vw, 12px);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Tests Grid */
.tests-box[b-gmu9f73iz7] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(20px, 3vw, 30px);
  row-gap: clamp(20px, 3vw, 30px);
}

.test-box[b-gmu9f73iz7] {
  padding: clamp(20px, 3vw, 30px);
  border-radius: 14px;
  min-height: clamp(180px, 30vh, 250px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Top section: Icon and Arrow */
.test-icon-arrow[b-gmu9f73iz7] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.test-icon[b-gmu9f73iz7] {
  width: clamp(40px, 6vw, 50px);
  height: clamp(40px, 6vw, 50px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: clamp(16px, 2vw, 20px);
}

.test-arrow[b-gmu9f73iz7] {
  color: white;
  font-size: clamp(12px, 1.5vw, 16px);
}

/* Test Info */
.test-info[b-gmu9f73iz7] {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.7vw, 5px);
}

.test-title[b-gmu9f73iz7] {
  font-size: clamp(14px, 1.8vw, 16px);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: white;
}

.test-subtitle[b-gmu9f73iz7] {
  font-size: clamp(10px, 1.3vw, 12px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: white;
}
/* /Shared/LoadingContent.razor.rz.scp.css */
.loading-content-pane[b-e1idmhgohz] {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: clamp(30px, 8vw, 50px);
}

.loading-content-image[b-e1idmhgohz] {
  font-size: clamp(32px, 8vw, 50px);
  color: #2383e2;
}

.loading-content-title[b-e1idmhgohz] {
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 700;
  padding-top: clamp(12px, 4vw, 30px);
  text-align: center;
}

.loading-content-subtitle[b-e1idmhgohz] {
  font-size: clamp(12px, 3vw, 14px);
  font-weight: 400;
  padding-top: clamp(4px, 2vw, 6px);
  color: #737373;
  text-align: center;
}
/* /Shared/NoAction.razor.rz.scp.css */
.no-content-pane[b-vsc0emdir3] {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: clamp(30px, 8vw, 50px);
}

.no-content-image[b-vsc0emdir3] {
  font-size: clamp(40px, 10vw, 100px);
  color: rgb(177, 177, 177);
}

.no-content-title[b-vsc0emdir3] {
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 700;
  padding-top: clamp(12px, 4vw, 20px);
  text-align: center;
}

.no-content-subtitle[b-vsc0emdir3] {
  font-size: clamp(12px, 3vw, 14px);
  font-weight: 400;
  padding-top: clamp(4px, 2vw, 6px);
  color: #737373;
  text-align: center;
  max-width: 400px;
}
/* /Shared/NoContent.razor.rz.scp.css */
.no-content-pane[b-m1g1ot6o7o] {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: clamp(30px, 8vw, 50px);
}

.no-content-image[b-m1g1ot6o7o] {
  height: clamp(80px, 18vw, 150px);
}

.no-content-image img[b-m1g1ot6o7o] {
  height: 100%;
}

.no-content-title[b-m1g1ot6o7o] {
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 700;
  padding-top: clamp(10px, 4vw, 15px);
  text-align: center;
}

.no-content-subtitle[b-m1g1ot6o7o] {
  font-size: clamp(12px, 3vw, 14px);
  font-weight: 400;
  padding-top: clamp(4px, 2vw, 6px);
  color: #737373;
  text-align: center;
  max-width: 400px;
}
/* /Shared/NotFound/NotFound.razor.rz.scp.css */
.not-found-content[b-pcho7tsr46] {
  width: 100vw;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: clamp(8px, 2vw, 20px);
  color: #807d7e;
  text-align: center;
}

.not-found-icon[b-pcho7tsr46] {
  font-size: clamp(50px, 10vw, 80px);
}

.not-found-title[b-pcho7tsr46] {
  font-size: clamp(20px, 6vw, 30px);
  font-weight: 700;
  padding-top: clamp(6px, 2vw, 10px);
}

.not-found-subtitle[b-pcho7tsr46] {
  font-size: clamp(13px, 4vw, 18px);
  font-weight: 400;
  max-width: 300px;
  padding-top: clamp(3px, 1vw, 5px);
  padding-bottom: clamp(6px, 2vw, 10px);
  padding-left: clamp(10px, 4vw, 20px);
  padding-right: clamp(10px, 4vw, 20px);
}

.not-found-button[b-pcho7tsr46] {
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 10px);
  height: clamp(36px, 6vw, 45px);
  border-radius: clamp(6px, 2vw, 10px);
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 700;
  border: 2px solid rgba(52, 74, 106, 1);
  color: rgba(52, 74, 106, 1);
  cursor: pointer;
}
/* /Shared/Players/PlayerBottom.razor.rz.scp.css */
/* Error Popup */
.error-popup[b-3h7m2l957v] {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  transform: translateY(clamp(10px, 2vw, 17px));
}

.error-popup.view[b-3h7m2l957v] {
  opacity: 1;
  visibility: visible;
  transform: translateY(clamp(15px, 3vw, 30px));
}

.error-content[b-3h7m2l957v] {
  width: clamp(200px, 40vw, 300px);
  padding: clamp(15px, 3vw, 30px) clamp(10px, 2vw, 20px);
  border-radius: clamp(6px, 1vw, 10px);
  background-color: #ffffff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 15px);

  font-size: clamp(14px, 2vw, 16px);
  font-weight: 400;
  box-shadow: 0px 4px 17px #0c121c4d;
}

.error-icon[b-3h7m2l957v] {
  width: clamp(25px, 4vw, 35px);
  height: clamp(25px, 4vw, 35px);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 2vw, 15px);

  border: clamp(2px, 0.4vw, 3px) solid #ff6387;
  color: #ff6387;
}

/* Bottom Content */

.player-bottom[b-3h7m2l957v] {
  width: 100vw;
  padding: clamp(2vh, 2vw, 4vh) 0px;
  background: #eceff5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
}

.player-bottom-content[b-3h7m2l957v] {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 2vw, 2vw);
  min-width: 0;
}

.previous-button[b-3h7m2l957v],
.next-button[b-3h7m2l957v] {
  min-width: clamp(80px, 20vw, 110px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 10px);
  height: clamp(38px, 6vw, 45px);
  border-radius: 10px;
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 700;
  cursor: pointer;
}

.previous-button[b-3h7m2l957v] {
  border: 2px solid rgba(52, 74, 106, 1);
  color: rgba(52, 74, 106, 1);
}

.next-button[b-3h7m2l957v] {
  background: #d7e2f8;
  color: #354a6a;
  border: none;
}

.next-button.active[b-3h7m2l957v] {
  background-color: #49a1f9;
  color: white;
}

/* Responsive */

@media screen and (max-width: 1000px) {
  .player-bottom-content[b-3h7m2l957v] {
    width: 80%;
  }
}

@media screen and (max-width: 800px) {
  .player-bottom-content[b-3h7m2l957v] {
    width: 90%;
  }
}
/* /Shared/Players/PlayerContent.razor.rz.scp.css */
.player-content[b-r4cv7fct0g] {
  width: 50%;
  padding: 4vh 0px 0px;
  display: flex;
  flex-direction: column;
  gap: 2vh;
  position: relative;
}

.content-heading[b-r4cv7fct0g] {
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 700;
  color: #2383e2;
}

.content-title[b-r4cv7fct0g] {
  font-size: clamp(18px, 5vw, 24px);
  font-weight: 700;
  color: rgba(52, 74, 106, 1);
}

.content-info[b-r4cv7fct0g] {
  font-size: clamp(13px, 3vw, 16px);
  left: 3%;
  color: rgba(17, 25, 37, 1);
  padding: 1vh;
}

.content-image img[b-r4cv7fct0g] {
  width: 100%;
  border-radius: 12px;
}

@media (min-width: 700px) {
  .content-image img[b-r4cv7fct0g] {
    width: 70%;
  }
}

/* Responsive */

@media screen and (max-width: 1000px) {
  .player-content[b-r4cv7fct0g] {
    width: 80%;
  }
}

@media screen and (max-width: 800px) {
  .player-content[b-r4cv7fct0g] {
    width: 90%;
  }
}
/* /Shared/Players/PlayerCorrect.razor.rz.scp.css */
.correct-popup[b-rtrlbdv9ka] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100svh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: clamp(2vh, 5vw, 4vh) 0px;
  z-index: 9999;
}

.correct-content[b-rtrlbdv9ka] {
  max-width: clamp(280px, 80vw, 420px);
  background: rgba(195, 241, 205, 1);
  border-radius: clamp(8px, 2vw, 14px);
  padding: clamp(18px, 5vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.correct-image img[b-rtrlbdv9ka] {
  height: clamp(60px, 12vw, 100px);
}

.correct-title[b-rtrlbdv9ka] {
  padding-top: clamp(16px, 3vw, 25px);
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 800;
  color: rgba(102, 203, 124, 1);
  letter-spacing: 0.03em;
  text-align: center;
}

.correct-subtitle[b-rtrlbdv9ka] {
  padding-top: clamp(8px, 2vw, 10px);
  font-size: clamp(12px, 3vw, 14px);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(92, 101, 120, 1);
  text-align: center;
  padding-bottom: clamp(16px, 4vw, 30px);
}

.correct-answer-pane[b-rtrlbdv9ka] {
  margin: clamp(10px, 3vw, 20px) 0px;
  background-color: white;
  border-radius: clamp(8px, 2vw, 13px);
  padding: clamp(12px, 4vw, 25px);
  text-align: left;
  width: 100%;

  display: flex;
  flex-direction: column;
  gap: clamp(10px, 3vw, 20px);
}

.correct-answer[b-rtrlbdv9ka] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 2vw, 8px);
}

.answer-title[b-rtrlbdv9ka] {
  font-size: clamp(12px, 3vw, 16px);
  font-weight: 800;
  color: rgba(102, 203, 124, 1);
}
.answer-text[b-rtrlbdv9ka] {
  padding-top: clamp(4px, 1vw, 8px);
  font-size: clamp(11px, 2vw, 14px);
  font-weight: 400;
  color: rgba(92, 101, 120, 1);
}

.answer-image img[b-rtrlbdv9ka] {
  margin-top: clamp(4px, 1vw, 8px);
  width: 100%;
  border-radius: 10px;
}

.correct-button[b-rtrlbdv9ka] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 10px);
  height: clamp(38px, 6vw, 45px);
  border-radius: 45px;
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 700;
  background-color: rgba(102, 203, 124, 1);
  color: white;
  cursor: pointer;
}
/* /Shared/Players/PlayerError.razor.rz.scp.css */
.player-error[b-cu9treb2u9] {
  width: 100%;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-error-content[b-cu9treb2u9] {
  width: clamp(90%, 10vw, 40%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4vh, 5vh, 6vh);
}

.error-close-button[b-cu9treb2u9] {
  min-width: 110px;
  height: clamp(36px, 6vw, 45px);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 10px);
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 700;
  border: 2px solid rgba(52, 74, 106, 1);
  color: rgba(52, 74, 106, 1);
  cursor: pointer;
}

.error-close-button i[b-cu9treb2u9] {
  font-size: clamp(14px, 3vw, 18px);
}
/* /Shared/Players/PlayerFinish.razor.rz.scp.css */
.player-finish[b-qdg5z8zjga] {
  position: relative;
  min-height: 100svh;
}

.player-finish-back[b-qdg5z8zjga] {
  height: 40vh;
  width: 100vw;
  background: #0a2744;
}

.player-finish-pane[b-qdg5z8zjga] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0px clamp(8px, 4vw, 30px);
  min-width: 0;
}

.player-finish-content[b-qdg5z8zjga] {
  max-width: clamp(320px, 90vw, 500px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6vh 0px 10vh;
}

.close-finish[b-qdg5z8zjga] {
  width: 100%;
  display: flex;
}

.close-finish-button[b-qdg5z8zjga] {
  width: clamp(24px, 5vw, 30px);
  height: clamp(24px, 5vw, 30px);
  display: flex;
  align-self: center;
  justify-content: center;
  border: 1px solid white;
  border-radius: 100%;
  color: white;
  font-size: clamp(14px, 3vw, 16px);
  cursor: pointer;
}

.finish-title[b-qdg5z8zjga] {
  padding-top: 10px;
  font-size: clamp(20px, 6vw, 30px);
  font-weight: 700;
  color: white;
  text-align: center;
}

.finish-subtitle[b-qdg5z8zjga] {
  font-size: clamp(13px, 3vw, 16px);
  font-weight: 400;
  color: white;
  padding-top: 10px;
  max-width: 400px;
  text-align: center;
}

.summary-pane[b-qdg5z8zjga] {
  margin-top: 4vh;
  padding-bottom: clamp(20px, 5vw, 40px);
  width: 100%;
  background: white;
  border-radius: clamp(8px, 2vw, 14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.summary-image[b-qdg5z8zjga] {
  position: relative;
}

.back-image[b-qdg5z8zjga] {
  width: 100%;
}

.actual-image[b-qdg5z8zjga] {
  height: 230px;
  width: auto;
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}

.summary-point[b-qdg5z8zjga] {
  padding: clamp(10px, 2vw, 15px) clamp(6px, 2vw, 10px) clamp(6px, 2vw, 8px);
  width: 85%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
  font-size: clamp(12px, 2vw, 14px);
  font-weight: 400;
  color: #333;
}

.summary-value[b-qdg5z8zjga] {
  font-weight: 700;
  color: black;
}

.summary-point:last-child[b-qdg5z8zjga] {
  padding-bottom: 0px;
  border-bottom: none;
}

/* Rating */

.rate-button[b-qdg5z8zjga] {
  padding-top: clamp(10px, 2vw, 20px);
  cursor: pointer;
  font-size: clamp(12px, 2vw, 14px);
  font-weight: 600;
  color: #2383e2;
}

.summary-text[b-qdg5z8zjga] {
  font-size: clamp(12px, 2vw, 14px);
  font-weight: 300;
  color: rgba(92, 101, 120, 1);
  padding-top: clamp(10px, 3vw, 20px);
  max-width: 400px;
  text-align: center;
}

.next-button[b-qdg5z8zjga] {
  margin-top: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(38px, 6vw, 50px);
  border-radius: 6px;
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 700;
  cursor: pointer;
  background: #2383e2;
  color: white;
}

/* Lesson Rating */
.rating-pane[b-qdg5z8zjga] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.397);
}

.rating-content[b-qdg5z8zjga] {
  background-color: white;
  border-radius: clamp(8px, 2vw, 14px);
  max-width: clamp(340px, 90vw, 520px);
  padding: clamp(20px, 5vw, 30px);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}

.rating-top[b-qdg5z8zjga] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: clamp(15px, 5vw, 20px);
  margin-bottom: clamp(15px, 5vw, 20px);
  border-bottom: 1px solid #f0f0f0;
}

.rating-titles[b-qdg5z8zjga] {
  max-width: 320px;
}

.rating-title[b-qdg5z8zjga] {
  font-size: clamp(18px, 3vw, 20px);
  font-weight: 700;
  padding-bottom: 4px;
}

.rating-subtitle[b-qdg5z8zjga] {
  font-size: clamp(12px, 3vw, 14px);
  font-weight: 400;
  color: #333;
}

.rating-close[b-qdg5z8zjga] {
  padding: clamp(6px, 3vw, 8px);
  border: 1px solid #b4b4b4;
  border-radius: 100%;
  font-size: clamp(14px, 3vw, 16px);
  cursor: pointer;
}

.ratings[b-qdg5z8zjga] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 30px);
  overflow: auto;
}

.rating[b-qdg5z8zjga] {
  display: flex;
  gap: clamp(10px, 2vw, 15px);
}

.rating-icon[b-qdg5z8zjga] {
  min-width: clamp(30px, 5vw, 40px);
  width: clamp(30px, 5vw, 40px);
  height: clamp(30px, 5vw, 40px);
  display: flex;
  align-self: center;
  justify-content: center;
  background-color: #2383e2;
  border-radius: 100%;
  color: white;
  font-size: clamp(14px, 3vw, 16px);
  cursor: pointer;
}

.rating-body[b-qdg5z8zjga] {
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: clamp(8px, 2vw, 10px);
  padding-top: 5px;
}

.rating-text[b-qdg5z8zjga] {
  font-size: clamp(14px, 3vw, 16px);
  font-weight: 500;
}

.rating-stars[b-qdg5z8zjga] {
  display: flex;
  gap: clamp(5px, 2vw, 10px);
  color: #ffecd1;
}

.rating-stars i[b-qdg5z8zjga] {
  font-size: clamp(16px, 5vw, 20px);
  cursor: pointer;
}

.rating-stars .active[b-qdg5z8zjga] {
  color: #f3a12e;
}

.comment-label[b-qdg5z8zjga] {
  font-size: clamp(12px, 2vw, 14px);
  font-weight: 400;
  color: #333;
  padding-left: 6px;
  padding-bottom: 6px;
}

.comment-input[b-qdg5z8zjga] {
  display: flex;
}

.comment-input textarea[b-qdg5z8zjga] {
  flex: 1;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px 10px;
  resize: none;
  outline: none;
}

.submit-error[b-qdg5z8zjga] {
  padding-top: 14px;
  padding-left: 6px;
  font-size: clamp(11px, 2vw, 13px);
  color: red;
}

.submit-button[b-qdg5z8zjga] {
  position: relative;
  margin-top: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(38px, 6vw, 50px);
  border-radius: 6px;
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 700;
  cursor: pointer;
  background: #2383e2;
  color: white;
}

.loading-icon[b-qdg5z8zjga] {
  position: absolute;
  height: 100%;
  left: 0;
  padding-left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(13px, 2vw, 16px);
}

/* Responsive */

@media screen and (max-width: 600px) {
  .actual-image[b-qdg5z8zjga] {
    height: 150px;
  }
}
/* /Shared/Players/PlayerLoader.razor.rz.scp.css */
.content[b-bp7gmhv52x] {
  width: 70%;
}

.player-loader[b-bp7gmhv52x] {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-loader-inner[b-bp7gmhv52x] {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  max-width: 400px;
}

/* Responsive */

@media screen and (max-width: 1000px) {
  .content[b-bp7gmhv52x] {
    width: 80%;
  }
}

@media screen and (max-width: 800px) {
  .content[b-bp7gmhv52x] {
    width: 90%;
  }
}
/* /Shared/Players/PlayerQuestion.razor.rz.scp.css */
.player-question[b-8w4ty65kn7] {
  width: 50%;
  padding: 4vh 0px;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}

.question-title[b-8w4ty65kn7] {
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 700;
  color: #2383e2;
}

.question-text[b-8w4ty65kn7] {
  font-size: clamp(18px, 5vw, 24px);
  color: rgba(52, 74, 106, 1);
  padding-bottom: 1vh;
}

.question-image img[b-8w4ty65kn7] {
  width: 100%;
  border-radius: 12px;
}

@media (min-width: 700px) {
  .question-image img[b-8w4ty65kn7] {
    width: 70%;
  }
}

/* options */

.question-options[b-8w4ty65kn7] {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vw, 2vh);
  padding-top: 10px;
}

.option[b-8w4ty65kn7] {
  width: 100%;
  display: flex;
  gap: clamp(8px, 2vw, 15px);
  min-width: 0;
}

.option-indicator[b-8w4ty65kn7] {
  margin-top: clamp(15px, 3vw, 23px);
  width: clamp(12px, 3vw, 20px);
  min-width: clamp(12px, 3vw, 20px);
  height: clamp(12px, 3vw, 20px);
  border-radius: clamp(12px, 3vw, 20px);
  background: #c8d7f5;
  transition: all 0.3s ease-in-out;
}

.option-content[b-8w4ty65kn7] {
  flex-grow: 1;
  padding: clamp(12px, 3vw, 20px);
  border-radius: 12px;
  background: white;
  font-size: clamp(14px, 3vw, 16px);
  font-weight: 600;
  color: rgba(92, 101, 120, 1);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  display: flex;
}

.option-content img[b-8w4ty65kn7] {
  width: 100%;
  border-radius: 12px;
}

.option.active .option-indicator[b-8w4ty65kn7] {
  background: #2383e2;
}

.option.active .option-content[b-8w4ty65kn7] {
  border: 2px solid #2383e2;
  color: #2383e2;
}

/* Responsive */

@media screen and (max-width: 1000px) {
  .player-question[b-8w4ty65kn7] {
    width: 80%;
  }
}

@media screen and (max-width: 800px) {
  .player-question[b-8w4ty65kn7] {
    width: 90%;
  }
}
/* /Shared/Players/PlayerTop.razor.rz.scp.css */
.player-top[b-x8t1v50053] {
  width: 100vw;
  padding: clamp(2vh, 2vw, 4vh) 0px;
  background: #0a2744;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-top-content[b-x8t1v50053] {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 3vw, 2vw);
}

.player-close-button[b-x8t1v50053] {
  width: clamp(24px, 5vw, 30px);
  height: clamp(24px, 5vw, 30px);
  cursor: pointer;
  display: flex;
  align-self: center;
  justify-content: center;
  border: 1px solid white;
  border-radius: 100%;
  color: white;
  font-size: clamp(14px, 3vw, 16px);
}

.player-progress-timer[b-x8t1v50053] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.player-progress[b-x8t1v50053] {
  width: clamp(120px, 30vw, 300px);
  height: 10px;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
}
.player-progress-bar[b-x8t1v50053] {
  height: 10px;
  border-radius: 10px;
  width: 50%;
  background: #2383e2;
}

.player-timer[b-x8t1v50053] {
  font-size: clamp(12px, 2vw, 14px);
  font-weight: 600;
  color: white;
  padding-right: 6px;
}

.player-questions-count[b-x8t1v50053] {
  font-size: clamp(11px, 2vw, 13px);
  color: white;
  font-weight: 500;
}

/* Close Popup */

.popup-div[b-x8t1v50053] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100svh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-content[b-x8t1v50053] {
  max-width: clamp(300px, 80vw, 420px);
  background: white;
  border-radius: clamp(8px, 2vw, 14px);
  padding: clamp(16px, 5vw, 30px);
}

.popup-close[b-x8t1v50053] {
  display: flex;
  justify-content: flex-end;
}

.popup-close-button[b-x8t1v50053] {
  width: clamp(28px, 6vw, 35px);
  height: clamp(28px, 6vw, 35px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(14px, 3vw, 16px);
  color: black;
  border: 1px solid #dbdbdb;
  border-radius: 100%;
  cursor: pointer;
}

.popup-image[b-x8t1v50053] {
  height: clamp(80px, 18vw, 120px);
  padding-top: clamp(16px, 4vw, 30px);
  text-align: center;
}
.popup-image img[b-x8t1v50053] {
  height: 100%;
}

.popup-title[b-x8t1v50053] {
  padding-top: clamp(16px, 4vw, 30px);
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
}

.popup-subtitle[b-x8t1v50053] {
  padding-top: clamp(8px, 2vw, 10px);
  font-size: clamp(12px, 3vw, 14px);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #9195b3;
  text-align: center;
  padding-bottom: clamp(16px, 4vw, 30px);
}

.popup-action-buttons[b-x8t1v50053] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vw, 20px);
}

.popup-action-button[b-x8t1v50053] {
  position: relative;
  width: 100%;
  height: clamp(38px, 6vw, 45px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(13px, 2vw, 14px);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 6px;
  cursor: pointer;
  background: #eceff5;
}

.popup-action-button.good[b-x8t1v50053] {
  background: #2383e2;
  color: white;
}

/* Time Up */
.timeup-pane[b-x8t1v50053] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100svh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: clamp(2vh, 5vw, 4vh) 0px;
  z-index: 9999;
}

.timeup-content[b-x8t1v50053] {
  max-width: clamp(290px, 80vw, 420px);
  background: rgb(255, 255, 255);
  border-radius: clamp(8px, 2vw, 14px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.timeup-image[b-x8t1v50053] {
  width: 100%;
  background: rgba(240, 241, 254, 1);
  padding: clamp(20px, 6vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeup-image img[b-x8t1v50053] {
  height: clamp(90px, 18vw, 150px);
}

.timeup-title[b-x8t1v50053] {
  padding-top: clamp(16px, 4vw, 25px);
  font-size: clamp(15px, 4vw, 20px);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: center;
  padding: clamp(16px, 4vw, 30px) clamp(16px, 5vw, 40px) 0px;
}

.timeup-subtitle[b-x8t1v50053] {
  padding-top: clamp(8px, 2vw, 10px);
  font-size: clamp(12px, 3vw, 14px);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(92, 101, 120, 1);
  text-align: center;
  padding: clamp(8px, 2vw, 10px) clamp(16px, 5vw, 40px) clamp(16px, 4vw, 30px);
}

.timeup-button-pane[b-x8t1v50053] {
  padding: 0px clamp(16px, 5vw, 40px) clamp(16px, 4vw, 30px);
  width: 100%;
}

.timeup-button[b-x8t1v50053] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 10px);
  height: clamp(38px, 6vw, 45px);
  border-radius: 10px;
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 700;
  background-color: #49a1f9;
  color: white;
  cursor: pointer;
}

/* Responsive */

@media screen and (max-width: 1000px) {
  .player-top-content[b-x8t1v50053],
  .player-lesson-details[b-x8t1v50053] {
    width: 80%;
  }
}

@media screen and (max-width: 800px) {
  .player-top-content[b-x8t1v50053],
  .player-lesson-details[b-x8t1v50053] {
    width: 90%;
  }
}
/* /Shared/Players/PlayerWrong.razor.rz.scp.css */
.wrong-popup[b-n8r9582210] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100svh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: clamp(2vh, 5vw, 4vh) 0px;
  z-index: 9999;
}

.wrong-content[b-n8r9582210] {
  min-width: clamp(280px, 80vw, 420px);
  max-width: clamp(280px, 80vw, 420px);
  background: rgba(254, 232, 232, 1);
  border-radius: clamp(8px, 2vw, 14px);
  padding: clamp(18px, 5vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.wrong-back[b-n8r9582210] {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: clamp(150px, 30vw, 230px);
  background-color: rgba(254, 101, 93, 1);
  top: 0;
  border-radius: clamp(8px, 2vw, 14px) clamp(8px, 2vw, 14px) 0px 0px;
}

.wrong-details[b-n8r9582210] {
  position: relative;
  z-index: 1;
  width: 100%;
}

.wrong-image img[b-n8r9582210] {
  height: clamp(60px, 12vw, 100px);
}

.wrong-title[b-n8r9582210] {
  padding-top: clamp(10px, 2vw, 15px);
  font-size: clamp(18px, 5vw, 25px);
  font-weight: 800;
  color: white;
  letter-spacing: 0.03em;
  text-align: center;
}

.correct-answer-pane[b-n8r9582210] {
  margin: clamp(10px, 3vw, 20px) 0px;
  background-color: white;
  border-radius: clamp(8px, 2vw, 13px);
  padding: clamp(12px, 4vw, 25px);
  text-align: left;

  display: flex;
  flex-direction: column;
  gap: clamp(10px, 3vw, 20px);
}

.correct-answer[b-n8r9582210] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 2vw, 8px);
}

.answer-title[b-n8r9582210] {
  font-size: clamp(12px, 3vw, 16px);
  font-weight: 800;
  color: rgba(232, 144, 145, 1);
}
.answer-text[b-n8r9582210] {
  padding-top: clamp(4px, 1vw, 8px);
  font-size: clamp(11px, 2vw, 14px);
  font-weight: 400;
  color: rgba(92, 101, 120, 1);
}

.answer-image img[b-n8r9582210] {
  margin-top: clamp(4px, 1vw, 8px);
  width: 100%;
  border-radius: 10px;
}

.correct-indicator[b-n8r9582210] {
  font-size: clamp(16px, 4vw, 25px);
  color: rgba(232, 144, 145, 0.79);
}

.wrong-button[b-n8r9582210] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 10px);
  height: clamp(38px, 6vw, 45px);
  border-radius: 45px;
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 700;
  background-color: rgba(254, 101, 93, 1);
  color: white;
  cursor: pointer;
}
/* /Shared/Subject/SubjectLessonBox.razor.rz.scp.css */
/* Lesson */
.lesson-box[b-pmeytxpqs9] {
  display: flex;
  gap: clamp(12px, 3vw, 20px);
}

.lesson-line-indicator[b-pmeytxpqs9] {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lesson-indicator[b-pmeytxpqs9] {
  width: clamp(22px, 5vw, 30px);
  min-width: clamp(22px, 5vw, 30px);
  height: clamp(22px, 5vw, 30px);
  min-height: clamp(22px, 5vw, 30px);
  border-radius: 100%;
  border: 2px solid #49a1f9;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: clamp(11px, 2vw, 14px);
}

.lesson-indicator.active[b-pmeytxpqs9] {
  color: white;
  font-weight: 700;
}

.lesson-indicator.done[b-pmeytxpqs9] {
  color: #49a1f9;
}

.lesson-indicator.disabled[b-pmeytxpqs9] {
  background: #a1a8b7;
  border: 2px solid #a1a8b7;
  color: white;
}

.lesson-line[b-pmeytxpqs9] {
  height: 100%;
  border-left: 2px dashed #49a1f9;
}

.lesson-line.disabled[b-pmeytxpqs9] {
  border-left: 2px dashed #a1a8b7;
}

.lesson-line.hide[b-pmeytxpqs9] {
  display: none;
}

/* Lesson: content */
.lesson-content[b-pmeytxpqs9] {
  width: 100%;
  background-color: white;
  border-radius: 12px;
  padding: clamp(16px, 5vw, 30px);
  margin-bottom: clamp(12px, 3vw, 20px);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(18px, 5vw, 30px);
}

.lesson-title-arrow[b-pmeytxpqs9] {
  display: flex;
  justify-content: space-between;
  gap: clamp(12px, 3vw, 30px);
}

.lesson-title-arrow.disabled[b-pmeytxpqs9] {
  align-items: flex-end;
}

.lesson-number-title[b-pmeytxpqs9] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lesson-number[b-pmeytxpqs9] {
  font-size: clamp(10px, 2vw, 12px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #49a1f9;
}

.lesson-title[b-pmeytxpqs9] {
  font-size: clamp(12px, 2vw, 14px);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #111925;
}

.lesson-subtitle[b-pmeytxpqs9] {
  font-size: clamp(10px, 2vw, 11px);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #a1a8b7;
  text-align: right;
}

.lesson-arrow[b-pmeytxpqs9] {
  color: #5c6578;
}

.lesson-box-calc[b-pmeytxpqs9] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 2vw, 20px);
}

.lesson-box-topics[b-pmeytxpqs9] {
  font-size: clamp(10px, 2vw, 12px);
  font-weight: 600;
  color: #9ca3b1;
  letter-spacing: 0.02em;
}

.lesson-progress[b-pmeytxpqs9] {
  width: clamp(60px, 20vw, 120px);
  height: 10px;
  background: #eaedf4;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
}
.lesson-progress-inner[b-pmeytxpqs9] {
  height: 10px;
  background: #49a1f9;
  border-radius: 10px;
}

/* Responsive */
@media screen and (max-width: 400px) {
  .lesson-box-calc[b-pmeytxpqs9] {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .lesson-progress[b-pmeytxpqs9] {
    width: 100%;
  }
}
/* /Shared/Subject/SubjectTopicBox.razor.rz.scp.css */
/* Topic */
.topic-box[b-xvucnxkpcp] {
  display: flex;
  background: white;
  border-radius: clamp(8px, 2vw, 14px);
  position: relative;
}

.premium-indicator[b-xvucnxkpcp] {
  position: absolute;
  z-index: 1;
  right: clamp(20px, 10vw, 60px);
  top: clamp(-8px, -2vw, -16px);
}

.premium-button[b-xvucnxkpcp] {
  display: flex;
  align-items: center;
  gap: clamp(6px, 2vw, 10px);
  height: clamp(28px, 5vw, 38px);
  padding: 0px clamp(14px, 6vw, 30px);
  border-radius: 38px;
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 700;
  background: #f9af49;
  color: white;
}

.topic-icon[b-xvucnxkpcp] {
  min-width: clamp(80px, 15vw, 150px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(18px, 5vw, 30px);
  border-radius: clamp(8px, 2vw, 14px) 0px 0px clamp(8px, 2vw, 14px);
}

.topic-info[b-xvucnxkpcp] {
  width: 100%;
  padding: clamp(12px, 4vw, 30px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 3vw, 30px);
  min-width: 0;
}

.topic-title-arrow[b-xvucnxkpcp] {
  display: flex;
  justify-content: space-between;
  gap: clamp(8px, 2vw, 20px);
  min-width: 0;
}

.topic-title[b-xvucnxkpcp] {
  font-size: clamp(12px, 2vw, 14px);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #111925;
}

.topic-subtitle[b-xvucnxkpcp] {
  font-size: clamp(10px, 2vw, 11px);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #a1a8b7;
}

.topic-arrow[b-xvucnxkpcp] {
  color: #5c6578;
}

.topic-box-calc[b-xvucnxkpcp] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 2vw, 20px);
  min-width: 0;
}

.topic-box-topics[b-xvucnxkpcp] {
  font-size: clamp(10px, 2vw, 12px);
  font-weight: 600;
  color: #9ca3b1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topic-progress[b-xvucnxkpcp] {
  width: clamp(60px, 20vw, 120px);
  height: 10px;
  background: #eaedf4;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
}
.topic-progress-inner[b-xvucnxkpcp] {
  height: 10px;
  border-radius: 10px;
}

/* Responsive */
@media screen and (max-width: 400px) {
  .topic-box-calc[b-xvucnxkpcp] {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(6px, 2vw, 10px);
    width: 100%;
  }
  .topic-progress[b-xvucnxkpcp] {
    min-width: 100%;
    width: 100%;
  }
}