:root {
  --primary: #024B94;
  --accent: #FF891C;
  --grey: #56606A;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: #e2e2e2;
}

::-webkit-scrollbar-track {
  background-color: white !important;
  width: 8px;
}

/* ----------------------------- */

html {
  scroll-behavior: smooth;
}

* {
  font-family: "Rubik", sans-serif !important;
}

p {
  font-weight: 400;
}

.text-primary {
  color: var(--primary) !important;
}

.text-accent {
  color: var(--accent) !important;
}

.text-grey {
  color: var(--grey) !important;
}

.btn {
  min-width: 110px !important;
  padding: 8px 24px !important;
  border-radius: 100px !important;
  font-size: 16px !important;
}

.navbar.navbar-light.fixed {
  backdrop-filter: blur(4px);
  background-color: #ffffffe1;
}

.navbar.navbar-light.fixed .btn-outline-primary {
  border-color: var(--primary) !important;
  background-color: transparent !important;
  color: var(--primary) !important;
}

.navbar-nav .nav-item a.nav-link {
  font-weight: medium;
  color: var(--primary);
}


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

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

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

.btn-accent {
  background-color: var(--accent) !important;
  color: white;
}

.btn-accent:hover {
  color: white;
}

.list-kriteria>.card {
  border-radius: 16px;
  background-color: #f4faff;
  border: 2px solid;
  border-color: var(--primary);
}

.list-kriteria>.card .card-body {
  padding: 24px;
}

.list-kriteria .card .title {
  font-size: 20px;
  color: var(--accent);
}

.list-kriteria .card p {
  font-size: 16px;
  color: var(--grey);
  opacity: 0.75;
}

.milestone {
  border-radius: 16px;
  background-color: var(--primary) !important;
  overflow: hidden;
}

.milestone .icon.btn {
  font-size: 16px !important;
}

.milestone .icon.btn-circle {
  border-radius: 100px !important;
}

.widget ul li a {
  color: var(--grey) !important;
  opacity: .7;
  font-size: 14px;
}

.widget ul li a:hover {
  color: var(--primary) !important;
  opacity: 1;
}

.progress-wrap:after {
  color: var(--accent);
}

.progress-wrap svg.progress-circle path {
  stroke: var(--accent);
}

.slider-scroll-down {
  width: 64px !important;
  height: 64px !important;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  z-index: 10;
  bottom: -32px;
}

.slider-scroll-down .btn {
  min-width: unset !important;
  width: 100% !important;
  aspect-ratio: 1;
  border: 3px solid white !important;
}

section.jadwal {
  background-color: #f4faff;
}

.accordion .accordion-item:not(:last-child) {
  margin-bottom: 8px;
}

.form-control {
  font-weight: 100 !important;
}

.table-custom thead tr th {
  color: var(--primary);
  background-color: #f4faff !important;
}

.table-custom thead tr th:hover {
  outline: none !important;
}

table tbody tr td {
  font-weight: 400;
}

table tr th:not(:first-child) {
  min-width: 220px;
}

table tr :where(th, td) {
  vertical-align: middle;
  padding: 12px 24px !important;
}

.dt-paging-button:not(.disabled).active>.page-link,
.page-link.active {
  color: var(--primary);
}

.nav-tabs.tabs-custom .nav-item .nav-link:not(.active) {
  box-shadow: none !important;
  border: none !important;
}

.swiper-galeri .swiper-controls .swiper-pagination {
  bottom: 0 !important;
  width: fit-content;
  padding: 0 8px;
  border-radius: 8px 8px 0 0;
  background-color: white;
  left: 50%;
  transform: translateX(-50%);
}

.swiper-galeri .swiper-controls .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1 !important;
  border-color: var(--accent) !important;
}

.pagination.pagination-galeri .page-item.active .page-link,
.pagination.pagination-galeri .page-item .page-link:hover {
  color: var(--primary) !important;
}

#tab-video .plyr .plyr__control--overlaid {
  padding: 14px !important;
}

#tab-video .plyr .plyr__control--overlaid .plyr__control svg {
  width: 10px !important;
  height: 10px !important;
}

.top40 figure .detail {
  position: absolute;
  bottom: -20px;
}

.form-label-group>input:not(:placeholder-shown)~label,
.form-label-group textarea:not(:placeholder-shown)~label {
  top: -26px;
}

.card {
  box-shadow:
    2.8px 2.8px 2.2px rgba(0, 0, 0, 0.006),
    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.008),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.01),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.012),
    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.014),
    100px 100px 80px rgba(0, 0, 0, 0.02) !important;
}

.form-control:focus~.form-control-position i {
  color: var(--primary);
}

.logo>img {
  height: 56px;
  object-fit: contain;
}

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

@media (max-width: 576px) {
  .logo>img {
    width: 100%;
    object-fit: contain;
  }
}