.login-card {
  animation: fadeUp 0.8s ease-out both;
}

.login-animate {
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 0.8s ease-out forwards;
}

.login-animate.delay-1 {
  animation-delay: 0.1s;
}

.login-animate.delay-2 {
  animation-delay: 0.2s;
}

.login-animate.delay-3 {
  animation-delay: 0.3s;
}

.login-animate.delay-4 {
  animation-delay: 0.4s;
}

.error-box {
  animation: shake 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-6px);
  }

  50% {
    transform: translateX(6px);
  }

  75% {
    transform: translateX(-6px);
  }

  100% {
    transform: translateX(0);
  }
}

.ring {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: conic-gradient(#2c4d9a 0%, #0b1222 50%, #2c4d9a 100%);
  animation: spin 2s linear infinite;
}

.ring::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  background: #ffffff;
  border-radius: 50%;
  z-index: 1;
}

.ring::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  background: #2c4d9a;
  transform: translate(-50%, -50%);
  border-radius: 0 100% 0 0;
  z-index: 2;
  animation: rotate 2s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.select2-results__options {
  font-size: 0.775rem !important;
}

.select2-selection__rendered {
  font-size: 0.775rem;
}

.select2-search {
  font-size: 0.775rem;
}

.select2-search__field {
  font-size: 0.775rem;
}

.select2-selection__choice {
  font-size: 0.775rem;
}

.select2-selection__choice__display {
  font-size: 0.775rem;
}

.dashboard-sidebar {
  animation: slideInLeft 0.7s ease-out both;
}

.dashboard-main {
  animation: fadeInUp 0.7s ease-out both;
}

