/* 
success	: background-color: #45d450;
info	: background-color: #02AAD0;
warning	: background-color: #fad839;
danger	: background-color: #fc3933 
orange	: background-color: #ff9600 

*/
::-webkit-scrollbar { 
	/*display: none;*/
	width: 15px; /* remove scrollbar space */
	height: 15px; /* remove scrollbar space */
	background: #f1f1f1; /* optional: just make scrollbar invisible */
}
::-webkit-scrollbar-thumb {
    background: #909090;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    border: 4px solid #f1f1f1;
}
::-webkit-scrollbar-thumb:hover {
	background: #c1c1c1;
}
body{
	font-family: "Montserrat", "Helvetica Neue", "Helvetica", "Myriad Set Pro";
}
body.page-body{
	width: 100vw;
	overflow-x: hidden;
}
.page-body .select2-container .select2-choice .select2-arrow b {
    background: #0072bc !important;
}
.page-body .select2-container .select2-choice .select2-arrow b:before{
	color: #ffffff;
}

/* Global CSS */
h1, .h1, h2, .h2, h3, .h3{
	margin-top: 10px;
}

.input-group-addon{
	background: #eeeeee;
	color: #555;
	/* // border-radius: 7px 0px 0px 7px; */
}
.input-group-addon a{
	color: #373e4a;
}
div.datepicker table tr td.active, div.datepicker table tr td.active:hover, div.datepicker table tr td.active.disabled, div.datepicker table tr td.active.disabled:hover {
    background: #303641;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.71);
}

.page-body .select2-container .select2-choice { 
	height: 42px; 
	line-height: 41px; 
}
.page-body .page-container.horizontal-menu header.navbar .navbar-brand {
	/* // padding: 5px 10px; */  /* Space padding fluid logo*/
	background: #FFFD61;
}

.page-body .page-container.horizontal-menu header.navbar .navbar-brand:before{
	content: '';
    position: absolute;
    width: 195px;
    transform: skew(-30deg);
    z-index: -1;
    height: 100%;
    top: 0;
    left: 200px;
    background-color: #FFFD61;
}

.page-body .page-container.horizontal-menu header.navbar.navbar-fixed-top{
	/*background-color: #B7B7B7;*/
	background: 
			url(backend/batikbg.png), 
			linear-gradient(270deg, rgba(1,61,155,1) 0%, rgba(0,94,199,1) 50%, rgba(0,126,238,1) 100%) !important;
    background-size: contain !important;

}

.notifications.dropdown .dropdown-menu > li.external a:hover,
.page-container.horizontal-menu header.navbar ul.nav > li.dropdown .dropdown-menu > li.external a:hover{
	background: #fdfdfd;
}
.notifications.dropdown .dropdown-menu > li > ul > li > a:hover, 
.notifications.dropdown .dropdown-menu > li > ul > li > p:hover,
.page-container.horizontal-menu header.navbar ul.nav > li.dropdown .dropdown-menu > li > ul > li > a:hover, 
.page-container.horizontal-menu header.navbar ul.nav > li.dropdown .dropdown-menu > li > ul > li > p:hover{
	background: #f9f9f9 !important;
}
.page-container.horizontal-menu header.navbar ul.nav > li .horizontal-mobile-menu a{
	border: 1px solid #fff;
	color: #fff;
}
.page-container.horizontal-menu header.navbar ul.nav > li .horizontal-mobile-menu a:hover{
	background-color: rgba(69, 74, 84, 0.4);
}
.page-body .page-container.horizontal-menu header.navbar ul.nav > li.dropdown .dropdown-menu > li.external a{ /* Logout Bar */
	
}
.page-body .page-container.horizontal-menu header.navbar ul.nav > li.dropdown .dropdown-menu > li.external a:hover{ /* Logout Hover Bar */
	color: #ec5956;
}
.page-body .page-container.horizontal-menu header.navbar .navbar-nav > li ul { /* sub-menu global */
	/* // min-width: 220px; */
	/* // background-color: #303641; */  
}
.page-body .page-container.horizontal-menu header.navbar .navbar-nav > li ul li.has-sub > a:before{
	color: #aaabae;
}
.page-body .page-container.horizontal-menu header.navbar .navbar-nav > li ul li.has-sub:hover > a:before{
	color: #fff;
}
.page-body .page-container.horizontal-menu header.navbar .navbar-nav > li ul li.active.has-sub > a:before{
	color: #fff;
}
.page-body .page-container.horizontal-menu header.navbar .navbar-nav > li.active.has-sub > a:after{
	border-color: #2b303a transparent transparent transparent;
}
.page-body .page-container .main-content {
	background: #EFEFEF;
	/*background: url(bg1.png) no-repeat right bottom fixed;*/
	/* background: url(bgmain.png) no-repeat right fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; */
}

