@charset "UTF-8";
:root {
  --secondary: #ffad23;
  --white: #ffffff;
  --black: #ffffff;
}

@font-face {
  font-family: "InstrumentSans";
  src: url("/quantum-v2.4.1-202409120001/assets/fonts/InstrumentSans/fonts/ttf/InstrumentSans-Bold.ttf") format("ttf");
  font-weight: 700;
  font-style: normal;
  line-height: 18px;
}
@font-face {
  font-family: "InstrumentSans";
  src: url("/quantum-v2.4.1-202409120001/assets/fonts/InstrumentSans/fonts/ttf/InstrumentSans-BoldItalic.ttf") format("ttf");
  font-weight: 700;
  font-style: italic;
  line-height: 18px;
}
@font-face {
  font-family: "InstrumentSans";
  src: url("/quantum-v2.4.1-202409120001/assets/fonts/InstrumentSans/fonts/ttf/InstrumentSans-SemiBold.ttf") format("ttf");
  font-weight: 600;
  font-style: normal;
  line-height: 18px;
}
@font-face {
  font-family: "InstrumentSans";
  src: url("/quantum-v2.4.1-202409120001/assets/fonts/InstrumentSans/fonts/ttf/InstrumentSans-SemiBoldItalic.ttf") format("ttf");
  font-weight: 600;
  font-style: italic;
  line-height: 18px;
}
@font-face {
  font-family: "InstrumentSans";
  src: url("/quantum-v2.4.1-202409120001/assets/fonts/InstrumentSans/fonts/ttf/InstrumentSans-Medium.ttf") format("ttf");
  font-weight: 500;
  font-style: normal;
  line-height: 18px;
}
@font-face {
  font-family: "InstrumentSans";
  src: url("/quantum-v2.4.1-202409120001/assets/fonts/InstrumentSans/fonts/ttf/InstrumentSans-MediumItalic.ttf") format("ttf");
  font-weight: 500;
  font-style: italic;
  line-height: 18px;
}
@font-face {
  font-family: "InstrumentSans";
  src: url("/quantum-v2.4.1-202409120001/assets/fonts/InstrumentSans/fonts/ttf/InstrumentSans-Regular.ttf") format("ttf");
  font-weight: 400;
  font-style: normal;
  line-height: 18px;
}
@font-face {
  font-family: "InstrumentSans";
  src: url("/quantum-v2.4.1-202409120001/assets/fonts/InstrumentSans/fonts/ttf/InstrumentSans-Italic.ttf") format("ttf");
  font-weight: 400;
  font-style: italic;
  line-height: 18px;
}
.text-xs {
  font-family: "InstrumentSans", sans-serif;
  font-size: 0.75rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 400;
  color: var(--qn-neutral-800);
}

.text-xs-m {
  font-family: "InstrumentSans", sans-serif;
  font-size: 0.75rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 500;
  color: var(--qn-neutral-800);
}

.text-xs-sb {
  font-family: "InstrumentSans", sans-serif;
  font-size: 0.75rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 600;
  color: var(--qn-neutral-800);
}

.text-xs-b {
  font-family: "InstrumentSans", sans-serif;
  font-size: 0.75rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 700;
  color: var(--qn-neutral-800);
}

.text-sm {
  font-family: "InstrumentSans", sans-serif;
  font-size: 0.8rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 400;
  color: var(--qn-neutral-800);
}

.text-sm-italic {
  font-family: "InstrumentSans", sans-serif;
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.5;
  font-weight: 400;
  color: var(--qn-neutral-800);
}

.text-sm-m {
  font-family: "InstrumentSans", sans-serif;
  font-size: 0.8rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 500;
  color: var(--qn-neutral-800);
}

.text-sm-sb {
  font-family: "InstrumentSans", sans-serif;
  font-size: 0.8rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 600;
  color: var(--qn-neutral-800);
}

.text-sm-b {
  font-family: "InstrumentSans", sans-serif;
  font-size: 0.8rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 700;
  color: var(--qn-neutral-800);
}

.text-md {
  font-family: "InstrumentSans", sans-serif;
  font-size: 1rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 400;
  color: var(--qn-neutral-800);
}

.text-md-italic {
  font-family: "InstrumentSans", sans-serif;
  font-size: 1rem;
  font-style: italic;
  line-height: 1.5;
  font-weight: 400;
  color: var(--qn-neutral-800);
}

.text-md-m {
  font-family: "InstrumentSans", sans-serif;
  font-size: 1rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 500;
  color: var(--qn-neutral-800);
}

.text-md-sb {
  font-family: "InstrumentSans", sans-serif;
  font-size: 1rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 600;
  color: var(--qn-neutral-800);
}

.text-md-b {
  font-family: "InstrumentSans", sans-serif;
  font-size: 1rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 700;
  color: var(--qn-neutral-800);
}

.text-lg {
  font-family: "InstrumentSans", sans-serif;
  font-size: 1.125rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 400;
  color: var(--qn-neutral-800);
}

.text-lg-m {
  font-family: "InstrumentSans", sans-serif;
  font-size: 1.125rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 500;
  color: var(--qn-neutral-800);
}

.text-lg-sb {
  font-family: "InstrumentSans", sans-serif;
  font-size: 1.125rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 600;
  color: var(--qn-neutral-800);
}

.text-lg-b {
  font-family: "InstrumentSans", sans-serif;
  font-size: 1.125rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 700;
  color: var(--qn-neutral-800);
}

.text-xl {
  font-family: "InstrumentSans", sans-serif;
  font-size: 1.25rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 400;
  color: var(--qn-neutral-800);
}

.text-xl-m {
  font-family: "InstrumentSans", sans-serif;
  font-size: 1.25rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 500;
  color: var(--qn-neutral-800);
}

.text-xl-sb {
  font-family: "InstrumentSans", sans-serif;
  font-size: 1.25rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 600;
  color: var(--qn-neutral-800);
}

.text-xl-b {
  font-family: "InstrumentSans", sans-serif;
  font-size: 1.25rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 700;
  color: var(--qn-neutral-800);
}

.text-truncated {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.apps-container {
  width: 100vw;
  height: 100vh;
  margin-top: 70px;
  box-sizing: border-box;
  background-color: white;
}

.apps-container_with-navbar {
  position: relative;
  min-height: calc(100vh - 4px);
  padding-top: 60px;
  margin-top: 0;
  background-color: white;
}

.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.apps-bottom-container {
  position: fixed;
  width: 100%;
  height: fit-content;
  bottom: 0;
  left: 0;
  color: #fff;
}

.bg-white {
  background-color: white;
}

.full-width {
  width: 100%;
}

.fit-content-width {
  width: fit-content;
}

.auto-width {
  width: auto;
}

.apps-loader {
  position: fixed; /* agar loader berada di atas seluruh halaman */
  top: 0; /* atur posisi di paling atas */
  left: 0; /* atur posisi di sisi kiri */
  width: 100vw; /* memenuhi lebar seluruh viewport */
  height: 100vh; /* memenuhi tinggi seluruh viewport */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8); /* semi-transparent background untuk menutupi form */
  z-index: 100000; /* pastikan loader berada di atas elemen lainnya */
}

.float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: var(--secondary);
  color: #fff;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
}

.my-float {
  margin-top: 22px;
}

.float-bottom-right {
  position: fixed;
  width: fit-content;
  height: fit-content;
  bottom: 40px;
  right: 40px;
  color: #fff;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
}

.ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* start showing ellipsis when 3rd line is reached */
  white-space: pre-wrap; /* let the text wrap preserving spaces */
}

.pd-16 {
  padding: 16px;
}

.pd-24 {
  padding: 24px;
}

.pd-32 {
  padding: 32px;
}

.pd-vertical-16 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.pd-vertical-14 {
  padding-top: 14px;
  padding-bottom: 14px;
}

.pd-vertical-12 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.pd-vertical-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.pd-vertical-8 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.pd-vertical-4 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.pd-horizontal-16 {
  padding-left: 16px;
  padding-right: 16px;
}

.pd-horizontal-24 {
  padding-left: 24px;
  padding-right: 24px;
}

.pd-top-16 {
  padding-top: 16px;
}

.pd-bottom-100 {
  padding-bottom: 100px;
}

.mr-top-4 {
  margin-top: 4px;
}

.mr-top-8 {
  margin-top: 8px;
}

.mr-top-16 {
  margin-top: 16px;
}

.mr-top-100 {
  margin-top: 100px;
}

.mr-vertical-12 {
  margin-top: 12px;
  margin-bottom: 12px;
}

.mr-vertical-8 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.mr-horizontal-10 {
  margin-left: 10px;
  margin-right: 10px;
}

.mr-horizontal-16 {
  margin-left: 16px;
  margin-right: 16px;
}

.mr-left-16 {
  margin-left: 16px;
}

.mr-right-16 {
  margin-right: 16px;
}

.mr-bottom-16 {
  margin-bottom: 16px;
}

.mr-bottom-8 {
  margin-bottom: 8px;
}

.mr-bottom-24 {
  margin-bottom: 24px;
}

.mr-bottom-34 {
  margin-bottom: 34px;
}

.mr-bottom-100 {
  margin-bottom: 100px;
}

.mr-left-auto {
  margin-left: auto;
}

.mr-right-auto {
  margin-left: auto;
}

.mr-horizontal-auto {
  margin-left: auto;
  margin-right: auto;
}

.mr-auto {
  margin: auto;
}

.text-align-center {
  text-align: center;
}

.text-align-right {
  text-align: right;
}

.center-text {
  display: flex;
  align-items: center; /* vertikal */
  justify-content: center; /* horizontal */
}

.icon-text {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* app/styles/app.css */
.pin-input {
  display: flex;
  gap: 8px; /* Jarak antar input */
  justify-content: center;
  margin-top: 20px;
}

.pin-box {
  width: 40px; /* Lebar kotak input */
  height: 40px; /* Tinggi kotak input */
  text-align: center; /* Teks di tengah */
  font-size: 18px; /* Ukuran teks */
  border: 2px solid #ccc; /* Warna border */
  border-radius: 4px; /* Border melengkung */
  outline: none; /* Hilangkan highlight default */
  transition: border-color 0.3s ease; /* Animasi pada hover atau fokus */
}

.pin-box:focus {
  border-color: #007bff; /* Warna border saat fokus */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Efek glow */
}

.avatar {
  margin-right: 0.5rem;
}
.avatar img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}

.icon-button-32 {
  width: 32px;
  height: 32px;
}

.icon-button-24 {
  width: 24px;
  height: 24px;
}

.icon-button-16 {
  width: 16px;
  height: 16px;
}

.form-group-vertical {
  display: flex;
  flex-direction: column;
  row-gap: 6px;
}

.form-group-horizontal {
  display: flex;
  column-gap: 6px;
}

.flex-header-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.tint-red {
  color: #DC1818;
}

.not-found-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f8fafc;
  text-align: center;
  padding: 20px;
}

.not-found-content {
  max-width: 400px;
  background: white;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.not-found-content h1 {
  font-size: 4rem;
  margin-bottom: 1rem;
  color: #ef4444;
}

.not-found-content p {
  font-size: 1.2rem;
  color: #374151;
  margin-bottom: 2rem;
}

.not-found-content button {
  padding: 0.75rem 1.5rem;
  background-color: #3b82f6;
  color: white;
  font-size: 1rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.not-found-content button:hover {
  background-color: #2563eb;
}

.dropdown-button {
  display: flex;
  width: 100%;
  height: 35px;
  padding-left: 16px;
  padding-right: 16px;
  justify-content: space-between;
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  border-color: #e3e8ef;
}
.dropdown-button .text {
  height: fit-content;
  margin-top: auto;
  margin-bottom: auto;
  color: var(--qn-neutral-500);
}
.dropdown-button .text-selected {
  height: fit-content;
  margin-top: auto;
  margin-bottom: auto;
}
.dropdown-button .icon {
  width: 16px;
  height: 16px;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 16px;
}

.color-edlink-400 {
  color: var(--qn-edlink-400);
}

.view-textfield {
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  border-color: #e3e8ef;
  padding: 8px;
}

.view-textfield p {
  margin: 0;
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
  color: #4b5565;
}

.view-textfield ul,
.view-textfield ol {
  margin: 0;
  padding-left: 20px; /* atau 0 kalau mau rata kiri */
}

.view-textfield li {
  margin: 0;
  padding: 0;
}

.color-text-error {
  color: var(--qn-danger-400);
}

.edl-m-0 {
  margin: 0 !important;
}

.edl-mt-0 {
  margin-top: 0 !important;
}

.edl-mr-0 {
  margin-right: 0 !important;
}

.edl-mb-0 {
  margin-bottom: 0 !important;
}

.edl-ml-0 {
  margin-left: 0 !important;
}

.edl-mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.edl-my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.edl-p-0 {
  padding: 0 !important;
}

.edl-pt-0 {
  padding-top: 0 !important;
}

.edl-pr-0 {
  padding-right: 0 !important;
}

.edl-pb-0 {
  padding-bottom: 0 !important;
}

.edl-pl-0 {
  padding-left: 0 !important;
}

.edl-px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.edl-py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.edl-m-1 {
  margin: 0.25rem !important;
}

.edl-mt-1 {
  margin-top: 0.25rem !important;
}

.edl-mr-1 {
  margin-right: 0.25rem !important;
}

.edl-mb-1 {
  margin-bottom: 0.25rem !important;
}

.edl-ml-1 {
  margin-left: 0.25rem !important;
}

.edl-mx-1 {
  margin-left: 0.25rem !important;
  margin-right: 0.25rem !important;
}

.edl-my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.edl-p-1 {
  padding: 0.25rem !important;
}

.edl-pt-1 {
  padding-top: 0.25rem !important;
}

.edl-pr-1 {
  padding-right: 0.25rem !important;
}

.edl-pb-1 {
  padding-bottom: 0.25rem !important;
}

.edl-pl-1 {
  padding-left: 0.25rem !important;
}

.edl-px-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.edl-py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.edl-m-2 {
  margin: 0.5rem !important;
}

.edl-mt-2 {
  margin-top: 0.5rem !important;
}

.edl-mr-2 {
  margin-right: 0.5rem !important;
}

.edl-mb-2 {
  margin-bottom: 0.5rem !important;
}

.edl-ml-2 {
  margin-left: 0.5rem !important;
}

.edl-mx-2 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

.edl-my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.edl-p-2 {
  padding: 0.5rem !important;
}

.edl-pt-2 {
  padding-top: 0.5rem !important;
}

.edl-pr-2 {
  padding-right: 0.5rem !important;
}

.edl-pb-2 {
  padding-bottom: 0.5rem !important;
}

.edl-pl-2 {
  padding-left: 0.5rem !important;
}

.edl-px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.edl-py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.edl-m-3 {
  margin: 1rem !important;
}

.edl-mt-3 {
  margin-top: 1rem !important;
}

.edl-mr-3 {
  margin-right: 1rem !important;
}

.edl-mb-3 {
  margin-bottom: 1rem !important;
}

.edl-ml-3 {
  margin-left: 1rem !important;
}

.edl-mx-3 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

.edl-my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.edl-p-3 {
  padding: 1rem !important;
}

.edl-pt-3 {
  padding-top: 1rem !important;
}

.edl-pr-3 {
  padding-right: 1rem !important;
}

.edl-pb-3 {
  padding-bottom: 1rem !important;
}

.edl-pl-3 {
  padding-left: 1rem !important;
}

.edl-px-3 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.edl-py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.edl-m-4 {
  margin: 1.5rem !important;
}

.edl-mt-4 {
  margin-top: 1.5rem !important;
}

.edl-mr-4 {
  margin-right: 1.5rem !important;
}

.edl-mb-4 {
  margin-bottom: 1.5rem !important;
}

.edl-ml-4 {
  margin-left: 1.5rem !important;
}

.edl-mx-4 {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
}

.edl-my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.edl-p-4 {
  padding: 1.5rem !important;
}

.edl-pt-4 {
  padding-top: 1.5rem !important;
}

.edl-pr-4 {
  padding-right: 1.5rem !important;
}

.edl-pb-4 {
  padding-bottom: 1.5rem !important;
}

.edl-pl-4 {
  padding-left: 1.5rem !important;
}

.edl-px-4 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.edl-py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.edl-m-5 {
  margin: 3rem !important;
}

.edl-mt-5 {
  margin-top: 3rem !important;
}

.edl-mr-5 {
  margin-right: 3rem !important;
}

.edl-mb-5 {
  margin-bottom: 3rem !important;
}

.edl-ml-5 {
  margin-left: 3rem !important;
}

.edl-mx-5 {
  margin-left: 3rem !important;
  margin-right: 3rem !important;
}

.edl-my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.edl-p-5 {
  padding: 3rem !important;
}

.edl-pt-5 {
  padding-top: 3rem !important;
}

.edl-pr-5 {
  padding-right: 3rem !important;
}

.edl-pb-5 {
  padding-bottom: 3rem !important;
}

.edl-pl-5 {
  padding-left: 3rem !important;
}

.edl-px-5 {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}

.edl-py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.edl-d-none {
  display: none !important;
}

.edl-d-inline {
  display: inline !important;
}

.edl-d-inline-block {
  display: inline-block !important;
}

.edl-d-block {
  display: block !important;
}

.edl-d-flex {
  display: flex !important;
}

.edl-d-grid {
  display: grid !important;
}

.edl-fw-light {
  font-weight: 300 !important;
}

.edl-fw-regular {
  font-weight: 400 !important;
}

.edl-fw-medium {
  font-weight: 500 !important;
}

.edl-fw-semi-bold {
  font-weight: 600 !important;
}

.edl-fw-bold {
  font-weight: 700 !important;
}

.edl-fw-extra-bold {
  font-weight: 800 !important;
}

.landing_page {
  background-color: var(--qn-edlink-400);
  bottom: 0;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  position: absolute;
}

/* General slideshow styles */
.slideshow-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 800px;
  margin: auto;
  position: relative;
  padding-top: 24px;
}

.caption {
  font-weight: bold;
  font-size: 1.2em;
  padding: 10px 10px 10px 20px;
  background-color: transparent;
  color: white;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.image {
  width: 100%;
  box-sizing: border-box;
}

.slideshow-image {
  width: 100%;
  height: auto;
  display: block;
}

.prev-button, .next-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  z-index: 1;
}

.prev-button {
  left: 10px;
}

.next-button {
  right: 10px;
}

/* Styles for the indicators */
.indicators {
  text-align: center;
  margin-top: 15px;
  width: 100%;
}

.indicators span {
  cursor: pointer;
  padding: 8px;
  font-size: 32px;
  color: white;
}

.indicators .active {
  color: var(--secondary); /* Highlight the active indicator */
}

/* Mobile view: image on right, caption on left */
@media (max-width: 768px) {
  .slideshow-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .caption {
    width: 50%; /* Caption width on mobile */
    padding: 10px 10px 10px 20px;
    font-size: 1.4em;
    text-align: left;
  }
  .image {
    width: 50%; /* Image width on mobile */
  }
  .slideshow-image {
    max-height: 60vh; /* Limit image height to 40% of the viewport */
    object-fit: cover; /* Ensure the image fits within the height */
  }
  .prev-button, .next-button {
    padding: 8px;
    font-size: 0.8em;
  }
}
@media (max-width: 480px) {
  .caption {
    font-size: 1.2em;
    padding: 10px 10px 10px 20px;
  }
  .slideshow-image {
    max-height: 40vh; /* Limit image height to 40% of the viewport */
    object-fit: cover; /* Ensure the image fits within the height */
  }
  .prev-button, .next-button {
    font-size: 0.7em;
  }
  .indicators span {
    font-size: 32px;
  }
}
.landing_page .buttons_container {
  position: absolute;
  bottom: 0;
  background-color: white;
  padding: 24px 16px 24px 16px;
  border-radius: 16px 16px 0px 0px;
  width: 100%;
}

.login-container {
  padding: 16px 16px 0px 16px;
}

.reg-container {
  padding: 16px 16px 100% 16px;
}

.apps-modal {
  z-index: 1000;
}

.apps-modal-message {
  text-align: center;
  overflow-wrap: break-word; /* Ensures long words wrap */
  word-break: break-word; /* Breaks long words if necessary */
  white-space: normal; /* Allows normal wrapping */
  max-width: 100%; /* Ensures it stays inside the container */
}

.apps-modal-title {
  text-align: center;
  overflow-wrap: break-word; /* Ensures long words wrap */
  word-break: break-word; /* Breaks long words if necessary */
  white-space: normal; /* Allows normal wrapping */
  max-width: 100%; /* Ensures it stays inside the container */
}

.fullscreen-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fullscreen-modal-overlay .modal-container {
  background: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.fullscreen-modal-overlay .close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}
.fullscreen-modal-overlay .modal-header {
  padding: 16px;
  border-bottom: 1px solid #ddd;
  background: #f5f5f5;
}
.fullscreen-modal-overlay .modal-content {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}
.fullscreen-modal-overlay .modal-content-fullwidth {
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.nav-tab {
  display: flex;
  background-color: #ffffff;
}

.nav-tab__wrapper {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.nav-tab__item {
  width: 40vw !important;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.75rem !important;
  cursor: pointer;
}

.nav-tab__item.active {
  color: var(--qn-edlink-300) !important;
  border-bottom: 2px solid var(--qn-edlink-300) !important;
}

.footer-tab {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  z-index: 10;
}
.footer-tab .nav-tab-custom .nav-tab_wrapper-custom {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-tab .nav-tab-custom .nav-tab_wrapper-custom .nav-tab_item-custom {
  flex: 1;
  text-align: center;
  padding: 10px 0;
}
.footer-tab .nav-tab-custom .nav-tab_wrapper-custom .nav-tab_item-custom .centered-item .icon-container {
  display: flex;
  justify-content: center;
}
.footer-tab .nav-tab-custom .nav-tab_wrapper-custom .nav-tab_item-custom .centered-item .text-container {
  font-size: 12px;
}
.footer-tab .nav-tab-custom .nav-tab_wrapper-custom .nav-tab_item-custom.active {
  border-top: 2px solid var(--qn-edlink-300) !important;
  border-bottom: 0 !important;
}

.dropdown-container {
  display: flex;
  width: 140px;
  justify-content: flex-start;
  padding-top: 16px;
  margin: auto auto auto 16px;
}

.simple-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  width: 100%;
  background-color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adding shadow */
  margin-bottom: 1px;
  border-radius: 0;
}

.navbar-left {
  font-size: 1rem;
  font-weight: bold;
  padding-left: 1rem;
}

.navbar-right {
  display: flex;
  align-items: center;
  column-gap: 16px;
}

.icon-container {
  font-size: 1rem;
  cursor: pointer;
}

.icon-container i {
  font-size: 1rem;
}

/* app/styles/app.css */
.apps-navbar {
  position: fixed; /* Fixed position */
  top: 0; /* Stay at the top of the page */
  left: 0;
  right: 0;
  height: 60px; /* Set height for navbar */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px 10px 16px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.apps-navbar-left {
  width: 10%;
}

.apps-navbar-right {
  width: 5%;
}

.apps-navbar-title {
  width: 80%;
  font-weight: bold;
}

.apps-navbar-title p {
  color: black;
}

.apps-back-button, .apps-menu-button {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

.apps-menu-button {
  font-size: 24px;
}

.card-akademik {
  background-color: white;
  border-radius: 0;
  margin-bottom: 0;
}

.card-akademik__title {
  padding-bottom: 0;
}

.card-akademik__subtitle {
  margin-bottom: 0.5rem;
}

.card-akademik__siakad {
  margin-bottom: 0.5rem;
}

.card-akademik__siakad-type {
  background-color: #e0e0e0;
  padding: 0.25rem 0.5rem;
  border-radius: 0;
  display: flex;
  align-items: center;
}

.card-akademik__icon {
  margin-right: 0.25rem;
  width: 15px;
  height: 15px;
}

.card-akademik__not-available {
  color: #9aa4b2;
}

.card-akademik__instructors,
.card-akademik__attend,
.card-akademik__schedules {
  color: #697586;
  margin-bottom: 0.25rem;
  margin-top: 0.25rem;
}

.card-akademik__instructor-names,
.card-akademik__attend-names,
.card-akademik__schedule-dates {
  color: #697586;
}

.card-akademik__more-schedule {
  background-color: #F5F7FF;
  padding: 8px 8px 8px 22px;
  margin-bottom: 1px;
}

.card-akademik__attend-total {
  color: var(--qn-edlink-400);
}

.card-akademik__last-update {
  color: #697586;
}

.card-akademik__divider {
  margin: 0;
}

.card-pbl {
  width: fit-content;
  background-color: #FFF7E9;
  border-radius: 15px;
  padding: 0 8px 0 8px;
  color: #D18300;
}

.card-iku7 {
  width: fit-content;
  background-color: #F1F6FE;
  border-radius: 15px;
  padding: 0 8px 0 8px;
  color: #0F6AF5;
}

.card-kognitif {
  width: fit-content;
  background-color: #EEF2F6;
  border-radius: 15px;
  padding: 0 8px 0 8px;
  color: #4B5565;
}

.card-case-method {
  width: fit-content;
  background-color: #F0FDF9;
  border-radius: 15px;
  padding: 0 8px 0 8px;
  color: #0E9384;
}

.card-diskusi {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
}
.card-diskusi .avatar-custom {
  margin-right: 10px;
}
.card-diskusi .avatar-custom img {
  object-fit: contain;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--qn-neutral-300);
  padding: 1px;
}
.card-diskusi .details {
  flex: 1;
}
.card-diskusi .details .title {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  color: var(--qn-neutral-800);
}
.card-diskusi .details .subtitle {
  font-size: 14px;
  margin: 0;
  color: var(--qn-neutral-700);
}
.card-diskusi .details .timestamp {
  font-size: 12px;
  color: var(--qn-neutral-600);
}
.card-diskusi .more-option {
  display: flex;
  justify-content: flex-end;
  width: 24px;
  height: 40px;
}

.more-option-menu {
  height: fit-content;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  padding: 8px;
}

.more-option-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.more-option-menu ul li {
  padding: 2px;
}

.more-option-menu ul li a {
  text-decoration: none;
  color: #333;
  font-size: 0.8rem;
}

.more-option-menu ul li a:hover {
  background-color: #f1f1f1;
}

.quiz-content {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 15px;
}

.quiz-title {
  font-size: 15px; /* Ukuran lebih kecil */
  font-weight: bold;
  margin: 0;
}

.quiz-deadline,
.quiz-questions,
.quiz-btn,
.quiz-footer {
  font-size: 14px !important; /* Ukuran lebih kecil */
}

.quiz-questions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--qn-primary-100);
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
}

.questions-count {
  font-weight: bold;
}

.quiz-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: var(--qn-warning-400) !important;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.quiz-footer {
  text-align: center;
  margin: 10px 0 0;
  font-size: 8px; /* Ukuran lebih kecil */
}

.diskusi-footer {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
}
.diskusi-footer_with-border {
  border-top: 1px solid var(--qn-neutral-400);
}

.diskusi-footer-item {
  display: flex;
  align-items: center;
  color: #7985CB;
}

.diskusi-footer-icon {
  width: 24px;
  height: 24px;
}

.diskusi-footer-text {
  font-size: 12px; /* Ukuran lebih kecil */
  margin-left: 5px;
}

.materi-content {
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 15px;
}

.materi-title {
  font-size: 15px;
  font-weight: bold;
  margin: 0;
}

.materi-description {
  font-size: 14px;
  color: var(--qn-neutral-700);
  margin: 10px 0;
}

.materi-toggle {
  font-size: 14px;
  color: var(--qn-warning-400);
  cursor: pointer;
}

.survei-content {
  background-color: white;
  padding: 16px;
  border-radius: 5px;
}
.survei-content .survei-title {
  font-size: 15px;
  font-weight: bold;
  margin: 0;
}
.survei-content .survei-description {
  font-size: 14px;
  color: var(--qn-neutral-700);
  margin: 10px 0;
}
.survei-content .survei-options {
  margin-top: 10px;
}
.survei-content .survei-form-control {
  border-radius: 8px;
  border: 1px solid #ddd;
  display: flex;
  column-gap: 4px;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  margin-bottom: 12px;
}
.survei-content .survei-form-control .checkbox {
  display: flex;
  align-items: center;
}
.survei-content .survei-form-control-radio {
  margin-right: 10px;
}
.survei-content .survei-form-control-label-radio {
  font-size: 14px;
  color: var(--qn-neutral-700);
}
.survei-content .survei-footer {
  text-align: left;
  margin-top: 10px;
  font-size: 12px;
  color: var(--qn-neutral-700);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px;
  background-color: #fff;
  border: 1px solid #ddd;
  height: 60px;
}
.navbar-search {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar-search .navbar-form-control {
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 5px 10px;
  width: 95%;
  height: 30px;
}
.navbar-search .navbar-form-control-group {
  display: flex;
  align-items: center;
  width: 100%;
}
.navbar-search .navbar-form-control-group .navbar-form-control-input {
  flex: 1;
  padding-left: 10px;
  font-size: 14px;
  background-color: transparent;
  border: none;
}
.navbar-search .navbar-form-control-group .navbar-form-control-input:focus {
  border: none;
  transition: none;
  box-shadow: none;
}
.navbar-search .navbar-form-control-group .fa-magnifying-glass {
  font-size: 14px;
  color: #999;
}
.navbar-filter .navbar-btn {
  min-height: 0;
  height: 30px;
  font-size: 12px;
  border: 1px solid #ccc;
  font-weight: lighter;
}

.dropdown-menu {
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5rem 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  right: 0;
  width: fit-content;
}
.dropdown-menu .dropdown-item {
  display: block;
  padding: 0.5rem 1rem;
  color: #333;
  text-decoration: none;
  font-size: 1rem;
  white-space: nowrap;
}
.dropdown-menu .dropdown-item:hover {
  background-color: #f1f1f1;
}

.conf-card-discuss {
  padding: 10px;
  border: 1px solid var(--qn-neutral-300);
  border-radius: 5px;
  margin: 0 9px 15px 9px;
}

.conf-flag-zoom-waiting-discuss {
  width: 100%;
  background-color: #F5F7FF;
  text-align: center;
  padding: 8px 0;
  border-radius: 6px;
  border: 1px solid #E2E7FF;
}

.conf-type-discuss {
  margin-top: 10px;
  text-align: center;
  color: var(--qn-neutral-600);
}

.tugas-content {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 15px;
}

.tugas-title {
  font-size: 15px; /* Ukuran lebih kecil */
  font-weight: bold;
  margin: 0;
}

.tugas-deadline,
.tugas-questions,
.tugas-btn,
.tugas-footer {
  font-size: 14px !important; /* Ukuran lebih kecil */
}

.tugas-questions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--qn-primary-100);
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
}

.questions-count {
  font-weight: bold;
}

.tugas-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: var(--qn-warning-400) !important;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.tugas-footer {
  text-align: center;
  margin: 10px 0 0;
  font-size: 8px; /* Ukuran lebih kecil */
}

.info-content {
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 15px;
}

.info-title {
  font-size: 15px;
  font-weight: bold;
  margin: 0;
}

.info-description {
  font-size: 14px;
  color: var(--qn-neutral-700);
  margin: 10px 0;
}

.info-toggle {
  font-size: 14px;
  color: var(--qn-warning-400);
  cursor: pointer;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal-overlay .modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px 8px 0 0;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.modal-overlay .modal-content .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.modal-overlay .modal-content .modal-header .modal-header-left {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.modal-overlay .modal-content .modal-header .modal-header-left .filter-title {
  font-size: 15px;
  font-weight: bold;
  margin-left: 10px;
}
.modal-overlay .modal-content .modal-header .close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}
.modal-overlay .modal-content .modal-header .reset-filter {
  color: var(--qn-edlink-400);
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}
.modal-overlay .modal-content .modal-body {
  display: flex;
  flex-direction: column;
}
.modal-overlay .modal-content .modal-body .modal-form-control {
  margin-bottom: 10px;
}
.modal-overlay .modal-content .modal-body .modal-form-control .modal-checkbox {
  display: flex;
  align-items: center;
}
.modal-overlay .modal-content .modal-body .modal-form-control .modal-checkbox .modal-form-control-checkbox {
  margin-right: 10px;
}
.modal-overlay .modal-content .modal-body .modal-form-control .modal-checkbox .modal-form-control-label-checkbox {
  font-size: 14px;
  color: var(--qn-neutral-700);
}
.modal-overlay .modal-content .modal-footer {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.modal-overlay .modal-content .modal-footer .apply-btn {
  background: var(--qn-edlink-400);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
}

.event-content {
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 5px;
  font-size: 14px; /* Ukuran font umum */
}

.title {
  font-size: 15px; /* Ukuran font judul */
  font-weight: bold;
  margin-bottom: 10px; /* Jarak antara title dan deskripsi */
}

.cleanDescription {
  font-size: 14px; /* Ukuran font deskripsi */
  margin-bottom: 10px; /* Jarak antara deskripsi dan detail acara */
}

.event-details-container {
  margin: 0px 16px 24px 20px;
}

.event-details {
  display: flex;
  flex-direction: column;
  gap: 10px; /* Jarak antar detail acara */
}

.event-time,
.event-location {
  display: flex;
  align-items: center; /* Ikon berada di tengah secara vertikal */
  font-size: 14px;
}

.event-time i,
.event-location i {
  margin-right: 10px;
  font-size: 18px; /* Ukuran ikon lebih besar */
}

.event-time div,
.event-location div {
  display: flex;
  flex-direction: column;
}

.event-label {
  font-weight: bold;
  margin-bottom: 2px;
}

.event-date,
.event-place {
  font-size: 14px;
}

.video-card-content {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 16px;
}

.video-card-title {
  font-size: 15px; /* Ukuran lebih kecil */
  font-weight: bold;
  margin: 0;
  margin-bottom: 4px; /* Jarak antara judul dan teks berikutnya */
}

.video-card-questions {
  font-size: 14px !important; /* Ukuran lebih kecil */
  margin-bottom: 12px; /* Jarak antara teks dan video */
}

.video-container {
  position: relative;
}

.play-button {
  width: 40px;
  height: 40px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--qn-edlink-400);
  border-radius: 50%;
}

.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9em;
}

.diskusi-cbt-content {
  margin: 10px;
  padding: 10px;
  border-radius: 5px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--qn-neutral-300);
}

