.content {
  padding: 20px !important;
}

.page-title {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 20px;
  margin-top: 0;
}

.card {
  background-color: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-bottom: 20px;

  & .card-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 15px;
  }

  & .card-img-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
  }

  & .card-body {
    padding: 20px;

    & .card-left {
      flex: 0 0 20%;
      border-right: 1px solid #e7ebed;
      @media (max-width: 768px) {
        flex: 1 1 100%;
        border-right: none;
        border-bottom: 1px solid #e7ebed;
        overflow-x: auto;
        white-space: nowrap;
      }
    }

    & .card-right {
      flex: 1;
    }
  }

  & .card-list-menu {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;

    @media (max-width: 768px) {
      display: flex;
      gap: 0;
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
    }

    & a {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      padding: 15px 0;
      color: #777;
      text-decoration: none;
      @media (max-width: 768px) {
        padding: 15px;
      }

      & i {
        font-size: 18px;
        @media (max-width: 768px) {
          display: none;
        }
      }

      &.active {
        font-weight: 600;
        color: #00a380;
        border-right: 2px solid #00a380;
        @media (max-width: 768px) {
          border-right: none;
          border-bottom: 2px solid #00a380;
        }
      }

      &:hover {
        color: #00a380;
        border-right: 2px solid #00a380;
        @media (max-width: 768px) {
          border-right: none;
          border-bottom: 2px solid #00a380;
        }
      }
    }
  }
}

.d-flex {
  display: flex;
  @media (max-width: 768px) {
    flex-direction: column;
  }
}

.justify-content-between {
  justify-content: space-between;
}

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

.gap-10 {
  gap: 10px;
}

.gap-20 {
  gap: 20px;
}

.gap-30 {
  gap: 30px;
}

/* Default mode */
.tabbable-line > .nav-tabs {
  border: none;
  margin: 0px;
}
.tabbable-line > .nav-tabs > li {
  margin-right: 2px;
}
.tabbable-line > .nav-tabs > li > a {
  border: 0;
  margin-right: 0;
  color: #737373;
}
.tabbable-line > .nav-tabs > li > a > i {
  color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open,
.tabbable-line > .nav-tabs > li:hover {
  border-bottom: 4px solid #b6e1d8;
}
.tabbable-line > .nav-tabs > li.open > a,
.tabbable-line > .nav-tabs > li:hover > a {
  border: 0;
  background: none !important;
  color: #333333;
}
.tabbable-line > .nav-tabs > li.open > a > i,
.tabbable-line > .nav-tabs > li:hover > a > i {
  color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open .dropdown-menu,
.tabbable-line > .nav-tabs > li:hover .dropdown-menu {
  margin-top: 0px;
}
.tabbable-line > .nav-tabs > li.active {
  border-bottom: 3px solid #00a380;
  position: relative;
}
.tabbable-line > .nav-tabs > li.active > a {
  border: 0;
  color: #00a380;
  font-weight: 600;
}
.tabbable-line > .nav-tabs > li.active > a > i {
  color: #404040;
}
.tabbable-line > .tab-content {
  margin-top: -3px;
  background-color: #fff;
  border: 0;
  border-top: 1px solid #eee;
  padding: 15px 0;
}
.portlet .tabbable-line > .tab-content {
  padding-bottom: 0;
}

#loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.card-content {
  position: relative;
  min-height: 200px; /* biar ga collapse waktu loading */
}

.card-body .card-left,
.card-list-menu {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.card-body .card-left::-webkit-scrollbar,
.card-list-menu::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

@media (max-width: 768px) {
  .card-body .card-left,
  .card-list-menu {
    scroll-snap-type: x mandatory; /* enable horizontal snapping */
    -webkit-overflow-scrolling: touch;
  }

  .card-body .card-left > *,
  .card-list-menu > li {
    scroll-snap-align: start; /* each child will snap to start */
  }
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  background-color: #f2f5f9 !important;
  border-color: #ccd5e0 !important;
  color: #202020;
}
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove {
  color: #202020 !important;
}

.content-wrapper,
.right-side {
  min-height: 100%;
  background-color: #f6f8fd;
}

.change-image {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.card-img-circle {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.change-image .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
  color: #fff;
  font-size: 24px;
  pointer-events: none; /* biar hover tetap jalan */
}

.change-image:hover .overlay {
  opacity: 1;
}

.change-image:active .overlay {
  opacity: 1;
}

.ms-2 {
  margin-left: 0.5rem;
}