.correct-div {
  display: none;
  justify-content: center;
  align-items: flex-start;
  gap: 13px;
}

.svg-correct {
  display: none;
  width: 75px;
  height: 65px;
  padding: 17.263px 9.711px;
  justify-content: center;
  align-items: center;
  gap: 7.68px;
  border-radius: 539.474px;
  border: 1.079px solid rgba(40, 205, 65, 0.3);
  background: rgba(40, 205, 65, 0.2);
}

.expand-btn {
  display: flex;
  padding: 1rem 0.5625rem;
  justify-content: center;
  align-items: center;
  gap: 0.44488rem;
  font-weight: normal;
  opacity: 1;
  color: #28CD41;
  font-size: 0.9853rem;
  line-height: 1.2941;
  letter-spacing: -0.0375rem;
  cursor: pointer;
  border-radius: 0.62281rem;
  border: 1px solid rgba(40, 205, 65, 0.3);
  background: rgba(40, 205, 65, 0.1);
}
.expand-btn.clicked {
  border-radius: 0.62281rem;
  border: 1px solid rgba(40, 205, 65, 0.5);
  background: rgba(40, 205, 65, 0.3);
  font-weight: 500;
}
.expand-btn:hover {
  border-radius: 0.62281rem;
  border: 1px solid rgba(40, 205, 65, 0.5);
  background: rgba(40, 205, 65, 0.3);
  font-weight: 500;
}

.incorrect-div {
  display: none;
  justify-content: center;
  align-items: flex-start;
  gap: 13px;
}

.svg-incorrect {
  display: none;
  width: 75px;
  height: 65px;
  padding: 17.263px 9.711px;
  justify-content: center;
  align-items: center;
  gap: 7.68px;
  border-radius: 539.474px;
  border-radius: 539.474px;
  border: 1.079px solid rgba(255, 59, 48, 0.3);
  background: rgba(255, 59, 48, 0.2);
}

.expand-btn.incorrect {
  display: flex;
  padding: 1rem 0.5625rem;
  justify-content: center;
  align-items: center;
  gap: 0.44488rem;
  font-weight: normal;
  opacity: 1;
  color: #FF3B30;
  font-size: 0.9853rem;
  line-height: 1.2941;
  letter-spacing: -0.0375rem;
  cursor: pointer;
  border-radius: 0.62281rem;
  border: 1px solid rgba(255, 59, 48, 0.3);
  background: rgba(255, 59, 48, 0.1);
}
.expand-btn.incorrect.clicked {
  border-radius: 0.62281rem;
  border: 1px solid rgba(255, 59, 48, 0.5);
  background: rgba(255, 59, 48, 0.3);
  font-weight: 500;
}
.expand-btn.incorrect:hover {
  border-radius: 0.62281rem;
  border: 1px solid rgba(255, 59, 48, 0.5);
  background: rgba(255, 59, 48, 0.3);
  font-weight: 500;
}

.practice-control {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767px) {
  .practice-control {
    flex-direction: column;
  }
}

.input-wrap {
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.44488rem;
}
@media (max-width: 767px) {
  .input-wrap {
    flex-direction: column;
    gap: 0.5rem;
  }
}

.human-input {
  display: flex;
  width: 21.5rem;
  resize: none;
  padding: 0.35rem 0.71219rem;
  align-items: center;
  gap: 0.44488rem;
  border-radius: 0.62281rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.1);
  font-weight: normal;
  opacity: 1;
  color: #000000;
  font-size: 0.9853rem;
  line-height: 1.2941;
  letter-spacing: -0.0375rem;
  cursor: text;
}
.human-input::-webkit-scrollbar {
  display: none;
}
@media (max-width: 767px) {
  .human-input {
    width: 100%;
  }
}
.human-input:focus {
  outline: none;
  border: 1px solid rgba(10, 132, 255, 0.6);
  background: rgba(0, 0, 0, 0.05);
}
@media (max-width: 767px) {
  .human-input:focus {
    margin-bottom: 0.5rem;
  }
}

