:root {
	--app-title-hex: #2c4964;
	--light-hex: #07c5a9;
	--info-hex: #07b3a7;
	/* --border-app: 2px solid #F3F3F3; */
	--border-app: 1px solid #123d65;
	--sm-border-app: 3px solid #f3f3f3;
	--jss-color-light: 3px solid var(--light-hex);
	--border-radius: 20px;
	--border-radius-md: 12.5px;
	--border-radius-sm: 10px;
	/* --app-box-shadow: 0px 2px 2px rgb(0 0 0 / 25%); */
	--app-box-shadow: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
	--bg-liner-gradient: linear-gradient(
		0deg,
		rgb(240, 245, 255, 0.9) 0%,
		rgba(240, 245, 255, 0.8) 20%,
		rgba(240, 245, 255, 0) 100%
	);
	--scrollbarBG: #cfd8dc;
	--thumbBG: #90a4ae;
	--inner-shadow: linear-gradient(
		0deg,
		rgba(12, 17, 26, 0.7) 0%,
		rgba(20, 29, 43, 0.6) 10%,
		rgba(189, 195, 196, 0.2) 100%
	);

	--jss-hover-hex: #4aaf9c; /* old #F1416C */
	--jss-color-rgba-opacity: rgba(8, 167, 139, 0.75);
	--jss-color-light-rgba: rgba(95, 201, 181, 1);
	--jss-color-rgba: rgba(8, 167, 139, 1);
	--jss-color: #08a78b;
	--jss-color-light: #5fc9b5;
	--jss-color-bg-text: #c9f4eb;
	--jss-color-bg-text-light: #c9f4eb;
	--jss-linear-gradient: linear-gradient(
		44deg,
		rgb(25 133 114 / 97%) 20%,
		rgba(95, 201, 181, 0.92) 95%,
		rgba(95, 201, 181, 0.9) 30%
	) !important;
}

/*--------------------------------------------------------------
  # General
  --------------------------------------------------------------*/

a {
	color: var(--jss-color);
	text-decoration: none;
}

a:hover {
	color: var(--jss-hover-hex);
	text-decoration: none;
}

/* login */

.login-menu > li > a .active {
	border-bottom: 2px solid green;
}

.pd-sm {
	padding: 0px 2px;
}

/* Works on Chrome, Edge, and Safari */
body::-webkit-scrollbar {
	width: 11px;
}

/* Works on Firefox */
*,
body {
	scrollbar-width: thin;
	scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

body::-webkit-scrollbar-track {
	background: var(--scrollbarBG);
}

body::-webkit-scrollbar-thumb {
	background-color: var(--thumbBG);
	border-radius: 6px;
	border: 3px solid var(--scrollbarBG);
}

/* global background */
.bg-done {
	/* background-color: #31B057; */
	background: rgb(0, 175, 175) !important;
	background: linear-gradient(
		94deg,
		rgba(0, 175, 175, 1) 0%,
		rgba(4, 200, 200, 1) 100%
	) !important;
}

.bg-onprogress {
	/* background-color: #ffa331; */
	background: rgb(246, 155, 17) !important;
	background: linear-gradient(
		90deg,
		rgba(246, 155, 17, 1) 0%,
		rgba(255, 166, 33, 1) 100%
	) !important;
}
.bg-danger {
	background: rgb(238, 45, 65) !important;
	background: linear-gradient(
		90deg,
		rgba(238, 45, 65, 1) 0%,
		rgba(246, 78, 96, 1) 100%
	) !important;
}

.btn-buataduan {
	background: rgb(246, 155, 17);
	background: linear-gradient(
		94deg,
		rgba(246, 155, 17, 1) 0%,
		rgba(217, 33, 78, 1) 100%
	);
}
.bg-profil {
	/* background-color: rgba(255, 199, 0, .35) !important; */
	background-color: rgba(255, 255, 255, 0.35) !important;
	color: #ffffff !important;
}
.bg-profil:hover {
	background-color: rgba(255, 255, 255, 0.5) !important;
}
.bg-jss {
	background-color: var(--jss-color) !important;
}
.bg-jss-linear-gradient {
	background-image: var(--jss-linear-gradient);
}
.bg-light-jss {
	background-color: var(--jss-color-light) !important;
}
.bg-jss-info {
	background-color: var(--info-hex);
}

.bg-confetti {
	background-image: url(../img/bg/abstrack.svg);
}

.bg-category {
	background-position: right top;
	background-size: 30% auto;
	background-image: url("../metronic8/media/svg/shapes/abstract-2.svg");
	background-repeat: no-repeat;
}
.bg-rating {
	background-color: #eaeff2;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
	color: #fff;
	background-color: var(--jss-color);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link:hover {
	color: #fff !important;
}

.blur-2px {
	backdrop-filter: blur(2px);
}
.blur-3px {
	backdrop-filter: blur(3px);
}

/* global color */
.form-rounded {
	border-radius: 1rem;
}

.jss-cblue {
	color: #1a516f;
}
.jss-cadd {
	color: #fe794e;
}

.el-hide {
	display: none;
}

.img-content-fit {
	width: 100%;
	max-height: 100%;
	object-fit: cover;
}

/* padding */
.p-50 {
	padding: 50px 0;
}

.p-60 {
	padding: 60px 0;
}

.p-70 {
	padding: 70px 0;
}

.p-80 {
	padding: 80px 0;
}

.wh-100 {
	width: 100px;
	height: 100px;
}

/* border radius */
.rounded-10 {
	border-radius: 10px !important;
}
.rounded-15 {
	border-radius: 15px !important;
}
.rounded-20 {
	border-radius: 20px !important;
}

.rounded-30 {
	border-radius: 30px !important;
}

.rounded-40 {
	border-radius: 40px !important;
}

.rounded-50 {
	border-radius: 50px !important;
}

.jss-rounded {
	border-radius: 20px;
}

.jss-header-rounded {
	border-radius: 0 0 20% 20%;
}

.rounded-start-whatsapp {
	border-top-left-radius: 50px !important;
	border-bottom-left-radius: 50px !important;
	border-top-right-radius: 0px !important;
	border-bottom-right-radius: 0px !important;
	color: #5e6278;
}
.rounded-start-whatsapp.active {
	color: white !important;
}

.rounded-end-whatsapp {
	border-top-left-radius: 0px !important;
	border-bottom-left-radius: 0px !important;
	border-top-right-radius: 50px !important;
	border-bottom-right-radius: 50px !important;
	color: #5e6278;
}
.rounded-end-whatsapp.active {
	color: white !important;
}

.jss-img-position {
	padding: 7px;
	position: relative;
}

.border-jss {
	border-color: var(--jss-color) !important;
}
.border-light-jss {
	border-color: black !important;
}
.badge-jss {
	color: #fff;
	background-color: var(--jss-color);
}
.badge-light-jss {
	color: #fff;
	background-color: var(--jss-color-light);
}

.jss-width {
	width: 90% !important;
}

.jss-ribbon {
	position: absolute;
	padding: 8px 20px;
	/* border-radius: 20px 0px; */
	transition: bottom ease-in-out 0.4s;
	z-index: 1;
}

.jss-ribbon span {
	color: #fff;
	font-size: 14px;
}

.disc-ribbon {
	position: absolute;
	top: -4px;
	padding: 8px 5px;
	/* border-radius: 20px 0px; */
	transition: bottom ease-in-out 0.4s;
}

.disc-ribbon::after {
	content: "";
	width: 0;
	height: 0;
	left: 0;
	bottom: -4px;
	position: absolute;
	border-color: transparent rgba(255, 212, 36, 0.9);
	border-style: solid;
	border-width: 0 20px 4px;
}

.swal2-popup {
	border-radius: 20px !important;
}
.swal2-container.swal2-backdrop-show {
	background: rgba(0, 0, 0, 0.65) !important;
	backdrop-filter: blur(7px);
}

.theme-bg {
	background-color: rgba(49, 176, 87, 0.4);
}

.grayscale {
	filter: grayscale(1);
}

.grayscale:hover {
	filter: none;
}

.border-3px {
	border: 3px solid white;
}

.border-4px {
	border: 4px solid white;
}

.border-5px {
	border: 5px solid white;
}

.w-30 {
	width: 30% !important;
}

.w-min-100px {
	min-width: 100px;
}

.w-min-200px {
	min-width: 200px;
}

.w-min-250px {
	min-width: 250px;
}

.w-min-300px {
	min-width: 300px;
}

.right-0 {
	right: 0 !important;
}

.right-10px {
	right: 10px !important;
}

@media (max-width: 575px) {
	.jss-width {
		width: 100% !important;
	}
}

@media (max-width: 1200px) {
	.jss-width {
		width: 100% !important;
	}
}

.img-hover:hover img {
	transform: scale(1.1);
}

/*--------------------------------------------------------------
  # Hold On Overlay
  --------------------------------------------------------------*/
#holdon-content {
	width: 80px;
	margin: -60px 0 0 -40px !important;
}

/*--------------------------------------------------------------
  # Modal
  --------------------------------------------------------------*/
.modal-title {
	font-size: 18px;
	font-weight: 500;
	line-height: 1em;
}

.modal-content {
	border-radius: var(--border-radius);
}

.modal .modal-header {
	align-items: center;
}

.modal .modal-header .modal-title {
	font-weight: 500;
	font-size: 1.3rem;
	color: #181c32;
}

.modal .modal-header .modal-title small {
	font-weight: 400;
	font-size: 0.9rem;
	color: #b5b5c3;
}

.modal-header {
	/* transition: 0.2s; */
	/* background-image: url(../img/bg/abstrack.svg); */
	background-repeat: repeat;
	border-radius: 15px 15px 0px 0px !important;
}

.modal-footer {
	border-radius: 0px 0px 15px 15px !important;
	/* background-image: url(../img/bg/abstrack.svg); */
	background-repeat: repeat;
}

/*--------------------------------------------------------------
  # Back to top button
  --------------------------------------------------------------*/
.back-to-top {
	position: fixed;
	display: none;
	right: 15px;
	bottom: 15px;
	z-index: 99999;
}

.back-to-top i {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	width: 40px;
	height: 40px;
	border-radius: 4px;
	background: var(--light-hex);
	color: #fff;
	transition: all 0.4s;
}

.back-to-top i:hover {
	background: var(--jss-color);
	color: #fff;
}

/*--------------------------------------------------------------
  # Preloader
  --------------------------------------------------------------*/
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	overflow: hidden;
	background: #fff;
}

#preloader:before {
	content: "";
	position: fixed;
	top: calc(50% - 30px);
	left: calc(50% - 30px);
	border: 6px solid var(--jss-color);
	border-top-color: #e7e4fe;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	-webkit-animation: animate-preloader 1s linear infinite;
	animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes animate-preloader {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/*--------------------------------------------------------------
  # Header
  --------------------------------------------------------------*/
/* #header {
    transition: all 0.5s;
    z-index: 997;
    padding: 20px 0;
  } */

#header.header-scrolled,
#header.header-inner-pages {
	background: rgba(49, 176, 87, 0.7);
	padding: 12px 0;
	backdrop-filter: blur(5px);
}

#header .logo {
	font-size: 32px;
	margin: 0;
	padding: 0;
	line-height: 1;
	font-weight: 400;
	letter-spacing: 2px;
	text-transform: uppercase;
}

#header .logo a {
	color: #fff;
}

#header .logo img {
	max-height: 40px;
}

@media (max-width: 992px) {
	#header {
		padding: 12px 0;
	}

	#header .logo {
		font-size: 28px;
	}
}

/*--------------------------------------------------------------
  # Navigation Menu
  --------------------------------------------------------------*/
/* Desktop Navigation */
.nav-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-menu > ul {
	display: flex;
}

.nav-menu > ul > li {
	position: relative;
	white-space: nowrap;
	padding: 10px 0 10px 24px;
}

.nav-menu a {
	display: block;
	position: relative;
	color: rgba(255, 255, 255, 1);
	transition: 0.3s;
	font-size: 15px;
	font-weight: 600;
	padding: 0 3px;
	font-family: "Poppins", sans-serif;
}

.nav-menu > ul > li > a:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	bottom: -5px;
	left: 0;
	background-color: #fff;
	visibility: hidden;
	width: 0px;
	transition: all 0.3s ease-in-out 0s;
}

.nav-menu a:hover:before,
.nav-menu li:hover > a:before,
.nav-menu .active > a:before {
	visibility: visible;
	width: 100%;
}

.nav-menu a:hover,
.nav-menu .active > a,
.nav-menu li:hover > a {
	color: #fff;
}

.nav-menu .drop-down ul {
	display: block;
	position: absolute;
	left: 22px;
	top: calc(100% + 30px);
	z-index: 99;
	opacity: 0;
	visibility: hidden;
	padding: 10px 0;
	background: #fff;
	box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
	transition: 0.3s;
}

.nav-menu .drop-down:hover > ul {
	opacity: 1;
	top: 100%;
	visibility: visible;
}

