@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Roboto&display=swap');

body{
	font-family: 'Roboto', sans-serif;
	margin: 0 !important;
	padding: 0 !important;
	background-color: #F3F3F3;
}

body::-webkit-scrollbar{
    display: none;
}

.navbar-brand img{
	max-width: none;
	height: auto;
	object-fit: contain;
}

.navbar-nav a{
	color: #212121;
}

.btn-login a{
	color: #0080C5;
	border: 1px solid #0080C5;
	padding-left: 20px;
	padding-right: 20px;
}

.btn-login a:hover{
	color: white;
	background-color: #0080C5;
	padding-left: 20px;
	padding-right: 20px;
}

/*Jumbotron*/
#jumbotron img{
	width: 100%;
	height: auto;
	vertical-align: middle;
}
/*Jumbotron*/

/*Formulir Permohonan*/
.formulir{
	background-color: white;
	border-radius: 10px;
}

.title-form h4,h5{
	font-family: 'Lato', sans-serif;
}

.title-form h5{
	color: #0080C5;
}

.title-form hr{
	width: 60%; 
	margin: 0 20% 0 20%;
}

.formulir a{
	color: #212121;
	text-decoration: none;
}
/*Formulir Permohonan*/

/*Kegiatan*/
.kegiatan{
	background-color: white;
}

.list-kegiatan{
	width: 100%;
}

.title-kegiatan h4,h5{
	font-family: 'Lato', sans-serif;
}

.list-kegiatan .hover-body:hover{
	background-color: #94D9FF;
	cursor: pointer;
}

.list-kegiatan .card{
	border-color: #006399;
}

.list-kegiatan .card img{
	width: 100% !important;
	height: 13vw !important;
	object-fit: cover !important;
}

.list-kegiatan .card .card-title{
	color: #006399;
	font-weight: bold;
}

.list-kegiatan .btn-primary{
	color: #006399;
	background-color: #61C8FF;
	font-size: 13px;
	border: none;
}

.list-kegiatan .date-status{
	color: #006399;
	font-size: 13px;
}

.btn-outline-primary{
	color: #0080C5;
	border: 1px solid #0080C5;
	padding-left: 20px;
	padding-right: 20px;
}

.btn-outline-primary:hover{
	color: white;
	background-color: #0080C5;
	padding-left: 20px;
	padding-right: 20px;
}
/*Kegiatan*/

/* modal kegiatan */
.modal-title{
	color: #006399;
	font-weight: bold;
}

.modal-body i,.ket-acara,.ket-kategori{
	color: #006399;
}

.modal-body .ket-kategori,.ket-acara{
	margin-top: -10px;
}

.modal-body ul{
	padding-left: 0px;
}

.modal-body li{
	list-style-type: none;
	font-size: 14px;
}

.modal-body .btn-primary{
	color: #006399;
	background-color: #61C8FF;
	font-size: 13px;
	border: none;
}

.modal-footer .btn-secondary{
	color: #61C8FF;
	background-color: #006399;
	border: none;
}
/* modal kegiatan */

/*Pusat Unduhan*/
/* .title-unduh::before{
	content: "";
	background-image: url("../img/bg-unduh.jpg");
	background-size: cover;
    position: absolute;
	opacity: 0.75;
} */

.title-unduh, .title-informasi, .title-gratifikasi, .title-peraturan, .title-panduan, .title-faq, .title-pengajuan{
	background-color: #004266;
	margin-bottom: 20px;
}

.title-unduh p, .title-informasi p, .title-gratifikasi p, .title-peraturan p, .title-panduan p, .title-faq p, .title-pengajuan p{
	font-family: 'Lato', sans-serif;
	font-weight: bold;
	color: white;
}

.list-unduh{
	background-color: white;
}

.list-unduh img{
	width: 50%;
	padding: 10px;
}

.list-unduh .card{
	border-color: #006399;
}

.list-unduh .thumb-img{
	margin: 10px;
	border-radius: 10px;
	text-align: center;
	background-color: #F3F3F3;
}

.list-unduh .card-title{
	color: #006399;
	font-weight: bold;
}

.list-unduh .btn-primary{
	color: #0080C5;
	border: 1px solid #006399;
	padding-left: 20px;
	padding-right: 20px;
}

.list-unduh .btn-outline-primary:hover{
	color: white;
	background-color: #006399;
	padding-left: 20px;
	padding-right: 20px;
}

.pagination li{
	border: none;
}

.pagination {
    border-style: none !important;
}
/*Pusat Unduhan*/

/* Kategori */
.isi-kategori h3, .isi-peraturan h3, .isi-panduan h3, .isi-faq h3{
	color: #0080C5;
	font-weight: bold;
}

.isi-kategori hr, .isi-peraturan hr, .isi-panduan hr, .isi-faq hr{
	width: 10%; 
	margin: 0 45% 0 45%;
}

