/* here you can put your own css to customize and override the theme */

/***
Rounded Portlets
***/
/*
.portlet {
	border-radius: 4px !important;
}

.portlet .portlet-title {
	border-radius: 4px 4px 0px 0px !important;
}

.portlet .portlet-body,
.portlet .portlet-body .form-actions  {
	border-radius: 0px 0px 4px 4px !important;
}
*/

body, h1, h2, h3, h4, h5, h6 {
	font-family: 'Sarala', sans-serif;
}

.portlet.light .form .form-actions {
	padding: 20px 10px;
}

.portlet.light {
  padding: 12px 20px 15px;
  background-color: #fff;
}

a {
	color: #2f79a4;
}
a:hover {
	color: #712fa4;
}

.btn {
	transition: all 300ms ease-in;
}
.btn:hover {
	transition: all 300ms ease-out;
}

.right1 {
	text-align: right;
}

.btn-hover-slide {
	position: relative;
	color: #fff !important;
	background-color: #4b4b4b !important;
	border: 2px solid #333 !important;
	overflow: hidden;
	text-transform: uppercase;
}
.btn-hover-slide span {
	position: relative;
	z-index: 10;
	color: inherit;
}
.btn-hover-slide:hover {
	background-color: #fff !important;
}
.btn-hover-slide:before {
	content: " ";
	position: absolute;
	left: 0;
	top: 0;
	background-color: #333;
	width: 0;
	height: 100%;
	transition: all 300ms ease-in;
	z-index: 1;
}
.btn-hover-slide:hover:before {
	width: 100%;
	transition: all 300ms ease-out;
}
/* purple */
.btn-hover-slide.purple {
	border-color: #8e44ad !important;
	background-color: #9764ac !important;
	margin-left: 2% !important;
}
.btn-hover-slide.purple:before {
	background-color: #8e44ad !important;
}
/* green */
.btn-hover-slide.green {
	border-color: #35aa47 !important;
	background-color: #3ec352 !important;
	margin-left: 2% !important;
}
.btn-hover-slide.green:before {
	background-color: #35aa47 !important;
}
/* green1 */
.btn-hover-slide.green1 {
	border-color: #4db3a4 !important;
	background-color: #58cbba !important;
}
.btn-hover-slide.green1:before {
	background-color: #4db3a4 !important;
}
/* green2 */
.btn-hover-slide.green2 {
	border-color: #35aa47 !important;
	background-color: #3ec352 !important;
	margin-left: 2% !important;
}
.btn-hover-slide.green2:before {
	background-color: #35aa47 !important;
}
/* yellow */
.btn-hover-slide.yellow {
	border-color: #ffa81f !important;
	background-color: #ffba4e !important;
	margin-left: 2% !important;
}
.btn-hover-slide.yellow:before {
	background-color: #ffa81f !important;
}
/* red */
.btn-hover-slide.red {
	border-color: #d84a38 !important;
	background-color: #f37160 !important;
	margin-left: 2% !important;
}
.btn-hover-slide.red:before {
	background-color: #d84a38 !important;
}
/* blue */
.btn-hover-slide.blue {
	border-color: #4B8DF8 !important;
	background-color: #6fa3f7 !important;
	margin-left: 2% !important;
}
.btn-hover-slide.blue:before {
	background-color: #4B8DF8 !important;
}

.panel-heading {
	border-bottom: 1px solid #ccc;
}