.nav-menu .drop-down li {
	min-width: 180px;
	position: relative;
}

.nav-menu .drop-down ul a {
	/*padding: 10px 20px;*/
	font-size: 14px;
	text-transform: none;
	color: var(--app-title-hex);
}

.nav-menu .drop-down a:before {
	background-color: transparent !important;
}

.nav-menu .drop-down ul a:hover,
.nav-menu .drop-down ul .active > a,
.nav-menu .drop-down ul li:hover > a {
	color: var(--jss-hover-hex);
}

.nav-menu .drop-down .drop-down ul {
	top: 0;
	left: calc(100% - 30px);
}

.nav-menu .drop-down .drop-down:hover > ul {
	opacity: 1;
	top: 0;
	left: 100%;
}

.nav-menu .drop-down .drop-down > a {
	padding-right: 35px;
}

.nav-menu .drop-down .drop-down > a:after {
	content: "\eaa0";
	font-family: "Font Awesome 5 Pro";
	position: absolute;
	right: 15px;
}

@media (max-width: 1366px) {
	.nav-menu .drop-down .drop-down ul {
		left: -90%;
	}

	.nav-menu .drop-down .drop-down:hover > ul {
		left: -100%;
	}

	.nav-menu .drop-down .drop-down > a:after {
		content: "\ea9d";
	}
}

/*nav dropdown span custom - when any problem edit here*/
.nav-menu > ul > li {
	white-space: normal;
}

.nav-menu .drop-down ul span {
	padding: 10px 20px;
	font-size: 14px;
	text-transform: none;
	color: var(--app-title-hex);
}

.nav-menu span {
	display: block;
	position: relative;
	color: rgba(255, 255, 255, 1);
	transition: 0.3s;
	/* font-size: 15px; */
	padding: 0 3px;
	font-family: "Poppins", sans-serif;
}

.nav-menu .drop-down ul {
	min-width: 290px;
	left: -100% !important;
	border-radius: var(--border-radius);
	padding: 20px;
	right: 0;
}

.nav-menu .drop-down ul .profile {
	padding: 20px;
}

.mobile-nav span {
	display: block;
	position: relative;
	color: var(--app-title-hex);
	/* padding: 10px 20px; */
	font-weight: 500;
	outline: none;
}

.mobile-nav .drop-down .profile {
	padding-right: 20px;
}

/*end nav dropdown span custom - when any problem edit here*/

/* Get Startet Button */
.get-started-btn {
	margin-left: 25px;
	color: #fff;
	border-radius: 5px;
	padding: 6px 25px 8px 25px;
	white-space: nowrap;
	transition: 0.3s;
	font-size: 14px;
	font-weight: 600;
	display: inline-block;
	border: 2px solid rgba(255, 255, 255, 0.5);
}

.get-started-btn:hover {
	border-color: #fff;
	color: #fff;
}

@media (max-width: 992px) {
	.get-started-btn {
		margin: 0 48px 0 0;
		padding: 6px 18px;
	}
}

/* account info Button */
.nav-profile {
	color: #fff;
	border-radius: var(--border-radius);
	/*white-space: nowrap;*/
	transition: 0.3s;
	border: 1px solid rgba(255, 255, 255, 0.5);
	position: relative;
	transition: 0.3s;
	margin-top: -10px;
	font-family: "Poppins", sans-serif;
}

.nav-profile a {
	padding: 3px 10px;
	display: inline-block;
}

.nav-profile:hover {
	border-color: #fff;
	color: #fff;
}

.profile .name {
	font-weight: bold;
	font-size: 16px;
	line-height: 1.3em;
	margin-bottom: 10px;
}

.profile .jabatan {
	color: var(--info-hex);
	font-size: 14px;
}

.profile .dinas {
	text-transform: uppercase;
}

.profile li i {
	font-size: 18px;
	display: inline-block;
	background: var(--info-hex);
	color: #ffffff;
	line-height: 1;
	padding: 8px 0;
	margin-right: 10px;
	border-radius: 50%;
	text-align: center;
	width: 36px;
	height: 36px;
	transition: 0.3s;
}

.profile li i:hover {
	background: var(--info-hex);
	color: #ffffff;
	text-decoration: none;
}

@media (max-width: 992px) {
	.nav-profile {
		margin: 0 48px 0 0;
		padding: 6px 18px;
		padding-left: 20px !important;
	}

	/* .nav-profile a {
      padding: 5px 0px;
    } */
}

/* Mobile Navigation */
.mobile-nav-toggle {
	position: fixed;
	right: 15px;
	top: 15px;
	z-index: 9998;
	border: 0;
	background: none;
	font-size: 24px;
	transition: all 0.4s;
	outline: none !important;
	line-height: 1;
	cursor: pointer;
	text-align: right;
}

.mobile-nav-toggle i {
	color: #fff;
}

.mobile-nav {
	position: fixed;
	top: 55px;
	right: 15px;
	bottom: 15px;
	left: 15px;
	z-index: 9999;
	overflow-y: auto;
	background: #fff;
	transition: ease-in-out 0.2s;
	opacity: 0;
	visibility: hidden;
	border-radius: 10px;
	padding: 10px 0;
}

.mobile-nav * {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mobile-nav a {
	display: block;
	position: relative;
	color: var(--app-title-hex);
	padding: 10px 20px;
	font-weight: 500;
	outline: none;
}

.mobile-nav a:hover,
.mobile-nav .active > a,
.mobile-nav li:hover > a {
	color: var(--light-hex);
	text-decoration: none;
}

.mobile-nav .drop-down > a:after {
	content: "\f107";
	font-family: "Font Awesome 5 Pro";
	padding-left: 10px;
	position: absolute;
	right: 15px;
}

.mobile-nav .active.drop-down > a:after {
	content: "\f106";
}

.mobile-nav .drop-down > a {
	padding-right: 35px;
}

.mobile-nav .drop-down ul {
	display: none;
	overflow: hidden;
}

.mobile-nav .drop-down li {
	padding-left: 20px;
}

.mobile-nav-overly {
	width: 100%;
	height: 100%;
	z-index: 9997;
	top: 0;
	left: 0;
	position: fixed;
	background: rgba(28, 47, 65, 0.6);
	overflow: hidden;
	display: none;
	transition: ease-in-out 0.2s;
}

.mobile-nav-active {
	overflow: hidden;
}

.mobile-nav-active .mobile-nav {
	opacity: 1;
	visibility: visible;
}

.mobile-nav-active .mobile-nav-toggle i {
	color: #fff;
}

/*--------------------------------------------------------------
  # Hero Section
  --------------------------------------------------------------*/
#hero {
	width: 100%;
	height: 52vh !important;
	background: linear-gradient(
			0deg,
			var(--jss-color-rgba) 100%,
			var(--light-rgba) 0%
		),
		url("../img/bg/herocarousel.svg") center center no-repeat;
	background-size: cover;
}

#hero h2 {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 35px;
	/* color: #fff; */
}

#hero h3 {
	/* color: rgba(255, 255, 255, 0.9); */
	/* margin: 15px 0 0 0; */
	/* font-size: 22px; */
	line-height: 1.4;
}

.btn-get-started {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 2em;
	transition: 0.5s;
	color: rgba(255, 255, 255, 0.9);
	border: 1px solid #fff;
}

.btn-get-started:hover {
	background: #fff;
	color: var(--light-hex);
}

#hero .animated {
	animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

#hero .hero-carousel {
	position: relative;
	z-index: 1;
}

#hero .hero-carousel .hero-img {
	height: auto;
}

#hero .hero-carousel .owl-nav,
#hero .hero-carousel .owl-dots {
	margin-right: 6%;
	text-align: right;
}

#hero .hero-carousel .owl-dot {
	display: inline-block;
	margin: 0 10px 0 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #ccc !important;
}

#hero .hero-carousel .owl-dot.active {
	background-color: #fff !important;
}

.hero-rounded {
	border-radius: 25% 25%;
}

/* @media (min-width: 1200px) {
    #hero {
      background-attachment: fixed;
    }
  } */
@media (max-width: 991px) {
	.hero-content {
		text-align: center;
	}

	/* #hero { */
	/* text-align: center; */
	/* min-height: 80vh; */
	/* } */
	/* #hero .container, #hero .container-fluid {
      padding-top: 68px;
    } */
	#hero .animated {
		-webkit-animation: none;
		animation: none;
	}

	#hero .hero-carousel .hero-img {
		text-align: center;
	}

	#hero .hero-carousel .hero-img img {
		width: 50%;
	}
}

@media (max-width: 768px) {
	#hero h2 {
		font-size: 20px;
		line-height: 1;
	}

	#hero h3 {
		font-size: 16px;
		line-height: 1.3em;
	}

	#hero .hero-carousel .hero-img img {
		width: 60%;
	}
}

@media (max-width: 575px) {
	#hero .hero-carousel .hero-img img {
		width: 80%;
	}

	#hero .hero-carousel .owl-nav,
	#hero .hero-carousel .owl-dots {
		margin-right: 0;
		text-align: center;
	}
}

@-webkit-keyframes up-down {
	0% {
		transform: translateY(10px);
	}

	100% {
		transform: translateY(-10px);
	}
}

@keyframes up-down {
	0% {
		transform: translateY(10px);
	}

	100% {
		transform: translateY(-10px);
	}
}

/*--------------------------------------------------------------
  # Sections General
  --------------------------------------------------------------*/
section {
	padding: 30px 0;
	overflow: hidden;
}

.section-title {
	padding-bottom: 20px;
}

.section-title h2 {
	font-size: 28px;
	font-weight: bold;
	position: relative;
	color: #1a516f;
}

.section-title p {
	margin-bottom: 0;
}

.section-title p > span {
	color: #337ab7;
}

@media (max-width: 578px) {
	.section-title {
		text-align: left;
	}

	.section-title h2 {
		font-size: 22px;
	}
}

/*--------------------------------------------------------------
  # Favourite App
  --------------------------------------------------------------*/
.fav-app {
	padding: 0px;
}

.fav-app .faq-list {
	text-align: center;
}

.fav-app .faq-list .shortcut-box {
	max-width: 550px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 25px 25px 0 0;
	backdrop-filter: blur(10px);
	background: rgba(194, 194, 194, 0.7);
	box-shadow: 0px 2px 15px rgb(0 0 0 / 7%);
	/* box-shadow: rgb(218 218 218) 0px -1px 4px 1px; */
}

.fav-app .faq-list .aplikasi .item img {
	width: 65px;
	height: 65px;
	border-radius: 20px;
	/* border: var(--sm-border-app); */
	/* box-shadow: var(--app-box-shadow); */
	/* box-shadow: 2px 4px 15px 1px rgb(10 98 85 / 35%); */
}

.fav-app .faq-list .aplikasi .item img:hover {
	box-shadow: var(--app-box-shadow);
	/* box-shadow: 2px 4px 15px 1px rgb(10 98 85 / 65%); */
	/* background: rgba(255, 255, 255, 0.8); */
	/* border: var(--jss-color-light); */
	/* -webkit-animation-delay: 0.2s; */
	transition: all 0.2s ease;
	/* animation-delay: 3s; */
}

.fav-app .faq-list .aplikasi .item .btn-add {
	align-items: center;
	width: 65px;
	height: 65px;
	font-size: 0px;
	/* padding: 10px; */
	/* color: #d1d1d1; */
	background-color: #ffffff;
	display: inline-block;
	box-shadow: var(--app-box-shadow);
}

.fav-app .faq-list .aplikasi .item .btn-add:hover {
	/* font-size: 0px; */
	/* padding: 10px; */
	/* background: rgba(255, 255, 255, 0.8); */
	/* border: var(--jss-color-light); */
	-webkit-animation-delay: 2s;
	transition: all 0.2s ease;
	animation-delay: 3s;
}

.fav-app .aplikasi .item {
	max-width: 125px;
	padding: 10px 15px;
}

.fav-app .faq-list .aplikasi .item .menus-close {
	margin-top: -15px;
	position: relative;
	left: 30px;
	opacity: 1;
}

.fav-app .faq-list .aplikasi .item .menus-close i {
	font-size: 25px;
	color: red;
	border-radius: 50%;
	background-color: white;
}

.fav-app .faq-list span {
	position: relative;
	outline: none;
	cursor: pointer;
	padding: 2px 20px;
	display: -webkit-inline-box;
	border-radius: 20px 20px 0px 0px;
	backdrop-filter: blur(10px);
	background: rgba(194, 194, 194, 0.7);
	bottom: -8px;
}

.menus .dropdown-toggle::after {
	border-top: 0px;
}

.faq-list .icon-up {
	display: none;
}

.faq-list span.collapsed {
	color: var(--app-title-hex);
}

.faq-list span.collapsed:hover {
	color: var(--light-hex);
}

.faq-list span.collapsed .icon-up {
	display: inline-block;
}

.fav-app .faq-list span.collapsed .icon-down {
	display: none;
}

/*start by modal*/

/*end by modal*/

