:root {
  --bc-1: #27166f;
  --bc-2: #00923f;
  --bc-3: #da251d;
  --bc-4: #E9F5DB;
  --bc-5: #00923f7d;
  --bc-6: #2f794fc9;
  --bc-7: #718355;
  --bc-8: #ababab29;
  --bg-kemkes-tqs: #07b8a5;
  --bg-kemkes-hk: #d8df20;
  --bg-kemkes-tqsmd: #15bccc;
  --bg-kemkes-grey: #696a69;
  --bg-kemkes-tqsbold: #047d78;
  --bg-kemkes-tqsmuda: #07b8a514;
  --hover-green: #035f2b;
  --bs-dropdown-bg: #fff;
  --gradient-orange: linear-gradient(90deg, rgba(241, 94, 37, 1) 0%, rgba(241, 124, 37, 1) 70%);
  --gradient-blue: linear-gradient(90deg, rgba(24, 127, 193, 1) 0%, rgba(28, 86, 183, 1) 70%);
  --gradient-green: linear-gradient(90deg, rgb(0 146 63 / 71%) 0%, rgb(0 146 63) 70%);
  --gradient-white-to-transparent: linear-gradient(0deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 60%);
}

body,
html {
  font-family: 'VAG Rounded', Arial, sans-serif;
  /* font-family: Poppins, Helvetica, sans-serif; */
  /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
}

/* .font-header {
  font-family: 'VAG Rounded', Arial, sans-serif;
}

.font-body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
} */

.landing-header {
  height: 65px !important;
  border-bottom: 1px solid #07b8a5;
}

/*	text color*/
.text-bc-1 {
  color: var(--bc-1) !important;
}

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

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

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

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

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

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

.text-hover-bc-1:hover {
  color: var(--bc-1) !important;
}

.text-hover-bc-2:hover {
  color: var(--bc-2) !important;
}

.text-hover-bc-3:hover {
  color: var(--bc-3) !important;
}

.text-hover-bc-4:hover {
  color: var(--bc-4) !important;
}

.text-hover-bc-5:hover {
  color: var(--bc-5) !important;
}

.text-hover-bc-6:hover {
  color: var(--bc-6) !important;
}

.text-hover-bc-7:hover {
  color: var(--bc-7) !important;
}

/*	text color*/

/*	background color*/
.bg-bc-1 {
  background-color: var(--bc-1) !important;
}

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

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

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

.bg-bc-5 {
  background-color: var(--bc-5) !important;
}

.bg-bc-6 {
  background-color: var(--bc-6) !important;
}

.bg-bc-7 {
  background-color: var(--bc-7) !important;
}

.bg-kemkes-tqs-muda {
  background-color: var(--bg-kemkes-tqsmuda) !important;
}

.bg-bc-hover-2:hover {
  background-color: var(--hover-green);
  color: #fff;
}

.bg-bc-hover-4:hover {
  background-color: var(--bc-7);
  color: var(--bc-4);
}

.radius-top {
  border-radius: 10px 10px 0 0 !important;
}

.radius-bottom {
  border-radius: 0 0 10px 10px !important;
}

/*	background color*/

/*	landing page */
.btn-gradient-blue-green {
  background: var(--gradient-green);
  color: #fff;
}

.btn-gradient-blue-green:hover {
  transition: color .5s ease, background-color .5s ease;
  background: linear-gradient(90deg, rgb(0 146 63) 0%, rgb(101 179 121) 70%);
  color: #fff;
}

.btn-pdt-active:hover {
  color: var(--bc-7);
  border-color: #F1FAFF;
  background-color: var(--bc-6) !important;
}