.submit {
  display: flex;
  padding: 1rem 0.5625rem;
  justify-content: center;
  align-items: center;
  gap: 0.44488rem;
  cursor: pointer;
  border-radius: 0.62281rem;
  border: 1px solid rgba(10, 132, 255, 0.3);
  background: rgba(10, 132, 255, 0.2);
  font-weight: normal;
  opacity: 1;
  color: #0A84FF;
  font-size: 0.9853rem;
  line-height: 1.2941;
}
@media (max-width: 767px) {
  .submit {
    width: 100%;
  }
}
.submit.clicked {
  border: 1px solid rgba(10, 132, 255, 0.5);
  background: rgba(10, 132, 255, 0.3);
  font-weight: 500;
}
.submit:hover {
  border: 1px solid rgba(10, 132, 255, 0.5);
  background: rgba(10, 132, 255, 0.3);
  font-weight: 500;
}

.study-control {
  display: flex;
  width: 26.25rem;
  justify-content: center;
  align-items: center;
  gap: 0.44488rem;
}

.practice-btn {
  background-color: #0078e0;
  color: #fff;
  padding: 1rem 1.11219rem;
  border: none;
  border-radius: 0.65rem;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.2941;
  letter-spacing: -0.0375rem;
  transition: all 0.1s ease-in-out;
}
.practice-btn:hover {
  background-color: #0060c0;
}
@media (min-width: 1200px) {
  .practice-btn {
    padding: 0.625rem 3.25rem;
  }
}
@media (max-width: 1199px) and (min-width: 992px) {
  .practice-btn {
    padding: 0.75rem 2.5rem;
  }
}
@media (max-width: 991px) and (min-width: 768px) {
  .practice-btn {
    padding: 0.75rem 2rem;
  }
}
@media (max-width: 767px) {
  .practice-btn {
    padding: 0.5rem 1.5rem;
  }
}

.practice {
  /* Set a minimum height for the child element (can be adjusted as needed) */
  min-height: 120%;
  width: 80%;
  display: none;
  flex-direction: column;
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  padding: 0rem 2.5rem 2.5rem 2.0625rem;
}

.practice-header {
  display: flex;
  width: 100%;
  position: sticky;
  top: 0;
  right: auto;
  left: auto;
  z-index: 10;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(60px);
          backdrop-filter: blur(60px);
}

.practice-body {
  display: flex;
  margin-top: 8.125rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9375rem;
  color: #000;
  font-size: 1.325rem;
  font-style: normal;
  font-weight: 600;
  line-height: 140.023%; /* 2.27538rem */
  letter-spacing: -0.065rem;
}

.link {
  display: flex;
  padding: 14.28px 9px;
  justify-content: center;
  align-items: center;
  gap: 6.353px;
  cursor: pointer;
  border-radius: 12px;
  border: 0.892px solid rgba(0, 0, 0, 0);
  background: rgba(0, 0, 0, 0.05);
}
.link.clicked {
  background: rgba(0, 0, 0, 0.1);
}
.link:hover {
  background: rgba(0, 0, 0, 0.1);
}

.explain-wrap {
  display: none;
  width: 100%;
  height: 85%;
  padding: 10px;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  z-index: 15;
}

.explain.incorrect {
  display: none;
  height: 522px;
  padding: 42px 24px;
  align-items: flex-start;
  gap: 10px;
  border-radius: 15px;
  border: 1px solid rgba(255, 59, 48, 0.5);
  background: #FFF;
}

.explain.correct {
  display: flex;
  position: relative;
  flex-direction: column;
  height: 50%;
  width: 50%;
  padding: 42px 24px;
  align-items: flex-start;
  gap: 10px;
  border-radius: 15px;
  border: 1px solid rgba(40, 205, 65, 0.5);
  background: #FFF;
  overflow: auto;
}
.explain.correct::-webkit-scrollbar {
  display: none;
}

.cls-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.display {
  display: flex;
  position: relative;
  width: 80%;
  padding: 2.4375rem 2.5rem 2.5rem 2.0625rem;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  align-self: stretch;
  background: #FFF;
  color: #000;
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 600;
  line-height: 140.023%; /* 2.27538rem */
  letter-spacing: -0.065rem;
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow-y: auto;
}
.wrapper::-webkit-scrollbar {
  display: none;
}

.note {
  display: flex;
  width: 85%;
  font-size: 1.325rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9375rem;
  position: relative;
  overflow-y: auto;
  min-height: 120%;
}

.sidebar {
  display: flex;
  width: 20%;
  height: 100svh;
  padding: 0.2625rem 0.5rem 0rem 1.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  align-self: stretch;
}