@media (max-width: 1200px) {
	.fav-app .aplikasi .item {
		width: 22%;
		padding: 5px;
	}

	.fav-app .faq-list .aplikasi .item img {
		border-radius: 10px !important;
		width: 40px;
		height: 40px;
	}

	.fav-app .faq-list .aplikasi .item .btn-add {
		width: 40px;
		height: 40px;
		font-size: 32px;
		padding: 5px;
	}

	.fav-app .faq-list .aplikasi .item .btn-add:hover {
		font-size: 32px;
	}

	.fav-app .faq-list .shortcut-box {
		border-radius: 0px;
	}
}

@media (max-width: 578px) {
	.fav-app .faq-list .aplikasi .item img {
		border-radius: 20px;
	}
}

.shortcut-title {
	line-height: 1;
	font-size: 11px;
	margin-top: 10px;
	height: 22px;
	color: var(--app-title-hex);
}

.card-content:hover img {
	transform: scale(1.1);
}

.card-content img {
	display: block;
}

.content-img {
	height: 350px;
	overflow: hidden;
}

.card-button {
	/* position: absolute; */
	/* left: 0;
    bottom: -5px;
    right: 0;
    height: 48px;
    text-align: center; */
	transition: bottom ease-in-out 0.4s;
}

.card-button a {
	transition: color 0.3s;
	color: rgba(255, 255, 255, 0.7);
	margin: 0 10px;
	display: inline-block;
}

.card-button a:hover {
	color: #fff;
}

.card-button i {
	font-size: 18px;
	margin: 0 2px;
}

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

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

.cr-nav .owl-nav {
	margin-top: 5px;
	text-align: center;
	opacity: 0;
}

.cr-nav:hover .owl-nav {
	opacity: 1;
	transition: ease-in-out 0.3s;
	transition-duration: 0.3s;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

.cr-nav .owl-item {
	display: flex;
	justify-content: center;
	align-items: center;
}

.cr-nav .owl-item img:hover {
	filter: none;
	opacity: 1;
}

.cr-nav .owl-prev,
.cr-nav .owl-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: block !important;
	border: 0px solid black;
}

.cr-nav .owl-prev i {
	left: 10px !important;
}

.cr-nav .owl-next i {
	right: 10px !important;
}

/* .cr-nav .owl-prev i,
.cr-nav .owl-next i {
    transform: scale(2.5, 2.5);
    color: #fff;
} */

.cr-nav .owl-nav {
	display: block !important;
}

@media (max-width: 575px) {
	.card-content .owl-carousel .owl-stage-outer {
		margin: 10px;
	}

	.highlight .img-box,
	.card-content .item .content-img {
		height: 280px;
	}

	.card-content .owl-nav {
		opacity: 1;
	}

	/* .card-content .owl-prev i,
    .card-content .owl-next i {
        transform: scale(2, 2);
    } */
}

/*--------------------------------------------------------------
  # Berita
  --------------------------------------------------------------*/
/* .berita {
    padding: 0px 0;
} */

.berita .date {
	border-radius: 10px;
	padding: 6px 20px;
	margin-bottom: 20px;
	color: #68bbff;
	background-color: #eff7ff;
	width: fit-content;
}

.berita .date-child {
	border-radius: 10px;
	padding: 4px 15px;
	margin-bottom: 20px;
	color: #68bbff;
	background-color: #eff7ff;
	width: fit-content;
}

.berita .date-child span {
	font-size: 14px;
}

.berita .highlight .img-box {
	height: 320px;
	border-radius: 20px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	position: relative;
}

.berita .highlight .img-box:hover img {
	transform: scale(1.1);
	transition: ease-in-out 0.3s;
}

.berita .content h3 {
	font-weight: 500;
	font-size: 20px;
	line-height: 1.1em;
	color: var(--app-title-hex);
	margin-bottom: 15px;
}

/* .berita-carousel .owl-nav {
    opacity: 0;
}

.berita-carousel:hover .owl-nav {
    opacity: 1;
    transition: ease-in-out 0.3s;
    transition-duration: .3s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

.berita .berita-carousel h3 {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.1em;
    color: var(--app-title-hex);
} */

.berita-img {
	height: 350px;
	border-radius: 20px;
	overflow: hidden;
}

/* .berita-carousel .item:hover img {
    transform: scale(1.1);
    transition: ease-in-out 0.3s;
} */

/* .berita-carousel .item .description {
    font-size: 14px;
}

.berita-carousel .owl-prev,
.berita-carousel .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block !important;
    border: 0px solid black;
}

.berita-carousel .owl-prev {
    left: 20px;
}

.berita-carousel .owl-next {
    right: 20px;
} */

/* .berita-carousel .owl-prev i,
.berita-carousel .owl-next i {
    transform: scale(2.5, 2.5);
    color: #FFFFFF;
} */

/* @media (max-width: 575px) {
    .berita .berita-carousel .owl-carousel .owl-stage-outer {
        margin: 10px;
    }

    .berita .highlight .img-box,
    .berita-carousel .item .berita-img {
        height: 280px;
    }

    .berita-carousel .owl-nav {
        opacity: 1;
    }

    .berita-carousel .owl-prev i,
    .berita-carousel .owl-next i {
        transform: scale(2, 2);
    }
} */

/*--------------------------------------------------------------
  # Services
  --------------------------------------------------------------*/
.services .icon-box {
	text-align: center;
	padding: 70px 20px 80px 20px;
	transition: all ease-in-out 0.3s;
	background: #fff;
}

.services .icon-box .icon {
	margin: 0 auto;
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: ease-in-out 0.3s;
	position: relative;
}

.services .icon-box .icon i {
	font-size: 36px;
	transition: 0.5s;
	position: relative;
}

.services .icon-box .icon svg {
	position: absolute;
	top: 0;
	left: 0;
}

.services .icon-box .icon svg path {
	transition: 0.5s;
	fill: #f5f5f5;
}

.services .icon-box h4 {
	font-weight: 600;
	margin: 10px 0 15px 0;
	font-size: 22px;
}

.services .icon-box h4 a {
	color: var(--app-title-hex);
	transition: ease-in-out 0.3s;
}

.services .icon-box p {
	line-height: 24px;
	font-size: 14px;
	margin-bottom: 0;
}

.services .icon-box:hover {
	border-color: #fff;
	box-shadow: 0px 0 25px 0 rgba(0, 0, 0, 0.1);
}

.services .iconbox-blue i {
	color: #47aeff;
}

.services .iconbox-blue:hover .icon i {
	color: #fff;
}

.services .iconbox-blue:hover .icon path {
	fill: #47aeff;
}

.services .iconbox-orange i {
	color: #ffa76e;
}

.services .iconbox-orange:hover .icon i {
	color: #fff;
}

.services .iconbox-orange:hover .icon path {
	fill: #ffa76e;
}

.services .iconbox-pink i {
	color: #e80368;
}

.services .iconbox-pink:hover .icon i {
	color: #fff;
}

.services .iconbox-pink:hover .icon path {
	fill: #e80368;
}

.services .iconbox-yellow i {
	color: #ffbb2c;
}

.services .iconbox-yellow:hover .icon i {
	color: #fff;
}

.services .iconbox-yellow:hover .icon path {
	fill: #ffbb2c;
}

.services .iconbox-red i {
	color: #ff5828;
}

.services .iconbox-red:hover .icon i {
	color: #fff;
}

.services .iconbox-red:hover .icon path {
	fill: #ff5828;
}

.services .iconbox-teal i {
	color: #11dbcf;
}

.services .iconbox-teal:hover .icon i {
	color: #fff;
}

.services .iconbox-teal:hover .icon path {
	fill: #11dbcf;
}

/*--------------------------------------------------------------
  # Smart Service
  --------------------------------------------------------------*/
.smart-service {
	padding-top: 30px;
}
.shadow-jss {
	box-shadow: 0px 5px 15px rgb(0 0 0 / 15%);
}

.shadow-box {
	padding: 35px 20px 20px 20px;
	margin-top: 30px;
	margin-bottom: 20px;
	margin-left: 15px;
	margin-right: 15px;
	text-align: center;
	position: relative;
	border-radius: 25px;
	/* box-shadow: 0px 5px 15px rgb(0 0 0 / 15%); */
}

/* .shadow-box:hover, */
.shadow-jss:hover {
	box-shadow: var(--app-box-shadow);
}

.smart-service .img-box {
	position: absolute;
	top: -36px;
	left: calc(50% - 36px);
	transition: 0.2s;
	border-radius: 50%;
	width: 75px;
	height: 75px;
	opacity: 0.6;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
}

.smart-service .img-box img {
	width: 130px;
	position: relative;
}

.smart-service .header {
	position: absolute;
	top: -35px;
	left: calc(56.5% - 50px);
	transition: 0.2s;
	width: 65px;
	height: 65px;
	opacity: 0.9;
	display: flex;
	overflow: hidden;
	text-align: center;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	border: var(--border-app);
	/* background-color: #FFFFFF; */
	/* box-shadow: 2px 4px 15px 1px rgb(10 98 85 / 35%); */
}

.shadow-box:hover .img-box {
	transition: 0.2s;
	opacity: 1;
}

.shadow-box:hover .title,
.shadow-box:hover .img-box i {
	transition: 100ms;
	color: #76aadb;
}

.smart-service .panel-category .owl-stage {
	margin-top: 40px;
}

.panel-category .owl-prev,
.panel-category .owl-next {
	position: absolute;
	top: 53%;
	transform: translateY(-50%);
	display: block !important;
	border: 0px solid black;
}

.panel-category .owl-prev {
	left: -5px;
}

.panel-category .owl-next {
	right: -5px;
}

.panel-search-app {
	margin-top: 35px;
}

/*end category*/

/*start by category*/
.modal-header .images {
	padding: 25px;
}

.modal-img-center {
	top: -50px;
	left: calc(50% - 60px);
	transition: 0.2s;
	border-radius: 50%;
	border-bottom: none;
	position: absolute;
	background-color: #ffffff;
	border: var(--border-app);
	box-shadow: var(--app-box-shadow);
}

.modal-bubble {
	top: -50px;
	left: calc(50% - 50px);
	transition: 0.2s;
	width: 100px;
	height: 100px;
	border-bottom: none;
	position: absolute;
	background-color: #ffffff;
}

.modal-header .header {
	top: -35px;
	left: calc(50% - 50px);
	transition: 0.2s;
	width: 65px;
	height: 65px;
	overflow: hidden;
	border-bottom: none;
	position: absolute;
}

.modal-header .images i {
	font-size: 2.8em;
	color: #6c6c6c;
}

@media (max-width: 575px) {
	.modal-header .header {
		left: calc(50% - 40px);
	}
}

.modal-app .modal-content {
	overflow: unset;
}

.modal-app .box-category {
	text-align: center;
	position: relative;
	background-color: white;
}

.modal-app .service-title {
	font-size: 18px;
	font-weight: 300;
}

.modal-app .img-level {
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 20px 0px;
	border-radius: 25px;
	opacity: 0.7;
	border: 2px solid #d8dce1;
}

