:root {
  --brand1 : #01a876;
  --brand2 : #41c797;
  --brand3 : #d1e7b8;
  --brand4 : #d1e7b8;
  --brand5 : #cfcfcf;
  --brand6 : #b8b8b9;
  --brand7 : #F2973F;
  --brand8 : #FBCA0D;
  --brand9 : #fff1b9;
  --brand10 : #A80054;
  --brand11 : #808836;
  --brand12 : #7366FF;
  --brand13 : #483bcf;
}

.scroll-container {
    max-height: 70vh;
    overflow-y: auto;
}

.scroll-container-loan {
    min-height: 50vh;
    max-height: 50vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

.scroll-container-loan::-webkit-scrollbar {
    width: 8px;
}

.scroll-container-loan::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.scroll-container-loan::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Kelas khusus untuk Select2 error */
.select2-container--default .select2-selection--single.border-danger {
    border: 1px solid #dc3545 !important;
}

.select2-container--default .select2-selection--multiple.border-danger {
    border: 1px solid #dc3545 !important;
}


/* Menghapus border default Select2 */
.select2-container--default .select2-selection--single {
    border: none;
}

.select2-container--default .select2-selection--multiple {
    border: none;
}

/* Memberikan border merah saat ada error */
.select2-container--default .select2-selection--single.border-danger {
    border: 1px solid #dc3545 !important;
}

.select2-container--default .select2-selection--multiple.border-danger {
    border: 1px solid #dc3545 !important;
}


.full-height {
    height: 100vh;
}

.bg-gradient-theme-navbar{
  background: linear-gradient(to bottom, var(--brand1) 0%, var(--brand2) 100%) !important;
}

.bg-transparant-1{
    background-color: #ffffffab !important;
  }

  .bg-transparant-2{
    background-color: #ffffffda !important;
  }

.bg-theme-1{
    background: linear-gradient(to bottom, var(--brand5) 0%, var(--brand6) 100%) !important;
    color: #000000 !important;
}

.bg-theme-2{
  background-color: var(--brand3) !important;
}

.bg-theme-3{
  background-color: var(--brand6) !important;
}

.bg-theme-4{
  background-color: var(--brand5) !important;
}

.bg-theme-10{
    background-color: var(--brand9) !important;
  }

.bg-theme-11{
background-color: var(--brand10) !important;
}

.bg-theme-12{
    background-color: var(--brand11) !important;
}

.bg-theme-13{
    background: linear-gradient(to bottom, var(--brand13) 0%, var(--brand12) 100%) !important;
    color: #ffffff !important;
}

.bg-theme-14{
    background-color: var(--brand7) !important;
}

.font-theme-1{
    color: var(--brand3) !important;
  }

.bg-theme-transparant{
  background-color: var(--brand3) !important;
}

.animasi-blink{
    animation: blink-animation 0.5s infinite alternate;
}

@keyframes blink-animation {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.animasi-petunjuk{
  -webkit-animation: pulsing 1s infinite;
   animation: pulsing 1s infinite;
}

@-webkit-keyframes pulsing {
  0% {
    -webkit-transform: scale(0.7, 0.7);
    transform: scale(0.7, 0.7)
  }
  50% {
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
  }
  100% {
    -webkit-transform: scale(0.7, 0.7);
    transform: scale(0.7, 0.7)
  }
}

@keyframes pulsing {
  0% {
    -webkit-transform: scale(0.7, 0.7);
    transform: scale(0.7, 0.7)
  }
  50% {
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
  }
  100% {
    -webkit-transform: scale(0.7, 0.7);
    transform: scale(0.7, 0.7)
  }
}

#loader {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
}

.body-approval-email {
    margin: 0;
    padding: 0;
    background-image: url('/assets-me/image/banner/inkali.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
}

.horizontal-stepper {
    flex-wrap: wrap;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.horizontal-stepper {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 10px;
}

.dropdown-submenu {
    position: relative !important;
}

.dropdown-submenu > .dropdown-menu {
    top: 0 !important;
    left: 100% !important;
    margin-left: 0.1rem !important;
    margin-top: -0.2rem !important;
    display: none !important;
    position: absolute !important;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block !important;
}


.step-dot {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    color: white;
    font-weight: bold;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #ccc;
    position: relative;
    z-index: 2;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.step-dot.active {
    background-color: var(--brand1);
}

.step-dot.completed {
    background-color: var(--brand3);
    color: #000000;
}

.step-line {
    height: 2px;
    width: 24px;
    background-color: #ddd;
    z-index: 1;
    margin: 0 6px;
    margin-top: 11px;
}


























.edit-step-dot {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    color: white;
    font-weight: bold;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #ccc;
    position: relative;
    z-index: 2;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.edit-step-dot.active {
    background-color: var(--brand1);
}

.edit-step-dot.completed {
    background-color: var(--brand3);
    color: #000000;
}

.edit-step-line {
    height: 2px;
    width: 24px;
    background-color: #ddd;
    z-index: 1;
    margin: 0 6px;
    margin-top: 11px;
}