/* 
Main CSS Bakamla RI Website
Create by F
Date : May 5, 2021
========================== 
*/

/* offcanvas-menu **************************/

:root {
	--invert: 0;
	--sepia: 0;
	--saturate: 0;
	--hueRotate: 1turn;
	--brightness: 2;
}

body{
  background-color: #F4F4F4;
}
body:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  z-index: 0;
  -webkit-transition: all .3s;
  transition: all .3s;
}
body.offcanvas:before {
	opacity: 1;
	z-index: 1999;
}
.mt-3rem{
  margin-top: 3rem;
}

.mt-15px{
  margin-top: 15px;
}

a{
  outline: 0 !important;
  color: #34568c;
}

a:hover{
  color: #203d6d;
}

.dashed-line{
  margin-top: 15px;
  margin-bottom: 15px;
  border-top: 1px dashed #ddd;
}

/* ******************************************************** */

/* Sidemenu **************************/
#main-wrapper{
  transition: margin-right .5s;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 0;
  background-color: #8b9dc3;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 20px;
  text-decoration: none;
  font-size: 20px;
  /*color: #e3e0e0;*/
  color: #FFF;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
	/*color: #c03333;*/
	color: yellow;
}

.sidenav a.closebtn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 31px;
  margin-left: 50px;
  background-color: #3b5998;
  border-radius: 60px;
  width: 50px;
  height: 50px;
  padding: 0px 5px 10px 5px;
  text-align: center;
}

/*.sidenav a.closebtn:hover{
  background-color: #9c2626;
}*/

@media screen and (max-height: 450px) {
	.karya-ilmiah-link{
		color: #fff;
		text-decoration: none;
		/*margin-top: 50px;
		border: 1px solid #000;*/
	}
	.pengurus-nama{
		margin-bottom: 10px;
		color: #333;
		font-size: 1.0rem;
		text-align: center;
	}
	.sidenav {padding-top: 15px;}
	.sidenav a {font-size: 18px;}

	.carousel-caption {
		/*top: 50%;
		transform: translateY(-50%);
		width: 50%;*/
		left: 3%;
		right: 8%;
		/*bottom: 0;*/
		padding: 1px 0px 0px 0px;
		width: 95%;
	}

	.piblikasi-cal-month{
		background-color: cdcdcd;
		max-width: 90%;
		width: 100%;
	}
	
	.info-list-panel .thumbnail-list{
		padding: 4px;
		/*line-height: 1.42857143;*/
		line-height: 2;
		background-color: #fff;
		/*border: 1px solid #ddd;*/
		border-radius: 4px;
		-webkit-transition: border .2s ease-in-out;
		-o-transition: border .2s ease-in-out;
		transition: border .2s ease-in-out;
		justify-content: center;
		display: flex;
	}
	.info-list-panel .thumbnail-list img{
		display: block;
		/*max-width: 100%;
		height: auto;*/
		margin-left: auto;
		margin-right: auto;
		width: 50px;
	}
}

.sidenav ul.components {
  padding: 20px 0;
}

.sidenav ul p {
  color: #fff;
  padding: 10px;
}

.sidenav ul li a {
  padding: 10px;
  /*font-size: 1em;*/
  font-size: 0.9em;
  display: block;
  border-bottom: 1px solid rgba(0, 0, 0, 0.16);
  font-weight:600;
}

.sidenav ul li a:hover {
  color: yellow;
  border-left: 4px solid #c03333;
  padding-left: 18px;
  background-color: rgba(0, 0, 0, 0.16);
}

.sidenav ul li.active>a,
a[aria-expanded="true"] {
  color: #fff;
  border-left: 4px solid yellow;
  padding-left: 18px;
}

.sidenav ul li.active>a{
  /*color: #fff;*/
  color: yellow;
  border-left: 4px solid yellow;
  padding-left: 18px;
  background-color: #3b5998;
}

a[data-toggle="collapse"] {
  position: relative;
}

.sidenav .dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.sidenav ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;
  background: #2c3136;
}

.sidenav ul.CTAs {
  padding: 20px;
}

.sidenav ul.CTAs a {
  text-align: center;
  font-size: 0.9em !important;
  display: block;
  border-radius: 5px;
  margin-bottom: 5px;
}

.sidenav a.download {
  background: #fff;
  color: #c03333;
}

.sidenav a.article,
.sidenav a.article:hover {
  background: #c03333 !important;
  color: #fff !important;
}

.highcharts-xaxis-labels tspan {
	font-size: 8px;
}

/* sidenav menus */
.navbar-expand-md .navbar-toggler{
	display:block;
}
/*.navbar-expand-md .navbar-collapse{
	display:none;
}*/
/* /sidenav menus */

/* Pengaduan Masyarakat */
.pengaduan{
	background-color:#fff3cd;
	height:100%;
	/*justify-content:center;*/
	display:flex;
}
.pengaduan .pengaduan-align-self-center{
	text-align:center !important;
	/*margin-top:1.5rem !important;*/
	margin:auto;
}
.pengaduan .pengaduan-text-white{
	color: #856404;
}
/* /Pengaduan Masyarakat */

/* Layanan Mandiri */
.layanan-mandiri{
	background-color:#8b9dc3;
}
.layanan-mandiri .align-self-center{
	text-align:center !important;
	margin-top:1.5rem !important;
}
.layanan-mandiri .logo-img-loader{
	width:100px;
	margin:0 auto;
	position:relative;
}
.layanan-mandiri img{
	width:100%;
	min-height:100%;
	opacity:0.3;
	vertical-align:middle;
	border-style:none;
}
/* /Layanan Mandiri */

/* Data Penduduk */
.data-penduduk{
	background-color:#8b9dc3;
	text-align:center;
	color:#ffffff !important;
}
.data-penduduk .fa-2x{
	font-size:4em;
	padding-top:15px;
}
.data-penduduk .fa{
	display:inline-block;
}
/* /Data Penduduk */

/* Publikasi */
.piblikasi-list-panel{  
	padding: 10px 22px;
	border-bottom: 1px solid #ddd;
	margin-bottom: 15px;
}

.piblikasi-list{
	margin: 0px 0px 0px -15px;
}

.piblikasi-list-panel .piblikasi-thumbnail-list{
	background-color: #fff;
	border-radius: 4px;
	-webkit-transition: border .2s ease-in-out;
	-o-transition: border .2s ease-in-out;
	transition: border .2s ease-in-out;
}

.piblikasi-list-panel .piblikasi-thumbnail-list img{
	display: block;
	max-width: 100%;
	width: 40%;
	margin-left: auto;
	margin-right: auto;
}
.piblikasi-list-panel .piblikasi-list-date{
	font-size: 1.2rem;
	/*margin-bottom: 5px;*/
	color: #525252;
	font-weight: 600;
}
.piblikasi-list-panel .piblikasi-list-date li{
	display: block;
}
.piblikasi-list-panel .piblikasi-cal-month{
	background: green;
	text-align: center;
	/*width: 100%;
	max-width: 55%;*/
}
.piblikasi-list-panel .piblikasi-caldate{
	color: #FFFFFF;
	font-size: 25px;
	font-weight: 200;
}
.piblikasi-list-panel .piblikasi-calday{
	color: #ffd2a3;
	font-size: 14px;
	font-weight: 400;
	padding: 3px 0;
	/*text-transform: uppercase;*/
}
.piblikasi-list-panel .piblikasi-list-title{
  font-size: 1rem;
  width: 100%;
  text-overflow: ellipsis;
}
.piblikasi-list-panel .btn{
  padding: 2px 12px;
  font-size: 0.8rem;
}

.piblikasi-list-panel:last-child{
  border-bottom: none;
}
/* /Publikasi */