.img-box {
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.modal-app .img-level img {
	width: 70px;
	height: 70px;
	position: relative;
}

.modal-app .img-box img {
	width: 80px;
	height: 80px;
	padding: 10px;
	position: relative;
	/* border: var(--border-app); */
}

.modal-app .title-level {
	color: #6c6c6c;
	font-weight: 400;
	margin-top: 12px;
	font-size: 16px;
}

.app-title,
.modal-app .title {
	font-weight: 600;
	/* margin-top: 12px; */
	font-size: 16px;
}

.panduan {
	font-size: 0.95rem !important;
	/* margin-bottom: 5px; */
}

.modal-app .description {
	font-size: 13px;
	color: #343a40;
	text-align: center;
}

.modal-app .img-level:hover {
	opacity: 1;
}

.modal-app .box-category:hover img {
	padding: 10px;
	border-radius: 15%;
	transition: all 0.2s ease;
	border: var(--jss-color-light);
	transition: all 0.2s ease;
}

.modal-app .box-category.img-box {
	box-shadow: 0px 2px 15px var(--light-hex);
}

.modal-app .box-category:hover .img-box {
	transition: 0.2s;
	filter: none;
	opacity: 1;
}

.modal-app .box-category:hover .img-box i {
	color: var(--light-hex);
}

.modal-app .box-category:hover .title {
	color: var(--light-hex);
}

.modal-app .modal-dialog {
	margin-top: 3.5rem !important;
}

.modal-app .modal-dialog .btn-close {
	font-size: 14px;
	color: #ff8c5d;
}

/*end by category*/

.logo-box {
	/* padding: 60px 20px; */
	/* margin-top: 35px; */
	margin-bottom: 25px;
	text-align: center;
	height: 230px;
	position: relative;
	background: #fff;
	border-radius: var(--border-radius);
}

.img-app {
	position: absolute;
	top: -36px;
	left: calc(50% - 50px);
	transition: 0.2s;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
}

.smart-service-logo {
	width: 100px;
	height: 100px;
	padding: 15px;
	border-radius: var(--border-radius);
}

.smart-service .title {
	font-weight: 500;
	margin-top: 10px;
	font-size: 18px;
	min-height: 40px;
	/* text-transform: uppercase; */
	/*margin-bottom: 10px;*/
}

.modal-app .title,
.smart-service .title,
.app-title,
.title {
	color: var(--app-title-hex);
}

.img-app:hover img {
	border: 2px solid var(--jss-color);
}

.logo-box:hover .img-app i {
	color: var(--light-hex);
}

.logo-box:hover .title a {
	color: var(--jss-color);
}

.smart-service .description {
	/*line-height: 24px;*/
	font-size: 14px;
}

.smart-service .feature-box:hover i {
	background: #4154f1;
	color: #fff;
}

.smart-service .app-list .nav-pills {
	border-bottom: 1px solid #eee;
}

.smart-service .app-list .nav-link {
	background: none;
	font-size: 15px;
	font-weight: 600;
	color: #23262a;
	padding: 12px 0;
	margin-right: 20px;
	margin-bottom: -2px;
	border-radius: 0;
	text-transform: uppercase;
}

.smart-service .app-list .nav-link.active {
	color: var(--light-hex);
	border-bottom: 3px solid var(--jss-color);
}

.smart-service .app-list .tab-content h4 {
	font-size: 18px;
	margin: 0;
	font-weight: 700;
	color: #012970;
}
/* 
.smart-service .app-list .app-tabs .owl-prev,
.smart-service .app-list .app-tabs .owl-next {
    position: absolute;
    top: 50%;
    border: 0px solid black;
    display: block !important;
    transform: translateY(-50%);
}

.smart-service .app-list .app-tabs .owl-prev {
    left: -10px;
}

.smart-service .app-list .app-tabs .owl-next {
    right: -10px;
}

.smart-service .app-list .app-tabs .owl-prev i,
.smart-service .app-list .app-tabs .owl-next i {
    transform: scale(1, 1);
    color: #ccc;
} */
/* 
.smart-service .app-list .app-tabs .owl-stage-outer {
    margin: 0px 10px;
} */

.smart-service .app-list .app-tabs li {
	display: inline-block;
	white-space: nowrap;
	transition: all 0.3s ease-in;
}

.smart-service .app-list .app-tabs li:hover {
	opacity: 0.7;
	cursor: pointer;
}

.smart-service .app-list .app-tabs .tab-content > div {
	display: none;
}

.smart-service .app-list .app-tabs .tab-content > div.active {
	display: block;
}

/*--------------------------------------------------------------
  # Wisata Budaya
  --------------------------------------------------------------*/
.wisata-budaya {
	/* background-image: url(../img/bg/bg-lengkung.png); */
	background-size: auto 100%;
	background-repeat: repeat-x;
	-o-background-size: auto 100%;
	-moz-background-size: auto 100%;
	-webkit-background-size: auto 100%;
}

.wisata-budaya .artikel {
	margin-bottom: 15px;
	position: relative;
	overflow: hidden;
	border-radius: var(--border-radius-md);
	box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.1);
}

.big-thumb {
	height: 300px;
}

.big-thumb img,
.small-thumb img {
	transition: ease-in-out 0.3s;
}

.small-thumb {
	height: 130px;
	background: linear-gradient(
		0deg,
		rgba(12, 17, 26, 0.9) 0%,
		rgba(20, 29, 43, 0.8) 20%,
		rgba(0, 212, 255, 0) 100%
	);
}

.artikel img {
	display: block;
}

.artikel .artikel-info-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	transition: bottom 0.4s;
	padding: 0px 20px;
}

.artikel .artikel-info-content a h4 {
	font-weight: 700;
	margin-bottom: 2px;
	font-size: 16px;
	color: #fff;
}

.wisata-budaya .artikel-info-content a h4 {
	font-weight: 700;
	margin-top: 10px;
	font-size: 16px;
	color: #484848;
}

.artikel .artikel-info-content a h4:hover,
.wisata-budaya .artikel-info-content a h4:hover {
	color: var(--jss-hover-hex);
}

.artikel .artikel-info-content p {
	display: block;
	font-size: 15px;
	color: #fff;
}

.artikel-info-content span i {
	margin-right: 5px;
}

.artikel .artikel-info {
	position: absolute;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	opacity: 1;
	transition: 0.2s;
	transition: 0.4s;
	background: var(--inner-shadow);
}

.wisata-budaya .artikel:hover .artikel-info {
	opacity: 1;
	transition: 0.4s;
	background: var(--inner-shadow);
}

.wisata-budaya .artikel:hover .artikel-info-content {
	bottom: 20px;
	transition: bottom 0.4s;
}

.wisata-budaya .wrapper {
	height: 300px;
	width: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
}

@media (max-width: 575px) {
	.wisata-budaya {
		padding: 20px 0px;
	}

	.wisata-budaya .artikel .big-thumb,
	.wisata-budaya .artikel .small-thumb {
		height: 250px;
	}

	.artikel .artikel-info-content a h4 {
		font-size: 16px;
	}
}

/*--------------------------------------------------------------
  # Promosi
  --------------------------------------------------------------*/
/* .promotion {
    background-color: rgba(246, 251, 255, 5);
} */

.promotion .event {
	min-height: 200px;
	padding: 20px;
	border-radius: 10px;
	border: 1px solid #ddd;
	position: relative;
	box-shadow: 0px 2px 15px rgba(44, 73, 100, 0.08);
}

.promotion .event .pic {
	height: 150px;
	border-radius: 10%;
	border: 1px solid #eee;
	overflow: hidden;
}

.promotion .event .pic img {
	transition: ease-in-out 0.3s;
}

.promotion .event:hover img {
	transform: scale(1.1);
}

.promotion .event h4 {
	font-weight: 500;
	margin-bottom: 5px;
	font-size: 16px;
	color: var(--app-title-hex);
}

.promotion .event h4:hover {
	color: var(--jss-hover-hex);
}

.promotion .event span {
	display: block;
	font-size: 15px;
	padding-bottom: 10px;
	position: relative;
	font-weight: 500;
}

.promotion .event span::after {
	content: "";
	position: absolute;
	display: block;
	width: 50px;
	height: 1px;
	background: #b2c8dd;
	bottom: 0;
	left: 0;
}

.promotion .event p {
	margin: 10px 0 0 0;
	font-size: 14px;
}

.promotion .event-info ul {
	list-style: none;
	padding: 5px 0px 0px 0px;
	margin-bottom: 0;
}

.promotion .event-info ul li {
	font-size: 14px;
}

.promotion .event-info ul i {
	font-size: 20px;
	padding-right: 4px;
	color: #585858;
}

.promotion .read-more {
	margin: 30px 0px;
}

.promotion .event .get-it {
	border-radius: 10px;
	margin-bottom: -20px;
	right: 25px;
	bottom: 0;
	position: absolute;
	z-index: 2;
	background-color: var(--jss-color);
	box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
	padding: 10px 30px;
}

.promotion .event .get-it:hover {
	background-color: var(--jss-hover-hex);
	transition: ease-in-out 0.2s;
}

.promotion .event .get-it a {
	color: #fff;
	font-weight: 500;
	font-size: 16px;
}

.promotion-carousel .owl-prev {
	left: 20px;
}

.promotion-carousel .owl-next {
	right: 20px;
}

@media (max-width: 991px) {
	.promotion .event .pic {
		height: 220px;
	}
}

/*--------------------------------------------------------------
  # Pengaduan
  --------------------------------------------------------------*/