.page-container.horizontal-menu header.navbar ul.nav > li > a i, 
.page-container.horizontal-menu header.navbar ul.nav > li > span i{
	margin-right: 0px;
}

.page-container.horizontal-menu header.navbar ul.nav > li.sep{
	height: auto;
}


.title-bg{
	background: #093a89;
    width: 20rem;
    height: 54px;
    margin-bottom: 2rem;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 20px;
}
.title-bg:before {
    content: '';
    position: absolute;
    width: 195px;
    transform: skew(-30deg);
    z-index: 0;
    height: 54px;
    bottom: 0;
    background-color: #093a89;
}
.title-bg h4{
	position: relative;
	color: #fff;
	z-index: 1;
}




.banner-front{
	margin: -20px -20px 0 -20px;
}
.button-tiles-front{
	display: flex;
    justify-content: center;
    transition: all .5s ease;
}

.button-tiles-front .button-tiles-item{
	text-align: center;
}

.button-tiles-front .button-tiles-item a > img{
	background-color: #093a89;
    width: 75%;
    padding: 15px;
    border-radius: 100px;
    transition: all .5s ease;
}

.button-tiles-front .button-tiles-item:hover a > img{
	background-color: #2d65c1;
}

/* template.php */
.logo-top{
	height: 45px;
}
.logo-topdoub{
	height: unset;
}
.logo-side{
	width: 120px;
}
.logo-footer{
	/*width: 40%;*/
}
.div_breadcrumb{
	background-color: #f5f5f5;
	height: 33px;
}
.breadcrumb{
	background-color: unset; 
	/* // margin-bottom: -20px; */
}
/* End template.php */


.breadcrumb > .active{
	color: #999;
}
.breadcrumb > .active > a{
	color: #303641;
}
.breadcrumb > li + li:before{
	color: #ccc;
}
.breadcrumb > li i {
	color: #303641;
}
.breadcrumb > li a {
	color: #303641;
}
.breadcrumb > li a:hover{
	color : #464e5e;
}

.table-bordered > thead > tr > th{
	color: #ffffff;
} 
.table-bordered > tbody > tr > th, 
.table-bordered > tfoot > tr > th, 
.table-bordered > thead > tr > td, 
.table-bordered > tbody > tr > td, 
.table-bordered > tfoot > tr > td{
}
.table-bordered > thead > tr > th, 
.table-bordered > thead > tr > td{
	background-color: #0072bc;
	/* color: #fff; 
	font-size: 14px;
	border-color: #ccc; */
}

.flx-bar .kopa-home-slider-widget .widget-title{
	color: #303641 !important;
    background: #E5E6E6;
}
.home-slider .flex-direction-nav a {
	background-color: #eee;
    border: 2px solid #fff;
}
.home-slider .entry-item .entry-content header .entry-title a{
	color: #303641;
}
.entry-date {
	color: #807C7C;
}
.flx-bar .kopa-latest-post-widget .widget-title{
	color: #fff;
    background: #303641;
}
.tglkecil {
    background: #807C7C;
}
.tglkecil .hari {
    font-size: 28px;
    line-height: 30px;
}
.tglkecil div {
    color: #fff !important;
}
.tglkecil .tahun {
    background: #C8CACA;
    color: #303641 !important;
}

.div-wraper{
	margin: 0 100px 50px;
    padding: 50px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 5px rgb(0 0 0 / 10%);
}

.post_ddmm {
    /* background-color: #fff;
    color: #303641;
    border: 2px solid #303641; */
}
.post_year{
	/* // background-color: #303641; */
}

.panel-default > .panel-heading{
	background-color: #0072bc;
}
.panel-default > .panel-heading{
	color: #ffffff;
}
.panel-default > .panel-heading > .panel-options > a,
.panel-default > .panel-heading .panel-title,
.panel-default > .panel-heading .panel-title h1,
.panel-default > .panel-heading .panel-title h2,
.panel-default > .panel-heading .panel-title h3,
.panel-default > .panel-heading .panel-title h4,
.panel-default > .panel-heading .panel-title h5{
	color: #ffffff;
}
.pagination > .active > a, 
.pagination > .active > span, 
.pagination > .active > a:hover, 
.pagination > .active > span:hover, 
.pagination > .active > a:focus, 
.pagination > .active > span:focus{
	background-color: #373e4a;
	color: #fff;
    border-color: #949494;
}

footer.main{
	z-index: 10;
	background-color: unset;
	/* // color: #fff; */
}
footer.main a{
	/* // color: #fff; */
}
footer.main a:hover{
	/* // color: #ddd; */
}
a[rel=to-top]{
	color: #626262 !important;
}
a:hover[rel=to-top]{
	color: #fff !important;
}

