        <style>

        .nav-tabs {
            border-bottom: none !important;
        }
        .tab-aktif.active{
            padding: 5px 34.5px !important;
            font-weight: bold !important;
            color: #000 !important;
            white-space:pre-wrap !important;
            align-self: center !important;
            border-bottom: 2px #4AB6FF solid;
        }

        .nav-nonaktif {
            padding: 5px 34.5px !important;
            font-weight: bold !important;
            color: grey !important;
            white-space:pre-wrap !important;
            align-self: center !important;
        }
        #table-index th{
            background-color: #FAFAFA;
            color: #000;
        }
        .close{
            top: -5px;
            right:-5px;
            background-color: Transparent;
            border: none;
            cursor:pointer;
            overflow: hidden;
            outline:none;
        }
        .navbar {
            -webkit-box-shadow: 0 6px 6px -6px #999;
            -moz-box-shadow: 0 6px 6px -6px #999;
            box-shadow: 0 6px 6px -6px #999;
        }
        .nav-link {
            color: black;
            font-size: 15px;
            margin-right: 20px;
        }
        .img-resposive{
            max-width: 100%;
            max-height: 100%;
            margin-left: auto;
            margin-right: auto;
            display: block;
        }
        .nav-item {
            font-size: 15px;
            color: rgba(0,0,0,.5);
        }
        a:hover.nav-item {
            color: black;
            text-decoration: none;
        }
        .active1{
            color: black;
            text-decoration: none;
        }
        .active2{
            font-size: 15px;
            color: rgba(0,0,0,.5);
            text-decoration: none;
        }
        .dropdown-menu{
            font-size: 15px;
            background-color: #f8f9fa!important; 
        }
        .dropdown-item:hover{
            color: white;
            background-color: rgb(50, 149, 230);
        }
        .nav-link-footer {
            color: black;
            font-size: 14px;
            margin-right: 20px;
        }
        a:hover.nav-link-footer {
            color: black;
            text-decoration: none;
        }
        .contact-us {
            background-image: url('/img/logo/bg3.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            color: white;
        }
        .gradient-header-big {
            color: white;
            width: 100%;
            background: linear-gradient(105.31deg, #0351B5 37.11%, #4AB6FF 93.5%);
        }
        .gradient-header-checklist {
            color: white;
            width: 100%;
            background: #0351B5 ;
        }
        .gradient-header-small {
            color: white;
            width: 100%; 
            padding-bottom:70px;
            background: linear-gradient(105.31deg, #0351B5 37.11%, #4AB6FF 93.5%);
        }
        .gradient-bg-layanan {
            width: 100%;
            background: linear-gradient(180deg, rgba(164, 196, 236, 0.17) 100%, rgba(255, 255, 30, 0) 2.93%);
        }
        .text-center h1 {
            padding-top: 150px;
        }
        .custom-button {
            padding: 5px 73px;
            border-radius: 20px;
            background-color: #1C5DDC;
            color: white;
            border: none;
        }
        .custom-button-kontak {
            border-radius: 20px;
            color: #007bff;
            padding:10px 20px;
            width: 100%;
            white-space:pre-wrap;
            border:1px solid #007bff;
            background-color: #fff;
        }
        .custom-button-kontak:hover {
            color: white;
            background-color: #007bff;

        }
        .custom-button-dinkes {
            border-radius: 20px;
            color: #fff;
            padding:10px 28px;
            background-color: #0351B5;
            border:1px solid #0351B5;
        }
        .raise:hover {
            color: #fff;
            box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.5);
        }
        
        .custom-button2 {
            padding: 5px 23.5px;
            border-radius: 20px;
            background-color: #1C5DDC;
            color: white;
            border: none;
        }
        .custom-button3 {
            padding: 5px 34.5px;
            border-radius: 20px;
            background-color: #1C5DDC;
            color: white;
            border: none;
        }
        .bg-gray{
            background: lightgray;
        }
        .infographic {
            width: 100%;
            height: 250px;
        }
        footer {
            background: #FBFBFB;
        }
        .text-small {
            font-size: 0.8rem;
        }
        .sticky-top {
            box-shadow:0px 0px 5px 0px rgba(0,0,0,0.5);
        }
        .card-header-blue{
            background-color: #2656B8;
        }
        .btn-faq{
            color: #ffffff;
        }
        .text-breadcrumb{
            padding-top: 50px;
            color: #ffffff;
        }
        .tablue-data-odp {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }
        .shareable a:hover {
            text-decoration: none;

        }
        .faq-responsive{
            text-align: left !important;
            border:none;
        }

        @media (min-width: 1281px) {
            h1{
                font-size:40px;
            }
            #text-mobile{
                display: none;
            }
            #footer-mobile{
                display: none;
            }
            #footer-mobile-bar{
                display: none;
            }
            #sa-desktop{
                display:block;
            }
            #sa-mobile{
                display:none;
            }
            #head-card-desktop{
                display:block;
            }
            #head-card-mobile{
                display:none;
            }
            .modal-bg-img {
                height: 500px !important;
            }
            .btn-mdl-jaki-ios{
                left:    50px;
                bottom:   93px;
                width: 110px !important;
                height: 36px;
            }
            .btn-mdl-jaki{
                left:    180px;
                bottom:   93px;
                width: 110px !important;
                height: 36px;
            }
            .btn-jaki{
                left:    353px;
                bottom:   82px;
                width: 230px !important;
                height: 75px;
            }
            .btn-jaki-ios{
                left:    95px;
                bottom:   82px;
                width: 210px !important;
                height: 75px;
            }
            .banner-sikm{
                background-image: url('<?= base_url() ?>assets/web/img/banner-update.png');
            }
            .banner-jaki-clm{
                background-image: url('<?= base_url() ?>assets/web/img/banner-update.png');
            }
        }
        @media (min-width: 1025px) and (max-width: 1280px) {
            h1{
                font-size:40px;
            }
            #text-mobile{
                display: none;
            }
            #footer-mobile{
                display: none;
            }
            #footer-mobile-bar{
                display: none;
            }
            #sa-desktop{
                display:block;
            }
            #sa-mobile{
                display:none;
            }
            #head-card-desktop{
                display:block;
            }
            #head-card-mobile{
                display:none;
            }
            .modal-bg-img {
                height: 500px !important;
            }
            .btn-mdl-jaki-ios{
                left:    50px;
                bottom:   93px;
                width: 110px !important;
                height: 36px;
            }
            .btn-mdl-jaki{
                left:    180px;
                bottom:   93px;
                width: 110px !important;
                height: 36px;
            }
            .btn-jaki{
                left: 272px;
                bottom: 78px;
                width: 420px !important;
                height: 20px;
            }
            .btn-jaki-ios{
                left: 35px;
                bottom: 78px;
                width: 200px !important;
                height: 70px;
            }
            .banner-sikm{
                background-image: url('<?= base_url() ?>assets/web/img/banner-update.png');
            }
            .banner-jaki-clm{
                background-image: url('<?= base_url() ?>assets/web/img/banner-update.png');
            }
            .c-atm-brs{
                padding: 0 30px 0 30px;
            }

        }
        @media (min-width: 768px) and (max-width: 1024px) {
            h1{
                font-size:35px;
            }
            #text-mobile{
                display: none;
            }
            #footer-mobile{
                display: none;
            }
            #footer-mobile-bar{
                display: none;
            }
            #sa-desktop{
                display:block;
            }
            #sa-mobile{
                display:none;
            }
            #head-card-desktop{
                display:none;
            }
            #head-card-mobile{
                display:block;
            }
            .modal-bg-img {
                height: 500px !important;
            }
            .btn-mdl-jaki-ios{
                left:    50px;
                bottom:   93px;
                width: 110px !important;
                height: 36px;
            }
            .btn-mdl-jaki{
                left:    180px;
                bottom:   93px;
                width: 110px !important;
                height: 36px;
            }
            .btn-jaki{
                left:    200px;
                bottom:   54px;
                width: 165px !important;
                height: 50px;
            }
            .btn-jaki-ios{
                left:    23px;
                bottom:   54px;
                width: 150px !important;
                height: 50px;
            }
            .banner-sikm{
                background-image: url('<?= base_url() ?>assets/web/img/rectangle.png');
            }
            .banner-jaki-clm{
                background-image: url('<?= base_url() ?>assets/web/img/banner-update.png');
            }
            .c-atm-brs{
                padding: 0 30px 0 30px;
            }

            #detail_ppkm .card-body{
                font-size: 18px !important;
            }

        }
        @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
            h1{
                font-size:35px;
            }
            #text-mobile{
                display: none;
            }
            #footer-mobile{
                display: none;
            }
            #footer-mobile-bar{
                display: none;
            }
            #sa-desktop{
                display:block;
            }
            #sa-mobile{
                display:none;
            }
            #head-card-desktop{
                display:none;
            }
            #head-card-mobile{
                display:block;
            }
            .modal-bg-img {
                height: 500px !important;
            }
            .btn-mdl-jaki-ios{
                left:    50px;
                bottom:   93px;
                width: 110px !important;
                height: 36px;
            }
            .btn-mdl-jaki{
                left:    180px;
                bottom:   93px;
                width: 110px !important;
                height: 36px;
            }
            .btn-jaki{
                left:    260px;
                bottom:   75px;
                width: 230px !important;
                height: 75px;
            }
            .btn-jaki-ios{
                left:    25px;
                bottom:   75px;
                width: 210px !important;
                height: 75px;
            }
            .banner-sikm{
                background-image: url('<?= base_url() ?>assets/web/img/rectangle.png');
            }
            .banner-jaki-clm{
                background-image: url('<?= base_url() ?>assets/web/img/banner-update.png');
            }
            #tahapan-vaksin .col-md-4{
                width: 37.50%;
            }
            .c-atm-brs{
                padding: 0 30px 0 30px;
            }

            #detail_ppkm .card-body{
                font-size: 18px !important;
            }
        }

        @media (min-width: 441px) and (max-width: 768px) {
            .modal-bg-img {
                height: 450px !important;
            }

            #detail_ppkm .card-body{
                font-size: 18px !important;
            }

        }

        @media (max-width: 441px) {
            h1{
                font-size:35px;
            }
            #text-mobile{
                display: block;
            }
            #text-desktop{
                display: none;
            }
            #footer-mobile{
                display: block;
            }
            #footer-mobile-bar{
                display: block;
            }
            #footer-desktop{
                display: none;
            }
            #doctor-desktop{
                display:none;
            }
            #sa-desktop{
                display:none;
            }
            #sa-mobile{
                display:block;
            }
            #head-card-desktop{
                display:none;
            }
            #head-card-mobile{
                display:block;
            }
            .modal-bg-img {
                height: 400px;
            }
            .btn-mdl-jaki-ios{
                left:    40px;
                bottom:   70px;
                width: 90px !important;
                height: 36px;
            }
            .btn-mdl-jaki{
                left:    140px;
                bottom:   70px;
                width: 90px !important;
                height: 36px;
            }
            .btn-jaki{
                left:    107px;
                bottom:   24px;
                width: 90px !important;
                height: 30px;
            }
            .btn-jaki-ios{
                left:    10px;
                bottom:   24px;
                width: 82px !important;
                height: 30px;
            }
            .banner-sikm{
                background: linear-gradient(89.53deg, #1C5DDC 0.12%, #4383FF 108.35%);
                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
                border-radius: 10px;
                padding: 20px 20px;
            }
            .banner-jaki-clm{
                background: linear-gradient(89.53deg, #1C5DDC 0.12%, #4383FF 108.35%);
                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
                border-radius: 10px;
                padding: 20px 20px;
            }
            
            #detail_ppkm .card-body{
                font-size: 18px !important;
            }

        }
        @media (max-width: 360px) {
            .collapse {
                max-height: 500px;
                overflow-y: auto;
            }
            .modal-bg-img {
                height: 330px !important;
            }

            #detail_ppkm .card-body{
                font-size: 18px !important;
            }

        }

        .column-foo{
            float: left;
            width: 33.33%;
            padding:24px 12px 12px 12px;
        }
        .card-custom{
            background-color:#0351B5;
            border-radius:12px;
            box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }
        .card-custom-2{
            color: white;
            width: 100%;
            background: linear-gradient(254.66deg, #0255BF -2.12%, #0C173B 96.72%);
            border-radius:12px;
            box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }
        .melindungi-diri{
            padding-top:16px;
            padding-bottom:12px;
        }
        .self-assesment {
            color: black;
            width: 100%;
            background: #FBFBFB;
        }
        .reduce-opacity:hover{
            opacity: 0.5;
        }
        .cat-faq{
            padding-top:20px;
            box-shadow:none;
            font-weight: 600;
            list-style: none;
            padding-inline-start: 0px;
        }
        .custom-button-faq {
            text-align: left;
            color: #007bff;
            padding:12px 16px;
            width: 100%;
            white-space:pre-wrap;
            background-color: #fff;
            box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.5);
            color: black;
            font-size: 20px;
        }
        .custom-button-faq:hover {
            color: white;
            background-color: #2656B8;
        }
        .nav-faq{
            color: #000000;
            font-size: 16px;
            background-color: #ffffff;
        }
        .nav-faq:hover{
            color: #ffffff;
            font-size: 16px;
            background-color: #2656B8;
        }
        .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
            color: #ffffff;
            font-size: 16px;
            background-color: #2656B8;
        }
        .white-link:link, .white-link:hover, .white-link:visited, .white-link:active{
            color: #ffffff;
        }
        .button-cari {
            padding: .375rem 1.75rem;
            border-radius: 4px;
            background-color: #1C5DDC;
            color: #ffffff;
            border: none;
        }
        .button-ksbb {
            padding: 5px 34.5px;
            border-radius: 4px;
            background-color: #FFE738;
            color: #1C5DDC;
            border: none;
            white-space:pre-wrap;
            align-self: center;
        }
        .card-shadow{
            border:none;
            box-shadow: 0px 4px 10px rgba(142, 142, 142, 0.25);
        }
        .header-bg-ksbb {
            color: white;
            width: 100%;
            background: linear-gradient(105.31deg, #0351B5 37.11%, #4AB6FF 93.5%);
        }
        .card-text-white{
            color:#ffffff;
            border:none;
            text-align:left;
        }
        .border-radius-bawah{
            border-bottom-right-radius: 8px;
            border-bottom-left-radius: 8px;
        }
        .donasi-sec-one {
            background-image: url('<?= base_url() ?>assets/web/img/peta-lokasi.png');
            background-repeat: no-repeat;
            background-size: cover;
            color: #fff;
            width: 100%;
        }
        .donasi-sec-two {
            background-image: url('<?= base_url() ?>assets/web/img/bg-paket-bantuan.png');
            background-repeat: no-repeat;
            background-size: cover;
            width: 100%;
        }
        .donasi-sec-three {
            background-image: url('<?= base_url() ?>assets/web/img/form-kolaborasi-1.png');
            background-repeat: no-repeat;
            background-size: cover;
            height: auto;
            max-width: 100%;
            background-position: center;
        }
        .raise2:hover {
            box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.5);
        }
        .btn-modal-ksbb{
            padding: 5px 34.5px;
            border-radius: 4px;
            background-color: #1C5DDC;
            color: #ffffff;
            border: none;
            white-space:pre-wrap;
        }
        .bg-info {
            background-image: url('/img/logo/bg-info.png');
            background-repeat: no-repeat;
            background-size: cover;
            /* color: white; */
            width: 100%;
            background-position: center;
        }
        .table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
            background-color: #1C5DDC;
            color: #ffffff;
        }
        .donasi-sec-four {
            background-image: url('<?= base_url() ?>assets/web/img/bg-sec-four.png');
            background-repeat: no-repeat;
            background-size: cover;
            /* color: white; */
            width: 100%;
        }
        .admin-contact {
            background-image: url('<?= base_url() ?>assets/web/img/bg-contact-admin.png');
            background-repeat: no-repeat;
            background-size: cover;
            /* color: white; */
            width: 100%;
            padding-top:100px;
            padding-bottom:100px;
            /* height: 380px; */
        }
        .only-shadow {
            box-shadow: 0px 4px 10px rgba(142, 142, 142, 0.25);
        }
        .button-unduh {
            padding: 5px 34.5px;
            border-radius: 4px;
            background-color: #1C5DDC;
            color: #ffffff;
            /* border: 1px solid #1C5DDC; */
            white-space:pre-wrap;
        }
        .button-unduh:hover, .button-unduh:visited {
            color: #ffffff;
        }
        .table th{
            background-color: #1C5DDC;
            color: #ffffff;
        }
        .black-link:link, .black-link:visited{
            color: rgba(0,0,0,.7);
        }
        .black-link:hover{
            color: #000000;
            text-decoration: none;
        }
        .more {
            overflow: hidden;
        }
        .modal-bg {
            color: white;
            width: 100%;
            background: linear-gradient(152.98deg, #1C5DDC 15.38%, #5381DD 81.61%);
            border-radius: 12px;
            border: 10px solid #ffffff;
        }
        .perizinan-sec-one {
            background: linear-gradient(360deg, #F1F7FF -2.7%, rgba(255, 255, 255, 0) 97.3%);
            background-repeat: no-repeat;
            background-size: cover;
            /* color: white; */
            width: 100%;
        }
        .perizinan-sec-two {
            /* color: white; */
            width: 100%; 
            padding-bottom:70px;
            background: #1C5DDC;
        }
        .perizinan-sec-three {
            background-image: url('<?= base_url() ?>assets/web/img/perizinan-sec-three.png');
            background-repeat: no-repeat;
            background-size: cover;
            height: auto;
            max-width: 100%;
            background-position: center;
        }
        .perizinan-sec-four {
            background: linear-gradient(180deg, #F3F8FF 0%, rgba(243, 248, 255, 0) 100%);
            /* transform: matrix(1, 0, 0, -1, 0, 0); */
            background-repeat: no-repeat;
            background-size: cover;
            /* color: white; */
            width: 100%;
        }
        .kolaborator-sec-one {
            background: #FCFDFF;
            /* transform: matrix(1, 0, 0, -1, 0, 0); */
            background-repeat: no-repeat;
            background-size: cover;
            /* color: white; */
            width: 100%;
        }
        .bansos-sec-one {
            background-image: url('<?= base_url() ?>assets/web/img/bg-bansos.svg');
            background-repeat: no-repeat;
            background-size: cover;
            /* height: auto; */
            max-width: 100%;
            /* background-position: center; */
        }
        .bansos-jdwl {
            background-image: url('<?= base_url() ?>assets/web/img/bg-jdwl-penyaluran.svg');
            background-repeat: no-repeat;
            background-size: cover;
            /* height: auto; */
            max-width: 100%;
            /* background-position: center; */
        }
        
        .btn-mdl-jaki-ios{
            position: absolute;
            /* background-color: #FFE738; */
            border: none;
            white-space:pre-wrap;
            align-self: center;
        }
        .btn-modal-jaki.active.focus, .btn-modal-jaki.active:focus,
        .btn-modal-jaki.focus, .btn-modal-jaki:active.focus, 
        .btn-modal-jaki:active:focus, .btn-modal-jaki:focus {
            outline: none;
            box-shadow: none;
        }
        ul.list-sikm {
            list-style-image: url('<?= base_url() ?>assets/web/img/checlist-1.png');
        }
        .btn-mdl-jaki{
            position: absolute;
            /* background-color: #000; */
            border: none;
            white-space:pre-wrap;
            align-self: center;
        }
        .btn-modal-jaki-ios.active.focus, .btn-modal-jaki-ios.active:focus,
        .btn-modal-jaki-ios.focus, .btn-modal-jaki-ios:active.focus, 
        .btn-modal-jaki-ios:active:focus, .btn-modal-jaki-ios:focus {
            outline: none;
            box-shadow: none;
        }
        .btn-jaki{
            position: absolute;
            /* background-color: #FFE738; */
            border: none;
            white-space:pre-wrap;
            align-self: center;
        }
        
        .btn-jaki.active.focus, .btn-jaki.active:focus,
        .btn-jaki.focus, .btn-jaki:active.focus, 
        .btn-jaki:active:focus, .btn-jaki:focus {
            outline: none;
            box-shadow: none;
        }
        .btn-jaki-ios{
            position: absolute;
            /* background-color: #000; */
            border: none;
            white-space:pre-wrap;
            align-self: center;
        }
        .btn-jaki-ios.active.focus, .btn-jaki-ios.active:focus,
        .btn-jaki-ios.focus, .btn-jaki-ios:active.focus, 
        .btn-jaki-ios:active:focus, .btn-jaki-ios:focus {
            outline: none;
            box-shadow: none;
        }
        .oval {
            font-size: 1rem;
            font-weight: bold;
            height: 2rem;
            width: auto;
            color: #1C5DDC;
            background-color: #FAF8F8;
            border-radius: 14px;
            display: inline-block;
        }
        .circle {
            font-size: 1.2rem !important;
            height: 2rem;
            width: 2rem;
            color: #fff;
            background-color: #1C5DDC;
            border-radius: 50%;
            display: inline-block;
        }
        .banner-sikm{
            background-size: 100% 100%;
        }
        ul.syarat-sikm {
            list-style-image: url('<?= base_url() ?>assets/web/img/checklist-3.png');
        }
        .perizinan-sec-five {
            background: linear-gradient(0deg, rgba(244, 249, 254, 0.01) 13.55%, #F4F9FE 40.84%, rgba(246, 251, 254, 0) 100%);
            background-repeat: no-repeat;
            background-size: cover;
            /* color: white; */
            width: 100%;
        }
        .btn-skill3{
            padding: 10px 34.5px;
            border-radius: 10px;
            /* background-color: rgba(28, 93, 220, 0.05); */
            background-color: #FFA438;
            font-weight: bold;
            color: #fff;
            border-color: #FFA438;
            white-space:pre-wrap;
            align-self: center;
        }
        .btn-skill3:hover{
            color: #fff;
        }
        .peta-ksbb {
            background: linear-gradient(180deg, #F3F8FF 0%, rgba(243, 248, 255, 0) 100%);
            background-image: url('<?= base_url() ?>assets/web/img/spreading2.png'); 
            background-repeat: no-repeat;
            background-size: cover;
            width: 100%;
        }
        .card-header-clm{
            background-color: #fff;
            border-radius: 20px;
            border-bottom:none !important;
        }
        .btn-card-clm, .btn-card-clm.active.focus, .btn-card-clm.active:focus,
        .btn-card-clm.focus, .btn-card-clm:active.focus, 
        .btn-card-clm:active:focus, .btn-card-clm:focus {
            outline: none;
            box-shadow: none;
            background: #fff;
            white-space: normal;
        }
        .banner-jaki-clm{
            background-size: 100% 100%;
        }

        .title-blue{
            color: #1C5DDC;
            background: #1C5DDC;
            -webkit-text-stroke: 1px #fff;
            z-index: 1;
        }
        .title-shadow {
            color: #fff;
            font-weight: bold;
            font-size: 50px;
            opacity: 0.5;
            -webkit-text-stroke: 1px #000;
        }
        .button-lihat, .button-lihat:hover {
            padding: 6px 34.5px;
            border-radius: 5px;
            background-color: #1C5DDC;
            color: #fff;
            border: none;
            white-space:pre-wrap;
            align-self: center;
        }
        .bg-grey {
            width: 100%;
            background: linear-gradient(180deg, rgba(252, 252, 252, 0) 0%, rgba(252, 252, 252, 0.24) 10.18%, rgba(252, 252, 252, 0.65) 28.26%, rgba(245, 245, 245, 0.75) 79.83%, rgba(245, 245, 245, 0) 100%);
        }
        .bg-ksbb {
            width: 100%; 
            background-image: url('<?= base_url() ?>assets/web/img/bg-blue-wave.svg');
            background-repeat: no-repeat;
            background-size: cover;
            width: 50%;            
        }
        .bg-blue {
            width: 100%;
            background: linear-gradient(180deg, rgba(244, 251, 254, 0.35) 0%, #F4FBFE 46.88%, rgba(253, 253, 253, 0.58) 92.41%);        
        }        
        .parallax {
            height: 400px;
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .banner-list-article {
            background-image: url('<?= base_url() ?>assets/web/img/bg-article.svg');
            background-repeat: no-repeat;
            background-size: cover;
            color: white;
            background-position: center;
            height: 380px;
        }
        .btn-follow{
            border: 2px solid #1C5DDC;
            background-color: white;
            color: #1C5DDC;
            padding: 8px 18px;
            font-size: 16px;
            cursor: pointer;
        }
        .btn-follow:hover{
            background-color: #1C5DDC;
            color: #fff;
        }
        .back-to-top {
            background-color: #1C5DDC;
            padding: 8px 16px;
            cursor: pointer;
            position: fixed;
            bottom: 80px;
            right: 20px;
            display:none;
            z-index: 10;
        }
        .back-to-top.active.focus, .back-to-top.active:focus,
        .back-to-top.focus, .back-to-top:active.focus, 
        .back-to-top:active:focus, .back-to-top:focus {
            outline: none;
            box-shadow: none;
        }
        .bg-ksbb-kampung{
            background-image: url('<?= base_url() ?>assets/web/img/bg-ksbb-kampung.svg');
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            width: 100%;
        }
        .title-article {
            -webkit-line-clamp: 2;
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
        #pointer {
        width: 200px;
        height: 40px;
        position: relative;
        background: red;
        }
        #pointer:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 0;
        border-left: 20px solid white;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        }
        #pointer:before {
        content: "";
        position: absolute;
        right: -20px;
        bottom: 0;
        width: 0;
        height: 0;
        border-left: 20px solid red;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        }
        .arrowOne{
            background-image: url('<?= base_url() ?>assets/web/img/arrow-1.svg');
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            width: 100%;
            color: #fff;
        }
        .bg-ksbb-pendidikan{
            background-image: url('<?= base_url() ?>assets/web/img/bg-pendidikan.svg');
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            width: 100%;
            color: #fff;
        }
        .arrowTwo{
            background-image: url('<?= base_url() ?>assets/web/img/arrow-2.svg');
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            width: 100%;
            color: #fff;
        }
        .ksbb-kampung{
            background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
        }
        .dot {
            height: 12px;
            width: 12px;
            border-radius: 50%;
            display: inline-block;
        }
        .donasi-bg{
            background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
        }
        #gawai {
            padding-top: 100px;
        }
        #gawai p{
            font-size: 17px;
        }
        #informasi-pendidikan li{
            font-size: 18px;
            line-height: 35px;
        }
        .paket-gawai{
            color: #fff;
            font-size: 20px;
            height: 60px;
            justify-content: center;
            text-align: center;
            border-radius: 5px;
            border: none;
        }
        #cg-blue, #cg-orange{
            border-radius: 10px;
            border: none;
            height: 500px;
        }
        #cg-blue .card-header{
            color: #326EDD;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            background: #fff;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border: none;
        }
        #cg-orange .card-header{
            color: #F38F36;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            background: #fff;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border: none;
        }
        #cg-spec{
            font-size: 13px;
        }
        #cg-note-blue{
            color: #05286C;
            background-color: #E4F4FF;
        }
        #cg-note-orange{
            color: #6C3605;
            background-color: #FFF8E4;
        }
        #cg-note-blue, #cg-note-orange{
            justify-content: center;
            padding-left: 16px;
            border-radius: 5px;
            border:none;
        }
        #jg-blue .card {
            background-color: #F4F8FF;
            border: none;
            min-height: 170px;
            border-radius: 10px;
            } 
        #jg-blue hr {
            height: 7px;
            width: 43px;
            background: rgba(50, 110, 221, 0.7);
            border-radius: 100px;
        }
        #jg-blue h3 {
            font-size: 25px;
            color: #326EDD;
        }
        #jg-blue p {
            font-size: 15px;
            color: rgba(17, 34, 79, 0.75);
        }
        #jg-orange .card {
            background-color:#FFFAF5;
            border: none;
            min-height: 170px;
            border-radius: 10px;
            } 
        #jg-orange hr {
            height: 7px;
            width: 43px;
            background: rgba(237, 142, 58, 0.7);
            border-radius: 100px;
        }
        #jg-orange h3 {
            font-size: 25px;
            color: #E78C3B;
        }
        #jg-orange p {
            font-size: 15px;
            color:#986B41;
        }
        .slide-jakpreneur .card {
            height: 113px;
            width: 265px;
            justify-content: center; 
            border:none;
            border-radius: 5px;
        }
        #desc-artikel img{
            max-width: 100%;
            height: auto;
        }
        .ylw-link:link, .ylw-link:hover, .ylw-link:visited, .ylw-link:active{
            color: #FFCA5D;
        }
        .bg-riset {
            background-image: url('<?= base_url() ?>assets/web/img/bg-riset.svg');
            background-repeat: no-repeat;
            background-size: cover;
            color: white;
            background-position: center;
            height: 400px;
        }
        .cat-riset{
            background-color: #fff;
            color: #686868;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
            border-radius: 5px;
            border: none !important;
            margin: 0 24px 24px 0;
            padding:0.5em 1em;
        }
        .cat-riset.active.focus, .cat-riset.active:focus,
        .cat-riset.focus, .cat-riset:active.focus, 
        .cat-riset:active:focus, .cat-riset:focus {
            outline: none;
            box-shadow: none;
        }
        #title-riset h1{
            font-size: 40px;
            padding-top: 100px;
        }
        #title-riset p{
            font-size: 25px;
            color:#959595;
            padding-top:30px;
            padding-bottom:100px;
        }        
        #abstrak{
            background: rgba(32, 93, 212, 0.03);
            padding: 30px 30px;            
        }
        #abstrak, #author, #dl-file, #kajian-sejenis > h3{
            font-size: 30px;
        }
        #abstrak p{
            font-size: 17px;            
        }
        #author, #kajian-sejenis{
            padding: 50px 30px;
        }
        #author h6{
            font-size: 17px;
            font-weight: bold;
        }
        #author p{
            font-size: 15px;
        }
        .image-container {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        #dl-file, #link-riset{
            padding: 0 30px;
        }
        .dl-publication {
            color: #fff;
            background-color: #205DD4;
            border-radius: 5px;
            width: 210px;
            height: 52px;            
            line-height: 52px;            
            border: none;
            white-space:pre-wrap;
            text-align: center;
            padding: 0 0;
        }
        .dl-publication:link, .dl-publication:visited, .dl-publication:active{
            color: #fff;
            border-radius: 5px;
        }
        .dl-publication:hover{
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
        }
        .dl-publication.active.focus, .dl-publication.active:focus,
        .dl-publication.focus, .dl-publication:active.focus, 
        .dl-publication:active:focus, .dl-publication:focus {
            outline: none;
            box-shadow: none;
        }
        #cat-riset{
            padding: 50px 0 16px 30px;
        }
        .bg-vaksin{
            background-image: url('<?= base_url() ?>assets/web/img/bg-vaksinasi.svg');
            min-width: 100%;
            height: 614px;
            position: absolute;
            padding-bottom: 0px;
        }
        .bg-vaksin-2{
            background: #f3f8ff;
            min-width: 100%;
            height: 300px;
            position: absolute;
            padding-bottom: 0px;
        }
        .bg-vaksin-3{
            background-image: url('<?= base_url() ?>assets/web/img/img-vaksin-blue-2.svg');
            min-width: 100%;
            height: auto;
            position: absolute;
            padding-bottom: 0px;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .btn-dftr-vaksin {
            font-size: 15px;
            padding: 12px 50px;
            border-radius: 4px;
            background-color: #FFE738;
            color: #1C5DDC;
            border: none;
            white-space:pre-wrap;
            align-self: center;
            text-decoration: none !important;
        }
        .btn-arrow-vaksin{
            font-size: 15px;
            border-radius: 5px;
            padding: 10px 30px;
            text-decoration: none !important;
            border-color: #1C5DDC;
            color: #1C5DDC;
            white-space: pre-wrap;
            align-self: center;
            border: 2px solid !important;
            border-color: #1C5DDC !important;

        }
        .c-vaksin{
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            padding: 28px;
        }
        .c-vaksin-2{
            height: 86px;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
        }
        #blue-text > p > span{
            color: #1954C7;
            font-weight: 600;
        }
        #label-vaksin > span{
            font-weight: 600;
        }
        .center-img{
            display: inherit;
            vertical-align: middle;
        }
        .active-slide{
            background: #000000;
            background-color: #007bff;
        }
        .bg-atm-beras{
            background: url('<?= base_url() ?>assets/web/img/particle.svg') no-repeat right, linear-gradient(180deg, #FFFFFF -1.33%, #F5F9FF 98.67%);
            min-width: 100%;
            padding-bottom: 80px;
        }

        .bg-particle {
            background-image: url('<?= base_url() ?>assets/web/img/bg-isolasi.svg');
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            width: 100%;
            color: #fff;
        }
        .blue-box {
            color: #4B6AAA;
            background: rgba(32, 93, 212, 0.03) !important;
            border: 1px solid #E1EBFF;
            border-radius: 10px;
            padding: 3rem;
        }
        .bg-hotline{
            background-image: url('<?= base_url() ?>assets/web/img/bg-hotline.svg');
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            width: 100%;
            min-height: 443px;
        }
        .blue-text-hotline{
            color: #133C8D;
            font-weight: bold;
        }
        #desc-hotline p {
            line-height: 35px;
            margin-bottom: 30px;
        }
        #contact-hotline .card{
            min-height: 230px;
            padding-top:20px;
            border-radius: 15px;
        }
        #contact-hotline p {
            margin-bottom: 0;
        }
        #contact-hotline a:hover{
            text-decoration: none !important;
            font-size: 17px;
        }
        #contact-hotline .card-footer{
            border-radius: 0 0 15px 15px;
        }
        #kategori-aduan .col-8{
            font-size: 22px;
        }
        .info-card{
            border: 2px dashed #c6d8fb;
            border-radius:20px;
            background: #EEF8FF;
        }
        #info-aduan p{
            color:#13419B;
            font-size:20px;
        }
        .presisi{
            background: linear-gradient(180deg, rgba(244, 251, 254, 0.1) 0%, #F2FBFF 13.76%, rgba(240, 250, 255, 0.92) 77.8%, rgba(253, 253, 253, 0.58) 92.41%);
        }
        .hotline-quotes{
            color: #1443A0;
            line-height: 48px;
        }
        .hotline-red-quote{
            color: #C52A31;
            font-size: 24px;
            font-weight: bold;
        }
        #mekanisme-hotline-tab .nav-pills,  #mekanisme-hotline-tab .nav-link{
            background-color: #2D68DD;
            color: #fff;
            font-size: 1.2em;
            font-weight: bold;
            padding: 1.4rem;
            clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
        }
        #mekanisme-hotline-tab .nav-pills,  #mekanisme-hotline-tab .nav-link:not(.active){
            background-color: #fff;
            color: #000;
            font-size: 1.2em;
            font-weight: normal;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        }
        #mekanisme-hotline-tabContent .card{
            border: 1px solid #B9CFF9;
            border-radius: 15px;
            padding: 3rem 2rem;
        }
        #kirim-aduan{
            color: #fff;
            background: linear-gradient(93.76deg, #2662DA 28.75%, #4A82F2 77.25%);
            padding: 5rem 3rem;
            margin: 100px 0;  
        }
        #kirim-aduan p{
            color: #FBFF47;
            font-size: 22px;
            font-weight: bold;
        }
        #kirim-aduan span{
            font-size: 22px;
        }
        #kirim-aduan img{
            position: absolute;
            bottom: -120px;
            text-align: center;
        }
        #tanggap-aduan .card{
            border: 2px dashed #c6d8fb;
            border-radius:20px;
            padding: 2rem 1rem;
            position: relative;
        }
        #tanggap-aduan ol{
            padding-inline-start: 20px;
        }
        #tanggap-aduan p{
            font-weight: bold; 
            background-color: #fff;
            position: absolute; 
            top: -12px; 
            left: 50px; 
            z-index: 2;
            padding: 0 1rem;
        }
        .banner-vaksin {
            background-image: url('/img/vaksin/banner-vaksin.svg');
            background-repeat: no-repeat;
            background-size: cover;
            color: #fff;
            min-height: 360px;
            
        }
        ul.list-syarat-vaksin{
            list-style-image: url('/img/vaksin/check-vaksin-1.svg');
            font-size: 17px;
            line-height: 30px;
            padding-left: 27px;
        }
        ul.list-catatan {
            list-style: none;
        }
        ul.list-catatan > li::before{
            content: "\2022";
            color: rgba(5, 40, 108, 0.5);
            font-weight: bold;
            display: inline-block;
            width: 0.7em;
            font-size:20pt;
            margin-left: -0.7em;
        }
        .blue-head{
            color: #1C5DDC;
        }
        .card-notes{
            border-left-color: #5685E1 !important;
            border-left-width:10px !important;
            border-radius: 10px;
            background: #FFFFFF;
            border: 1px solid rgba(86, 133, 225, 0.4);
        }
        .syarat-desktop{
            padding: 3rem;
            font-size: x-large;
            line-height: 2.2rem;
        }
        #table-vaccine table th {
            color: #1F4EAB;
            font-weight: 700;
        }
        #table-vaccine table td[bold] {
            font-weight: bold;
        }
        #table-vaccine table tr{
            line-height: 2em;
        }
        #tb-sinovac td:nth-child(2),
        #tb-pfizer td:nth-child(2),
        #tb-moderna td:nth-child(2),
        #tb-astra td:nth-child(2){
            border-left: 2px solid #fff;
        }
        #table-vaccine th, #table-vaccine td {
            padding: 0.2em 1em;
        }
        #tb-sinovac table tr:nth-child(odd){
            background-color: #ECF1FF;
        }
        #tb-sinovac table tr:nth-child(even){
            background-color: #F6F9FF;
        }
        #tb-pfizer table tr:nth-child(odd){
            background-color: #FFFBDA;
        }
        #tb-pfizer table tr:nth-child(even){
            background-color: #FFFEF3;
        }
        #tb-moderna table tr:nth-child(odd){
            background-color: #E5FFF0;
        }
        #tb-moderna table tr:nth-child(even){
            background-color: #F5FFF9;
        }
        #tb-astra table tr:nth-child(odd){
            background-color: #FFEFEF;
        }
        #tb-astra table tr:nth-child(even){
            background-color: #FFFBFB;
        }
        .hide-scroll{
            width: 400px;
            height: 2rem;
            overflow: hidden;
        }
        .content-scroll{
            height: 100%;
            margin-bottom: -50px; /* maximum width of scrollbar */
            padding-bottom: 50px; /* maximum width of scrollbar */
            margin-right: -50px; /* maximum width of scrollbar */
            padding-right: 50px; /* maximum width of scrollbar */
            overflow: scroll;
        }
        .content-scroll .card {
            white-space: nowrap;
            margin-right: 2rem;
        }
        .gg-arrow-long-right {
            box-sizing: border-box;
            position: relative;
            display: block;
            transform: scale(var(--ggs,1));
            border-top: 2px solid transparent;
            border-bottom: 2px solid transparent;
            box-shadow: inset 0 0 0 2px;
            width: 100%;
            height: 6px;
            color:#1C5DDC;
            margin: 0.3em 0; 
        }
        .gg-arrow-long-right::after {
            content: "";
            display: block;
            box-sizing: border-box;
            position: absolute;
            width: 7px;
            height: 7px;
            border-top: 2px solid #1C5DDC;
            border-right: 2px solid #1C5DDC;
            transform: rotate(45deg);
            right: 0;
            bottom: -2px;
        }
        #tata-cara-vaksin{
            color:  #1C5DDC;
            font-weight: 800;
        }
        #tata-cara-vaksin .card{
            border: none !important;
            background-color: #EDF3FB;
            border-radius: 15px;
            padding: 1.2rem;
            width: auto;
            min-height: 138px;
        }
        #tata-cara-vaksin h3 {
            padding-top: 1.4rem;
        }
        #tata-cara-vaksin img {
            height: 100px;
        }
        .wrap-procedure{
            max-height: 400px;
        }
        .wrap-sub {
            min-height: 4em;
        }
        #video-vaccine .font-weight-light{
            font-size: 48px;
        }
        #effect-vaccine .card{
            border-radius: 15px;
            padding: 1.8rem;
            border: none !important;
        }
        #effect-vaccine ul, #effect-vaccine li {
            padding-inline-start: 1rem;
            line-height: 1.5em;
            font-weight: bold;
            margin:1em 0;
        }
        .styled-faq .btn-link i.fa {    
            position: absolute;
            right: 30px;
            font-size: 170%;
            display: none;
            top: 20px;
        }
        .styled-faq .btn-link[aria-expanded=true] i.fa.fa-angle-down {
            display:  block;
        }
        .styled-faq .btn-link[aria-expanded=false] i.fa.fa-angle-right {
            display: block;
        }
        .styled-faq {
            min-height: 282px;
            margin-top: 20px;
        }
        .styled-faq .card .card-header .btn-link{
            color: #1C5DDC;
            display: block;
            text-align: left;
            font-weight: 900;
            white-space: normal;
        }
        .styled-faq .card-header {
            border: 4px solid #70A9FF;
            box-sizing: border-box;
            box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
            border-radius: 15px;
            background-color: #fff;
            text-decoration: none !important;
        }
        .styled-faq .card{
            border-radius: 15px;
            margin: 1.2em 0;
            border: 1px solid #70A9FF !important;
        }
        .styled-faq .btn-link:hover, .btn-link:focus {
            text-decoration: none;
        }
        ul.no-bullets {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .card-faq{
            border-radius: 8px;
            padding: 1rem;
        }
        .btn-vaccine{
            color: #263238;
            background-color: #FFE609;
            border-color: none;
            font-size:9px;
            border-radius: 15px;
            padding: 1em 1.3em;
            font-weight: bold;
            white-space: normal;
        }
        .black-text{
            font-size: 0.8em;
            color: #263238 !important;
            padding-top: 1em;
        }
        #table-lg-vaccine tr{
            line-height: 2em;
        }
        #table-lg-vaccine tr th{
            color: #1F4EAB;
            font-size: 16px;
        }
        #table-lg-vaccine tr td{
            font-size: 15px;
        }
        #table-lg-vaccine tr:nth-child(2){
            background-color: #ECF1FF;
        }
        #table-lg-vaccine tr:nth-child(3){
            background-color: #F6F9FF;
        }
        #table-lg-vaccine tr:nth-child(4){
            background-color: #FFFBDA;
        }
        #table-lg-vaccine tr:nth-child(5){
            background-color: #FFFEF3;
        }
        #table-lg-vaccine tr:nth-child(6){
            background-color: #E5FFF0;
        }
        #table-lg-vaccine tr:nth-child(7){
            background-color: #F5FFF9;
        }
        #table-lg-vaccine tr:nth-child(8){
            background-color: #FFEFEF;
        }
        #table-lg-vaccine tr:nth-child(9){
            background-color: #FFFBFB;
        }
        /* #gpr-kominfo-widget-container{
            min-width: 300px !important;
            max-width: 500px !important;
            height: auto;
            margin: 1rem 0;
        } */
        .gpr-kominfo{
            min-width: 300px !important;
            max-width: 500px !important;
            height: auto;
            margin: 1rem 0;
        }
        .header-ppkm{
            color:#fff;
            padding: 50px 0;
            background: linear-gradient(180deg, #1454D1 0%, #316BDC 89.95%);
        }
        .header-ppkm p {
            font-size: 20px;
        }

        .header-ppkm .d-lg-none{
            text-align: center;
        }

        #disclaimer_ppkm, #aturan_ppkm, #enam_m_ppkm{
            padding: 50px 0;
        }

        #disclaimer_ppkm .card {
            background-color: #FFFCDD;
            border-radius: 20px;
            color: color: rgba(5, 40, 108, 0.8);
            font-size: 18px;
            border: none !important;
        }

        #select_subsector {
            background-color: #F2F6FF;
            border-radius: 10px;
            padding: 50px 0;
        }

        #select_subsector p {
            font-size: 20px;
        }

        #select_subsector h3,
        #select_subsector .select2-container--default,
        #select_subsector .select2-selection--single,        
        #select_subsector .select2-selection__rendered {
            color: #1C5DDC;
            font-size: 28px;
            font-weight: bold;
            line-height: 40px;
        }

        #select_subsector .select2-container,
        #select_subsector .select2-selection--single {
            height: 46px;
        }
        #select_subsector .select2-selection__arrow{
            color: #1C5DDC;
            height: 40px;
            padding-right: 30px;
        }
        #aturan_ppkm {
            background: linear-gradient(180deg, #FFFFFF 16.53%, #EFF6FF 100%);
        }

        #detail_ppkm .card-header{
            min-height: 16vh;
            padding-top: 5vh;
        }

        #detail_ppkm .card-body{
            color: #36941F; 
            font-size: 30px;
            font-weight: bold;
        }

        #catatan_ppkm{
            padding: 50px 0 0 0;
        }

        #catatan_ppkm .card{
            border: 1px solid rgba(86, 133, 225, 0.4);
            border-radius: 10px;
            border-left: 5px solid #5685E1 !important;
        }

        #dl_ppkm .card{
            border: 1px dashed rgba(86, 133, 225, 0.4);
            border-radius: 10px;
        }

        #dl_ppkm img{
            padding-bottom: 6px;
        }

        .btn-ppkm {
            border-radius: 12.88px;
            background-color: #1C5DDC;
            color: #fff;
            padding: 6px 28px;
        }

        #dl-ppkm-jaki {
            color: #fff;
            background: linear-gradient(93.76deg, #2662DA 28.75%, #4A82F2 77.25%);
        }

        #not-allowed-wrapper {
            background : #FFB5B5;
            border-radius: 10px;
            padding: 20px 10px;
        }


        /* Style frame center */
        .frame-center {
            display: table;
            margin: 0 auto;
            width: 100%;
        }

        .height-frame {
            height: 800px;
        }

        @media  only screen and (min-width: 1024px) {
            .frame-center {
                width: 72%;
            }

            .height-frame {
                height: 2200px;
            }
        }
    </style>