/* Event */
.event-info-list-panel{  
	padding: 10px 22px;
	border-bottom: 1px solid #ddd;
	margin-bottom: 15px;
}

.event-info-list-panel .event-thumbnail-list{
	background-color: #fff;
	border-radius: 4px;
	-webkit-transition: border .2s ease-in-out;
	-o-transition: border .2s ease-in-out;
	transition: border .2s ease-in-out;
}

.event-info-list-panel .event-thumbnail-list img{
	display: block;
	max-width: 100%;
	width: 40%;
	margin-left: auto;
	margin-right: auto;
}

.event-info-list-panel .event-cal-month{
	background: green;
	text-align: center;
	/*width: 100%;
	max-width: 55%;*/
}
.event-info-list-panel .event-caldate{
	color: #FFFFFF;
	font-size: 25px;
	font-weight: 200;
}
.event-info-list-panel .event-calday{
	color: #ffd2a3;
	font-size: 14px;
	font-weight: 400;
	padding: 3px 0;
	/*text-transform: uppercase;*/
}
.event-info-list-panel .event-list-date{
  font-size: 10pt;
  margin-bottom: 5px;
  color: #525252;
}

.event-info-list-panel .event-list{
	margin: 0px 0px 0px -15px;
	padding-top: 20px;
}
.event-info-list-panel .event-list-title{
  font-size: 1em;
  width: 100%;
  /*overflow: hidden;*/
  text-overflow: ellipsis;
  /*white-space: nowrap;*/
}

.event-info-list-panel .btn{
  padding: 2px 12px;
  font-size: 0.8rem;
}

.event-cal-month{
	background: green;
	text-align: center;
	/*width: 100%;
	max-width: 55%;*/
}
.event-caldate{
	color: #FFFFFF;
	font-size: 25px;
	font-weight: 200;
}
.event-calday{
	color: #ffd2a3;
	font-size: 14px;
	font-weight: 400;
	padding: 3px 0;
	/*text-transform: uppercase;*/
}
.event{
	padding: 30px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.event .event-title{
	font-size: 20px;
	font-weight: 700;
	padding: 0 0 0 0;
	margin: 0 0 15px 0;
	color: #32627b;
	position: relative;
}

.event .event-item {
    margin-bottom: 30px;
}

.event .event-list li a:hover {
  background-color: #eee;
  text-decoration: none;
}

.event .event-list li a:before{
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #333;
  margin: 7px 0 0 -9px;
  position: absolute;
}
.event-heading-primary{
	color: #34568c;
	font-size: 1.2rem;
	padding-left: 10px;
	padding-bottom: 5px;
	border-left: 2px solid #d92324;
}
/* /Event */

/* Mandatory */
.mandatory{
	color:red;
}
/* /Mandatory */

/* Event Terbaru */
.event-baru-info-list-panel{
  padding: 10px 22px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 15px;
}

.event-baru-info-list-panel .event-baru-thumbnail-list{
	background-color: #fff;
	border-radius: 4px;
	-webkit-transition: border .2s ease-in-out;
	-o-transition: border .2s ease-in-out;
	transition: border .2s ease-in-out;
}

.event-baru-info-list-panel .event-baru-thumbnail-list img{
	display: block;
	max-width: 100%;
	width: 40%;
	margin-left: auto;
	margin-right: auto;
}

.event-baru-info-list-panel .event-baru-list-date{
  font-size: 10pt;
  margin-bottom: 5px;
  color: #525252;
}

.event-baru-info-list-panel .event-baru-list{
	margin: 0px 0px 0px -15px;
	padding-top: 20px;
}
.event-baru-info-list-panel .event-baru-list-title{
  font-size: 1em;
  width: 100%;
  /*overflow: hidden;*/
  text-overflow: ellipsis;
  /*white-space: nowrap;*/
}

.event-baru-info-list-panel .btn{
  padding: 2px 12px;
  font-size: 0.8rem;
}

.event-baru-cal-month{
	background: green;
	text-align: center;
	/*width: 100%;
	max-width: 55%;*/
}
.event-baru-caldate{
	color: #FFFFFF;
	font-size: 25px;
	font-weight: 200;
}
.event-baru-calday{
	color: #ffd2a3;
	font-size: 14px;
	font-weight: 400;
	padding: 3px 0;
	/*text-transform: uppercase;*/
}
.event-baru{
	padding: 30px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.event-baru .event-baru-title{
	font-size: 20px;
	font-weight: 700;
	padding: 0 0 0 0;
	margin: 0 0 15px 0;
	color: #32627b;
	position: relative;
}

.event-baru .event-baru-item {
    margin-bottom: 30px;
}

.event-detail.post-item{
	padding-bottom: 5px;
}

.event-baru .event-baru-list li a:hover {
  background-color: #eee;
  text-decoration: none;
}

.event-baru .event-baru-list li a:before{
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #333;
  margin: 7px 0 0 -9px;
  position: absolute;
}
.event-baru-heading-primary{
	color: #34568c;
	font-size: 1.2rem;
	padding-left: 10px;
	padding-bottom: 5px;
	border-left: 2px solid #d92324;
}
/* /Event Terbaru */

/* Sticky Bar */
/* ========== */

.sticky-bar{
  position: sticky;
  position: -webkit-sticky;
  top: -1px;
}
/*sticky header position*/
.sticky.is-sticky {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;
  width: 100%;
}

.mt-min5{
  margin-top: -5px;
}

/* 
===========
Navbar Menu  
===========
*/
.top-header{
  padding: 5px;
  background-color: #8b9dc3;
  border-bottom: 1px solid #ddd;
}

.top-header .address{
  font-size: 0.8rem;
  color: #ffffff;
}

.top-header .call-center{
  margin-right: 10px;
  font-size: 0.8rem;
  color: #ffffff;
}

.top-header .call-center a:hover{
  text-decoration: none;
}

.top-header .lang-swither{
  font-size: 0.8rem;
  font-weight: 600;
}

.top-header .lang-swither .lang-flag{
  width: 20px;
  margin-top: -4px;
}

.top-header .lang-swither .english-lang{
  padding: 0px 5px;
  padding-right: 0px;
}

.top-header .lang-swither .english-lang a:hover{
  text-decoration: none;
  color: #D92324;
}

.top-header .lang-swither .indonesia-lang{
  padding: 0px 5px;
  border-right: 1px solid rgb(183, 183, 183);
}

.top-header .lang-swither .indonesia-lang a:hover{
  text-decoration: none;
  color: #D92324;
}

.top-header .lang-swither .indonesia-lang .lang-flag{
  margin-top: -2px;
}

.top-header .lang-swither .active a{
  color: #D92324;
}

.navbar{
  transition: all .5s ease 0s;
  border-radius: 0 !important;
}

.navbar-expand-md .navbar-nav span{
  display: block;
  padding: .5rem .3rem;
  color: rgba(0,0,0,.5);
}

.navbar-expand-md .navbar-nav .nav-link {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

#navigation-bar .navbar-nav li a{
  position: relative;
}

#navigation-bar .navbar-nav .navbar-dropdown a{
  border-bottom: 1px solid #f4f4f4;
}

#navigation-bar .navbar-nav .navbar-dropdown a:last-child{
  border-bottom: 0;
}

#navigation-bar .navbar-nav li.active .nav-link::after{
  content: "";
  background-color: #dc3545;
  height: 4px;
  position: absolute;
  width: 100%;
  bottom: 0px;
  left: 0px;
}
#navigation-bar .navbar-nav .nav-link:hover, #navigation-bar .navbar-nav .nav-link:focus {
  color:#dc3545;
  background: #fff;
}