.pengaduan {
	/* background-image: url(../img/bg/bg-dots.svg); */
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

/*--------------------------------------------------------------
  # Pengaduan Entry
  --------------------------------------------------------------*/
.pengaduan .entry {
	overflow: hidden;
	padding: 0px 20px;
	border-radius: var(--border-radius);
}

.entry .entry-img {
	height: 280px;
	margin: -20px -20px 20px -20px;
	overflow: hidden;
	border-radius: var(--border-radius);
}

.entry .entry-img img {
	transition: ease-in-out 0.3s;
}

.entry:hover img {
	transform: scale(1.1);
}

.entry .entry-title {
	font-size: 20px;
	line-height: 26px;
	font-weight: bold;
	padding: 0;
	margin: 0 -20px;
}

.entry .entry-title a {
	color: var(--app-title-hex);
	transition: 0.3s;
}

.entry .entry-title a:hover {
	color: var(--jss-hover-hex);
}

.entry .entry-content {
	margin: 0 -20px;
}

/* .entry .entry-content p {
    line-height: 22px;
    font-size: 15px;
  } */
.entry .entry-content h3 {
	font-size: 22px;
	margin-top: 30px;
	font-weight: bold;
}

.entry-single {
	margin-bottom: 30px;
}

.entry-single .entry-title {
	font-size: 32px;
	line-height: 38px;
}

.pengaduan .add-pengaduan {
	border: 1px solid #fe794e;
	border-radius: 10px;
	padding: 5px 20px;
}

.pengaduan .add-pengaduan:hover {
	background-color: #fe794e;
	color: #ffffff;
	transition: 1s;
}

.pengaduan .add-pengaduan a:hover {
	color: #ffffff;
}

@media (max-width: 575px) {
	.pengaduan {
		padding: 20px 0px;
		width: 100% !important;
	}

	.entry .entry-title {
		font-size: 16px;
	}

	.entry .entry-img {
		height: 220px;
	}
}

/*--------------------------------------------------------------
  # UMKM PRODUK
  --------------------------------------------------------------*/
.umkm-produk {
	/* background: var(--bg-liner-gradient); */
	padding: 0px;
}
/* 
.produk {
    margin-bottom: 20px;
    height: 250px;
    background: #343a40;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-md);
    box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.1);
}

.produk .produk-info {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    transition: 0.2s;
}

.produk .produk-info-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 35px;
    transition: bottom 0.4s;
}

.produk .produk-info-content h4 {
    font-weight: 500;
    margin-bottom: 2px;
    font-size: 14px;
    color: #fff;
}

.produk .produk-info-content p {
    font-weight: normal;
    font-size: 14px;
    color: #fff;
}

.produk .produk-info-content span {
    font-size: 13px;
    color: #fff;
    display: block;
    font-style: italic;
}

.produk .social {
    position: absolute;
    left: 0;
    bottom: -5px;
    right: 0;
    height: 48px;
    text-align: center;
    transition: bottom ease-in-out 0.4s;
}

.produk .social a {
    transition: color 0.3s;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 10px;
    display: inline-block;
} */

.produk .social a:hover {
	color: #fff;
}

.produk .social i {
	font-size: 18px;
	margin: 0 2px;
}

.produk .produk-info {
	opacity: 1;
	transition: 0.4s;
	background: var(--inner-shadow);
}

.produk:hover .produk-info {
	opacity: 1;
	transition: 0.4s;
	background: var(--inner-shadow);
}

.produk:hover .produk-info-content {
	bottom: 70px;
	transition: bottom 0.4s;
}

.produk:hover .social {
	bottom: 10px;
	transition: bottom ease-in-out 0.4s;
}

/*button*/
.produk .social .read-more {
	font-size: 12px;
	letter-spacing: 0.1em;
	display: inline-block;
	padding: 4px 30px;
	border-radius: var(--border-radius);
	transition: 0.5s;
	color: #fff;
	background: #bf392a;
	position: relative;
}

.produk:hover .social .read-more {
	transition: 0.5s;
	background: linear-gradient(180deg, #c55819 0%, #c54a36 100%);
}

.produk .social .read-more i {
	font-size: 22px;
	position: absolute;
	right: 20px;
	top: 12px;
}

/*carousel*/
.umkm-produk .umkm-produk-carousel .owl-nav {
	margin-top: 5px;
	text-align: center;
}

.umkm-produk .owl-item {
	display: flex;
	justify-content: center;
	align-items: center;
}

.umkm-produk .owl-item img:hover {
	filter: none;
	opacity: 1;
}

.umkm-produk .owl-prev,
.umkm-produk .owl-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: block !important;
	border: 0px solid black;
}

.umkm-produk .owl-prev {
	left: -5px;
}

.umkm-produk .owl-next {
	right: -5px;
}

/* .umkm-produk .owl-prev i,
.umkm-produk .owl-next i {
    transform: scale(2.5, 2.5);
} */

.umkm-produk-carousel .owl-nav {
	display: block !important;
}

@media (max-width: 575px) {
	.umkm-produk {
		padding: 20px 0px;
	}
	/* 
    .produk {
        height: 250px;
    } */
}

@media (min-width: 1200px) {
	/* .produk {
        height: 300px;
    } */
}

/*--------------------------------------------------------------
  # JSS TV
  --------------------------------------------------------------*/
.jsstv {
	/* background-image: url(../img/bg/path-waves.svg); */
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	/* padding: 50px 0; */
}

.jsstv .icon-boxes h4 {
	font-size: 18px;
	color: #7f6d68;
	margin-bottom: 15px;
}

.jsstv .icon-boxes h3 {
	font-size: 25px;
	color: #554945;
	margin-bottom: 15px;
}

.jsstv .icon-box {
	margin-top: 40px;
}

.jsstv .icon-box .icon {
	float: left;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border: 2px solid #ffcbba;
	border-radius: 50px;
	transition: 0.5s;
	background: #fff;
}

.jsstv .icon-box .icon i {
	color: #f1416c;
	font-size: 32px;
}

.jsstv .icon-box:hover .icon {
	background: #f1416c;
	border-color: #f1416c;
}

.jsstv .icon-box:hover .icon i {
	color: #fff;
}

.jsstv .icon-box .title {
	margin-left: 85px;
	font-weight: 700;
	margin-bottom: 10px;
	font-size: 18px;
}

.jsstv .icon-box .title a {
	color: #343a40;
	transition: 0.3s;
}

.jsstv .icon-box .title a:hover {
	color: #f1416c;
}

.jsstv .icon-box .description {
	margin-left: 85px;
	line-height: 24px;
	font-size: 14px;
}

.jsstv .yt-video-box {
	background-size: cover;
	min-height: 316px;
	border-radius: var(--border-radius);
	background-color: black;
	position: relative;
	/*height: 400px;*/
	/*height: 60vh;*/
}

.jsstv .yt-video-box iframe {
	border-radius: var(--border-radius);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.big-video-box {
	background-size: cover;
	height: 400px;
}

/* .small-video-box {
    background-size: cover;
    min-height: 300px;
  } */

.play-btn {
	width: 100px;
	height: 100px;
	background: radial-gradient(#f1416c 50%, rgba(217, 33, 78, 0.4) 52%);
	border-radius: 50%;
	display: block;
	position: absolute;
	overflow: hidden;
}

.small-play-btn {
	width: 100px;
	height: 100px;
	background: radial-gradient(#f1416c 50%, rgba(217, 33, 78, 0.4) 52%);
	border-radius: 50%;
	display: block;
	position: absolute;
	left: calc(50% - 47px);
	top: calc(38% - 47px);
	overflow: hidden;
}

.small-play-btn::after,
.play-btn::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-40%) translateY(-50%);
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 15px solid #fff;
	z-index: 100;
	transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.small-play-btn::before,
.play-btn::before {
	content: "";
	position: absolute;
	width: 130px;
	height: 130px;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation: pulsate-btn 2s;
	animation: pulsate-btn 2s;
	-webkit-animation-direction: forwards;
	animation-direction: forwards;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: steps;
	animation-timing-function: steps;
	opacity: 1;
	border-radius: 50%;
	border: 5px solid rgba(217, 33, 78, 0.7);
	top: -15%;
	left: -15%;
	background: rgba(198, 16, 0, 0);
}

.jsstv .small-play-btn:hover::after,
.jsstv .play-btn:hover::after {
	border-left: 15px solid #f1416c;
	transform: scale(20);
}

.jsstv .small-play-btn:hover::before,
.jsstv .play-btn:hover::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-40%) translateY(-50%);
	width: 0;
	height: 0;
	border: none;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 15px solid #fff;
	z-index: 200;
	-webkit-animation: none;
	animation: none;
	border-radius: 0;
}

/* {
    padding: 10px 20px;
    overflow: hidden;
    border-radius: var(--border-radius);
    margin-bottom: -10px;
    margin: -20px -20px 5px -20px;
  } */

.small-video-box {
	height: 160px;
	overflow: hidden;
}

@media (min-width: 1440px) {
	.small-video-box {
		height: 200px;
	}

	.big-video-box {
		height: 460px;
	}
}

@media (max-width: 575px) {
	.big-video-box,
	.small-video-box {
		height: 200px;
	}

	/* .play-btn {
      top: calc(50% - 70px) !important;
    } */
}

.tv-title {
	padding: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1em;
}

.tv-title span,
.tv-title a {
	color: var(--app-title-hex);
	transition: 0.3s;
}

.tv-title:hover,
.tv-title a:hover {
	color: var(--jss-hover-hex);
}

@-webkit-keyframes pulsate-btn {
	0% {
		transform: scale(0.6, 0.6);
		opacity: 1;
	}

	100% {
		transform: scale(1, 1);
		opacity: 0;
	}
}

@keyframes pulsate-btn {
	0% {
		transform: scale(0.6, 0.6);
		opacity: 1;
	}

	100% {
		transform: scale(1, 1);
		opacity: 0;
	}
}

/*--------------------------------------------------------------
  # Features
  --------------------------------------------------------------*/
.features .icon-box h4 {
	font-size: 20px;
	font-weight: 700;
	margin: 5px 0 10px 60px;
}

.features .icon-box i {
	font-size: 48px;
	float: left;
	color: var(--light-hex);
}

.features .icon-box p {
	font-size: 15px;
	color: #848484;
	margin-left: 60px;
}

.features .image {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 400px;
}

/*--------------------------------------------------------------
  # Application Shortcut
  --------------------------------------------------------------*/
.app-popular {
	padding-top: 0px;
}

.app-item img:hover {
	filter: none;
	animation-delay: -4s;
	transition: all 0.2s ease;
	-webkit-transition-delay: all 0.2s ease;
	-moz-transition-delay: all 0.2s ease;
	-o-transition-delay: all 0.2s ease;
	transition-delay: all 0.2s ease;
}

.app-item:hover .box {
	background-color: #ffffff;
	box-shadow: var(--app-box-shadow);
	border-radius: var(--border-radius-md);
	/* border: var(--border-app); */
	/* padding: 10px; */
}
/* 
.app-item:hover .title{
   font-weight: 400;
} */

.app:hover .title {
	color: var(--jss-hover-hex) !important;
}

.app:hover .text-danger {
	color: red !important;
}

.img-middle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.inner-header {
	background-image: url(../img/bg/city.jpg);
	background-size: 100% 400px;
	background-repeat: no-repeat;
	background-position: center top;
}

.inner-header-height {
	padding-top: 3rem !important;
	padding-bottom: 3rem !important;
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	font-size: 14px;
	margin: 0;
}

.breadcrumbs ol li + li {
	padding-left: 10px;
}

.breadcrumbs ol li + li::before {
	display: inline-block;
	padding-right: 10px;
	color: #3c6387;
	content: "/";
}

@media (max-width: 768px) {
	.inner-header {
		background-size: cover;
	}

	.breadcrumbs .d-flex {
		display: block !important;
	}

	.breadcrumbs ol {
		display: block;
	}

	.breadcrumbs ol li {
		display: inline-block;
	}
}

/*--------------------------------------------------------------
  # Footer
  --------------------------------------------------------------*/
#footer {
	color: #fff;
	font-size: 14px;
	background-color: #212529;
	z-index: 100;
	/* background: linear-gradient(
			45deg,
			rgba(34, 38, 41, 0) 0%,
			rgba(34, 38, 41, 0) 0%
		),
		url("../img/bg/footer.jpg") repeat;
	background-size: contain; */
}

#footer .footer-top {
	padding: 40px 0 10px 0;
	position: relative;
}

#footer .footer-top .footer-contact {
	margin-bottom: 30px;
}

#footer .footer-top .footer-contact h3 {
	font-size: 30px;
	margin: 0 0 30px 0;
	padding: 2px 0 2px 0;
	line-height: 1.2;
	font-weight: 700;
	text-transform: uppercase;
}

#footer .footer-top .footer-contact p {
	font-size: 14px;
	line-height: 24px;
	margin-bottom: 0;
}

#footer .footer-top h4 {
	font-size: 16px;
	font-weight: bold;
	position: relative;
	padding-bottom: 5px;
}

#footer .footer-top .footer-links {
	margin-bottom: 10px;
}

#footer .footer-top .footer-links ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#footer .footer-top .footer-links ul i {
	padding-right: 2px;
	color: #fff;
	font-size: 18px;
	line-height: 1;
}

#footer .footer-top .footer-links ul li {
	padding: 10px 0;
	display: flex;
	align-items: center;
}

#footer .footer-top .footer-links ul li:first-child {
	padding-top: 0;
}

#footer .footer-top .footer-links ul a {
	color: rgba(255, 255, 255, 0.8);
	transition: 0.3s;
	display: inline-block;
	line-height: 1;
}

#footer .footer-top .footer-links ul a:hover {
	text-decoration: underline;
	color: #fff;
}

#footer .footer-top .footer-download img {
	width: 80%;
}

#footer .footer-top .footer-logo img {
	width: 80%;
}

@media (max-width: 575px) {
	#footer {
		font-size: unset;
		background-size: unset;
	}

	#footer .footer-top .footer-logo img {
		width: 55%;
	}

	#footer .footer-top .footer-download img {
		width: 100%;
	}
}

#footer .footer-newsletter {
	font-size: 15px;
}

#footer .footer-newsletter h4 {
	font-size: 16px;
	font-weight: bold;
	position: relative;
	padding-bottom: 12px;
}

#footer .footer-newsletter form {
	margin-top: 30px;
	background: #fff;
	padding: 6px 10px;
	position: relative;
	border-radius: 5px;
	text-align: left;
	border: 1px solid white;
}

#footer .footer-newsletter form input[type="email"] {
	border: 0;
	padding: 4px 8px;
	width: calc(100% - 100px);
}

#footer .footer-newsletter form input[type="submit"] {
	position: absolute;
	top: -1px;
	right: -2px;
	bottom: -1px;
	border: 0;
	background: none;
	font-size: 16px;
	padding: 0 20px;
	background: rgba(123, 39, 216, 0.8);
	color: #fff;
	transition: 0.3s;
	border-radius: 0 5px 5px 0;
	box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

#footer .footer-newsletter form input[type="submit"]:hover {
	background: var(--light-hex);
}

#footer .copyright-wrap {
	border-top: 1px solid #ffffff;
}

#footer .credits {
	padding-top: 5px;
	font-size: 13px;
	color: #fff;
}

#footer .credits a {
	color: #fff;
}

#footer .social-links a {
	font-size: 18px;
	display: inline-block;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	line-height: 1;
	padding: 8px 0;
	margin-right: 4px;
	border-radius: 50%;
	text-align: center;
	width: 36px;
	height: 36px;
	transition: 0.3s;
}

#footer .social-links a:hover {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	text-decoration: none;
}

/* SECTION SINGE PAGE */
.inner-page {
	padding: 50px 0 100px 0;
}

.page-title h4 {
	font-size: 24px;
	border-bottom: 1px solid #d2d2d2;
	color: var(--jss-color);
}

/* tabbed */
.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs .nav-item .nav-link:hover:not(.disabled),
.nav-line-tabs .nav-item.show .nav-link {
	border-bottom: 3px solid var(--jss-color-light) !important;
}
.nav-tab .nav-pills {
	border-bottom: 1px solid #eee;
}

.nav-tab .nav-link {
	background: none;
	text-transform: uppercase;
	font-size: 15px;
	font-weight: 600;
	color: #23262a;
	padding: 12px 0;
	margin-right: 20px;
	margin-bottom: -2px;
	border-radius: 0;
}

.nav-tab .nav-link.active {
	color: var(--jss-color);
	border-bottom: 3px solid var(--jss-color);
}

.nav-tab .tab-content h4 {
	font-size: 18px;
	margin: 0;
	font-weight: 700;
	color: #012970;
}

.nav-tab .tabs-menus li {
	display: inline-block;
	white-space: nowrap;
	transition: all 0.3s ease-in;
}

.nav-tab .tabs-menus li:hover {
	opacity: 0.7;
	cursor: pointer;
}

.nav-tab .tabs-menus .tab-content > div {
	display: none;
}

.nav-tab .tabs-menus .tab-content > div.active {
	display: block;
}

/* general */
.bd-clipboard {
	position: relative;
	float: right;
}

.btn-clipboard {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 10;
	display: block;
	color: #818a91;
	cursor: pointer;
	background-color: transparent;
	border: 0;
	border-radius: 0.25rem;
}

.clipboard-menu {
	border: none;
	min-width: 10rem;
	font-size: 14px;
	padding: 0.5rem 0.1rem;
	inset: unset !important;
	box-shadow: var(--app-box-shadow);
	border-radius: 15px 15px 0px 15px;
	transform: translate(-150px, -40px) !important;
}

.img-rounded {
	border-radius: 50%;
}

.img-square {
	border-radius: 20%;
}

.img-scale {
	transform: scale(1.1);
	transition: ease-in-out 0.3s;
}

.border-shadow {
	/* border: var(--border-app); */
	box-shadow: var(--app-box-shadow);
	/* box-shadow: 2px 4px 15px 1px rgb(10 98 85 / 35%); */
}

.border-shadow:hover {
	/* border: var(--jss-color-light); */
	box-shadow: var(--app-box-shadow);
}

.app-width {
	/* width: 100px; */
	/* height: 100px; */
	/* border-radius: var(--border-radius); */
	transition: all 0.1s ease;
}

