@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Red+Hat+Text:ital,wght@0,300..700;1,300..700&display=swap");
html {
  scroll-behavior: smooth;
  overflow-x: hidden; }

@font-face {
  font-display: swap; }
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

.red-hat-display, body h1, body h2, body h3, body h4, body h5, body h6, .btn-reset, .dp-head .dp-head-date, .dp-my, .login-sec .logo-text strong, .login-sec .login-title h1, .table-card .table-toolbar .table-title, .page-wrap .form-header .logo-name, .page-wrap .form-header .logo-sub, .page-wrap .form-header .title-grp, .page-wrap .form-header .title-form, .page-wrap .form-header .title-year, .page-wrap .sec-heading {
  font-family: 'Red Hat Display', sans-serif !important;
  font-weight: 400;
  font-style: normal; }

.red-hat-text, body, .dp-today-btn, .dp-clear-btn, .login-sec .inp-wrap input, .page-wrap .form-header .form-num-input, .page-wrap input[type="text"],
.page-wrap input[type="email"],
.page-wrap input[type="tel"],
.page-wrap input[type="number"],
.page-wrap input[type="date"],
.page-wrap select,
.page-wrap textarea {
  font-family: 'Red Hat Text', sans-serif !important;
  font-weight: 500;
  font-style: normal; }

.playfair-display {
  font-family: 'Playfair Display', sans-serif !important;
  font-weight: 400;
  font-style: normal; }

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

