@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700&display=swap");
body {
  font-family: "Nunito", sans-serif !important;
  /* Track */
  /* Handle */
}
body ::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
body ::-webkit-scrollbar-track {
  background-color: aliceblue;
}
body ::-webkit-scrollbar-thumb {
  background: var(--grey);
  border-radius: 4px;
}

html {
  scroll-behavior: smooth;
}

:root {
  --dark: #000;
  --red: #e45346;
  --grey: #e0e0e0;
  --white: #fff;
  --bg-grey: #f5f5f5;
  --grey-thumb: #dadada;
  --btn-green: #6fad03;
  --btn-blue: #0284c7;
  --btn-red: #e83535;
  --btn-kuning: #f3a02b;
  --table-orange: #fdf1d0;
  --account: #e86f64;
  --logout: #d0473b;
  --font-grey: #94a3b8;
  --font-green: #22c55e;
  --bg-main: #f6f8fd;
  --border-color: #94a3b8;
  --border-color-2: #475569;
  --bg-check-trans: #fff4f4;
  --blue-first: #0c4a6e;
  --blue-font: #176796;
  --blue-sec: #0284c7;
  --blue-sidebar-hover: #005ac0;
  --blue-sidebar-active: #0060b9;
  --blue-sidebar-active-link: #0060b946;
  --bg-sidebar: #0f172a;
  --btn-detail-table: #dbeafe;
  --btn-detail-table-active: #c3ddff;
  --btn-danger-table: #fedbdb;
  --btn-danger-table-active: #ffc3c3;
  --font--dark: #414141;
  --bg-null: #e2e8f0;
  --bg-responsi: #dd8034;
  --bg-dosen: #e0f2fe;
  --bg-inhal: #fef08a;
  --bg-badge-lulus: #f0fdf4;
  --bg-badge-aktif: #eff6ff;
  --badge-inhal: #c640401a;
  --btn-responsi1: #02a063;
  --btn-responsi2: #02b67125;
  --btn-responsi3: #02c77b13;
  --btn-inhal1: #d68101;
  --btn-inhal1-1: #ffb342;
  --btn-inhal2: #df950b2c;
  --btn-inhal3: #fdc73117;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

.ui-datepicker-calendar {
  display: none;
}

.navbar-height-cs {
  height: 75px !important;
}

.ui-timepicker-div .ui-widget-header {
  margin-bottom: 8px;
}

.ui-timepicker-div dl {
  text-align: left;
}

.ui-timepicker-div dl dt {
  float: left;
  clear: left;
  padding: 0 0 0 5px;
}

.ui-timepicker-div dl dd {
  margin: 0 10px 10px 45%;
}

.ui-timepicker-div td {
  font-size: 90%;
}

.ui-tpicker-grid-label {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
}

.form-group .select-with-icon-arrow {
  position: relative;
}
.form-group .select-with-icon-arrow select {
  padding-right: 30px;
}
.form-group .select-with-icon-arrow i {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  pointer-events: none;
}

.main-title-thin {
  color: var(--font-grey);
  font-weight: 400;
  font-size: 14px;
}
@media only screen and (max-width: 512px) {
  .main-title-thin {
    font-size: 12px;
  }
}

.sub-title-bold {
  font-weight: 600;
  font-size: 16px;
  flood-color: var(--bg-sidebar);
}
@media only screen and (max-width: 512px) {
  .sub-title-bold {
    font-size: 13px;
  }
}

.custom-form-upload-file {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px dashed #005ac0;
  cursor: pointer;
  border-radius: 5px;
}

.bg-cs-success {
  background-color: #e5fdec;
}

.bg-cs-danger {
  background-color: #fddede;
}

.cs-scrollable-menu {
  overflow: auto;
  white-space: nowrap;
  /* Track */
  /* Handle */
}
.cs-scrollable-menu::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
.cs-scrollable-menu::-webkit-scrollbar-track {
  background-color: aliceblue;
}
.cs-scrollable-menu::-webkit-scrollbar-thumb {
  background: var(--grey);
  border-radius: 4px;
}

.warning-input-danger:focus {
  border-color: red !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25) !important;
}

.circle-cs-25 {
  width: 25px;
  height: 25px;
  border: 1px dashed var(--border-color);
  border-radius: 50%;
}

.circle-cs-done-25 {
  width: 25px;
  height: 25px;
  background-color: var(--font-green);
  border-radius: 50%;
  text-align: center;
  padding-top: 2px;
  color: white;
}

.cs-bg-green {
  background-color: var(--font-green);
}

.cs-bg-red {
  background-color: var(--btn-red);
}

.bg-table-orange {
  background-color: var(--table-orange) !important;
}