/* Modal */
.modal-auth .heading {
	font-size: 20px;
	font-weight: 600;
	color: #3d5afe;
}

.modal-auth .line1 {
	color: #000;
	font-size: 12px;
}

.modal-auth .line2 {
	color: #000;
	font-size: 12px;
}

.modal-auth .line3 {
	color: #000;
	font-size: 12px;
}

.modal-auth .cards {
	transition: all 0.2s ease;
	cursor: pointer;
	/* border: 1px solid #e9ecef; */
	box-shadow: 0px 2px 6px 2px #e9ecef;
	border-radius: 20px;
}

.modal-auth .cards:hover {
	border-radius: 20px;
	box-shadow: 0px 6px 6px 2px #e9ecef;
	transform: scale(1.1);
}

.modal-auth .inputs input {
	width: 40px;
	height: 40px;
}

.modal-auth input[type="number"]::-webkit-inner-spin-button,
.modal-auth input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin: 0;
}

.modal-auth .form-control:focus {
	box-shadow: none;
	border: 2px solid red;
}

/* .modal-auth .validate {
    border-radius: var(--border-radius);
    height: 40px;
    background-color: red;
    border: 1px solid red;
    width: 140px
  } */

/* loader */
.placeholder:empty {
	margin: auto;
	width: 99%;
	border-radius: var(--border-radius);
	display: block;
	box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.1);
	height: 100px;
	/* change height to see repeat-y behavior */

	background-image: radial-gradient(
			circle 45px at 50px 50px,
			lightgray 99%,
			transparent 0
		),
		linear-gradient(
			100deg,
			rgba(255, 255, 255, 0),
			rgba(255, 255, 255, 0.5) 50%,
			rgba(255, 255, 255, 0) 80%
		),
		linear-gradient(lightgray 20px, transparent 0),
		linear-gradient(lightgray 20px, transparent 0),
		linear-gradient(lightgray 20px, transparent 0);

	background-repeat: repeat-y;

	background-size: 100px 200px, /* circle */ 30px 200px,
		/* highlight */ 50% 200px, 80% 200px, 30% 200px;

	background-position: 10px 0px, /* circle */ 0 0, /* highlight */ 120px 10px,
		120px 40px, 120px 70px, 120px 120px;

	animation: shine 1.25s infinite;
}

@keyframes shine {
	to {
		background-position: 10px 0px, 100% 0,
			/* move highlight to right */ 120px 10px, 120px 40px, 120px 70px,
			120px 120px;
	}
}

.recent-link {
	position: relative;
}

.hovercard {
	position: absolute;
	opacity: 0;
	z-index: 1;
	left: 50%;
	top: -100px;
	bottom: 0;
	transform: translateX(-50%);
}

.recent-link:hover .hovercard {
	opacity: 1;
	transition: 0.5s;
	transition-delay: 0.1s;
}

.tooltiptext {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	background-color: #ffffff;
	box-shadow: var(--app-box-shadow);
	padding: 18px;
	border-radius: 5px;
	color: #444444;
	line-height: 15px;
	transition: 1s;
	min-width: 120px;
}

/* jstree */
.jstree-default .jstree-node {
	line-height: 34px !important;
}

.jstree-default .jstree-anchor {
	font-size: 15px;
}

.inner-shadow {
	position: absolute;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	opacity: 1;
	transition: 0.4s;
	background: var(--inner-shadow);
}

.inner-bottom-content {
	left: 0;
	right: 0;
	bottom: 20px;
	display: block;
	color: #fff;
	font-size: 15px;
	padding: 0px 20px;
	position: absolute;
	transition: bottom 0.4s;
}

.inner-bottom-content i {
	margin-right: 5px;
}

.inner-bottom-content h4 {
	font-weight: 700;
	margin-bottom: 2px;
	/* font-size: 16px; */
	color: #fff;
}

.inner-bottom-content a h6 {
	font-weight: normal;
	font-weight: 700;
	margin-top: 10px;
	font-size: 16px;
	color: #484848;
}

.inner-bottom-content a h4:hover,
.inner-bottom-content a h6:hover {
	color: var(--jss-hover-hex);
}

.pointer {
	cursor: pointer;
}

.scrolltop {
	background-color: var(--jss-color);
}
.scrolltop:hover {
	background-color: var(--jss-color);
}

/* metronic8 */
.bg-liner-gradient {
	background-color: var(--bg-liner-gradient);
	background-size: cover;
}
.bg-header-jss {
	/* background-image: url(../assets/media/custom/batik.svg),
    linear-gradient(
      44deg,
      rgba(26, 113, 97, 1) 20%,
      rgba(55, 129, 115, 0.9) 100%,
      rgba(95, 201, 181, 0.9) 30%
    ) !important; */
	/* linear-gradient(
            44deg,
            rgb(25 133 114 / 100%) 100%,
            rgba(95, 201, 181, 1) 100%,
            rgba(95, 201, 181, 1) 10%
        ) !important; */
	/* background-size: 225px 225px; */
	/* background-size: 375px; */
	/* background-repeat: repeat; */
}
/* .bg-header-bsc {
  background-image: url(../video/1.mp4);
} */
#hero video {
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 50%;
	min-height: 67vh;
	width: auto;
	z-index: -9999;
	-ms-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%) scale(1.5);
}
.bg-bsc-linear-gradient {
	background-color: rgb(240, 240, 240, 0.2);
}
.landing-jss-bg {
	background-image: var(--jss-linear-gradient);
}
.bg-satuheader {
	background-color: #00b4d8 !important;
}

.landing-header {
	height: 50px;
}

.landing-jss-color {
	color: var(--jss-color);
}

.landing-single-color {
	color: rgba(0, 149, 126, 0.5);
}

.drawer-overlay {
	z-index: 1 !important;
}

[data-kt-sticky-landing-header="on"] .landing-header {
	/* background-image: var(--jss-linear-gradient); */
	background-color: #23272a;
	backdrop-filter: blur(3px);
	height: 50px;
}

.min-w-240px {
	min-width: 240px !important;
}

/* ============================= */
/* THIS IS SKELETON LOADING AREA */
/* ============================= */

.hero-skeleton {
	opacity: 0.8;
	animation: skeleton-loading 1s linear infinite alternate;
	border-radius: 1em;
}

.hero-skeleton-title {
	width: 60%;
	height: 1.8em;
	margin-bottom: 1.2em;
	border-radius: 0.125em;
}

.hero-skeleton-text {
	width: 100%;
	height: 0.9em;
	margin-bottom: 0.7rem;
	border-radius: 0.125rem;
}

.hero-skeleton-text:last-child {
	margin-bottom: 1em;
	width: 80%;
	border-radius: 0.125em;
}

.hero-skeleton-button {
	width: 20%;
	height: 1.8em;
	margin-top: 1em;
	margin-bottom: 0;
	border-radius: 0.125em;
}

.skeleton {
	opacity: 0.8;
	animation: skeleton-loading 1s linear infinite alternate;
	border-radius: 0.7em;
}

.skeleton-text {
	width: 100%;
	height: 1em;
	margin-bottom: 0.25em;
	border-radius: 0.25em;
}

.skeleton-text:last-child {
	margin-bottom: 0;
	width: 80%;
}

.app-skeleton {
	opacity: 0.8;
	animation: skeleton-loading 1s linear infinite alternate;
	border-radius: 0.7em;
}

.app-skeleton-text {
	width: 100%;
	height: 0.5rem;
	margin-bottom: 0.25rem;
	border-radius: 0.125rem;
}

.app-skeleton-text:last-child {
	margin-bottom: 0;
	width: 80%;
}

.overlay-skeleton {
	opacity: 0.8;
	animation: skeleton-loading 1s linear infinite alternate;
	border-radius: 1em;
}

.overlay-skeleton-text {
	width: 100%;
	height: 0.8em;
	margin-bottom: 0.25em;
	border-radius: 0.125em;
}

.overlay-skeleton-text:first-child {
	margin-bottom: 0.75em;
	width: 60%;
}

.overlay-skeleton-text:last-child {
	margin-bottom: 0;
	width: 80%;
}

.header-img {
	width: 50px;
	height: 50px;
	object-fit: cover;
	border-radius: 100%;
	margin-right: 1rem;
	flex-shrink: 0;
}

@keyframes skeleton-loading {
	0% {
		background-color: hsl(200, 20%, 70%);
	}

	100% {
		background-color: hsl(200, 20%, 95%);
	}
}

.lds-dual-ring {
	display: inline-block;
	width: 80px;
	height: 80px;
}

.lds-dual-ring:after {
	content: " ";
	display: block;
	width: 64px;
	height: 64px;
	margin: 8px;
	border-radius: 50%;
	border: 6px solid #00957e;
	border-color: #00957e transparent #00957e transparent;
	animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* ========================== */
/* Metronic Custom CSS */
/* ========================== */

/* tiny slider */
.tns .tns-nav button {
	background-color: #75c9bb;
}
.tns .tns-nav button.tns-nav-active {
	background-color: #eff2f5;
	width: 2rem !important;
}

.tns .tns-nav button {
	width: 0.5em !important;
	height: 0.5em !important;
}
/* #tns5-mw.tns-ovh{
    padding-bottom: 0.75rem !important;
    padding-left: 0.50rem !important;
    padding-right: 0.50rem !important;
} */
/* text  */
.one-lines {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.two-lines {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.three-lines {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.text-italic {
	font-style: italic !important;
}
.text-highlight {
	color: var(--jss-color) !important;
}
.text-jss {
	color: #1a516f !important;
}
.text-hover-tiny {
	transition: color 0.2s ease, background-color 0.2s ease;
}
.text-hover-tiny:hover {
	transition: color 0.2s ease, background-color 0.2s ease;
	color: #00957f !important;
}

.text-hover-info:hover i {
	transition: color 0.2s ease, background-color 0.2s ease;
	color: #00957f !important;
}

.text-hover-tiny:hover .svg-icon svg [fill]:not(.permanent):not(g) {
	transition: fill 0.3s ease;
	fill: #00957f;
}

.text-hover-tiny:hover .svg-icon svg:hover [fill]:not(.permanent):not(g) {
	transition: fill 0.3s ease;
}

.text-hover-jss {
	transition: color 0.2s ease, background-color 0.2s ease;
}
.text-hover-jss:hover {
	transition: color 0.2s ease, background-color 0.2s ease;
	color: #3a86ff !important;
}
.text-hover-jss:hover i {
	transition: color 0.2s ease, background-color 0.2s ease;
	color: #3a86ff !important;
}
.text-hover-jss:hover .svg-icon svg [fill]:not(.permanent):not(g) {
	transition: fill 0.3s ease;
	fill: #3a86ff;
}
.text-hover-jss:hover .svg-icon svg:hover [fill]:not(.permanent):not(g) {
	transition: fill 0.3s ease;
}
.text-active-jss {
	transition: color 0.2s ease, background-color 0.2s ease;
}

.text-active-jss i {
	transition: color 0.2s ease, background-color 0.2s ease;
}

.text-active-jss.active {
	transition: color 0.2s ease, background-color 0.2s ease;
	color: var(--jss-color) !important;
}

.text-active-jss.active i {
	transition: color 0.2s ease, background-color 0.2s ease;
	color: var(--jss-color) !important;
}

.text-active-jss.active .svg-icon svg [fill]:not(.permanent):not(g) {
	transition: fill 0.3s ease;
	fill: var(--jss-color);
}

.text-active-jss.active .svg-icon svg:hover [fill]:not(.permanent):not(g) {
	transition: fill 0.3s ease;
}

.text-active-inverse-jss {
	transition: color 0.2s ease, background-color 0.2s ease;
}

.svg-icon.svg-icon-jss svg [fill]:not(.permanent):not(g) {
	transition: fill 0.3s ease;
	fill: #00957f;
}

.svg-icon.svg-icon-jss svg:hover [fill]:not(.permanent):not(g) {
	transition: fill 0.3s ease;
}

.pointer {
	cursor: pointer;
}

.h-60 {
	height: 60% !important;
}

/* image */
.img-opacity {
	opacity: 0.75;
}
.img-opacity:hover {
	opacity: 1;
}

/* overlay */
.overlay.overlay-block {
	cursor: auto;
}

/* slider */
.nav-overlay .prev,
.nav-overlay .next {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	display: block !important;
	border: 0px solid black;
	color: #75c9bb;
}
.nav-overlay .prev {
	left: 20px;
}
.nav-overlay .next {
	right: 20px;
}

/* Start General Button */
.btn.btn-jss {
	color: #fff;
	border-color: var(--jss-color);
	background-color: var(--jss-color);
}

.btn.btn-jss i {
	color: #fff;
}

.btn.btn-jss .svg-icon svg [fill]:not(.permanent):not(g) {
	transition: fill 0.3s ease;
	fill: #fff;
}

.btn.btn-jss .svg-icon svg:hover [fill]:not(.permanent):not(g) {
	transition: fill 0.3s ease;
}

.btn.btn-jss.dropdown-toggle:after {
	color: #fff;
}

.btn-check:active + .btn.btn-jss,
.btn-check:checked + .btn.btn-jss,
.btn.btn-jss.active,
.btn.btn-jss.show,
.btn.btn-jss:active:not(.btn-active),
.btn.btn-jss:focus:not(.btn-active),
.btn.btn-jss:hover:not(.btn-active),
.show > .btn.btn-jss {
	color: #fff;
	border-color: var(--jss-color-light);
	background-color: var(--jss-color-light) !important;
}

.btn-check:active + .btn.btn-jss i,
.btn-check:checked + .btn.btn-jss i,
.btn.btn-jss.active i,
.btn.btn-jss.show i,
.btn.btn-jss:active:not(.btn-active) i,
.btn.btn-jss:focus:not(.btn-active) i,
.btn.btn-jss:hover:not(.btn-active) i,
.show > .btn.btn-jss i {
	color: #fff;
}

.btn-check:active + .btn.btn-jss .svg-icon svg [fill]:not(.permanent):not(g),
.btn-check:checked + .btn.btn-jss .svg-icon svg [fill]:not(.permanent):not(g),
.btn.btn-jss.active .svg-icon svg [fill]:not(.permanent):not(g),
.btn.btn-jss.show .svg-icon svg [fill]:not(.permanent):not(g),
.btn.btn-jss:active:not(.btn-active)
	.svg-icon
	svg
	[fill]:not(.permanent):not(g),
.btn.btn-jss:focus:not(.btn-active) .svg-icon svg [fill]:not(.permanent):not(g),
.btn.btn-jss:hover:not(.btn-active) .svg-icon svg [fill]:not(.permanent):not(g),
.show > .btn.btn-jss .svg-icon svg [fill]:not(.permanent):not(g) {
	transition: fill 0.3s ease;
	fill: #fff;
}

.btn-check:active
	+ .btn.btn-jss
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g),
.btn-check:checked
	+ .btn.btn-jss
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g),
.btn.btn-jss.active .svg-icon svg:hover [fill]:not(.permanent):not(g),
.btn.btn-jss.show .svg-icon svg:hover [fill]:not(.permanent):not(g),
.btn.btn-jss:active:not(.btn-active)
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g),
.btn.btn-jss:focus:not(.btn-active)
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g),
.btn.btn-jss:hover:not(.btn-active)
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g),
.show > .btn.btn-jss .svg-icon svg:hover [fill]:not(.permanent):not(g) {
	transition: fill 0.3s ease;
}