#navigation-bar .navbar-nav .dropdown.show .nav-link {
  color:#dc3545;
  background: #fff;
}

.navbar-dropdown{
  top: 35px; 
  padding: 5px;
  border: none;
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.05);
  font-size: 14px;
  border-radius: 0 4px 4px;
}

.navbar-dropdown .dropdown-item {
  display: block;
  width: 100%;
  padding: 5px 15px;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  
}

.navbar-dropdown .dropdown-item:focus, .dropdown-item:hover {
  color: #16181b;
  text-decoration: none;
  background-color: #e1e2e3;
}

.navbar.bg-navy{
  background-color: #3b5998;
}

.navbar-bakamla .navbar-nav .active>.nav-link, .navbar-bakamla .navbar-nav .nav-link.active, .navbar-bakamla .navbar-nav .nav-link.show, .navbar-bakamla .navbar-nav .show>.nav-link {
  color: #fff;
}

.navbar-bakamla .navbar-nav .nav-link {
    color: rgba(255,255,255,.8);
}

.navbar-brand{
  color: #333;
}

.navbar-brand:hover{
  color: rgb(68, 68, 68);
}

.navbar-brand .img-brand{
  margin-right: 10px;
}

.navbar-brand .label-brand{
  line-height: 1.2;
  font-size: 1rem;
}

.navbar-brand .title-header-tiga{
  line-height: 1.2;
  font-size: 0.8rem;
}

.bakamla-slogan{
  text-align: right;
  display: inline-block;
  width: 100%;
  font-style: italic;
  font-size: 0.9rem;
  position: relative;
}

#header-nav{
  position: relative;
  background-color: #fff;
  /*background-image: url("../assets/img/logo/header.png");*/
}

#header-nav:before{
  content: "";
  position: absolute;
  top: 0;
  right: 90px;
  width: 35px;
  height: 100%;
  background-color: green;
  transform: skewX(-45deg);
  z-index: 0;
}

#header-nav:after{
  content: "";
  position: absolute;
  top: 0;
  right: 50px;
  width: 25px;
  height: 100%;
  background-color: yellow;
  transform: skewX(-45deg);
  z-index: 0;
}

.navbar-toggler {
  background-color: rgba(255, 255, 255, 0.85);;
  color: rgba(0,0,0,.5);
  border-color: rgba(0,0,0,.1);
  z-index: 999;
}

.navbar-toggler .navbar-toggler-icon{
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* 
===============
End Navbar Menu
=============== 
*/


.text-desc{
  padding: 5px;
  text-align: center;
  color: rgba(0,0,0,.5);
  transition: all .3s ease-in-out
}
.box{
  transition: all .3s ease-in-out
}

.box img{
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2;
  -ms-transition-animation-duration: 2s;
}


.slider-panel{
  margin-top: 20px;
  margin-bottom: 15px;
}

/* Carousel */
/* ======== */

.carousel-indicators{
	top: 340px;
}

.carousel {
  /*margin-bottom: 20px;*/
  background-color: #8b9dc3;
  align-self: center;
}

.carousel-inner{
  /*height: 340px;*/
  height: 450px;
}

.carousel-fade .carousel-item {
  height: 100%;
}

.carousel-fade .carousel-item img{
  width: 100%;
}

.carousel-fade .carousel-item:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
}

.carousel-caption {
  /*top: 50%;
  transform: translateY(-50%);
  width: 50%;*/
  left: 3%;
  right: 8%;
  /*bottom: 0;*/
  padding: 1px 0px 0px 0px;
  width: 95%;
}

.carousel-control-prev {
  justify-content: flex-start;
  padding-left: 15px;
}

.carousel-control-next{
  justify-content: flex-end;
  padding-right: 15px;
}

.carousel-control-next, .carousel-control-prev {
  width: 6%;
}

.carousel-caption p {
  font-size: 1rem !important;
}

.submenu{
  padding: 10px 20px;
  background-color: #DE3241;
  display: inline-block;
  border-radius: 50px;
  color: #fff;
}

.submenu::before{
  content: "";
  background-color: #dc3545;
  height: 2px;
  position: absolute;
  width: 40%;
  bottom: 19px;
  right: 0px;
  z-index: -1;
}

.submenu::after{
  content: "";
  background-color: #dc3545;
  height: 2px;
  position: absolute;
  width: 40%;
  bottom: 19px;
  left: 0px;
  z-index: -1;
}

.icon-desc{
  margin-bottom: 15px;
}

.icon-desc img{
  display: inline-block;
  width: 50px;
  height: 55px;
  margin-top: -25px;
}

.icon-desc p{
  display: inline-block;
  margin-bottom: 0px;
  margin-top: 15px;
  text-align: left;
}

/* Footer 
=============== */
.footer{
  background-color: #3b5998;
  color: #fff;
  position: absolute;
  width: 100%;
  padding: 20px 20px;
  padding-bottom: 40px;
  margin-top: 20px;
}

.footer .footer-content p{
  margin-bottom: 0px;
  font-size: 0.8rem;
  font-weight: normal;
}

.footer .footer-content p.bakamla-summary{
  padding-bottom: 10px;
  font-size: 0.9rem;
}

.footer .footer-content{
  margin: 10px auto;
}

.footer .footer-content a{
  color: #9ba9b7
}

.footer .footer-content a:hover{
  color: #d0dfef;
  text-decoration: none;
}

.footer-content .footer-menu p.footer-menu-title{
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.19);
  padding-bottom: 7px;
}
.footer-content .footer-menu ul.footer-menu-list{
  margin: 0px;
  padding: 0px;
  border: none;
  list-style-type: none;
}
.footer-content .footer-menu ul.footer-menu-list li:last-child{
  margin-bottom: 10px;
}
.footer-content .footer-menu ul.footer-menu-list li a{
  color: #9ba9b7;
  font-size: .7rem;
}
.footer-content .footer-menu ul.footer-menu-list li a:hover{
  color: #d0dfef;
  text-decoration: none;
}

.footer-content .footer-menu ul.footer-socialmedia{
  margin: 10px 0px;
  padding: 0px;
  overflow: hidden;
  list-style-type: none;
}

.footer-content .footer-menu ul.footer-socialmedia li{
  float: left;
  margin-right: 10px;
}

.footer-content .footer-menu ul.footer-socialmedia li a{
  color: #253144;
  font-size: 1.2rem;
  display: block;
  padding: 2px 5px;
  background-color: #9ba9b7;
  text-align: center;
  border-radius: 3px;
  width: 35px;
}

.footer-content .footer-menu ul.footer-socialmedia li a:hover{
  background-color: #d0dfef;
}

.footer-content hr{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  border: 0;
  border-top: 1px dotted rgba(255, 255, 255, 0.19);
}

.footer-content .marker-address .fas{
  color: yellow;
}

.footer-content .address{
  color: yellow;
  padding-left: 19px;
}

.footer-copyright{
  background-color: #8b9dc3;
  color: #fff;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  padding: 5px 0px;
}

.footer-copyright p{
  color: black;
  font-size: 0.7rem;
  margin-bottom: 0px;
}

.btn-disable {
  color: rgba(99, 147, 245, 0.6) !important;
  background-color: rgba(34, 92, 210, 0.55) !important;
  border-color: rgba(34, 92, 210, 0.55) !important;
  pointer-events: none;
}

.btn-danger-disable {
    color: rgba(245, 99, 99, 0.6) !important;
    background-color: rgba(210, 34, 34, 0.55) !important;
    border-color: rgba(210, 34, 34, 0.55) !important;
    pointer-events: none;
}

/* gallery slide widget */
.img-g-slider{
  overflow: hidden;
  height: 350px !important;
  border-radius: 3px;
}
.img-g-slider img{
  margin-top:-10%;
}
#gallerySlider img{
  width: 100%;
  border-radius: 3px;
}