.bg-table-orange-2 {
  background-color: rgb(255, 206, 115) !important;
}

.bg-table-red {
  background-color: rgb(255, 195, 195) !important;
}

.bg-table-green {
  background-color: rgb(196, 255, 222) !important;
}

.bg-blue-freeze {
  background-color: var(--blue-font) !important;
  color: white;
}

.bg-blue-freeze-child {
  background-color: rgb(236, 236, 236) !important;
}

.bg-perizinan {
  background-color: var(--bg-null) !important;
}

.card-scoring .card-scoring-header .scoring-title {
  font-size: 14px;
}
@media only screen and (max-width: 512px) {
  .card-scoring .card-scoring-header .scoring-title {
    font-size: 10px;
  }
}
.card-scoring .card-scoring-header .scoring-rounded {
  border-radius: 12px;
}

.btn-cs-blue {
  background-color: var(--btn-blue) !important;
  color: white !important;
  text-decoration: none;
  border-radius: 8px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-cs-blue:hover {
  background-color: var(--blue-sidebar-hover) !important;
}

.bg-cs-black {
  background-color: #0f172a;
}

.bg-cs-yellow {
  background-color: var(--bg-inhal);
}

.table-csss-container {
  overflow-x: scroll;
  padding-inline: 0;
}
.table-csss-container table .left-freeze:first-child {
  position: sticky;
  width: 100px;
  left: -2px;
  z-index: 10;
  background: #fff;
  margin: 0;
}
.table-csss-container table th,
.table-csss-container table td {
  white-space: nowrap;
  padding: 10px 20px;
}

.text-header-portal {
  font-size: 16px;
  line-height: 5px;
}
@media only screen and (max-width: 512px) {
  .text-header-portal {
    font-size: 12px;
  }
}

.icon-button {
  padding: 3px 7px;
  font-size: 12;
  border-radius: 8px;
  color: var(--blue-font);
}
.icon-button:hover {
  color: var(--blue-sec);
  background-color: var(--bg-grey);
}

.btn-cs-blue-contras {
  background-color: #3b82f6 !important;
  color: white !important;
  text-decoration: none;
  border-radius: 8px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-cs-blue-contras:hover {
  background-color: #1c6cec !important;
}

.btn-cs-blue-light {
  background-color: #dbeafe !important;
  color: #3b82f6 !important;
  font-weight: 600 !important;
  text-decoration: none;
  border-radius: 8px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-cs-blue-light:hover {
  background-color: #d1e3fa !important;
}

.btn-cs-grey-light {
  background-color: #ffffff !important;
  color: #64748b !important;
  font-weight: 600 !important;
  text-decoration: none;
  border-radius: 8px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-cs-grey-light:hover {
  background-color: #f7f7f7 !important;
}

.invoice-pembayaran {
  background-color: #f5faff;
  border-radius: 8px;
}

.guest-page .guest-sisi-kiri .auth-card {
  min-height: 100vh;
}
@media only screen and (min-width: 768px) {
  .guest-page .guest-sisi-kiri .auth-card {
    height: 100vh;
    overflow-y: scroll;
    /* width */
    /* Track */
    /* Handle */
  }
  .guest-page .guest-sisi-kiri .auth-card::-webkit-scrollbar {
    width: 8px;
  }
  .guest-page .guest-sisi-kiri .auth-card::-webkit-scrollbar-track {
    background-color: aliceblue;
  }
  .guest-page .guest-sisi-kiri .auth-card::-webkit-scrollbar-thumb {
    background: var(--grey-thumb);
    border-radius: 5px;
    height: 10px;
  }
}
.guest-page .guest-sisi-kiri .auth-card img {
  max-width: 100px;
}
.guest-page .guest-sisi-kiri .auth-card .logo-uad {
  padding: 20px;
  border-radius: 50px;
  background-color: #f0f9ff;
}
.guest-page .guest-sisi-kiri .auth-card .col-logo-flin img {
  width: 150px !important;
}
.guest-page .guest-sisi-kiri .auth-card h3 {
  font-weight: 600;
  font-size: 24px;
}
.guest-page .guest-sisi-kiri .auth-card p {
  color: var(--font-grey);
  font-size: 14px;
}
.guest-page .guest-sisi-kiri .auth-card .ingatkan-saya-font {
  font-size: 14px;
}
.guest-page .guest-sisi-kiri .auth-card .lupa-password {
  font-size: 14px;
  color: var(--red);
}
.guest-page .guest-sisi-kiri .auth-card .btn-sign {
  background-color: var(--btn-blue);
  color: white;
}
.guest-page .guest-sisi-kiri .auth-card .btn-sign:hover {
  background-color: var(--blue-first);
}
.guest-page .guest-sisi-kiri .auth-card .link-auth-cs {
  color: var(--btn-blue);
  font-weight: 500;
  font-size: 16px;
}
.guest-page .guest-sisi-kanan {
  background-color: var(--bg-main);
  max-height: 100vh;
}
@media only screen and (min-width: 768px) {
  .guest-page .guest-sisi-kanan {
    overflow-y: scroll;
  }
}
.guest-page .guest-sisi-kanan .modal-dialog {
  /* Track */
  /* Handle */
}
.guest-page .guest-sisi-kanan .modal-dialog ::-webkit-scrollbar {
  width: 8px;
}
.guest-page .guest-sisi-kanan .modal-dialog ::-webkit-scrollbar-track {
  background-color: aliceblue;
}
.guest-page .guest-sisi-kanan .modal-dialog ::-webkit-scrollbar-thumb {
  background: var(--grey);
  border-radius: 5px;
  height: 10px;
}
.guest-page .guest-sisi-kanan .card-berita-login {
  border-radius: 12px;
}
.guest-page .guest-sisi-kanan .card-berita-login .card-footer {
  border-radius: 12px;
}
.guest-page .guest-sisi-kanan .card-berita-login .tanggal-berita-login {
  color: var(--font-grey);
  font-size: 12px;
}
.guest-page .guest-sisi-kanan .card-berita-login h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
}
.guest-page .guest-sisi-kanan .card-berita-login p {
  font-size: 12px;
}
.guest-page .guest-sisi-kanan .card-berita-login p .more-berita-login {
  display: none;
}
.guest-page .guest-sisi-kanan .card-berita-login p .btn-berita-login {
  color: var(--btn-blue);
  cursor: pointer;
  font-weight: 700;
}
.guest-page .guest-sisi-kanan .card-berita-login .btn-download-berita-login {
  background-color: var(--btn-blue);
  color: white;
}
.guest-page .guest-sisi-kanan .card-berita-login .btn-download-berita-login:hover {
  background-color: var(--blue-first);
}

.presensi-mahasiswa {
  transition: all 0.3s ease;
}
.presensi-mahasiswa .card-matkul {
  border-radius: 12px !important;
}
.presensi-mahasiswa .card-body-cs {
  margin: 0;
  padding: 0px 0px 15px 5px;
}
.presensi-mahasiswa .card-footer {
  padding: 0;
}
.presensi-mahasiswa .card-footer a {
  text-decoration: none !important;
}
.presensi-mahasiswa .card-footer .btn-presensi {
  background-color: var(--blue-sec);
  color: white !important;
  font-weight: 600;
}
.presensi-mahasiswa .card-footer .btn-presensi:hover {
  background-color: var(--blue-first);
}
.presensi-mahasiswa .card-footer .btn-inhal {
  border: 2px solid var(--btn-inhal2);
  color: var(--btn-inhal1) !important;
  font-weight: 600;
}
.presensi-mahasiswa .card-footer .btn-inhal:hover {
  background-color: var(--btn-inhal3);
}
.presensi-mahasiswa .card-footer .btn-responsi {
  border: 2px solid var(--btn-responsi2);
  color: var(--btn-responsi1) !important;
  font-weight: 600;
}
.presensi-mahasiswa .card-footer .btn-responsi:hover {
  background-color: var(--btn-responsi3);
}
.presensi-mahasiswa .card-footer .btn-detail {
  background-color: var(--btn-detail-table);
  color: var(--blue-sec) !important;
  font-weight: 700;
}
.presensi-mahasiswa .card-footer .btn-detail:hover {
  background-color: var(--btn-detail-table-active);
}
.presensi-mahasiswa .text-matkul {
  font-weight: 700;
  font-size: 16px;
  color: var(--bg-sidebar);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.presensi-mahasiswa .text-info-cs {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.presensi-mahasiswa .text-info-cs:hover {
  overflow: auto;
  text-overflow: clip;
  white-space: inherit;
  transition: all 0.3s ease;
}
.presensi-mahasiswa .title-text {
  font-weight: 500;
  font-size: 12px;
  color: var(--font-grey);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.presensi-mahasiswa .sub-title-text {
  font-weight: 600;
  font-size: 14px;
  color: var(--bg-sidebar);
  transition: all 0.3s ease;
}

form .icon-input {
  position: absolute;
  top: 30%;
  left: 3%;
  color: var(--font-grey);
  z-index: 1000;
}
form .form-input-cs {
  border-radius: 5px;
  border: 1px solid var(--border-color);
  padding-left: 10%;
  color: var(--font-grey);
  padding-top: 20px;
  padding-bottom: 20px;
}
form .form-input-register-cs {
  border: 1px solid var(--border-color);
  color: var(--font-grey);
}
form .ingatkan-saya {
  border: 2px solid var(--border-color);
}

form .icon-search {
  position: absolute;
  top: 13px;
  left: 33px;
  color: var(--font-grey);
  font-size: 14px;
}
form .form-cari {
  border-radius: 25px;
  background: white;
  padding-left: 43px;
  color: var(--font-grey);
  font-size: 15px;
}
form .form-select-dashboard {
  color: var(--font-grey);
  font-size: 14px;
  border-radius: 25px;
}
form .form-select-slot {
  color: var(--font-grey);
  font-size: 14px;
  border-radius: 8px;
}

.content .column-content {
  border-radius: 12px;
}
.content .column-content .title-column {
  font-weight: 700;
  font-size: 16px;
  color: var(--blue-font);
}
@media only screen and (max-width: 512px) {
  .content .column-content .title-column {
    font-size: 14px;
  }
}
.content .column-content .btn-add-data {
  border-radius: 8px;
  border: 1px solid var(--grey);
  color: var(--blue-sec);
}
.content .column-content .btn-add-data:hover {
  background-color: aliceblue;
}
.content .column-content .btn-add-data-blue {
  border-radius: 8px;
  color: white;
  background-color: var(--blue-sec);
}
.content .column-content .btn-add-data-blue:hover {
  background-color: var(--blue-sidebar-hover);
}
.content .column-content .head-table-content {
  background-color: var(--blue-sec);
  font-size: 13px;
  color: white;
}
.content .column-content .head-table-content th {
  border-right: 1px solid white;
}
.content .column-content .table-borderless {
  padding-bottom: 10px;
  /* Track */
  /* Handle */
}
.content .column-content .table-borderless::-webkit-scrollbar {
  height: 8px;
}
.content .column-content .table-borderless::-webkit-scrollbar-track {
  background-color: aliceblue;
}
.content .column-content .table-borderless::-webkit-scrollbar-thumb {
  background: var(--grey-thumb);
  border-radius: 5px;
  height: 10px;
}
.content .column-content .table {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--grey);
}
.content .column-content .table tbody {
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
@media only screen and (max-width: 512px) {
  .content .column-content .table tbody {
    font-size: 12px !important;
  }
}
.content .column-content .dot-menu-table {
  cursor: pointer;
  background-color: aliceblue;
  border-radius: 15px;
  transition: all 0.3s ease;
}
.content .column-content .dot-menu-table:hover {
  background-color: rgb(228, 243, 255);
}
.content .column-content .card {
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
}
.content .column-content .btn-detail-table {
  background-color: var(--btn-detail-table);
  font-weight: 700;
  font-size: 14px;
  color: var(--blue-font);
  border-radius: 8px;
}
@media only screen and (max-width: 512px) {
  .content .column-content .btn-detail-table {
    font-size: 10px;
  }
}
.content .column-content .btn-detail-table:hover {
  background-color: var(--btn-detail-table-active);
}
.content .column-content .btn-danger-table {
  background-color: var(--btn-danger-table);
  font-weight: 700;
  font-size: 14px;
  color: var(--logout);
  border-radius: 8px;
}
@media only screen and (max-width: 512px) {
  .content .column-content .btn-danger-table {
    font-size: 10px;
  }
}
.content .column-content .btn-danger-table:hover {
  background-color: var(--btn-danger-table-active);
}
.content .column-content .title-detail-modal {
  color: var(--font-grey);
  font-weight: 400;
  font-size: 14px;
}
@media only screen and (max-width: 512px) {
  .content .column-content .title-detail-modal {
    font-size: 12px;
  }
}
.content .column-content .sub-title-detail {
  font-weight: 600;
  font-size: 16px;
  flood-color: var(--bg-sidebar);
}
@media only screen and (max-width: 512px) {
  .content .column-content .sub-title-detail {
    font-size: 13px;
  }
}
.content .column-content h5 {
  font-size: 16px;
}
.content .column-content .icon-table-collapse {
  padding: 4px 9px;
  font-size: 16;
  border-radius: 8px;
  color: var(--blue-font);
}
.content .column-content .icon-table-collapse:hover {
  color: var(--blue-sec);
  background-color: var(--bg-grey);
}
.content .column-content .col-nama-table,
.content .column-content .col-list-slot-table {
  min-width: 150px !important;
}
.content .column-content .col-edit-delete-table {
  min-width: 100px !important;
}
.content .column-content .btn-export {
  color: var(--font-grey);
  border-radius: 50px;
  font-weight: 700;
  font-size: 16px;
}
.content .column-content .btn-export:hover {
  color: var(--blue-sec);
  background-color: var(--bg-grey);
}
.content .column-content .btn-edit-delete {
  color: var(--font-grey);
}
.content .column-content .btn-edit-delete:hover {
  color: var(--font-dark);
}
.content .column-content ul li a {
  color: var(--grey);
  color: inherit;
  font-weight: inherit;
}
.content .column-content ul li a.active {
  font-weight: 700;
  color: var(--blue-font) !important;
  border-bottom: 3px solid var(--blue-font) !important;
}
@media only screen and (max-width: 512px) {
  .content .column-content ul li a {
    font-size: 12px;
  }
}
.content .column-content .dot-custom {
  font-size: 8px;
}
.content .column-content .custom-select-lg {
  height: 47px !important;
  line-height: 1.9 !important;
  font-size: 1.1rem !important;
}

.modal-component {
  /* width */
}
.modal-component .modal-dialog {
  /* Track */
  /* Handle */
}
.modal-component .modal-dialog ::-webkit-scrollbar {
  width: 8px;
}
.modal-component .modal-dialog ::-webkit-scrollbar-track {
  background-color: aliceblue;
}
.modal-component .modal-dialog ::-webkit-scrollbar-thumb {
  background: var(--grey-thumb);
  border-radius: 5px;
  height: 10px;
}
.modal-component .modal-body .title-detail-modal {
  color: var(--font-grey);
  font-weight: 400;
  font-size: 14px;
}
.modal-component .modal-body .sub-title-detail {
  font-weight: 500;
  font-size: 16px;
  flood-color: var(--bg-sidebar);
}
.modal-component .modal-body h5 {
  font-size: 14px;
  font-weight: 600;
  color: var(--bg-sidebar);
}
.modal-component .modal-body .span-title {
  font-size: 18px;
  font-weight: 700;
}
@media only screen and (max-width: 512px) {
  .modal-component .modal-body .span-title {
    font-size: 16px;
  }
}
.modal-component .modal-body .label-check-cs,
.modal-component .modal-body .label-radio-cs-ganjil,
.modal-component .modal-body .label-radio-cs-genap {
  border: 1px solid var(--grey);
}
.modal-component .modal-body .chechked-activ,
.modal-component .modal-body .active1,
.modal-component .modal-body .active2 {
  border: 1px solid var(--blue-sec);
  background-color: aliceblue;
}
.modal-component .modal-body .activeedit {
  border: 1px solid var(--border-color);
  background-color: #ebebeb;
}
.modal-component .modal-body .activeeditinput {
  accent-color: rgb(250, 15, 117);
}
.modal-component .modal-body-presensi .head-img img {
  max-width: 200px;
}
.modal-component .modal-body-presensi h5 {
  font-weight: 700;
  font-size: 32px;
  color: var(--blue-first);
  margin: 20px 0 20px 0;
}
@media only screen and (max-width: 512px) {
  .modal-component .modal-body-presensi h5 {
    font-size: 24px;
  }
}
.modal-component .modal-body-presensi p {
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 20px;
}
.modal-component .select-22 {
  min-height: 50px !important;
}
.modal-component .modal-footer .btn-modal-simpan,
.modal-component .modal-body .btn-modal-simpan {
  background-color: var(--blue-sec);
  color: white;
}
.modal-component .modal-footer .btn-modal-simpan:hover,
.modal-component .modal-body .btn-modal-simpan:hover {
  background-color: var(--blue-first);
}
.modal-component .modal-footer .btn-modal-disable,
.modal-component .modal-body .btn-modal-disable {
  background-color: var(--bg-grey);
  color: var(--font-grey);
}
.modal-component .icon-tambah-data {
  padding: 2px 5px;
  font-size: 10;
  border-radius: 8px;
  color: var(--blue-font);
}
.modal-component .icon-tambah-data:hover {
  color: var(--blue-sec);
  background-color: var(--bg-grey);
}
.modal-component .modal-presensi-asisten ul li a {
  color: var(--grey);
  color: inherit;
  font-weight: inherit;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
}
.modal-component .modal-presensi-asisten ul li a:hover {
  background-color: aliceblue;
}
.modal-component .modal-presensi-asisten ul li a.active {
  font-weight: 600;
  color: white !important;
  background-color: var(--blue-sec) !important;
  border: none !important;
}
@media only screen and (max-width: 512px) {
  .modal-component .modal-presensi-asisten ul li a {
    font-size: 12px;
  }
}

.ui-datepicker-calendar {
  display: none;
}

.footer-cs {
  height: 70px;
}
@media only screen and (min-width: 768px) {
  .footer-cs {
    height: 50px;
  }
}
.footer-cs .footer-text {
  color: var(--font-grey);
  font-size: 12px;
}

.space-fixed-cs {
  height: 70px;
}
@media only screen and (min-width: 768px) {
  .space-fixed-cs {
    height: 50px;
  }
}

.main-sidebar {
  background-color: var(--bg-sidebar);
  color: white;
}
.main-sidebar .title-sidebar {
  font-weight: 500;
  font-size: 16px;
}
.main-sidebar .nav-link:hover {
  background-color: var(--blue-sidebar-active) !important;
  border-radius: 4px;
}
.main-sidebar .active-sidebar-menu {
  background-color: var(--blue-sidebar-active) !important;
  border-radius: 4px;
}
.main-sidebar .active-sidebar-link {
  background-color: var(--blue-sidebar-active-link) !important;
  border-radius: 4px;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; /* Remove default arrow */
  background-image: url(...); /* Add custom arrow */
}

.breadcrumb-cs a {
  text-decoration: none !important;
}
.breadcrumb-cs .active-breadcrumb {
  font-weight: 700;
  font-size: 16px;
  color: var(--blue-font);
}
.breadcrumb-cs .active-breadcrumb:hover {
  color: var(--blue-sec);
}
.breadcrumb-cs .breadcrumb-slash {
  font-weight: 500;
  font-size: 18px;
  flood-color: var(--bg-sidebar);
}
@media only screen and (max-width: 512px) {
  .breadcrumb-cs .breadcrumb-slash {
    font-size: 16px;
  }
}
.breadcrumb-cs .text-breadcrumb {
  color: var(--font-grey);
  font-weight: 400;
  font-size: 16px;
}
.breadcrumb-cs .text-breadcrumb:hover {
  color: var(--font-dark);
}
@media only screen and (max-width: 512px) {
  .breadcrumb-cs .text-breadcrumb {
    font-size: 14px;
  }
}
.breadcrumb-cs .breadcrumb-arrow {
  padding: 4px 9px;
  font-size: 16;
  border-radius: 8px;
  color: var(--blue-font);
}
.breadcrumb-cs .breadcrumb-arrow:hover {
  color: var(--blue-sec);
  background-color: var(--bg-grey);
}

.card-matkul {
  padding-top: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
}
.card-matkul .card-matkul-header {
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-matkul .card-matkul-header .icon-matkul {
  width: 36px;
  height: 36px;
}
.card-matkul .card-matkul-header .text-matkul-header-info {
  flex-grow: 4;
  flex-flow: row;
  margin-left: 8px;
  margin-right: 8px;
  overflow: hidden;
}
.card-matkul .card-matkul-header .text-matkul-header-info .text-nama-matkul {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  min-width: 0;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-matkul .card-matkul-header .text-matkul-header-info .text-nama-lab {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-matkul .card-matkul-header .badge-semester {
  padding: 4px 8px;
  gap: 8px;
  width: 78px;
  height: 24px;
  background: #eff6ff;
  border-radius: 4px;
}
.card-matkul .card-matkul-header .badge-semester .text-semester {
  width: 62px;
  height: 16px;
  font-family: "Nunito";
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #1e3a8a;
}
.card-matkul .card-matkul-header .badge-slot-praktikum {
  padding: 4px 8px;
  gap: 8px;
  height: 24px;
  background: #eff6ff;
  border-radius: 4px;
}
.card-matkul .card-matkul-header .badge-slot-praktikum .text-semester {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #1e3a8a;
}
.card-matkul .card-matkul-divider {
  margin-top: 16px;
  margin-bottom: 16px;
}
.card-matkul .card-matkul-content {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  gap: 1;
}
.card-matkul .card-matkul-content .card-matkul-text-koor {
  margin: 0px;
  flex-grow: 1;
  overflow: hidden;
}
.card-matkul .card-matkul-content .card-matkul-text-koor .text-koor-title {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #000000;
}
.card-matkul .card-matkul-content .card-matkul-text-koor .text-name-title {
  margin-top: 4px;
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  flex-grow: 1;
  margin-right: 16px;
  color: #000000;
}
.card-matkul .card-matkul-btn {
  justify-content: center;
  padding: 12px 16px;
  margin-top: 24px;
  width: 100%;
  height: 46px;
  border-radius: 8px;
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
  background-color: var(--btn-blue);
  color: white;
}
.card-matkul .card-matkul-btn:hover {
  background-color: var(--blue-first);
}

.btn-menu-tabs {
  border-radius: 8px;
  font-weight: 500;
  font-size: 16px;
  color: var(--font-grey);
  padding: 6px 12px;
  text-decoration: none !important;
}
.btn-menu-tabs:hover {
  background-color: var(--bg-grey);
}

.active-btn-menu-tabs {
  background-color: var(--blue-sec);
  color: white;
  border-radius: 8px;
  font-weight: 500;
  font-size: 16px;
  padding: 6px 12px;
  text-decoration: none !important;
}
.active-btn-menu-tabs:hover {
  color: white !important;
}

.modal-component .modal-presensi .table-in-modal .card {
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
}
.modal-component .modal-presensi .table-in-modal .head-table-content {
  background-color: var(--blue-sec);
  font-size: 14px;
  color: white;
}
.modal-component .modal-presensi .table-in-modal .head-table-content th {
  border-right: 1px solid white;
}
.modal-component .modal-presensi .table-in-modal .table-borderless {
  padding-bottom: 10px;
  /* Track */
  /* Handle */
}
.modal-component .modal-presensi .table-in-modal .table-borderless::-webkit-scrollbar {
  height: 8px;
}
.modal-component .modal-presensi .table-in-modal .table-borderless::-webkit-scrollbar-track {
  background-color: aliceblue;
}
.modal-component .modal-presensi .table-in-modal .table-borderless::-webkit-scrollbar-thumb {
  background: var(--grey-thumb);
  border-radius: 5px;
  height: 10px;
}
.modal-component .modal-presensi .table-in-modal .table {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--grey);
}
.modal-component .modal-presensi .table-in-modal .table tbody {
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
@media only screen and (max-width: 512px) {
  .modal-component .modal-presensi .table-in-modal .table tbody {
    font-size: 12px !important;
  }
}

.modal-component .modal-success {
  border-radius: 12px;
}
.modal-component .modal-success .modal-body .head-img img {
  max-width: 250px;
}
.modal-component .modal-success .modal-body h5 {
  font-weight: 700;
  font-size: 32px;
  color: var(--blue-first);
  margin: 20px 0 20px 0;
}
@media only screen and (max-width: 512px) {
  .modal-component .modal-success .modal-body h5 {
    font-size: 24px;
  }
}
.modal-component .modal-success .modal-body p {
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 20px;
}
.modal-component .modal-success .modal-body .btn-modal-simpan {
  background-color: var(--blue-sec);
  color: white;
}
.modal-component .modal-success .modal-body .btn-modal-simpan:hover {
  background-color: var(--blue-first);
}

.content .column-content .bg-total-absen,
.content .modal-component .bg-total-absen,
.modal-presensi .column-content .bg-total-absen,
.modal-presensi .modal-component .bg-total-absen {
  background-color: var(--blue-first);
}
.content .column-content .bg-absen-inhal,
.content .modal-component .bg-absen-inhal,
.modal-presensi .column-content .bg-absen-inhal,
.modal-presensi .modal-component .bg-absen-inhal {
  background-color: var(--account);
}
.content .column-content .bg-null,
.content .modal-component .bg-null,
.modal-presensi .column-content .bg-null,
.modal-presensi .modal-component .bg-null {
  background-color: var(--bg-null);
}
.content .column-content .bg-absen-responsi,
.content .modal-component .bg-absen-responsi,
.modal-presensi .column-content .bg-absen-responsi,
.modal-presensi .modal-component .bg-absen-responsi {
  background-color: var(--bg-responsi);
}
.content .column-content .bg-dosen,
.content .column-content .bg-pertemuan-mengganti,
.content .modal-component .bg-dosen,
.content .modal-component .bg-pertemuan-mengganti,
.modal-presensi .column-content .bg-dosen,
.modal-presensi .column-content .bg-pertemuan-mengganti,
.modal-presensi .modal-component .bg-dosen,
.modal-presensi .modal-component .bg-pertemuan-mengganti {
  background-color: var(--bg-dosen);
}
.content .column-content .bg-koor-asisten,
.content .column-content .bg-presensi,
.content .column-content .bg-presen,
.content .modal-component .bg-koor-asisten,
.content .modal-component .bg-presensi,
.content .modal-component .bg-presen,
.modal-presensi .column-content .bg-koor-asisten,
.modal-presensi .column-content .bg-presensi,
.modal-presensi .column-content .bg-presen,
.modal-presensi .modal-component .bg-koor-asisten,
.modal-presensi .modal-component .bg-presensi,
.modal-presensi .modal-component .bg-presen {
  background-color: var(--bg-grey);
}
.content .column-content .bg-inhal,
.content .column-content .bg-pertemuan-pengganti,
.content .modal-component .bg-inhal,
.content .modal-component .bg-pertemuan-pengganti,
.modal-presensi .column-content .bg-inhal,
.modal-presensi .column-content .bg-pertemuan-pengganti,
.modal-presensi .modal-component .bg-inhal,
.modal-presensi .modal-component .bg-pertemuan-pengganti {
  background-color: var(--bg-inhal);
}
.content .column-content .box-dosen,
.content .modal-component .box-dosen,
.modal-presensi .column-content .box-dosen,
.modal-presensi .modal-component .box-dosen {
  color: var(--bg-dosen);
}
.content .column-content .box-koor-asisten,
.content .column-content .bg-absen,
.content .modal-component .box-koor-asisten,
.content .modal-component .bg-absen,
.modal-presensi .column-content .box-koor-asisten,
.modal-presensi .column-content .bg-absen,
.modal-presensi .modal-component .box-koor-asisten,
.modal-presensi .modal-component .bg-absen {
  color: var(--bg-grey);
}
.content .column-content .box-pertemuan-pengganti,
.content .modal-component .box-pertemuan-pengganti,
.modal-presensi .column-content .box-pertemuan-pengganti,
.modal-presensi .modal-component .box-pertemuan-pengganti {
  color: var(--bg-inhal);
}
.content .column-content .box-pertemuan-mengganti,
.content .modal-component .box-pertemuan-mengganti,
.modal-presensi .column-content .box-pertemuan-mengganti,
.modal-presensi .modal-component .box-pertemuan-mengganti {
  color: var(--bg-dosen);
}

.column-content table .badge-status-mahasiswa-aktif {
  color: var(--blue-sec);
  background-color: var(--bg-badge-aktif);
  padding: 5px 10px;
  border-radius: 8px;
}
.column-content table .badge-status-mahasiswa-lulus {
  color: var(--font-green);
  background-color: var(--bg-badge-lulus);
  padding: 5px 10px;
  border-radius: 8px;
}
.column-content table .badge-status-tutup {
  color: var(--font-dark);
  background-color: var(--bg-grey);
  padding: 5px 10px;
  border-radius: 8px;
}
.column-content table .badge-button-inhal {
  color: var(--font-dark);
  background-color: var(--btn-inhal1-1);
  padding: 5px 10px;
  border-radius: 8px;
}
.column-content table .badge-button-inhal:hover {
  background-color: var(--btn-kuning);
}
.column-content table .badge-button-inhal-asisten {
  color: var(--bg-badge-lulus);
  background-color: var(--blue-sec);
  padding: 5px 10px;
  border-radius: 8px;
}
.column-content table .badge-button-inhal-asisten:hover {
  background-color: var(--btn-detail-table-active);
  color: var(--font-dark);
}

.badge-color-blue {
  color: #3b82f6;
  background-color: #eff6ff;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-color-orange {
  color: #ca8a04;
  background-color: #fefce8;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-color-red {
  color: #ca0404;
  background-color: #fee8e8;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-color-green {
  color: #22c55e;
  background-color: #f0fdf4;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media only screen and (min-width: 768px) {
  .page-informasi-praktikum .modal-dialog {
    /* Track */
    /* Handle */
  }
  .page-informasi-praktikum .modal-dialog ::-webkit-scrollbar {
    width: 8px;
  }
  .page-informasi-praktikum .modal-dialog ::-webkit-scrollbar-track {
    background-color: aliceblue;
  }
  .page-informasi-praktikum .modal-dialog ::-webkit-scrollbar-thumb {
    background: var(--grey);
    border-radius: 5px;
    height: 10px;
  }
}
.page-informasi-praktikum .card-informasi-praktikum {
  border-radius: 12px;
}
.page-informasi-praktikum .card-informasi-praktikum .card-footer {
  border-radius: 12px;
}
.page-informasi-praktikum .card-informasi-praktikum .tanggal-informasi-praktikum {
  color: var(--font-grey);
  font-size: 12px;
}
.page-informasi-praktikum .card-informasi-praktikum h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
}
.page-informasi-praktikum .card-informasi-praktikum p {
  font-size: 12px;
}
.page-informasi-praktikum .card-informasi-praktikum p .more-informasi-praktikum {
  display: none;
}
.page-informasi-praktikum .card-informasi-praktikum p .btn-informasi-praktikum {
  color: var(--btn-blue);
  cursor: pointer;
  font-weight: 700;
}
.page-informasi-praktikum .card-informasi-praktikum .btn-download-informasi-praktikum {
  background-color: var(--btn-blue);
  color: white !important;
}
.page-informasi-praktikum .card-informasi-praktikum .btn-download-informasi-praktikum:hover {
  background-color: var(--blue-first);
}/*# sourceMappingURL=main.css.map */