.btn-check:active+.btn.btn-outline.btn-outline-dashed.btn-outline-default,
.btn-check:checked+.btn.btn-outline.btn-outline-dashed.btn-outline-default,
.btn.btn-outline.btn-outline-dashed.btn-outline-default.active,
.btn.btn-outline.btn-outline-dashed.btn-outline-default.show,
.btn.btn-outline.btn-outline-dashed.btn-outline-default:active:not(.btn-active),
.btn.btn-outline.btn-outline-dashed.btn-outline-default:focus:not(.btn-active),
.btn.btn-outline.btn-outline-dashed.btn-outline-default:hover:not(.btn-active),
.show>.btn.btn-outline.btn-outline-dashed.btn-outline-default {
  color: #00923f38;
  border-color: #00923f38;
  background-color: #00923f0f !important;
}

.select2-container--bootstrap5 .select2-dropdown {
  border: 0;
  box-shadow: #d9d6d6 !important;
  border-radius: 0.75rem;
  padding: 1rem 0;
  background-color: var(--bs-dropdown-bg);
}

.select2-results__option.select2-results__option--selectable.select2-results__option--highlighted {
  transition: color .2s ease, background-color .2s ease;
  background-color: #f1faff !important;
  color: #009ef7 !important;
}

.landing-custom-bg {
  background-color: var(--bc-4) !important;
}

.landing-custom-grey {
  background-color: var(--bc-8) !important;
}

.landing-header .menu .menu-link.active {
  color: var(--bc-7);
}


.shadow-light-green {
  box-shadow: 0 4px 10px 1px #098d441f;
}

.btn.bg-bc-7 {
  background-color: var(--bc-4) !important;
  color: var(--bc-7);
  border: 1px solid #718355;
}

.btn.bg-bc-7 .iconmod-twitter {
  color: var(--bc-7);
}

.btn.bg-bc-7 .iconmod-twitter:hover {
  color: var(--bc-4);
}

.btn.bg-bc-7:hover {
  background-color: var(--bc-7) !important;
  color: var(--bc-4) !important;
}

a.btn:hover .iconmod-twitter {
  color: var(--bc-4) !important;
}

.btn.bg-bc-4 {
  background-color: var(--bc-7) !important;
  color: var(--bc-4);
  border: 1px solid #718355;
}

.btn.bg-bc-4:hover {
  background-color: var(--bc-4) !important;
  color: var(--bc-7);
}

.video-container {
  width: 100%;
  height: 500px;
}

.fw-100 {
  font-weight: 100 !important;
}

.fw-200 {
  font-weight: 200 !important;
}

.fw-400 {
  font-weight: 400 !important;
}

.fw-700 {
  font-weight: 700 !important;
}

.fw-semibold {
  font-weight: 200 !important;
}

.tns.tns-default .tns-outer {
  margin: 0 1rem !important;
}

@media (min-width: 992px) {
  .kriteria-icon {
    height: 150px !important;
    width: 200px !important;
  }

  .footer-margin {
    margin-left: 2.5rem !important;
  }
}

@media (max-width: 800px) {
  .kriteria-icon {
    height: 90px !important;
    width: 200px !important;
  }

  .kriteria-icon i {
    font-size: 40px !important;
  }
}

.testimoni-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.mt-30 {
  margin-top: 7rem !important;
}

.border.border-green {
  border-color: var(--bc-7) !important;
  background: var(--bc-4) !important;
}

@media (min-width: 1200px) {
  .mt-xl-30 {
    margin-top: 7rem !important;
  }
}

.text-justify {
  text-align: justify;
}

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

/*	landing page */

/* dokumen kebijakan */
.doc-active {
  color: var(--bc-7) !important;
  font-weight: bold;
}

/* dokumen kebijakan */

/* profil tertinggal */
.text-custom-bumdes {
  color: #364a63;
}