.diskusi-cbt-content-device {
  display: flex;
  column-gap: 10px;
  background-color: var(--secondary);
  border-radius: 4px;
  padding: 4px 0 4px 0;
}

.navbar-comment-container {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Menambahkan ini untuk mendistribusikan ruang */
  padding: 1rem;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 0;
}

.navbar-comment-left {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: bold;
  padding-left: 0.5rem;
  cursor: pointer;
}

.navbar-comment-left i {
  font-size: 1rem;
  margin-right: 2rem;
}

.navbar-comment-title {
  font-size: 1rem;
}

.navbar-comment-right {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Memastikan isi berada di kanan */
  padding-right: 1rem;
}

.text-editor-save-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: green; /* Warna tombol simpan */
}

.comment-input-container {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 10px 20px;
}
.comment-input-container .comment-avatar {
  margin-right: 1rem;
}
.comment-input-container .comment-avatar img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.comment-input-container .comment-input-grid {
  flex-grow: 1;
}
.comment-input-container .comment-input-grid .col-md-12 .form-control-sm-custom {
  height: 40px;
}
.comment-input-container .comment-input-grid .col-md-12 .form-control-group-custom {
  border: 1px solid var(--qn-neutral-400);
  border-radius: 20px;
  height: 35px;
  margin-top: 10px;
}
.comment-input-container .comment-input-grid .col-md-12 .clear-input-icon {
  padding-left: 4px;
}
.comment-input-container .comment-send-icon {
  margin-left: 0.8rem;
  margin-right: 0.5rem;
  font-size: 1.1rem;
  cursor: pointer;
}

.comment-bubble {
  display: flex;
  align-items: flex-start;
  margin-top: 1rem;
  padding: 5px 20px;
  max-width: 500px;
}
.comment-bubble .comment-avatar {
  margin-right: 0.5rem;
}
.comment-bubble .comment-avatar img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}
.comment-bubble .comment-content-container {
  display: flex;
  flex-grow: 1;
  align-items: center;
  background-color: var(--qn-neutral-200);
  border-radius: 0.5rem;
  padding: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.comment-bubble .comment-content-container .comment-content {
  flex-grow: 1;
}
.comment-bubble .comment-content-container .comment-content .comment-text {
  margin-top: 0.25rem;
}
.comment-bubble .comment-content-container .comment-options {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  min-width: 90px;
}
.comment-bubble .comment-content-container .comment-options i {
  font-size: 1rem;
  color: var(--qn-neutral-600);
  margin-bottom: 0.5rem;
}
.comment-bubble .comment-content-container .comment-time {
  font-size: 0.75rem;
  color: var(--qn-neutral-500);
  text-align: end;
}

.comment-control {
  padding: 8px 0 4px 70px;
  display: flex;
  column-gap: 16px;
}
.comment-control .comment-btn-edit {
  color: var(--qn-primary-400);
}
.comment-control .comment-btn-delete {
  color: var(--qn-danger-400);
}

.card-session__parent {
  width: 100%;
  position: relative;
  display: block;
}
.card-session__parent .option-container {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  width: fit-content;
  padding: 16px;
  display: flex;
  justify-content: flex-end; /* ⬅️ membuat isi nempel ke kanan */
  align-items: flex-start;
  flex-direction: column;
}

.card-session {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  border: 1px solid #ddd;
  border-radius: 0;
  padding: 16px;
  gap: 16px;
}
.card-session .card-session__left {
  flex: 1;
  min-width: 0;
}
.card-session .card-session__left .card-session__link {
  display: block;
  flex: 1;
  min-width: 0;
}
.card-session .card-session__left .card-session__header {
  display: none;
}
.card-session .card-session__left .card-session__header:has(.badge) {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  justify-content: start;
  align-items: center;
}
.card-session .card-session__left .card-session__header .badge {
  --qn-badge-padding-size: 0.5rem !important;
  --qn-badge-height-size: 1.5rem !important;
  --qn-badge-font-size: 0.75rem !important;
  --qn-badge-line-height-size: 1.25rem !important;
  border-radius: 0.325rem !important;
}
.card-session .card-session__left .card-session__header .badge_solid {
  --qn-badge-background: var(--qn-edlink-400) !important;
  --qn-badge-border-color: var(--qn-edlink-400) !important;
  --qn-badge-color: var(--qn-edlink-100) !important;
  --qn-badge-dot-color: var(--qn-edlink-100) !important;
}
.card-session .card-session__left .card-session__header .badge_outline {
  --qn-badge-background: var(--qn-edlink-100) !important;
  --qn-badge-border-color: var(--qn-edlink-100) !important;
  --qn-badge-color: var(--qn-edlink-400) !important;
  --qn-badge-dot-color: var(--qn-edlink-400) !important;
}
.card-session .card-session__left .card-session__header .badge_your_session {
  --qn-badge-background: var(--qn-primary-100) !important;
  --qn-badge-border-color: var(--qn-primary-100) !important;
  --qn-badge-color: var(--qn-primary-400) !important;
  --qn-badge-dot-color: var(--qn-primary-400) !important;
}
.card-session .card-session__left .card-session__body {
  margin-top: 8px;
}
.card-session .card-session__left .card-session__body .card-session__title {
  font-size: 1em;
  font-weight: bold;
  margin-bottom: 4px;
  word-break: break-word;
}
.card-session .card-session__left .card-session__body .card-session__date {
  color: #7985cb;
  font-size: 0.75em;
}
.card-session .card-session__left .card-session__body .card-session__room,
.card-session .card-session__left .card-session__body .card-session__materials {
  margin-top: 8px;
  font-size: 0.85em;
}
.card-session .card-session__left .card-session__body .card-session__room {
  margin-top: 16px;
}
.card-session .card-session__left .card-session__body .card-session__materials i {
  margin-right: 4px;
}
.card-session .card-session__right {
  flex-shrink: 0;
  width: fit-content;
  display: flex;
  align-items: center;
}
.card-session .card-session__right .btn-start-section {
  width: 40px;
  height: 40px;
  padding: 8px;
  border-width: 1px;
  border-style: solid;
  border-radius: 8px;
  border-color: var(--qn-edlink-400);
  background-color: var(--qn-edlink-400);
}
.card-session .card-session__right .btn-end-section {
  width: 40px;
  height: 40px;
  padding: 8px;
  border-width: 1px;
  border-style: solid;
  border-radius: 8px;
  border-color: var(--qn-edlink-400);
  background-color: var(--qn-white);
}

/* --- Layout umum --- */
.section-form {
  background-color: white;
  padding: 16px;
  padding-bottom: 80px;
  display: grid;
  gap: 10px;
}

/* Counter di kanan (untuk Session Topic) */
.section-form .form-group .char-counter {
  text-align: right;
  font-size: 12px;
  color: #6b7280; /* gray-500 */
  margin-top: 4px;
}

/* --- Time range --- */
.section-form .time-range {
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-form .time-field {
  position: relative;
}

.section-form .time-input {
  /* biarkan mengikuti style input default halamanmu, hanya ukuran */
  width: 160px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #e5e7eb; /* gray-200, match screenshot */
  background: #fff;
}

.section-form .time-input:focus {
  outline: none;
  border-color: #c7d2fe; /* indigo-200 */
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.section-form .time-sep {
  color: #1e3a8a; /* indigo-900 */
  font-weight: 700;
}

.section-form .placeholder {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #9ca3af; /* gray-400 */
  font-size: 14px;
}

/* --- Type: radio card --- */
.section-form .type-group {
  display: grid;
  gap: 10px;
}

.section-form .type-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid #e3e8ef; /* blue-100 */
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.section-form .type-card:hover {
  border-color: #93c5fd; /* blue-300 */
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.08);
}

.section-form .type-radio {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  border: 1px solid #e3e8ef; /* blue-500 */
  display: inline-grid;
  place-content: center;
  background: #fff;
}

.section-form .type-radio:checked {
  border: 1px solid #3b82f6;
}

.section-form .type-radio:checked::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: #3b82f6; /* blue-500 */
}

.section-form .type-card:has(.type-radio:checked) {
  border-color: #60a5fa; /* blue-400 */
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  font-weight: 500;
}

.section-form .type-label {
  font-size: 0.75rem;
  color: #111827;
}

.btn-end-section {
  height: 40px;
  background-color: var(--white);
  border-radius: 6px;
  border-color: var(--qn-edlink-400);
  border-width: 1px;
  border-style: solid;
  color: var(--qn-edlink-400);
}

.btn-start-section {
  height: 40px;
  background-color: var(--qn-edlink-400);
  border-radius: 6px;
  color: var(--white);
}

.banner-section {
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
}
.banner-section .session-label {
  display: flex;
  align-items: center;
  background-color: var(--qn-warning-200);
  color: var(--qn-warning-400);
  border: 1px solid var(--qn-warning-400);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  width: fit-content;
}
.banner-section h2 {
  font-size: 15px;
  font-weight: 500;
  margin: 10px 0 20px 0;
}
.banner-section .objective p,
.banner-section .datetime p {
  font-size: 14px;
  margin: 2px 0;
}
.banner-section .objective p.label,
.banner-section .datetime p.label {
  font-weight: 500;
  margin: 5px 0 2px 0;
}
.banner-section .objective p.section-spacing,
.banner-section .datetime p.section-spacing {
  margin: 10px 0 2px 0;
}

/* List angka */
p.html-preview ol {
  padding-left: 1.5rem; /* indent */
  margin: 0.5rem 0;
  list-style-type: decimal;
}

/* List bullet */
p.html-preview ul {
  padding-left: 1.5rem;
  margin: 0.5rem 0;
  list-style-type: disc;
}

/* Item list */
p.html-preview li {
  margin-bottom: 0.25rem;
}

/* Tabel */
p.html-preview table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.75rem 0;
}

p.html-preview th,
p.html-preview td {
  border: 1px solid #ccc;
  padding: 0.5rem;
  text-align: left;
}

p.html-preview th {
  background-color: #f5f5f5;
}

/* Link */
p.html-preview a {
  color: #007bff;
  text-decoration: underline;
}

.learning-material-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  background: #ffffff;
  width: 100%;
  border-radius: 0;
}

.learning-material-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.learning-material-type {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 8px;
}

.materi {
  border: 1px solid var(--qn-violet-400);
  background-color: var(--qn-violet-100);
  color: var(--qn-violet-400);
  width: fit-content;
}

.conference {
  border: 1px solid var(--qn-primary-400);
  background-color: var(--qn-primary-100);
  color: var(--qn-primary-400);
  width: fit-content;
}

.tugas {
  border: 1px solid var(--qn-helper-400);
  background-color: var(--qn-helper-100);
  color: var(--qn-helper-400);
  width: fit-content;
}

.quiz {
  border: 1px solid var(--qn-edlink-400);
  background-color: var(--qn-edlink-100);
  color: var(--qn-edlink-400);
  width: fit-content;
}

.video-interaktif {
  border: 1px solid #D444F1;
  background-color: #FDF4FF;
  color: #D444F1;
  width: fit-content;
}

.learning-material-title {
  font-size: 14px;
  font-weight: 500;
  padding-top: 8px;
}

.learning-material-date {
  font-size: 13px;
  font-weight: 300;
  color: #888;
}

.learning-material-button {
  background: none;
  border: none;
  font-size: 16px;
  color: #888;
}

.button-tambah-materi {
  background-color: var(--qn-warning-400);
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 16px;
  right: 20px;
  z-index: 1000;
}

.modal-section-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 1000;
}

.modal-section-content {
  background: #ffffff;
  width: 100%;
  max-width: 400px;
  padding: 16px;
  box-shadow: 0px -4px 15px rgba(0, 0, 0, 0.25);
  max-height: 60%; /* Membatasi tinggi maksimal modal */
  overflow-y: auto; /* Menambahkan scroll jika konten terlalu tinggi */
}

.modal-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  margin-left: 10px;
}

.modal-section-close-button {
  background: none;
  border: none;
  font-size: 24px;
  color: #7985cb;
}

.modal-section-body {
  padding: 16px 0;
}

.modal-section-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.modal-section-item img {
  margin-right: 8px;
  width: 40px; /* Mengurangi lebar gambar */
  height: 40px; /* Mengurangi tinggi gambar */
}

.modal-section-text {
  margin-left: 20px;
  font-size: 14px;
}

.tab-presensi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  font-size: 16px;
  background-color: #ffffff !important; /* Set background to white */
  color: #000; /* Text color */
  border-bottom: 1px solid #ccc; /* Add bottom border */
  max-height: 60px;
}

.tab-presensi-text {
  font-weight: bold;
}

.tab-presensi-icon {
  color: #ccc; /* Icon color */
  font-size: 20px;
}

.banner-student-wrapper {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 8px;
}

.banner-student-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

.banner-student-info {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.banner-student-icon {
  margin-right: 4px;
  font-size: 14px;
  color: #666;
}

.banner-student-date,
.banner-student-session {
  font-size: 12px;
  color: #666;
}

.banner-student-content {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
}

.banner-student-topic-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

.banner-student-topic {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--qn-black);
  word-wrap: break-word;
}

.section-category-wrapper {
  margin-bottom: 8px;
}
.section-category-wrapper--conference {
  margin-top: 8px;
}

.section-category-header {
  padding: 20px;
  background-color: #fff;
  border-radius: 0;
  border-bottom: 1px solid #e0e0e0;
}

.section-category-title {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #000;
  text-align: left;
}

.section-category-content {
  padding: 20px;
  background-color: #fff;
  border-radius: 0;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-category-text {
  margin: 0;
  font-size: 12px;
  color: var(--qn-neutral-500);
  text-align: center;
}

.learning-materials-container {
  background-color: #ffffff;
}

.learning-materials-item {
  min-height: 65px;
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.learning-materials-icon {
  margin-right: 16px;
}

.learning-materials-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 4px;
}

.learning-materials-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--qn-black);
}

.learning-materials-subtitle {
  font-size: 12px;
  color: var(--qn-neutral-600);
}

.navbar-form-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 0;
}

.navbar-form-left {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}
.navbar-form-left i {
  font-size: 16px;
  margin-right: 1.5rem;
}

.navbar-form-title {
  font-size: 16px;
  margin-left: 0.5rem;
}

.navbar-form-right i {
  font-size: 16px;
  cursor: pointer;
}

.capitalize {
  text-transform: capitalize;
}

.breadcrumb-container {
  background-color: #ffffff;
  width: 100%;
  padding: 8px;
}

.breadcrumb-materi {
  font-family: Arial, sans-serif;
  white-space: nowrap;
  margin-left: 8px; /* Margin kiri */
  margin-top: 8px; /* Margin atas */
  display: flex;
  align-items: center;
}

.breadcrumb-step {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  color: var(--qn-edlink-400);
}

.breadcrumb-number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 22px; /* Ukuran sedikit lebih kecil */
  height: 22px; /* Ukuran sedikit lebih kecil */
  text-align: center;
  border: 2px solid;
  border-radius: 50%;
  font-size: 14px; /* Font sedikit lebih kecil */
  font-weight: bold;
  margin-right: 6px; /* Lebih kecil */
  padding: 2px;
}

.breadcrumb-label {
  font-size: 14px; /* Font sedikit lebih kecil */
  vertical-align: middle;
}

.breadcrumb-divider {
  margin: 0 8px; /* Spasi antar langkah */
  font-size: 16px;
  color: var(--qn-edlink-400);
  margin-bottom: 12px;
}

/* Warna untuk elemen aktif */
.breadcrumb-active .breadcrumb-number,
.breadcrumb-active .breadcrumb-label {
  color: var(--qn-edlink-400);
  border-color: var(--qn-edlink-400);
}

/* Warna untuk elemen yang tidak aktif */
.breadcrumb-inactive .breadcrumb-number,
.breadcrumb-inactive .breadcrumb-label {
  opacity: 0.4; /* Efek disabled */
  border-color: var(--qn-edlink-400);
}

.banner-tambah {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: Arial, sans-serif;
  background-color: #ffffff;
  padding: 20px;
  width: 100%;
}
.banner-tambah .dibagikan-info {
  display: flex;
  flex-direction: column;
  width: 70%;
}
.banner-tambah .dibagikan-info .dibagikan-header {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 4px;
}
.banner-tambah .dibagikan-info .dibagikan-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.banner-tambah .dibagikan-info .dibagikan-content .dibagikan-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333333;
}
.banner-tambah .dibagikan-info .dibagikan-content .dibagikan-item i,
.banner-tambah .dibagikan-info .dibagikan-content .dibagikan-item Icon::ruangkelasicon {
  margin-right: 8px;
}
.banner-tambah .dibagikan-info .dibagikan-content .dibagikan-text {
  margin-left: 8px;
}
.banner-tambah .dibagikan-button {
  align-self: center;
}
.banner-tambah .dibagikan-button .banner-tambah-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid var(--qn-edlink-400) !important;
  color: var(--qn-edlink-400) !important;
  background-color: transparent;
  cursor: pointer;
  margin-top: 8px !important;
}
.banner-tambah .dibagikan-button .banner-tambah-button i {
  margin-right: 4px;
}