.dashboard-content {
  animation: fadeInUp 0.8s ease-out both;
  animation-delay: 0.1s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.dashboard-sidebar {
  background: #8B4513 !important;
  border: none !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
}

.dashboard-sidebar .sidenav-header .navbar-brand {
  color: #ffffff !important;
}

.dashboard-sidebar .navbar-brand-img {
  width: 33px;
  height: 36px;
  max-height: 36px;
}

.rounded-logo {
  border-radius: 12px;
  object-fit: cover;
}

.dashboard-sidebar .navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.dashboard-sidebar .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dashboard-sidebar .nav-link:hover,
.dashboard-sidebar .nav-link.active {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.dashboard-sidebar .nav-link.active {
  background-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: inset 4px 0 0 #ffffff;
}

.dashboard-sidebar .nav-link .icon {
  background: rgba(255, 255, 255, 0.2) !important;
}

.dashboard-sidebar .nav-link .icon i {
  color: #ffffff !important;
}

.dashboard-sidebar h6.text-uppercase,
.dashboard-sidebar .opacity-6 {
  color: rgba(255, 255, 255, 0.8) !important;
  opacity: 1 !important;
}

.dashboard-sidebar h6.text-uppercase {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

.dashboard-content {
  background: transparent;
}

.footer {
  background: transparent;
}


/* ===================================
   WELCOME CARD
=================================== */

.welcome-card {
  background: linear-gradient(135deg, #8B4513, #B5651D);
  border-radius: 16px;
}

.welcome-description {
  opacity: .8;
}

.welcome-info-box {
  background: rgba(255,255,255,.15);
  border-radius: 12px;
}

.welcome-role-badge {
  background: #D4A017;
  color: white;
  border-radius: 20px;
  font-size: 13px;
}

.welcome-avatar {
  width: 140px;
  height: 140px;
  background: rgba(255,255,255,.18);
}

.welcome-avatar i {
  color: white;
  font-size: 65px;
}


/* ===================================
 FILTER CARD
=================================== */

.filter-header-custom {
  background: #fffaf5;
}

.filter-title-custom {
  color: #8B4513;
}


.btn-reset-custom {
  border: 1px solid #8B4513;
  color: #8B4513;
  border-radius: 10px;
}


.btn-reset-custom:hover {
  background: #8B4513;
  color: white;
}


.btn-filter-custom {
  background: #8B4513;
  color: white;
  border-radius: 10px;
}


.btn-filter-custom:hover {
  background: #6d350d;
  color: white;
}

/* ===================================
   CHART DASHBOARD
=================================== */

.chart-card {
  border: 0;
  border-radius: 16px;
  overflow: hidden;
}


.chart-header-custom {
  background: #fffaf5;
  border-bottom: 1px solid #eee;
}


.chart-title-custom {
  color: #8B4513;
  font-weight: 700;
}


.chart-subtitle-custom {
  color: #777;
  font-size: 13px;
}


.chart-body-custom {
  padding: 25px;
}


.chart-container {
  background: #ffffff;
  border-radius: 15px;
  padding: 15px;
}


/* Legend */

.chart-legend-item {
  display: flex;
  align-items: center;
  margin-top: 15px;
}


.chart-color-box {
  width: 35px;
  height: 12px;
  border-radius: 5px;
  margin-right: 10px;
}


/* Filter */

.chart-filter-label {
  color: #8B4513;
  font-weight: 600;
}


.btn-chart-custom {
  background: #8B4513;
  color: white;
  border-radius: 10px;
}


.btn-chart-custom:hover {
  background: #6d350d;
  color: white;
}




/* ===============================
   BANGGA IACM LOGIN
   COMPACT EXECUTIVE
================================ */

body {
  margin:0;
}

/* Background */
.modern-login {
  min-height:100vh;
  position:relative;
  overflow:hidden;
  background:
  linear-gradient(
      120deg,
      #fff7ed,
      #ffedd5,
      #d6b48a
  );
}


/* Decoration */
.modern-login::before {
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  background:#8B4513;
  opacity:.08;
  border-radius:50%;
  top:-180px;
  left:-150px;
}

.modern-login::after {
  content:"";
  position:absolute;
  width:450px;
  height:450px;
  background:#f97316;
  opacity:.12;
  border-radius:50%;
  right:-150px;
  bottom:-150px;
}



/* Card */
.login-card {
  position:relative;
  z-index:2;
  border:none;
  border-radius:22px;
  overflow:hidden;
  background:white;
  border-left:5px solid #8B4513;
  box-shadow:0 20px 45px rgba(139,69,19,.20);
}

/* Header */
.login-header {
  padding-top:22px!important;
  padding-bottom:5px!important;
}


/* Logo */
.logo-box {
  width:75px;
  height:75px;
  margin:auto;
  padding:8px;
  background:white;
  border-radius:20px;
  border:2px solid #f97316;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px rgba(249,115,22,.25);
}



.logo-box img {
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Text */
.login-title {
  color:#3b1f0b;
  font-size:19px;
  font-weight:800;
  margin-top:12px!important;
  margin-bottom:8px!important;
}

.login-subtitle {
  color:#6b7280;
  font-size:12px;
  line-height:16px;
}

/* Body */
.login-card .card-body {
  padding:
  10px 40px 15px!important;
}

.form-label {
  color:#3b1f0b;
  font-size:13px;
  font-weight:700;
  margin-bottom:5px;
}

.form-control {
  height:42px;
  border-radius:11px!important;
  font-size:13px;
}

.input-group-text {
  background:#fff7ed;
  color:#8B4513;
  border:none;
}

/* Captcha */
.captcha-box {
  height:42px;
  border-radius:11px;
  background:#fff;
  border:1px solid #ddd;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* Button */
.login-btn {
  height:44px;
  border-radius:12px;
  background:
  linear-gradient(
      135deg,
      #8B4513,
      #f97316
  );
  border:none;
  color:white;
  font-size:15px;
  font-weight:700;
}

.login-btn:hover {
  color:white;
  transform:translateY(-2px);
}


/* Support */
.support-link {
  color:#8B4513;
  font-weight:700;
}

/* Footer */
.login-footer {
  border-top:
  1px solid #f1f1f1;
  margin-top:18px;
  padding-top:12px;
}

.footer-text {
  color:#8B4513!important;
  font-size:12px;
  margin-bottom:3px;
}

.footer-text strong {
  font-weight:800;
}

.footer-subtext {
  color:#a16207;
  font-size:11px;
}