:root {
  --primary: hsl(206, 100%, 37%);
  --primary-shade: hsl(206, 100%, 35%);
  --primary-dark: hsl(208, 88%, 33%);
  --accent: #4AC900;
  --danger: rgb(215, 6, 55);
  --light: #EFF0F0;
  --dark: #021F5C;
  --body: #f6f6f6;
  --secondary: #90a1b9;
  --success: #00d492;

  --slate-2: oklch(96.8% 0.007 247.896);
  --slate-3: oklch(92.9% 0.013 255.508);


  --color-overlay-gradient: linear-gradient(to top, rgba(0, 3, 12, 0.9) 0%, rgba(17, 63, 231, 0.3) 100%);
  /* https://smoothshadows.com/#djEsMSw1LDAuMDMsMTA4LDgyLDAsIzAyMWY1YywjZjZmNmY2LCNmZmZmZmYsMg%3D%3D */
  --shadow-1: 0px 3px 4px rgba(2, 31, 92, 0.01),
    0px 13px 17px rgba(2, 31, 92, 0.01),
    0px 30px 39px rgba(2, 31, 92, 0.02),
    0px 52px 69px rgba(2, 31, 92, 0.02),
    0px 82px 108px rgba(2, 31, 92, 0.03);

}

@font-face {
  font-display: swap;
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/plus-jakarta-sans.woff2') format('woff2');
}

/* bebas-neue-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/bebas-neue.woff2') format('woff2');
}


.bebas-neue {
  font-family: 'Bebas Neue', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}


body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 400;
  font-size: 16px;
  font-optical-sizing: auto;
  font-style: normal;
  /* background-color: #f1f5f9; */
  color: var(--dark);
  display: flex;
  flex-direction: column;
  height: 100dvh;
}


/* btn */
.btn {
  font-size: 1rem;
  padding: 0.5rem 1rem;
  font-weight: 500;
  letter-spacing: 0.05px;
  border-radius: 0.65rem;
}

/* Base variants */
.btn-success {
  background-color: var(--success) !important;
  border-color: var(--success) !important;
}

.btn-success:hover {
  background-color: var(--success) !important;
  border-color: var(--success) !important;
}

.btn-danger {
  background-color: var(--danger) !important;
  border-color: var(--danger) !important;
}

.btn-danger:hover {
  background-color: var(--danger) !important;
  border-color: var(--danger) !important;
}

.btn-secondary {
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
}

.btn-secondary:hover {
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
}

.btn-light {
  background-color: var(--light) !important;
  border-color: var(--light) !important;
}

.btn-light:hover {
  background-color: var(--light) !important;
  border-color: var(--light) !important;
}

.btn-warning {
  background-color: var(--warning) !important;
  border-color: var(--warning) !important;
}

.btn-warning:hover {
  background-color: var(--warning) !important;
  border-color: var(--warning) !important;
}

.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.btn-primary:hover {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.btn-info {
  background-color: var(--info) !important;
  border-color: var(--info) !important;
}

.btn-info:hover {
  background-color: var(--info) !important;
  border-color: var(--info) !important;
}

.btn-dark {
  background-color: var(--dark) !important;
  border-color: var(--dark) !important;
}

.btn-dark:hover {
  background-color: var(--dark) !important;
  border-color: var(--dark) !important;
}


/* Outline variants */

.btn-outline-light {
  border-color: #cad5e2;
}

.btn-outline-light:hover {
  border-color: #cad5e2;
}

.btn-outline-primary {
  border-color: var(--primary);
  background-color: transparent;
  color: var(--primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary:not(:disabled):not(.disabled).active {
  background-color: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.btn-outline-secondary {
  border-color: var(--secondary);
  background-color: transparent;
  color: var(--secondary);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary:not(:disabled):not(.disabled).active {
  background-color: var(--secondary);
  color: #fff;
  border-color: var(--secondary);
}

.btn-outline-success {
  border-color: var(--success);
  background-color: transparent;
  color: var(--success);
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-success:not(:disabled):not(.disabled).active {
  background-color: var(--success);
  color: #fff;
  border-color: var(--success);
}

.btn-outline-danger {
  border-color: var(--danger);
  background-color: transparent;
  color: var(--danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active,
.btn-outline-danger:not(:disabled):not(.disabled).active {
  background-color: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

.btn-outline-warning {
  border-color: var(--warning);
  background-color: transparent;
  color: var(--warning);
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active,
.btn-outline-warning:not(:disabled):not(.disabled).active {
  background-color: var(--warning);
  color: #000;
  border-color: var(--warning);
}

.btn-outline-info {
  border-color: var(--info);
  background-color: transparent;
  color: var(--info);
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active,
.btn-outline-info:not(:disabled):not(.disabled).active {
  background-color: var(--info);
  color: #fff;
  border-color: var(--info);
}

.btn-outline-dark {
  border-color: var(--dark);
  background-color: transparent;
  color: var(--dark);
}

.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark:active,
.btn-outline-dark:not(:disabled):not(.disabled).active {
  background-color: var(--dark);
  color: #fff;
  border-color: var(--dark);
}

.nav-pills .nav-link {
  border-radius: 1.5rem;
  color: var(--dark);
  font-weight: 700;
}

.nav-pills .nav-link.active {
  background-color: var(--primary);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-1);
}

/* main */
.main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* shadow */
.shadow-1 {
  box-shadow: var(--shadow-1);
}

/* monitor */
.page-monitor {
  background-color: var(--slate-3);
  border-radius: 2rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

.page-monitor__inner {
  background-color: white;
  padding: 1.5rem;
  border-radius: 1rem;
}

.monitor-tabs {
  display: flex;
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
  background-color: var(--slate-2);
  padding: 0.25rem;
  border-radius: 200px;
}

.page-monitor .table-wrapper {
  min-height: 500px;
  height: 100%;
  overflow-y: auto;
}

.iku-table th {
  background-color: oklch(90.1% 0.058 230.902);
  border: 1px solid oklch(74.6% 0.16 232.661);
}

.card-statistics {
  border-radius: 1rem;
  height: 100%;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}

.card-statistics__title {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
}

.card-statistics__value {
  font-size: 2rem;
  font-weight: 700;
  display: block;
  position: relative;
  z-index: 2;

}

.card-statistics--total {
  background-color: oklch(97% 0.014 254.604);
  border: 1px solid oklch(80.9% 0.105 251.813);
}

.card-statistics--mengisi {
  background-color: oklch(98.2% 0.018 155.826);
  border: 1px solid oklch(87.1% 0.15 154.449);
}

.card-statistics--proses {
  background-color: oklch(98.7% 0.026 102.212);
  border: 1px solid oklch(94.5% 0.129 101.54);
}

.card-statistics--belum {
  background-color: oklch(96.9% 0.015 12.422);
  border: 1px solid oklch(89.2% 0.058 10.001);
}

.card-statistics__wave {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

.swiper-monitor {
  width: 100vw;
}

@media screen and (max-width: 768px) {
  .monitor-tabs {
    flex-direction: column;
    width: 100%;
    border-radius: 1rem;
    padding: 8px;
  }

  .monitor-tabs .nav-link {
    width: 100%;
    border-radius: 0.5rem;
  }

  .nav-pills .nav-link.active {
    border-radius: 0.5rem;
  }
}