.form-tambah-materi {
  padding: 20px 20px 90px 20px;
  width: 100%;
  margin: 0 auto;
  background-color: #ffffff;
}
.form-tambah-materi-group {
  margin-bottom: 15px;
  display: block !important;
}
.form-tambah-materi-group .form-tambah-materi-label {
  padding-bottom: 4px;
  color: #364152;
  font-size: 0.75rem;
  line-height: 1.25rem;
  font-weight: 500;
}
.form-tambah-materi-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}
.form-tambah-materi-input:focus {
  border-color: var(--qn-primary-400);
  outline: none;
}
.form-tambah-materi-char-count {
  text-align: right;
  font-size: 0.875rem;
  color: #888;
  margin-top: 5px;
}
.form-tambah-materi-file-upload {
  margin-top: 15px;
  display: inline-block;
  cursor: pointer;
  color: #364152;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}
.form-tambah-materi-icon {
  display: inline-block;
  transform: rotate(-45deg);
  margin-right: 8px;
}
.form-tambah-materi-footer {
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}
.form-tambah-materi-footer .form-tambah-materi-button {
  background-color: var(--qn-edlink-400) !important;
  width: 95%;
  margin: auto;
  display: block;
  color: #fff;
}
.form-tambah-materi-footer .form-tambah-materi-button[disabled] {
  opacity: 0.4;
}

.lampiran-box {
  border: 1px solid var(--qn-neutral-200);
  border-radius: 5px;
  padding: 8px;
  margin-top: 8px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
}
.lampiran-box .lampiran-icon {
  width: 20px;
  margin-right: 5px;
}
.lampiran-box .lampiran-text {
  flex-grow: 1;
  overflow: hidden;
}
.lampiran-box .lampiran-text .lampiran-file-name {
  font-size: 12px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lampiran-box .lampiran-text .lampiran-file-size {
  font-size: 12px;
  color: #888;
  margin: 0;
}
.lampiran-box .lampiran-delete-btn {
  margin-left: 15px;
  padding: 5px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.lampiran-box .lampiran-delete-btn i {
  font-size: 16px;
  color: #888;
}

.bagikan-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 4px;
}
.bagikan-container .bagikan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.bagikan-container .bagikan-header .bagikan-header-left {
  display: flex;
  align-items: center;
}
.bagikan-container .bagikan-header .bagikan-header-left .bagikan-icon {
  font-size: 20px;
  color: #364152 !important;
  margin-right: 10px;
}
.bagikan-container .bagikan-header .bagikan-header-left .bagikan-text {
  color: #364152;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}
.bagikan-container .bagikan-header .bagikan-switch {
  margin-left: auto;
}
.bagikan-container .bagikan-header .bagikan-switch .bagikan-switch-transform {
  transform: scale(0.8);
}
.bagikan-container .bagikan-header .bagikan-switch .bagikan-switch-label {
  cursor: pointer;
}
.bagikan-container .bagikan-datetime-container {
  margin-top: 10px;
  display: flex;
  align-items: center;
  width: 100%;
}
.bagikan-container .bagikan-datetime-container .bagikan-datetime-input {
  width: 200px;
  padding: 10px;
  box-sizing: border-box;
  border: none;
  background: transparent;
  color: #000;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}
.bagikan-container .bagikan-datetime-container .bagikan-datetime-icon {
  font-size: 14px;
  margin-left: 5px;
  margin-top: 2px;
  cursor: pointer;
}

.bagikan-nanti-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #ffffff;
  border-radius: 4px;
  margin-top: 8px;
}
.bagikan-nanti-container .bagikan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.bagikan-nanti-container .bagikan-header .bagikan-header-left {
  display: flex;
  align-items: center;
}
.bagikan-nanti-container .bagikan-header .bagikan-header-left .bagikan-icon {
  margin-right: 8px;
}
.bagikan-nanti-container .bagikan-header .bagikan-header-left .bagikan-text {
  color: #364152;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}
.bagikan-nanti-container .bagikan-header .bagikan-switch {
  margin-left: auto;
}
.bagikan-nanti-container .bagikan-header .bagikan-switch .bagikan-switch-transform {
  transform: scale(0.8);
}
.bagikan-nanti-container .bagikan-header .bagikan-switch .bagikan-switch-label {
  cursor: pointer;
}
.bagikan-nanti-container .bagikan-datetime-container {
  margin-top: 10px;
  position: relative; /* Ensures contained positioning for child elements */
  display: inline-block; /* Keeps it compact around the content */
}
.bagikan-nanti-container .bagikan-datetime-container .bagikan-datetime-input {
  position: absolute !important; /* Position the input relative to the container */
  margin-top: 20px;
  left: 0;
  z-index: 1000; /* Ensure it appears above other elements */
  background-color: white; /* Optional: Ensure background is visible */
  padding: 0px;
  font-size: 0.01rem;
}
.bagikan-nanti-container .bagikan-datetime-container .bagikan-datetime-input:focus {
  outline: none; /* Removes the default browser outline */
  border: 0px solid #4caf50; /* Green border */
  background-color: white; /* Light background */
}
.bagikan-nanti-container .bagikan-datetime-container .bagikan-datetime-icon {
  font-size: 14px;
  margin-left: 5px;
  margin-top: 2px;
  cursor: pointer;
}

.form-button-submit {
  background-color: var(--qn-edlink-400) !important;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  font-size: 16px !important;
}
.form-button-submit[disabled] {
  opacity: 0.4;
}

.media-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.media-list .media-item {
  width: 45%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0 0 0;
}
.media-list .media-item .media-checkbox-label {
  position: relative;
  width: 100%;
  cursor: pointer;
}
.media-list .media-item .media-content {
  width: 100%;
  position: relative;
}
.media-list .media-item .media-image {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
  margin-bottom: 10px;
  transition: filter 0.3s ease;
}
.media-list .media-item .checkmark-overlay {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.media-list .media-item .checkmark {
  width: 40px;
  height: 40px;
}
.media-list .media-item .media-checkbox:checked + .media-checkbox-label .media-content .media-image {
  filter: brightness(0.4);
}
.media-list .media-item .media-checkbox:checked + .media-checkbox-label .media-content .checkmark-overlay {
  display: block;
}
.media-list .media-item .media-details {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.media-list .media-item .media-details .media-icon {
  width: 30px;
  height: 30px;
}
.media-list .media-item .media-details .media-name {
  font-size: 12px;
  word-wrap: break-word;
  text-align: left;
  flex: 1;
}

.attachment-button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 20px !important;
  background-color: #4a90e2 !important;
  border: none !important;
  border-radius: 8px !important;
  color: white !important;
  font-size: 16px !important;
  cursor: pointer !important;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1) !important;
  width: 180px !important;
  height: 40px !important;
  position: fixed !important;
  bottom: 20px !important; /* Jarak dari bawah */
  left: 10px !important; /* Kurangi nilai left agar lebih dekat ke kiri */
  margin-left: 0px !important; /* Hapus margin-left jika tidak diperlukan */
}
.attachment-button .attachment-text {
  margin-right: 10px !important;
  letter-spacing: 0.5px !important; /* Menambah jarak antar huruf */
}
.attachment-button .attachment-icon {
  width: 22px !important;
  height: 22px !important;
  filter: grayscale(100%) !important;
}
.attachment-button:hover {
  background-color: #357ABD !important;
}
.attachment-button:focus {
  outline: none !important;
}

.bagikan-tugas-date-display {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  border-bottom: 1px dashed #888;
  position: relative;
}

.bagikan-tugas-date-icon {
  margin-left: 8px;
  cursor: pointer;
  color: #888;
}

.bagikan-tugas-date-picker {
  position: fixed;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  background-color: transparent;
  border: none;
}

.bagikan-tugas-date-picker:focus {
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
  color: transparent;
}

.bagikan-tugas-date-picker::-webkit-datetime-edit {
  visibility: hidden;
}

.bagikan-tugas-date-picker::-webkit-inner-spin-button,
.bagikan-tugas-date-picker::-webkit-calendar-picker-indicator {
  display: none;
}

.bagikan-tugas-date-display:hover .bagikan-tugas-date-icon {
  color: #555;
}

.form-tambah-tugas {
  padding: 20px;
  max-width: 400px;
  margin: 0 auto;
  background-color: #ffffff;
}
.form-tambah-tugas-group {
  margin-bottom: 15px;
  display: block !important;
}
.form-tambah-tugas-group .form-tambah-tugas-label {
  font-size: 14px !important;
  padding-bottom: 0 !important;
  font-weight: bold;
}
.form-tambah-tugas-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}
.form-tambah-tugas-input:focus {
  border-color: var(--qn-primary-400);
  outline: none;
}
.form-tambah-tugas-char-count {
  text-align: right;
  font-size: 12px;
  color: #888;
  margin-top: 5px;
}
.form-tambah-tugas-file-upload {
  display: inline-block;
  cursor: pointer;
  color: #364152;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}
.form-tambah-tugas-file-upload-icon {
  display: inline-block;
  transform: rotate(-45deg);
  margin-right: 5px;
}
.form-tambah-tugas-footer {
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}
.form-tambah-tugas-footer .form-tambah-tugas-button {
  background-color: var(--qn-edlink-400) !important;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  width: 95%;
  margin: auto;
  display: block;
}
.form-tambah-tugas-footer .form-tambah-tugas-button[disabled] {
  opacity: 0.4;
}

.tambah-kuis-tab {
  display: flex;
  align-items: center;
  padding: 12px;
  width: 100%;
  background-color: #ffffff;
  position: relative;
  margin-top: 2px;
  font-weight: bold;
  font-size: 12px;
}

.tambah-kuis-form {
  padding: 20px;
  background-color: #ffffff;
}
.tambah-kuis-form label,
.tambah-kuis-form span {
  font-size: 16px;
  color: #000000;
  display: block;
}
.tambah-kuis-form .judul-quiz {
  margin-bottom: 20px;
}
.tambah-kuis-form .judul-quiz .judul-quiz-group {
  display: block !important;
}
.tambah-kuis-form .judul-quiz .judul-quiz-input {
  font-size: 14px !important;
  border: 1px solid var(--qn-neutral-400) !important;
  border-radius: 4px !important;
  width: 100% !important;
  padding: 10px !important;
}
.tambah-kuis-form .judul-quiz .judul-quiz-input:hover, .tambah-kuis-form .judul-quiz .judul-quiz-input:focus {
  border: 1px solid var(--qn-edlink-400) !important;
  box-shadow: none;
}
.tambah-kuis-form .judul-quiz .judul-quiz-helper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tambah-kuis-form .judul-quiz .judul-quiz-counter {
  font-size: 12px !important;
  color: #606060 !important;
  text-align: right;
  margin-left: auto;
}
.tambah-kuis-form .indikator-penilaian {
  margin-bottom: 20px;
}
.tambah-kuis-form .indikator-penilaian .penilaian-option {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.tambah-kuis-form .indikator-penilaian .penilaian-option .penilaian-option__item {
  display: flex;
  align-items: center;
}
.tambah-kuis-form .indikator-penilaian .penilaian-option .penilaian-option-radio {
  margin-right: 10px;
}
.tambah-kuis-form .indikator-penilaian .penilaian-option .penilaian-option-radio + label::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 0.125rem solid #000000;
  background-color: #ffffff;
  margin-right: 5px;
  vertical-align: middle;
}
.tambah-kuis-form .indikator-penilaian .penilaian-option .penilaian-option-radio:checked + label::before {
  border: 0.3125rem solid var(--qn-edlink-400);
}
.tambah-kuis-form .indikator-penilaian .penilaian-option .penilaian-option-radio:not(:checked) + label::before {
  border: 0.125rem solid #000000;
}
.tambah-kuis-form .indikator-penilaian .penilaian-option .penilaian-option-label {
  font-size: 14px !important;
  color: #000000 !important;
}
.tambah-kuis-form .indikator-penilaian .penilaian-option .penjelasan {
  font-weight: normal;
  font-size: 14px !important;
  color: #000000 !important;
}
.tambah-kuis-form .durasi-pengerjaan .durasi-input {
  display: flex;
  width: fit-content;
  border: 1px solid var(--qn-neutral-400) !important;
  border-radius: 4px !important;
  overflow: hidden;
}
.tambah-kuis-form .durasi-pengerjaan .durasi-input .input-durasi {
  font-size: 14px !important;
  padding: 10px !important;
  border: 1px solid var(--qn-neutral-200) !important;
  border-right: none !important;
  border-radius: 4px 0 0 4px !important;
  width: 80px !important;
  outline: none !important;
}
.tambah-kuis-form .durasi-pengerjaan .durasi-input .input-durasi:hover, .tambah-kuis-form .durasi-pengerjaan .durasi-input .input-durasi:focus {
  border: 1px solid var(--qn-edlink-400) !important;
}
.tambah-kuis-form .durasi-pengerjaan .durasi-input .label-menit {
  font-size: 14px !important;
  padding: 10px !important;
  background-color: var(--qn-neutral-200) !important;
  border: 1px solid var(--qn-neutral-200) !important;
  border-left: 1px solid var(--qn-neutral-400) !important;
  border-radius: 0 4px 4px 0 !important;
  margin: 0 !important;
  color: var(--qn-neutral-600) !important;
  height: 40px !important;
}

.tambah-kuis-wrapper {
  padding: 20px;
  background-color: #ffffff;
}
.tambah-kuis-wrapper .tambah-kuis-advanced-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}
.tambah-kuis-wrapper .tambah-kuis-advanced-header .tambah-kuis-title {
  margin-right: 8px;
}
.tambah-kuis-wrapper .tambah-kuis-advanced-header .tambah-kuis-line {
  flex-grow: 1;
  border: none;
  border-top: 1px solid #ddd;
  margin: 0;
}
.tambah-kuis-wrapper .tambah-kuis-advanced-header .tambah-kuis-arrow {
  margin-left: 8px;
  font-size: 14px;
  color: #333;
}
.tambah-kuis-wrapper .tambah-kuis-bottom-line {
  border: none;
  border-top: 1px solid #ddd;
  margin: 0 0 16px 0;
}
.tambah-kuis-wrapper .form-control-tambah-kuis {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}
.tambah-kuis-wrapper .form-control-tambah-kuis .form-control-group-tambah-kuis {
  display: flex;
  align-items: center;
}
.tambah-kuis-wrapper .form-control-tambah-kuis .form-control-group-tambah-kuis .form-control-input-tambah-kuis {
  padding: 8px;
  padding-left: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 24px;
  transition: border-color 0.3s;
  margin-bottom: 15px;
}
.tambah-kuis-wrapper .form-control-tambah-kuis .form-control-group-tambah-kuis .form-control-input-tambah-kuis:hover, .tambah-kuis-wrapper .form-control-tambah-kuis .form-control-group-tambah-kuis .form-control-input-tambah-kuis:focus {
  border-color: var(--qn-edlink-400);
  outline: none;
}
.tambah-kuis-wrapper .form-control-tambah-kuis .form-control-group-tambah-kuis .form-control-input-custom {
  width: 100px;
  border-radius: 8px;
  border: 1px solid #ccc;
  margin-bottom: 15px;
}
.tambah-kuis-wrapper .form-control-tambah-kuis .switch-tambah-kuis {
  float: right;
}
.tambah-kuis-wrapper .form-control-tambah-kuis .switch-tambah-kuis input {
  opacity: 0;
  width: 0;
  height: 0;
}
.tambah-kuis-wrapper .form-control-tambah-kuis .switch-tambah-kuis .switch-tambah-kuis-label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ccc;
  border-radius: 34px;
  transition: 0.4s;
}
.tambah-kuis-wrapper .form-control-tambah-kuis .switch-tambah-kuis input:checked + .switch-tambah-kuis-label::before {
  background-color: var(--qn-edlink-400) !important;
}
.tambah-kuis-wrapper .form-control-tambah-kuis .switch-tambah-kuis .switch-tambah-kuis-label::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
}
.tambah-kuis-wrapper .form-control-tambah-kuis .switch-tambah-kuis input:checked + .switch-tambah-kuis-label::after {
  transform: translateX(20px); /* Bikin ke kanan */
}
.tambah-kuis-wrapper .input-batas-nilai-tambah-kuis {
  width: 260px;
}
.tambah-kuis-wrapper .input-batas-nilai-tambah-kuis .form-control-group-tambah-kuis .form-control-input-tambah-kuis {
  padding: 8px;
  padding-left: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 24px;
  transition: border-color 0.3s;
  margin-bottom: 15px;
}
.tambah-kuis-wrapper .input-batas-nilai-tambah-kuis .form-control-group-tambah-kuis .form-control-input-tambah-kuis:hover, .tambah-kuis-wrapper .input-batas-nilai-tambah-kuis .form-control-group-tambah-kuis .form-control-input-tambah-kuis:focus {
  border-color: var(--qn-edlink-400);
  outline: none;
}
.tambah-kuis-wrapper .input-deadline-tambah-kuis {
  width: 260px;
}
.tambah-kuis-wrapper .input-deadline-tambah-kuis .form-control-group-tambah-kuis .form-control-input-tambah-kuis {
  padding: 8px;
  padding-left: 2.5rem; /* Khusus input deadline */
  border: 1px solid #ddd;
  border-radius: 24px;
  transition: border-color 0.3s;
  margin-bottom: 15px;
}
.tambah-kuis-wrapper .input-deadline-tambah-kuis .form-control-group-tambah-kuis .form-control-input-tambah-kuis:hover, .tambah-kuis-wrapper .input-deadline-tambah-kuis .form-control-group-tambah-kuis .form-control-input-tambah-kuis:focus {
  border-color: var(--qn-edlink-400);
  outline: none;
}
.tambah-kuis-wrapper .tambah-kuis-quiz-repeat-wrapper {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}
.tambah-kuis-wrapper .tambah-kuis-quiz-repeat-wrapper .tambah-kuis-form-control-quiz-repeat,
.tambah-kuis-wrapper .tambah-kuis-quiz-repeat-wrapper .tambah-kuis-form-control-quiz-interval {
  width: 150px;
  display: block;
}
.tambah-kuis-wrapper .tambah-kuis-quiz-repeat-wrapper .tambah-kuis-form-control-quiz-repeat .form-control-input-custom-quiz-repeat,
.tambah-kuis-wrapper .tambah-kuis-quiz-repeat-wrapper .tambah-kuis-form-control-quiz-repeat .form-control-input-custom-quiz-interval,
.tambah-kuis-wrapper .tambah-kuis-quiz-repeat-wrapper .tambah-kuis-form-control-quiz-interval .form-control-input-custom-quiz-repeat,
.tambah-kuis-wrapper .tambah-kuis-quiz-repeat-wrapper .tambah-kuis-form-control-quiz-interval .form-control-input-custom-quiz-interval {
  width: 60px;
  border: 0.063rem solid #e3e8ef;
  border-radius: 8px;
}
.tambah-kuis-wrapper .tambah-kuis-quiz-repeat-wrapper .tambah-kuis-input-group-quiz-interval {
  display: flex;
  align-items: center;
}
.tambah-kuis-wrapper .tambah-kuis-quiz-repeat-wrapper .tambah-kuis-input-group-quiz-interval .form-control-addon-tambah-kuis {
  background-color: #f1f1f1;
  padding: 0 8px;
  border-radius: 0 4px 4px 0;
  font-size: 14px;
  color: #666;
  margin-left: -1px;
  border: 0.063rem solid #e3e8ef;
  border-left: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tambah-kuis-wrapper .tambah-kuis-content {
  display: flex;
  flex-direction: column;
  max-width: calc(100% - 50px);
}
.tambah-kuis-wrapper .tambah-kuis-content .tambah-kuis-label {
  padding-bottom: 0;
}
.tambah-kuis-wrapper .tambah-kuis-content .tambah-kuis-description {
  font-size: 12px;
  color: #666;
  padding-left: 0;
  margin-bottom: 0;
}
.tambah-kuis-wrapper .tambah-kuis-content .tambah-kuis-badge {
  background-color: var(--qn-edlink-400);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
}

.tambah-kuis-button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: white; /* Background putih */
  padding: 0 20px 20px; /* Padding atas 0, kiri kanan 20px, bawah 20px */
  box-sizing: border-box; /* Include padding dalam ukuran elemen */
  position: relative;
}

.tambah-kuis-button-separator {
  width: 100vw; /* Melebar ke seluruh lebar viewport */
  margin-left: calc(-50vw + 50%); /* Memposisikan ulang agar rata dengan viewport */
  border: none;
  border-top: 1px solid #ddd;
  margin: 0 0 16px 0; /* Jarak bawah */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.tambah-kuis-button-group {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.tambah-kuis-button {
  width: 45%;
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.tambah-kuis-button--primary {
  background-color: var(--qn-primary-100) !important;
  color: #7985CB !important; /* Warna teks untuk tombol Kembali */
}
.tambah-kuis-button--secondary {
  background-color: var(--qn-edlink-400) !important;
  color: white !important; /* Warna teks putih untuk tombol Simpan */
}
.tambah-kuis-button:hover {
  opacity: 0.8;
}
.tambah-kuis-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}

.tambah-kuis-button-divider {
  width: 1px;
  background-color: #ddd;
  height: 40px;
  margin: 0 8px;
}

.tambah-pertanyaan-banner {
  padding: 20px;
  font-size: 16px;
  background-color: #fff;
  margin-top: 4px;
  border-radius: 8px;
  border-bottom: 1px solid #e0e0e0;
}
.tambah-pertanyaan-banner .banner-header {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tambah-pertanyaan-banner .banner-header .question-icon {
  font-size: 12px;
  margin-left: 5px;
}
.tambah-pertanyaan-banner .banner-controls {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
}
.tambah-pertanyaan-banner .banner-controls .settings-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #000;
}
.tambah-pertanyaan-banner .banner-controls .share-button {
  background-color: var(--qn-edlink-400) !important;
  color: #fff;
  border: none;
  padding: 5px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  margin-left: 12px;
  max-height: 30px !important;
  min-height: 30px !important;
  font-weight: lighter !important;
  width: 120px !important;
}
.tambah-pertanyaan-banner hr {
  margin: 0 -20px;
  border: none;
  border-top: 1px solid #e0e0e0;
}
.tambah-pertanyaan-banner .question-number {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.tambah-pertanyaan-banner .question-number .question-tab {
  background-color: #fff;
  color: #000;
  font-size: 18px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tambah-pertanyaan-banner .question-number .question-tab.active {
  background-color: var(--qn-maukuliah-400);
  color: #fff;
}

.tambah-pertanyaan-tab button {
  width: 100%;
  background: none;
  color: var(--qn-edlink-400);
  padding: 10px;
  cursor: pointer;
  border-radius: 0;
  font-size: 16px;
}

.card-pertanyaan-container {
  background-color: #fff;
  padding: 20px 20px 0 20px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.card-pertanyaan-container .card-pertanyaan-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: -10px;
  margin-top: -10px;
}
.card-pertanyaan-container .card-pertanyaan-header {
  display: flex;
  justify-content: space-between;
  color: var(--qn-neutral-500);
  font-size: 12px;
}
.card-pertanyaan-container .card-pertanyaan-header .card-pertanyaan-selesai {
  color: var(--qn-edlink-400);
}
.card-pertanyaan-container .card-pertanyaan-label {
  font-weight: bold;
  padding: 5px 0;
}
.card-pertanyaan-container .card-pertanyaan-button {
  display: flex;
  justify-content: flex-start;
}
.card-pertanyaan-container .card-pertanyaan-button button {
  background: none;
  border: 1px solid #ccc;
  padding: 10px;
  cursor: pointer;
  width: 50px !important;
  height: 50px !important;
  max-height: 50px !important;
}
.card-pertanyaan-container .card-pertanyaan-button button i {
  color: var(--qn-edlink-400);
  font-size: 24px;
}
.card-pertanyaan-container .card-pilihan-jawaban-box {
  background-color: #f8fafc;
  border: 1px dashed var(--qn-neutral-500);
  border-radius: 8px 8px 0 0;
  padding: 10px;
  margin-top: 10px;
}
.card-pertanyaan-container .card-pilihan-jawaban-box .pilihan-item {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 10px;
}
.card-pertanyaan-container .card-pilihan-jawaban-box .pilihan-item .pilihan-radio {
  margin-right: 10px;
}
.card-pertanyaan-container .card-pilihan-jawaban-box .pilihan-item .pilihan-editor-wrapper {
  flex-grow: 1;
}
.card-pertanyaan-container .card-pilihan-jawaban-box .pilihan-item .pilihan-editor {
  width: 100%;
  max-width: 300px;
}
.card-pertanyaan-container .card-pilihan-jawaban-box .pilihan-item .delete-button {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--qn-sevima-red-300);
}
.card-pertanyaan-container .card-pilihan-jawaban-box .pilihan-item .delete-button:hover {
  opacity: 0.8;
}
.card-pertanyaan-container .card-pilihan-jawaban-box .pilihan-tambah {
  display: flex;
  justify-content: flex-start;
}
.card-pertanyaan-container .card-pilihan-jawaban-box .pilihan-tambah .btn-tambah {
  background-color: #fff !important;
  padding: 10px;
  cursor: pointer;
}
.card-pertanyaan-container .custom-hr {
  border: none;
  border-top: 1px solid var(--qn-neutral-500);
  margin: 0 -20px;
}
.card-pertanyaan-container .tambah-pertanyaan-tab {
  background-color: #fff;
  color: var(--qn-edlink-400);
  font-weight: bold;
  padding: 10px;
  text-align: left;
}

.form-bagikan-kuis {
  font-size: 14px;
  background-color: #fff;
  padding: 20px;
}
.form-bagikan-kuis-kelas, .form-bagikan-kuis-sesi, .form-bagikan-kuis-judul {
  margin-bottom: 20px;
}
.form-bagikan-kuis-kelas label, .form-bagikan-kuis-sesi label, .form-bagikan-kuis-judul label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}
.form-bagikan-kuis-kelas input, .form-bagikan-kuis-sesi input, .form-bagikan-kuis-judul input {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: #fff;
}
.form-bagikan-kuis-kelas input:disabled, .form-bagikan-kuis-sesi input:disabled, .form-bagikan-kuis-judul input:disabled {
  background-color: #e0e0e0;
  border-color: #ccc;
  color: #999;
}
.form-bagikan-kuis-editor {
  margin-bottom: 20px;
}
.form-bagikan-kuis-editor label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}
.form-bagikan-kuis-waktu {
  margin-top: 20px;
}
.form-bagikan-kuis-waktu label {
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
}
.form-bagikan-kuis-waktu-buttons {
  display: flex;
  gap: 10px;
}
.form-bagikan-kuis-waktu-buttons button {
  padding: 10px 20px;
  border-radius: 5px;
  border: 1px solid var(--qn-edlink-400);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: transparent;
  color: var(--qn-edlink-400);
  transition: background-color 0.3s, color 0.3s;
}
.form-bagikan-kuis-waktu-buttons button i {
  margin-right: 5px;
}
.form-bagikan-kuis-waktu-buttons button.active {
  background-color: var(--qn-edlink-400);
  color: #fff;
}
.form-bagikan-kuis-input-datetime {
  padding: 10px;
  border-radius: 50px; /* Membuat input datetime berbentuk bulat */
  border: 1px solid #ccc;
  width: 100%;
  margin-top: 10px;
  cursor: pointer; /* Agar terlihat seperti bisa di-klik */
}
.form-bagikan-kuis-input-datetime:focus {
  outline: none;
  border: 1px solid var(--qn-edlink-400); /* Gaya saat input aktif */
}

.modal-detail-bahan-ajar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.modal-detail-bahan-ajar-container {
  background: #fff;
  padding: 20px;
  border-radius: 8px 8px 0 0;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
}

.modal-detail-bahan-ajar-header h2 {
  margin: 0;
  font-size: 12px; /* Reduced font size */
  font-weight: bold;
  text-align: left;
  color: #333;
  margin-left: 18px;
  margin-bottom: 20px;
}

.modal-detail-bahan-ajar-body {
  margin-top: 10px;
}

.modal-detail-bahan-ajar-options {
  list-style: none;
  padding: 0;
  margin: 0;
}

.modal-detail-bahan-ajar-option {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.modal-detail-bahan-ajar-button {
  width: 100%;
  padding: 10px 15px;
  font-size: 12px; /* Reduced font size */
  text-align: left;
  border: none;
  cursor: pointer;
  background: none;
  display: flex;
  align-items: center;
}

.modal-detail-bahan-ajar-button.edit {
  font-weight: 500;
}

.modal-detail-bahan-ajar-button.delete {
  color: #dc2626; /* Red color */
  font-weight: 500;
}

.modal-detail-bahan-ajar-button i {
  margin-right: 10px;
  font-size: 14; /* Reduced icon size */
}

/* Optional: Divider between the buttons */
.modal-detail-bahan-ajar-option + .modal-detail-bahan-ajar-option {
  border-top: 1px solid #e5e7eb;
  padding-top: 10px;
}

.presence-alert-container {
  padding: 16px;
}

.presence-banner {
  background-color: #fff;
  padding: 16px;
  font-family: Arial, sans-serif;
  line-height: 1.5;
  font-size: 12px; /* Set font size to 12px */
}

.presence-banner .title {
  font-size: 1rem; /* Adjust font size for the title */
  margin-bottom: 12px; /* Add margin below the title */
  font-weight: bold;
  color: #000;
}

.presence-banner .label {
  margin: 4px 0; /* Adjust margin to add spacing between lines */
  color: var(--qn-primary-400);
}

.presence-banner .value {
  color: #000;
  margin: 0;
}

.presence-banner .highlight {
  color: var(--qn-primary-500);
  font-weight: bold;
}

.presence-banner .time-and-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.presence-banner .time-and-toggle .label,
.presence-banner .time-and-toggle .value {
  margin-right: 10px; /* Add space between Waktu label and value */
}

.presence-banner .toggle-info {
  font-size: 12px;
  color: var(--qn-edlink-400);
  cursor: pointer;
  text-decoration: none;
}

.list-peserta-card-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--qn-neutral-200);
}

.list-peserta-card-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.list-peserta-card-text-left {
  text-align: left;
}

.list-peserta-card-name {
  font-size: 14px;
  color: #333333;
}

.list-peserta-card-nim {
  font-size: 14px;
  color: #223300;
  font-weight: bold;
  display: block;
  margin-top: 4px;
  margin-bottom: 8px;
}

.list-peserta-card-buttons {
  display: flex;
  justify-content: space-between;
  margin: 8px 10%;
}

.list-peserta-card-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #D1D5DB;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  color: #223300;
  cursor: pointer;
  background-color: transparent;
  transition: background-color 0.3s, color 0.3s;
}