.galeri-title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.galeri-description {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.potensi-title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.potensi-description {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
}

.bg-opacity-kabupaten {
  background: rgba(0, 0, 0, 0.4);
}

.kabupaten-rounded {
  border-radius: 10px 10px 0 0;
}

/* .hover-kabupaten:hover {
  color: var(--bc-1)!important;
  font-size: 10px;
} */

/* profil tertinggal */

.scrolltop {
  background-color: var(--bc-3);
  ;
}

/* footer */
.footer-tautan a {
  color: #000000a6;
}

.footer-tautan a:hover {
  color: #00923f;
}

.footer-custom.text-custom-bumndes a {
  color: #364a63;
}

/* footer */

/* RESPONSIVE */
@media (max-width: 800px) {
  .video-container {
    height: 133px;
  }
}

@media (min-width: 1400px) {

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 90%;
  }
}

@media (max-width: 724px) {
  .d-xs-none {
    display: none !important;
  }
}

@media (max-width:576px) {
  .my-maxsm-5 {
    margin-top: 1.25rem !important;
    margin-bottom: 1.25rem !important
  }

  .fs-maxsm-1-3 {
    font-size: 1.3rem !important;
  }

  .fs-maxsm-2 {
    font-size: 2rem !important;
  }

  .fs-maxsm-2-3 {
    font-size: 2.3rem !important;
  }

  .fs-maxsm-3 {
    font-size: 3rem !important
  }

  .mb-maxsm-20 {
    margin-bottom: 5rem !important;
  }

  .mb-maxsm-10 {
    margin-bottom: 3rem !important;
  }

  .min-h-maxsm-150px {
    min-height: 150px !important;
  }

  .pb-maxsm-0 {
    padding-bottom: 0 !important;
  }
}

/* RESPONSIVE */

/* ANIMATION */
.animated-up,
.animated-down {
  opacity: 0;
}

