:root {
    --app-title-hex: #2c4964;
    --light-hex: #07c5a9;
    --info-hex: #07b3a7;
    /* --border-app: 2px solid #F3F3F3; */
    --border-app: 1px solid #5fc9b5;
    --sm-border-app: 3px solid #f3f3f3;
    --sso-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: #ff81c0; /* old #F1416C */
    --sso-color-rgba-opacity: rgba(247, 95, 178, 0.75);
    --sso-color-light-rgba: rgba(247, 95, 178, 1);
    --sso-color-rgba: rgb(218, 29, 158);
    --sso-color: #ff0080;
    --sso-color-light: #ff81c0;
    --sso-color-bg-text: #f4c9f1;
    --sso-color-bg-text-light: #f4c9f1;
    --jss-linear-gradient: linear-gradient(
        44deg,
        rgb(218 29 158 / 97%) 20%,
        rgba(247, 95, 178, 0.92) 95%,
        rgba(247, 95, 178, 0.9) 30%
    ) !important;
    --muted: #a1a5b7;
}

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

a {
    color: var(--sso-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;
}
body {
    background-color: #ffffff !important;
}
/* 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;
}

.text-capitalize {
    text-transform: capitalize !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(--sso-color) !important;
}
.bg-jss-linear-gradient {
    background-image: var(--jss-linear-gradient);
}
.bg-light-jss {
    background-color: var(--sso-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;
}
.bottom-35 {
    bottom: 35% !important;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    /* color: var(--sso-color); */
    /* box-shadow: 0 .5rem 1.5rem .5rem rgba(0, 0, 0, .075) !important; */
    background-color: #fff;
    box-shadow: 0 0.5rem 0.5rem 0rem rgba(0, 0, 0, 0.075) !important;
}
.nav-pills .show > .nav-link:hover {
    color: var(--sso-color);
}