.text-dark {
  color: #000; }

.text-black {
  color: #000; }

.text-white {
  color: #fff; }

.text-purple {
  color: #5C0F8B; }

.primary-purple {
  color: #5C0F8B; }

.primary-orange {
  color: #FF5100; }

.text-gray {
  color: #6D6F70; }

.text-lightblack-color {
  color: #6D6F70 !important; }

.bg-black {
  background-color: #000; }

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

.primary-bgpurple {
  background-color: #5C0F8B !important; }

.primary-bgorange {
  background-color: #FF5100; }

.primary-bggray {
  background-color: #6D6F70; }

.primary-bggold {
  background-color: #C0966B; }

.primary-bgmagenta {
  background-color: #EB0D8C; }

.primary-bgcyan {
  background-color: #0099A8; }

.secondary-bgpurple {
  background-color: #A389BA; }

.secondary-bgorange {
  background-color: #F9A77E; }

.secondary-bggray {
  background-color: #D8D7D7; }

.secondary-bggold {
  background-color: #DCC4AA; }

.secondary-bgmagenta {
  background-color: #F29ABF; }

.secondary-bgcyan {
  background-color: #7BC3CC; }

.tertiary-bgpurple {
  background-color: #d4c9e24d; }

.tertiary-bgorange {
  background-color: #FDD9C4; }

.tertiary-bggray {
  background-color: #f5f5f5; }

.tertiary-bggold {
  background-color: #EFE6D9; }

.tertiary-bgmagenta {
  background-color: #FAD7E6; }

.tertiary-bgcyan {
  background-color: #C9E4E9; }

.border-gradient {
  background: linear-gradient(to right, #fafafa, #ece7ef);
  background-clip: padding-box;
  border-radius: 20px;
  margin-bottom: 0.5rem;
  position: relative; }
  .border-gradient::after {
    content: '';
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    right: -1px;
    background: linear-gradient(90deg, #5C0F8B 63%, #FF5100 100%);
    z-index: -1;
    border-radius: 20px; }

.text-gredient {
  background: linear-gradient(144deg, #5c0f8b 63%, #ff5100 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

.bg-gredient, .edit-btn, .dp-head, #sidebar, #sidebar .side-menu.top li.active a, .page-wrap .form-header {
  background: linear-gradient(144deg, #5c0f8b 30%, #fdd9c4 100%);
  z-index: 0; }

.bg-gredient-1 {
  background: linear-gradient(268deg, #5c0f8b 88%, #fad6c3 100%);
  z-index: 0; }

.bg-gredient-2, #content nav {
  background: linear-gradient(144deg, #5c0f8b 15%, #fdd9c4 100%);
  z-index: 0; }

.bg-gredient-light, #sidebar .side-menu li a {
  background: linear-gradient(268deg, #5c0f8b -260%, #fad6c3 100%);
  z-index: 0; }

.sec-title h2 span {
  font-weight: 700;
  font-size: 1.3rem;
  color: #F9A77E; }

.sub-title h4 {
  margin: 0;
  font-weight: 800;
  font-size: 1.01rem;
  background: linear-gradient(144deg, #5c0f8b 63%, #ff5100 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

body {
  font-size: 0.9rem;
  line-height: 1.6;
  font-weight: 400;
  color: #000;
  background-color: #f5f5f5;
  overflow-x: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
  -webkit-transition: background-color 0.4s ease, color 0.4s ease; }
  @media screen and (min-width: 1601px) {
    body {
      font-size: 1.1rem; } }
  body p, body li {
    font-weight: 400;
    list-style: none;
    line-height: 1.6;
    color: #000; }
  body h1, body h2, body h3, body h4, body h5, body h6 {
    color: #5C0F8B; }
  body a {
    color: #fff; }
    body a:hover {
      color: #FF5100; }
  body h5 {
    color: #000;
    margin-bottom: .9rem; }
    @media screen and (min-width: 1601px) {
      body h5 {
        font-size: 1.5rem;
        font-weight: 600; } }
  body.dark {
    background: #0C0C1E;
    color: #ffffff; }
    body.dark p, body.dark li {
      color: #ffffff; }
    body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6 {
      color: #ffffff; }
    body.dark #sidebar {
      background: #31302f;
      color: #ffffff; }
      body.dark #sidebar .brand {
        background: #31302f;
        color: #ffffff; }
      body.dark #sidebar .side-menu li a {
        background: #0C0C1E;
        color: #ffffff; }
      body.dark #sidebar .side-menu li.active {
        background: #0C0C1E;
        color: #ffffff; }
        body.dark #sidebar .side-menu li.active a {
          background: #0C0C1E;
          color: #ffffff; }
        body.dark #sidebar .side-menu li.active::before {
          box-shadow: 20px 20px 0 #0C0C1E; }
        body.dark #sidebar .side-menu li.active::after {
          box-shadow: 20px -20px 0 #0C0C1E; }
    body.dark #content nav {
      background: #31302f;
      color: #ffffff; }
      body.dark #content nav::before {
        box-shadow: -20px -20px 0 #31302f; }
      body.dark #content nav::after {
        box-shadow: -20px 20px 0 #31302f; }
      body.dark #content nav .swith-lm .ball {
        background-color: #0C0C1E; }
    body.dark #content main .box-info li {
      background: #0C0C1E;
      color: #ffffff; }
      body.dark #content main .box-info li .text p {
        background: #0C0C1E;
        color: #ffffff; }
      body.dark #content main .box-info li .text h3 {
        background: #0C0C1E;
        color: #ffffff; }
      body.dark #content main .box-info li .text h6 {
        color: #ffffff; }
    body.dark #content main .table-data .order {
      background: #0C0C1E;
      color: #ffffff; }
    body.dark #content main .table-data .todo {
      background: #0C0C1E;
      color: #ffffff; }
      body.dark #content main .table-data .todo .todo-list li {
        background: #0C0C1E;
        color: #ffffff; }
        body.dark #content main .table-data .todo .todo-list li p {
          background: #0C0C1E;
          color: #ffffff; }
    body.dark #content main .table-data .head h3 {
      background: #0C0C1E;
      color: #ffffff; }
    body.dark #content main .head-title .left .breadcrumb li a.active {
      background: #0C0C1E;
      color: #ffffff;
      font-weight: 600; }
    body.dark #content main .head-title .left h1 {
      background: linear-gradient(144deg, #ffffff 63%, #ff5100 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; }
    body.dark #content main::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #ffffffa6, #ffffff10); }
    body.dark .chart-card {
      background: rgba(12, 12, 30, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.08); }
    body.dark .bx-sun {
      color: #F9A77E; }
    body.dark .bxs-moon {
      color: #FDD9C4; }
    body.dark .profile-card {
      background: rgba(12, 12, 30, 0.7);
      border: 1px solid #ffffff4a; }
    body.dark .sub-title h4 {
      margin: 0;
      font-weight: 600;
      font-size: 1.1rem;
      background: linear-gradient(144deg, #ffffff 63%, #ff5100 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; }
    body.dark .sub-title p, body.dark .sub-title span {
      color: #ffffffab; }
    body.dark .profile-header .profile-left {
      background: #45455361;
      border: 1px solid #ffffff4a; }
    body.dark .profile-header .profile-right .progress-card.glass {
      background: #ffffff21; }
    body.dark .profile-header .profile-right .progress-card .progress-bar {
      background: #000000; }
    body.dark .table-card {
      background: #ffffff14; }
      body.dark .table-card .table-wrap table thead th {
        color: #ffffff !important; }
      body.dark .table-card .table-wrap table tbody tr td {
        color: #ffffff; }
      body.dark .table-card .student-cell .s-name {
        color: #ffffff; }
      body.dark .table-card .table-toolbar .table-count {
        background: #d4c9e24d;
        color: #c9c9c9 !important; }
      body.dark .table-card .table-toolbar .table-title {
        color: #ffffff; }
    body.dark .table-card .table-toolbar .toolbar-right .search-wrap input {
      background: transparent; }
    body.dark .page-wrap {
      background: #ffffff14; }
      body.dark .page-wrap .form-progress {
        background: #534f59; }
      body.dark .page-wrap .form-section {
        background: transparent; }
      body.dark .page-wrap .sec-heading {
        color: #f9f9f9; }
      body.dark .page-wrap .form-header {
        background: linear-gradient(144deg, #5c0f8b14 30%, #fdd9c480 100%); }
      body.dark .page-wrap .step-badge.active {
        border-color: #F9A77E;
        color: #F9A77E; }
      body.dark .page-wrap .radio-pill input[type="radio"] {
        accent-color: #F9A77E; }
      body.dark .page-wrap .radio-pill:has(input:checked) {
        border-color: #F9A77E;
        color: #F9A77E; }
    body.dark .footer-sec {
      background: #31302f; }
      body.dark .footer-sec a {
        color: #F9A77E; }
    body.dark input[type="text"],
    body.dark input[type="email"],
    body.dark input[type="tel"],
    body.dark input[type="number"],
    body.dark input[type="date"],
    body.dark select,
    body.dark textarea {
      color: #ffffff8a !important;
      background: #ffffff14;
      border-color: rgba(255, 255, 255, 0.2); }
      body.dark input[type="text"]::placeholder,
      body.dark input[type="email"]::placeholder,
      body.dark input[type="tel"]::placeholder,
      body.dark input[type="number"]::placeholder,
      body.dark input[type="date"]::placeholder,
      body.dark select::placeholder,
      body.dark textarea::placeholder {
        color: rgba(255, 255, 255, 0.45) !important; }
      body.dark input[type="text"] option,
      body.dark input[type="email"] option,
      body.dark input[type="tel"] option,
      body.dark input[type="number"] option,
      body.dark input[type="date"] option,
      body.dark select option,
      body.dark textarea option {
        background: #1a1a2e;
        color: #ffffff; }
    body.dark .select2-container .select2-selection--single {
      background: #ffffff14;
      border-color: rgba(255, 255, 255, 0.2);
      color: rgba(255, 255, 255, 0.55); }
      body.dark .select2-container .select2-selection--single .select2-selection__rendered {
        color: rgba(255, 255, 255, 0.55); }
      body.dark .select2-container .select2-selection--single .select2-selection__placeholder {
        color: rgba(255, 255, 255, 0.45); }
      body.dark .select2-container .select2-selection--single .select2-selection__arrow b {
        border-color: rgba(255, 255, 255, 0.55) transparent transparent transparent; }
    body.dark .select2-container.select2-container--open .select2-selection--single,
    body.dark .select2-container.select2-container--focus .select2-selection--single {
      border-color: #F9A77E;
      box-shadow: 0 0 0 3px rgba(249, 167, 126, 0.15);
      background: rgba(255, 255, 255, 0.08); }
      body.dark .select2-container.select2-container--open .select2-selection--single .select2-selection__arrow b,
      body.dark .select2-container.select2-container--focus .select2-selection--single .select2-selection__arrow b {
        border-color: transparent transparent #F9A77E transparent; }
    body.dark .select2-container:not(.select2-container--open):hover .select2-selection--single {
      border-color: rgba(255, 255, 255, 0.4); }
    body.dark .select2-dropdown {
      background: #1a1a2e;
      border-color: rgba(255, 255, 255, 0.12);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
      color: rgba(255, 255, 255, 0.85); }
    body.dark .select2-search--dropdown {
      border-bottom-color: rgba(255, 255, 255, 0.1); }
      body.dark .select2-search--dropdown .select2-search__field {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.15);
        color: rgba(255, 255, 255, 0.85); }
        body.dark .select2-search--dropdown .select2-search__field::placeholder {
          color: rgba(255, 255, 255, 0.35); }
        body.dark .select2-search--dropdown .select2-search__field:focus {
          border-color: #F9A77E;
          box-shadow: 0 0 0 2px rgba(249, 167, 126, 0.15);
          background: rgba(255, 255, 255, 0.12); }
    body.dark .select2-results__option {
      color: rgba(255, 255, 255, 0.75); }
      body.dark .select2-results__option.select2-results__option--highlighted, body.dark .select2-results__option[aria-selected="true"] {
        background: rgba(249, 167, 126, 0.15);
        color: #F9A77E; }
        body.dark .select2-results__option.select2-results__option--highlighted::after, body.dark .select2-results__option[aria-selected="true"]::after {
          color: #F9A77E; }
      body.dark .select2-results__option.select2-results__option--disabled {
        color: rgba(255, 255, 255, 0.25); }
      body.dark .select2-results__option.select2-results__message {
        color: rgba(255, 255, 255, 0.35); }
    body.dark .field-group.err .select2-container .select2-selection--single {
      border-color: #ef5350 !important;
      background: rgba(198, 40, 40, 0.12) !important; }
    body.dark .page-wrap .radio-pill:has(input:checked) {
      border-color: #F9A77E;
      color: #F9A77E;
      background: rgba(249, 167, 126, 0.1); }
    body.dark .page-wrap .radio-pill input[type="radio"] {
      accent-color: #F9A77E; }
    body.dark .page-wrap .review-summary {
      background: #f8f8fb14; }
    body.dark .dp-input.open {
      border-color: #F9A77E;
      box-shadow: 0 0 0 3px rgba(249, 167, 126, 0.15); }
    body.dark .dp-popup {
      background: #1a1a2e;
      border-color: rgba(255, 255, 255, 0.12);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); }
    body.dark .dp-nav {
      border-bottom-color: rgba(255, 255, 255, 0.1); }
    body.dark .dp-nav-btn {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.15);
      color: rgba(255, 255, 255, 0.7); }
      body.dark .dp-nav-btn:hover {
        border-color: #F9A77E;
        color: #F9A77E;
        background: rgba(249, 167, 126, 0.1); }
    body.dark .dp-my {
      color: #F9A77E; }
      body.dark .dp-my:hover {
        background: rgba(249, 167, 126, 0.12); }
    body.dark .dp-wk span {
      color: rgba(255, 255, 255, 0.45); }
    body.dark .dp-day {
      color: rgba(255, 255, 255, 0.75); }
      body.dark .dp-day:hover {
        background: rgba(249, 167, 126, 0.15);
        color: #F9A77E;
        border-color: #F9A77E; }
      body.dark .dp-day.today {
        border-color: #A389BA;
        color: #A389BA; }
      body.dark .dp-day.other {
        color: rgba(255, 255, 255, 0.2); }
    body.dark .dp-foot {
      border-top-color: rgba(255, 255, 255, 0.1); }
    body.dark .dp-today-btn {
      color: #F9A77E;
      background: rgba(249, 167, 126, 0.12);
      border-color: rgba(249, 167, 126, 0.3); }
      body.dark .dp-today-btn:hover {
        background: #F9A77E;
        color: #0C0C1E; }
    body.dark .dp-clear-btn {
      color: rgba(255, 255, 255, 0.45); }
      body.dark .dp-clear-btn:hover {
        color: #F9A77E; }
    body.dark .dp-head {
      background: linear-gradient(144deg, #31074a 30%, #797572 100%); }

input:focus, select:focus {
  box-shadow: none !important;
  outline: none !important; }
@media screen and (max-width: 767px) {
  input, select {
    font-size: 0.7rem; } }

.cmn-btn, .cmn-btn1, .cmn-btn2, .cmn-btn3, .login-btn {
  border: none;
  border-radius: 30px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(90deg, #FF5100 0%, #5C0F8B 100%);
  letter-spacing: 0.05em;
  box-shadow: 0 3px 12px #F9A77E;
  transition: opacity 0.2s, transform 0.15s;
  -webkit-transition: opacity 0.2s, transform 0.15s; }
  @media screen and (min-width: 1601px) {
    .cmn-btn, .cmn-btn1, .cmn-btn2, .cmn-btn3, .login-btn {
      padding: 10px 1rem;
      font-size: 1.15rem; } }
  .cmn-btn:hover, .cmn-btn1:hover, .cmn-btn2:hover, .cmn-btn3:hover, .login-btn:hover {
    opacity: 0.9;
    transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    color: #FDD9C4;
    box-shadow: 0 3px 20px #F9A77E; }
  .cmn-btn:active, .cmn-btn1:active, .cmn-btn2:active, .cmn-btn3:active, .login-btn:active {
    transform: scale(0.98);
    -webkit-transform: scale(0.98); }

.cmn-btn1, .cmn-btn2, .cmn-btn3 {
  width: 100px !important;
  margin: 0.5rem 0;
  background: #fff;
  border: 1px solid #5C0F8B; }
  .cmn-btn1 span, .cmn-btn2 span, .cmn-btn3 span {
    font-weight: 700;
    background: linear-gradient(144deg, #5c0f8b 40%, #ff5100 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  @media screen and (min-width: 1601px) {
    .cmn-btn1, .cmn-btn2, .cmn-btn3 {
      width: 130px !important; } }

.cmn-btn2 {
  border: 1px solid #5C0F8B; }

.cmn-btn3 {
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #000000;
  background: transparent; }

.login-btn {
  width: 70% !important; }

.edit-btn {
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease; }
  .edit-btn:hover {
    transform: scale(1.05);
    color: #F9A77E; }

.btn-close {
  border-radius: 50%;
  width: 34px;
  height: 34px;
  opacity: 1; }

.btn-add {
  height: 36px;
  background: linear-gradient(135deg, #5C0F8B, #A389BA);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0 16px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  box-shadow: 0 3px 12px rgba(92, 15, 139, 0.25); }
  .btn-add:hover {
    transform: translateY(-1px);
    -webkit-transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(92, 15, 139, 0.35); }

.btn-filter {
  height: 36px;
  border: 1.5px solid #D8D7D7;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #6D6F70;
  background: #f5f5f5;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease; }
  .btn-filter:hover {
    border-color: #5C0F8B;
    color: #5C0F8B;
    background: #d4c9e24d; }

.btn-reset {
  background: #fff;
  color: #6D6F70;
  box-shadow: 0 3px 12px #F9A77E;
  border: 1px solid #D8D7D7;
  border-radius: 50px;
  padding: 0.5rem 1.5rem;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  -webkit-transition: all 0.18s; }
  .btn-reset:hover {
    border-color: #5C0F8B;
    color: #5C0F8B; }

.divider-line {
  height: 1px;
  background: #FDD9C4;
  margin: 0 0 0.85rem; }

.before-after {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0; }

.absolute {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0; }

.verticle-middle {
  display: grid;
  justify-content: center;
  align-items: center;
  align-content: space-evenly; }

a {
  text-decoration: none;
  color: #6D6F70; }
  a:hover {
    text-decoration: none; }

ul {
  padding: 0;
  margin: 0;
  list-style-type: none; }

button:focus:not(:focus-visible) {
  box-shadow: none; }

@media (min-width: 1601px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1495px; } }
html.no-transition *,
html.no-transition *::before,
html.no-transition *::after {
  transition: none !important;
  animation: none !important; }

.select2-container {
  width: 100% !important; }
  .select2-container .select2-selection--single {
    width: 100%;
    height: 42px;
    border: 1px solid #D8D7D7;
    border-radius: 8px;
    padding: 0 32px 0 14px;
    font-size: 13px;
    font-family: 'Red Hat Text', sans-serif;
    color: #6D6F70;
    background: transparent;
    outline: none;
    appearance: none;
    display: flex;
    align-items: center;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    cursor: pointer;
    position: relative; }
    .select2-container .select2-selection--single .select2-selection__arrow {
      height: 100%;
      top: 0;
      right: 10px;
      width: 20px;
      display: flex;
      align-items: center;
      justify-content: center; }
      .select2-container .select2-selection--single .select2-selection__arrow b {
        border-color: #5C0F8B transparent transparent transparent;
        border-style: solid;
        border-width: 5px 4px 0 4px;
        height: 0;
        width: 0;
        margin-top: 1px;
        transition: transform 0.2s; }
    .select2-container .select2-selection--single .select2-selection__rendered {
      color: #6D6F70;
      line-height: 42px;
      padding: 0;
      font-size: 13px;
      font-family: 'Red Hat Text', sans-serif;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
    .select2-container .select2-selection--single .select2-selection__placeholder {
      color: #6D6F70;
      font-size: 12.5px; }
  .select2-container:not(.select2-container--open):hover .select2-selection--single, .select2-container:not(.select2-container--open):focus .select2-selection--single {
    border-color: #A389BA; }
  .select2-container.select2-container--open .select2-selection--single, .select2-container.select2-container--focus .select2-selection--single {
    border-color: #5C0F8B;
    box-shadow: 0 0 0 3px rgba(92, 15, 139, 0.1);
    background: #d4c9e24d; }
  .select2-container.select2-container--open .select2-selection__arrow b, .select2-container.select2-container--focus .select2-selection__arrow b {
    border-color: transparent transparent #5C0F8B transparent;
    border-width: 0 4px 5px 4px; }

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #FDD9C4;
  color: #5C0F8B; }

.inp-icon-wrap .select2-container .select2-selection--single {
  padding-left: 38px; }

.field-group.err .select2-container .select2-selection--single {
  border-color: #c62828 !important;
  background: #fff5f5 !important; }

.select2-dropdown {
  border: 1px solid #D8D7D7;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(92, 15, 139, 0.13);
  margin-top: 4px;
  overflow: hidden;
  z-index: 99999;
  font-family: 'Red Hat Text', sans-serif;
  font-size: 13px;
  color: #6D6F70;
  animation: s2FadeIn 0.15s ease; }

@keyframes s2FadeIn {
  from {
    opacity: 0;
    transform: translateY(4px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
.select2-search--dropdown {
  padding: 8px 10px;
  border-bottom: 1px solid #D8D7D7; }
  .select2-search--dropdown .select2-search__field {
    width: 100%;
    height: 34px;
    border: 1px solid #D8D7D7;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 12.5px;
    font-family: 'Red Hat Text', sans-serif;
    color: #6D6F70;
    background: #f5f5f5;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s; }
    .select2-search--dropdown .select2-search__field:focus {
      border-color: #5C0F8B;
      box-shadow: 0 0 0 2px rgba(92, 15, 139, 0.1);
      background: #faf6ff; }
    .select2-search--dropdown .select2-search__field::placeholder {
      color: #a0a2a3;
      font-size: 12px; }

.select2-results__options {
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0; }
  .select2-results__options::-webkit-scrollbar {
    width: 5px; }
  .select2-results__options::-webkit-scrollbar-track {
    background: transparent; }
  .select2-results__options::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(92, 15, 139, 0.9), rgba(255, 81, 0, 0.9));
    border-radius: 20px; }

.select2-results__option {
  padding: 9px 14px;
  font-size: 13px;
  font-family: 'Red Hat Text', sans-serif;
  color: #6D6F70;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  border-radius: 0; }
  .select2-results__option.select2-results__option--highlighted, .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
    background: #d4c9e24d;
    color: #5C0F8B; }
  .select2-results__option[aria-selected="true"] {
    background: #d4c9e24d;
    color: #5C0F8B;
    font-weight: 600;
    position: relative; }
    .select2-results__option[aria-selected="true"]::after {
      content: '✓';
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 11px;
      color: #5C0F8B; }
  .select2-results__option.select2-results__option--disabled {
    color: #babbbc;
    cursor: default; }
  .select2-results__option.select2-results__message {
    color: #a0a2a3;
    font-style: italic;
    font-size: 12px;
    padding: 12px 14px; }

#reviewSummary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 24px; }
  @media (max-width: 767px) {
    #reviewSummary {
      grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) {
    #reviewSummary {
      grid-template-columns: 1fr; } }
  #reviewSummary .rv-item {
    display: flex;
    flex-direction: column; }
  #reviewSummary .rv-label {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.4px; }
  #reviewSummary .rv-val {
    font-size: 0.95rem;
    color: #333;
    font-weight: 500; }

body.dark #reviewSummary .rv-label {
  color: rgba(255, 255, 255, 0.45); }
body.dark #reviewSummary .rv-val {
  color: rgba(255, 255, 255, 0.85); }

.dp-wrap {
  position: relative; }

.dp-input {
  cursor: pointer; }

.dp-popup {
  width: 272px;
  background: #fff;
  border: 1px solid #D8D7D7;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(92, 15, 139, 0.15);
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 9999;
  display: none;
  animation: dpIn 0.15s ease;
  -webkit-animation: dpIn 0.15s ease; }
  .dp-popup.open {
    display: block; }

@keyframes dpIn {
  from {
    opacity: 0;
    transform: translateY(4px);
    -webkit-transform: translateY(4px); }
  to {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0); } }
.dp-head {
  padding: 5px 16px; }
  .dp-head .dp-head-yr {
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.68);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 2px; }
  .dp-head .dp-head-date {
    font-size: 19px;
    font-weight: 800;
    color: #fff; }

.dp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #D8D7D7; }

.dp-nav-btn {
  width: 26px;
  height: 26px;
  border: 1px solid #D8D7D7;
  border-radius: 7px;
  background: #f5f5f5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #6D6F70;
  transition: all 0.15s;
  -webkit-transition: all 0.15s; }
  .dp-nav-btn:hover {
    border-color: #5C0F8B;
    color: #5C0F8B;
    background: #d4c9e24d; }

.dp-my {
  font-size: 12.5px;
  font-weight: 700;
  color: #5C0F8B;
  cursor: pointer;
  padding: 3px 9px;
  border-radius: 20px;
  transition: background 0.15s;
  -webkit-transition: background 0.15s; }
  .dp-my:hover {
    background: #d4c9e24d; }

.dp-wk {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 5px 12px 0; }
  .dp-wk span {
    text-align: center;
    font-size: 9.5px;
    font-weight: 700;
    color: #6D6F70;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 3px 0; }

.dp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0px 12px;
  gap: 2px; }

.dp-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: #6D6F70;
  border-radius: 7px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.13s;
  -webkit-transition: all 0.13s; }
  .dp-day:hover {
    background: #FDD9C4;
    color: #5C0F8B;
    border-color: #F9A77E; }
  .dp-day.other {
    color: rgba(109, 111, 112, 0.3);
    pointer-events: none; }
  .dp-day.today {
    border-color: #A389BA;
    color: #5C0F8B;
    font-weight: 700; }
  .dp-day.sel {
    background: linear-gradient(144deg, #5C0F8B 30%, #FF5100 100%);
    color: #fff;
    border-color: transparent;
    font-weight: 700;
    box-shadow: 0 2px 7px rgba(92, 15, 139, 0.3); }
  .dp-day.dis {
    opacity: 0.3;
    cursor: default;
    pointer-events: none; }

.dp-foot {
  padding: 5px 12px;
  border-top: 1px solid #D8D7D7;
  display: flex;
  justify-content: space-between;
  align-items: center; }

.dp-today-btn {
  font-size: 11.5px;
  font-weight: 600;
  color: #5C0F8B;
  background: #d4c9e24d;
  border: 1px solid rgba(92, 15, 139, 0.2);
  border-radius: 20px;
  padding: 4px 12px;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-transition: all 0.15s; }
  .dp-today-btn:hover {
    background: #A389BA;
    color: #fff; }

.dp-clear-btn {
  font-size: 11.5px;
  font-weight: 600;
  color: #6D6F70;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
  -webkit-transition: color 0.15s; }
  .dp-clear-btn:hover {
    color: #FF5100; }

.login-sec {
  min-height: 100vh;
  background: radial-gradient(ellipse 70% 80% at 60% 50%, #7b1fa2 0%, transparent 65%), radial-gradient(ellipse 50% 60% at 85% 70%, rgba(255, 81, 0, 0.13) 0%, transparent 55%), linear-gradient(135deg, #3a0860 0%, #5C0F8B 40%, #30074c 70%, #170328 100%);
  overflow: hidden;
  display: flex;
  align-content: center;
  justify-content: space-between;
  align-items: center; }
  @media screen and (max-width: 1024px) {
    .login-sec {
      justify-content: center; } }
  .login-sec .girl-img {
    position: absolute;
    bottom: 0;
    left: 130px;
    object-fit: fill;
    height: 550px; }
    @media screen and (max-width: 1024px) {
      .login-sec .girl-img {
        display: none; } }
    @media screen and (min-width: 1400px) and (max-width: 1600px) {
      .login-sec .girl-img {
        height: 710px;
        left: 120px; } }
    @media screen and (min-width: 1601px) {
      .login-sec .girl-img {
        height: 800px;
        left: 0px; } }
    @media screen and (min-width: 1920px) {
      .login-sec .girl-img {
        left: 160px; } }
  .login-sec .glass-card {
    background: radial-gradient(100% 100% at 0% 0%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
    backdrop-filter: blur(21px);
    -webkit-backdrop-filter: blur(21px);
    border: 1px solid #ffffff20;
    border-radius: 1.5rem;
    padding: 2.5rem;
    text-align: center;
    box-shadow: inset -5px -5px 250px rgba(255, 255, 255, 0.02), inset 5px 5px 4px rgba(255, 255, 255, 0.1);
    filter: drop-shadow(0px 4px 30px rgba(0, 0, 0, 0.1));
    transform: translate(-40%, 0%);
    -webkit-transform: translate(-40%, 0%);
    position: relative; }
    @media (max-width: 767px) {
      .login-sec .glass-card {
        padding: 1.8rem 1.5rem 1.5rem;
        width: 90%;
        transform: translate(0%, 0%);
        -webkit-transform: translate(0%, 0%); } }
    @media screen and (min-width: 768px) and (max-width: 1024px) {
      .login-sec .glass-card {
        transform: translate(0%, 0%);
        -webkit-transform: translate(0%, 0%); } }
    @media (min-width: 1400px) and (max-width: 1601px) {
      .login-sec .glass-card {
        padding: 4rem;
        transform: translate(-25%, 0%);
        -webkit-transform: translate(-25%, 0%);
        -webkit-transform: translate(-25%, 0%); } }
    @media (min-width: 1920px) {
      .login-sec .glass-card {
        padding: 4rem;
        transform: translate(-50%, 0%);
        -webkit-transform: translate(-50%, 0%);
        -webkit-transform: translate(-60%, 0%); } }
    .login-sec .glass-card::before {
      content: '';
      position: absolute;
      inset: -10px;
      border-radius: 1.6rem;
      border: 1px solid rgba(255, 255, 255, 0.12);
      pointer-events: none; }
    .login-sec .glass-card::after {
      content: '';
      position: absolute;
      inset: -2px;
      z-index: -1;
      border-radius: 1.5rem;
      padding: 0.1rem;
      background: linear-gradient(90deg, transparent 20%, #c2c2c2, #A389BA, transparent 80%);
      background-size: 300% 100%;
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      animation: borderRun 15s linear infinite; }
    .login-sec .glass-card .tl {
      top: -3px;
      left: -3px; }
    .login-sec .glass-card .tr {
      top: -3px;
      right: -3px; }
    .login-sec .glass-card .bl {
      bottom: -3px;
      left: -3px; }
    .login-sec .glass-card .br {
      bottom: -3px;
      right: -3px; }
  .login-sec .avatar-wrap {
    width: 150px;
    height: 60px;
    background: linear-gradient(110deg, #4f0e76 50%, #6f3891 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 6px 24px rgba(92, 15, 139, 0.7);
    overflow: hidden;
    padding: 0.5rem 1rem; }
    @media (min-width: 1600px) {
      .login-sec .avatar-wrap {
        width: 165px;
        height: 66px; } }
    .login-sec .avatar-wrap img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      filter: brightness(0) invert(1); }
  .login-sec .logo-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1; }
    .login-sec .logo-text strong {
      font-size: 1.35rem;
      font-weight: 800;
      color: #fff;
      letter-spacing: 0.5px; }
    .login-sec .logo-text span {
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 3px;
      color: #ffffffbf;
      text-transform: uppercase;
      margin-top: 1px; }
  .login-sec .login-title {
    margin-bottom: 1.5rem; }
    .login-sec .login-title h1 {
      font-size: 1.25rem;
      font-weight: 600;
      color: #fff;
      letter-spacing: 0.3px; }
      @media (max-width: 767px) {
        .login-sec .login-title h1 {
          font-size: 1.05rem; } }
      @media (min-width: 1600px) {
        .login-sec .login-title h1 {
          font-size: 1.55rem; } }
  .login-sec .inp-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #d2dceb8c;
    border-radius: 10px;
    padding: 0.5rem 1rem;
    margin-bottom: 0.85rem;
    gap: 12px;
    background: #ffffff14;
    transition: border-color 0.25s, background 0.25s;
    -webkit-transition: border-color 0.25s, background 0.25s;
    text-align: left;
    position: relative; }
    .login-sec .inp-wrap:focus-within {
      border-color: #ffffff8c;
      background: #ffffff1f; }
    .login-sec .inp-wrap svg {
      width: 17px;
      height: 17px;
      flex-shrink: 0;
      opacity: 0.55;
      fill: #fff; }
      @media (min-width: 1600px) {
        .login-sec .inp-wrap svg {
          width: 20px;
          height: 20px; } }
    .login-sec .inp-wrap input {
      border: none;
      background: none;
      outline: none;
      font-size: 0.88rem;
      color: #fff;
      width: 100%;
      background: transparent !important;
      -webkit-background-clip: text;
      padding-right: 36px;
      /* 🔥 MOST IMPORTANT (Chrome autofill fix) */ }
      @media (min-width: 1600px) {
        .login-sec .inp-wrap input {
          font-size: 1rem; } }
      .login-sec .inp-wrap input::placeholder {
        color: rgba(255, 255, 255, 0.45); }
      .login-sec .inp-wrap input:-webkit-autofill, .login-sec .inp-wrap input:-webkit-autofill:hover, .login-sec .inp-wrap input:-webkit-autofill:focus, .login-sec .inp-wrap input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
        box-shadow: 0 0 0 1000px transparent inset !important;
        -webkit-text-fill-color: #fff !important;
        transition: background-color 9999s ease-in-out 0s; }
    .login-sec .inp-wrap .eye-toggle {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      opacity: 0.55;
      color: #fff;
      font-size: 1rem;
      line-height: 1;
      user-select: none;
      transition: opacity 0.2s; }
      .login-sec .inp-wrap .eye-toggle:hover {
        opacity: 1; }
      .login-sec .inp-wrap .eye-toggle i {
        font-size: 1rem; }
  .login-sec .form-box {
    display: none;
    animation: loginFadeIn 0.3s ease;
    -webkit-animation: loginFadeIn 0.3s ease; }
    .login-sec .form-box.active {
      display: block;
      margin: auto;
      width: 360px; }
      @media screen and (max-width: 1024px) {
        .login-sec .form-box.active {
          width: 280px; } }
  .login-sec .create-form {
    /* Dropdown style matching your UI */
    /* Mobile responsive */ }
    .login-sec .create-form .create-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 12px;
      /* Full width fields (optional) */ }
      .login-sec .create-form .create-grid .full {
        grid-column: span 2; }
    .login-sec .create-form .custom-select {
      position: relative;
      cursor: pointer; }
      .login-sec .create-form .custom-select .select-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        font-size: 0.9rem;
        color: #ffffff8a; }
      .login-sec .create-form .custom-select .arrow {
        font-size: 12px;
        opacity: 0.6;
        transition: transform 0.3s; }
      .login-sec .create-form .custom-select .options {
        position: absolute;
        top: 110%;
        left: 0;
        width: 100%;
        background: #ffffff;
        border-radius: 8px;
        overflow: hidden;
        display: none;
        z-index: 10; }
        .login-sec .create-form .custom-select .options li {
          padding: 5px 12px;
          font-size: 14px;
          color: #333;
          transition: 0.2s; }
          .login-sec .create-form .custom-select .options li:hover {
            background: #f3f3f3; }
      .login-sec .create-form .custom-select.active .options {
        display: block; }
      .login-sec .create-form .custom-select.active .arrow {
        transform: rotate(180deg); }
    .login-sec .create-form .selected.placeholder {
      color: #ffffff8c; }
    .login-sec .create-form .custom-select.active .selected {
      color: #fff; }
    @media (max-width: 767px) {
      .login-sec .create-form .create-grid {
        grid-template-columns: 1fr !important; }
      .login-sec .create-form .create-grid .inp-wrap.full {
        grid-column: unset !important; } }
  .login-sec .small-links {
    display: flex;
    justify-content: space-between;
    margin: 0.5rem 0 1.2rem; }
    @media screen and (min-width: 1601px) {
      .login-sec .small-links {
        margin: 1.2rem 0 1.5rem; } }
    .login-sec .small-links a {
      font-size: 0.82rem;
      color: rgba(255, 255, 255, 0.75);
      text-decoration: none;
      cursor: pointer;
      transition: color 0.2s;
      -webkit-transition: color 0.2s; }
      .login-sec .small-links a:hover {
        color: #fff; }
  .login-sec .auth-switch {
    margin: 0.6rem 0 1rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65); }
    .login-sec .auth-switch a {
      color: #fff;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer; }
      .login-sec .auth-switch a:hover {
        text-decoration: underline; }
  .login-sec .custom-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0.75rem 0;
    text-align: left; }
    .login-sec .custom-check input {
      accent-color: #5C0F8B;
      cursor: pointer;
      width: 15px;
      height: 15px;
      flex-shrink: 0; }
    .login-sec .custom-check label {
      color: rgba(255, 255, 255, 0.75);
      font-size: 0.8rem;
      line-height: 1.4; }
      .login-sec .custom-check label span {
        color: #ff9060;
        cursor: pointer; }
  .login-sec .forgot-desc {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 1rem;
    text-align: left;
    line-height: 1.5; }

@keyframes loginFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
    -webkit-transform: translateY(8px); }
  to {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0); } }
@keyframes borderRun {
  0% {
    background-position: 0% 50%; }
  100% {
    background-position: 300% 50%; } }
#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 220px;
  height: 100%;
  z-index: 1000;
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  overflow-x: hidden;
  scrollbar-width: none; }
  @media screen and (min-width: 1400px) {
    #sidebar {
      width: 270px; } }
  #sidebar::-webkit-scrollbar {
    display: none; }
  #sidebar.hide {
    width: 60px; }
    #sidebar.hide .brand img:first-child {
      display: block !important;
      width: 25px; }
    #sidebar.hide .brand img:last-child {
      display: none !important; }
    #sidebar.hide .side-menu li a {
      width: calc(48px - (4px * 2));
      transition: width 0.3s ease;
      -webkit-transition: width 0.3s ease; }
  #sidebar .brand {
    font-size: 24px;
    font-weight: 700;
    height: 56px;
    display: flex;
    align-items: center;
    color: #fff;
    position: sticky;
    top: 13px;
    left: 0;
    background: #5C0F8B;
    z-index: 500;
    box-sizing: content-box;
    justify-content: space-evenly;
    transition: ease-in-out 0.6s;
    -webkit-transition: ease-in-out 0.6s; }
    #sidebar .brand img {
      display: flex;
      width: 130px;
      justify-content: center; }
      #sidebar .brand img:first-child {
        display: none !important; }
  #sidebar .side-menu {
    width: 100%;
    margin-top: 48px; }
    @media screen and (max-width: 992px) {
      #sidebar .side-menu {
        margin-top: 30px; } }
    #sidebar .side-menu li {
      height: 48px;
      background: transparent;
      margin-left: 6px;
      border-radius: 48px 0 0 48px;
      padding: 4px; }
      @media screen and (min-width: 1601px) {
        #sidebar .side-menu li {
          margin-bottom: 0.5rem; } }
      #sidebar .side-menu li.active {
        background: #f5f5f5;
        position: relative; }
        #sidebar .side-menu li.active::before, #sidebar .side-menu li.active::after {
          content: '';
          position: absolute;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          right: 0;
          z-index: -1; }
        #sidebar .side-menu li.active::before {
          top: -40px;
          box-shadow: 20px 20px 0 #f5f5f5; }
        #sidebar .side-menu li.active::after {
          bottom: -40px;
          box-shadow: 20px -20px 0 #f5f5f5; }
      #sidebar .side-menu li a {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        border-radius: 20px;
        transition: 0.6s;
        -webkit-transition: 0.6s;
        font-size: 0.9rem;
        font-weight: 500;
        white-space: nowrap;
        overflow-x: hidden;
        color: #5C0F8B; }
        @media screen and (min-width: 1400px) {
          #sidebar .side-menu li a {
            font-size: 1.1rem; } }
        #sidebar .side-menu li a.logout {
          color: #FF5100; }
        #sidebar .side-menu li a .bx {
          min-width: calc(60px - ((4px + 6px) * 2));
          display: flex;
          font-size: 1.2rem;
          justify-content: center; }
    #sidebar .side-menu.top li.active a {
      color: #FDD9C4; }
    #sidebar .side-menu.top li a:hover {
      color: #6D6F70; }
    #sidebar .side-menu.bottom li:nth-last-of-type(-n+2) {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center; }
    #sidebar .side-menu.bottom li:nth-last-of-type(2) {
      bottom: 45px; }

#content {
  position: relative;
  width: calc(100% - 220px);
  left: 220px;
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden; }
  @media screen and (min-width: 1400px) {
    #content {
      width: calc(100% - 270px);
      left: 270px; } }
  #sidebar.hide ~ #content {
    width: calc(100% - 60px);
    left: 60px; }
  #content #sidebar.hide ~ #content nav {
    left: 60px; }
  @media screen and (min-width: 1400px) {
    #content #content nav {
      left: 270px; } }
  #content nav {
    height: 50px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    grid-gap: 24px;
    position: static;
    top: 0;
    left: 220px;
    z-index: 1000; }
    @media screen and (max-width: 1024px) {
      #content nav {
        z-index: 0; } }
    #content nav::before {
      content: '';
      position: absolute;
      width: 40px;
      height: 40px;
      top: 50px;
      left: 0;
      border-radius: 50%;
      box-shadow: -20px -20px 0 #5C0F8B; }
    #content nav::after {
      content: '';
      position: absolute;
      width: 40px;
      height: 40px;
      bottom: 35px;
      left: 0;
      border-radius: 50%;
      box-shadow: -20px 20px 0 #f2cbc0; }
      @media screen and (max-width: 767px) {
        #content nav::after {
          bottom: 50px; } }
    #content nav a {
      color: #fff; }
    #content nav .bx.bx-menu {
      cursor: pointer;
      color: #FF5100; }
    #content nav .nav-link {
      font-size: 1.1rem;
      transition: 0.3s ease;
      -webkit-transition: 0.3s ease; }
      #content nav .nav-link:hover {
        color: #FDD9C4; }
    #content nav .notification {
      font-size: 20px;
      position: relative; }
      #content nav .notification .bx {
        font-size: 1.5rem;
        color: #FF5100; }
      #content nav .notification .num {
        position: absolute;
        top: -6px;
        right: -6px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid #fff;
        background: #FF5100;
        color: #fff;
        font-weight: 700;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center; }
    #content nav .dropdown-item:active {
      text-decoration: none;
      background-color: #FDD9C4; }
    #content nav .notification-menu, #content nav .profile-menu {
      display: none;
      position: absolute;
      top: 56px;
      right: 0;
      background: #fff;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      border-radius: 15px;
      z-index: 9999; }
      #content nav .show.notification-menu, #content nav .show.profile-menu {
        display: block; }
      #content nav .notification-menu ul, #content nav .profile-menu ul {
        list-style: none;
        padding: 10px;
        margin: 0; }
      #content nav .notification-menu li, #content nav .profile-menu li {
        border-bottom: 1px solid #f5f5f5;
        color: #000; }
        #content nav .notification-menu li:hover, #content nav .profile-menu li:hover {
          background-color: #d4c9e24d; }
    #content nav .notification-menu {
      width: 250px;
      max-height: 300px;
      overflow-y: auto; }
      #content nav .notification-menu li:hover {
        color: #000; }
      #content nav .notification-menu li:hover a {
        background-color: #D8D7D7;
        color: #fff; }
    #content nav .profile img {
      width: 36px;
      height: 36px;
      object-fit: cover;
      border-radius: 50%; }
    #content nav .profile-menu {
      width: 200px; }
      #content nav .profile-menu li a {
        color: #000;
        font-size: 0.9rem; }
      #content nav .profile-menu li:hover {
        background-color: #d4c9e24d;
        color: #000; }
        #content nav .profile-menu li:hover a {
          color: #000; }
    body.dark #content nav .notification-menu li:hover {
      background-color: #d4c9e24d;
      color: #fff; }
    body.dark #content nav .notification-menu li a {
      background-color: #D8D7D7;
      color: #fff; }
    body.dark #content nav .profile-menu li:hover a {
      color: #fff; }
    body.dark #content nav .profile-menu li a {
      color: #000; }
    #content nav .switch-mode {
      display: block;
      min-width: 50px;
      height: 25px;
      border-radius: 25px;
      background: #f5f5f5;
      cursor: pointer;
      position: relative; }
      #content nav .switch-mode::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        bottom: 2px;
        width: calc(25px - 4px);
        background: #5C0F8B;
        border-radius: 50%;
        transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease; }
    #content nav #switch-mode:checked + .switch-mode::before {
      left: calc(100% - (25px - 4px) - 2px); }
    #content nav .swith-lm {
      background-color: #f5f5f5;
      border-radius: 50px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 3px;
      position: relative;
      height: 21px;
      width: 60px;
      transform: scale(1.5);
      -webkit-transform: scale(1.5); }
    #content nav .checkbox:checked + .swith-lm .ball {
      transform: translateX(22px);
      -webkit-transform: translateX(22px); }
    #content nav .dropdown:hover .dropdown-menu {
      display: block;
      margin-top: -32px; }
    #content nav .dropdown-menu {
      display: none;
      transition: all 0.3s ease;
      -webkit-transition: all 0.3s ease; }
  #content main {
    width: 100%;
    padding: 40px 30px;
    max-height: calc(100vh - 56px);
    height: 100vh;
    overflow-y: auto;
    flex: 1; }
    @media screen and (max-width: 767px) {
      #content main {
        padding: 15px; } }
    #content main .box-info {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      grid-gap: 24px;
      position: relative;
      z-index: 2; }
      @media screen and (min-width: 768px) and (max-width: 1024px) {
        #content main .box-info {
          grid-template-columns: 30% 30% 30%; } }
      @media screen and (min-width: 1601px) {
        #content main .box-info {
          grid-template-columns: repeat(4, minmax(240px, 1fr)); } }
      #content main .box-info li {
        padding: 1.2rem;
        background: rgba(255, 255, 255, 0.61);
        box-shadow: 0 4px 15px #00000026;
        backdrop-filter: blur(15px);
        border: 1px solid #ffffff99;
        border-radius: 20px;
        display: flex;
        align-items: center;
        grid-gap: 24px; }
        @media screen and (min-width: 768px) and (max-width: 991px) {
          #content main .box-info li {
            grid-gap: 0.8rem;
            padding: 1.2rem;
            flex-direction: column; } }
        #content main .box-info li .bx {
          width: 80px;
          height: 80px;
          border-radius: 10px;
          font-size: 36px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #FDD9C4;
          color: #F9A77E;
          box-shadow: 0 0 10px #0000001a;
          backdrop-filter: blur(15px);
          border: 1px solid #ffffff99; }
          @media screen and (min-width: 768px) and (max-width: 991px) {
            #content main .box-info li .bx {
              width: 70px;
              height: 70px; } }
        @media screen and (min-width: 768px) and (max-width: 991px) {
          #content main .box-info li .text {
            text-align: center; } }
        #content main .box-info li .text h3 {
          font-size: 24px;
          font-weight: 600; }
        #content main .box-info li .text h6 {
          color: #000;
          font-weight: 600;
          font-size: 0.9rem; }
        #content main .box-info li .text p span {
          padding: 0.2rem 1rem;
          border-radius: 10px; }
        #content main .box-info li:nth-child(1) p span {
          color: #000;
          background: #ffbf00; }
        #content main .box-info li:nth-child(2) p span {
          color: #fff;
          background: green; }
    #content main .table-data {
      display: flex;
      flex-wrap: wrap;
      grid-gap: 24px;
      margin-top: 24px;
      width: 100%;
      color: #000; }
      #content main .table-data > div {
        border-radius: 20px;
        background: #fff;
        padding: 24px;
        overflow-x: auto; }
      #content main .table-data .head {
        display: flex;
        align-items: center;
        grid-gap: 16px;
        margin-bottom: 24px; }
        #content main .table-data .head h3 {
          margin-right: auto;
          font-size: 24px;
          font-weight: 600; }
        #content main .table-data .head .bx {
          cursor: pointer; }
      #content main .table-data .order {
        flex-grow: 1;
        flex-basis: 500px; }
        #content main .table-data .order table {
          width: 100%;
          border-collapse: collapse; }
          #content main .table-data .order table th {
            padding-bottom: 12px;
            font-size: 13px;
            text-align: left;
            border-bottom: 1px solid #f5f5f5; }
          #content main .table-data .order table td {
            padding: 16px 0; }
          #content main .table-data .order table tr td:first-child {
            display: flex;
            align-items: center;
            grid-gap: 12px;
            padding-left: 6px; }
          #content main .table-data .order table td img {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover; }
          #content main .table-data .order table tbody tr:hover {
            background: #f5f5f5; }
          #content main .table-data .order table tr td .status {
            font-size: 10px;
            padding: 6px 16px;
            color: #fff;
            border-radius: 20px;
            font-weight: 700; }
            #content main .table-data .order table tr td .status.completed {
              background: #5C0F8B; }
            #content main .table-data .order table tr td .status.process {
              background: #F9A77E; }
            #content main .table-data .order table tr td .status.pending {
              background: #FDD9C4; }
      #content main .table-data .todo {
        flex-grow: 1;
        flex-basis: 300px; }
        #content main .table-data .todo .todo-list {
          width: 100%; }
          #content main .table-data .todo .todo-list li {
            width: 100%;
            margin-bottom: 16px;
            background: #f5f5f5;
            border-radius: 10px;
            padding: 14px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center; }
            #content main .table-data .todo .todo-list li .bx {
              cursor: pointer; }
            #content main .table-data .todo .todo-list li.completed {
              border-left: 10px solid #5C0F8B; }
            #content main .table-data .todo .todo-list li.not-completed {
              border-left: 10px solid #FDD9C4; }
            #content main .table-data .todo .todo-list li:last-child {
              margin-bottom: 0; }
      #content main .table-data .menu {
        display: none;
        list-style-type: none;
        padding-left: 20px;
        margin-top: 5px;
        position: absolute;
        background-color: #f9f9f9;
        border: 1px solid #ddd;
        border-radius: 5px;
        width: 200px; }
        #content main .table-data .menu a {
          color: white;
          text-decoration: none;
          display: block;
          padding: 8px 16px; }
          #content main .table-data .menu a:hover {
            background-color: #444; }
      #content main .table-data .menu-link {
        margin: 5px;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        text-decoration: none;
        color: #007bff; }
        #content main .table-data .menu-link:hover {
          text-decoration: underline; }

/* 3 equal parts */
.mode-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2; }

.mode-item i {
  font-size: 0.7rem;
  color: #F9A77E;
  transition: 0.3s; }

input:-internal-autofill-selected {
  appearance: menulist-button;
  background-image: none !important;
  background-color: #F9A77E !important;
  color: fieldtext !important; }
  input:-internal-autofill-selected.dark {
    appearance: menulist-button;
    background-image: none !important;
    background-color: transparent !important;
    color: fieldtext !important; }

/* ACTIVE ICON */
body.light-mode .mode-item[data-mode="light"] i,
body.auto-mode .mode-item[data-mode="auto"] i,
body.dark .mode-item[data-mode="dark"] i {
  opacity: 1;
  color: #fff; }

body.light-mode .mode-item[data-mode="light"] i, body.auto-mode .mode-item[data-mode="auto"] i, body.dark .mode-item[data-mode="dark"] i {
  border-radius: 50%;
  opacity: 1;
  height: 18px;
  color: #FF5100;
  width: 18px;
  background: #5C0F8B;
  line-height: 18px;
  text-align: center; }

.bxs-moon {
  color: #F9A77E; }

.bx-sun {
  color: #FDD9C4;
  animation: shakeOn .7s; }

.auto-mode-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #A389BA;
  color: #fff;
  cursor: pointer;
  transition: 0.3s; }
  .auto-mode-btn.active {
    background: #5C0F8B; }

.chart-card {
  background: #ffffff9c;
  backdrop-filter: blur(15px);
  border: 1px solid #ffffff99;
  border-radius: 20px;
  position: relative;
  z-index: 1;
  margin-top: 2rem;
  padding: 2rem 2rem 4rem;
  box-shadow: 0 0 20px #f5f5f536;
  height: 100%; }
  @media screen and (max-width: 1024px) {
    .chart-card {
      height: auto;
      margin-top: 3rem;
      padding: 1.5rem; } }
  .chart-card h5 {
    margin-bottom: 1rem;
    font-weight: 600; }
  .chart-card canvas {
    width: 100% !important; }

main,
.table-data,
.todo-list {
  overflow-y: auto;
  max-height: 100%; }
  main::-webkit-scrollbar,
  .table-data::-webkit-scrollbar,
  .todo-list::-webkit-scrollbar {
    width: 6px; }
  main::-webkit-scrollbar-track,
  .table-data::-webkit-scrollbar-track,
  .todo-list::-webkit-scrollbar-track {
    background: transparent; }
  main::-webkit-scrollbar-thumb,
  .table-data::-webkit-scrollbar-thumb,
  .todo-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(92, 15, 139, 0.9), rgba(255, 81, 0, 0.9));
    border-radius: 20px; }

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999; }
  .sidebar-overlay.active {
    display: block; }

@media screen and (max-width: 1024px) {
  #sidebar.show {
    left: 0 !important; }

  #sidebar.hide ~ #content,
  #sidebar.show ~ #content {
    left: 0 !important;
    width: 100% !important; }

  #content nav,
  #content .footer-sec {
    left: 0 !important;
    width: 100% !important; }

  #content nav {
    padding: 0 10px;
    gap: 8px;
    height: 48px; }
    #content nav .nav-link {
      display: none; }
    #content nav .notification-menu,
    #content nav .profile-menu {
      width: 150px; }

  #sidebar {
    left: 0;
    width: 60px;
    transition: width 0.3s ease;
    -webkit-transition: width 0.3s ease;
    overflow: hidden;
    z-index: 1000; }
    #sidebar .brand {
      justify-content: center; }
      #sidebar .brand img:first-child {
        display: block !important;
        width: 25px; }
      #sidebar .brand img:last-child {
        display: none !important; }
    #sidebar .side-menu li a {
      width: calc(60px - 20px); }
      #sidebar .side-menu li a span {
        display: none; }
    #sidebar.show {
      width: 200px !important;
      top: 47px; }
      #sidebar.show .brand {
        justify-content: space-evenly; }
        #sidebar.show .brand img:first-child {
          display: none !important; }
        #sidebar.show .brand img:last-child {
          display: flex !important;
          width: 110px; }
      #sidebar.show .side-menu li a {
        width: 100%; }
        #sidebar.show .side-menu li a span {
          display: inline; }

  #content {
    left: 60px !important;
    width: calc(100% - 60px) !important;
    transition: none;
    -webkit-transition: none; }

  #content nav,
  #content .footer-sec {
    left: 0 !important;
    width: 100% !important; }

  #content nav::before {
    top: 47px; }

  #sidebar.hide ~ #content {
    left: 60px !important;
    width: calc(100% - 60px) !important; } }
