/* 
  Author: Albar
*/ 
  --primary-color: #121a41;
  --secondary-color: #0f5ef6;
  --btn-secondary-color: #f8c076;
  --divider-color: #888ca1;
  --text-gray: #b9bac6;
  --border-gray: #d0d5dd;
  --table-bg-gray: #f2f2f2;
  --grid-color: #eff6fe;
  .form-control:focus {
    border-color: #121a41;
  }
  .btn-flat {
    border-radius: 0 !important;
  }
  .blue__modal--blur {
    backdrop-filter: blur(10px);
  }
  .text-primary {
    color: #121a41 !important;
  }
  .form-check-input:checked, .form-check-input[type=checkbox]:indeterminate {
    background-color: #121a41;
    border-color: #121a41;
    box-shadow: 0 2px 4px 0 rgba(19, 26, 65, .4);
  }
  .form-check-input:focus {
    border-color: #121a41;
    box-shadow: 0 2px 4px 0 rgba(19, 26, 65, .4);
  }
  .bg-menu-theme {
    background-color: #121a41 !important;
    .menu-inner-shadow {
      background: none;
    }
    .menu-item {
      .menu-link {
        color: white;
        border-radius: 0 !important;
      }
      &.active {
        .menu-link {
          color: white;
        }
      }
      &.open {
        .menu-link.menu-toggle {
          color: white;
        }
      }
    }
    .menu-inner {
      overflow-x: hidden !important;
      .menu-item__divider {
        height: 2px;
        background-color: #888ca1;
        display: block;
        width: 80%;
        margin-inline: -2rem;
        align-self: center;
      }
      > .menu-item.active {
        &::before {
          background: none;
          display: none;
        }
        > .menu-link {
          background-color: #0f5ef6 !important;
        }
      }
      .create-new {
        color: black;
        margin-block-end: 1.5rem;
        > a {
          color: inherit;
          background-color: white;
          &:hover {
            background-color: white !important;
          }
        }
      }
    }
    .brand-wrapper {
      display: flex;
      margin-inline: 1rem;
      margin-block-start: 1rem;
      margin-block-end: 1.5rem;
      padding-inline: 1rem;
    }
  }

  header {
    background-color: #121a41;
    .toolbar-wrapper {
      display: flex;
      justify-content: flex-end;
      .navbar-dropdown {
        &.dropdown-shortcuts {
          .dropdown-shortcuts-item {
            text-align: center;
            padding: 1.5rem;
            a {
              display: block;
            }
          }
          .dropdown-shortcuts-list {
            max-height: 20rem;
          }
        }
        .dropdown-menu {
          min-width: 22rem;
          overflow: hidden;
        }
      }
      .nav-link {
        color: white;
      }
    }
    .header-title-outer-container {
      background-color: #eeeff2;
      .header-title-wrapper {
        display: flex;
        align-items: center;
        padding-block: 1rem;
        > img {
          margin-right: 10px;
        }
        > h2 {
          margin: 0;
          color: black;
        }
      }
    }
    .welcome-container {
      padding-block: 3rem;
      color: white;
      background: url("../img//header-bg-bottom.png") no-repeat bottom right;
      h2 {
        color: inherit;
        margin-block-end: 5px;
      }
      p {
        color: #b9bac6;
      }
    }
    .layout-navbar {
      position: static;
      background-color: unset !important;
      padding-block: 0;
      height: auto;
      backdrop-filter: unset;
      .nav-link {
        color: white;
      }
    }
  }
  .brand-wrapper {
    display: flex;
    align-items: center;
    img {
      margin-inline-end: 10px;
    }
    h1 {
      margin: unset;
      color: white;
    }
  }
  &.layout-menu-fixed {
    .layout-wrapper:not(.layout-horizontal) {
      .layout-page::before {
        display: none;
      }
    }
    .layout-navbar.navbar-detached {
      width: 100% !important;
      border-radius: 0;
      margin-top: 0;
      background-color: #121a41 !important;
      .layout-menu-toggle {
        a {
          color: white;
        }
      }
      .navbar-nav-right {
        .navbar-nav > .nav-item > .nav-link {
          color: white;
        }
      }
    }
    .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) {
      .layout-page {
        padding-block-start: 0 !important;
      }
    }
  }
  .avatar.card-icon {
    position: static;
    width: auto;
    height: auto;
  }
  .table.blue-theme__table {
    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
    td,
    th {
      border: 0;
    }
    td > a:not(.btn) {
      color: black;
      text-decoration: underline;
    }
    td > i + a {
      margin-inline-start: 0.5rem;
    }
    th {
      padding-block: 1rem;
      background-color: #121a41;
      color: white;
    }
  }
  .btn-outline-primary {
    border: 1px solid #b9bac6;
    color: black;
    &:hover {
      background-color: #0f5ef6 !important;
      border-color: #0f5ef6 !important;
    }
    &.active {
      background-color: #0f5ef6 !important;
      border-color: #0f5ef6 !important;
    }
  }
  .blue-theme__pagination {
    > li.page-item.active > a {
      background-color: #0f5ef6;
    }
  }
  .grid-card {
    background-color: #eff6fe;
    padding-inline: 0.5rem;
    padding-block: 0.5rem;
    .grid-card__header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.5rem;
      .grid-card__header-left {
        > a {
          display: inline-block;
          max-inline-size: 150px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #000;
        }
      }
    }
    .grid-card__body {
      img {
        width: 100%;
        height: 150px;
        object-fit: cover;
      }
    }
    .grid-card__footer {
      display: flex;
      gap: 2px;
      align-items: center;
      margin-top: 0.5rem;
      .user-avatar {
        > img {
          width: 28px;
          height: 28px;
        }
        > .user-initials {
          background-color: #0f5ef6;
          color: white;
          width: 28px;
          height: 28px;
          display: flex;
          justify-content: center;
          align-items: center;
          > span {
            font-size: 12px;
          }
        }
      }
      > span {
        font-size: 12px;
      }
    }
  }
  /* Calendar */
  .blue-theme__calendar {
    &.fc {
      .fc-button-primary {
        &.fc-button-active {
          background-color: #0f5ef6 !important;
        }
        &:hover {
          background-color: #0f5ef6 !important;
          color: white !important;
        }
      }
      .fc-button-primary:not(.fc-button-active):not(.fc-next-button):not(
          .fc-prev-button
        ) {
        color: black;
      }
      .fc-toolbar.fc-header-toolbar {
        display: flex;
        flex-direction: column;
      }
    }
  }
  .blue__search-field-container--with-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    form {
      flex-basis: 100%;
    }
    .input-group {
      span:has(+ input:focus) {
        border-color: #121a41;
      }
      input {
        border-left: 0;
        padding-inline-start: 0;
      }
    }
    button {
      flex-basis: auto;
    }
  }
  .blue__btn {
    box-shadow: none;
    &.blue__btn--default {
      background-color: unset;
      border: 1px solid #d0d5dd;
      color: black;
      &:hover {
        background-color: initial !important;
        border: 1px solid #d0d5dd !important;
        color: black !important;
      }
    }
    &.blue__btn--primary {
      background-color: #121a41;
      border: 1px solid #121a41;
      color: white;
      &:hover {
        background-color: #121a41 !important;
        border: 1px solid #121a41 !important;
        color: white !important;
      }
    }
    &.blue__btn--secondary {
      background-color: #0f5ef6;
      border: 1px solid #0f5ef6;
      color: black;
      &:hover {
        background-color: #0f5ef6 !important;
        border: 1px solid #0f5ef6 !important;
        color: black !important;
      }
    }
    &.blue__btn--search {
      background-color: transparent;
      border: 1px solid #121a41;
      color: black;
      &:hover {
        background-color: transparent !important;
        border: 1px solid #121a41 !important;
        color: black !important;
      }
    }
    &.blue__btn--submit {
      background-color: #0f5ef6;
      border: 1px solid #0f5ef6;
      color: white;
      &:hover {
        background-color: #0f5ef6 !important;
        border: 1px solid #0f5ef6 !important;
        color: white !important;
      }
    }
  }

  .drop-zone {
    width: 100%;
    padding: 20px;
    border: 2px dashed #007bff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    color: black;
    cursor: pointer;
    transition: 0.3s;
    margin: auto;
    height: 300px;
  }

  .drop-zone.dragover {
    background-color: #f0f8ff;
    border-color: #0056b3;
  }

  .drop-zone p {
    margin: 0;
  }

  .blue__file-input {
    display: none;
  }