.list-peserta-card-circle-active {
  background-color: var(--qn-edlink-400) !important;
  color: white !important;
}

.list-peserta-card-circle-inactive {
  background-color: transparent !important;
  color: #223300 !important;
}

.list-peserta-card-circle-disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

.list-peserta-container {
  background-color: white;
  margin-top: 12px;
}

.list-peserta-header {
  border-bottom: 1px solid #E5E5E5;
}

.list-peserta-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}

.list-peserta-align-center {
  display: flex;
  align-items: center;
  gap: 8px;
}

.list-peserta-icon {
  font-size: 14px;
  color: #606770;
  margin-left: 8px;
}

.list-peserta-checkbox {
  margin-right: 4px;
  width: 14px;
  height: 14px;
}

.list-peserta-label {
  font-size: 14px;
  color: #606770;
}

.list-peserta-checkbox:disabled + .list-peserta-label {
  opacity: 0.5;
  cursor: not-allowed;
}

.files-container {
  padding: 16px;
}
.files-container .file-card {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.files-container .file-card .file-icon {
  width: 48px;
}
.files-container .file-card .file-title {
  width: 100%;
}

#overlay.modal-lainnya-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.modal-lainnya-container {
  background-color: white;
  width: 100%;
  max-width: 400px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.modal-lainnya-content {
  padding: 0px 16px 8px 16px;
}

.modal-lainnya-item {
  font-size: 14px;
  font-weight: bold;
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
}
.modal-lainnya-item.green {
  color: var(--qn-edlink-400);
}
.modal-lainnya-item.gray {
  color: #4A4A4A;
}
.modal-lainnya-item:last-child {
  border-bottom: none; /* Remove border for the last item */
}

.lainnya-search-container {
  padding: 16px;
}
.lainnya-search-container .lainnya-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}
.lainnya-search-container .lainnya-input-wrapper {
  margin-top: 12px;
  position: relative;
  width: 100%;
  max-width: 400px;
}
.lainnya-search-container .lainnya-search-input {
  width: 100%;
  padding: 8px 16px 8px 36px;
  font-size: 14px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  box-shadow: none;
  outline: none;
}
.lainnya-search-container .lainnya-search-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: #b0b0b0;
}

.draf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 40vh;
  text-align: center;
  color: #4a4a4a;
  padding: 16px;
}

.draf-message-bold {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 4px;
}

.draf-message-subtle {
  font-size: 14px;
  color: #9b9b9b;
}

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

.draf-card {
  border-bottom: 1px solid #e0e0e0;
  padding: 16px;
}

.draf-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.draf-badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid;
  display: inline-block;
}

.draf-badge-survey {
  background-color: #fff8dc;
  color: #d97706;
  border-color: #facc15;
}

.draf-badge-event {
  background-color: #ffe4e1;
  color: #dc2626;
  border-color: #f87171;
}

.draf-badge-info {
  background-color: #e0f2fe;
  color: #2563eb;
  border-color: #60a5fa;
}

.draf-badge-post-owner {
  background-color: #e3f1fa;
  color: #333333;
  border-color: #494949;
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  margin-top: 8px;
}

.card-date {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

.menu-button {
  background: none;
  border: none;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  color: #6b7280;
  width: 32px;
  text-align: right;
}

.banner-detail-bahan-ajar {
  border-top: 1px solid #ddd;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  background-color: #ffffff;
}
.banner-detail-bahan-ajar .banner-shared {
  background-color: var(--qn-edlink-400);
  color: white;
  padding: 3px 6px;
  display: inline-block;
  border-radius: 4px;
  font-size: 11px;
}
.banner-detail-bahan-ajar .banner-sharedlater {
  background-color: var(--qn-warning-400);
  color: white;
  padding: 3px 6px;
  display: inline-block;
  border-radius: 4px;
  font-size: 11px;
}
.banner-detail-bahan-ajar .banner-title {
  font-size: 22px;
  margin: 14px 0 6px;
}
.banner-detail-bahan-ajar .banner-info {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
}
.banner-detail-bahan-ajar .banner-info .banner-session,
.banner-detail-bahan-ajar .banner-info .banner-topic {
  display: flex;
  align-items: center;
}
.banner-detail-bahan-ajar .banner-info .banner-session .icon-container,
.banner-detail-bahan-ajar .banner-info .banner-topic .icon-container {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
}
.banner-detail-bahan-ajar .banner-info .banner-session .icon-container i,
.banner-detail-bahan-ajar .banner-info .banner-topic .icon-container i {
  font-size: 12px;
}
.banner-detail-bahan-ajar .banner-info .separator {
  margin: 0 6px;
}
.banner-detail-bahan-ajar .banner-divider {
  width: calc(100vw + 40px);
  margin-left: -20px;
  margin-right: -20px;
  color: #ddd;
  margin-top: 16px;
}

.banner-likes-comments {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  background-color: #ffffff;
  padding-bottom: 8px;
}
.banner-likes-comments .likes-count {
  margin-left: 20px;
}
.banner-likes-comments .comments-count {
  margin-right: 20px;
}

.page-container {
  background-color: white;
  display: flex;
  flex-direction: column;
  max-height: 100vh;
}

/* Khusus untuk Modal */
.page-container .modal-detail-bahan-ajar-container {
  max-height: calc(100vh - 20px);
}

.news-description-container p {
  margin-bottom: 16px; /* atau nilai lain sesuai kebutuhan */
  line-height: 1.5; /* Opsional untuk meningkatkan keterbacaan */
}

.lq-answered-container {
  padding: 8px;
  border-radius: 6px;
  border-color: var(--qn-primary-600);
  border-style: solid;
  border-width: 1px;
}

.lq-graded-container {
  display: flex;
  color: var(--qn-white);
  padding: 8px 20px 8px 20px;
  background-color: var(--qn-edlink-400);
  justify-content: space-between;
}

.lq-detail-report-card {
  display: flex;
  column-gap: 8px;
  padding: 8px 20px 8px 20px;
  background-color: #F5F7FF;
  border-radius: 6px;
}

.tugas-content-list-post {
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 15px;
}

.detail-tugas-space-bottom {
  padding-bottom: 50vh;
  /* Adjust heights based on screen width */
}
@media (min-width: 375px) and (max-width: 389px) {
  .detail-tugas-space-bottom {
    padding-bottom: 50vh;
  }
}
@media (min-width: 390px) and (max-width: 767px) {
  .detail-tugas-space-bottom {
    padding-bottom: 50vh;
  }
}
@media (min-width: 768px) {
  .detail-tugas-space-bottom {
    padding-bottom: 50vh;
  }
}

.detail-tugas-container {
  font-family: Arial, sans-serif;
  color: #333;
  padding: 0px 16px 16px 16px;
  background-color: #fff;
}
.detail-tugas-container .detail-tugas-section .detail-tugas-title {
  font-size: 14px !important;
}
.detail-tugas-container .detail-tugas-section .detail-tugas-text {
  margin: 4px 0 0 0;
  font-size: 14px;
}
.detail-tugas-container .detail-tugas-count {
  background-color: var(--qn-sevima-blue-100);
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  margin-left: 8px;
}
.detail-tugas-container .detail-tugas-list {
  margin-top: 8px;
  margin-bottom: 8px;
}
.detail-tugas-container .detail-tugas-list .detail-tugas-answer-item {
  display: flex;
  align-items: center;
  margin-top: 8px;
  font-size: 14px;
}
.detail-tugas-container .detail-tugas-list .detail-tugas-answer-item .detail-tugas-index {
  font-size: 14px;
  margin-right: 8px;
  font-weight: bold;
}
.detail-tugas-container .detail-tugas-list .detail-tugas-answer-item .detail-tugas-avatar img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-right: 12px;
  margin-left: 8px;
}
.detail-tugas-container .detail-tugas-list .detail-tugas-answer-item .detail-tugas-answer-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.detail-tugas-container .detail-tugas-list .detail-tugas-answer-item .detail-tugas-answer-details .detail-tugas-status-button {
  min-height: 10px !important;
  max-height: 30px !important;
  background-color: #fff !important;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14px;
  color: #666;
}
.detail-tugas-container .detail-tugas-list .detail-tugas-answer-item .detail-tugas-answer-details .detail-tugas-user-name {
  font-weight: bold;
  font-size: 14px;
  margin-left: 4px;
}
.detail-tugas-container .detail-tugas-list .detail-tugas-answer-item .detail-tugas-answer-details .detail-tugas-grade {
  display: flex;
  align-items: center;
  background-color: var(--qn-neutral-200);
  padding: 6px;
  border-radius: 4px;
}
.detail-tugas-container .detail-tugas-list .detail-tugas-answer-item .detail-tugas-answer-details .detail-tugas-grade .grade-icon {
  color: #f5a623;
  font-size: 18px;
  line-height: 1;
}
.detail-tugas-container .detail-tugas-list .detail-tugas-answer-item .detail-tugas-answer-details .detail-tugas-grade .grade-value {
  margin-left: 4px;
  font-size: 16px;
  font-weight: bold;
  line-height: 18px;
}
.detail-tugas-container .detail-tugas-status-button {
  background-color: #fff !important;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14px;
  color: #666;
}

.alert-tugas-alert {
  margin-top: 8px;
  margin-bottom: 8px;
  --qn-alert-background: var(--qn-primary-100) !important;
}
.alert-tugas-alert .alert-content-custom .alert-tugas-alert-content {
  font-size: 14px;
  color: var(--qn-sevima-blue-400);
}

.tugas-tutup-container {
  width: 100%;
  background-color: var(--qn-edlink-400);
  color: var(--qn-white);
  border-top: 1px solid #e0e0e0;
  padding: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  max-width: 100vw;
}

.jawaban-anda-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 49%;
  background-color: #ffffff;
  border-top: 1px solid #e0e0e0;
  z-index: 1000;
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  max-width: 100vw;
  overflow: visible;
}

.jawaban-anda-header {
  margin-bottom: 16px;
  color: black;
  width: 100%;
  padding: 16px 16px 0 16px;
  cursor: pointer;
}

.jawaban-anda-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 16px;
  padding-right: 13px;
}

.jawaban-anda-content-icon {
  font-size: 14px;
  color: var(--qn-sevima-blue-400) !important;
  margin-right: 8px;
}

.jawaban-anda-content-text {
  font-size: 12px;
  color: var(--qn-sevima-blue-400) !important;
  flex-grow: 1;
  text-align: left;
  font-weight: bold;
}

.jawaban-btn-hapus {
  background: none;
  border: none;
  color: #7985cb;
  font-size: 12px;
  cursor: pointer;
  font-weight: 500;
}

.jawaban-btn-tambah {
  border: 1px solid #005099;
  color: #005099;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 15px;
  background: white;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
}

.jawaban-btn-kirim-ulang {
  border: none;
  border-radius: 4px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 15px;
  background: var(--qn-edlink-400);
  color: #ffffff;
  font-size: 14px;
  width: 100%;
  max-width: 400px;
  margin-top: 4px;
}

.jawaban-anda-grade-container .jawaban-anda-date {
  font-size: 12px;
  color: #7985CB;
  margin-bottom: 16px;
  text-align: left;
}

.jawaban-anda-grade-container .jawaban-anda-feedback-wrapper {
  display: flex;
  flex-direction: column;
  padding: 0 16px 0 16px;
  gap: 8px;
  margin-bottom: 12px;
  text-align: left;
}

.jawaban-anda-grade-container .jawaban-anda-feedback-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: black;
  margin-bottom: 8px;
}

.jawaban-anda-grade-container .jawaban-anda-feedback-item i {
  width: 20px;
  text-align: center;
  margin-right: 12px;
}

.jawaban-anda-grade-container .jawaban-anda-feedback-item span {
  margin-left: 0;
}

.jawaban-anda-grade-container .jawaban-anda-grade {
  background-color: var(--qn-edlink-400);
  color: #ffffff;
  padding: 10px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100vw + 40px);
  text-align: left;
  position: relative;
  left: 50%;
  margin-bottom: -20px;
  transform: translateX(-50%);
  height: 50px;
}

.jawaban-anda-grade-container .jawaban-anda-status {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
}

.jawaban-anda-grade-container .jawaban-anda-status i {
  margin-right: 8px;
}

.jawaban-anda-grade-container .jawaban-anda-score {
  font-size: 20px;
  font-weight: bold;
}

.jawaban-detail-feedback-section {
  margin-top: 16px;
}

.jawaban-detail-feedback-title {
  font-size: 14px;
  font-weight: bold;
  color: var(--qn-sevima-blue-300);
  margin-bottom: 8px;
}

.jawaban-detail-feedback-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
  color: black;
  padding: 10px;
  background-color: var(--qn-neutral-200);
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.jawaban-detail-feedback-item i {
  width: 20px;
  margin-right: 12px;
  color: black;
}

.jawaban-detail-feedback-item span {
  flex-grow: 1;
  text-align: left;
}

.jawaban-detail-btn-lihat {
  background-color: transparent;
  color: var(--qn-edlink-400);
  border: none;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

.jawaban-detail-divider {
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-right: -20px;
  border: none;
  border-top: 1px solid #e0e0e0;
}

.jawaban-grade-container {
  position: sticky; /* Membuat elemen sticky */
  bottom: 0; /* Tetap berada di bagian bawah saat menggulir */
  z-index: 10; /* Memberikan prioritas di atas elemen lain */
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center; /* Vertikal align */
  background-color: #009B24;
  color: #ffffff; /* Warna default untuk semua teks di dalam container */
}

.jawaban-grade-container p {
  margin: 0; /* Hilangkan margin bawaan <p> */
  color: #ffffff; /* Pastikan teks di dalam <p> tetap putih */
  font-size: 16px; /* Sesuaikan ukuran teks jika diperlukan */
  display: flex;
  align-items: center; /* Vertikal align untuk ikon dan teks */
}

.jawaban-grade-container p .fa-check-circle {
  margin-right: 8px; /* Beri jarak antara ikon dan teks */
  color: #ffffff; /* Pastikan ikon juga putih */
}

.jawaban-total-flag {
  background-color: #ffad23;
  margin-left: 4px;
  padding: 2px 7px 2px 7px;
  border-radius: 15px;
}

.modal-detail-tugas-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.modal-detail-tugas-wrapper {
  background: #fff;
  border-radius: 8px 8px 0 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.modal-detail-tugas-header {
  width: 100%;
  height: 4px;
  background-color: var(--qn-maukuliah-400);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.modal-detail-tugas-content {
  padding: 20px;
}

.modal-detail-tugas-option {
  padding: 10px 0;
  font-size: 14px;
  border: none;
  cursor: pointer;
  text-align: left;
  background: none;
  display: flex;
  align-items: center;
  color: black;
}

.modal-detail-tugas-divider {
  width: 100%;
  border: none;
  border-top: 1px solid #e0e0e0;
  margin-top: 10px;
  margin-bottom: 10px;
}

.modal-detail-tugas-icon {
  color: var(--qn-sevima-blue-400);
  margin-right: 10px;
  font-size: 14px;
}

.text-editor-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 2000; /* Pastikan ini berada di atas modal lainnya */
  display: flex;
  flex-direction: column;
}

.text-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

.text-editor-back-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.text-editor-title {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  flex-grow: 1;
}

.text-editor-save-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: green; /* Warna tombol simpan */
}

.text-editor-content {
  padding: 15px;
  flex-grow: 1;
  overflow-y: auto;
}

.text-editor {
  width: 100%;
  height: calc(100% - 60px); /* Tinggi editor, kurangi tinggi header */
  font-size: 14px;
  line-height: 1.5;
  padding: 10px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  background-color: #ffffff;
}

.tugas-modal-confirmation-overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
}

.tugas-modal-confirmation-container {
  background: white;
  padding: 20px;
  text-align: center;
  max-width: 400px;
  width: 100%;
  border-radius: 10px 10px 0 0;
}

.tugas-modal-confirmation-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.tugas-modal-confirmation-text {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}

.tugas-modal-confirmation-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.tugas-modal-confirmation-btn-cancel,
.tugas-modal-confirmation-btn-ok {
  width: 45%;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold !important;
}

.tugas-modal-confirmation-btn-cancel {
  border-color: var(--qn-edlink-400) !important;
  color: var(--qn-edlink-400) !important;
}

.tugas-modal-confirmation-btn-ok {
  background-color: var(--qn-edlink-400) !important;
  color: white !important;
}

.congratulation-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: var(--qn-edlink-400);
  padding: 20px;
  text-align: center;
  position: relative;
}

.congratulation-content {
  margin-bottom: 30px;
}

.congratulation-title {
  font-size: 24px;
  font-weight: bold;
  color: white;
}

.congratulation-message {
  font-size: 16px;
  color: white;
}

.congratulation-footer-wrapper {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px;
  background-color: var(--qn-edlink-400);
}

.congratulation-footer {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.congratulation-button-custom {
  width: 95%;
  background-color: var(--qn-edlink-400) !important;
  border: 2px solid white !important;
  color: white !important;
  border-radius: 5px;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  margin: 0 auto;
  display: block;
}

.congratulation-button-custom:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.submitting-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: white;
}

.submitting-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: fit-content;
}

.submitting-content img {
  max-width: 100%;
  height: auto;
  margin-bottom: 38px; /* Jarak antar elemen */
}

.submitting-content .title {
  font-size: 20px;
  margin-bottom: 30px; /* Jarak antar elemen */
}

.submitting-content .subtitle {
  font-size: 16px;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
}

.detail-kuis-detail-soal-container {
  padding: 20px;
  background-color: #fff;
}
.detail-kuis-detail-soal-container .detail-kuis-detail-soal-baris1 {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}
.detail-kuis-detail-soal-container .detail-kuis-detail-soal-baris1 .title {
  font-weight: bold;
  font-size: 12px;
  color: var(--qn-sevima-blue-400);
  margin-bottom: -2px;
}
.detail-kuis-detail-soal-container .detail-kuis-detail-soal-baris1 .content {
  font-weight: 500;
  font-size: 12px;
  color: var(--qn-sevima-blue-400);
  margin-top: 0;
}
.detail-kuis-detail-soal-container .detail-kuis-detail-soal-baris2 {
  display: flex;
  flex-direction: column;
}
.detail-kuis-detail-soal-container .detail-kuis-detail-soal-baris2 .title {
  font-weight: bold;
  font-size: 12px;
  color: var(--qn-sevima-blue-400);
  margin-bottom: -2px;
}
.detail-kuis-detail-soal-container .detail-kuis-detail-soal-baris2 .detail-kuis-detail-soal-baris4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0;
}
.detail-kuis-detail-soal-container .detail-kuis-detail-soal-baris2 .detail-kuis-detail-soal-baris4 .left .content {
  font-size: 12px;
  color: var(--qn-sevima-blue-400);
}
.detail-kuis-detail-soal-container .detail-kuis-detail-soal-baris2 .detail-kuis-detail-soal-baris4 .right .bold-link {
  font-size: 12px;
  font-weight: bold;
  color: var(--qn-edlink-400);
}

.detail-pengaturan-container {
  font-size: 12px;
  padding: 20px;
  background-color: #fff;
}
.detail-pengaturan-container .detail-pengaturan-item {
  margin-bottom: 16px;
}
.detail-pengaturan-container .detail-pengaturan-item .label {
  font-weight: bold;
  color: var(--qn-sevima-blue-400);
  margin-bottom: 4px;
}
.detail-pengaturan-container .detail-pengaturan-item .value {
  color: var(--qn-sevima-blue-400);
}
.detail-pengaturan-container .detail-pengaturan-item.detail-pengaturan-link {
  margin-bottom: 0;
}
.detail-pengaturan-container .detail-pengaturan-item.detail-pengaturan-link .value {
  color: var(--qn-edlink-400);
  cursor: pointer;
  text-align: right;
  font-weight: bold;
  margin-right: 0;
}

.laporan-kuis-container {
  padding: 20px;
  background-color: #fff;
}
.laporan-kuis-container .laporan-kuis-title {
  color: var(--qn-sevima-blue-400);
  font-size: 12px;
  font-weight: bold;
  text-align: left;
  margin-bottom: 20px;
}
.laporan-kuis-container .laporan-kuis-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.laporan-kuis-container .laporan-kuis-message {
  color: #7985cb;
  font-size: 12px;
  text-align: center;
}

.button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: #fff;
}

.button-detail-kuis {
  background-color: var(--qn-primary-100) !important;
  color: var(--qn-sevima-blue-400) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  font-size: 12px !important;
  font-weight: lighter !important;
  width: 90% !important;
  max-height: 0 !important;
  gap: 0.3rem !important;
}
.button-detail-kuis i.fa-trophy {
  font-size: 12px !important;
}

.sq-container {
  width: 100vw;
  min-height: 100vh;
  padding: 16px;
  background-color: var(--qn-edlink-400);
}

.sq-content {
  background-color: var(--qn-white);
  border-radius: 6px;
  padding: 16px;
  margin-top: 30px;
  margin-bottom: 100px;
}

.sq-description {
  padding: 24px;
  background-color: #F5F7FF;
  border-radius: 6px;
  border: 1px solid;
  border-color: #E2E7FF;
  text-align: center;
}

.leaderboard-grade-list {
  width: 100%;
  background-color: white;
  border-radius: 10px 10px 0 0;
}

.leaderboard-grade-card {
  width: 55px;
  height: fit-content;
  margin-left: auto;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 16px;
  display: flex;
  gap: 0.2rem;
  padding: 2px 6px 2px 6px;
  border-radius: 6px;
  background-color: var(--qn-neutral-200);
  text-align: center;
  justify-content: center;
}

.leaderboard-grade-card-you {
  width: 55px;
  height: fit-content;
  margin-left: auto;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 16px;
  display: flex;
  gap: 0.2rem;
  padding: 2px 6px 2px 6px;
  border-radius: 6px;
  background-color: var(--qn-edlink-400);
  text-align: center;
  justify-content: center;
}

.leaderboard-grade-txt-you {
  color: white;
}

.leaderboard-podium {
  position: fixed;
  margin-left: auto;
  margin-right: auto;
  top: 32%;
  left: 0;
  right: 0;
}

.leaderboard-top-3-container {
  width: 240px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30%;
  display: flex;
  justify-content: space-around;
}

@keyframes moveUpDown {
  0%, 100% {
    transform: translateY(0); /* Posisi awal dan akhir */
  }
  50% {
    transform: translateY(-20px); /* Geser ke atas */
  }
}
.leaderboard-top-1rd {
  width: 75px;
  align-items: center;
  animation: moveUpDown 2s infinite ease-in-out; /* Animasi berjalan otomatis */
  animation-delay: 0s;
}

.leaderboard-top-2rd {
  width: 75px;
  align-items: center;
  margin-top: 35px;
  animation: moveUpDown 2s infinite ease-in-out;
  animation-delay: 0.3s;
}

.leaderboard-top-3rd {
  width: 65px;
  align-items: center;
  margin-top: 50px;
  animation: moveUpDown 2s infinite ease-in-out;
  animation-delay: 0.6s;
}

.leaderboard-photo-top-3 {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  border-style: solid;
  border-color: white;
  border-width: 2px;
  margin-left: auto;
  margin-right: auto;
}

.leaderboard-photo {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  margin-top: auto;
  margin-bottom: auto;
}

.btn-rank-detail-kuis {
  padding: 4px 10px 4px 10px;
  border-radius: 6px;
  border-color: var(--qn-edlink-400);
  border-width: 1px;
  border-style: solid;
  color: var(--qn-edlink-400);
  text-align: center;
}

.btn-report-kuis {
  padding: 4px 10px 4px 10px;
  border-radius: 6px;
  color: var(--qn-edlink-400);
  text-align: center;
}

.iframe-start-quiz-container {
  position: fixed; /* Untuk memastikan iframe menempel pada viewport */
  top: 0;
  left: 0;
  width: 100vw; /* 100% dari lebar viewport */
  height: 100%;
  margin-top: 65px;
  z-index: 1000; /* Pastikan berada di atas elemen lainnya */
  background-color: var(--qn-edlink-400);
}