.animated-down.come-in {
  opacity: 1;
  transform: translateY(-70px);
  animation: come-in 1s ease forwards;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.animated-up.come-in {
  opacity: 1;
  transform: translateY(70px);
  animation: come-in 1s ease forwards;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.animated-up.come-in:nth-child(2) {
  transition-delay: .2s;
  animation-delay: .2s;
}

.animated-up.come-in:nth-child(3) {
  transition-delay: .4s;
  animation-delay: .4s;
}

.animated-up.come-in:nth-child(4) {
  transition-delay: .6s;
  animation-delay: .6s;
}

.animated-up.come-in:nth-child(5) {
  transition-delay: .8s;
  animation-delay: .8s;
}

.animated-up.come-in:nth-child(6) {
  transition-delay: 1s;
  animation-delay: 1s;
}

@keyframes come-in {
  to {
    transform: translateY(0);
  }
}

.animated-up.come-in:nth-child(7) {
  transition-delay: 1.2s;
  animation-delay: 1.2s;
}

.animated-up.come-in:nth-child(8) {
  transition-delay: 1.4s;
  animation-delay: 1.4s;
}

.animated-up.come-in:nth-child(9) {
  transition-delay: 1.6s;
  animation-delay: 1.6s;
}

.animated-up.come-in:nth-child(10) {
  transition-delay: 1.8s;
  animation-delay: 1.8s;
}

@keyframes slideRight {
  0% {
    transform: translateX(-100%);
  }

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

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

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

.slide-right {
  animation: slideRight 0.9s ease-in-out forwards;
}

.slide-left {
  animation: slideLeft 0.9s ease-in-out forwards;
}

.pull-up {
  transition: all 0.25s ease;
}

.pull-up:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0px 14px 24px rgba(62, 57, 107, 0.2);
  z-index: 30;
}

/* ANIMATION */

/* datatable */
table.dataTable>thead .sorting:after,
table.dataTable>thead .sorting:before,
table.dataTable>thead .sorting_asc:after,
table.dataTable>thead .sorting_asc:before,
table.dataTable>thead .sorting_desc:after,
table.dataTable>thead .sorting_desc:before {
  position: absolute !important;
  right: 5px;
}

/* custom iconmod */
@font-face {
  font-family: 'iconmod';
  src: url('fonts/iconmod.eot?r6d6sn');
  src: url('fonts/iconmod.eot?r6d6sn#iefix') format('embedded-opentype'),
    url('fonts/iconmod.ttf?r6d6sn') format('truetype'),
    url('fonts/iconmod.woff?r6d6sn') format('woff'),
    url('fonts/iconmod.svg?r6d6sn#iconmod') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

i {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'iconmod';
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconmod-twitter .path1:before {
  content: "\e900";
  opacity: 0.4;
}

.iconmod-twitter .path2:before {
  content: "\e901";
  margin-left: -1em;
}

/* custom iconmod */

/* KEMENKES */

.text-kemkes-tqs {
  color: var(--bg-kemkes-tqs) !important;
}

.text-kemkes-hk {
  color: var(--bg-kemkes-hk) !important;
}

.text-kemkes-tqsmd {
  color: var(--bg-kemkes-tqsmd) !important;
}

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

.text-hover-kemkes-tqs:hover {
  color: var(--bg-kemkes-tqs) !important;
}

.bg-kemkes-tqs {
  background-color: var(--bg-kemkes-tqs) !important;
}

.bg-kemkes-hk {
  background-color: var(--bg-kemkes-hk) !important;
}

.bg-kemkes-tqsmd {
  background-color: var(--bg-kemkes-tqsmd) !important;
}

.bg-kemkes-grey {
  background-color: var(--bg-kemkes-grey) !important;
}

.bg-kemkes-tqsbold {
  background-color: var(--bg-kemkes-tqsbold) !important;
}

.btn-kemkes-tqs {
  color: #fff;
  background-color: var(--bg-kemkes-tqs) !important;
  border-color: var(--bg-kemkes-tqsbold) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075) !important;
}

.btn-kemkes-tqs:hover {
  color: #fff !important;
  background-color: #069586 !important;
}

.btn-kemkes-hk {
  color: #000;
  background-color: var(--bg-kemkes-hk) !important;
  border-color: var(--bg-kemkes-tqsbold) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075) !important;
}

.btn-kemkes-hk:hover {
  color: #fff !important;
  background-color: #aeb40d !important;
}

.btn-kemkes-tqsmd {
  color: #000;
  background-color: var(--bg-kemkes-tqsmd) !important;
  border-color: var(--bg-kemkes-tqs) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075) !important;
}

.btn-kemkes-hk:hover {
  color: #fff !important;
  background-color: #aeb40d !important;
}

.btn-kemkes-green {
  color: #2f2f2f;
  background-color: #19e5cb !important;
  border-color: var(--bg-kemkes-tqsbold) !important;
  box-shadow: inset 3 1px 0 rgb(235 194 194 / 15%), 6 1px 1px rgba(0, 0, 0, .075) !important;
}

.btn-outline-kemkes {
  color: #07b8a5 !important;
  border-color: #07b8a5 !important;
}

.btn-outline-kemkes:hover {
  background-color: #e9f8f7 !important;
  border-color: #e9f8f7 !important;
}


.landing-dark-color {
  color: var(--bg-kemkes-tqsbold) !important;
}

.landing-curve svg {
  position: relative;
  top: 1px !important;
  display: block;
}

.border-kemkes-tqs {
  border-color: var(--bg-kemkes-tqs) !important;
}

.menu-state-title-primary .menu-item .menu-link.active {
  transition: color .2s ease, background-color .2s ease;
  color: var(--bg-kemkes-tqs);
}

[data-kt-sticky-landing-header=on] .landing-header .menu .menu-link.active {
  color: #fff;
  background-color: var(--bg-kemkes-tqs);
}

[data-kt-sticky-landing-header=on] .landing-header .menu .menu-link.active:hover {
  color: #fff !important;
  background-color: var(--bg-kemkes-tqsbold);
}

.carousel-caption.kemkes-capt {
  position: absolute;
  top: 30%;
  left: 10%;
  text-align: left;
  /* background: rgba(0, 0, 0, 0.5); */
  padding: 10px;
  color: #fff;
}

.teknologi-medis i {
  transition: font-size 0.5s ease-in-out;
}

.teknologi-medis .min-w-70px {
  transition: font-size 0.5s ease-in-out;
}

.teknologi-medis:hover i {
  font-size: 5rem !important;
  transition: font-size 0.5s ease-in-out;
}

.teknologi-medis:hover .min-w-70px {
  font-size: larger !important;
  transition: font-size 0.5s ease-in-out;
}

.clamp-1-lines {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clamp-2-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clamp-6-lines {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clamp-7-lines {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bg-light-kemkes-tqs {
  background-color: #07b8a50d !important;
}

.border-kemkes-tqs {
  border-color: var(--bg-kemkes-tqs) !important;
}

/* .kemkes-capt {
  position: relative;
  width: 50%;
  color: white;
  border-radius: 15px;
  padding: 20px;
  overflow: hidden;
} */

/* .kemkes-capt::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  filter: blur(0px);
  border-radius: 15px;
  z-index: 1;
  backdrop-filter: blur(1px);
} */
/* 
.carousel-caption .fs-4x,
.carousel-caption .fs-4 {
  text-shadow: none;
}

.carousel-caption .fs-4x,
.carousel-caption .fs-4 {
  color: white;
}

.carousel-caption>div,
.carousel-caption>span,
.carousel-caption>a {
  position: relative;
  z-index: 2;
  color: white;
} */

@media (max-width: 1900px) {
  .mb-smsm-10 {
    margin-bottom: 2.5rem !important;
  }
}

@media (max-width: 576px) {
  .d-smsm-none {
    display: none !important;
  }
}

@media (min-width: 576px) {
  .d-xl-none {
    display: none !important;
  }
}

@media (max-width: 414px) {
  .btn-usulan-topik .me-4 {
    margin-right: 0 !important;
  }
}

@media (max-width: 402px) {
  .btn-usulan-topik .me-4 {
    margin-bottom: 5px !important;
  }

  .btn-usulan-topik .fs-6 {
    font-size: 10px !important;
  }

  .mb-smsm-5 {
    margin-bottom: .75rem !important;
  }
}

.d-flex.btn-usulan-topik {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 500px) {
  .d-flex.btn-usulan-topik {
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }

  .d-flex.btn-usulan-topik .btn {
    width: 100%;
    margin-bottom: 10px;
  }
}

.box-under-navbar {
  border-top: 1px solid var(--bg-kemkes-tqs);
}

.pengumuman-kemkes {
  position: relative;
  padding: 45px 30px;
  height: 100%;
  width: 100%;
  box-shadow: 0px 0px 20px -8px rgba(0, 0, 0, 0.36);
  -webkit-box-shadow: 0px 0px 20px -8px rgba(0, 0, 0, 0.36);
  -moz-box-shadow: 0px 0px 20px -8px rgba(0, 0, 0, 0.36);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.5s ease-in-out;
}

.pengumuman-kemkes:hover,
.elearning-kemkes:hover {
  border: 1.5px solid var(--bg-kemkes-tqs) !important;
  transform: translateY(-10px);
  transition: transform 0.5s ease-in-out;
}

.menu.menu-sub.menu-sub-dropdown {
  border: 1px solid #cedc26;
  margin-top: 10px !important;
}

.hover-elevate-up {
  transition: transform .3s ease
}

.hover-elevate-up:hover {
  transform: translateY(-2.5%);
  transition: transform .3s ease;
  will-change: transform
}

.video-wrapper {
  max-width: 100%;
  background-color: var(--bg-kemkes-tqs);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

iframe {
  border-radius: 10px;
  height: 250px;
}

@media (max-width: 500px) {
  iframe {
    border-radius: 10px;
    height: 150px;
  }
}