.progress-bar-1 {background: #ffe92d;}
.progress-bar-2 {background: #375c8e;}
.progress-bar-3 {background: #439b5a;}
.progress-bar-4 {background: #95569c;}
.progress-bar-5 {background: #c84b4b;}

a:hover, a:focus {
	text-decoration: none;
}

.page-header .page-header-top .page-logo {
	width: auto;
}

.page-header .page-header-top .page-logo .logo-default {
	margin: 3px 15px 0 0;
	max-width: 70px;
}

.page-header .page-header-menu {
	background: #0D4C76;
}
.page-header .page-header-menu .hor-menu .navbar-nav > li > a {
	color: #fffe87;
}
.page-header .page-header-menu .hor-menu .navbar-nav > li.active > a, .page-header .page-header-menu .hor-menu .navbar-nav > li.active > a:hover, .page-header .page-header-menu .hor-menu .navbar-nav > li.current > a, .page-header .page-header-menu .hor-menu .navbar-nav > li.current > a:hover {
	background: #0F5A8C;
	color: #fffe87;
}
.page-header .page-header-menu .hor-menu .navbar-nav > li.open > a, .page-header .page-header-menu .hor-menu .navbar-nav > li > a:hover {
	background: #0F5A8C !important;
	color: #fffe87;
}
.page-header .page-header-menu .hor-menu .navbar-nav > li > a > i {
	color: #fffe87;
}
.page-header .page-header-menu .hor-menu .navbar-nav > li.open > a > i, .page-header .page-header-menu .hor-menu .navbar-nav > li > a:hover > i {
	color: #fffe87;
}
.page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu {
	background: #0F5A8C;
	color: #fffe87;
}
.page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu li > a {
	color: #fffe87;
}
.page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu li:hover > a {
	background: #11669F;
	color: #fffe87;
}
.page-head {
	background: #e8f1f6
}
.page-content {
	background: #fff;
}

.top-menu a {
	text-align: center;
}
.top-menu .link {
	font-size: 26px;
}
.nav>li>a:hover, .nav>li>a:focus {
	background: none;
}

.information {
	background: #c84b4b;
	padding: 15px;
	color: #FFFFFF;
	border: none;
	margin-bottom: 20px;
	display: block;
	width: 230px;
	text-align: right;
	box-shadow: 5px 5px 10px #ccc;
}
.information .info {
	position: absolute;
	height: 75px;
	width: 65px;
}
.information .info i {
	font-size: 53px;
	color: #FFFFFF;
	float: left;
	margin: 25px 0px 0px 0px;
}
.information span {
	display: inline-block;
}
.information h1 {margin: 0;}

.slider {}
.slider .slider-picture-container {height: 257px; overflow: hidden;}
.slider .thumbs-content .author {font-size: 11px;}
.slider .slider-content .caption {
	position: absolute;
	bottom: 0;
	color: #FDFDFD;
	background: rgba(54, 54, 54, 0.61);
	width: 100%;
	padding: 10px;
	font-size: 18px;
	line-height: 25px;
}
.slider .slider-content .author {font-size: 12px; font-weight: bold;}
.slider .slider-content .caption a {color: #fff;}

ul.goal-progress {
	list-style-type: none;
	padding: 0;
}
ul.goal-progress li .prog-avatar {
	float: left;
	margin-right: 10px;
}
ul.goal-progress li .prog-avatar img {
	width: 37px;
	height: 37px;
}
ul.goal-progress li .title {
	margin-bottom: 3px;
}
ul.goal-progress li .title span {
	float: right;
	background: #F1F1F1;
	padding: 0 5px;
	font-size: 10px;
}

.portlet.light {
	border: 1px solid #E8F1F6;
}
.portlet.light .form .form-actions.right {
	padding-right: 20px;
}
.portlet.light .form .form-actions.left {
	padding-left: 20px;
}

#next_training .item, #latest_type .item, #dokumen .item {
	border: 1px solid #efefef;
	padding: 15px;
    margin-bottom: 15px;
}
#next_training .item .item-head, #latest_type .item .item-head, #dokumen .item .item-head {
	border-bottom: 1px solid #f8f8f8;
	margin-bottom: 15px;
	padding-bottom: 15px;
}

#latest_type .item .item-tools {
	text-align: right;
}
#latest_type .form .form-body {
	padding: 15px;
}

#pelatihan-available .form .form-body {
	padding: 0;
}
#pelatihan-available .control-label {
	text-align: left;
}
#pelatihan-available .form-control-static {
	font-weight: bold;
}
#pelatihan-available .img {
	margin: 10px;
	padding: 5px;
	border: 1px solid #c3cdce;
}
#pelatihan-available .description_area {
	padding-left: 20px;
}

.regisration-selection {
	border: 1px solid #ccc;
	margin: 20px;
	padding: 20px;
	text-align: center;
}
.regisration-selection .img-responsive {
	margin: 0 auto;
}

/* front steps */

.margin-bottom-40 {
	margin-bottom: 40px;
}

.front-steps-wrapper .front-step-title {
	margin-bottom: 10px;
}
.front-steps-wrapper .front-step-title h2 {
	color: #0d4c76;
	font-weight: bold;
}

.front-steps-wrapper h2,
.ecommerce .front-steps-wrapper h2 {
	color: #f0f0f0;
	font-size: 22px;
	line-height: 1.2;
	padding-top: 10px;
	margin-bottom: 5px;
	margin-top: 0;
}
.front-steps-wrapper .front-step1 h2,
.ecommerce .front-steps-wrapper .front-step1 h2 {
	color: #fefefe;
}
.front-steps-wrapper p {
	color: #fff;
	font-size: 12px;
	line-height: 18px;
	margin-bottom: 0;
}