.iframe-start-quiz-container iframe {
  width: 100%;
  height: 92%;
  border: none;
  /* Adjust heights based on screen width */
}
@media (min-width: 375px) and (max-width: 389px) {
  .iframe-start-quiz-container iframe {
    height: 90%;
  }
}
@media (min-width: 390px) and (max-width: 767px) {
  .iframe-start-quiz-container iframe {
    height: 92%;
  }
}
@media (min-width: 768px) {
  .iframe-start-quiz-container iframe {
    height: 96%;
  }
}

.sq-dashed-line {
  border: none; /* Menghapus border default */
  border-top: 1px dashed #d0cdcd; /* Garis horizontal putus-putus */
  margin: 10px 0; /* Opsional: memberikan jarak */
}

.leaderboard-highlight-bar {
  width: 2px;
  height: 100%;
  background-color: var(--qn-edlink-400);
}

.leaderboard-highlighted-number {
  /* Tidak memerlukan padding tambahan */
  height: fit-content;
  margin-top: auto;
  margin-bottom: auto;
}

.leaderboard-default-number {
  padding-left: 10px;
  height: fit-content;
  margin-top: auto;
  margin-bottom: auto;
}

.leaderboard-bg-item-active {
  background-color: #FAFAFA;
}

.leaderboard-bottom-container {
  position: fixed;
  overflow-y: auto;
  width: 100%;
  height: 52%;
  background-color: white;
  bottom: 0;
  left: 0;
  color: #FFF;
}

@media (max-height: 668px) {
  .leaderboard-top-3-container {
    margin-top: 10%; /* Untuk tinggi maksimum 667px */
  }
}
@media (min-height: 669px) and (max-height: 896px) {
  .leaderboard-top-3-container {
    margin-top: 20%; /* Tambah 5% */
  }
}
@media (min-height: 897px) and (max-height: 1024px) {
  .leaderboard-top-3-container {
    margin-top: 20%; /* Tambah 5% */
  }
}
@media (min-height: 1025px) and (max-height: 1181px) {
  .leaderboard-top-3-container {
    margin-top: 25%; /* Tambah 5% */
  }
}
@media (min-height: 1195px) and (max-height: 1366px) {
  .leaderboard-top-3-container {
    margin-top: 25%; /* Tambah 5% */
  }
}
@media (width: 1024px) and (height: 600px) {
  .leaderboard-top-3-container {
    margin-top: 3%;
  }
}
@media (width: 1280px) and (height: 800px) {
  .leaderboard-top-3-container {
    margin-top: 6%;
  }
}
.proc-prep-access-container {
  padding: 10px 16px 10px 16px;
  border-radius: 16px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--qn-neutral-400);
  display: flex;
  justify-content: space-between;
}

.proc-prep-access-approved-container {
  padding: 10px 16px 10px 16px;
  border-radius: 16px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--qn-edlink-400);
  display: flex;
  justify-content: space-between;
}

.proc-prep-access-approved-icon {
  width: 30px;
  height: 30px;
  margin-top: auto;
  margin-bottom: auto;
}

.proc-prep-access-loader {
  width: 30px;
  height: 30px;
  margin-top: auto;
  margin-bottom: auto;
}

.proc-prep-access-label {
  margin-top: auto;
  margin-bottom: auto;
}

.proc-prep-access-container-left {
  display: flex;
  column-gap: 8px;
}

.proc-prep-btn-see-guide-access-permission {
  color: var(--qn-edlink-400);
}

.proc-start-kuis-video-frame {
  position: fixed;
  cursor: grab;
  width: 140px;
  height: 90px;
  padding: 10px;
  top: 0;
  right: 0;
  transform: scaleX(-1);
  z-index: 9999;
  border-radius: 10px;
}

.detail-kuis-container {
  min-height: 100vw;
  width: 100%;
  background-color: white;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}

.detail-bahan-ajar-materi {
  font-size: 12px;
  color: #333;
  background-color: #fff;
  padding: 20px 20px 0 20px;
}

.conf-detail-container {
  padding: 0px 20px 0px 20px;
  background-color: white;
}

.conf-attendance-container {
  background-color: white;
  padding: 0px 0px 16px 0px;
  row-gap: 0.5rem;
}