.vertical-divider {
  background-color: #888ca1;
  width: 1px;
  height: 50%;
}

@media (max-width: 767.98px) {
  .blue-theme {
    header {
      .header-title-outer-container {
        .header-title-wrapper {
          margin-top: 4rem;
        }
      }
    }
  }
  .md-gap-bottom {
    margin-block-end: 1.5rem;
  }
}

@media (min-width: 768px) {
  .blue-theme {
    .blue__search-field-container--with-filter {
      form {
        flex-basis: 50%;
      }
    }
  }
}

@media (min-width: 1200px) {
  .blue-theme {
    &.layout-menu-fixed {
      .layout-menu {
        position: relative;
      }
      &:not(.layout-menu-collapsed) {
        .layout-page {
          padding-inline-start: 0;
        }
      }
      &.layout-menu-collapsed {
        .layout-page {
          padding-inline-start: 0;
        }
      }
      .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) {
        .layout-page {
          padding-block-start: 0 !important;
        }
      }
      .layout-wrapper:not(.layout-horizontal) {
        .layout-page::before {
          display: none;
        }
      }
    }
    header {
      .toolbar-wrapper {
        .navbar-dropdown .dropdown-menu {
          position: absolute;
        }
      }
    }
    .blue-theme__calendar {
      &.fc {
        .fc-toolbar {
          .fc-toolbar-title {
            color: black;
            font-size: 1.2rem;
          }
          &.fc-header-toolbar {
            display: flex;
            flex-direction: row;
          }
        }
      }
    }
  }
}
 
 

#root {
    min-height: 80vh;
  }

  .search_new-container {
    padding: 10px;
    position: relative;
  }

  .search_new-input {
    width: 100%;
    padding: 10px 40px 10px 55px;
    border: 1px solid #ccc;
    border-radius: 20px;
    outline: none;
    font-size: 16px;
  }

  .img-search-topbar {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
  }

  .search_new-clear-button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    display: none;
  }

  .search_new-clear-button svg {
    width: 20px;
    height: 20px;
    color: #888;
  }

  /* Style untuk hasil pencarian */
  .search-results {
    list-style: none;
    padding: 0;
    margin: 5px 0 0;
    position: absolute;
    width: 100%;
    background: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    max-height: 200px;
    overflow-y: auto; 
    z-index: 100;
  }

  .search-results li {
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    color: #000;
  }

  .search-results a {
    text-decoration: none;
    /* Menghilangkan garis bawah pada link */
    color: #333;
    /* Mengubah warna teks link (misal, menjadi hitam) */
  }

  .search-results li:hover {
    background: #f0f0f0;
  }

  .search-results li:last-child {
    border-bottom: none;
  }