.isi-kategori .card-header{
	background-color: #006399;
	color: white;
	font-weight: bold;
	margin-bottom: 5px;
}

.isi-kategori .card-header h5{
	margin-bottom: 0px;
}

.isi-kategori .card-text p, li{
	text-align: justify;
}
/* Kategori */

/* faq */
.accordion-button{
	color: #006399;
}

.accordion-button:link, .accordion-button:visited, .accordion-button:hover, .accordion-button:active  {
	background-color: #006399 !important;
	color:white !important;
	text-decoration: none !important;
	border: hidden !important;
	border-color: #FFF !important;
	box-shadow: 0px !important;
}

.accordion-button:not(.collapsed)::after {
	transform: rotate(180deg)
}

.accordion-button:not(.collapsed) {
	color: white  !important;
	background-color: #006399 !important;
}

.accordion-body{
	text-align: justify;
}
/* faq */

/* Peraturan Kategori */
.isi-peraturan table, .isi-panduan table{
	width: 80%;
}
/* Peraturan Kategori */

/* Wilayah */
.wilayah h4{
	color: #006399;
	font-weight: bold;
}

/*wilayah*/
.title-wilayah h4{
	color: #024C5A;
	text-align: center;
}

#wilayah .carousel-inner{
    padding: 1em;
}

#wilayah .card{
	width: fit-content;
	border: none;
	text-align: center;
}

#wilayah .card .card-body img{
	height: 150px;
	width: auto;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}

#wilayah .card .card-body{
	background-color: #F3F3F3;
}

#wilayah .card .card-body a{
	text-decoration: none;
}

#wilayah .card .card-body a:hover .card-title{
	color: #006399;
	font-weight: bold;
}

#wilayah .card-title{
	color: #0080C5;
	font-weight: 500;
}
/* Wilayah */

/* Permohonan Informasi */
#informasi .btn-outline-primary{
	border-color: #006399;
}

#informasi .col-md-12 label, #pengajuan-keberatan .col-md-12 label{
	font-weight: bold;
	color: #006399;
}

#informasi textarea, #pengajuan-keberatan textarea{
	border-color: #006399;
	padding: 10px;
	border-radius: 5px;
}

#informasi textarea:focus, #pengajuan-keberatan textarea:focus{
	border-color: #009E9D !important;
	outline: none;
}

#informasi .input-formnya, #informasi textarea, #pengajuan-keberatan .input-formnya, #pengajuan-keberatan textarea{
	width: 100%;
}

#informasi .input-formnya, #pengajuan-keberatan .input-formnya{
	border-radius: 5px;
	padding: 10px;
    border: 1px solid #006399;
    transition: border-color 0.3s ease;
}

#informasi .input-formnya:focus, #pengajuan-keberatan .input-formnya:focus {
    border-color: #009E9D; /* Change this to the desired color */
    outline: none; /* Optional: Remove the default focus outline */
}
/* Permohonan Informasi */

/* Pengajuan Keberatan */
#pengajuan-keberatan .title-alasan{
	color: #006399;
	font-weight: bold;
}

/* #pengajuan-keberatan .form-check .form-check-input:checked ~, .form-check-input::before{
	background-color: #006399;
} */
/* Pengajuan Keberatan */

/*Footer*/
#footer{
	background-color: #94D9FF;
}

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

#footer p{
	font-family: 'Lato', sans-serif !important;
	color: #004266;
}

#footer ul{
	padding-left: 0px;
}

#footer li{
	font-family: 'Lato', sans-serif !important;
	list-style-type: none;
	color: #004266;
	font-size: 13px;
	margin-bottom: 10px;
}

#footer li a{
	font-family: 'Lato', sans-serif !important;
	text-decoration: none;
	color: #004266;
}

#footer li i{
	color: #004266;
}

#footer li a:hover{
	color: #001E2E;
}
/*Footer*/

@media (min-width: 992px) {
	#wilayah .carousel-inner {
	  display: flex;
	}
	#wilayah .carousel-item {
	  margin-right: 0;
	  flex: 0 0 33.333333%;
	  display: block;
	}
  }

/* =========================================
   CUSTOM CSS DROPDOWN HOVER (Anti-Error)
   ========================================= */
.custom-dropdown-hover {
    position: relative;
}

.custom-dropdown-hover .dropdown-menu {
    display: none; /* Sembunyikan secara default */
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 220px;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    padding: 8px 0;
    margin-top: 0;
    list-style: none;
}

/* Tampilkan menu saat di-hover */
.custom-dropdown-hover:hover > .dropdown-menu {
    display: block;
    animation: fadeIn 0.2s ease-in;
}

.custom-dropdown-hover .dropdown-menu a {
    display: block;
    padding: 8px 16px;
    color: #1e293b;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}

.custom-dropdown-hover .dropdown-menu a:hover {
    background-color: #f1f5f9;
    color: #0284c7;
}

.custom-dropdown-hover.dropdown-right .dropdown-menu {
    left: auto;
    right: 0;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}