.conf-item-attendance-container {
  width: 100%;
  height: fit-content;
  position: relative;
  padding-right: 70px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.conf-attend-btn-container {
  display: flex;
  column-gap: 10px;
  position: absolute;
  top: 50%;
  right: 0;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.conf-detail-copy-zoom-username {
  display: flex;
  justify-content: space-between;
  padding: 4px 16px 4px 16px;
  background-color: #f5f7ff;
  border: 1px solid #e2e7ff;
  border-radius: 6px;
}

.conf-detail-btn-copy-zoom-username {
  color: #7985cb;
  margin-top: auto;
  margin-bottom: auto;
}

.zoom-bottom-container-divider {
  border-top: 1px solid #ccc; /* Garis di bagian atas */
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Bayangan ke atas */
}

.zoomid-pass-card {
  background-color: #fafafa;
  border-radius: 4px;
  padding: 8px 16px 8px 16px;
}

.conf-text-ended-for-owner {
  text-align: center;
  color: #279b24;
}

.conf-attend-badge-present {
  color: var(--qn-edlink-300);
}

.conf-attend-badge-alpha {
  color: var(--qn-danger-300);
}

.video-interaktif-player-container {
  width: 100vw;
  height: 100vh;
  background: black;
  margin: 0;
  justify-content: center;
  align-items: center;
}
.video-interaktif-player-container .back-button-container {
  position: absolute;
  width: 100%;
  height: 84px; /* To cover the youtube title */
  top: 0px;
  left: 0px;
  z-index: 100; /* Ensure it stays above the player */
  background: black;
}
.video-interaktif-player-container .back-button-container .back-button {
  background: transparent;
  color: white;
  border: none;
  margin-left: 8px;
  padding: 16px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  text-transform: uppercase;
}
.video-interaktif-player-container-video-container {
  position: relative;
  width: 100%; /* Set to 100% to match the viewport width */
  height: 100%; /* Set to 100% to match the viewport height */
  display: flex;
  justify-content: center;
  overflow: hidden;
  background-color: black;
}
.video-interaktif-player-container-overlay-content {
  position: absolute;
  bottom: 0; /* Start from the bottom */
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
  padding: 20px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.video-interaktif-player-container .content h2 {
  color: white;
  font-size: 20px;
  margin: 0 0 8px;
}
.video-interaktif-player-container .content p {
  font-size: 14px;
  color: white;
  margin: 0 0 8px;
}
.video-interaktif-player-container .time {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #fff;
}
.video-interaktif-player-container .icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* Align icons to the bottom */
  width: 32px;
  min-width: 32px;
  margin-top: auto;
}
.video-interaktif-player-container .icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: white;
}
.video-interaktif-player-container .icon-btn span {
  font-size: 12px;
  color: white;
}

.video-interaktif-question {
  margin-top: 32px;
  margin-bottom: 64px;
  width: 100%;
  height: auto;
}
.video-interaktif-question .question-header {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 16px;
}
.video-interaktif-question .question-content {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.video-interaktif-question .question-content img {
  max-height: 250px;
}
.video-interaktif-question .question-title {
  font-size: 20px;
  font-weight: bold;
}
.video-interaktif-question .option {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}
.video-interaktif-question .option.correct {
  background-color: #e9f7ef;
  border-color: #28a745;
}
.video-interaktif-question .option.incorrect {
  background-color: #FBE5E5;
  border-color: #BA2022;
}
.video-interaktif-question .option .option-label {
  font-weight: bold;
  margin-right: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  height: 24px;
  border: 1px solid #ddd;
  border-radius: 20%;
  background-color: #fff;
}
.video-interaktif-question .option.selected .option-label {
  background-color: #28a745;
  color: #fff;
  border-color: #28a745;
}
.video-interaktif-question .option.selected.incorrect .option-label {
  background-color: #BA2022;
  border-color: #BA2022;
}
.video-interaktif-question .option .option-content {
  width: 100%;
}
.video-interaktif-question .option .option-content img {
  max-height: 200px;
  margin-bottom: 8px;
}
.video-interaktif-question .option .option-text {
  font-size: 16px;
  flex: 1;
}

.video-interaktif-result {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: var(--qn-edlink-400);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.video-interaktif-result-container {
  text-align: center;
  width: 90%;
  color: white;
  margin-top: -24px;
}
.video-interaktif-result-header {
  margin-bottom: 32px;
}
.video-interaktif-result-header p {
  color: white;
  font-size: 22px;
  font-weight: 800;
}
.video-interaktif-result-content {
  background-color: white;
  padding: 16px;
  border-radius: 10px;
  color: #000;
}
.video-interaktif-result-content .medali {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 54px;
  margin-bottom: 8px;
}
.video-interaktif-result-score {
  font-size: 54px;
  font-weight: bold;
  margin: 10px 0;
}
.video-interaktif-result-info {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}
.video-interaktif-result-info-box {
  border: 1px solid #ccc;
  text-align: center;
  padding: 8px 8px;
  border-radius: 10px;
  flex: 1;
  margin: 0 5px;
}
.video-interaktif-result-info-box p {
  font-size: 12px;
}
.video-interaktif-result-info-box .score {
  margin-top: 8px;
  font-size: 14px;
  font-weight: bold;
}
.video-interaktif-result-info-box .image {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.video-interaktif-result button {
  margin-top: 20px;
}
.video-interaktif-result button {
  border: 1px solid var(--qn-edlink-400);
  background-color: white;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  color: var(--qn-edlink-400);
  cursor: pointer;
}
.video-interaktif-result-footer {
  margin-top: 8px;
}
.video-interaktif-result-footer p {
  color: white;
  font-size: 12px;
  font-weight: lighter;
}

.feedback {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
}
.feedback-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.feedback-header .feedback-avatar img {
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
.feedback-header .feedback-user-name {
  font-weight: bold;
  font-size: 14px;
  margin-left: 10px;
}
.feedback-body {
  margin-bottom: 20px;
}
.feedback-body .feedback-answer-section {
  margin-bottom: 20px;
}
.feedback-body .feedback-answer-section .feedback-label {
  font-weight: bold !important;
  font-size: 14px !important;
  display: block;
  margin-bottom: 8px;
}
.feedback-body .feedback-answer-section .feedback-answer-content {
  font-size: 14px;
  margin-bottom: 8px;
}
.feedback-body .feedback-form {
  margin-bottom: 220px;
}
.feedback-body .feedback-form .feedback-input-group {
  margin-bottom: 20px;
}
.feedback-body .feedback-form .feedback-input-group .feedback-input {
  width: 100%;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.feedback-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 10px 20px;
}
.feedback-footer .feedback-submit-btn {
  flex-grow: 1;
  margin: 0 10px;
  padding: 0 20px;
  background-color: var(--qn-edlink-400) !important;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  height: 40px;
}
.feedback-footer .feedback-nav-btn-left,
.feedback-footer .feedback-nav-btn-right {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  background-color: var(--qn-edlink-400) !important;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  height: 40px;
}
.feedback-footer .feedback-nav-btn-left i,
.feedback-footer .feedback-nav-btn-right i {
  font-size: 16px;
}
.feedback-footer .feedback-submit-disabled,
.feedback-footer .feedback-nav-btn-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.rich-editor-container .rich-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.rich-editor-container .rich-editor-toolbar .rich-editor-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  transition: border-color 0.2s;
}
.rich-editor-container .rich-editor-toolbar .rich-editor-btn.active {
  border-color: black;
}
.rich-editor-container .rich-editor-toolbar .rich-editor-btn.inactive {
  border-color: #ccc;
}
.rich-editor-container .rich-editor-toolbar .rich-editor-btn i {
  font-size: 16px;
}
.rich-editor-container .rich-editor-content {
  width: 100%;
  height: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 16px;
  min-height: 200px;
  white-space: pre-wrap;
  overflow-y: auto;
}

.tab-detail-pertanyaan {
  font-size: 16px;
  font-weight: bold;
  padding: 20px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  position: relative;
  margin-top: 2px;
}
.tab-detail-pertanyaan .help-icon-wrapper {
  position: relative;
}
.tab-detail-pertanyaan .help-icon-wrapper i {
  margin-left: 5px;
  cursor: pointer;
  position: relative;
}
.tab-detail-pertanyaan .help-icon-wrapper .tooltip {
  display: block;
  position: absolute;
  background-color: #333;
  color: #fff;
  font-size: 10px;
  padding: 8px 10px;
  border-radius: 4px;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  white-space: nowrap;
  line-height: 1.5;
  text-align: center;
  margin-top: 8px;
}
.tab-detail-pertanyaan .help-icon-wrapper .tooltip .tooltip-arrow {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #333;
}

.tab-detail-pertanyaan-number {
  padding: 20px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}
.tab-detail-pertanyaan-number .item {
  font-size: 16px;
  background-color: #fff;
  padding: 5px 10px;
  border: 1px solid #e0e0e0;
  margin-right: 5px;
  display: inline-block;
  border-radius: 4px;
}
.tab-detail-pertanyaan-number .item.active {
  background-color: var(--qn-maukuliah-400);
  border-color: var(--qn-maukuliah-400);
  color: #fff;
}

.detail-tampilan-pertanyaan-container {
  background-color: #fff;
  padding: 20px;
  margin: 20px 0;
  border-radius: 8px;
}
.detail-tampilan-pertanyaan-container-header {
  color: var(--qn-neutral-600);
  margin-bottom: 10px;
  font-size: 12px;
}
.detail-tampilan-pertanyaan-container-pertanyaan {
  font-weight: bold;
  margin-bottom: 25px;
  font-size: 14px;
}
.detail-tampilan-pertanyaan-container-jawaban {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}
.detail-tampilan-pertanyaan-container-jawaban li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.detail-tampilan-pertanyaan-container-jawaban li .form-control-custom {
  background-color: inherit;
  padding: inherit;
}
.detail-tampilan-pertanyaan-container-jawaban li .form-control-custom .form-control-radio-custom {
  margin-right: 10px;
  accent-color: var(--qn-edlink-400);
}
.detail-tampilan-pertanyaan-container-jawaban li .form-control-custom .form-control-radio-custom:checked + .form-control-label-radio-custom::before {
  border: 0.3125rem solid var(--qn-edlink-400);
}
.detail-tampilan-pertanyaan-container-jawaban li .form-control-custom .form-control-label-radio-custom {
  color: var(--qn-neutral-800);
}
.detail-tampilan-pertanyaan-container-jawaban li .radio-button-custom {
  display: inline-flex;
  align-items: center;
}

.todo-container {
  padding: 16px;
  background-color: var(--qn-white);
}

div.todo-menu-scroll {
  overflow: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.todo-menu {
  font-family: "InstrumentSans", sans-serif;
  font-size: 0.8rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 400;
  color: var(--qn-neutral-800);
  width: fit-content;
  max-width: 150px;
  height: 22px;
  padding: 2px 10px 2px 10px;
  border-radius: 11px;
  display: inline-block;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}

.todo-menu-active {
  font-family: "InstrumentSans", sans-serif;
  font-size: 0.8rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 400;
  color: var(--qn-neutral-800);
  width: fit-content;
  max-width: 150px;
  height: 22px;
  padding: 2px 10px 2px 10px;
  border-radius: 11px;
  display: inline-block;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
  color: white;
  background-color: green;
}

.todo-tab {
  width: fit-content;
  height: 22px;
  color: white;
  background-color: green;
  border-radius: 11px;
  padding: 2px 10px 2px 10px;
}

.todo-item-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.todo-item {
  display: flex;
  align-items: center; /* Vertikal center */
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.todo-left-content {
  display: flex;
  align-items: center;
}

.todo-icon-left {
  width: 24px; /* Sesuaikan ukuran icon */
  height: 24px;
}

.todo-text-content {
  flex: 1;
  padding: 0 10px;
}

.todo-title {
  font-family: "InstrumentSans", sans-serif;
  font-size: 0.8rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 600;
  color: var(--qn-neutral-800);
  display: block;
}

.todo-subtitle {
  display: block;
  font-family: "InstrumentSans", sans-serif;
  font-size: 0.8rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 500;
  color: var(--qn-neutral-600);
}

.todo-btn-load-more {
  width: fit-content;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  padding: 2px 10px 2px 10px;
  background-color: #F4FAF4;
  border-radius: 10px;
}

.todo-btn-load-more-text {
  color: var(--qn-edlink-400);
}

.todo-btn-load-more-icon {
  margin-left: 5px;
}

.account-section {
  margin: 8px 4px 0px 4px;
}
.account-section .img-container {
  width: 40px;
  height: 40px;
  margin-right: 12px;
}
.account-section .img-container .img-profile {
  border-radius: 16px;
  width: 40px;
  height: 40px;
}
.account-section .name-container .name {
  font-family: "InstrumentSans", sans-serif;
  font-size: 0.8rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 700;
  color: white;
}
.account-section .name-container .role {
  font-family: "InstrumentSans", sans-serif;
  font-size: 0.8rem;
  font-style: normal;
  line-height: 1.5;
  font-weight: 400;
  color: white;
}
.account-section .btn-container {
  width: 60px;
  margin: 0px 0px 0px auto;
}
.account-section .btn-container .btn-notif-wrapper {
  position: relative;
  display: inline-block;
}
.account-section .btn-container .btn-notif-wrapper .btn-notif {
  background-color: transparent;
  border: none;
  color: white;
  width: 20px;
  height: 40px;
  float: right;
  margin-left: 8px;
  position: relative;
}
.account-section .btn-container .btn-notif-wrapper .notif-indicator {
  position: absolute;
  top: 10px;
  right: 2px;
  width: 9px;
  height: 9px;
  background-color: orange;
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.account-section .btn-container .btn-helpdesk {
  background-color: transparent;
  border: none;
  color: white;
  width: 20px;
  height: 40px;
  float: right;
  margin-left: 12px;
}

.schedule {
  background-color: white;
  margin: 0px;
  padding: 16px;
  border-radius: 16px;
}

.schedule .item {
  margin-top: 8px;
  padding-bottom: 8px;
}
.schedule .item .sch-item-progress-begins {
  display: inline-flex;
  align-items: center;
  background-color: #f06292;
  color: white;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 4px;
}
.schedule .item .sch-item-progress-scheduled {
  display: inline-flex;
  align-items: center;
  background-color: #DBE4FA;
  color: #004680;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 4px;
}
.schedule .item .sch-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.schedule .item .sch-item-title {
  font-weight: 500;
  color: #333;
}
.schedule .item .sch-item-status {
  font-size: 12px;
}

.schedule .btn_schedule {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #F4FAF4;
  color: var(--qn-edlink-400);
  font-weight: 600;
  border: none;
  border-radius: 12px;
  padding: 0.25rem 0.5rem;
  float: right;
  font-size: 0.825rem;
  line-height: 1.125rem;
  text-wrap: nowrap;
}
.schedule .btn_schedule .icon {
  font-size: 1rem;
}

.schedule .empty_message {
  margin: auto;
  padding: 16px;
  vertical-align: middle;
  text-align: center;
}

.schedule .btn_detail {
  background-color: var(--qn-edlink-400);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 2px 8px 2px 8px;
  float: right;
  font-size: 12px;
}

.myacademic-section {
  background-color: white;
  margin: 8px 0px 0px 0px;
  padding: 16px;
}

.myacademic-section .menu {
  margin: 0px auto auto auto;
}

.myacademic-section img {
  margin: 0px auto auto auto;
  border-radius: 8px;
  border: none;
  width: 48px;
  height: 48px;
}

.myacademic-section .menu-title {
  margin-top: 2px;
  color: var(--qn-neutral-800);
  font-size: 11px;
  text-align: center;
}

.campusnews-section {
  background-color: white;
  margin: 8px 0px 0px 0px;
  padding: 16px;
}

.campusnews-section .btn-seeall {
  background-color: #F4FAF4;
  color: var(--qn-edlink-400);
  font-weight: 500;
  border: none;
  border-radius: 12px;
  padding: 2px 8px 2px 8px;
  float: right;
  font-size: 12px;
}

.campusnews-section .scrollmenu {
  overflow: auto;
  white-space: nowrap;
  height: 110px;
}

.campusnews-section .item {
  display: inline-block;
  color: white;
  width: 200px;
  height: 92%;
  border: 1px solid var(--qn-neutral-500);
  border-radius: 8px;
  margin-right: 12px;
  padding: 16px;
}

.campusnews-section .item .title {
  color: var(--qn-edlink-400);
  font-size: 14px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.campusnews-section .item .subtitle {
  color: var(--qn-neutral-700);
  font-size: 12px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.cnp-carousel-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* Sembunyikan scrollbar */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.cnp-carousel-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.cnp-carousel-item {
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding: 1rem;
  box-sizing: border-box;
  height: 300px;
}

.cnp-title {
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  padding-bottom: 4px;
}

.cnp-date {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  text-align: center;
  padding-bottom: 8px;
}

.cnp-description {
  font-size: 1rem;
}

.cnp-indicator-container {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  gap: 0.5rem;
}

.cnp-indicator-dot {
  width: 10px;
  height: 10px;
  background-color: #ccc;
  border-radius: 50%;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.cnp-active-dot {
  background-color: var(--qn-edlink-400);
}

.edlinknews-section {
  background-color: white;
  margin: 8px 0px 20px 0px;
  padding: 16px;
}

.edlinknews-section .btn-seeall {
  background-color: #F4FAF4;
  color: var(--qn-edlink-400);
  border: none;
  border-radius: 12px;
  padding: 2px 8px 2px 8px;
  float: right;
  font-size: 12px;
}

.edlinknews-section .scrollmenu {
  overflow: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.edlinknews-section .item {
  display: inline-block;
  color: white;
  width: 200px;
  height: 92%;
  border: 1px solid var(--qn-neutral-500);
  border-radius: 8px;
  margin-right: 16px;
  padding: 16px;
}

.edlinknews-section .item .title {
  color: var(--qn-edlink-400);
  font-size: 14px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.edlinknews-section .item .subtitle {
  color: var(--qn-neutral-700);
  font-size: 12px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.card-edlink-news {
  margin-right: 12px;
  display: inline-block;
  width: 80%;
  height: 200px;
  max-width: 250px;
  max-height: 300px;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  align-items: flex-end;
  font-family: Arial, sans-serif;
}

.card-edlink-news .layer-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.card-edlink-news .layer-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.682);
  z-index: 2;
}

.card-edlink-news .layer-content {
  position: relative;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  color: white;
  padding: 8px;
  text-align: left; /* Opsional, untuk menyesuaikan teks ke kiri */
  font-size: 12px;
}

.card-edlink-news .layer-content .title {
  font-weight: bold;
  margin-top: 10%;
  margin-bottom: 4px;
  word-wrap: break-word; /* Agar kata yang panjang dipotong */
  overflow: hidden;
  text-overflow: ellipsis; /* Opsional, untuk menambahkan titik-titik (...) jika teks terpotong */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card-edlink-news .layer-content .message {
  font-size: 10px;
  opacity: 0.8;
}

.edlink-news-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* start showing ellipsis when 3rd line is reached */
  white-space: pre-wrap; /* let the text wrap preserving spaces */
  z-index: 5;
  color: var(--qn-white);
}

.edlink-news-message {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* start showing ellipsis when 3rd line is reached */
  white-space: pre-wrap; /* let the text wrap preserving spaces */
  z-index: 5;
  color: var(--qn-white);
}

.connectaccount {
  background-color: white;
  margin: 0px 0px 16px 0px;
  padding: 16px;
  border-radius: 16px;
}

.connectaccount .btn_later {
  background-color: transparent;
  color: var(--qn-edlink-400);
  border: none;
  border-radius: 12px;
  padding: 2px 8px 2px 8px;
  float: left;
  font-size: 12px;
}

.connectaccount .btn_connect {
  background-color: var(--qn-edlink-400);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 2px 8px 2px 8px;
  float: right;
  font-size: 12px;
}

.ml-scroll-container {
  overflow-y: auto;
  scrollbar-width: none;
}

.ml-btn-send {
  position: fixed;
  width: fit-content;
  height: fit-content;
  bottom: 40px;
  left: 40px;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
  z-index: 10000;
}

.ml-btn-send-my-float {
  margin-top: 22px;
}

.ml-empty {
  min-height: 100vh;
  margin-top: 20%;
}

.ml-image {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  margin-top: 8px;
  margin-right: 16px;
}

.ml-truncate-title {
  display: -webkit-box; /* Gunakan box model untuk mendukung line clamp */
  -webkit-line-clamp: 3; /* Batasi maksimal 3 baris */
  -webkit-box-orient: vertical; /* Orientasi vertikal */
  overflow: hidden; /* Sembunyikan teks yang terpotong */
  text-overflow: ellipsis; /* Tambahkan ellipsis (...) */
  max-width: calc(100% - 40px); /* Sesuaikan dengan tata letak */
  word-wrap: break-word;
  overflow-wrap: break-word; /* Pecahkan kata jika terlalu panjang */
}

.ml-sticky-header {
  position: sticky;
  top: 0;
  z-index: 1; /* Pastikan tetap berada di atas elemen lainnya */
  background-color: #fff; /* Pastikan memiliki latar belakang */
  transition: all 0.3s ease-in-out;
}

.ml-not-sticky {
  position: relative; /* Kembali menjadi relatif jika tidak sticky */
}

.attach-card {
  border-radius: 6px;
  border-style: solid;
  border-width: 1px;
  border-color: #ddd;
  padding: 12px 16px 12px 16px;
}

.ml-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 0 0 10px 0;
  /* Untuk perangkat dengan lebar layar minimal 768px (misalnya tablet) */
}
@media (min-width: 768px) {
  .ml-gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

.gallery-item {
  border: 1px solid #ddd; /* Garis luar untuk item */
  border-radius: 8px; /* Sudut membulat */
  overflow: hidden; /* Pastikan gambar tidak keluar dari area */
  background-color: #ffffff; /* Warna latar belakang */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Bayangan untuk efek 3D */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.gallery-item img {
  width: 100%; /* Gambar memenuhi item sepenuhnya */
  height: auto; /* Menjaga rasio aspek gambar */
  display: block; /* Hilangkan celah di bawah gambar */
}

.gallery-item-footer {
  display: flex;
  align-items: center;
  padding: 8px 16px 8px 16px;
  column-gap: 4px;
  background-color: #fff;
}

.gallery-item-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px; /* Jarak antara ikon kiri dan teks */
}

.gallery-item-title {
  flex: 1; /* Isi sisa ruang di dalam flex */
  text-align: left; /* Teks rata kiri */
  font-size: 14px; /* Ukuran font judul */
  color: #333; /* Warna teks */
  margin: 0; /* Hilangkan margin bawaan */
}

.ml-gallery-item-icon-right {
  width: 16px;
  height: 16px;
  margin-left: 8px; /* Jarak antara teks dan ikon kanan */
}

.ml-upload-btn-containar {
  display: flex;
  column-gap: 8px;
}

.ml-upload-btn-subtitle {
  color: var(--qn-neutral-600);
}

.ml-upload-btn-youtube {
  height: fit-content;
  margin: auto 0 auto 0;
}

.ml-upload-btn-icon {
  width: 30px;
}

.sticky-folder-header {
  position: sticky; /* Posisi sticky */
  top: 0; /* Tetap pada posisi 0 dari atas */
  z-index: 10; /* Pastikan elemen berada di atas konten lainnya */
  background-color: white; /* Tambahkan latar belakang untuk menutupi konten di bawah */
  padding-top: 16px;
  margin-right: -2px;
  margin-left: -2px;
}

.krs-mk-ganjil {
  background-color: var(--qn-neutral-200);
  row-gap: 0;
  padding: 10px 20px 10px 20px;
}

.krs-mk-genap {
  background-color: var(--qn-white);
  row-gap: 0;
  padding: 10px 20px 10px 20px;
}

.khs-mk-ganjil {
  background-color: var(--qn-neutral-200);
  padding: 6px 0 6px 20px;
}

.khs-mk-genap {
  background-color: var(--qn-white);
  padding: 6px 0 6px 20px;
}

.student-ecard {
  background-color: var(--qn-edlink-400);
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

.student-ecard .bg-bottom {
  background-color: white;
  height: 40vh;
  margin: 0;
}

.student-ecard .qrcode {
  z-index: 1000;
  background-color: white;
  border-radius: 10px;
  width: 25vh;
  height: 25vh;
  margin: 0;
  margin-top: 32px;
  padding: 8px;
}

.student-ecard-ecard {
  z-index: 1000;
  background-image: url("/assets/images/bg-student-ecard.webp");
  background-repeat: no-repeat;
  background-size: 100% auto;
  border-radius: 10px;
  width: 40vh;
  height: 30vh;
  min-width: 340px;
  margin-top: 40px;
}

.ecard-content {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  width: 100%;
}

.ecard-left-section {
  flex: 1;
}

.ecard-right-section {
  width: 100px;
  height: 128px;
  background-color: transparent;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ecard-label {
  color: #888;
  font-size: 0.9em;
  margin-top: 8px;
}

.ecard-info {
  font-size: 1em;
  color: #333;
  margin: 2px 0;
}

.ecard-picture img {
  width: 100%;
  height: auto;
}

.ecard-footer {
  font-size: 0.9em;
  text-align: center;
  color: #555;
  width: 100%;
  margin-top: 8px;
}

.student-ecard p {
  color: white;
}

.student-ecard .img-edlink-text {
  z-index: 1000;
  background-image: url("/assets/images/img-edlink-ecard.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 124px;
  height: 50px;
  margin-top: 80px;
}

.p-container {
  padding-left: 20px;
  padding-right: 20px;
}

.p-card-profile-photo {
  width: 100px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50px;
  background-color: aqua;
}

.p-header-profile {
  text-align: center;
}

.account-item-container {
  padding: 8px 20px 8px 20px;
}

.account-item-title-container {
  display: flex;
  column-gap: 8px;
}

.account-item-name-and-flag {
  display: flex;
  justify-content: space-between;
}

.account-is-default {
  padding: 8px 16px 8px 16px;
  border-radius: 6px;
  border-width: 1px;
  border-color: var(--qn-edlink-400);
  border-style: solid;
}

.account-not-default {
  padding: 8px 16px 8px 16px;
  border-radius: 6px;
  border-width: 1px;
  border-color: var(--qn-neutral-300);
  border-style: solid;
}

.account-logo-card {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  align-content: center;
}

.account-connect-container {
  padding: 0 20px 20px 20px;
}

.account-connect-card-univ-item {
  padding: 6px 0 6px 0;
  display: flex;
  justify-content: space-between;
  column-gap: 8px;
}

.account-connect-btn-connect {
  padding: 10px 20px 10px 20px;
}

.account-connect-non-siakad-container {
  padding: 20px;
}

.select-account-card {
  padding: 6px 12px 6px 12px;
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--qn-neutral-300);
}

.select-account-active-card {
  padding: 6px 12px 6px 12px;
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--qn-edlink-400);
}

.notification-item {
  display: flex;
  align-items: flex-start;
  padding: 10px;
  background-color: white;
  margin-bottom: 10px;
}

.notification-item.unread {
  background-color: #FFF7E9;
}

.notification-item-img {
  min-width: 48px;
  min-height: 48px;
  width: 48px;
  height: 48px;
  margin-right: 10px;
  display: flex;
  position: relative;
}
.notification-item-img .image {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--qn-neutral-300);
  padding: 1px;
}
.notification-item-img .icon {
  width: 24px;
  height: 24px;
  position: absolute;
  right: 0;
  bottom: 0;
}

.notification-item-content {
  font-size: 14px;
}

.notification-item-title {
  font-weight: bold;
}

.notification-item-time {
  font-size: 12px;
  color: #888;
  margin-top: 5px;
}

.cd-btn-presence-update {
  color: var(--qn-edlink-400);
}

.cd-btn-sync {
  color: var(--qn-edlink-400);
}

.cd-btn-detail-presence {
  text-align: center;
  color: var(--qn-edlink-400);
}

.header-title-presence {
  color: var(--qn-neutral-600);
}

.cd-sticky-header {
  position: sticky;
  top: 60px;
  z-index: 1; /* Pastikan tetap berada di atas elemen lainnya */
  background-color: #fff; /* Pastikan memiliki latar belakang */
  transition: all 0.3s ease-in-out;
}

.cd-sticky-search-post {
  position: sticky;
  top: 98px;
  z-index: 1; /* Pastikan tetap berada di atas elemen lainnya */
  background-color: #fff; /* Pastikan memiliki latar belakang */
  transition: all 0.3s ease-in-out;
}

.cd-not-sticky {
  position: relative; /* Kembali menjadi relatif jika tidak sticky */
}

.card-list-classdetail-group {
  background-color: white;
  border-width: 1px;
  border-radius: 8px;
  border-color: #e2e7ff;
  border-style: solid;
}

.card-list-classdetail-group-title {
  display: flex;
  justify-content: space-between;
}

.flag-list-classdetail-group {
  height: fit-content;
  border-radius: 4px;
  background-color: #fff9dd;
  color: #ffa000;
  margin-top: 16px;
  margin-left: 16px;
  padding: 4px 8px 4px 8px;
}

.btn-option-list-classdetail-group {
  width: 20px;
  height: 20px;
  margin-top: 16px;
  margin-right: 16px;
}

.title-list-classdetail-group {
  margin-top: 16px;
  margin-left: 16px;
}

.card-list-classdetail-group-footer {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-left: 16px;
  padding-right: 16px;
}

.card-list-classdetail-group-footer-avatars {
  display: flex;
}

.member-list-classdetail-group-footer {
  width: fit-content;
  height: fit-content;
  margin-top: auto;
  margin-bottom: auto;
}

.avatar-list-classdetail-group-footer {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  border: 1px solid #ffffff;
  background-color: #ffa000;
  margin-left: -5px;
  display: flex; /* Flexbox untuk center */
  align-items: center; /* Center vertikal */
  justify-content: center; /* Center horizontal */
}

.group-team-detail-header {
  width: 100%;
  height: fit-content;
  background-image: url("images/detail-team/img_header_detail_team_ilusstration.svg"), linear-gradient(to bottom, #52af50, #1f7c1d);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
  padding: 0 20px;
}

.group-team-detail-header .title {
  font-size: 24px;
  font-weight: bold;
  margin-top: 16px;
  margin-bottom: 16px;
}

.group-team-detail-header .member {
  width: fit-content;
  background-color: #1a6718;
  border-radius: 50px;
  padding: 8px 12px; /* Tambah padding kanan untuk icon */
  color: white; /* Gunakan white langsung jika tidak pakai preprocessor */
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px; /* Spasi antara teks dan icon */
}

.group-team-detail-header .member .icon-right {
  width: 16px;
  height: 16px;
  filter: brightness(0) saturate(100%) invert(100%);
}

.group-team-detail-header .flag {
  width: fit-content;
  margin-top: 20px;
  padding: 4px 8px 4px 8px;
  background-color: #fff9dd;
  color: #ffa000;
  border-radius: 4px;
}

.group-team-detail-member-list-card {
  padding: 8px 16px 8px 16px;
  display: flex;
  align-items: center;
}

.group-team-detail-member-list-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: 10px;
}

.group-team-detail-member-list-sub-card {
  width: 100%;
  margin-left: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.group-team-detail-member-list-leader-flag {
  width: fit-content;
  padding: 4px 8px 4px 8px;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  border-color: green;
  color: green;
}

.group-join-request-list-card {
  display: flex;
  gap: 8px;
  padding: 0px 16px 0px 16px;
}
.group-join-request-list-card .buttons-card {
  display: flex;
  gap: 16px;
}

.btn-create-new-team {
  width: fit-content;
  height: fit-content;
  margin: 0px auto 0px auto;
  padding: 8px 16px 8px 16px;
  border-radius: 20px;
  background-color: var(--secondary);
  color: var(--white);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.btn-change-method-create-team {
  width: fit-content;
  height: fit-content;
  padding: 2px 6px 2px 6px;
  border-radius: 4px;
  border-width: 1px;
  border-color: var(--qn-edlink-400);
  border-style: solid;
  color: var(--qn-neutral-600);
}

.btn-choose-number-create-team {
  width: 100%;
  height: fit-content;
  display: flex;
  justify-content: space-between;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  border-width: 1px;
  border-color: var(--qn-neutral-300);
  border-style: solid;
  color: var(--qn-neutral-300);
}

.btn-choose-number-create-team-on {
  width: 100%;
  height: fit-content;
  display: flex;
  justify-content: space-between;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  border-width: 1px;
  border-color: var(--qn-primary-600);
  border-style: solid;
  color: var(--black);
}

.create-kelompok-preview-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.create-kelompok-preview-list .group-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  width: 100%;
  font-family: sans-serif;
  position: relative;
  box-shadow: 0 0 0 1px #f0f0f0;
}
.create-kelompok-preview-list .group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.create-kelompok-preview-list .group-tag {
  background-color: #fff7d6;
  color: #d38c00;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
}
.create-kelompok-preview-list .group-menu {
  background: none;
  border: none;
  font-size: 18px;
  color: #888;
  cursor: pointer;
}
.create-kelompok-preview-list .group-title {
  margin: 8px 0 4px;
}
.create-kelompok-preview-list .group-members,
.create-kelompok-preview-list .group-leader {
  color: #555;
  margin: 2px 0;
}
.create-kelompok-preview-list .group-avatars {
  display: flex;
  height: fit-content;
  margin-top: auto;
  width: fit-content;
  margin-left: auto;
}
.create-kelompok-preview-list .group-avatars img,
.create-kelompok-preview-list .group-avatars .avatar-text {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-left: -8px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #ccc;
  display: inline-block;
  object-fit: cover;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  line-height: 24px;
  background-color: #ccc;
  color: #fff;
}
.create-kelompok-preview-list .group-avatars img:first-child {
  margin-left: 0;
}
.create-kelompok-preview-list .group-footer {
  margin-top: 12px;
}
.create-kelompok-preview-list .view-members {
  display: block;
  margin: 0 auto;
  width: fit-content;
  font-size: 13px;
  color: #16a34a;
  font-weight: 600;
  text-decoration: none;
}

.kelompok-member-list .member-card {
  display: flex;
  justify-content: space-between;
}
.kelompok-member-list .flag-kelompok-leader {
  height: fit-content;
  padding: 4px 10px 4px 10px;
  margin-top: auto;
  margin-bottom: auto;
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  color: var(--qn-edlink-400);
}

.choose-leader-kelompok {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: var(--white);
}
.choose-leader-kelompok .group-tag {
  width: fit-content;
  background-color: #fff7d6;
  color: #d38c00;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
}
.choose-leader-kelompok .rb-check {
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  margin-top: auto;
  margin-bottom: auto;
}

.edit-kelompok {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background-color: var(--white);
}
.edit-kelompok .group-tag {
  width: fit-content;
  background-color: #fff7d6;
  color: #d38c00;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
}
.edit-kelompok .tf-group-name-counter {
  width: fit-content;
  margin-left: auto;
  color: var(--qn-neutral-500);
}
.edit-kelompok .member-list-header {
  display: flex;
  justify-content: space-between;
}
.edit-kelompok .member-list-header .label {
  width: fit-content;
}
.edit-kelompok .group-member-container {
  display: flex;
  flex-direction: column; /* agar <p> dan <Views::Button> ditumpuk vertikal */
  align-items: center; /* center secara horizontal */
  padding: 16px;
  margin-top: 6px;
  border: 1px solid #d1e7f8;
  border-radius: 8px;
  background-color: #f9fbff;
}
.edit-kelompok .group-member-container .empty {
  color: var(--qn-neutral-600);
  text-align: center;
  padding: 16px;
}
.edit-kelompok .group-member-container .member-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}
.edit-kelompok .group-member-container .member-item {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  background-color: white;
  border: 1px solid #8cb6e5;
  border-radius: 8px;
  font-size: 14px;
  color: #1f3b5b;
}
.edit-kelompok .group-member-container .member-item button {
  background: none;
  border: none;
  font-size: 14px;
  color: #1f3b5b;
  margin-left: 6px;
  cursor: pointer;
}
.edit-kelompok .group-leader-container {
  display: flex;
  flex-direction: column; /* agar <p> dan <Views::Button> ditumpuk vertikal */
  gap: 6px;
}
.edit-kelompok .group-leader-container .btn-choose-leader {
  display: flex;
  width: 100%;
  height: 35px;
  padding-left: 16px;
  padding-right: 16px;
  justify-content: space-between;
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  border-color: #e3e8ef;
}
.edit-kelompok .group-leader-container .btn-choose-leader .text {
  height: fit-content;
  margin-top: auto;
  margin-bottom: auto;
  color: var(--qn-neutral-500);
}
.edit-kelompok .group-leader-container .btn-choose-leader .text-selected {
  height: fit-content;
  margin-top: auto;
  margin-bottom: auto;
}
.edit-kelompok .group-leader-container .btn-choose-leader .icon {
  width: 16px;
  height: 16px;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 16px;
}
.edit-kelompok .group-leader-container .max-height-300 {
  position: absolute; /* atau fixed jika mau benar-benar tetap di layar */
  top: 100%; /* sesuaikan */
  left: 0;
  max-height: 300px;
  overflow-y: auto;
}

.add-member-kelompok {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 100px 16px;
  background-color: var(--white);
}
.add-member-kelompok .list-group-tag {
  color: var(--qn-neutral-500);
}

.create-kelompok-manual {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 0px 100px 0px;
  background-color: var(--white);
}
.create-kelompok-manual .kelompok-tabs {
  width: 100%;
  max-width: 100%;
  padding: 0px 16px 0px 16px;
  display: flex;
  column-gap: 8px;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.create-kelompok-manual .kelompok-tabs .tab {
  width: fit-content;
  height: fit-content;
  padding: 4px 16px 4px 16px;
  border-radius: 20px;
  border-style: solid;
  border-color: var(--qn-neutral-500);
  border-width: 1px;
  background-color: var(--qn-white);
  color: var(--qn-neutral-600);
}
.create-kelompok-manual .kelompok-tabs .tab-active {
  width: fit-content;
  height: fit-content;
  padding: 4px 16px 4px 16px;
  border-radius: 20px;
  border-style: solid;
  border-color: var(--qn-edlink-400);
  border-width: 1px;
  background-color: var(--qn-edlink-400);
  color: var(--qn-white);
}
.create-kelompok-manual .kelompok-tabs .add {
  width: fit-content;
  height: fit-content;
  padding: 4px 24px 4px 24px;
  border-radius: 20px;
  border-style: solid;
  border-color: var(--qn-edlink-400);
  border-width: 1px;
  background-color: var(--qn-white);
  color: var(--qn-edlink-400);
}

/* Styles for Student Engagement Component */
.ses {
  background: rgba(255, 255, 255, 0);
}

.ses-header {
  display: flex;
  gap: 16px;
  margin: 16px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  border: 1px solid var(--qn-neutral-300);
}

.ses-header .engagement-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 86px;
}

.ses-header .ses-status {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
}

.ses-header .score {
  font-size: 24px;
  font-weight: bold;
  color: #E08B3A;
  margin-top: 6px;
}

.ses-header .title {
  font-size: 14px;
  font-weight: bold;
  color: #000;
}

.ses-header .description {
  font-size: 13px;
  color: var(--qn-neutral-600);
}

.ses-session {
  background-color: white;
  padding: 16px;
  position: relative;
  border-bottom: 6px solid qnNeutral100;
}

.session-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.session-header .score {
  font-size: 24px;
  font-weight: bold;
  margin-top: 4px; /* Adds spacing between status and score */
}

.session-header .score.status-sangat-aktif {
  color: #006F3F;
}

.session-header .score.status-aktif {
  color: #D4AC20;
}

.session-header .score.status-kurang-aktif {
  color: #F58500;
}

.session-header .score.status-tidak-aktif {
  color: #B72C3A;
}

.session-header-right {
  display: flex;
  flex-direction: column; /* Stack status and score vertically */
  align-items: flex-end; /* Align to the right */
}

.ses-session .session-id {
  background-color: var(--qn-neutral-200);
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-flex; /* Ensure it wraps around content */
  align-items: center; /* Align image and text */
  gap: 6px; /* Space between image and text */
  width: auto; /* Ensure it wraps content */
  white-space: nowrap; /* Prevent breaking into a new line */
}

.ses-session .session-title {
  margin-top: 12px;
  font-size: 14px;
  font-weight: bold;
}

.ses-session .session-date {
  margin-bottom: 12px;
  font-size: 12px;
  color: #8c8c8c;
}

.ses-session .ses-status {
  font-size: 12px;
  border-radius: 4px;
  padding: 4px 8px;
}

.ses-status.status-sangat-aktif {
  color: #01966A;
  background: #EBFFF4;
}

.ses-status.status-aktif {
  color: #D4AC20;
  background: #FFFBEB;
}

.ses-status.status-kurang-aktif {
  color: #FF991F;
  background: #FFFBEB;
}

.ses-status.status-tidak-aktif {
  color: #EF233C;
  background: #FFF1F3;
}

.metrics {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

.metrics div {
  text-align: center;
}

.metric-label {
  font-size: 12px;
  color: #595959;
}

.class-member-list {
  padding: 16px;
}

.class-member-list h4 {
  margin-top: 8px;
}

.class-member-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
}

.avatar.avatar__circle {
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.member-info {
  flex: 1;
  margin-left: 8px;
}

.member-info .name {
  font-weight: 600;
  display: block;
}

.member-info .id {
  font-size: 12px;
  color: #666;
}

.member-more-btn {
  background: none;
  border: none;
  font-size: 20px;
  color: #888;
  cursor: pointer;
  padding: 4px;
}

.member-more-btn:hover {
  color: #333;
}

.rps-content ul,
.rps-content ol {
  list-style-position: outside;
  padding-left: 1rem; /* sesuaikan dengan desain */
  margin-left: 0; /* pastikan tidak dobel indentasi */
}

.rps-content li {
  margin-bottom: 0.5rem;
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  margin: auto;
}

.survey .type-selector .option {
  border-radius: 8px;
  border: 1px solid var(--qn-neutral-300);
  padding: 12px;
  margin-bottom: 8px;
}

.type-selector input[type=radio] {
  margin-right: 10px;
}

.required {
  color: #d9534f;
  margin-left: 5px;
}

.choice-group {
  width: 100%;
  position: relative;
}

.choice-char-counter {
  margin-top: 4px;
  margin-bottom: 4px;
  float: right;
  color: #888;
  font-size: 0.8rem;
}

.choice-group-with-delete {
  width: 100%;
  display: flex;
  align-items: top;
}

.hapus-button {
  margin-left: 8px;
  padding: 10px 12px;
  border: 1px solid var(--qn-neutral-300);
  background-color: white;
  color: #364152;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  height: 40px;
}

.add-choice {
  display: block;
  width: 100%;
  padding: 10px 0;
  background-color: #e6eafc;
  border: 1px solid #90a7f3;
  border-radius: 4px;
  color: #4a63e7;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
}

.add-choice:hover {
  background-color: #dce3fb;
}

.event-enddate-label-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #ffffff;
  border-radius: 4px;
  margin-top: 8px;
  margin-bottom: 4px;
}
.event-enddate-label-container .enddate-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.event-enddate-label-container .enddate-header .enddate-header-left {
  display: flex;
  align-items: center;
}
.event-enddate-label-container .enddate-header .enddate-header-left .enddate-text {
  color: #364152;
  font-size: 0.875rem;
  padding-bottom: 4px;
  font-weight: 500;
}
.event-enddate-label-container .enddate-header .enddate-switch {
  margin-left: auto;
}
.event-enddate-label-container .enddate-header .enddate-switch .enddate-switch-transform {
  transform: scale(0.8);
}
.event-enddate-label-container .enddate-header .enddate-switch .enddate-switch-label {
  cursor: pointer;
}
.event-enddate-label-container .enddate-datetime-container {
  margin-top: 10px;
  display: flex;
  align-items: center;
  width: 100%;
}
.event-enddate-label-container .enddate-datetime-container .enddate-datetime-input {
  width: 200px;
  padding: 10px;
  box-sizing: border-box;
  border: none;
  background: transparent;
  color: #000;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}
.event-enddate-label-container .enddate-datetime-container .enddate-datetime-icon {
  font-size: 14px;
  margin-left: 5px;
  margin-top: 2px;
  cursor: pointer;
}

.post-create-success {
  width: 100%;
  height: 100vh;
  padding-left: 16px;
  padding-right: 16px;
  background-color: var(--qn-edlink-400);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.post-create-success .image {
  max-width: 100px;
  max-height: 100px;
  margin: 100px auto 20px auto;
}
.post-create-success .pcs-title, .post-create-success .pcs-subtitle {
  color: white;
  text-align: center;
}
.post-create-success .btn-detail {
  width: 100%;
  height: 40px;
  text-align: center;
  color: white;
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  border-color: white;
  background-color: var(--qn-edlink-400);
  padding-top: 8px;
  padding-bottom: 8px;
  margin-top: auto;
  margin-bottom: 20px;
}

.welcome {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: var(--qn-edlink-400); /* Warna hijau latar belakang */
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.welcome-header {
  width: 100%;
  text-align: left;
  padding: 10px 20px;
  position: absolute;
  top: 32px;
}
.welcome-header a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
}
.welcome-header a:hover {
  text-decoration: underline;
}
.welcome .container {
  background-color: #fff;
  color: #000;
  border-radius: 10px;
  padding: 20px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
.welcome .container img {
  width: 50px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
}
.welcome .title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
.welcome .message {
  font-size: 14px;
  margin-bottom: 20px;
}
.welcome .info {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}
.welcome .button {
  width: 100%;
  display: inline-block;
  background-color: var(--qn-edlink-400);
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
}
.welcome .button:hover {
  background-color: #008f00;
}

.setup-profile-container {
  padding: 16px;
}

.attend-list-session {
  width: fit-content;
  padding: 4px 10px 4px 10px;
  background-color: #E7EAEF;
  border-radius: 4px;
  color: #4D5F72;
  text-align: center;
}

.attend-list-session-status {
  width: fit-content;
  padding: 4px 0 4px 0;
  color: #4D5F72;
}

p.attend-list-status-present {
  width: fit-content;
  padding: 4px 10px 4px 10px;
  background-color: #EBFFF4;
  border-radius: 4px;
  color: #11966A;
  text-align: center;
}

p.attend-list-status-alpha {
  width: fit-content;
  padding: 4px 10px 4px 10px;
  background-color: #FFF1F3;
  border-radius: 4px;
  color: #EF233C;
  text-align: center;
}

.attend-list-status-permit {
  width: fit-content;
  padding: 4px 10px 4px 10px;
  background-color: #FFFBEB;
  border-radius: 4px;
  color: #FF991F;
  text-align: center;
}

.attend-list-status-sick {
  width: fit-content;
  padding: 4px 10px 4px 10px;
  background-color: #EBFDFF;
  border-radius: 4px;
  color: #00ACC1;
  text-align: center;
}

.class-presence-sync-container {
  padding: 10px 20px 10px 20px;
}

.class-presence-sync-success-container {
  width: fit-content;
  border-radius: 8px;
  background-color: var(--qn-edlink-400);
  padding: 2px 10px 2px 10px;
}

.class-presence-sync-loading {
  color: var(--qn-edlink-400);
}

.class-presence-sync-btn {
  color: var(--qn-edlink-400);
}

.class-presence-sync-success-lbl {
  color: white;
}

.sync-detail-period-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0px 16px 0px 16px;
}

.sync-detail-period-spinner {
  display: flex;
  justify-content: space-between;
  border-width: 1px;
  border-style: solid;
  border-color: #e0e0e0;
  border-radius: 8px;
  padding: 10px 16px 10px 16px;
}

.sync-detail-classes-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0px 16px 10px 16px;
  margin-bottom: 100px;
  background-color: var(--qn-white);
}
.sync-detail-classes-container .text-info {
  color: var(--qn-neutral-600);
}

.sync-detail-info-jml-kls-limit {
  background-color: #DCEEEF;
  padding: 6px;
  margin: 0px 16px 0px 16px;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  border-color: #B4C3CB;
}

.post-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 16px;
}

.filter-post-badge-counter {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: red;
  justify-content: center;
  align-content: center;
  color: white;
}

.filter-post-txt-counter {
  color: var(--qn-white);
}

.post-badge-draft {
  width: fit-content;
  background-color: var(--secondary);
  border-radius: 6px;
  padding: 0px 8px 0px 8px;
  color: var(--qn-white);
}

.plyr__wrapper_full-height, .plyr__wrapper_full-height .plyr {
  height: 100%;
}

.schedule-detail {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 35vh;
  height: 100%;
  transition: max-height 0.4s ease;
  overflow-y: auto;
  background-color: var(--qn-white);
  box-shadow: 0px -2px 3px 0px var(--qn-neutral-400);
}
.schedule-detail_expanded {
  max-height: calc(100vh - 60px - 4px);
  transition: max-height 0.25s ease;
}
.schedule-detail__header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  position: sticky;
  top: 0;
  left: 0;
  background-color: var(--qn-white);
  padding-bottom: 1rem;
  border: none;
  width: 100%;
}
.schedule-detail__handle {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0.75rem 0 0.5rem 0;
}
.schedule-detail__handle .icon {
  font-size: 1.25rem;
}
.schedule-detail__text {
  margin-top: 0.25rem;
  padding: 0 1.25rem;
  text-align: start;
}
.schedule-detail__title {
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 600;
}
.schedule-detail__subtitle {
  font-size: 0.875rem;
  line-height: 1rem;
  font-weight: 400;
  color: var(--qn-neutral-800);
}
.schedule-detail__list {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
}
.schedule-detail__list-empty {
  margin: auto;
  padding: 2rem 0;
}

.schedule-item {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--qn-neutral-300);
}
.schedule-item__header {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.schedule-item__title {
  display: -webkit-box;
  max-width: 100%;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1.125rem;
  line-height: 1.625rem;
  font-weight: 400;
}
.schedule-item__subtitle {
  font-size: 0.825rem;
  line-height: 1.125rem;
  font-weight: 400;
  white-space: nowrap;
  color: var(--qn-edlink-500);
}
.schedule-item__content {
  margin-top: 0.25rem;
}
.schedule-item__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.schedule-item__helper {
  display: -webkit-box;
  max-width: 100%;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--qn-neutral-700);
}
.schedule-item__button {
  color: var(--qn-white);
  background-color: var(--qn-edlink-400) !important;
  font-weight: 500 !important;
  border-radius: 2rem !important;
  --qn-btn-padding-size: 0.25rem 0.825rem !important;
  --qn-btn-height-size: 1.5rem !important;
}

.schedule-item-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  color: var(--qn-neutral-800);
}
.schedule-item-info__text {
  color: var(--qn-neutral-800);
}

.monthly-schedules__container {
  padding: 0.75rem 1.25rem;
  max-height: calc(65vh - 60px - 4px);
  height: 100%;
  overflow-y: auto;
}

.monthly-picker {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: start;
}
.monthly-picker__text {
  display: flex;
  flex-direction: column;
}
.monthly-picker__title {
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 600;
}
.monthly-picker__subtitle {
  font-size: 0.875rem;
  line-height: 1rem;
  font-weight: 300;
  color: var(--qn-neutral-600);
}
.monthly-picker__slider {
  display: flex;
  gap: 0.5rem;
}

.monthly-calendar {
  padding: 1rem 0.5rem;
  overflow-x: auto;
}
.monthly-calendar__heading {
  min-width: 2rem;
  color: var(--qn-neutral-600);
  font-size: 0.825rem;
  line-height: 1.125rem;
  text-align: center;
}
.monthly-calendar__days-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
}
.monthly-calendar__button {
  margin: auto;
  color: var(--qn-black) !important;
  background-color: var(--qn-white) !important;
  font-weight: 400 !important;
  border-radius: 50% !important;
  min-width: var(--qn-btn-height-size);
  max-width: var(--qn-btn-height-size);
  --qn-btn-padding-size: 0.5rem !important;
  --qn-btn-height-size: 2rem !important;
  --qn-btn-font-size: 1rem !important;
  --qn-btn-line-height-size: 1.5rem !important;
}
.monthly-calendar__button:disabled {
  color: var(--qn-neutral-400) !important;
  background-color: var(--qn-white) !important;
}
.monthly-calendar__button_primary {
  color: var(--qn-white) !important;
  background-color: var(--qn-edlink-400) !important;
}
.monthly-calendar__button_outlined {
  border: 1px solid var(--qn-edlink-400) !important;
}
.monthly-calendar__button_with-notification {
  position: relative;
}
.monthly-calendar__button_with-notification::after {
  content: "";
  position: absolute;
  top: 0.125rem;
  right: 0;
  width: 0.4rem;
  height: 0.4rem;
  background-color: var(--qn-danger-500);
  border-radius: 50%;
}

.skeleton {
  margin: auto;
  min-width: 2rem;
  width: 2rem;
  min-height: 2rem;
  height: 2rem;
  background-color: var(--qn-neutral-300);
  border-radius: 0.75rem;
}
.skeleton_rounded {
  border-radius: 50%;
}
.skeleton_shimmer {
  background-image: linear-gradient(-45deg, var(--qn-neutral-300), var(--qn-neutral-200), var(--qn-neutral-300));
  background-size: 400% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes shimmer {
  0% {
    background-position: 200%;
  }
  100% {
    background-position: -200%;
  }
}
.previewer-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px); /* Kurangi tinggi navbar */
  margin-top: 60px; /* Pastikan kontainer mulai setelah navbar */
}

.previewer-video-with-progress-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px); /* Kurangi tinggi navbar */
}

.preview-progress-container {
  background-color: black;
  display: flex;
  flex-direction: column;
  height: 30px;
}

.previewer-content-top {
  flex: 9; /* 90% dari ruang */
}

.previewer-content-bottom {
  flex: 1; /* 10% dari ruang */
  display: flex; /* Aktifkan Flexbox */
  background-color: white;
  align-items: center; /* Pusatkan secara vertikal */
  justify-content: flex-end; /* Posisikan ke kanan secara horizontal */
  padding-right: 20px; /* Tambahkan jarak dari tepi kanan jika diperlukan */
  box-sizing: border-box; /* Pastikan padding tidak memengaruhi ukuran elemen */
}

.previewer-btn-download {
  position: absolute; /* Mengatur posisi relatif terhadap kontainer */
  bottom: 80px; /* Menempatkan tombol di 16px dari bawah kontainer */
  right: 16px; /* Menempatkan tombol di 16px dari kanan kontainer */
  transform: translate(0, 0); /* Menyesuaikan posisi jika diperlukan */
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto; /* Sesuaikan ukuran */
  height: auto;
  padding: 8px 16px; /* Memberikan ruang dalam tombol */
}

.nav-tab_invoice-payment {
  height: 48px;
}
.nav-tab_invoice-payment .nav-tab__item {
  color: var(--qn-neutral-500);
  width: 100% !important;
  height: 100%;
}

.invoice-payment__webview-container {
  width: 100%;
  height: calc(100vh - 60px - 48px - 4px);
}
.invoice-payment__webview-container_invisible {
  visibility: hidden;
}

.invoice-payment__loading-container {
  width: 100%;
  height: calc(100vh - 60px - 48px - 4px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.payment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #ddd;
}

.payment-id {
  font-size: 16px;
  font-weight: 600;
  color: var(--qn-neutral-900);
  padding-bottom: 8px;
}

.payment-title {
  font-size: 14px;
  color: var(--qn-neutral-600);
}

.payment-date {
  margin-top: 4px;
  font-size: 16px;
  color: var(--qn-neutral-700);
  font-weight: 500;
}

.payment-amount {
  font-size: 16px;
  font-weight: 600;
  color: var(--qn-neutral-900);
  text-align: right;
}

.payment-amount i {
  color: var(--qn-neutral-900);
}

.container-empty-payment-history {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 90vh;
  text-align: center;
}
.container-empty-payment-history .title {
  color: var(--qn-neutral-900);
  font-size: 16px;
  font-weight: bold;
  padding: 0px 16px 0px 16px;
}
.container-empty-payment-history .message {
  color: var(--qn-neutral-900);
  font-size: 16px;
  margin-bottom: 20px;
  padding: 0px 16px 16px 16px;
}

.payment-summary-container {
  padding: 16px;
  background-color: white;
}
.payment-summary-container .badge {
  display: inline-block;
  background-color: #d1fae5;
  color: var(--qn-edlink-400);
  font-weight: 500;
  border-radius: 4px;
}
.payment-summary-container .section-title {
  margin-top: 20px;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 16px;
}
.payment-summary-container .invoice-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}
.payment-summary-container .invoice-name {
  color: #1b2769;
  font-weight: 500;
}
.payment-summary-container .installment {
  margin-top: 4px;
  font-size: 14px;
  color: gray;
}
.payment-summary-container .invoice-amount {
  font-weight: bold;
  color: var(--qn-neutral-900);
}
.payment-summary-container .payment-method {
  color: var(--qn-neutral-900);
  margin-top: 4px;
}
.payment-summary-container .payment-details {
  margin-top: 8px;
}
.payment-summary-container .detail-item {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}
.payment-summary-container .invoice-total {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  font-size: 18px;
  margin-top: 16px;
  color: var(--qn-neutral-900);
}

.sticky-search-header {
  position: sticky;
  padding: 16px;
  z-index: 1; /* Pastikan tetap berada di atas elemen lainnya */
  background-color: #fff; /* Pastikan memiliki latar belakang */
  transition: all 0.3s ease-in-out;
}

.sticky-periode {
  position: sticky;
  top: 60px;
  padding-bottom: 8px;
  z-index: 1; /* Pastikan tetap berada di atas elemen lainnya */
  background-color: #fff; /* Pastikan memiliki latar belakang */
  transition: all 0.3s ease-in-out;
}

.list-scroll-container {
  overflow-y: auto;
  scrollbar-width: none;
}

.card-lecturer-consultation-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 5px;
  background-color: white;
}
.card-lecturer-consultation-item .avatar-custom {
  margin-right: 10px;
}
.card-lecturer-consultation-item .avatar-custom img {
  object-fit: contain;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--qn-neutral-300);
  padding: 1px;
}
.card-lecturer-consultation-item .details {
  flex: 1;
}
.card-lecturer-consultation-item .details .title {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  color: var(--qn-neutral-800);
}
.card-lecturer-consultation-item .details .subtitle {
  font-size: 14px;
  margin: 0;
  color: var(--qn-neutral-700);
}
.card-lecturer-consultation-item .details .timestamp {
  font-size: 12px;
  color: var(--qn-neutral-600);
}

.card-lecturer-consultation-topic-title {
  margin: 16px 16px 0 16px;
}

.card-lecturer-consultation-topic-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 5px;
  border-width: 1px;
  border-color: var(--qn-neutral-200);
  margin: 16px;
  border-style: solid;
  background-color: white;
}
.card-lecturer-consultation-topic-item .details {
  flex: 1;
}
.card-lecturer-consultation-topic-item .details .title {
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  color: var(var(--qn-neutral-800));
  overflow-wrap: break-word; /* Ensures long words wrap */
  word-break: break-word; /* Breaks long words if necessary */
  white-space: normal; /* Allows normal wrapping */
  max-width: 100%; /* Ensures it stays inside the container */
}
.card-lecturer-consultation-topic-item .details .subtitle {
  font-size: 14px;
  color: var(--qn-neutral-700);
}
.card-lecturer-consultation-topic-item .details .timestamp {
  margin-top: 4px;
  font-size: 12px;
  color: var(--qn-neutral-600);
}
.card-lecturer-consultation-topic-item .button {
  margin-left: 4px;
  background: var(--qn-edlink-400);
  color: white;
  padding: 4px 16px 4px 16px;
  border-radius: 15px;
  font-size: 14px;
  text-decoration: none;
}