.btn-check:active + .btn.btn-jss.dropdown-toggle:after,
.btn-check:checked + .btn.btn-jss.dropdown-toggle:after,
.btn.btn-jss.active.dropdown-toggle:after,
.btn.btn-jss.show.dropdown-toggle:after,
.btn.btn-jss:active:not(.btn-active).dropdown-toggle:after,
.btn.btn-jss:focus:not(.btn-active).dropdown-toggle:after,
.btn.btn-jss:hover:not(.btn-active).dropdown-toggle:after,
.show > .btn.btn-jss.dropdown-toggle:after {
	color: #fff;
}

/* btn light */
.btn-check:active + .btn.btn-active-light-jss,
.btn-check:checked + .btn.btn-active-light-jss,
.btn.btn-active-light-jss.active,
.btn.btn-active-light-jss.show,
.btn.btn-active-light-jss:active:not(.btn-active),
.btn.btn-active-light-jss:focus:not(.btn-active),
.btn.btn-active-light-jss:hover:not(.btn-active),
.show > .btn.btn-active-light-jss {
	color: var(--jss-color);
	border-color: #f1faff;
	background-color: #f1faff !important;
}

.btn-check:active + .btn.btn-active-light-jss i,
.btn-check:checked + .btn.btn-active-light-jss i,
.btn.btn-active-light-jss.active i,
.btn.btn-active-light-jss.show i,
.btn.btn-active-light-jss:active:not(.btn-active) i,
.btn.btn-active-light-jss:focus:not(.btn-active) i,
.btn.btn-active-light-jss:hover:not(.btn-active) i,
.show > .btn.btn-active-light-jss i {
	color: var(--jss-color);
}

.btn-check:active
	+ .btn.btn-active-light-jss
	.svg-icon
	svg
	[fill]:not(.permanent):not(g),
.btn-check:checked
	+ .btn.btn-active-light-jss
	.svg-icon
	svg
	[fill]:not(.permanent):not(g),
.btn.btn-active-light-jss.active .svg-icon svg [fill]:not(.permanent):not(g),
.btn.btn-active-light-jss.show .svg-icon svg [fill]:not(.permanent):not(g),
.btn.btn-active-light-jss:active:not(.btn-active)
	.svg-icon
	svg
	[fill]:not(.permanent):not(g),
.btn.btn-active-light-jss:focus:not(.btn-active)
	.svg-icon
	svg
	[fill]:not(.permanent):not(g),
.btn.btn-active-light-jss:hover:not(.btn-active)
	.svg-icon
	svg
	[fill]:not(.permanent):not(g),
.show > .btn.btn-active-light-jss .svg-icon svg [fill]:not(.permanent):not(g) {
	transition: fill 0.3s ease;
	fill: var(--jss-color);
}

.btn-check:active
	+ .btn.btn-active-light-jss
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g),
.btn-check:checked
	+ .btn.btn-active-light-jss
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g),
.btn.btn-active-light-jss.active
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g),
.btn.btn-active-light-jss.show
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g),
.btn.btn-active-light-jss:active:not(.btn-active)
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g),
.btn.btn-active-light-jss:focus:not(.btn-active)
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g),
.btn.btn-active-light-jss:hover:not(.btn-active)
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g),
.show
	> .btn.btn-active-light-jss
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g) {
	transition: fill 0.3s ease;
}

.btn-check:active + .btn.btn-active-light-jss.dropdown-toggle:after,
.btn-check:checked + .btn.btn-active-light-jss.dropdown-toggle:after,
.btn.btn-active-light-jss.active.dropdown-toggle:after,
.btn.btn-active-light-jss.show.dropdown-toggle:after,
.btn.btn-active-light-jss:active:not(.btn-active).dropdown-toggle:after,
.btn.btn-active-light-jss:focus:not(.btn-active).dropdown-toggle:after,
.btn.btn-active-light-jss:hover:not(.btn-active).dropdown-toggle:after,
.show > .btn.btn-active-light-jss.dropdown-toggle:after {
	color: var(--jss-color);
}

/* .btn.btn-active-light-jss.btn-outline:not(.btn-outline-default) {
    border-color: var(--jss-color) !important;
} */
.btn.btn-active-light-jss {
	border-color: var(--jss-color) !important;
}

/* btn-linear */
.btn-jss-linear-gradient {
	background-image: linear-gradient(
		50deg,
		rgb(0 143 117 / 100%) 20%,
		rgba(95, 201, 181, 0.92) 95%,
		rgba(95, 201, 181, 0.9) 30%
	) !important;
}
.btn.btn-jss-linear-gradient i {
	color: #fff;
}
.btn.btn-jss-linear-gradient .svg-icon svg [fill]:not(.permanent):not(g) {
	transition: fill 0.3s ease;
	fill: #fff;
}
.btn.btn-jss-linear-gradient .svg-icon svg:hover [fill]:not(.permanent):not(g) {
	transition: fill 0.3s ease;
}
.btn.btn-jss-linear-gradient.dropdown-toggle:after {
	color: #fff;
}
.btn-check:active + .btn.btn-jss-linear-gradient,
.btn-check:checked + .btn.btn-jss-linear-gradient,
.btn.btn-jss-linear-gradient.active,
.btn.btn-jss-linear-gradient.show,
.btn.btn-jss-linear-gradient:active:not(.btn-active),
.btn.btn-jss-linear-gradient:focus:not(.btn-active),
.btn.btn-jss-linear-gradient:hover:not(.btn-active),
.show > .btn.btn-jss-linear-gradient {
	background-color: var(--jss-color-light) !important;
}

.btn-check:active + .btn.btn-jss-linear-gradient i,
.btn-check:checked + .btn.btn-jss-linear-gradient i,
.btn.btn-jss-linear-gradient.active i,
.btn.btn-jss-linear-gradient.show i,
.btn.btn-jss-linear-gradient:active:not(.btn-active) i,
.btn.btn-jss-linear-gradient:focus:not(.btn-active) i,
.btn.btn-jss-linear-gradient:hover:not(.btn-active) i,
.show > .btn.btn-jss-linear-gradient i {
	color: #fff;
}

.btn-check:active
	+ .btn.btn-jss-linear-gradient
	.svg-icon
	svg
	[fill]:not(.permanent):not(g),
.btn-check:checked
	+ .btn.btn-jss-linear-gradient
	.svg-icon
	svg
	[fill]:not(.permanent):not(g),
.btn.btn-jss-linear-gradient.active .svg-icon svg [fill]:not(.permanent):not(g),
.btn.btn-jss-linear-gradient.show .svg-icon svg [fill]:not(.permanent):not(g),
.btn.btn-jss-linear-gradient:active:not(.btn-active)
	.svg-icon
	svg
	[fill]:not(.permanent):not(g),
.btn.btn-jss-linear-gradient:focus:not(.btn-active)
	.svg-icon
	svg
	[fill]:not(.permanent):not(g),
.btn.btn-jss-linear-gradient:hover:not(.btn-active)
	.svg-icon
	svg
	[fill]:not(.permanent):not(g),
.show
	> .btn.btn-jss-linear-gradient
	.svg-icon
	svg
	[fill]:not(.permanent):not(g) {
	transition: fill 0.3s ease;
	fill: #fff;
}

.btn-check:active
	+ .btn.btn-jss-linear-gradient
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g),
.btn-check:checked
	+ .btn.btn-jss-linear-gradient
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g),
.btn.btn-jss-linear-gradient.active
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g),
.btn.btn-jss-linear-gradient.show
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g),
.btn.btn-jss-linear-gradient:active:not(.btn-active)
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g),
.btn.btn-jss-linear-gradient:focus:not(.btn-active)
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g),
.btn.btn-jss-linear-gradient:hover:not(.btn-active)
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g),
.show
	> .btn.btn-jss-linear-gradient
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g) {
	transition: fill 0.3s ease;
}

.btn-check:active + .btn.btn-jss-linear-gradient.dropdown-toggle:after,
.btn-check:checked + .btn.btn-jss-linear-gradient.dropdown-toggle:after,
.btn.btn-jss-linear-gradient.active.dropdown-toggle:after,
.btn.btn-jss-linear-gradient.show.dropdown-toggle:after,
.btn.btn-jss-linear-gradient:active:not(.btn-active).dropdown-toggle:after,
.btn.btn-jss-linear-gradient:focus:not(.btn-active).dropdown-toggle:after,
.btn.btn-jss-linear-gradient:hover:not(.btn-active).dropdown-toggle:after,
.show > .btn.btn-jss-linear-gradient.dropdown-toggle:after {
	color: #fff;
}

.btn.btn-light-jss {
	color: var(--jss-color);
	border-color: var(--jss-color-bg-text);
	background-color: var(--jss-color-bg-text);
}

.btn.btn-light-jss i {
	color: var(--jss-color);
}

.btn.btn-light-jss .svg-icon svg [fill]:not(.permanent):not(g) {
	transition: fill 0.3s ease;
	fill: var(--jss-color);
}

.btn.btn-light-jss .svg-icon svg:hover [fill]:not(.permanent):not(g) {
	transition: fill 0.3s ease;
}

.btn.btn-light-jss.dropdown-toggle:after {
	color: var(--jss-color);
}

.btn-check:active + .btn.btn-light-jss,
.btn-check:checked + .btn.btn-light-jss,
.btn.btn-light-jss.active,
.btn.btn-light-jss.show,
.btn.btn-light-jss:active:not(.btn-active),
.btn.btn-light-jss:focus:not(.btn-active),
.btn.btn-light-jss:hover:not(.btn-active),
.show > .btn.btn-light-jss {
	color: #fff;
	border-color: var(--jss-color);
	background-color: var(--jss-color) !important;
}

.btn-check:active + .btn.btn-light-jss i,
.btn-check:checked + .btn.btn-light-jss i,
.btn.btn-light-jss.active i,
.btn.btn-light-jss.show i,
.btn.btn-light-jss:active:not(.btn-active) i,
.btn.btn-light-jss:focus:not(.btn-active) i,
.btn.btn-light-jss:hover:not(.btn-active) i,
.show > .btn.btn-light-jss i {
	color: #fff;
}

.btn-check:active
	+ .btn.btn-light-jss
	.svg-icon
	svg
	[fill]:not(.permanent):not(g),
.btn-check:checked
	+ .btn.btn-light-jss
	.svg-icon
	svg
	[fill]:not(.permanent):not(g),