.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-app {
    border-radius: 1rem !important;
}
.rounded-top-app {
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
}
.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;
}
.card-rounded-app {
    border-radius: 1rem !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-sso {
    border-color: var(--sso-color) !important;
}
.border-light-jss {
    border-color: var(--sso-color-light) !important;
}
.badge-jss {
    color: #fff;
    background-color: var(--sso-color);
}
.badge-light-jss {
    color: #fff;
    background-color: var(--sso-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;
}

.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(--sso-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(--sso-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(--sso-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: 475px;
    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(--sso-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(--sso-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 .shortcutToggle {
    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;
}

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

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

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

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

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

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

/*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;
    }
}
/* @media (max-width:768px) { */
@media (max-width: 578px) {
    .fav-app .faq-list .aplikasi .item img {
        border-radius: 20px;
    }
    .fav-app .faq-list .shortcut-box {
        border-radius: 0px;
    }
}

.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;
}

.shadow-box:hover,
.shadow-jss:hover {
    box-shadow: var(--app-box-shadow);
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
}

.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: 60px;
    height: 60px;
    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: var(--jss-hover-hex);
}

.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(--sso-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: 600;
    min-height: 40px;
    /* margin-top: 10px; */
    /* font-size: 18px; */
    /* 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(--sso-color);
}

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

.logo-box:hover .title a {
    color: var(--sso-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(--sso-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(--sso-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 .box {
    border: 1px solid #eff2f5 !important;
    border-radius: var(--border-radius-md);
}
.app-item:hover .box {
    background-color: #ffffff;
    box-shadow: var(--app-box-shadow);
    border-radius: var(--border-radius-md);
}

.app-item .tooltip .tooltip-inner {
    text-align: justify !important;
}
.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: 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(--sso-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(--sso-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(--sso-color);
    border-bottom: 3px solid var(--sso-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(--sso-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(--sso-color);
}
.scrolltop:hover {
    background-color: var(--sso-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(247, 95, 178, 0.9) 30%
        ) !important;
    /* linear-gradient(
            44deg,
            rgb(25 133 114 / 100%) 100%,
            rgba(247, 95, 178, 1) 100%,
            rgba(247, 95, 178, 1) 10%
        ) !important; */
    /* background-size: 225px 225px; */
    background-size: 375px;
    background-attachment: fixed;
    /* background-repeat: repeat; */
}
.landing-jss-bg {
    background-image: var(--jss-linear-gradient);
}
.bg-satuheader {
    background-color: #23272a !important;
}
.landing-header {
    height: 50px;
}

.landing-jss-color {
    color: var(--sso-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;
}
/* .two-lines:hover{
    -webkit-line-clamp: unset;
} */
.three-lines {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.three-lines-hover {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.three-lines-hover:hover {
    -webkit-line-clamp: unset;
    -webkit-box-orient: vertical;
}
.four-lines {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.text-italic {
    font-style: italic !important;
}
.text-highlight {
    color: var(--sso-color) !important;
}
.text-sso {
    color: var(--sso-color) !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-sso {
    transition: color 0.2s ease, background-color 0.2s ease;
}
.text-hover-sso:hover {
    transition: color 0.2s ease, background-color 0.2s ease;
    color: var(--jss-hover-hex) !important;
}
.text-hover-sso:hover .svg-icon svg [fill]:not(.permanent):not(g) {
    transition: fill 0.3s ease;
    fill: var(--jss-hover-hex);
}
.text-hover-sso: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(--sso-color) !important;
}

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

.text-active-jss.active .svg-icon svg [fill]:not(.permanent):not(g) {
    transition: fill 0.3s ease;
    fill: var(--sso-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-top-50 .prev, .nav-top-50 .next {
    top: 50% !important;
}
.nav-overlay .prev,
.nav-overlay .next {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    border: 0px solid black;
    color: #75c9bb;
}
.nav-overlay .prev {
    left: 20px;
}
.nav-overlay .next {
    right: 20px;
}
.nav-overlay .prev.prev-0 {
    left: 0;
}
.nav-overlay .next.next-0 {
    right: 0;
}

/* Start General Button */
.btn.btn-jss {
    color: #fff;
    border-color: var(--sso-color);
    background-color: var(--sso-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(--sso-color-light);
    background-color: var(--sso-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(--sso-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(--sso-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(--sso-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(--sso-color);
}

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

/* btn-linear */
.btn-jss-linear-gradient {
    background-image: linear-gradient(
        50deg,
        rgb(0 143 117 / 100%) 20%,
        rgba(247, 95, 178, 0.92) 95%,
        rgba(247, 95, 178, 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(--sso-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-sso {
    color: var(--sso-color);
    border-color: var(--sso-color-bg-text);
    background-color: var(--sso-color-bg-text);
}

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

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

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

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

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

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

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

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

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

/* .menu-item:hover{
    background-color: var(--sso-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-n21 {
    margin-top: -5.25rem !important;
}
.mt-n22 {
    margin-top: -5.5rem !important;
}
.mt-n23 {
    margin-top: -5.75rem !important;
}
.mt-n24 {
    margin-top: -6rem !important;
}
.mt-n25 {
    margin-top: -6.25rem !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;
    }
}

.app-smooth-zoom .box {
    transition: transform 0.5s ease !important;
    transform: scale(0.95) !important;
}
.app-smooth-zoom:hover .box {
    transform: scale(1.1) !important;
    z-index: 10 !important;
}
.app-smooth-zoom:hover .app-title {
    color: var(--jss-hover-hex) !important;
}
@media (max-width: 575px) {
    .app-smooth-zoom:hover .box {
        transform: scale(1.2) !important;
    }
}

.text-success-custom {
    color: rgb(43, 142, 142) !important;
}
.title-app,
.title-announcement {
    color: #1a516f !important;
}
.bg-thumb {
    background-image: url(../img/bg/bg-default.jpg);
    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: fixed;
    top: 95px;
    right: 20px;
    cursor: pointer;
    transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
}
.chats-wrapper {
    position: fixed;
    right: 20px;
    top: 130px;
    background-color: #fff;
    border-radius: 15px;
    transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
}

body[data-kt-sticky-landing-header="on"] .rating-btn {
    top: 55px;
}
body[data-kt-sticky-landing-header="on"] .chats-wrapper {
    top: 95px;
}

.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;
}

.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: 80px !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;
    }
}

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

/* register progress */
.reg-progress-first {
    border-radius: unset !important;
    clip-path: polygon(
        calc(100% - 1.1rem) 0,
        100% 50%,
        calc(100% - 1.1rem) 100%,
        0% 100%,
        0 50%,
        0% 0%
    );
}
.reg-progress {
    border-radius: unset !important;
    clip-path: polygon(
        calc(100% - 1.1rem) 0,
        100% 50%,
        calc(100% - 1.1rem) 100%,
        0% 100%,
        3% 50%,
        0% 0%
    );
}
/* .reg-progress-last {
    border-radius: unset !important;
    clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 3% 49%, 0% 0%);
} */

/* begin:::timeline */
.stepper-timeline.stepper.stepper-pills
    .stepper-item
    .stepper-label
    .stepper-title {
    margin-bottom: unset;
    font-size: 1.15rem;
    font-weight: 900;
}
.stepper-timeline.stepper.stepper-pills.stepper-column .stepper-line {
    border-left-width: 2.5px;
    border-left-color: var(--sso-color);
    border-left-style: dashed;
}
.stepper-timeline.stepper.stepper-pills .stepper-item.current .stepper-icon {
    transition: color 0.2s ease, background-color 0.2s ease;
    background-color: var(--sso-color);
    box-shadow: 0 0.5rem 0.5rem 0rem rgba(0, 0, 0, 0.075) !important;
}
.stepper-timeline.stepper.stepper-pills .stepper-item .stepper-icon {
    background-color: #e4e4e4;
    box-shadow: 0 0.5rem 0.5rem 0rem rgba(0, 0, 0, 0.075) !important;
}
.stepper-timeline.stepper.stepper-pills
    .stepper-item.current
    .stepper-icon
    .stepper-check {
    color: var(--sso-color) !important;
    display: none;
}
.stepper-timeline.stepper.stepper-pills
    .stepper-item.current
    .stepper-icon
    .stepper-number {
    color: #fff !important;
    font-size: 1.35rem;
}
.stepper-timeline.stepper.stepper-pills
    .stepper-item
    .stepper-icon
    .stepper-check,
.stepper-timeline.stepper.stepper-pills
    .stepper-item
    .stepper-icon
    .stepper-number {
    font-weight: 600;
    color: var(--sso-color) !important;
    font-size: 1.25rem;
}
.stepper-timeline.stepper.stepper-pills.stepper-column .stepper-item {
    padding-bottom: 1.1rem;
}
.stepper-timeline.stepper.stepper-pills.stepper-column
    .stepper-item:last-child {
    padding-bottom: unset;
}
.timeline-steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.timeline-steps .timeline-step {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    /* margin: 1rem */
}
.timeline-label:before {
    left: 126px !important;
}
.timeline-steps .timeline-step.muted:not(:last-child):after {
    border-top: 3px solid var(--muted);
}
.timeline-steps .timeline-step.muted:not(:first-child):before {
    border-top: 3px solid var(--muted);
}
.timeline-steps .timeline-step:not(:last-child):after {
    content: "";
    display: block;
    border-top: 3px solid var(--sso-color);
    border-radius: 10px;
    position: absolute;
    width: 5.1rem;
    left: 7.7rem;
    top: 1.1rem;
    /* width: 3.46rem; */
    /* left: 7.5rem; */
    /* top: .3125rem */
}
.timeline-steps .timeline-step:not(:first-child):before {
    content: "";
    display: block;
    border-top: 3px solid var(--sso-color);
    border-radius: 10px;
    position: absolute;
    width: 5.1rem;
    right: 7.7rem;
    top: 1.1rem;
    /* right: 7.5rem; */
    /* top: .3125rem */
}
.timeline-steps .timeline-content {
    width: 12.5rem;
    text-align: center;
}
@media (max-width: 768px) {
    .timeline-steps {
        display: inline-block;
        justify-content: start;
        /* flex-wrap: wrap */
    }
    .timeline-steps .timeline-step {
        align-items: center;
        /* display: flex; */
        flex-direction: column;
        position: static;
    }
    .timeline-label:before {
        left: 126px !important;
    }
    .timeline-steps .timeline-step.muted:not(:last-child):after {
        border-top: 3px solid var(--muted);
    }
    .timeline-steps .timeline-step.muted:not(:first-child):before {
        border-top: 3px solid var(--muted);
    }
    .timeline-steps .timeline-step:not(:last-child):after {
        content: "";
        display: block;
        border-top: 3px solid var(--sso-color);
        border-radius: 10px;
        position: absolute;
        width: 0;
        left: 0;
        top: 0;
    }
    .timeline-steps .timeline-step:not(:first-child):before {
        content: "";
        display: block;
        border-top: 3px solid var(--sso-color);
        border-radius: 10px;
        position: absolute;
        width: 0;
        right: 0;
        top: 0;
    }
    .timeline-steps .timeline-content {
        width: 12.5rem;
        text-align: center;
    }
}
/* end:::timeline */

/* guidelines */
.gsi-material-button {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-appearance: none;
    background-color: #f2f2f2;
    background-image: none;
    border: none;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #1f1f1f;
    cursor: pointer;
    font-family: "Poppins", arial, sans-serif;
    font-size: 14px;
    height: 40px;
    letter-spacing: 0.25px;
    outline: none;
    overflow: hidden;
    padding: 0 12px;
    position: relative;
    text-align: center;
    -webkit-transition: background-color 0.218s, border-color 0.218s,
        box-shadow 0.218s;
    transition: background-color 0.218s, border-color 0.218s, box-shadow 0.218s;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
    max-width: 400px;
    min-width: min-content;
}

.gsi-material-button .gsi-material-button-icon {
    height: 20px;
    margin-right: 12px;
    min-width: 20px;
    width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
    -webkit-align-items: center;
    align-items: center;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: space-between;
    position: relative;
    width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    font-family: "Poppins", arial, sans-serif;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
    -webkit-transition: opacity 0.218s;
    transition: opacity 0.218s;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.gsi-material-button:disabled {
    cursor: default;
    background-color: #ffffff61;
}

.gsi-material-button:disabled .gsi-material-button-state {
    background-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
    opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
    opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
    background-color: #001d35;
    opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
        0 1px 3px 1px rgba(60, 64, 67, 0.15);
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
        0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
    background-color: #001d35;
    opacity: 8%;
}

.btn.btn-dark.apple:hover {
    box-shadow: 0 0 11px rgba(33, 33, 33, 0.9) !important;
}
.login-social
    .btn.btn:not(.btn-shadow):not(.shadow):not(.shadow-sm):not(
        .shadow-lg
    ):hover {
    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
        0 1px 3px 1px rgba(60, 64, 67, 0.15) !important;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
        0 1px 3px 1px rgba(60, 64, 67, 0.15) !important;
}
.bg-linear-jss {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 10%, #000000 100%);
}
@media (min-width: 768px) {
    .tnsFyp #tns4-iw {
        display: flex !important;
        justify-content: center !important;
    }
}

/* begin::maps */
#mapid {
    min-height: 300px;
    height: 100%;
}
/* end::maps */
input[type="file"] {
    display: block;
}
.imageThumb {
    max-height: 125px;
    /* border: 1px solid; */
    padding: 1px;
    cursor: pointer;
}
.pip {
    display: inline-block;
    margin: 10px 10px 0 0;
}
.remove {
    display: block;
    background: #444;
    border: 1px solid black;
    color: white;
    text-align: center;
    cursor: pointer;
}
.remove:hover {
    background: white;
    color: black;
}

.select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered{
    color: #5e6278 !important;
}