.lecturer-consultation-button-create-topic {
  background-color: var(--qn-edlink-400);
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 32px;
  right: 20px;
  z-index: 1000;
}

.container-empty-topic {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 90vh;
  text-align: center;
}
.container-empty-topic .message {
  color: var(--qn-neutral-900);
  font-size: 16px;
  margin-bottom: 20px;
  padding: 16px;
}
.container-empty-topic .create-topic-button {
  display: flex;
  align-items: center;
  background-color: var(--qn-edlink-400);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s, box-shadow 0.3s;
}
.container-empty-topic .create-topic-button:hover {
  background-color: var(--qn-edlink-400);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}
.container-empty-topic .icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.container-empty-topic {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 90vh;
  text-align: center;
}
.container-empty-topic .message {
  color: var(--qn-neutral-900);
  font-size: 16px;
  margin-bottom: 20px;
  padding: 16px;
}
.container-empty-topic .create-topic-button {
  display: flex;
  align-items: center;
  background-color: var(--qn-edlink-400);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s, box-shadow 0.3s;
}
.container-empty-topic .create-topic-button:hover {
  background-color: var(--qn-edlink-400);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}
.container-empty-topic .icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.lecture-consultation-chats-list {
  background-color: white;
  overflow-y: auto;
  scrollbar-width: none;
  padding-bottom: 60px;
  flex-direction: column;
  scroll-behavior: smooth;
  max-height: 90vh; /* Limits height to 90% of the viewport */
}

.lecture-consultation-date {
  color: var(--qn-neutral-600);
  text-align: center;
  padding: 8px;
}

.lecture-consultation-chats-in {
  background-color: var(--qn-edlink-100);
  border-radius: 16px;
  padding: 16px;
  margin: 0px 64px 16px 16px;
  word-wrap: break-word;
  white-space: normal;
}

.lecture-consultation-chats-out {
  background-color: var(--qn-neutral-200);
  border-radius: 16px;
  padding: 16px;
  margin: 0px 8px 16px 64px;
  word-wrap: break-word;
  white-space: normal;
}

.lecture-consultation-chats-time {
  color: var(--qn-neutral-600);
  text-align: right;
}

.lecture-consultation-chats-input-container {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 10px;
}
.lecture-consultation-chats-input-container .lecture-consultation-chats-avatar {
  margin-right: 1rem;
}
.lecture-consultation-chats-input-container .lecture-consultation-chats-avatar img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.lecture-consultation-chats-input-container .lecture-consultation-chats-input-grid {
  flex-grow: 1;
}
.lecture-consultation-chats-input-container .lecture-consultation-chats-input-grid .col-md-12 {
  /* 🔹 Optional: Change Border Color When Focused */
}
.lecture-consultation-chats-input-container .lecture-consultation-chats-input-grid .col-md-12 .form-control-group-custom {
  height: 46px; /* Default height */
  min-height: 46px; /* Prevent shrinking below default */
  max-height: 120px; /* Prevent infinite growth */
  overflow-y: hidden; /* Hide scrollbar initially */
  resize: none; /* Disable manual resize */
  transition: height 0.1s ease-out;
  /* 🔹 Styling */
  border: 0.063rem solid #e3e8ef;
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
  line-height: 1.5; /* Controls line spacing */
  background-color: #fff;
  width: 100%;
  box-sizing: border-box;
}
.lecture-consultation-chats-input-container .lecture-consultation-chats-input-grid .col-md-12 .form-control-group-custom:focus {
  outline: none; /* Remove default blue outline */
  border: 0.063rem solid #4e91f6;
  box-shadow: 0 0.063rem 0.125rem rgba(16, 24, 40, 0.05), 0 0 0 0.25rem #e4eefd;
}
.lecture-consultation-chats-input-container .lecture-consultation-chats-input-grid .col-md-12 .clear-input-icon {
  padding-left: 4px;
}
.lecture-consultation-chats-input-container .send-icon-container {
  display: flex;
  align-items: center;
  justify-content: center; /* atau flex-end, tergantung kebutuhan */
  height: 46px; /* Default height */
  min-height: 46px;
  width: 46px;
}
.lecture-consultation-chats-input-container .lecture-consultation-chats-send-icon {
  margin-left: 0.8rem;
  margin-right: 0.5rem;
  font-size: 1.1rem;
  cursor: pointer;
}

/* ===== Consultation Info Modal ===== */
.ci__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: grid;
  place-items: end center; /* sheet muncul dari bawah */
  z-index: 1001;
  overflow: hidden; /* cegah halaman belakang ikut scroll */
}

.ci__card {
  width: 100%;
  background: #fff;
  margin-bottom: 0px;
  /* scroll layout */
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* jaga sudut tetap membulat */
}

/* Header */
.ci__header {
  position: sticky; /* tetap terlihat saat body scroll */
  top: 0;
  z-index: 1;
  background: #fff;
  padding: 20px 24px 8px 24px;
}

.ci__title {
  letter-spacing: 0.2px;
  color: #2c2c2c;
  margin: 0;
}

/* Tombol close */
.ci__close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 36px;
  height: 36px;
  border: none;
  background: #f2f2f2;
  border-radius: 999px;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.ci__close:active {
  transform: scale(0.96);
}

/* Body (scrollable) */
.ci__body {
  padding: 12px 24px 24px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* momentum scrolling iOS */
  overscroll-behavior: contain;
}

/* Group & Typography */
.ci__group {
  margin-top: 18px;
}

.ci__label {
  color: #2c2c2c;
}

.ci__value {
  margin-top: 6px;
  color: #333;
  line-height: 1.35;
  word-break: break-word;
}

/* Optional: scrollbar halus (WebKit) */
.ci__body::-webkit-scrollbar {
  width: 8px;
}

.ci__body::-webkit-scrollbar-thumb {
  background: #d6d6d6;
  border-radius: 8px;
}

.ci__body::-webkit-scrollbar-track {
  background: transparent;
}

.quill-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.quill-wrapper .ql-container {
  max-height: 100%;
  overflow-y: auto;
}

.container-status-krs {
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  height: 90vh;
  text-align: center;
}

.title-status-krs {
  font-size: 1.5rem;
  font-weight: bold;
  color: #1d2951;
}

.message-status-krs {
  font-size: 1rem;
  color: #444;
}

.footer-status-krs button {
  margin-top: 8px;
  background-color: var(--qn-edlink-400);
  color: white;
  font-size: 14px;
  font-weight: 600;
  padding: 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  width: 80%;
}

.footer-status-krs {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
  color: #7a7a7a;
}

.academic-info-container {
  position: fixed;
  top: 60px;
  z-index: 1000;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #F5F7FF; /* Light background */
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: 8px;
  text-align: center;
}

.academic-info-item {
  flex: 1;
}

.academic-info-label {
  font-size: 12px;
  color: #1b2769; /* Dark blue */
  margin: 0;
}

.academic-info-value {
  font-size: 14px;
  font-weight: bold;
  color: #1b2769;
  margin: 4px 0 0;
}

.academic-info-bold {
  font-weight: bold;
}

.academic-info-separator {
  width: 1px;
  height: 40px;
  background-color: #E2E7FF; /* Light gray separator */
  margin: 0 12px;
}

.krs-nav-tab {
  position: fixed;
  z-index: 999;
  top: 124px;
}

.krs-nav-tab-content {
  padding-top: 100px;
}

.krs-search {
  position: fixed;
  z-index: 999;
  width: 100%;
}

.krs-class-offered-container {
  padding-top: 60px;
}

.krs-class-offered-item {
  background-color: white;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.krs-class-offered-item .info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.krs-class-offered-item .checkbox {
  align-items: center;
  margin-left: auto; /* Pushes checkbox to the right */
  position: relative; /* Required for the overlay */
}

/* Overlay when disabled */
.krs-class-offered-item .checkbox.disabled::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7); /* White with transparency */
  pointer-events: none; /* Allows clicks to pass through */
}

/* Prevent clicking */
.krs-class-offered-item .checkbox.disabled {
  pointer-events: none; /* Prevents clicks */
}

.krs-class-offered-overlay-container {
  position: fixed;
  bottom: 24px;
  left: 16px;
  right: 16px;
  background-color: var(--qn-edlink-400); /* Green background */
  color: white;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  border-radius: 24px; /* Rounded corners at top */
}

.krs-class-offered-overlay-content {
  display: flex;
  flex-direction: column;
}

.krs-class-offered-overlay-content .info {
  color: white;
  font-size: 14px;
}

.krs-class-offered-overlay-content .selected, .saved {
  color: white;
  font-weight: bold;
}

.krs-class-offered-overlay-content .sks-info {
  color: white;
  font-size: 14px;
  font-weight: normal;
}

.krs-class-offered-overlay-content .sks-highlight {
  color: white;
  font-weight: bold;
}

.krs-class-offered-overlay-container .separator {
  width: 1px;
  height: 34px;
  background-color: white; /* Light gray separator */
}

.krs-class-offered-overlay-container .save-button {
  background-color: var(--qn-edlink-400);
  color: white;
  font-size: 14px;
  font-weight: bold;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.krs-class-saved-container {
  padding-bottom: var(--krs-info-height, 80px); /* Default value */
}

.krs-class-saved-container .empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60vh; /* Sesuaikan dengan kebutuhan */
  text-align: center;
  font-size: 14px;
  color: #6b7280;
}

.krs-class-saved-item {
  background-color: white;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.krs-class-saved-item .info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.krs-class-saved-item .delete {
  align-items: center;
  margin-left: auto; /* Pushes delete to the right */
  position: relative; /* Required for the overlay */
}

.krs-info-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: white;
  padding: 16px 16px 32px 16px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-top: 2px solid #ddd;
}

.krs-info-container .krs-info {
  color: black;
  font-size: 14px;
  text-align: left;
}

.krs-info-container .krs-info p {
  margin-bottom: 8px;
}

.krs-info-container .krs-info strong {
  font-weight: bold;
}

.krs-info-container .krs-button {
  margin-top: 8px;
  background-color: var(--qn-edlink-400);
  color: white;
  font-size: 14px;
  font-weight: 600;
  padding: 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
}

.krs-info-container .krs-button:hover {
  background-color: var(--qn-edlink-400);
}

.submission-history-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: white;
  gap: 16px;
}

.submission-history-item img {
  width: 30px;
  height: 30px;
  border-radius: 30%;
  border: 1px solid #ddd;
}

.submission-history-item-text {
  display: flex;
  flex-direction: column;
}

.submission-history-item-text p {
  margin: 0;
}

.submission-history-item-text .title {
  font-weight: 600;
  color: black;
}

.submission-history-item-text .timestamp {
  font-size: 12px;
  color: gray;
}

.submission-history-empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh; /* Sesuaikan dengan kebutuhan */
  text-align: center;
  font-size: 14px;
  color: #6b7280;
}

.chat-search-container {
  padding: 16px 8px 0 8px;
}

.chat-list-scroll-container {
  max-height: calc(100vh - 64px); /* Adjust for your layout */
  overflow-y: auto;
  scrollbar-width: none;
  background-color: white;
}