.nav-g-slider{
  line-height: 30px;
  position: absolute;
  top: 57px;
  right: 22px;
}

.nav-g-slider .nav-g-btn{
  margin: 8px auto;
  display: table;
}

.nav-g-slider .nav-g-btn a{
  padding: 10px;
  background-color: rgba(66, 66, 66, 0.8);
  color: #fefefe;
}

.nav-g-slider .nav-g-btn a:hover, .nav-g-slider .nav-g-btn a:focus, .nav-g-slider .nav-g-btn a:active{
  background-color: #dc3545;
  color:#fff;
}

section{
  margin-bottom: 20px;
}

.panel-section{
  margin-top: 20px;
}

/* default panel */
.content-panel{
  padding: 15px;
  background-color: #fff;
  margin-bottom: 5px;
  /*margin: 0 -15px 0px 0px !important;*/
  margin-right: -15px;
  margin-left: 0px;
  height: 93%;
}

.content-panel .content-title-panel{
  width: 100%;
  text-align: center;
  padding: 10px 0px;
  padding-top: 0px;
  position: relative;
  height: 1px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

.content-panel .content-title-panel .label-text{
  text-transform: uppercase;
  display: inline-block;
  padding: 0px 20px;
  background-color: #fff;
  transform: translateY(-2px);
}

.content-panel .content-title-panel .label-text b{
  color:#D92324
}

.footer-panel-link{
  color: #333;
  font-size: 0.9rem;
  cursor: pointer;
}

.footer-panel-link:hover{
  text-decoration: none;
}

.grid-link {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
}

.grid-link .img-link-ext {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "img-obj . ."
    "img-obj . .";
  grid-area: 1 / 1 / 2 / 3;
}

.grid-link .img-obj { 
  grid-area: img-obj; 
  overflow: hidden;
}

.grid-link .img-obj img{
  width: 100%;
  object-fit: cover;
  /*height: 160px;*/
  height: 100%;
  transition: all .3s ease-in-out;
}

.caption-link-ext { 
  grid-area: 1 / 2 / 2 / 3; 
  position: relative;
}

.caption-link-ext .icon-extendlink{
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 0.8rem;
  color: #5C6573;
}

.link-external{
  background-color: #253144;
  display: block;
  margin-bottom: 20px;
}

.link-external:hover{
  text-decoration: none;
}

.link-external .caption-link{
  padding: 20px;
  height: 100%;
}

.link-external .caption-link h3{
  color: #fff;
}

.link-external .caption-link p{
  /*color: #9AA7BC;*/
  color: #FFFFFF;
  margin-bottom: 0px;
  font-size: 15px;
}

.link-external:hover .caption-link h3{
  color: rgba(255, 255, 255, 0.8);
}

.link-external:hover .caption-link p{
  color: #8692a7;
}

.link-external:hover .img-obj img{
  transform: scale(1.2);
}

.link-external:hover .caption-link-ext .icon-extendlink{
  color: rgba(255, 255, 255, 0.8);
}

/* news home section */
.news-wrapper {
  margin-bottom: 15px;
  /*border: 1px solid #000;*/
}

.cheaf-wrapper {
  margin-bottom: 15px;
  height: 78%;
  margin: 10px 10px 10px 10px;
}

.news-wrapper .news-img{
  position: relative;
  height: 0;
  padding-bottom: 65%;
  width: 100%;
  background: #f7f7f7;
  overflow: hidden;
  border-radius: 3px;
}

.cheaf-wrapper .news-img{
  position: relative;
  height: 100%;
  padding-bottom: 65%;
  width: 100%;
  background: #f7f7f7;
  overflow: hidden;
  border-radius: 3px;
}

.news-wrapper .news-img img{
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%;
  max-width: 100%;
  transition: transform .3s ease-in-out;
}

.cheaf-wrapper .news-img img{
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%;
  max-width: 100%;
  transition: transform .3s ease-in-out;
}

.news-wrapper .news-title{
  /*font-weight: 600;*/
  font-weight: 15%;
  line-height: 1.3;
  /*padding: 10px 0px;*/
  padding: 10px 0px 30px;
  color: #333;
}

.cheaf-wrapper .news-title{
  /*font-weight: 600;*/
  font-weight: 15%;
  line-height: 1.3;
  /*padding: 10px 0px;*/
  padding: 10px 0px 30px;
  color: white;
  text-align: center;
}

.event-btn-detail{
	float:right;position:absolute;bottom:0;right:0;
	margin-bottom:5px;margin-right:30px;
}

.event-btn-detail a{
	color:#777777;text-transform:uppercase;font-weight:600;font-size:12px;
}

.news-link:hover{
  text-decoration: none;
}

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

.news-link:hover .news-wrapper .news-title{
  color:#29426b
}

/*.col-md-2*/
/*.col-md-2{
	border: 1px solid yellow;
}*/
/*/.col-md-2*/

/*.col-md-3*/
.col-md-3{
	/*margin-top: 10px;*/
	margin-bottom: 0px;
	border-right: 1px dotted;
}

.column-md-3{
	margin-top: 10px;
	margin-bottom: 0px;
	background-color: #8b9dc3;
}

/* Counts */
.counts {
  padding-bottom: 5px;
}
.counts .count-box {
  box-shadow: -10px -5px 40px 0 rgba(0, 0, 0, 0.1);
  padding: 30px;
  width: 100%;
  background-color: #fff !important;
}
.counts .count-box i {
  display: block;
  font-size: 30px;
  color: #3fbbc0;
  float: left;
}
.counts .count-box span {
  font-size: 42px;
  line-height: 24px;
  display: block;
  font-weight: 700;
  color: #555555;
  margin-left: 50px;
}
.counts .count-box p {
  padding: 30px 0 0 0;
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
}
.counts .count-box a {
  font-weight: 600;
  display: block;
  margin-top: 20px;
  color: #7b7b7b;
  font-size: 15px;
  font-family: "Poppins", sans-serif;
  transition: ease-in-out 0.3s;
}
.counts .count-box a:hover {
  color: #3fbbc0;
}
/* /Counts*/

/* gallery section */
.photo-wrapper .photo-img{
  position: relative;
  height: 0;
  padding-bottom: 65%;
  width: 100%;
  background: #f7f7f7;
  overflow: hidden;
  border-radius: 3px;
}

.photo-wrapper .photo-img img{
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%;
  max-width: 100%;
  transition: transform .3s ease-in-out;
}

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

ul[data-bsp-ul-index] {
  padding: 0 0 0 0;
  margin: 0 -15px 0px -15px !important;
}

.bspImgWrapper {
  height: 150px !important;
  border-radius: 3px;
  transition: all .3s ease-in-out;
  background-size: 120% !important;
}

.bspImgWrapper:hover{
  background-size: 140% !important;
}

.bspText {
  color: #333 !important;
  font-size: 1rem !important;
  margin-bottom: 10px;
  padding: 10px 0px !important;
  background: transparent !important;
  font-weight: 600;
  display: none;
} 

.graph-title{
  text-transform: uppercase;
}

.map-wrapper{
	position: relative;
  width: 100%;
  height: 350px;
  margin-bottom: 15px;
}

.map-wrapper #map-kejadian{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #ddd;
}

/* grafik keselamatan dan keamanan */
.grid-kerawanan-keamanan {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px 10px;
  grid-template-areas:
    "illegal-bbm illegal-logging illegal-fishing penyelundupan-barang penyelundupan-narkoba"
    "perampokan human-trafficking penyelundupan-hewan pencurian penyelundupan-miras";
}