.sidebar-header {
  display: flex;
  width: 100%;
  padding-bottom: 0.625rem;
  align-items: flex-start;
  gap: 0.225rem;
  border-bottom: 0.7px solid rgba(0, 0, 0, 0.25);
}
.sidebar-header .sidebar-title {
  color: #000;
  font-size: 1.1625rem;
  font-style: normal;
  font-weight: 600;
  line-height: 111.023%; /* 2.27538rem */
  letter-spacing: -0.065rem;
  margin-block-end: 0px;
}

.sidebar-body {
  display: flex;
  width: 90%;
  padding: 0rem 0.20006rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9375rem;
  flex: 1 0 0;
}

.sidebar-body-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.sidebar-body-header h2 {
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.9125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140.023%; /* 1.57525rem */
  letter-spacing: -0.0225rem;
  margin-block-end: 0px;
  margin-block-start: 0px;
}
.sidebar-body-header .sidebar-body-number {
  color: rgba(0, 0, 0, 0.6);
  font-family: Inter;
  font-size: 0.725rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140.023%;
  letter-spacing: -0.02rem;
}

.sidebar-body-body {
  display: flex;
  padding-left: 0px;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  align-self: stretch;
}
.sidebar-body-body .topic {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  align-self: stretch;
  overflow: hidden;
  color: #000;
  text-overflow: ellipsis;
  font-family: Inter;
  font-size: 1.1935rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140.023%; /* 1.75031rem */
  letter-spacing: -0.035rem;
}
.sidebar-body-body .topic.emphasized {
  color: #000;
  font-size: 1.935rem;
  font-style: normal;
  font-weight: 600;
  line-height: 140.023%; /* 1.75031rem */
  letter-spacing: -0.025rem;
}

.note-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 0 0;
  align-self: stretch;
  height: 20%;
  color: #FFF;
  font-size: 1.075rem;
  font-style: normal;
  font-weight: 600;
  line-height: 105.523%; /* 1.45094rem */
  letter-spacing: -0.055rem;
}

.controls-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 100%;
  height: 20%;
  padding: 0.968rem 0rem;
}

.controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.9375rem;
}

.ctrl-btn {
  display: flex;
  padding: 0.825rem 0.78981rem;
  gap: 0.43594rem;
  border-radius: 0.9375rem;
  background: rgba(49, 49, 49, 0.71);
  cursor: pointer;
  color: #fff;
  opacity: 0.5;
  font-weight: 500;
  font-size: 0.7375rem;
  line-height: 1.2941;
  letter-spacing: -0.0375rem;
  border: none;
  transition: all 0.1s ease-in-out;
}
.ctrl-btn:hover {
  background-color: rgba(49, 49, 49, 0.9);
}

.main-btn {
  display: flex;
  width: 12.3125rem;
  padding: 0.825rem 0.78981rem;
  justify-content: center;
  align-items: center;
  gap: 0.43594rem;
  border-radius: 0.9375rem;
  background: rgba(49, 49, 49, 0.7);
  cursor: pointer;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-size: 0.7875rem;
  font-style: normal;
  font-weight: 600;
  line-height: 111%; /* 1.31813rem */
  letter-spacing: -0.03563rem;
}
.main-btn:hover {
  background-color: rgba(49, 49, 49, 0.9);
  color: white;
}

.frame {
  display: flex;
  height: auto;
  min-height: 60%;
  width: 100%;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-snap-stop: always;
  scroll-snap-align: center;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
  white-space: nowrap;
}
.frame::-webkit-scrollbar {
  display: none;
}

.default-div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80vw;
  height: 90%;
  border-radius: 1.185rem;
  border: 1px solid rgba(60, 75, 90, 0.5);
  background: rgba(52, 52, 52, 0.24);
  flex: 0 0 auto;
  margin-right: 1rem;
  scroll-snap-align: center;
  border-radius: 10px;
  transition: transform 0.3s ease-in-out, width 0.3s ease-in-out height 0.3s ease-in-out;
  cursor: pointer;
  margin: auto; /* Center the default-div horizontally and vertically within .frame */
}

