:root {
  --primary-color: #00923F;     /* Hijau utama (logo dan elemen utama) */
  --secondary-color: #01863a;     /* Hijau utama (logo dan elemen utama) */
  --accent-color: #F4F4F4;      /* Abu terang (latar belakang sekunder) */
  --text-color: #2C2C2C;        /* Abu gelap (teks utama) */
  --hover-color: #007A33;       /* Hijau lebih gelap untuk efek hover */
}


/*state overview*/
.navbar {
  background-color: var(--hover-color);
}
.navbar .navbar-buttons .nav li a.dropdown-toggle {
  background-color: var(--secondary-color);
}

.btn-primary {
  background-color: var(--secondary-color) !important;
  color: #eee !important;
  border: none;
  transition: all 0.3s ease-in-out;
}
.btn-primary:hover {
  background-color: var(--hover-color) !important;
  color: #fff !important;
}

.table-header {
  background-color: var(--secondary-color) !important;
  color: #fff !important;
}

.alert.alert-block.alert-info {
  background-color: rgb(216, 255, 229) !important;
  border: 1px solid var(--primary-color) !important;
  color: var(--hover-color) !important;
}

.state-overview .symbol, .state-overview .value {
  display: inline-block;
  text-align: center;
}

.state-overview .value  {
  float: right;
}

.state-overview .value h1, .state-overview .value p  {
  margin: 0;
  padding: 0;
  color: var(--hover-color);
  font-size: 17px;
}

.state-overview .value a {
  text-decoration: none;
}

.state-overview .value h1 {
  font-weight: 300;
}

.state-overview .symbol i {
  color: #fff;
  font-size: 50px;
}

.state-overview .symbol {
  width: 40%;
  padding: 25px 15px;
  -webkit-border-radius: 4px 0px 0px 4px;
  border-radius: 4px 0px 0px 4px;
}

.state-overview .value {
  width: 58%;
  padding-top: 21px;
}

.state-overview .terques {
  background: #6ccac9;
}

.state-overview .red {
  background: #ff6c60;
}

.state-overview .yellow {
  background: #f8d347;
}

.state-overview .blue {
  background: var(--secondary-color);
}