.illegal-bbm { 
	grid-area: illegal-bbm; 
	background-color: #fff;
	position: relative;
	cursor: pointer;
  height: 120px;
}
.illegal-logging { 
	grid-area: illegal-logging;
	background-color: #fff;
	position: relative;
	cursor: pointer;
  height: 120px;
}
.illegal-fishing { 
	grid-area: illegal-fishing;
	background-color: #fff;
	position: relative;
	cursor: pointer;
  height: 120px;
}
.penyelundupan-barang { 
	grid-area: penyelundupan-barang;
	background-color: #fff;
	position: relative;
	cursor: pointer;
  height: 120px;
}
.penyelundupan-narkoba { 
	grid-area: penyelundupan-narkoba;
	background-color: #fff;
	position: relative;
	cursor: pointer;
  height: 120px;
}
.perampokan { 
	grid-area: perampokan;
	background-color: #fff;
	position: relative;
	cursor: pointer;
  height: 120px;
}
.human-trafficking { 
	grid-area: human-trafficking;
	background-color: #fff;
	position: relative;
	cursor: pointer;
  height: 120px;
}
.penyelundupan-hewan { 
	grid-area: penyelundupan-hewan;
	background-color: #fff;
	position: relative;
	cursor: pointer;
  height: 120px;
}
.pencurian { 
	grid-area: pencurian;
	background-color: #fff;
	position: relative;
	cursor: pointer;
  height: 120px;
}
.penyelundupan-miras { 
	grid-area: penyelundupan-miras;
	background-color: #fff;
	position: relative;
	cursor: pointer;
  height: 120px;
}

.icon-graph{
	position: absolute;
    right: 10px;
    top: 10px;
    width: 33px;
    height: 33px;
}

.icon-graph.adjust{
	width: 40px;
}

.icon-graph.miras{
	width: 25px;
}

.icon-graph img{
	width: 100%;
}

.graph-value{
	position: absolute;
    left: 0px;
    width: 50%;
    text-align: left;
    padding: 5px 10px;
    font-size: 3.4rem;
    line-height: 1;
    top: 0px;
}

.graph-label{
	position: absolute;
    bottom: 0;
    width: 100%;
    text-align: right;
    padding: 5px 10px;
    font-size: 13px;
}

.illegal-bbm .graph-value{
	color: #77CC22;
}

.illegal-logging .graph-value{
	color: #F5D314;
}

.illegal-fishing .graph-value{
	color: #D92324
}

.penyelundupan-barang .graph-value{
	color: #0FABF0
}

.penyelundupan-narkoba .graph-value{
	color: #D923D2
}

.perampokan .graph-value{
	color: #A08F85
}

.human-trafficking .graph-value{
	color: #23D9CB
}

.penyelundupan-hewan .graph-value{
	color: #D99A23
}

.pencurian .graph-value{
	color: #EA93B8
}

.penyelundupan-miras .graph-value{
	color: #FD6420
}

.illegal-bbm:hover{
	background-color: #77CC22;
  color: #fff
}

.illegal-logging:hover{
	background-color: #F5D314;
  color: #fff
}

.illegal-fishing:hover{
	background-color: #D92324;
  color: #fff
}

.penyelundupan-barang:hover{
	background-color: #0FABF0;
  color: #fff
}

.penyelundupan-narkoba:hover{
	background-color: #D923D2;
  color: #fff
}

.perampokan:hover{
	background-color: #A08F85;
  color: #fff
}

.human-trafficking:hover{
	background-color: #23D9CB;
  color: #fff
}

.penyelundupan-hewan:hover{
	background-color: #D99A23;
  color: #fff
}

.pencurian:hover{
	background-color: #EA93B8;
  color: #fff
}

.penyelundupan-miras:hover{
	background-color: #FD6420;
  color: #fff
}

.illegal-bbm:hover .graph-value, .illegal-logging:hover .graph-value, .illegal-fishing:hover .graph-value, .penyelundupan-barang:hover .graph-value, .penyelundupan-narkoba:hover .graph-value, .perampokan:hover .graph-value, .human-trafficking:hover .graph-value, .penyelundupan-hewan:hover .graph-value, .pencurian:hover .graph-value, .penyelundupan-miras:hover .graph-value {
	color: #fff;
}

.illegal-bbm:hover .icon-graph img, .illegal-logging:hover .icon-graph img, .illegal-fishing:hover .icon-graph img, .penyelundupan-barang:hover .icon-graph img, .penyelundupan-narkoba:hover .icon-graph img, .perampokan:hover .icon-graph img, .human-trafficking:hover .icon-graph img, .penyelundupan-hewan:hover .icon-graph img, .pencurian:hover .icon-graph img, .penyelundupan-miras:hover .icon-graph img {
	filter: invert(var(--invert)) 
          sepia(var(--sepia)) 
          saturate(var(--saturate))
          hue-rotate(var(--hueRotate))
          brightness(var(--brightness));
}

.grid-kerawanan-keselamatan {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px 10px;
  grid-template-areas:
    "terbakar tenggelam terbalik kandas hilang-kontak"
    "terdampar terapung tabrakan . .";
}

.terbakar { 
	grid-area: terbakar;
	background-color: #fff;
	position: relative;
	cursor: pointer;
  height: 120px;
}
.tenggelam { 
	grid-area: tenggelam;
	background-color: #fff;
	position: relative;
	cursor: pointer;
  height: 120px;
}
.terbalik { 
	grid-area: terbalik;
	background-color: #fff;
	position: relative;
	cursor: pointer;
  height: 120px;
}
.kandas { 
	grid-area: kandas;
	background-color: #fff;
	position: relative;
	cursor: pointer;
  height: 120px;
}
.hilang-kontak { 
	grid-area: hilang-kontak;
	background-color: #fff;
	position: relative;
	cursor: pointer;
  height: 120px;
}
.terdampar { 
	grid-area: terdampar;
	background-color: #fff;
	position: relative;
	cursor: pointer;
  height: 120px;
}
.terapung { 
	grid-area: terapung;
	background-color: #fff;
	position: relative;
	cursor: pointer;
  height: 120px;
}
.tabrakan { 
	grid-area: tabrakan;
	background-color: #fff;
	position: relative;
	cursor: pointer;
  height: 120px;
}

.terbakar .graph-value{
	color: #D92324;
}

.tenggelam .graph-value{
	color: #0FABF0;
}

.terbalik .graph-value{
	color: #D923D2
}

.kandas .graph-value{
	color: #A08F85
}

.hilang-kontak .graph-value{
	color: #23D9CB
}

.terdampar .graph-value{
	color: #D99A23
}

.terapung .graph-value{
	color: #77CC22
}

.tabrakan .graph-value{
	color: #F5D314
}

.terbakar:hover{
	background-color: #D92324;
  color: #fff;
}

.tenggelam:hover{
	background-color: #0FABF0;
  color: #fff;
}

.terbalik:hover{
	background-color: #D923D2;
  color: #fff
}

.kandas:hover{
	background-color: #A08F85;
  color: #fff
}

.hilang-kontak:hover{
	background-color: #23D9CB;
  color: #fff
}

.terdampar:hover{
	background-color: #D99A23;
  color: #fff
}

.terapung:hover{
	background-color: #77CC22;
  color: #fff
}

.tabrakan:hover{
	background-color: #F5D314;
  color: #fff
}

.terbakar:hover .graph-value, .tenggelam:hover .graph-value, .terbalik:hover .graph-value, .kandas:hover .graph-value, .hilang-kontak:hover .graph-value, .terdampar:hover .graph-value, .terapung:hover .graph-value, .tabrakan:hover .graph-value {
	color: #fff;
}