.new-div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80vw;
  height: 90%;
  border-radius: 1.185rem;
  border: 1px solid rgba(60, 75, 90, 0.5);
  background: rgba(52, 52, 52, 0.24);
  flex: 0 0 auto;
  margin-right: 1rem;
  scroll-snap-align: center;
  border-radius: 10px;
  transition: transform 0.3s ease-in-out, width 0.3s ease-in-out height 0.3s ease-in-out;
  cursor: pointer;
  margin: auto; /* Center the default-div horizontally and vertically within .frame */
}

.create-btn {
  display: flex;
  padding: 0.6875rem 0.9375rem;
  justify-content: center;
  align-items: center;
  gap: 0.31219rem;
  border-radius: 0.43706rem;
  border: 1px solid rgba(10, 132, 255, 0.1);
  background: rgba(10, 132, 255, 0.07);
  color: #0A84FF;
  outline: none;
  text-align: center;
  font-size: 0.8745rem;
  font-style: normal;
  font-weight: 500;
  line-height: 111%; /* 0.69375rem */
  letter-spacing: -0.025rem;
  cursor: pointer;
}
.create-btn:hover {
  background: rgba(10, 132, 255, 0.15);
  border: 1px solid rgba(10, 132, 255, 0.2);
}

.collection {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  height: 100svh;
  width: 100%;
}

.onboard-wrap {
  display: flex;
  height: 100svh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.406rem;
  background: rgba(0, 0, 0, 0.83);
  -webkit-backdrop-filter: blur(0.364rem);
          backdrop-filter: blur(0.364rem);
}

.onboard {
  display: flex;
  width: 25.375rem;
  position: relative;
  height: 58.5%;
  padding: 1.78rem 2.375rem 1.375rem 2.375rem;
  flex-direction: column;
  align-items: center;
  gap: 3.313rem;
  flex-shrink: 0;
  border-radius: 0.938rem;
  background: #1C1C1E;
}

.onboard-btn {
  display: flex;
  padding: 0.8rem 0.8rem;
  justify-content: center;
  align-items: center;
  gap: 0.31219rem;
  border-radius: 0.43706rem;
  border: 0px solid rgba(10, 132, 255, 0.2);
  background: rgba(10, 132, 255, 0);
  color: #0A84FF;
  outline: none;
  text-align: center;
  font-size: 0.8745rem;
  font-style: normal;
  font-weight: 500;
  line-height: 111%; /* 0.69375rem */
  letter-spacing: -0.025rem;
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  cursor: pointer;
}
.onboard-btn:hover {
  text-decoration: underline;
  transition: -webkit-text-decoration 0.8s ease-in-out;
  transition: text-decoration 0.8s ease-in-out;
  transition: text-decoration 0.8s ease-in-out, -webkit-text-decoration 0.8s ease-in-out;
}