@media screen and (max-width: 767px) {
  #sidebar.show {
    left: 0 !important; }

  #sidebar.hide ~ #content {
    left: 0 !important;
    width: 100% !important; }

  #content nav,
  #content .footer-sec {
    left: 0 !important;
    width: 100% !important; }

  #content nav {
    padding: 0 10px;
    gap: 8px;
    height: 48px; }
    #content nav .nav-link {
      display: none; }
    #content nav .notification-menu,
    #content nav .profile-menu {
      width: 150px; }

  #content main {
    padding: 12px; }
    #content main .box-info {
      grid-template-columns: 1fr; } }
@media screen and (min-width: 1025px) {
  .sidebar-overlay {
    display: none !important; }

  #sidebar {
    left: 0;
    width: 220px;
    transition: width 0.3s ease;
    -webkit-transition: width 0.3s ease; }
    #sidebar.hide {
      width: 60px; }

  #content {
    left: 220px;
    width: calc(100% - 220px);
    transition: left 0.3s ease, width 0.3s ease;
    -webkit-transition: left 0.3s ease, width 0.3s ease; }

  #sidebar.hide ~ #content {
    left: 60px;
    width: calc(100% - 60px); }

  #content nav,
  #content .footer-sec {
    transition: left 0.3s ease;
    -webkit-transition: left 0.3s ease; } }