.terbakar:hover .icon-graph img, .tenggelam:hover .icon-graph img, .terbalik:hover .icon-graph img, .kandas:hover .icon-graph img, .hilang-kontak:hover .icon-graph img, .terdampar:hover .icon-graph img, .terapung:hover .icon-graph img, .tabrakan:hover .icon-graph img {
	filter: invert(var(--invert)) 
      sepia(var(--sepia)) 
      saturate(var(--saturate))
      hue-rotate(var(--hueRotate))
      brightness(var(--brightness));
}

.slick-initialized .slick-slide {
    outline: 0;
}

.slick-initialized .slick-slide:first-child{
  padding-right: 10px;;
} 

.nav-slider-graph{
  text-align: right;
  margin-top: 10px;
  margin-right: 10px;
}

.nav-slider-graph .btn{
  outline: 0 !important;
  box-shadow: none;
}

.link-shortcut{
  text-align: center;
  color: #333;
  font-size: .8rem;
  transition: all .3s ease-in-out;
  margin-bottom: 10px;
  display: block;
}

.link-shortcut:hover{
  text-decoration: none;
  color: rgb(29, 29, 29);
  font-weight: 600;
}

.link-box{
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px;
  text-align: center;
  transition: all .3s ease-in-out;
}

.link-box .img-link{
  overflow: hidden;
  height: 85px;
  width: 75px;
  display: inline-block;
}

.link-box .img-link img{
  width: 100%;
}

.link-shortcut .link-label{
  padding: 5px;
}

.link-shortcut:hover .link-box{
  border: 1px solid #D92324;
}

.panel-section{
  font-size: 0.9rem;
}

.panel-section ul.visi-misi-list{
  list-style: square;
  padding-left: 20px;
}

.col-img-sidebar{
	overflow: hidden;
	justify-content:center;
	display:flex;
}

.col-img-sidebar img{
	/*width: 100%;*/
	width: 50%;
}

.header-title-page{
  background-color: #fff;
  padding: 15px;
  border-bottom: 1px solid #ddd;
  border-top: 1px dotted #ccc;
}

.header-title-page .label-title{
  font-size: 1.5rem;
  font-weight: 600;
}

.breadcrumb{
  background: none;
  padding: 0px;
  font-size: 0.8rem;
  margin-bottom: 5px;
}

/* Pengurus */
.pengurus-panel{
	list-style: none;
	padding-left: 0px;
}
.pengurus-panel .pengurus-list{
  margin-bottom: 20px;
  border-bottom: 1px dotted #ccc;
  padding-bottom: 15px;
}

.pengurus-panel .pengurus-list:last-child{
  border-bottom: none;
}

.column-pengurus-img{
	justify-content:center;
	display: flex;
}
.pengurus-panel .pengurus-list .pengurus-img{
	overflow: hidden;
	border-radius: 3px;
	max-height: 170px;
	max-width: 80px;
	/*margin-top: 7px;*/
	margin-top: 5px;
	height: 100%;
	width: 100%;
	text-align:center;
	border: 1px solid;
}
.pengurus-panel .pengurus-list .pengurus-img img{
	height: 100%;
	width: 100%;
}
.pengurus-panel .pengurus-list .pengurus-jabatan{
	/*margin-bottom: 10px;*/
	color: #333;
	font-size: 1.2rem;
	font-weight: 600;
}
.pengurus-panel .pengurus-list .pengurus-sub-jabatan{
	/*margin-bottom: 10px;*/
	color: #333;
	font-size: 1.1rem;
	font-weight: 500;
}
.pengurus-panel .pengurus-list .pengurus-nama{
	margin-bottom: 10px;
	color: #333;
	font-size: 1.0rem;
}
/* /Pengurus */

.news-index-panel{
  list-style: none;
  padding-left: 0px;
}

.news-index-panel .news-index-list{
  margin-bottom: 20px;
  border-bottom: 1px dotted #ccc;
  padding-bottom: 15px;
}

.news-index-panel .news-index-list:last-child{
  border-bottom: none;
}

.news-index-panel .news-index-list .media-img{
  overflow: hidden;
  border-radius: 3px;
  max-height: 140px;
  margin-top: 7px;
}

.news-index-panel .news-index-list .media-img img{
  width: 100%;
}

.news-index-panel .news-index-list .news-index-title{
  margin-bottom: 10px;
}

.news-index-panel .news-index-list .news-index-title a{
  color: #333;
  font-size: 1.2rem;
  font-weight: 600;
}

.news-index-panel .news-index-list .news-index-content .news-index-publish-datetime{
  margin-bottom: 10px;
  
}

.news-index-panel .news-index-list .news-index-content .news-index-publish-datetime p{
  color: #34568c;
  font-size: 0.8rem;
  margin-bottom: 0px;
}

.news-index-panel .news-index-list .news-index-content .news-index-publish-datetime .news-index-post-date{
  border-right: 1px solid #ddd;
  padding-right: 10px;
  margin-right: 10px;
}

.news-index-panel .news-index-list .news-index-title a:hover{
  color: #34568c;
  text-decoration: none;
}

.pagination-news-index{
  padding: 15px 0px;
  border-top: 2px solid #ddd;
}

.pagination-news-index .pagination{
  margin-bottom: 0px;
}

.page-item.active .page-link {
    background-color: #5f6d84;
    border-color: #546277;
}
.page-link {
    color: #5874a2;
}

.heading-primary{
  color: #34568c;
  font-size: 1.2rem;
  padding-left: 10px;
  border-left: 2px solid #d92324;
}

.news-index-category{
	/*border: 1px solid #000;*/
	margin-bottom: 15px;
}

.news-index-category .news-index-category-list{
  padding-left: 0;
  margin-bottom: 20px;
  list-style: none;
}

.news-index-category .news-index-category-list li {
    margin: 0;
    padding: 0;
    display: block;
    position: relative;
}

.news-index-category .news-index-category-list li a{
  color: #666;
  font-size: 0.9em;
  padding: 8px 0 8px 18px;
  border-bottom: 1px solid #e0e0e0;
  text-decoration: none;
  line-height: 20px;
  display: block;
}

.news-index-category .news-index-category-list li a:hover {
  background-color: #eee;
  text-decoration: none;
}

.news-index-category .news-index-category-list li a:before{
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #333;
  margin: 7px 0 0 -9px;
  position: absolute;
}