.main-topic {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.topic-wrapper {
  display: flex;
  width: 17.625rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: auto;
  gap: 1.375rem;
}

.topic-header {
  width: 15.5625rem;
  color: #FFF;
  text-align: center;
  font-family: Inter;
  font-size: 1.575rem;
  font-style: normal;
  font-weight: 600;
  line-height: 116.5%; /* 25.63px */
  letter-spacing: -0.88px;
}

.topic-input {
  display: flex;
  width: 13.855rem;
  padding: 0.5944rem 0.5rem;
  align-items: center;
  gap: 0.31219rem;
  border-radius: 0.43706rem;
  border: 0.7px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  text-overflow: ellipsis;
  font-size: 0.8975rem;
  font-style: normal;
  font-weight: 500;
  line-height: 111%; /* 0.76313rem */
  letter-spacing: -0.0275rem;
  cursor: text;
}
.topic-input:focus {
  outline: none;
  border: 1px solid rgba(10, 132, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
}

.topic-btn {
  display: flex;
  width: 14.5625rem;
  padding: 0.62444rem 0.7805rem;
  justify-content: center;
  align-items: center;
  gap: 0.31219rem;
  border-radius: 0.5rem;
  border: 0.7px solid rgba(255, 255, 255, 0.1);
  background: rgba(106, 106, 106, 0.4);
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  font-size: 0.8745rem;
  font-style: normal;
  font-weight: 500;
  line-height: 111%; /* 0.76313rem */
  letter-spacing: -0.0275rem;
}
.topic-btn.active {
  border-radius: 0.5rem;
  border: 1px solid rgba(10, 132, 255, 0.1);
  background: rgba(10, 132, 255, 0.85);
  color: #ffffff;
  cursor: pointer;
}
.topic-btn.active:hover {
  background: rgba(10, 132, 255, 0.95);
}

.addtopic-btn {
  display: flex;
  padding: 0.5rem 0.875rem;
  justify-content: center;
  align-items: center;
  gap: 0.31219rem;
  border-radius: 0.43706rem;
  border: 1px solid rgba(10, 132, 255, 0.2);
  background: rgba(10, 132, 255, 0.07);
  color: #0A84FF;
  text-align: center;
  font-size: 0.8745rem;
  font-style: normal;
  font-weight: 500;
  line-height: 111%; /* 0.69375rem */
  letter-spacing: -0.025rem;
  cursor: pointer;
}
.addtopic-btn:hover {
  background: rgba(10, 132, 255, 0.2);
  border: 1px solid rgba(10, 132, 255, 0.3);
}

.topic-wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5625rem;
  height: 2rem;
}
.topic-wrap .topic-name {
  display: flex;
  width: 12.25rem;
  padding: 0.62444rem 0rem;
  align-items: center;
  gap: 0.31219rem;
  color: #FFF;
  white-space: nowrap;
  overflow-x: auto;
  margin-right: auto;
  text-align: center;
  font-size: 0.8975rem;
  font-style: normal;
  font-weight: 400;
  line-height: 111%; /* 0.76313rem */
  letter-spacing: -0.00688rem;
}
.topic-wrap .topic-name::-webkit-scrollbar {
  display: none;
}

.rm-topic-btn {
  display: flex;
  padding: 0.49956rem 0.76244rem;
  justify-content: center;
  align-items: center;
  gap: 0.24975rem;
  border-radius: 0.34969rem;
  border: 0.56px solid rgba(255, 59, 48, 0.1);
  background: rgba(255, 59, 48, 0.07);
  cursor: pointer;
  color: #FF3B30;
  text-align: center; /* Left */
  font-size: 0.73rem;
  font-style: normal;
  font-weight: 500;
  line-height: 111%; /* 0.666rem */
  letter-spacing: -0.024rem;
}
.rm-topic-btn:hover {
  background: rgba(255, 59, 48, 0.2);
  border: 1px solid rgba(255, 59, 48, 0.3);
}

.topic-list-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  justify-content: center;
  gap: 0.625rem;
}

.topic-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  justify-content: flex-start; /* Change to flex-start to align content to the top */
  gap: 1rem;
  max-height: 11.935rem; /* Set a maximum height for scrolling */
  overflow-y: auto;
  scroll-padding-top: 0.625rem;
}
.topic-list::-webkit-scrollbar {
  display: none;
}

.course-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.input-wrapper {
  display: flex;
  width: 17.625rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: auto;
  gap: 1.375rem;
}

.course-header {
  width: 15.5625rem;
  color: #FFF;
  text-align: center;
  font-family: Inter;
  font-size: 1.575rem;
  font-style: normal;
  font-weight: 600;
  line-height: 116.5%; /* 25.63px */
  letter-spacing: -0.88px;
}