.front-steps-wrapper .front-step-col {
	padding-left: 0;
	padding-right: 0;
}
.front-steps-wrapper .front-step-col:first-child {
	padding-left: 15px;
}
.front-steps-wrapper .front-step-col:last-child {
	padding-right: 15px;
}

.front-steps-wrapper .front-step {
	position: relative;
	padding: 15px 20px 33px;
	height: 165px;
}
.front-steps-wrapper .front-step1 {
	background: #0d4c76;
}
.front-steps-wrapper .front-step2 {
	background: #0f5a8c;
}
.front-steps-wrapper .front-step3 {
	background: #11669f;
}
.front-steps-wrapper .front-step4 {
	background: #1370b0;
}
.front-steps-wrapper .front-step5 {
	background: #147bc1;
}
.front-steps-wrapper .front-step6 {
	background: #1484d0;
}

.front-steps-wrapper .front-step:before {	
	color: #fff;
	font: 300 125px 'Open Sans', sans-serif;
	font-weight: bold;
	display: block;
	position: absolute;
	right: -20px;
	bottom: -40px;
	opacity: 0.1;
}
.ie8 .front-steps-wrapper .front-step:before {
	display: none !important;
}
.front-steps-wrapper .front-step1:before {
	content: "1";
	opacity: 0.2;
}
.front-steps-wrapper .front-step2:before {
	content: "2";
	right: -15px;
}
.front-steps-wrapper .front-step3:before {
	content: "3";
}
.front-steps-wrapper .front-step4:before {
	content: "4";
}
.front-steps-wrapper .front-step5:before {
	content: "5";
}
.front-steps-wrapper .front-step6:before {
	content: "6";
}

.front-steps-wrapper .front-step:after { 
	top: 50%;
	width: 0; 
	height: 0;
	left: 100%;
	z-index: 2; 
	content: " "; 
	display: block; 
	margin-top: -1em; 
	position: absolute;
	border-left: 15px solid #0d4c76;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
}
.ie8 .front-steps-wrapper .front-step:after {
	display: none !important;
}
.front-steps-wrapper .front-step-col:last-child .front-step:after {
	display: none;
}
.front-steps-wrapper .front-step2:after {
	border-left-color: #0f5a8c;	
}
.front-steps-wrapper .front-step3:after {
	border-left-color: #11669f;	
}
.front-steps-wrapper .front-step4:after {
	border-left-color: #1370b0;	
}
.front-steps-wrapper .front-step5:after {
	border-left-color: #147bc1;	
	top: auto;
	bottom: 10%;
}

.page-prefooter {
	display: none;
	background: #0F5A8C;
}
.page-footer {
	background: #0D4C76;
	color: #fffe87;
    width: 100%;
    position: fixed;
    bottom: 0;
	z-index: 9999;
}

.soal {
	display: none;
}
.soal .box .portlet-title {
	min-height: 0;
	padding-top: 10px;
	padding-bottom: 10px;
}

/* Small Device Rule */
@media (max-width: 1199px) {
	.front-steps-wrapper .front-step-col:first-child {
		padding-left: 0;
	}
	
	.front-steps-wrapper .front-step-col:last-child {
		padding-right: 0;
	}
}

@media (max-width: 991px) {
	.page-header .page-header-menu .hor-menu .nav {
		background: none !important;
	}
	.page-header .page-header-menu .hor-menu .navbar-nav > li.open > a, .page-header .page-header-menu .hor-menu .navbar-nav > li.open > a:hover, .page-header .page-header-menu .hor-menu .navbar-nav > li.active > a, .page-header .page-header-menu .hor-menu .navbar-nav > li.active > a:hover, .page-header .page-header-menu .hor-menu .navbar-nav > li.current > a, .page-header .page-header-menu .hor-menu .navbar-nav > li.current > a:hover {
		color: #fff !important;
		background: none !important;
	}
	.page-header .page-header-menu .hor-menu .navbar-nav > li {
		border-color: #fffe87 !important;
	}
	.page-header .page-header-menu .hor-menu .navbar-nav > li > a {
		color: #fffe87 !important;
	}
	.page-header .page-header-menu .hor-menu .navbar-nav > li > a > i,
	.page-header .page-header-menu .hor-menu .navbar-nav > li:hover > a > i,
	.page-header .page-header-menu .hor-menu .navbar-nav > li:hover > a {
		color: #fffe87 !important;
		background: none !important;
	}
	.page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu {
		background: none !important;
	}
	.page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu li > a {
		color: #fffe5b  !important;
	}
	.page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu li > a:hover {
		color: #fff !important;
		background: none !important;
	}
}