.popular-news-index{
  list-style: none;
  padding-left: 0px;
  padding: 15px;
  border: 1px solid #ddd;
  border-top: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.popular-news-index li{
  margin-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 10px;
}

.popular-news-index li:last-child{
  border-bottom: none;
  padding-bottom: 0px;
}

.popular-news-index li a:hover{
  text-decoration: none;
}

.popular-news-index li a .news-title-popular{
  color: #333;
  margin-bottom: 0px;
  font-weight: 500;
}

.popular-news-index li a:hover .news-title-popular{
  color: #34568c;
  text-decoration: none;
}

.popular-news-index li a .date-news-popular{
  color: #6e6e6e;
  font-size: 0.7rem;
  margin-bottom: 0px;
}

/* === */

.recent-news-index{
  list-style: none;
  padding-left: 0px;
  padding: 15px;
  border: 1px solid #ddd;
  border-top: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.recent-news-index li{
  margin-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 10px;
}

.recent-news-index li:last-child{
  border-bottom: none;
  padding-bottom: 0px;
}

.recent-news-index li a:hover{
  text-decoration: none;
}

.recent-news-index li a .news-title-recent{
  color: #333;
  margin-bottom: 0px;
  font-weight: 500;
}

.recent-news-index li a:hover .news-title-recent{
  color: #34568c;
  text-decoration: none;
}

.recent-news-index li a .date-news-recent{
  color: #6e6e6e;
  font-size: 0.7rem;
  margin-bottom: 0px;
}

.news-blog-title{
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 5px;
}

.news-blog-date-author{
  font-size: 0.8rem;
  margin-bottom: 15px;
  color: #34568c;
}

.news-blog-date-author .date-blog{
  padding-right: 10px;
  margin-right: 10px;
  border-right: 1px solid #ddd;
}

.news-blog-date-author .author-blog{
  padding-right: 10px;
  margin-right: 10px;
  border-right: 1px solid #ddd;
}

.news-blog-img{
  overflow: hidden;
  max-height: 400px;
  border-radius: 3px;
  margin-bottom: 20px;
}

.news-blog-img img{
  width: 100%;
}

/* Karya Ilmiah */
.karya-ilmiah-link{
	color: #fff;
	text-decoration: none;
	margin-top: 50px;
	border: 0px solid #000;
}
.karya-ilmiah-link:hover{
	text-decoration: none;
}
.karya-ilmiah-link .karya-ilmiah-panel{
	border-radius: 3px;
	margin-bottom: 15px;
	text-align: center;
	color: #fff;
	position: relative;
}

.karya-ilmiah-link .karya-ilmiah-panel:before{
	/*content: '';*/
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 3px;
	z-index: 1;
	transition: all .3s ease-in-out;
}

.karya-ilmiah-link .karya-ilmiah-panel .label-karya-ilmiah{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 17px;
	font-weight: 600;
	z-index: 2;
}

.karya-ilmiah-link:hover .karya-ilmiah-panel .img-bg-category img{
	transform: scale(1.1);
}
/* /Karya Ilmiah */

.gallery-category-link{
  color: #fff;
  text-decoration: none;
}

.gallery-category-link:hover{
  text-decoration: none;
}

.gallery-category-link .gallery-category-panel{
  background-color: #ddd;
  border-radius: 3px;
  margin-bottom: 15px;
  text-align: center;
  color: #fff;
  position: relative;
}

.gallery-category-link .gallery-category-panel:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  z-index: 1;
  transition: all .3s ease-in-out;
}

.gallery-category-link .gallery-category-panel .img-bg-category{
  overflow: hidden;
  /*height: 100px;*/
  height: 150px;
  border-radius: 3px;
}

.gallery-category-link .gallery-category-panel .img-bg-category img{
  width: 100%;
  margin-top: -42px;
  transition: all .3s ease-in-out;
}

.gallery-category-link .gallery-category-panel .label-gallery-category{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 17px;
  font-weight: 600;
  z-index: 2;
}

.gallery-category-link:hover .gallery-category-panel .img-bg-category img{
  transform: scale(1.1);
}

.gallery-category-link:hover .gallery-category-panel:before{
	background-color: rgba(36, 80, 152, 0.7)
}

.recent-photo-gallery{
  margin-bottom: 20px !important;
}

.recent-photo-gallery .photo-caption-label{
  padding: 5px 0px !important;
  display: block;
  margin-bottom: 0px;
  font-size: 0.9rem !important;
  font-weight: normal !important;
  width: 100%;
}

.pagination-gallery-index{
  padding: 15px 0px;
  border-top: 2px solid #ddd;
}

.pagination-gallery-index .pagination{
  margin-bottom: 0px;
}

.sub-title-header{
  padding: 5px 10px;
  font-size: 20px;
  border-left: 2px solid #d92324;
  margin-bottom: 20px;
  margin-top: 15px;
}

.nav-address.nav-pills .nav-link.active, .nav-address.nav-pills .show>.nav-link {
  background: rgba(0, 0, 0, 0.03);
  color: #1c355d;
  border-radius: 0px;
  border-left: 3px solid #d92324;
}

.nav-address.nav-pills .nav-link {
    border-radius: 0px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    transition: all .2s ease-in-out;
}

.nav-address .office-address-pill{
  padding-right: 15px;
  position: relative;
  color: #1c355d;
}

.nav-address .office-address-pill:before{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -5px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f054";
  color: #c5c5c5;
}

.nav-address .office-address-pill h4{
  font-size: 17px;
  font-weight: 600;
}

.nav-address .office-address-pill p{
  margin-bottom: 0px;
}

.lhkpn-panel{
  position: relative;
}

.lhkpn-panel .pejabat-photo{
  width: 75px;
  overflow: hidden;
  margin-right: 10px;
  border: 2px solid #fff;
  box-shadow: 0px 2px 5px rgb(51 51 51 / 22%);
  border-radius: 2px;
}

.lhkpn-panel .pejabat-photo img{
  width: 100%;
}

.lhkpn-panel .pejabat-detail .pejabat-name{
  font-size: 17px;
  margin-bottom: 0px;
  font-weight: 600;
  margin-top: 5px;
}

.lhkpn-panel .pejabat-detail .jabatan-pejabat{
  margin-bottom: 5px;
}

.lhkpn-panel:before{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -5px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f054";
  color: #c5c5c5;
}

.pdfobject-container {
  height: 30rem;
  border: 0.5rem solid rgba(0,0,0,.1);
}

/* Transparansi Anggaran */
.transparansi-anggaran-panel-box{
	border: 1px solid #ddd;
	padding: 10px 5px;
	margin-bottom: 20px;
	box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 0.05);
	transition: all .2s ease-in-out;
}
.transparansi-anggaran-panel-box:hover{
	box-shadow: 6px 6px 0px 0px rgba(28, 59, 109, 0.23);
	border-color: #a3abb7;
}

.transparansi-anggaran-panel-box .transparansi-anggaran-icon{
	overflow: hidden;
	width: 85px;
	margin-right: 0px;
}

.transparansi-anggaran-panel-box .transparansi-anggaran-icon img{
	width: 75%;
}
.transparansi-anggaran-panel-box .transparansi-anggaran-desc{
	width: 100%;
}

.transparansi-anggaran-panel-box .transparansi-anggaran-desc .sub-header-title{
	margin-bottom: 0px;
	font-size: 1rem;
	font-weight: 500;
}

.transparansi-anggaran-panel-box .transparansi-anggaran-desc .activity-name{
	width: 145px;
	margin-top: 5px;
	margin-bottom: 10px;
	font-size: 0.7rem;
	overflow: hidden;
	overflow-wrap: break-word;
	height: 40px;
}

.card-header{
	background:none;
}
.media{
	font-size:1em;
	display:flex;
	align-items:flex-start;
}
.icon-40{
	height:50px;
	width:50px;
	line-height:36px;
	vertical-align:middle;
	text-align:center;
	display:inline-block;
}
.icon-circle{
	border-radius:50%;
}
.icon-circle img{
	width:100%;
}
.bg-light-primary{
	background-color:rgba(121, 121, 255, 0.15) !important;
	color:#7979ff;
}
.mr-3, .mx-3{
	margin-right:1rem !important;
}
.material-icons{
	font-size:1.5em;
}
.vm, .material-icons{
	vertical-align:middle;
}
.material-icons{
	font-family:'Material Icons';
	font-weight:normal;
	font-style:normal;
	font-size:24px;
	display:inline-block;
	line-height:1;
	text-transform:none;
	letter-spacing:normal;
	word-wrap:normal;
	white-space:nowrap;
	direction:ltr;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
	-moz-osx-font-smoothing:grayscale;
	font-feature-settings:'liga';
}
.icon-40{
	line-height:36px;
	text-align:center;
}
.bg-light-primary{
	color:#7979ff;
}
/*.mt-2, .my-2{
	margin-top:0.5rem !important;
}*/
/*.media-body small, .small{
	font-size:80%;
	font-weight:400;
}*/
.progress-bar span{
	position:absolute;
	right:20px;
	color:#FFFFFF;
}
.progress-group small{
	font-size:90%;
}
/* /Transparansi Anggaran */