.courseInp {
  display: flex;
  width: 13.855rem;
  padding: 0.5944rem 0.5rem;
  align-items: center;
  gap: 0.31219rem;
  border-radius: 0.43706rem;
  border: 0.7px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  text-overflow: ellipsis;
  font-size: 0.8975rem;
  font-style: normal;
  font-weight: 500;
  line-height: 111%; /* 0.76313rem */
  letter-spacing: -0.0275rem;
  cursor: text;
}
.courseInp:focus {
  outline: none;
  border: 1px solid rgba(10, 132, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
}

.course-btn {
  display: flex;
  width: 14.5625rem;
  padding: 0.62444rem 0.7805rem;
  justify-content: center;
  align-items: center;
  gap: 0.31219rem;
  border-radius: 0.5rem;
  border: 0.7px solid rgba(255, 255, 255, 0.1);
  background: rgba(106, 106, 106, 0.4);
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  font-size: 0.8745rem;
  font-style: normal;
  font-weight: 500;
  line-height: 111%; /* 0.76313rem */
  letter-spacing: -0.0275rem;
}
.course-btn.active {
  border-radius: 0.5rem;
  border: 1px solid rgba(10, 132, 255, 0.1);
  background: rgba(10, 132, 255, 0.85);
  color: #ffffff;
  cursor: pointer;
}
.course-btn.active:hover {
  background: rgba(10, 132, 255, 0.95);
}

.materials {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.material-wrapper {
  display: flex;
  width: 17.625rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: auto;
  gap: 1.375rem;
}

.material-header {
  width: 15.5625rem;
  color: #FFF;
  text-align: center;
  font-family: Inter;
  font-size: 1.575rem;
  font-style: normal;
  font-weight: 600;
  line-height: 116.5%; /* 25.63px */
  letter-spacing: -0.88px;
}

.material-btn {
  display: flex;
  width: 14.5625rem;
  padding: 0.62444rem 0.7805rem;
  justify-content: center;
  align-items: center;
  gap: 0.31219rem;
  border-radius: 0.5rem;
  border: 0.7px solid rgba(255, 255, 255, 0.1);
  background: rgba(106, 106, 106, 0.4);
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  font-size: 0.8745rem;
  font-style: normal;
  font-weight: 500;
  line-height: 111%; /* 0.76313rem */
  letter-spacing: -0.0275rem;
}
.material-btn.active {
  border-radius: 0.5rem;
  border: 1px solid rgba(10, 132, 255, 0.1);
  background: rgba(10, 132, 255, 0.85);
  color: #ffffff;
  cursor: pointer;
}
.material-btn.active:hover {
  background: rgba(10, 132, 255, 0.95);
}

.addfile-btn {
  display: flex;
  padding: 0.5rem 0.875rem;
  justify-content: center;
  align-items: center;
  gap: 0.31219rem;
  border-radius: 0.43706rem;
  border: 1px solid rgba(10, 132, 255, 0.2);
  background: rgba(10, 132, 255, 0.07);
  color: #0A84FF;
  text-align: center;
  font-size: 0.8745rem;
  font-style: normal;
  font-weight: 500;
  line-height: 111%; /* 0.69375rem */
  letter-spacing: -0.025rem;
  cursor: pointer;
}
.addfile-btn:hover {
  background: rgba(10, 132, 255, 0.2);
  border: 1px solid rgba(10, 132, 255, 0.3);
}

.rm-material-btn {
  display: flex;
  padding: 0.49956rem 0.76244rem;
  justify-content: center;
  align-items: center;
  gap: 0.24975rem;
  border-radius: 0.34969rem;
  border: 0.56px solid rgba(255, 59, 48, 0.1);
  background: rgba(255, 59, 48, 0.07);
  cursor: pointer;
  color: #FF3B30;
  text-align: center; /* Left */
  font-size: 0.73rem;
  font-style: normal;
  font-weight: 500;
  line-height: 111%; /* 0.666rem */
  letter-spacing: -0.024rem;
}
.rm-material-btn:hover {
  background: rgba(255, 59, 48, 0.2);
  border: 1px solid rgba(255, 59, 48, 0.3);
}

.material-wrap {
  display: flex;
  flex-direction: row;
  width: 95%;
  justify-content: center;
  align-items: center;
  gap: 0.5625rem;
}

.material-name {
  display: flex;
  width: 100%;
  padding: 0.62444rem 0rem;
  align-items: center;
  gap: 0.31219rem;
  color: #fff;
  flex: 1 0 0;
  text-align: left;
  font-size: 0.8975rem;
  font-style: normal;
  font-weight: 400;
  line-height: 111%;
  letter-spacing: -0.00688rem;
}

.material-name-wrap {
  width: 12.25rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: auto;
  margin-right: auto;
}
.material-name-wrap::-webkit-scrollbar {
  display: none;
}

.material-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  justify-content: flex-start; /* Change to flex-start to align content to the top */
  gap: 1rem;
  max-height: 11.935rem; /* Set a maximum height for scrolling */
  overflow-y: auto;
  scroll-padding-top: 0.625rem;
}
.material-list::-webkit-scrollbar {
  display: none;
}

.lockscreen-wrap {
  display: flex;
  height: 100svh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.38394rem;
  background: #E8E8E8;
  box-shadow: -2px 6px 13px 0px rgba(0, 0, 0, 0.1), -9px 22px 24px 0px rgba(0, 0, 0, 0.09), -20px 50px 33px 0px rgba(0, 0, 0, 0.05), -36px 90px 39px 0px rgba(0, 0, 0, 0.01), -57px 140px 42px 0px rgba(0, 0, 0, 0);
  -webkit-backdrop-filter: blur(5.8354492188px);
          backdrop-filter: blur(5.8354492188px);
}

.lockscreen {
  display: flex;
  width: 25.375rem;
  height: 70%;
  padding: 2.62369rem 2.7695rem 1.60338rem 2.7695rem;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  border-radius: 1.09319rem;
  background: #F0F0F0;
  box-shadow: 0px 16px 34px 0px rgba(0, 0, 0, 0.05), 0px 63px 63px 0px rgba(0, 0, 0, 0.04), 0px 141px 85px 0px rgba(0, 0, 0, 0.03), 0px 251px 100px 0px rgba(0, 0, 0, 0.01), 0px 392px 110px 0px rgba(0, 0, 0, 0);
}

.lockscreen-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
}