.btn.btn-light-jss.active .svg-icon svg [fill]:not(.permanent):not(g),
.btn.btn-light-jss.show .svg-icon svg [fill]:not(.permanent):not(g),
.btn.btn-light-jss:active:not(.btn-active)
	.svg-icon
	svg
	[fill]:not(.permanent):not(g),
.btn.btn-light-jss:focus:not(.btn-active)
	.svg-icon
	svg
	[fill]:not(.permanent):not(g),
.btn.btn-light-jss:hover:not(.btn-active)
	.svg-icon
	svg
	[fill]:not(.permanent):not(g),
.show > .btn.btn-light-jss .svg-icon svg [fill]:not(.permanent):not(g) {
	transition: fill 0.3s ease;
	fill: #fff;
}

.btn-check:active
	+ .btn.btn-light-jss
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g),
.btn-check:checked
	+ .btn.btn-light-jss
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g),
.btn.btn-light-jss.active .svg-icon svg:hover [fill]:not(.permanent):not(g),
.btn.btn-light-jss.show .svg-icon svg:hover [fill]:not(.permanent):not(g),
.btn.btn-light-jss:active:not(.btn-active)
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g),
.btn.btn-light-jss:focus:not(.btn-active)
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g),
.btn.btn-light-jss:hover:not(.btn-active)
	.svg-icon
	svg:hover
	[fill]:not(.permanent):not(g),
.show > .btn.btn-light-jss .svg-icon svg:hover [fill]:not(.permanent):not(g) {
	transition: fill 0.3s ease;
}

.btn-check:active + .btn.btn-light-jss.dropdown-toggle:after,
.btn-check:checked + .btn.btn-light-jss.dropdown-toggle:after,
.btn.btn-light-jss.active.dropdown-toggle:after,
.btn.btn-light-jss.show.dropdown-toggle:after,
.btn.btn-light-jss:active:not(.btn-active).dropdown-toggle:after,
.btn.btn-light-jss:focus:not(.btn-active).dropdown-toggle:after,
.btn.btn-light-jss:hover:not(.btn-active).dropdown-toggle:after,
.show > .btn.btn-light-jss.dropdown-toggle:after {
	color: #fff;
}
/* End General Button */

/* .menu-item:hover{
    background-color: var(--jss-color-bg-text);
} */

@media (min-width: 575px) {
	.menu-title-gray-500 .menu-item .menu-link {
		color: white;
	}

	[data-kt-sticky-landing-header="on"] .landing-header .menu .menu-link.active {
		color: #fff;
	}
}

@media (max-width: 575px) {
	.inner-bottom-content h4 {
		font-weight: 500;
		font-size: 16px;
		color: #fff;
	}
	.bg-header-jss {
		background-image: url(../assets/media/custom/batik.svg);
		background-size: 250px;
	}
	.rounded-sm-0 {
		border-radius: 0px !important;
	}
	.rounded-sm-10 {
		border-radius: 10px !important;
	}
}

.schedule-list .schedule-items {
	padding-right: 1.5rem !important;
	padding-left: 1.5rem !important;
	padding-top: 0.7rem !important;
	padding-bottom: 0.7rem !important;
}

.schedule-list .schedule-items .schedule-items-title {
	color: #3f4254 !important;
}

.schedule-list .schedule-items .schedule-items-date {
	color: #b5b5c3 !important;
}

.schedule-list .schedule-items.active {
	background-color: rgba(255, 245, 248, 1);
}

.schedule-list .schedule-items.active .schedule-items-title {
	color: #f1416c !important;
}

.schedule-list .schedule-items.active .schedule-items-date {
	color: rgba(241, 65, 108, 0.5) !important;
}

.schedule-list .schedule-items:hover {
	background-color: rgba(255, 245, 248, 1);
}

.schedule-list .schedule-items:hover .schedule-items-title {
	color: #f1416c !important;
}

.schedule-list .schedule-items:hover .schedule-items-date {
	color: rgba(241, 65, 108, 0.5) !important;
}
.schedule-play-btn {
	width: 100px;
	height: 100px;
	background: radial-gradient(#f1416c 50%, rgba(241, 65, 108, 0.5) 52%);
	border-radius: 50%;
	display: block;
	position: absolute;
	overflow: hidden;
}
.schedule-play-btn::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-40%) translateY(-50%);
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 15px solid #fff;
	z-index: 100;
	transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.schedule-play-btn::before {
	content: "";
	position: absolute;
	width: 130px;
	height: 130px;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation: pulsate-btn 2s;
	animation: pulsate-btn 2s;
	-webkit-animation-direction: forwards;
	animation-direction: forwards;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: steps;
	animation-timing-function: steps;
	opacity: 1;
	border-radius: 50%;
	border: 5px solid rgba(241, 65, 108, 0.7);
	top: -15%;
	left: -15%;
	background: rgba(198, 16, 0, 0);
}

.jss-header-rounded {
	border-radius: 0 0 20% 20%;
}

.jss-rounded-bottom-left {
	border-bottom-left-radius: 20px !important;
}

.jss-rounded-bottom-right {
	border-bottom-right-radius: 20px !important;
}

.jss-rounded-top {
	border-top-left-radius: 20px !important;
	border-top-right-radius: 20px !important;
}

.mt-min-shadow-x {
	margin-top: -26rem !important;
}

@media (min-width: 992px) {
	.mt-min-shadow-x {
		margin-top: -33rem !important;
	}
}

.smooth-zoom {
	transition: transform 0.5s ease !important;
	transform: scale(0.95) !important;
	margin-right: 0.25rem;
	margin-left: 0.25rem;
}

.smooth-zoom:hover {
	transform: scale(1.1) !important;
	background-color: #f5f8fa !important;
	z-index: 10 !important;
	margin-right: 1rem !important;
	margin-left: 1rem !important;
}

@media (max-width: 575px) {
	.smooth-zoom:hover {
		transform: scale(1.02) !important;
	}
}

.text-success-custom {
	color: rgb(43, 142, 142) !important;
}
.title-announcement {
	color: #1a516f;
}
.bg-thumb {
	background-image: url(../img/logo_bms.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
.bg-announcement {
	background: url("https://cdn.jogjakota.go.id/media/background/bg-top-waning.svg")
			left top no-repeat,
		url("https://cdn.jogjakota.go.id/media/background/bg-bot-warning.svg") right
			bottom no-repeat;
}
.bg-announcement-warning {
	background: url("https://cdn.jogjakota.go.id/media/background/bg-top-warning.svg")
			left top no-repeat,
		url("https://cdn.jogjakota.go.id/media/background/bg-bot-warning.svg") right
			bottom no-repeat;
}
.bg-announcement-info {
	background: url("https://cdn.jogjakota.go.id/media/background/bg-top-info.svg")
			left top no-repeat,
		url("https://cdn.jogjakota.go.id/media/background/bg-bot-info.svg") right
			bottom no-repeat;
}
.bg-announcement-danger {
	background: url("https://cdn.jogjakota.go.id/media/background/bg-top-danger.svg")
			left top no-repeat,
		url("https://cdn.jogjakota.go.id/media/background/bg-bot-danger.svg") right
			bottom no-repeat;
}

/* Tooltip container */
.jss-tooltip {
	position: relative;
	display: inline-block;
}

/* Tooltip text */
.jss-tooltip .jss-tooltiptext {
	visibility: hidden;
	min-width: 100px;
	max-width: 150px;
	color: #fff;
	text-align: center;
	padding: 7px;
	border-radius: 6px;

	/* Position the tooltip text */
	position: absolute;
	z-index: -99;
	bottom: 105%;
	left: 50%;
	margin-left: -60px;

	/* Fade in tooltip */
	opacity: 0;
	transition: opacity 0.3s;
}

/* Tooltip arrow */
.jss-tooltip .jss-tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.jss-tooltip:hover .jss-tooltiptext {
	visibility: visible;
	opacity: 1;
}

.app-popular .tns.tns-default .tns-outer {
	margin: 0 0.75rem !important;
}

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

.zoom {
	/* padding: 50px; */
	transition: transform 0.2s; /* Animation */
	/* width: 200px;
    height: 200px; */
	/* margin: 0 auto; */
}

.zoom:hover {
	transform: scale(
		1
	); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.rating-pulse {
	width: 100px;
	height: 100px;
	background: radial-gradient(#f1416c 50%, rgba(217, 33, 78, 0.4) 52%);
	border-radius: 50%;
	/* display: block;
    position: absolute; */
	overflow: hidden;
}

.rating-pulse::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-40%) translateY(-50%);
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 15px solid #fff;
	z-index: 100;
	transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.rating-pulse::before {
	content: "";
	position: absolute;
	width: 130px;
	height: 130px;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation: pulsate-btn 2s;
	animation: pulsate-btn 2s;
	-webkit-animation-direction: forwards;
	animation-direction: forwards;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: steps;
	animation-timing-function: steps;
	opacity: 1;
	border-radius: 50%;
	border: 5px solid rgba(217, 33, 78, 0.7);
	top: -15%;
	left: -15%;
	background: rgba(198, 16, 0, 0);
}

.polling-group {
	display: inline-flex;
}
.poll-icon {
	pointer-events: none;
}
.poll-input {
	position: absolute !important;
	left: -9999px !important;
}
.poll-input--none {
	display: none;
}
.poll-label {
	cursor: pointer;
	padding: 0 0.1em;
	font-size: 2rem;
}
.poll-smiley {
	filter: grayscale(0) !important;
}
.poll-input:checked ~ .poll-label .poll-smiley {
	filter: grayscale(1) !important;
}
.polling-group:hover .poll-label .poll-smiley {
	filter: grayscale(0) !important;
}
.poll-input:hover ~ .poll-label .poll-smiley {
	filter: grayscale(1) !important;
}
.poll-bottom-toggle {
	bottom: 120px !important;
	right: 20px !important;
}

/* .poll-input:checked ~ .poll-label .poll-smiley {
    filter: grayscale(1);
}
.polling-group:hover .poll-label .poll-smiley {
    filter: grayscale(0);
}
.poll-input:hover ~ .poll-label .poll-smiley {
    filter: grayscale(1);
}
  
  */
/* chevron */
.tns-btn-next,
.tns-btn-prev {
	width: 35px;
	height: 35px;
	background-color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0.05rem 0.5rem 0.15rem rgba(0, 0, 0, 0.05) !important;
}
.tns-btn-next i,
.tns-btn-prev i {
	display: flex;
	align-items: center;
}
.accordion-item {
	border: unset;
}

/* chatbox */
.fs-poppins {
	font-family: "Poppins", sans-serif;
}
.rating-btn {
	/* position: absolute; */
	position: fixed;
	top: 60px;
	right: 20px;
	/* bottom: 10px; */
	cursor: pointer;
}

.rating-btn i {
	transition: all 0.9s ease;
}

#check:checked ~ .rating-btn i {
	display: block;
	pointer-events: auto;
	transform: rotate(180deg);
}
#check:checked ~ .rating-btn .comment {
	display: none;
}
.chats-wrapper {
	position: fixed;
	right: 20px;
	top: 110px;
	/* bottom: 60px; */
	background-color: #fff;
	border-radius: 15px;
	/* opacity: 0; */
	transition: all 0.4s;
}

.rating-btn .close {
	display: none;
}
/* 
#check:checked~.chats-wrapper {
    opacity: 1
}    */

#check {
	display: none !important;
}

@media (min-width: 992px) {
	.scrolltop {
		bottom: 20px;
	}
}

.woot-widget-bubble {
	/* right: 70px !important; */
	bottom: 70px !important;
}

@media (max-width: 575px) {
	.rating-btn {
		right: 5px;
		top: 50px;
	}
	.chats-wrapper {
		top: 80px !important;
		right: 5px;
	}

	.woot-widget-bubble {
		margin-bottom: 20px !important;
		right: 10px !important;
	}
	.fav-app .faq-list span {
		display: none;
	}
}

/* timeline */
.timeline-steps {
	display: flex;
}

.timeline-steps .timeline-step {
	align-items: center;
	display: flex;
	flex-direction: column;
	position: relative;
}

/* .timeline-label:before {
    left: 150px !important;
} */

.timeline-steps .timeline-step.muted:not(:last-child):after {
	border-top: 3px solid #a1a5b7;
	/* width: 10rem; */
}

.timeline-steps .timeline-step.muted:not(:first-child):before {
	border-top: 3px solid #a1a5b7;
}

.timeline-steps .timeline-step:not(:last-child):after {
	content: "";
	display: block;
	border-top: 3px solid #08a78b;
	border-radius: 10px;
	position: absolute;
	/* width: 5.5rem; */
	width: 10.7rem;
	left: 8.6rem;
	top: 0.9rem;
}

.timeline-steps .timeline-step:not(:first-child):before {
	content: "";
	display: block;
	border-top: 3px solid #08a78b;
	border-radius: 10px;
	position: absolute;
	width: 0rem !important;
	/* width: 5.5rem; */
	right: 8.6rem;
	top: 0.9rem;
}

.timeline-steps .timeline-content {
	width: 14rem;
	text-align: center;
}