@media screen and (min-width: 767px){
	.logo-top{
		height: 55px;
	}
	.banner-wraper{
		margin-top: 25px;
	}
	.page-container.horizontal-menu header.navbar ul.nav > li > a, 
	.page-container.horizontal-menu header.navbar ul.nav > li > span{
		padding: 32px 22px;
	}
}
@media screen and (max-width: 767px){
	/* profile */
	.page-body .page-container.horizontal-menu header.navbar ul.nav > li.dropdown > a{
		margin-top: 18px;
	}
	.page-body .page-container.horizontal-menu header.navbar ul.nav > li.dropdown > a,
	.page-body .page-container.horizontal-menu header.navbar ul.nav > li.dropdown > span {
		color: #fff;
	}
	.page-body .page-container.horizontal-menu header.navbar ul.nav > li.dropdown.open:after{
		bottom: -2px
	}
	.page-body .page-container.horizontal-menu header.navbar ul.nav > li.dropdown.open > .dropdown-menu{
		width: 330px;
		margin-top: 0px;
	}
	.page-body .page-container.horizontal-menu header.navbar ul.nav > li > span {
		padding: 22px 5px;
	}
	.page-body .page-container.horizontal-menu header.navbar ul.nav > li > a:hover, 
	.page-body .page-container.horizontal-menu header.navbar ul.nav > li > a:focus{
		color: #eee;
	}
	.page-body .page-container.horizontal-menu header.navbar ul.nav > li.sep {
		display: block;
		border-left: 1px solid #fff;
		margin-left: 10px;
		margin-top: 23px;
	}
	/* end profile */
	
	
	.page-body .page-container.horizontal-menu .main-content {
	}
	.page-body .page-container.horizontal-menu header.navbar .navbar-brand {
		display: block;
	}
	/* .page-container.horizontal-menu header.navbar .navbar-inner { */
	.page-body .page-container.horizontal-menu header.navbar{
		/*background: #303641;*/
		background: 
			url(backend/batikbg.png), 
			linear-gradient(270deg, rgba(1,61,155,1) 0%, rgba(0,94,199,1) 50%, rgba(0,126,238,1) 100%) !important;
    	background-size: contain !important;
	}
	.page-body .page-container.horizontal-menu header.navbar .navbar-nav{
		/* // background: #303641; */
	}
	
	
	.page-body .page-container.horizontal-menu header.navbar .user-mobile-login{
		margin-right: 30px;
	}
	.page-body .page-container.horizontal-menu header.navbar .navbar-nav > li > a{
		color: #ebebeb;
	}
	.page-body .page-container.horizontal-menu header.navbar .navbar-nav > li:hover > a{
		background-color: #83b9ff;
		color: #282828;
	}
	.page-body .page-container.horizontal-menu header.navbar .navbar-nav > li.active > a{
	  background-color: #fffd61;
	  color: #282828;
	}
	.page-body .page-container.horizontal-menu header.navbar .navbar-nav > li ul{
		background-color: #093a89;
	}
	.page-body .page-container.horizontal-menu header.navbar .navbar-nav > li ul li > a{
	  border-bottom: 1px solid #ebebeb;
	  color: #fff;
	}
	.page-body .page-container.horizontal-menu header.navbar .navbar-nav > li ul li:hover > a{
		background-color: #83b9ff;
		color: #282828;
	}
	.page-body .page-container.horizontal-menu header.navbar .navbar-nav > li ul li.active > a{
		background-color: #fffd61;
		color: #282828;
	}
	
	/* text indent mobile menu */
	.page-body .page-container.horizontal-menu header.navbar .navbar-nav > li ul li a {
		padding-left: 40px;
	}
	.page-body .page-container.horizontal-menu header.navbar .navbar-nav > li ul li li a {
		padding-left: 60px;
	}
	.page-body .page-container.horizontal-menu header.navbar .navbar-nav > li ul li li li a {
		padding-left: 80px;
	}
	.page-body .page-container.horizontal-menu header.navbar .navbar-nav > li ul li li li li a {
		padding-left: 100px;
	}
	.page-body .page-container.horizontal-menu header.navbar .navbar-nav > li ul li li li li li a {
		padding-left: 120px;
	}

	.button-tiles-front .button-tiles-item a > img{
		width: 50%;
	}

	.div-wraper{
		margin: 0 50px 50px !important;
	}

	footer.main{
	}

	.logo-footer{
		width: 20%;
	}
}

@media screen and (max-width: 991px){
	.button-tiles-front{
		flex-direction: column;
	}

	.button-tiles-front .button-tiles-item{
		margin-bottom: 20px;
	}			
}