.lockscreen-header-title {
  color: rgba(0, 0, 0, 0.85);
  text-align: center;
  font-size: 1.4875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 116.5%; /* 1.38344rem */
  letter-spacing: -0.0475rem;
}

.lockscreen-preview-wrap {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.625rem;
}

.lockscreen-preview {
  display: flex;
  padding: 0.125rem 0.3125rem;
  justify-content: center;
  align-items: center;
  gap: 0.18575rem;
  border-radius: 0.35rem;
  border: 0.595px solid rgba(10, 132, 255, 0.3);
  background: rgba(10, 132, 255, 0.07);
  color: rgb(10, 132, 255);
  font-size: 0.625rem;
}

.signup-txt {
  width: 18.14738rem;
  color: rgba(0, 0, 0, 0.85);
  text-align: center;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: 116.5%; /* 1.7475rem */
  letter-spacing: -0.06rem;
  background-color: aqua;
}

.signup-div-wrap {
  display: flex;
  width: 20.55244rem;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 1.5625rem;
}

.signup-div {
  display: flex;
  width: 14.375rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.375rem;
}

.signup-div-elements {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  align-self: stretch;
}

label {
  color: #000;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 111%; /* 0.90188rem */
  letter-spacing: -0.0325rem;
}

input {
  display: flex;
  padding: 0.72813rem 0.58306rem;
  align-items: center;
  gap: 0.36406rem;
  align-self: stretch;
  border-radius: 0.50969rem;
  border: 0.43px solid rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.07);
}

.signin-link-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 0.625rem;
}

.signin-link-txt {
  color: rgba(0, 0, 0, 0.85);
  text-align: center;
  font-family: Inter;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: 111%; /* 0.8325rem */
  letter-spacing: -0.03rem;
}

.signin-link {
  color: #0A84FF;
  text-align: center;
  font-family: Inter;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: 111%; /* 0.8325rem */
  letter-spacing: -0.03rem;
  text-decoration: none;
}
.signin-link:hover {
  text-decoration: underline;
}

.signup-btn {
  display: flex;
  width: 18.8125rem;
  padding: 0.72813rem 0.91019rem;
  justify-content: center;
  align-items: center;
  gap: 0.36406rem;
  border-radius: 0.5rem;
  border: 1.166px solid rgba(0, 0, 0, 0);
  background: rgba(181, 181, 181, 0.4);
  outline: none;
}

body {
  margin: 0;
  padding: 0;
  background: #000000;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Segoe UI", Helvetica, Helvatica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #fff;
  position: relative;
}
body::-webkit-scrollbar {
  display: none;
}

.section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100svh;
}

h1 {
  letter-spacing: -0.1725rem;
  text-align: center;
  font-family: Inter;
  font-size: 0.6125rem;
  font-size: 3.375rem;
  color: rgba(0, 0, 0, 0.85);
  font-style: normal;
  font-weight: 600;
  line-height: 111%;
  margin-block: 0;
  margin-bottom: 2.5172rem;
  padding: 1rem 1rem;
  width: 80%;
}

.file-input {
  display: none;
}

.control {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  position: absolute;
  bottom: 2rem;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10;
}

.dynamic-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.feedback-wrap {
  display: none;
}

/* Media Queries */
/* Small screens (up to 768px) */
@media screen and (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }
}
/* Medium screens (768px to 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  body {
    font-size: 14px;
  }
}
/* Large screens (1025px and above) */
@media screen and (min-width: 1025px) {
  body {
    font-size: 18px;
  }
}/*# sourceMappingURL=main.css.map */