@media screen and (min-width: 1400px) {
  #sidebar {
    width: 270px; }

  #content {
    left: 270px;
    width: calc(100% - 270px); }

  #sidebar.hide ~ #content {
    left: 60px;
    width: calc(100% - 60px); } }
.profile-header {
  display: flex;
  align-items: center;
  gap: 15px;
  justify-content: space-between; }
  @media screen and (max-width: 1024px) and (min-width: 768px) {
    .profile-header {
      align-items: end; } }
  .profile-header .profile-left {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    background: #fff;
    padding: 15px 20px;
    margin-bottom: 15px;
    width: 30%; }
    @media screen and (max-width: 767px) {
      .profile-header .profile-left {
        width: 388px; }
        .profile-header .profile-left .sub-title h4 {
          font-size: 0.9rem; } }
    @media screen and (max-width: 992px) and (min-width: 768px) {
      .profile-header .profile-left {
        gap: 10px;
        margin-bottom: 1rem;
        width: 45%; } }
    @media screen and (min-width: 1601px) {
      .profile-header .profile-left {
        width: 25%;
        padding: 1.2rem; } }
    .profile-header .profile-left .profile-img {
      width: 75px;
      height: 75px;
      border-radius: 50%;
      background: #FDD9C4;
      object-fit: cover; }
    .profile-header .profile-left p {
      margin: 2px 0;
      font-size: 13px;
      color: rgba(0, 0, 0, 0.75); }
    .profile-header .profile-left span {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.6); }
  .profile-header .profile-right {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: space-between; }
    @media screen and (max-width: 767px) {
      .profile-header .profile-right {
        flex-wrap: wrap; } }
    @media screen and (max-width: 1024px) and (min-width: 768px) {
      .profile-header .profile-right {
        gap: 10px;
        margin-bottom: 1rem; } }
    .profile-header .profile-right .progress-card {
      padding: 14px 16px;
      border-radius: 14px; }
      @media screen and (max-width: 992px) and (min-width: 768px) {
        .profile-header .profile-right .progress-card {
          padding: 10px 8px; } }
      .profile-header .profile-right .progress-card.glass {
        background: #fff;
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 15px #00000026; }
      .profile-header .profile-right .progress-card .progress-header {
        display: flex;
        justify-content: space-between;
        font-size: 0.85rem;
        font-weight: 600;
        margin-bottom: 8px; }
        @media screen and (max-width: 992px) and (min-width: 768px) {
          .profile-header .profile-right .progress-card .progress-header {
            font-size: 0.8rem;
            margin-bottom: 8px; } }
      .profile-header .profile-right .progress-card .progress-bar {
        height: 8px;
        border-radius: 30px;
        background: rgba(0, 0, 0, 0.05);
        overflow: hidden;
        position: relative; }
        .profile-header .profile-right .progress-card .progress-bar .progress-fill {
          height: 100%;
          border-radius: 30px;
          position: relative;
          overflow: hidden;
          transition: width 0.5s ease;
          -webkit-transition: width 0.5s ease; }
      .profile-header .profile-right .progress-card.complete .progress-fill {
        width: 100%;
        background: linear-gradient(90deg, #00c853, #69f0ae); }
        .profile-header .profile-right .progress-card.complete .progress-fill::after {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(120deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%);
          background-size: 30px 30px;
          animation: moveStripe 1s linear infinite; }
      .profile-header .profile-right .progress-card.pending .progress-fill {
        width: 65%;
        background: linear-gradient(90deg, #ff8f00, #ffd180); }
        .profile-header .profile-right .progress-card.pending .progress-fill::after {
          content: "";
          position: absolute;
          inset: 0;
          background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 10px, transparent 10px, transparent 20px);
          animation: moveStripe 1s linear infinite; }
      .profile-header .profile-right .progress-card.no-query .progress-fill {
        width: 0%;
        background: #c2c2c2; }

@keyframes moveStripe {
  from {
    background-position: 0 0; }
  to {
    background-position: 40px 0; } }
.profile-card {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 1.5rem;
  margin-bottom: 15px;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease; }
  @media screen and (min-width: 1601px) {
    .profile-card {
      padding: 2rem; } }
  .profile-card:hover {
    transform: translateY(-4px);
    -webkit-transform: translateY(-4px);
    box-shadow: 0 4px 15px #00000026; }
  .profile-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, #ffffff40, transparent);
    transition: 0.6s;
    -webkit-transition: 0.6s; }
  .profile-card:hover::before {
    left: 100%; }
  .profile-card .card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px; }

.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; }
  .profile-grid label {
    font-size: 0.8rem;
    color: #888888 !important;
    letter-spacing: 0.3px; }
  .profile-grid p {
    margin: 5px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: #000; }
  @media (max-width: 992px) {
    .profile-grid {
      grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 767px) {
  .profile-header .profile-left {
    flex-direction: column;
    align-items: flex-start;
    width: 384px;
    min-height: 245px;
    text-align: center; }
    .profile-header .profile-left img {
      margin: auto; } }
@media (max-width: 576px) {
  .profile-header .profile-left {
    flex-direction: column;
    align-items: flex-start; } }
.modal.fade .modal-dialog {
  transform: scale(0.9);
  -webkit-transform: scale(0.9);
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease; }

.modal.show .modal-dialog {
  transform: scale(1);
  -webkit-transform: scale(1); }

.modal-backdrop.show {
  background: #000000cc;
  opacity: 0.9; }

.custom-modal {
  border-radius: 24px;
  border: 1px solid #ffffff14;
  background: #fff;
  backdrop-filter: blur(35px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0px -1px 40px #00000029, inset 0 1px 1px #ffffff4d;
  color: #fff;
  padding: 10px;
  min-height: 270px; }
  .custom-modal .modal-header {
    border-bottom: none; }
    .custom-modal .modal-header .modal-title {
      font-size: 1.2rem;
      font-weight: 600;
      color: #5C0F8B; }
  .custom-modal .modal-body .form-label {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 4px; }
  .custom-modal .modal-body .form-control,
  .custom-modal .modal-body .form-select {
    border: 1px solid #F9A77E;
    border-radius: 10px;
    color: #000;
    font-size: 0.85rem;
    padding: 8px 10px; }
    .custom-modal .modal-body .form-control::placeholder,
    .custom-modal .modal-body .form-select::placeholder {
      color: rgba(255, 255, 255, 0.6); }
    .custom-modal .modal-body .form-control:hover,
    .custom-modal .modal-body .form-select:hover {
      border-color: #A389BA; }
    .custom-modal .modal-body .form-control:focus,
    .custom-modal .modal-body .form-select:focus {
      border-color: #F9A77E;
      box-shadow: 0 0 10px rgba(214, 51, 255, 0.5);
      background: rgba(255, 255, 255, 0.25); }
  .custom-modal .modal-footer {
    border-top: none; }

.table-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #D8D7D7;
  overflow: hidden;
  animation: fadeUp 0.5s 0.1s ease both;
  -webkit-animation: fadeUp 0.5s 0.1s ease both; }
  .table-card .table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #D8D7D7;
    flex-wrap: wrap;
    gap: 12px; }
    .table-card .table-toolbar .table-title {
      font-size: 15px;
      font-weight: 700;
      color: #5C0F8B;
      display: flex;
      align-items: center;
      gap: 8px; }
      .table-card .table-toolbar .table-title::before {
        content: '';
        width: 4px;
        height: 18px;
        background: linear-gradient(#5C0F8B, #FF5100);
        border-radius: 2px; }
    .table-card .table-toolbar .table-count {
      background: #d4c9e24d;
      color: #5C0F8B;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: 20px; }
    .table-card .table-toolbar .toolbar-right {
      display: flex;
      align-items: center;
      gap: 10px; }
      @media screen and (max-width: 767px) {
        .table-card .table-toolbar .toolbar-right {
          flex-direction: column; } }
      .table-card .table-toolbar .toolbar-right .search-wrap {
        position: relative; }
        .table-card .table-toolbar .toolbar-right .search-wrap input {
          height: 36px;
          border: 1.5px solid #D8D7D7;
          border-radius: 10px;
          padding: 0 12px 0 34px;
          font-size: 12.5px;
          color: #000;
          background: #f5f5f5;
          outline: none;
          width: 200px;
          transition: all 0.2s ease;
          -webkit-transition: all 0.2s ease; }
          @media screen and (max-width: 767px) {
            .table-card .table-toolbar .toolbar-right .search-wrap input {
              width: 240px !important; } }
          .table-card .table-toolbar .toolbar-right .search-wrap input:focus {
            border-color: #5C0F8B;
            background: #fff;
            width: 220px; }
        .table-card .table-toolbar .toolbar-right .search-wrap .si {
          position: absolute;
          left: 10px;
          top: 50%;
          transform: translateY(-50%);
          -webkit-transform: translateY(-50%);
          color: #6D6F70;
          font-size: 12px; }
  .table-card .table-wrap {
    overflow-x: auto; }
    .table-card .table-wrap table {
      width: 100%;
      border-collapse: collapse; }
      .table-card .table-wrap table thead tr {
        background: linear-gradient(100deg, #d4c9e24d 0%, #FDD9C4 100%);
        border-bottom: 2px solid #D8D7D7; }
      .table-card .table-wrap table thead th {
        padding: 13px 18px;
        font-size: 10.5px;
        font-weight: 700;
        color: #6D6F70;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        white-space: nowrap;
        text-align: left; }
        .table-card .table-wrap table thead th:first-child {
          padding-left: 24px; }
        .table-card .table-wrap table thead th:last-child {
          padding-right: 24px;
          text-align: center; }
      .table-card .table-wrap table tbody tr {
        border-bottom: 1px solid #D8D7D7;
        transition: background 0.15s ease;
        -webkit-transition: background 0.15s ease;
        animation: rowIn 0.4s ease both;
        -webkit-animation: rowIn 0.4s ease both;
        /* avatar colors */ }
        .table-card .table-wrap table tbody tr:hover {
          background: #d4c9e24d; }
        .table-card .table-wrap table tbody tr:last-child {
          border-bottom: none; }
        .table-card .table-wrap table tbody tr td {
          padding: 14px 18px;
          font-size: 13px;
          color: #000;
          vertical-align: middle; }
          @media screen and (max-width: 767px) {
            .table-card .table-wrap table tbody tr td {
              padding: 5px 10px;
              font-size: 10px; } }
          .table-card .table-wrap table tbody tr td:first-child {
            padding-left: 24px; }
          .table-card .table-wrap table tbody tr td:last-child {
            padding-right: 24px;
            text-align: center; }
        .table-card .table-wrap table tbody tr .av1 {
          background: linear-gradient(135deg, #5c0f8b, #a040b0); }
        .table-card .table-wrap table tbody tr .av2 {
          background: linear-gradient(135deg, #ff5100, #ff8c42); }
        .table-card .table-wrap table tbody tr .av3 {
          background: linear-gradient(135deg, #0099a8, #4cc9d5); }
        .table-card .table-wrap table tbody tr .av4 {
          background: linear-gradient(135deg, #c0966b, #e0b88a); }
        .table-card .table-wrap table tbody tr .av5 {
          background: linear-gradient(135deg, #2e7d32, #66bb6a); }
        .table-card .table-wrap table tbody tr .av6 {
          background: linear-gradient(135deg, #1565c0, #42a5f5); }
        .table-card .table-wrap table tbody tr .av7 {
          background: linear-gradient(135deg, #880e4f, #f06292); }
        .table-card .table-wrap table tbody tr .av8 {
          background: linear-gradient(135deg, #4a148c, #ab47bc); }
        .table-card .table-wrap table tbody tr:nth-child(1) {
          animation-delay: 0.05s; }
        .table-card .table-wrap table tbody tr:nth-child(2) {
          animation-delay: 0.10s; }
        .table-card .table-wrap table tbody tr:nth-child(3) {
          animation-delay: 0.15s; }
        .table-card .table-wrap table tbody tr:nth-child(4) {
          animation-delay: 0.20s; }
        .table-card .table-wrap table tbody tr:nth-child(5) {
          animation-delay: 0.25s; }
        .table-card .table-wrap table tbody tr:nth-child(6) {
          animation-delay: 0.30s; }
        .table-card .table-wrap table tbody tr:nth-child(7) {
          animation-delay: 0.35s; }
        .table-card .table-wrap table tbody tr:nth-child(8) {
          animation-delay: 0.40s; }
  .table-card .student-cell {
    display: flex;
    align-items: center;
    gap: 10px; }
    .table-card .student-cell .s-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      color: #fff; }
    .table-card .student-cell .s-name {
      font-weight: 600;
      font-size: 13px;
      color: #000; }
    .table-card .student-cell .s-email {
      font-size: 11.5px;
      color: #6D6F70; }
  .table-card .badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700; }
    .table-card .badge::before {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%; }
    .table-card .badge.active {
      background: rgba(46, 125, 50, 0.1);
      color: #2e7d32; }
      .table-card .badge.active::before {
        background: #4CAF50; }
    .table-card .badge.inactive {
      background: rgba(198, 40, 40, 0.1);
      color: #c62828; }
      .table-card .badge.inactive::before {
        background: #ef5350; }
    .table-card .badge.pending {
      background: rgba(255, 81, 0, 0.15);
      color: #FF5100; }
      .table-card .badge.pending::before {
        background: #FF5100; }
  .table-card .action-btns {
    display: flex;
    justify-content: center;
    gap: 6px; }
    .table-card .action-btns .act-btn {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      transition: all 0.18s ease;
      -webkit-transition: all 0.18s ease; }
      .table-card .action-btns .act-btn.view {
        background: #d4c9e24d;
        color: #5C0F8B; }
      .table-card .action-btns .act-btn.edit {
        background: rgba(21, 101, 192, 0.1);
        color: #1565c0; }
      .table-card .action-btns .act-btn.delete {
        background: rgba(198, 40, 40, 0.1);
        color: #c62828; }
      .table-card .action-btns .act-btn:hover {
        transform: scale(1.12);
        -webkit-transform: scale(1.12); }
  .table-card .pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-top: 1px solid #D8D7D7;
    flex-wrap: wrap;
    gap: 10px; }
    .table-card .pagination-wrap .pg-info {
      font-size: 12px;
      color: #6D6F70;
      font-weight: 500; }
      .table-card .pagination-wrap .pg-info strong {
        color: #000; }
    .table-card .pagination-wrap .pg-buttons {
      display: flex;
      gap: 4px; }
      .table-card .pagination-wrap .pg-buttons .pg-btn {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        border: 1.5px solid #D8D7D7;
        background: #fff;
        font-size: 12px;
        font-weight: 600;
        color: #6D6F70;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s ease;
        -webkit-transition: all 0.15s ease; }
        .table-card .pagination-wrap .pg-buttons .pg-btn:hover {
          border-color: #5C0F8B;
          color: #5C0F8B; }
        .table-card .pagination-wrap .pg-buttons .pg-btn.arrow {
          font-size: 14px; }
        .table-card .pagination-wrap .pg-buttons .pg-btn.active {
          background: linear-gradient(135deg, #5C0F8B, #A389BA);
          border-color: #5C0F8B;
          color: #fff;
          box-shadow: 0 2px 8px rgba(92, 15, 139, 0.3); }

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
    -webkit-transform: translateY(18px); }
  to {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0); } }
@keyframes rowIn {
  from {
    opacity: 0;
    transform: translateX(-12px);
    -webkit-transform: translateX(-12px); }
  to {
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0); } }
.dataTables_wrapper {
  padding: 0 !important; }

.dataTables_info,
.dataTables_paginate,
.dataTables_filter,
.dataTables_length {
  display: none !important; }

.filter-dropdown {
  position: relative; }
  .filter-dropdown .filter-menu {
    position: absolute;
    top: 110%;
    left: 0;
    width: 160px;
    background: #fff;
    border: 1px solid #D8D7D7;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 100; }
    .filter-dropdown .filter-menu li {
      padding: 8px 12px;
      font-size: 12.5px;
      cursor: pointer;
      color: #000;
      transition: all 0.2s;
      -webkit-transition: all 0.2s; }
      .filter-dropdown .filter-menu li:hover {
        background: #d4c9e24d;
        color: #5C0F8B; }
      .filter-dropdown .filter-menu li.active {
        background: #5C0F8B;
        color: #fff; }
  .filter-dropdown.open .filter-menu {
    display: block; }

.page-wrap {
  max-width: 980px;
  margin: auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 60px rgba(92, 15, 139, 0.14);
  overflow: hidden;
  /* Active / completed badge */
  /* Same as address checkbox */
  /* Review summary */ }
  @media screen and (min-width: 1601px) {
    .page-wrap {
      max-width: 1250px; } }
  .page-wrap .form-header {
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: center;
    padding: 24px 36px 20px;
    gap: 14px;
    position: relative;
    overflow: hidden; }
    .page-wrap .form-header::before {
      content: '';
      position: absolute;
      top: -60px;
      right: -40px;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.06);
      pointer-events: none; }
    .page-wrap .form-header::after {
      content: '';
      position: absolute;
      bottom: -40px;
      left: 30%;
      width: 130px;
      height: 130px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.05);
      pointer-events: none; }
    .page-wrap .form-header .logo-block {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      position: relative;
      z-index: 1; }
    .page-wrap .form-header .logo-name {
      font-size: 2.3rem;
      font-weight: 800;
      color: #fff;
      letter-spacing: -1px;
      line-height: 1;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
    .page-wrap .form-header .logo-sub {
      font-size: 0.72rem;
      font-weight: 700;
      color: #FDD9C4;
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-top: 3px; }
    .page-wrap .form-header .title-block {
      position: relative;
      z-index: 1; }
    .page-wrap .form-header .title-grp {
      font-size: 0.78rem;
      font-weight: 700;
      color: #FDD9C4;
      text-transform: uppercase;
      letter-spacing: 2.5px;
      margin-bottom: 2px; }
    .page-wrap .form-header .title-form {
      font-size: 1.55rem;
      font-weight: 800;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 2px;
      line-height: 1.1;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); }
    .page-wrap .form-header .title-year {
      font-size: 0.7rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.72);
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-top: 4px; }
    .page-wrap .form-header .form-num-block {
      text-align: right;
      position: relative;
      z-index: 1; }
      .page-wrap .form-header .form-num-block label {
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 6px;
        letter-spacing: 0.5px;
        text-transform: uppercase; }
    .page-wrap .form-header .form-num-input {
      width: 170px;
      height: 38px;
      border: 1.5px solid rgba(255, 255, 255, 0.35);
      border-radius: 8px;
      padding: 0 12px;
      font-size: 13px;
      color: #fff;
      background: rgba(255, 255, 255, 0.14);
      outline: none;
      margin-left: auto;
      display: block;
      backdrop-filter: blur(8px);
      transition: border-color 0.2s, background 0.2s;
      -webkit-transition: border-color 0.2s, background 0.2s; }
      .page-wrap .form-header .form-num-input::placeholder {
        color: rgba(255, 255, 255, 0.45); }
      .page-wrap .form-header .form-num-input:focus {
        border-color: rgba(255, 255, 255, 0.8);
        background: rgba(255, 255, 255, 0.22); }
  .page-wrap .form-progress {
    background: #f7f4fc;
    padding: 12px 36px;
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid #D8D7D7;
    overflow-x: auto;
    scrollbar-width: none; }
    .page-wrap .form-progress::-webkit-scrollbar {
      display: none; }
  .page-wrap .progress-step {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0; }
  .page-wrap .step-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1.5px solid #D8D7D7;
    border-radius: 20px;
    padding: 5px 14px 5px 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: #6D6F70;
    cursor: default;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    white-space: nowrap; }
    @media screen and (max-width: 767px) {
      .page-wrap .step-badge {
        padding: 5px; } }
    .page-wrap .step-badge.active {
      border-color: #5C0F8B;
      color: #5C0F8B;
      background: #d4c9e24d; }
    .page-wrap .step-badge.done {
      border-color: #2e7d32;
      color: #2e7d32;
      background: #e8f5e9; }
  .page-wrap .step-num {
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    background: #D8D7D7;
    color: #6D6F70;
    font-size: 10.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
    -webkit-transition: all 0.2s; }
    .step-badge.active .page-wrap .step-num {
      background: #5C0F8B;
      color: #fff; }
    .step-badge.done .page-wrap .step-num {
      background: #2e7d32;
      color: #fff; }
  .page-wrap .step-connector {
    flex: 1;
    min-width: 24px;
    height: 2px;
    background: #D8D7D7;
    margin: 0 6px; }
    .page-wrap .step-connector.done {
      background: #2e7d32; }
  .page-wrap .form-step {
    display: block; }
  .page-wrap .form-step.d-none {
    display: none !important; }
  .page-wrap .step-nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding: 16px 0;
    border-top: 1px solid #eee;
    gap: 12px; }
  .page-wrap .step-badge.active .step-num {
    background: #FF5100;
    color: #fff; }
  .page-wrap .step-badge.completed .step-num {
    background: #2e7d32;
    color: #fff; }
  .page-wrap .step-connector.completed {
    background: #2e7d32; }
  .page-wrap .same-as-check {
    font-size: 0.875rem;
    font-weight: normal;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px; }
  .page-wrap .review-summary {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px 24px;
    padding: 16px;
    background: #f8f8fb;
    border-radius: 8px;
    margin-top: 12px; }
    @media (max-width: 600px) {
      .page-wrap .review-summary {
        grid-template-columns: 1fr; } }
    @media (min-width: 1601px) {
      .page-wrap .review-summary {
        padding: 25px; } }
    .page-wrap .review-summary .rv-item {
      display: flex;
      flex-direction: column; }
    .page-wrap .review-summary .rv-label {
      font-size: 0.75rem;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 0.4px; }
    .page-wrap .review-summary .rv-val {
      font-size: 0.95rem;
      color: #333;
      font-weight: 500; }
  .page-wrap .form-body {
    padding: 28px 36px 36px; }
  .page-wrap .dte-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
    margin-bottom: 24px;
    background: #d4c9e24d;
    border-radius: 20px;
    padding: 18px 22px;
    border: 1px solid rgba(92, 15, 139, 0.12); }
  .page-wrap .form-section {
    margin-bottom: 20px;
    background: #fff;
    border-radius: 20px;
    padding: 20px 24px;
    border: 1px solid #D8D7D7;
    box-shadow: 0 2px 10px rgba(92, 15, 139, 0.07);
    animation: fadeUp 0.4s ease both;
    -webkit-animation: fadeUp 0.4s ease both; }
    .page-wrap .form-section:nth-child(1) {
      animation-delay: 0.05s; }
    .page-wrap .form-section:nth-child(2) {
      animation-delay: 0.10s; }
    .page-wrap .form-section:nth-child(3) {
      animation-delay: 0.15s; }
    .page-wrap .form-section:nth-child(4) {
      animation-delay: 0.20s; }
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
    -webkit-transform: translateY(14px); }
  to {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0); } }
  .page-wrap .sec-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: #5C0F8B;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    margin-bottom: 18px; }
    .page-wrap .sec-heading::before {
      content: '';
      width: 4px;
      height: 18px;
      background: linear-gradient(#5C0F8B, #FF5100);
      border-radius: 2px;
      flex-shrink: 0; }
    .page-wrap .sec-heading::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, rgba(92, 15, 139, 0.18), transparent); }
  .page-wrap .field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px; }
    .page-wrap .field-grid.cols-1 {
      grid-template-columns: 1fr; }
    .page-wrap .field-grid.cols-3 {
      grid-template-columns: 1fr 1fr 1fr; }
  .page-wrap .sub-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px; }
  .page-wrap .field-group {
    display: flex;
    flex-direction: column;
    position: relative; }
    .page-wrap .field-group label {
      font-size: 11.5px;
      font-weight: 600;
      color: #6D6F70;
      margin-bottom: 6px;
      letter-spacing: 0.2px;
      display: flex;
      align-items: center;
      gap: 3px; }
    .page-wrap .field-group.err input, .page-wrap .field-group.err select {
      border: 1px solid #c62828;
      background: #fff5f5 !important; }
    .page-wrap .field-group.err .err-txt {
      display: flex; }
  .page-wrap .req {
    color: #c62828;
    font-weight: 700;
    font-size: 13px;
    line-height: 1; }
  .page-wrap .err-txt {
    font-size: 11px;
    color: #c62828;
    margin-top: 4px;
    display: none;
    align-items: center;
    gap: 3px; }
  .page-wrap input[type="text"],
  .page-wrap input[type="email"],
  .page-wrap input[type="tel"],
  .page-wrap input[type="number"],
  .page-wrap input[type="date"],
  .page-wrap select,
  .page-wrap textarea {
    width: 100%;
    height: 42px;
    border: 1px solid #D8D7D7;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    color: #6D6F70 !important;
    background: #fff;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    -webkit-transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; }
    .page-wrap input[type="text"]:hover,
    .page-wrap input[type="email"]:hover,
    .page-wrap input[type="tel"]:hover,
    .page-wrap input[type="number"]:hover,
    .page-wrap input[type="date"]:hover,
    .page-wrap select:hover,
    .page-wrap textarea:hover {
      border-color: #A389BA; }
    .page-wrap input[type="text"]:focus,
    .page-wrap input[type="email"]:focus,
    .page-wrap input[type="tel"]:focus,
    .page-wrap input[type="number"]:focus,
    .page-wrap input[type="date"]:focus,
    .page-wrap select:focus,
    .page-wrap textarea:focus {
      border-color: #5C0F8B;
      box-shadow: 0 0 0 3px rgba(92, 15, 139, 0.1);
      background: #d4c9e24d; }
    .page-wrap input[type="text"]::placeholder,
    .page-wrap input[type="email"]::placeholder,
    .page-wrap input[type="tel"]::placeholder,
    .page-wrap input[type="number"]::placeholder,
    .page-wrap input[type="date"]::placeholder,
    .page-wrap select::placeholder,
    .page-wrap textarea::placeholder {
      color: #6D6F70 !important;
      font-size: 12.5px; }
  .page-wrap select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235c0f8b' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer; }
  .page-wrap .inp-icon-wrap {
    position: relative; }
    .page-wrap .inp-icon-wrap input,
    .page-wrap .inp-icon-wrap select {
      padding-left: 38px; }
  .page-wrap .inp-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    color: #A389BA;
    font-size: 13px;
    pointer-events: none;
    opacity: 0.8; }
  .page-wrap .radio-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 42px; }
  .page-wrap .radio-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid #D8D7D7;
    border-radius: 20px;
    padding: 7px 14px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 500;
    color: #6D6F70;
    transition: all 0.18s;
    -webkit-transition: all 0.18s;
    user-select: none; }
    .page-wrap .radio-pill:hover {
      border-color: #A389BA; }
    .page-wrap .radio-pill:has(input:checked) {
      border-color: #5C0F8B;
      background: #d4c9e24d;
      color: #5C0F8B; }
    .page-wrap .radio-pill input[type="radio"] {
      width: 14px;
      height: 14px;
      border: none;
      accent-color: #5C0F8B;
      cursor: pointer;
      flex-shrink: 0;
      padding: 0;
      box-shadow: none;
      background: transparent;
      appearance: auto;
      -webkit-appearance: auto; }
  @media (max-width: 700px) {
    .page-wrap .form-header {
      grid-template-columns: 1fr;
      text-align: center;
      gap: 14px; }
      .page-wrap .form-header .logo-block {
        align-items: center; }
      .page-wrap .form-header .form-num-block {
        text-align: center; }
      .page-wrap .form-header .form-num-input {
        margin: 0 auto; }
    .page-wrap .field-grid,
    .page-wrap .field-grid.cols-3,
    .page-wrap .dte-row,
    .page-wrap .sub-grid-2 {
      grid-template-columns: 1fr; }
    .page-wrap .form-body {
      padding: 16px 18px 24px; }
    .page-wrap .form-progress {
      padding: 10px 16px; }
    .page-wrap .step-badge span:not(.step-num) {
      display: none; }
    .page-wrap .step-connector {
      min-width: 12px; } }

.footer-sec {
  background: linear-gradient(180deg, #f2cbc0 30%, #fdd9c4 100%);
  color: #fff;
  position: static;
  bottom: 0;
  width: calc(100% + 0px);
  left: 220px;
  right: auto;
  text-align: center;
  height: 35px;
  padding: 5px 0px;
  z-index: 1000; }
  @media screen and (max-width: 767px) {
    .footer-sec {
      height: 50px;
      padding: 0.1rem; } }
  .footer-sec a {
    color: #5C0F8B;
    text-decoration: none;
    margin-left: 15px;
    font-size: 13px; }
    .footer-sec a:hover {
      text-decoration: underline; }
  .footer-sec p {
    margin-bottom: 0; }

@media screen and (min-width: 1400px) {
  #content .footer-sec {
    left: 270px; } }
@media screen and (max-width: 1024px) {
  #content {
    left: 0;
    width: 100%; }

  #content nav,
  #content .footer-sec {
    left: 0; } }
/* Fix Chrome autofill white background */
@media screen and (max-width: 767px) {
  .select2-container .select2-selection--single {
    height: 35px; }

  .page-wrap input[type=date], .page-wrap input[type=email], .page-wrap input[type=number], .page-wrap input[type=tel], .page-wrap input[type=text], .page-wrap select, .page-wrap textarea {
    padding: 0 30px; } }

/*# sourceMappingURL=main.css.map */