.report-panel-box{
  border: 1px solid #ddd;
  padding: 10px 5px;
  margin-bottom: 20px;
  box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 0.05);
  transition: all .2s ease-in-out;
}

.report-panel-box:hover{
  box-shadow: 6px 6px 0px 0px rgba(28, 59, 109, 0.23);
  border-color: #a3abb7;
}

.report-panel-box .report-icon{
  overflow: hidden;
  width: 85px;
  margin-right: 10px;
}

.report-panel-box .report-icon img{
  width: 100%;
}

.report-panel-box .report-desc{
  width: 100%;
}

.report-panel-box .report-desc .sub-header-title{
  margin-bottom: 0px;
  font-size: 0.8rem;
}

.report-panel-box .report-desc .activity-name{
  width: 145px;
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 1rem;
  overflow: hidden;
  overflow-wrap: break-word;
  height: 40px;
  color: #000000;
}

.filter-panel{
  border-bottom: 2px solid #ddd;
  padding-bottom: 5px;
  margin-bottom: 15px;
}

.filter-panel .page-stat{
  margin-bottom: .5rem;
  text-align: right;
}

.info-list-panel{
  padding: 10px 22px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 15px;
}

.info-list-panel .thumbnail-list{
  padding: 4px;
  /*line-height: 1.42857143;*/
	line-height: 2;
  background-color: #fff;
  /*border: 1px solid #ddd;*/
  border-radius: 4px;
  -webkit-transition: border .2s ease-in-out;
  -o-transition: border .2s ease-in-out;
  transition: border .2s ease-in-out;
  justify-content: center;
  display: flex;
}

.info-list-panel .thumbnail-list img{
  display: block;
  /*max-width: 100%;*/
  width: 75px;
  margin-left: auto;
  margin-right: auto;
}

.info-list-panel .list-date{
  font-size: 10pt;
  margin-bottom: 5px;
  color: #525252;
}

.info-list-panel .list-title{
  font-size: 1rem;
  width: 100%;
  /*overflow: hidden;*/
  text-overflow: ellipsis;
  /*white-space: nowrap;*/
}

.info-list-panel .btn{
  padding: 2px 12px;
  font-size: 0.8rem;
}

.info-list-panel:last-child{
  border-bottom: none;
}

.footer-info-list-panel{
  border-top: 2px solid #ddd;
  margin-top: 10px;
}

.footer-info-list-panel .pagination-index{
  padding: 15px 0px;
}

.footer-info-list-panel .pagination-index .pagination{
  margin-bottom: 0px;
}

/* Table */
.table thead th {
	background-color:#3b5998;
	color:#FFFFFF;
	text-align:center;
}
/* /Table */

.table-ami{
  min-height: 450px;
}

.table-ami .table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
    background: #253144;
    color: #fff;
}

.table-ami table,
.table-ami table .btn,
.table-ami label,
.table-ami .dropdown-item,
.table-ami .paginate_button,
.table-ami .dataTables_info{
  font-size: .8rem !important;
}

.table-ami .dropdown-item .fas{
  margin-right: 7px;
}

/* Responsive CSS */
@media (min-width: 62em) {
	.pengurus-nama{
		margin-bottom: 10px;
		color: #333;
		font-size: 1.0rem;
	}
	.featurette-heading {
		margin-top: 9rem ;
	}
	.col-md-3{
		/*margin-top: 10px;*/
		margin-bottom: 0px;
		border-right: 1px dotted;
	}
	.column-md-3{
		margin-top: 0px;
		margin-bottom: 0px;
		background-color: #8b9dc3;
		padding: 0px;
	}
	.carousel-caption {
		/*top: 50%;
		transform: translateY(-50%);
		width: 50%;*/
		left: 3%;
		right: 8%;
		/*bottom: 0;*/
		padding: 1px 0px 10px 0px;
		width: 95%;
	}
	
	.piblikasi-cal-month{
		/*max-width: 55%;
		width: 100%;*/
	}
	
	.karya-ilmiah-link{
		color: #fff;
		text-decoration: none;
		/*margin-top: 50px;
		border: 1px solid #000;*/
	}

}

/*@media (min-width: 82em) {

	.piblikasi-cal-month{
		max-width: 65%;
		width: 100%;
	}

}*/

@media (max-width: 767px) {
	.event-baru-cal-month{
		max-width: 100%;
	}
	.event-baru-info-list-panel .event-baru-list-title{
		text-align: center;
	}
	.pengurus-nama{
		margin-bottom: 10px;
		color: #333;
		font-size: 1.0rem;
		text-align: center;
	}
	.link-external .caption-link {
		padding: 15px;
		height: 100%;
		font-size: 12px;
	}
	.col-md-3{
		margin-top: 10px;
		border-right: 1px dotted;
	}
	.column-md-3{
		margin-top: 10px;
		margin-left: 15px;
		margin-right: 15px;
	}
	.carousel-caption {
		/*top: 50%;
		transform: translateY(-50%);
		width: 50%;*/
		left: 3%;
		right: 8%;
		/*bottom: 0;*/
		padding: 1px 0px 0px 0px;
		width: 95%;
	}

	.content-panel {
		padding: 25px;
	}

	.news-wrapper .news-img {
		padding-bottom: 55%;
	}
  
	.cheaf-wrapper .news-img {
		padding-bottom: 55%;
	}

	.news-index-category{
		margin-top: 30px;
		border-top: 1px dashed #ddd;
		padding-top: 20px;
	}

	.info-list-panel .thumbnail-list{
		margin-bottom: 10px;
	}

	.piblikasi-cal-month{
		/*background-color: yellow;*/
		max-width: 20%;
		width: 100%;
	}
	
	.info-list-panel .thumbnail-list img{
		display: block;
		max-width: 100%;
		/*width: 100%;*/
		margin-left: auto;
		margin-right: auto;
		width: 100px;
	}
	.karya-ilmiah-link{
		color: #fff;
		text-decoration: none;
		margin-top: 10px;
		border: 0px solid #000;
	}
	.karya-ilmiah-link .karya-ilmiah-panel{
		border-radius: 3px;
		margin-bottom: 15px;
		text-align: center;
		color: #fff;
		position: relative;
	}
	.karya-ilmiah-link .karya-ilmiah-panel img{
		padding: 6px;
	}
	
	.navbar-brand .label-brand{
		line-height: 1.2;
		font-size: 1rem;
	
	}
	.navbar-brand .title-header{
		line-height: 1.2;
		display:none !important;
	}
	.navbar-brand .title-header-dua{
		line-height: 1.2;
		font-size: 0.8rem;
	}
	
	.navbar-brand .title-header-tiga{
		line-height: 1.2;
		font-size: 0.7rem;
	}
	
	.card-header{
		padding-top: 50px;
	}
	.panel-box-transparansi{
		border-bottom: 1px solid #dee2e6 !important;
		padding-bottom:25px;
	}
	
	.col-img-sidebar img{
		/*width: 100%;*/
		width: 25%;
	}
}

/*@media(min-width: 768px){
	.info-list-panel .thumbnail-list{
		padding: 0px;
		line-height: 2;
		background-color: #fff;
		border-radius: 4px;
		-webkit-transition: border .2s ease-in-out;
		-o-transition: border .2s ease-in-out;
		transition: border .2s ease-in-out;
		justify-content: center;
		display: flex;
	}
	.info-list-panel .thumbnail-list img{
		display: block;
		max-width: 100%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}
}*/

@media(min-width: 768px){
	.column-md-3{
		margin-top: 0px;
		margin-bottom: 0px;
		/*background-color: #8b9dc3;*/
		padding: 0px;
	}
}