.card-chat-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 5px;
  background-color: white;
}
.card-chat-item .avatar-custom {
  margin-right: 10px;
}
.card-chat-item .avatar-custom img {
  object-fit: contain;
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius: 50%;
  border: 1px solid var(--qn-neutral-300);
  padding: 1px;
}
.card-chat-item .details {
  flex: 1;
  min-width: 0;
}
.card-chat-item .details .title {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  color: var(--qn-neutral-800);
  max-width: 100%;
}
.card-chat-item .details .subtitle {
  font-size: 14px;
  margin: 0;
  color: var(--qn-neutral-700);
  max-width: 100%;
}
.card-chat-item .details .timestamp {
  font-size: 12px;
  color: var(--qn-neutral-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.floating-button-newchat {
  background-color: var(--qn-warning-400);
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 84px;
  right: 20px;
  z-index: 1000;
}

.kb-welcome-title {
  margin-top: 50%;
  text-align: center;
  padding-left: 16px;
  padding-right: 16px;
}

.kb-welcome-subtitle {
  text-align: center;
  padding-left: 16px;
  padding-right: 16px;
}

.kb-welcom-btn-learn {
  padding: 30px 16px 30px 16px;
}

.kb-detail {
  background-color: #f5f7ff;
}

.kb-detail-header {
  padding: 30px 16px 30px 16px;
  background-color: #f5f7ff;
}

.kb-detail-index-prestasi {
  padding: 16px;
  background-color: var(--qn-white);
}
.kb-detail-index-prestasi .text-subtitle {
  color: #7985cb;
}
.kb-detail-index-prestasi .content {
  background-color: var(--qn-white);
  padding: 16px;
  border-radius: 8px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--qn-neutral-200);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
}
.kb-detail-index-prestasi .growth {
  display: flex;
  gap: 4px;
}
.kb-detail-index-prestasi .text-up {
  color: #279b24;
}
.kb-detail-index-prestasi .text-down {
  color: #dc1818;
}
.kb-detail-index-prestasi .text-stagnant {
  color: #7985cb;
}

.kb-detail-sks {
  margin-top: 6px;
  padding: 16px;
  background-color: var(--qn-white);
}
.kb-detail-sks .text-subtitle {
  color: #7985cb;
}
.kb-detail-sks .content {
  background-color: var(--qn-white);
  padding: 16px;
  border-radius: 8px;
  border-style: solid;
  border-width: 1px;
  border-color: #e2e7ff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
}
.kb-detail-sks .content .flex {
  display: flex;
  justify-content: space-between;
}
.kb-detail-sks .content .text-lulus-min {
  color: #7985cb;
}

.kb-detail-nilai {
  margin-top: 6px;
  padding: 16px;
  background-color: var(--qn-white);
}

.nilai-modal-header-container {
  display: flex;
  justify-content: space-between;
}

.nilai-modal-matkul-container {
  display: flex;
  gap: 16px;
}
.nilai-modal-matkul-container .txt-matkul {
  color: #7985cb;
}
.nilai-modal-matkul-container .txt-sks {
  color: #7985cb;
}

.nilai-modal-matkul-list-container {
  max-height: 300px;
  overflow-y: auto;
}
.nilai-modal-matkul-list-container .nilai-modal-matkul-list-card {
  display: flex;
  gap: 10px;
}

.kb-detail-ip {
  background-color: #f5f7ff;
}
.kb-detail-ip .chart {
  margin-top: 16px;
  padding: 0px 16px 16px 16px;
  background-color: var(--qn-white);
}
.kb-detail-ip .chart .btn-filter {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.kb-detail-ip .list {
  margin-top: 6px;
  padding: 16px 16px 0px 16px;
  background-color: var(--qn-white);
}
.kb-detail-ip .list-title-container {
  display: flex;
  justify-content: space-between;
}
.kb-detail-ip .list-subtitle {
  color: #7985cb;
}
.kb-detail-ip .list-sks {
  color: #7985cb;
}

.kb-detail-sks-detail {
  background-color: #f5f7ff;
}
.kb-detail-sks-detail .header-sks {
  padding: 20px 16px 20px 16px;
  display: flex;
  justify-content: space-between;
  background-color: white;
}
.kb-detail-sks-detail .header-sks .header-sks-subtitle {
  color: #7985CB;
}
.kb-detail-sks-detail .list-container {
  margin-top: 6px;
  padding: 0px 16px 0px 16px;
  background-color: var(--qn-white);
}
.kb-detail-sks-detail .list-sks {
  padding-top: 30px;
}
.kb-detail-sks-detail .list-sks-item {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.kb-detail-sks-detail .list-sks-item .text-end {
  width: 30%;
  text-align: end;
}
.kb-detail-sks-detail .list-sks-item .sks-color {
  color: #7985cb;
}
.kb-detail-sks-detail .tab {
  margin-top: 16px;
  margin-right: 10px;
  padding: 4px 10px 4px 10px;
  background-color: var(--qn-white);
  border-radius: 20px;
  border-color: #e2e7ff;
  border-style: solid;
  border-width: 1px;
}
.kb-detail-sks-detail .tab-active {
  margin-top: 16px;
  margin-right: 10px;
  padding: 4px 10px 4px 10px;
  background-color: #279b24;
  border-radius: 20px;
  border-color: var(--qn-edlink-300);
  border-style: solid;
  border-width: 1px;
  color: var(--qn-white);
}

.bimbingan-skripsi-container .student-card {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.bimbingan-skripsi-container .student-card .avatar-title-container {
  display: flex;
}
.bimbingan-skripsi-container .student-card .bs-sc-title-info {
  margin-top: auto;
  margin-bottom: auto;
}
.bimbingan-skripsi-container .detail-skripsi-header {
  padding: 16px;
  display: flex;
  background-color: #f5f7ff;
  justify-content: space-between;
  gap: 8px;
}
.bimbingan-skripsi-container .detail-skripsi-header .dsh-avatar-title-container {
  display: flex;
}
.bimbingan-skripsi-container .detail-skripsi-header .dsh-title-info {
  margin-top: auto;
  margin-bottom: auto;
}

.bimbingan-skripsi-kartu {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0;
}
.bimbingan-skripsi-kartu .bsk-left-container {
  max-width: 60%;
  padding-left: 16px;
  display: flex;
  gap: 8px;
}
.bimbingan-skripsi-kartu .bsk-left-container .bsk-text-number {
  align-self: flex-start;
  margin-left: 16px;
  margin-top: auto;
  margin-bottom: auto;
}
.bimbingan-skripsi-kartu .bsk-left-container .bsk-text-topic {
  font-weight: 600;
}
.bimbingan-skripsi-kartu .bsk-left-container .bsk-text-info {
  color: var(--qn-neutral-600);
}
.bimbingan-skripsi-kartu .bsk-left-container .bsk-user-container {
  max-width: 85%;
  padding-right: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.bimbingan-skripsi-kartu .bsk-left-container .bsk-user-container .bsk-user-text {
  color: var(--qn-neutral-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bimbingan-skripsi-kartu .bsk-verified-text {
  padding: 0px 8px 0px 8px;
  margin-right: 16px;
  max-width: 150px;
  background-color: #f0fdf9;
  border-radius: 10px;
  color: #0e9384;
}
.bimbingan-skripsi-kartu .bsk-unverified-text {
  padding: 0px 8px 0px 8px;
  margin-right: 16px;
  max-width: 150px;
  background-color: #fbe2dd;
  border-radius: 10px;
  color: var(--qn-danger-400);
}
.bimbingan-skripsi-kartu .bsk-chevron-right {
  margin-right: 16px;
  margin-top: auto;
  margin-bottom: auto;
}

.bimbingan-skripsi-buat-kartu {
  padding: 16px;
}
.bimbingan-skripsi-buat-kartu .tf-counter {
  margin-top: 2px;
  color: var(--qn-neutral-600);
  text-align: end;
}

.bimbingan-skripsi-detail-kartu-container .bsdk-info-bimbingan {
  padding: 0px 16px 0px 16px;
  row-gap: 6px;
}
.bimbingan-skripsi-detail-kartu-container .bsdk-info-bimbingan .bsdk-status-validated {
  width: fit-content;
  padding: 2px 8px 2px 8px;
  background-color: #f0fdf9;
  color: #0e9384;
  border-radius: 15px;
}
.bimbingan-skripsi-detail-kartu-container .bsdk-info-bimbingan .bsdk-status-unvalidated {
  width: fit-content;
  padding: 2px 8px 2px 8px;
  background-color: #fbdbdb;
  color: var(--qn-danger-400);
  border-radius: 15px;
}
.bimbingan-skripsi-detail-kartu-container .bsdk-btn-cancel {
  width: 100%;
  padding: 14px;
  background-color: var(--qn-white);
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--qn-edlink-400);
  color: var(--qn-edlink-400);
  text-align: center;
}
.bimbingan-skripsi-detail-kartu-container .bsdk-btn-validate {
  width: 100%;
  padding: 14px;
  border-radius: 6px;
  background-color: var(--qn-edlink-400);
  color: var(--qn-white);
  text-align: center;
}

.setting-menu {
  padding: 10px 20px 10px 20px;
  background-color: var(--qn-white);
}

.setting-menu-locale {
  padding: 10px 20px 10px 20px;
  background-color: var(--qn-white);
  display: flex;
  justify-content: space-between;
}
.setting-menu-locale .sm-change-id-off {
  width: 40px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: var(--qn-neutral-300);
  color: var(--qn-neutral-800);
  text-align: center;
}
.setting-menu-locale .sm-change-id-on {
  width: 40px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: green;
  color: var(--qn-white);
  text-align: center;
}
.setting-menu-locale .sm-change-en-on {
  width: 40px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  background-color: green;
  color: var(--qn-white);
  text-align: center;
}
.setting-menu-locale .sm-change-en-off {
  width: 40px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  background-color: var(--qn-neutral-300);
  color: var(--qn-neutral-800);
  text-align: center;
}

.bg-cover-merdeka {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/assets/images/explore/background_merdeka.svg");
}

.bg-cover-spada {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/assets/images/explore/background_spada.svg");
}

.bg-cover-umum {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/assets/images/explore/background_umum.svg");
}

.explore {
  background-color: transparent;
  margin: 8px 0px 0px 0px;
  padding: 16px;
}

.explore .btn-seeall {
  background-color: #F4FAF4;
  color: var(--qn-edlink-400);
  border: none;
  border-radius: 8px;
  padding: 2px 8px 2px 8px;
  float: right;
  width: 100%;
  height: 32px;
}

.explore .scrollmenu {
  height: 260px;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.explore .scrollmenu::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.explore .item {
  display: inline-block;
  background-color: white;
  color: #333;
  width: 200px;
  height: 250px;
  border: 1px solid var(--qn-neutral-500);
  border-radius: 8px;
  margin-right: 12px;
  overflow: hidden;
  cursor: pointer;
  vertical-align: top;
}

.explore .item-header {
  width: 100%;
  height: 110px;
  background-color: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.explore .item-header.with-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
}

.explore-item-content {
  padding: 12px;
  height: 140px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.explore-text {
  flex-grow: 1;
  overflow: hidden;
}

.explore-title,
.explore-subtitle {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  max-height: 2.8em;
  word-break: break-word;
  text-wrap: wrap;
}

.explore-title {
  margin-bottom: 4px;
  color: #0b0b33;
}

.explore-subtitle {
  font-size: 14px;
  margin-bottom: 4px;
  color: #99A1AE;
}

.explore-price {
  font-weight: bold;
  color: #1f2937;
  margin-top: auto;
}

.explore .university-info {
  display: flex;
  align-items: center;
  margin-top: 4px;
}

.explore .university-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  margin-right: 6px;
}

.explore .university-name {
  font-size: 12px;
  color: #40516B;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kelas-header {
  position: sticky;
  top: 60px;
  background: #f4f7f9;
  z-index: 1;
  padding: 16px;
}

.kelas-header h1 {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.kelas-header p {
  text-align: center;
  margin-top: 8px;
  color: #555;
  font-size: 14px;
}

.search-box {
  display: flex;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin-top: 16px;
}

.search-box input {
  flex: 1;
  border: none;
  padding: 12px;
  font-size: 14px;
}

.search-box button {
  background: #3aaa35;
  color: white;
  border: none;
  padding: 0 16px;
}

.kelas-list-container {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  margin: auto;
  background: #f4f7f9;
  padding: 64px 16px 16px 16px;
}

.kelas-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kelas-card {
  display: flex;
  height: 140px;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.kelas-avatar {
  background: #ddd;
  font-weight: bold;
  font-size: 20px;
  width: 120px;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #333;
}

.kelas-avatar.with-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
}

.kelas-info {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  overflow: hidden; /* Optional, biar lebih aman */
}

.kelas-nama {
  color: #0b0b33;
}

.kelas-jurusan {
  color: #9ca3af;
  margin-top: 2px;
  font-size: 14px;
}

.kelas-harga {
  margin-top: 8px;
  font-weight: bold;
  color: #1f2937;
}

.university-info {
  display: flex;
  align-items: center;
  margin-top: 4px;
  overflow: hidden;
}

.university-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  margin-right: 6px;
  flex-shrink: 0;
}

.university-name {
  font-size: 12px;
  color: #40516B;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex-shrink: 1;
}

.kelas-nama,
.kelas-jurusan,
.university-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  max-height: 2.8em;
  word-break: break-word;
}

.not-found-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
  min-height: 70vh;
}

.not-found-image {
  width: 160px;
  height: 160px;
  margin-bottom: 24px;
}

.not-found-text {
  font-size: 18px;
  color: #374151; /* abu-abu tua */
  text-align: center;
}

.not-found-text .highlight {
  font-weight: 600;
}

.not-found-subtext {
  margin-top: 8px;
  color: #6b7280; /* abu-abu muda */
  font-size: 14px;
  text-align: center;
  max-width: 300px;
}

.fr-wrapper {
  padding-top: 16px;
}

.fr-title {
  text-align: center;
  margin: 0 0 8px 0;
  font-weight: 800;
  font-size: 16px;
  color: #111827;
}

.fr-subtitle {
  text-align: center;
  font-size: 14px;
  margin: 0 auto 14px;
  max-width: 520px;
  line-height: 1.5;
  color: #6b7280;
}

.fr-stars {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.fr-star {
  appearance: none;
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
  line-height: 0;
  transition: transform 0.1s ease;
}

.fr-star:hover {
  transform: scale(1.05);
}

.fr-star-svg {
  width: 34px;
  height: 34px;
  fill: #d1d5db; /* abu-abu */
  transition: fill 0.15s ease;
}

.fr-star.is-active .fr-star-svg {
  fill: #D76101; /* orange */
}

.fr-input {
  padding-top: 16px;
}

.review-list {
  padding: 0 16px 16px 16px;
}

.review-item {
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
}

.review-header {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.review-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 10px;
}

.review-name {
  font-size: 14px;
  font-weight: bold;
}

.review-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 5px 0;
}

.review-rating {
  display: flex;
  align-items: center;
}

.review-rating .star {
  font-size: 16px;
  color: #ccc;
  margin-right: 8px;
}

.review-rating .star.filled {
  color: #D76101; /* orange */
}

.review-date {
  font-size: 12px;
  color: #888;
}

.review-comment {
  margin-top: 12px;
  margin-bottom: 8px;
  overflow-wrap: break-word;
}

.review-response {
  display: flex;
  align-items: flex-start;
  background-color: #f4f4f4;
  padding: 10px;
  border-radius: 8px;
}

.response-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  margin-top: 2px;
}

.response-content {
  width: 100%;
}

.response-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.response-name {
  font-size: 14px;
  font-weight: bold;
}

.response-date {
  font-size: 12px;
  color: #888;
}

.response-text {
  margin-top: 4px;
  overflow-wrap: break-word;
}

.join-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 80vh;
  justify-content: center;
}

.join-title {
  color: #0d1c5a;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.join-subtitle {
  color: #6e6e6e;
  font-size: 14px;
  margin-bottom: 2rem;
}

.qr-frame {
  position: relative;
  width: 250px;
  height: 250px;
  margin-bottom: 2rem;
}

#qr-reader {
  width: 100%;
  height: 100%;
  background: #000; /* kalau mau latar hitam */
}

#qr-reader video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover; /* biar video 'cover' area dan tidak ada black bars */
}

.corner {
  width: 40px;
  height: 40px;
  border: 4px solid #fba919;
  position: absolute;
  border-radius: 4px;
}

.top-left {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}

.top-right {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
}

.bottom-left {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
}

.bottom-right {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}

.join-or {
  color: #6e6e6e;
  margin: 1rem 0 0.5rem;
  font-size: 14px;
}

.join-pin-button {
  background: none;
  border: none;
  color: #0d1c5a;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}

p.form-control__input {
  line-height: 1.5;
  font-size: 14px;
  color: #333;
  max-height: none; /* sesuai style inline kamu */
}

/* List angka */
p.form-control__input ol {
  padding-left: 1.5rem; /* indent */
  margin: 0.5rem 0;
  list-style-type: decimal;
}

/* List bullet */
p.form-control__input ul {
  padding-left: 1.5rem;
  margin: 0.5rem 0;
  list-style-type: disc;
}

/* Item list */
p.form-control__input li {
  margin-bottom: 0.25rem;
}

/* Tabel */
p.form-control__input table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.75rem 0;
}

p.form-control__input th,
p.form-control__input td {
  border: 1px solid #ccc;
  padding: 0.5rem;
  text-align: left;
}

p.form-control__input th {
  background-color: #f5f5f5;
}

/* Link */
p.form-control__input a {
  color: #007bff;
  text-decoration: underline;
}

.join-request {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  border-radius: 12px;
  background-color: white;
}

.join-request .avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.join-request .content {
  margin-left: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.join-request .info {
  margin-bottom: 8px;
}

.join-request .name {
  font-weight: bold;
  color: #1d1d1f;
}

.join-request .time {
  color: #6e6e73;
  font-size: 14px;
}

.join-request .actions {
  margin-top: 4px;
  display: flex;
  gap: 8px;
}

.join-request .btn-decline {
  padding: 6px 16px;
  border: 1px solid #a5b4fc;
  color: #3b82f6;
  background: transparent;
  border-radius: 8px;
  width: 100%;
  cursor: pointer;
}

.join-request .btn-accept {
  padding: 6px 16px;
  background-color: var(--qn-edlink-400);
  color: white;
  border: none;
  border-radius: 8px;
  width: 100%;
  cursor: pointer;
}

.mahasiswa-wali-header {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  padding: 16px;
  border-bottom: 1px solid #ddd;
  background-color: white;
  z-index: 3;
}

.filter-container {
  width: 100%;
  margin-top: 8px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.period-selector {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.period-selector .choices__inner {
  width: auto;
  padding-right: 2rem; /* Kasih ruang buat icon dropdown */
  padding-left: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 12px;
  display: flex;
  align-items: center;
}

.period-selector .choices__list--single {
  white-space: nowrap; /* Biar isi gak wrap */
}

.period-selector .sort {
  white-space: nowrap; /* biar teks 'sort by' tidak turun ke bawah */
}

.period-selector label {
  margin-bottom: 8px;
}

.filter-container-button-wrapper {
  padding-top: 20px;
  margin-left: auto;
}

.show-button {
  background-color: #00a651;
  color: white;
  border: none;
  padding: 8px 16px;
  height: 40px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}

.student-list {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-top: 126px;
}

.student-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid #eeeded;
}

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

.student-name {
  font-weight: bold;
  font-size: 16px;
  color: #1b1b5e;
}

.student-major {
  font-size: 14px;
  color: gray;
  margin-top: 2px;
}

.student-id {
  font-weight: bold;
  font-size: 14px;
  margin-top: 2px;
}

.student-menu {
  width: 24px;
  text-align: right;
  font-size: 24px;
  color: #555;
  cursor: pointer;
}

.tugas-report .filters {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  background-color: white;
  padding: 16px;
  z-index: 4;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.tugas-report .filter-button {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 20px;
  background-color: white;
  font-size: 12px;
  cursor: pointer;
}

.tugas-report .filter-button.active {
  background-color: var(--qn-edlink-100);
  border-color: green;
  color: green;
  font-weight: bold;
}

.tugas-report .sort-select {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  gap: 6px;
}

.tugas-report .sort-select .choices__inner {
  width: auto;
  padding-right: 2rem; /* Kasih ruang buat icon dropdown */
  padding-left: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 12px;
  display: flex;
  align-items: center;
}

.tugas-report .sort-select .choices__list--single {
  white-space: nowrap; /* Biar isi gak wrap */
}

.tugas-report .sort-select .sort {
  white-space: nowrap; /* biar teks 'sort by' tidak turun ke bawah */
}

.tugas-report .submission-list {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  margin-top: 114px;
  padding: 0;
}

.tugas-report .submission-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #e5e5e5;
  gap: 12px;
}

.tugas-report .submission-index {
  font-size: 14px;
  font-weight: bold;
  width: 24px;
}

.tugas-report .submission-info {
  display: flex;
  flex-direction: column;
}

.tugas-report .submission-name {
  font-weight: bold;
  font-size: 14px;
}

.tugas-report .submission-id {
  font-size: 12px;
  color: #6c757d;
}

.tugas-report .submission-score {
  background-color: #f5f8ff;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tugas-report .submission-grade {
  color: #6c757d;
  border: 1px solid #e5e5e5;
  padding: 8px 16px 8px 16px;
  border-radius: 8px;
  font-size: 12px;
}

.tugas-report .submission-status {
  font-size: 12px;
  font-style: italic;
  color: #6c757d;
}

.tugas-setnilai {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  font-family: sans-serif;
  position: relative;
}

.tugas-setnilai .header-tabs {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  background: white;
  z-index: 20;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.tugas-setnilai .user-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #eeeded;
}

.tugas-setnilai .avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.tugas-setnilai .user-details {
  flex: 1;
  margin-left: 12px;
}

.tugas-setnilai .username {
  font-size: 12px;
  font-weight: bold;
  margin: 0;
}

.tugas-setnilai .userid {
  font-size: 12px;
  color: gray;
  margin: 0;
}

.tugas-setnilai .user-score {
  display: flex;
  align-items: center;
  background-color: #f8f8ff;
  border-radius: 12px;
  padding: 4px 8px;
  font-weight: bold;
}

.tugas-setnilai .star {
  margin-right: 4px;
  color: orange;
}

.tugas-setnilai .submission-grade {
  color: #6c757d;
  padding: 8px;
  border-radius: 8px;
  font-size: 12px;
}

.tugas-setnilai .tabs {
  font-size: 12px;
  display: flex;
  border-bottom: 2px solid #ccc;
}

.tugas-setnilai .tab {
  flex: 1;
  padding: 8px;
  text-align: center;
  background: none;
  border: none;
  font-weight: bold;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tugas-setnilai .tab.active {
  color: green;
  border-bottom-color: green;
}

.tugas-setnilai .content-section {
  flex: 1;
  overflow-y: auto;
  margin-top: 130px; /* offset header height */
  padding-bottom: 100px; /* avoid overlap with fixed button */
}

.tugas-setnilai .submission {
  font-size: 14px;
  padding: 16px;
}

.tugas-setnilai .label {
  font-weight: bold;
  margin: 12px 0 4px;
}

.tugas-setnilai .value {
  margin-bottom: 12px;
}

.tugas-setnilai .html-value {
  margin-bottom: 12px;
}

.tugas-setnilai .html-value ul,
.tugas-setnilai .html-value ol {
  padding-left: 24px;
}

.tugas-setnilai .file-attachment {
  display: flex;
  align-items: center;
  background-color: #f3f3f3;
  border-radius: 8px;
  padding: 8px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.tugas-setnilai .file-icon {
  font-size: 18px;
  margin-right: 8px;
}

.tugas-setnilai .file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tugas-setnilai .file-view {
  color: green;
  font-weight: bold;
  text-decoration: none;
}

.tugas-setnilai .score-input {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.tugas-setnilai .feedback {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ccc;
  resize: none;
}

.tugas-setnilai .action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid #ddd;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
  z-index: 20;
}

.tugas-setnilai .nav-btn {
  background: none;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 18px;
  min-width: 48px;
}

.tugas-setnilai .nav-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.tugas-setnilai .save-btn {
  background-color: var(--qn-edlink-400);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: bold;
  font-size: 16px;
  flex-grow: 1;
  margin: 0 12px;
}

.tugas-setnilai .save-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.tugas-setnilai-history {
  padding: 0px;
}

.tugas-setnilai-history .history-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eeeded;
}

.tugas-setnilai-history .history-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 12px;
}

.tugas-setnilai-history .history-content {
  display: flex;
  flex-direction: column;
}

.tugas-setnilai-history .history-action {
  font-weight: bold;
  font-size: 14px;
}

.tugas-setnilai-history .history-timestamp {
  font-size: 13px;
  color: #889;
}

.header-face-recognition {
  position: relative;
  z-index: 2;
  padding: 16px;
  background: white;
  margin-top: 60px;
}

.camera-wrapper {
  position: relative;
  padding: 16px;
  box-sizing: border-box;
  height: calc(100vh - 120px); /* sisakan tinggi header */
}

.camera {
  position: absolute;
  top: 16px;
  left: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  border-radius: 20px;
  object-fit: cover;
  z-index: 0;
}

.face-frame {
  position: absolute;
  top: 16px;
  left: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  border-radius: 20px;
  pointer-events: none;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-mask-image: radial-gradient(circle 150px at center, transparent 99%, black 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: radial-gradient(circle 150px at center, transparent 99%, black 100%);
  mask-repeat: no-repeat;
  mask-position: center;
}

.frame-rectangle {
  position: absolute;
  left: 50%;
  top: 50%; /* tambahin ini */
  transform: translate(-50%, -50%); /* center horizontal + vertical */
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.face-attendence-preview {
  position: absolute;
  width: 100px;
  height: 150px;
  border-radius: 10px;
  bottom: 7%;
  left: 7%;
  object-fit: cover;
}

.btn-capture {
  position: absolute;
  bottom: 24px; /* jarak dari bawah frame */
  left: 50%;
  transform: translateX(-50%);
  border: none;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  cursor: pointer;
  pointer-events: auto; /* penting! supaya bisa diklik meski parent pointer-events:none */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.face-preview-wrapper {
  display: inline-block;
  padding: 8px;
  margin-top: 10%;
  margin-right: auto;
  margin-left: auto;
  border: 2px solid green;
  border-radius: 50%;
  overflow: hidden; /* pastikan isi tetap lingkaran */
}

.face-preview-wrapper img {
  display: block;
  max-width: 100%;
  border-radius: 50%;
}

:root {
  --background: #ffffff;
  --text-color: #000000;
}

.visible {
  display: block;
}

.hidden {
  display: none;
}

.no-classes-container {
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 1em;
  color: #333;
}

.container {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.no-data-message {
  font-size: 1rem;
  color: #9aa4b2;
  text-align: center;
  margin-top: 2rem;
}

.loader-custom {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.scroll-container {
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;
}

.line {
  width: 100%;
  height: 1px;
  background-color: var(--qn-neutral-200);
}

.line-dark {
  width: 100%;
  height: 1px;
  background-color: var(--qn-neutral-400);
}

.btn_primary_edlink {
  background-color: var(--qn-edlink-400) !important;
  box-shadow: 0 0.063rem 0.125rem rgba(0, 0, 0, 0.12);
  color: #fff;
  font-weight: 600;
}

.btn_primary_edlink .icon {
  color: #fff;
}

.btn_primary_edlink:hover {
  background-color: var(--qn-edlink-500) !important;
  box-shadow: 0 0.063rem 0.125rem rgba(0, 0, 0, 0.12) !important;
}

.btn_primary_edlink:focus {
  box-shadow: 0 0.063rem 0.125rem rgba(16, 24, 40, 0.05), 0 0 0 0.25rem #d1e1f8 !important;
}

.btn_primary_edlink:active {
  background-color: var(--qn-edlink-500);
  box-shadow: 0 0.063rem 0.125rem rgba(0, 0, 0, 0.12);
}

.btn_primary_edlink:disabled {
  background-color: #d1d1d1 !important;
  color: var(--qn-white) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

.btn_ghost_danger {
  background-color: var(--qn-white) !important;
  color: var(--qn-danger-400) !important;
  font-weight: 600;
}

.btn_ghost_danger .icon {
  color: var(--qn-danger-400) !important;
}

.btn_ghost_danger:focus {
  box-shadow: 0 0.063rem 0.125rem rgba(16, 24, 40, 0.05), 0 0 0 0.25rem #d1e1f8 !important;
}

.btn_ghost_danger:active {
  background-color: var(--qn-white);
  box-shadow: 0 0.063rem 0.125rem rgba(0, 0, 0, 0.12);
}

.btn_ghost_danger:disabled {
  background-color: #d1d1d1 !important;
  color: #a0a0a0 !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

.btn_link_edlink {
  padding: 0;
  display: flex;
  gap: 0.25rem;
  color: var(--qn-edlink-400);
  font-weight: 500;
  --qn-btn-height-size: unset !important;
}

.btn_link_edlink .icon {
  color: var(--qn-edlink-400);
}

.btn_link_edlink:hover {
  text-decoration: underline;
  color: var(--qn-edlink-500);
}

.btn_link_edlink:disabled {
  color: var(--qn-primary-200);
  cursor: default;
  pointer-events: none;
}

.btn_link_edlink:disabled .icon {
  color: #abc9f5;
}

.btn_link_edlink a {
  color: var(--qn-edlink-400);
}

.btn_link_edlink a:hover {
  text-decoration: underline;
  color: var(--qn-primary-500);
}

.btn_link_edlink a:disabled {
  color: var(--qn-primary-200);
  cursor: default;
  pointer-events: none;
}

.edl-alert-color-dark-blue::before {
  color: #29326D !important;
  font-size: 14px !important;
}

.icon-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.progress-wrapper {
  display: flex;
  align-items: center;
  gap: 8px; /* Jarak antara bar dan label */
  padding-left: 16px;
  padding-right: 16px;
}

.progress-container {
  flex: 1;
  height: 8px;
  background-color: #eee;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background-color: #4caf50;
  transition: width 0.3s ease;
}

.progress-label {
  min-width: 40px;
  text-align: right;
  font-size: 14px;
  color: white;
}

.menu-overlay {
  background: white;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  padding: 6px 0;
  min-width: 120px;
  max-width: 90vw;
  box-sizing: border-box;
  word-wrap: break-word;
}

.menu-item {
  font-size: 14px;
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 8px 16px;
  text-align: left;
  cursor: pointer;
}

.menu-item:hover {
  background-color: #f0f0f0;
}

.menu-item.delete {
  color: red;
}

.menu-overlay-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background: transparent;
}
/*@ sourceMappingURL=ruang-kelas-pwa.css.map*/