/*------------------------------------------*/

/*	    Fonts

/*------------------------------------------*/



/*------------------------------------------*/

/*	    General

/*------------------------------------------*/

/* General */

body {	

	font-family: 'Open Sans', sans-serif;

	font-size: 14px;

  /*line-height: 22.5px;*/

	font-weight: 300;

	color: #666;

  padding-top: 5.5rem;

  background: #f5f5f5 !important;
}

@media(max-width:767px){
  body {
    padding-top: 10rem !important;
  }
}

.body-login {
  padding-top: 0px !important;
}

.loading-wrapper {
  display: none;
	background-color: rgba(136, 136, 136, 0.5);
  font-size: 24px !important;
  color: white !important;
  font-weight: bold;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1050;
}

.loading-box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 70px;
	display: flex;
	align-items: center;
}

@media screen and ( min-width: 1600px ) {
  .conflu-cust {
    max-width: 1140px !important;
  }
}

@media(min-width:768px){
  .cont-cust {
    width: 100% !important;
  }

  .cont-without-py {
	padding-left: 0px !important;
	padding-right: 0px !important;
  }
}

.cont-inner-without-py {
	padding-left: 0px !important;
	padding-right: 0px !important;
  }

ul.profil-menu li {
	font-size: 12px !important;
}

ul.profil-menu li a {
	border-radius: 50px !important;
	padding: 0.4rem 1rem !important;
}

ul.profil-menu li a.active, ul.profil-menu li a:focus, ul.profil-menu li a:hover {
	background: #035B71 !important;
	color: white !important;
}

.contaione {
	background: #5183cf !important;
}

.contaione-left{
	color: #f5f5f5 !important;
}

.contaione-right{
	background: #375b90 !important;
	color: #fafafa;
}

/*.ribbon {
	position: absolute;
	z-index: 1;
	overflow: hidden;
	text-align: center;
	top: 0;
}*/

.ribbon-notif {
  position: absolute;
  z-index: 1;
  right: 24px;
}

.ribbon {
    position: absolute;
    z-index: 1;
}

.ribbon::before,
.ribbon::after {
    content: '';
    position: absolute;
    bottom: -24px;
    border-style: solid;
	z-index: 1;
}

.ribbon::before {
    left: 0;
    border-width: 25px 25px 0 0;
    border-color: white transparent transparent transparent;
}

.ribbon::after {
    right: 0;
    border-width: 0 25px 25px 0;
    border-color: transparent white transparent transparent;
}

.ribbon-2 {
  position: absolute;
  z-index: 1;
}

.btn-cust{
	background: #5183cf !important;
  border-color: #5183cf !important;
  color: white !important;
}
.btn-cust.active,.btn-cust:focus,.btn-cust:hover{
	background: #375b90 !important;
  border-color: #375b90 !important;
}

.btn-cust-2{
	background: #035B71 !important;
  border-color: #035B71 !important;
  color: white !important;
}
.btn-cust-2.active,.btn-cust-2:focus,.btn-cust-2:hover{
	background: #047895 !important;
  border-color: #047895 !important;
}

.btn-cust-3{
	background: #00A2BA !important;
  border-color: #00A2BA !important;
  color: white !important;
}
.btn-cust-3.active,.btn-cust-3:focus,.btn-cust-3:hover{
	background: #00b9d5 !important;
  border-color: #00b9d5 !important;
}

.btn-cust-4{
	background: #e6edf5 !important;
  border-color: #e6edf5 !important;
  color: #035B71 !important;;
}
.btn-cust-4.active,.btn-cust-4:focus,.btn-cust-4:hover{
	background: #035B71 !important;
  border-color: #035B71 !important;
  color: white !important;
}

.btn-cust-5{
	background: #00ba38 !important;
  border-color: #00ba38 !important;
  color: white !important;
}
.btn-cust-5.active,.btn-cust-5:focus,.btn-cust-5:hover{
	background: #03962f !important;
  border-color: #03962f !important;
}

/*.btn-cust-2{
	background: #00A2B9 !important;
  border-color: #00A2B9 !important;
  color: white !important;
}
.btn-cust-2.active,.btn-cust-2:focus,.btn-cust-2:hover{
	background: #035B71 !important;
  border-color: #035B71 !important;
}*/

.btn-cust-red{
	background: #d22b2b !important;
  border-color: #d22b2b !important;
  color: white !important;
}
.btn-cust-red.active,.btn-cust-red:focus,.btn-cust-red:hover{
	background: #991e1e !important;
  border-color: #991e1e !important;
}

.link-cust{
	color: #5183cf !important;
}
.link-cust.active,.link-cust:focus,.link-cust:hover{
	color: #375b90 !important;
}

.link-cust-2{
	color: #035B71 !important;
}
.link-cust-2.active,.link-cust-2:focus,.link-cust-2:hover{
	color: #047895 !important;
}

.link-app.active div,.link-app:focus div,.link-app:hover div{
  transform: scale(1.07) !important;
}

.link-app.active img,.link-app:focus img,.link-app:hover img{
  transform: scale(1.07) !important;
}

.link-app-non{
  opacity: 0.3 !important;
  pointer-events: none !important;
}

.bg-cust{
	background: #5183cf !important;
}

.bg-cust-2{
	background: #035B71 !important;
}

.bg-cust-3{
  background: #00A2BA !important;
}

.bg-cust-3-trans{
  background: rgba(0, 162, 186, 0.7) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.bg-txt-cust{
  background: #035B71 !important;
  color: white !important;
}

.bg-img-cust {
  background-image: url('images/icons/icon_badge_big.png');
  background-repeat:no-repeat;
  background-position: left 0.5rem bottom;
}

.font-cust{
	color: #375b90 !important;
}

.font-cust-2{
	color: #035B71 !important;
}

.font-cust-3{
  color: #00A2BA !important;
}
.card-body-cust {
  padding: 0.5rem !important;
  font-size: 12px !important;
}

.card-body-cust-2 {
  font-size: 14px !important;
}

.border-cust{
	border-color: #035B71 !important;
}

/*@media(min-width:768px){*/
/*.card-img-top {
  width: 100%;
  height: 10vw;
  object-fit: cover;
}*/

/*.img-acor {
  width: 100%;
  height: 5vw;
  object-fit: cover;
}*/
/*}
@media(max-width:767px){*/
  /*.card-img-top {
    width: 100%;
    height: 50vw;
    object-fit: cover;
  }*/

  /*.img-acor {
    width: 100%;
    height: 50vw;
    object-fit: cover;
  }*/
/*}*/

.fontbtn {
  font-size: 10px;
  padding: 4px 4px !important;
}

.fontbtn-two {
  font-size: 10px;
  padding: 4px 4px !important;
  width: 55px !important;
}

.fontbtn-three {
  font-size: 10px;
  padding: 5px 8px !important;
}

.fontbtn-four {
  font-size: 10px;
  padding: 5px 25px !important;
}

.fontbtn-five {
  font-size: 12px;
  padding: 5px 8px !important;
}

.fontbtn-six {
  font-size: 14px;
}

.formcari-cust {
  background: #f5f5f5 !important;
  height: 1.75rem !important;
  font-size: 12px !important;
}

.badge-counter {
	position: absolute;
	transform: scale(.7);
	transform-origin: top right;
	/*right: 0.45rem;*/
  left: 2.0rem;
	margin-top: -0.25rem;
}

@media(max-width:767px){
  .badge-counter {
    position: absolute;
    transform: scale(1.0);
	  transform-origin: top right;
    /*right: 0.45rem;*/
    left: 2.0rem;
    /*right: 3.15rem !important;*/
  }
}

.fa-fw {
	width: 1.25em;
  font-size: 18px !important;
}

.border-3 {
  border-width:3px !important;
}
.border-2 {
  border-width:2px !important;
}

.checkbox-lg .custom-control-label::before, 
.checkbox-lg .custom-control-label::after {
  top: .8rem;
  width: 1.55rem;
  height: 1.55rem;
}

.checkbox-lg .custom-control-label {
  padding-top: 13px;
  padding-left: 6px;
}


/* animate.css */
.swing_hover:hover {
  -webkit-animation: swing 1s;
  animation: swing 1s;
}

.flip_hover:hover {
  -webkit-animation: flip 1s;
  animation: flip 1s;
}

.rubberBand_hover:hover {
  -webkit-animation: rubberBand 1s;
  animation: rubberBand 1s;
}

.rubberBand_parent_hover:hover ~ .rubberBand_child_hover {
  -webkit-animation: rubberBand 1s;
  animation: rubberBand 1s;
}


/*owl replace css*/

.owl-carousel .owl-stage{display: flex;}
.owl-cust-item-same {
    display: grid;
    flex: 1 0 auto;
    height: 100%;
}
.owl-cust-item-same-2 {
  flex: 1 0 auto;
  height: 100%;
}

.owl-carousel-multiplerow-one .card-text {
  font-size: 11px !important;
}

.owl-carousel-multiplerow-one .owl-nav {
  margin-top: 10px !important;
}

.owl-carousel-multiplerow-one .owl-dot {
  margin-bottom: 15px !important;
}

.owl-carousel-multiplerow-one .owl-prev, .owl-carousel-multiplerow-one .owl-next {
	/* width: 15px; */
	/* height: 100px; */
	position: absolute;
	/* bottom: 50%; */
	/* transform: translateY(-50%); */
	display: block !important;
	/*border: 0px solid black;*/
}
.owl-carousel-multiplerow-one .owl-prev { 
  left: 0px; 
  margin: 0px !important; 
  width: 25px !important;
  height: 25px !important;
  border-radius: 30px !important;
  background: rgba(217, 217, 217, 0.7) !important;
  color: #035B71 !important;
}
.owl-carousel-multiplerow-one .owl-next { 
  right: 0px; 
  margin: 0px !important; 
  width: 25px !important;
  height: 25px !important;
  border-radius: 30px !important;
  background: rgba(217, 217, 217, 0.7) !important;
  color: #035B71 !important;
}
/*.owl-prev i, .owl-next i {transform : scale(2,5); color: #ccc;}*/

.owl-carousel-multiplerow-one .owl-dot.active span {
  width:12px !important;
  height:12px !important;
  margin:5px 7px;
  background: #035B71 !important;
  display:block;
  -webkit-backface-visibility:visible;
  -webkit-transition:opacity 200ms ease;
  -moz-transition:opacity 200ms ease;
  -ms-transition:opacity 200ms ease;
  -o-transition:opacity 200ms ease;
  transition:opacity 200ms ease;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
}

.owl-carousel-multiplerow-one .owl-prev:hover, .owl-carousel-multiplerow-one .owl-next:hover {
  /*background: rgba(81, 131, 207, 0.7) !important;*/
  background: #035B71 !important;
  color: white !important;
}

/*.owl-carousel-multiplerow-one .owl-prev:hover {
  background-color: none !important;
  background: none !important;
}

.owl-carousel-multiplerow-one .owl-next:hover {
  background-color: none !important;
  background: none !important;
}*/

.owl-carousel-four .owl-dot {
  margin-top: 10px !important;
}

.owl-carousel-four .owl-dot.active span {
  width:12px !important;
  height:12px !important;
  margin:5px 7px;
  background: #035B71 !important;
  display:block;
  -webkit-backface-visibility:visible;
  -webkit-transition:opacity 200ms ease;
  -moz-transition:opacity 200ms ease;
  -ms-transition:opacity 200ms ease;
  -o-transition:opacity 200ms ease;
  transition:opacity 200ms ease;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
}

.owl-carousel-four .owl-prev {
  width: 30px !important;
  height: 30px !important;
  position: absolute;
  top: auto;
  left: -40px;
  display: block !important;
  border:0px solid black;
  font-size: 16px !important;
  border-radius: 30px !important;
  background: rgba(217, 217, 217, 0.7) !important;
  color: #035B71 !important;
}

.owl-carousel-four .owl-next {
  width: 30px !important;
  height: 30px !important;
  position: absolute;
  top: auto;
  right: -40px;
  display: block !important;
  border:0px solid black;
  font-size: 16px !important;
  border-radius: 30px !important;
  background: rgba(217, 217, 217, 0.7) !important;
  color: #035B71 !important;
}

.owl-carousel-four .owl-prev:hover, .owl-carousel-four .owl-next:hover {
  /*background: rgba(81, 131, 207, 0.7) !important;*/
  background: #035B71 !important;
  color: white !important;
}

@media(max-width:767px){
  .owl-carousel-four .owl-prev {
    left: 0px;
  }
  
  .owl-carousel-four .owl-next {
    right: 0px;
  }
}
@media(min-width:768px){
  .owl-carousel-four .owl-prev {
    top: 35% !important;
  }
  
  .owl-carousel-four .owl-next {
    top: 35% !important;
  }
}

.owl-carousel-five .owl-dot {
  margin-top: 10px !important;
  margin-bottom: 15px !important;
}

.owl-carousel-five .owl-dot.active span {
  width:12px !important;
  height:12px !important;
  margin:5px 7px;
  background: #035B71 !important;
  display:block;
  -webkit-backface-visibility:visible;
  -webkit-transition:opacity 200ms ease;
  -moz-transition:opacity 200ms ease;
  -ms-transition:opacity 200ms ease;
  -o-transition:opacity 200ms ease;
  transition:opacity 200ms ease;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
}

.owl-carousel-five .owl-prev {
  width: 30px !important;
  height: 30px !important;
  position: absolute;
  top: auto;
  left: -20px;
  display: block !important;
  border:0px solid black;
  font-size: 16px !important;
  border-radius: 30px !important;
  background: rgba(217, 217, 217, 0.7) !important;
  color: #035B71 !important;
}

.owl-carousel-five .owl-next {
  width: 30px !important;
  height: 30px !important;
  position: absolute;
  top: auto;
  right: -20px;
  display: block !important;
  border:0px solid black;
  font-size: 16px !important;
  border-radius: 30px !important;
  background: rgba(217, 217, 217, 0.7) !important;
  color: #035B71 !important;
}

.owl-carousel-five .owl-prev:hover, .owl-carousel-five .owl-next:hover {
  /*background: rgba(81, 131, 207, 0.7) !important;*/
  background: #035B71 !important;
  color: white !important;
}

@media(max-width:767px){
  .owl-carousel-five .owl-prev {
    left: 0px;
  }
  
  .owl-carousel-five .owl-next {
    right: 0px;
  }
}
@media(min-width:768px){
  .owl-carousel-five .owl-prev {
    top: 35% !important;
  }
  
  .owl-carousel-five .owl-next {
    top: 35% !important;
  }
}

.owl-text-overlay-bottom {
  position: absolute;
  text-align: center;
  width: 65%;
  bottom: -10%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

.owl-carousel-six .square-content {
  height: 85% !important;
}

.owl-carousel-six .owl-dot {
  margin-top: 10px !important;
}

.owl-carousel-six .owl-dot.active span {
  width:12px !important;
  height:12px !important;
  margin:5px 7px;
  background: #035B71 !important;
  display:block;
  -webkit-backface-visibility:visible;
  -webkit-transition:opacity 200ms ease;
  -moz-transition:opacity 200ms ease;
  -ms-transition:opacity 200ms ease;
  -o-transition:opacity 200ms ease;
  transition:opacity 200ms ease;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
}


/* Other ratios - just apply the desired class to the "box" element */

.ratio2_1:before{

  padding-top: 50%;

}

.ratio1_2:before{

  padding-top: 200% !important;

}

.ratio4_3:before{

  padding-top: 75% !important;

}

.ratio16_9:before{

  padding-top: 56.25% !important;

}

.ratio3_24:before{

  padding-top: 15% !important;

}

.ratio4_4:before{

  padding-top: 100% !important;

}

.ratio1_3:before{

  padding-top: 30% !important;

}

.ratio16_7:before{

  padding-top: 40.25% !important;

}

.ratio16_5:before{

  padding-top: 25.25% !important;

}

.ratio2_1 .landscape, .ratio16_9 .landscape{max-height:inherit !important;max-width:100% !important;}

.ratio2_1 .potrait, .ratio16_9 .potrait{max-height:100% !important;max-width:inherit !important;}



.squared{max-width:100% !important;max-height:100% !important;}

.landscape{max-height:100% !important;max-width:inherit !important;}

.potrait{max-width:100% !important;max-height:inherit !important;}



.img-wrap.default{ background: #035B71; }

.img-wrap.default-dark{ background: #000000; }


/*------------------------------------------*/

/*			Thumbnail [aspect ratio]

/*------------------------------------------*/

.square {

  position: relative;

  width: 100%;

}

.square:before {

  content:     "";

  display:     block;

  padding-top: 100%;

}

.square .square-content {

  position: absolute;

  top:      0;

  left:     0;

  bottom:   0;

  right:    0;

}

.img-wrap{

width: 100%;

height: 100%;

position: relative;

  overflow: hidden;

}

.img-wrap img{

min-width:100%;

min-height:100%;



position: absolute;

  top: -10000px;

  bottom: -10000px;

  left: -10000px;

  right: -10000px;

  margin: auto;

}

.img-landscape {
  max-height: 100% !important;
  max-width: inherit !important;
}

/* swall replace css */
.swal2-popup {
  font-size: 12px !important;
}

/* captcha replace css */
.captcha-show img {
  width: 100% !important;
}

.social-icon a {
	background: black;
	color: #fff;
	display: block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	font-size: 24px;
	text-align: center;
}

.social-icon a.active, .social-icon a:focus, .social-icon a:hover {
	background: #047895 !important;
}

/***** Bubba *****/

figure.effect-bubba {

	text-align: center;

	cursor: pointer;

}

figure.effect-bubba img {

	opacity: 1;

	-webkit-transition: opacity 0.35s;

	transition: opacity 0.35s;

}

figure.effect-bubba:hover img {

	opacity: 0.4;

}

figure.effect-bubba figcaption::before,

figure.effect-bubba figcaption::after {

	position: absolute;

	top: 30px;

	right: 30px;

	bottom: 30px;

	left: 30px;

	content: '';

	opacity: 0;

	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

	transition: opacity 0.35s, transform 0.35s;

}

figure.effect-bubba figcaption::before {

	border-top: 1px solid #fff;

	border-bottom: 1px solid #fff;

	-webkit-transform: scale(0,1);

	transform: scale(0,1);

}

figure.effect-bubba figcaption::after {

	border-right: 1px solid #fff;

	border-left: 1px solid #fff;

	-webkit-transform: scale(1,0);

	transform: scale(1,0);

}

figure.effect-bubba h2 {

	padding-top: 30%;

	-webkit-transition: -webkit-transform 0.35s;

	transition: transform 0.35s;

	-webkit-transform: translate3d(0,-20px,0);

	transform: translate3d(0,-20px,0);

}

figure.effect-bubba p {

	padding: 20px 2.5em;

	opacity: 0;

	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

	transition: opacity 0.35s, transform 0.35s;

	-webkit-transform: translate3d(0,20px,0);

	transform: translate3d(0,20px,0);

}

figure.effect-bubba .icon-view {

	opacity: 0;

	color: #fff;

	display: block;

	font-size: 24px;

	height: 50px;

	left: 50%;

	line-height: 50px;

	margin-left: -25px;

	margin-top: -25px;

	position: absolute;

	text-align: center;

	top: 50%;

	width: 50px;

	z-index: 10;

	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

	transition: opacity 0.35s, transform 0.35s;

	-webkit-transform: translate3d(0,20px,0);

	transform: translate3d(0,20px,0);

}

figure.effect-bubba .text-view {
	opacity: 0;
	color: #fff;
	display: block;
	font-size: 20px;
	height: 50px;
	position: absolute;
	text-align: center;
	top: 40%;
	width: 100%;
	z-index: 10;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

figure.effect-bubba:hover figcaption::before,

figure.effect-bubba:hover figcaption::after {

	opacity: 1;

	-webkit-transform: scale(1);

	transform: scale(1);

}

figure.effect-bubba:hover h2,

figure.effect-bubba:hover p {

	opacity: 1;

	-webkit-transform: translate3d(0,0,0);

	transform: translate3d(0,0,0);

}

figure.effect-bubba:hover .icon-view {

	opacity: 1;

	-webkit-transform: translate3d(0,0,0);

	transform: translate3d(0,0,0);

}

figure.effect-bubba:hover .text-view {

	opacity: 1;

	-webkit-transform: translate3d(0,0,0);

	transform: translate3d(0,0,0);

}

.col-same {
  display: grid;
  flex: 1 0 auto;
  height: 100%;
}

.overflow-cust {
  height: 200px !important;
}

.table-cust td, .table-cust th {
  padding: 0.25rem 0rem !important;
}

.progress.progress-cust-2 {
  height: 0.75rem !important;
  background: white !important;
  border-radius: 1rem !important;
  border: 1px solid #035B71;
  padding: 2px;
}

.bg-progress-cust-2 {
  background: #00A2BA;
  border-radius: 1rem !important;
}
.step_active{
  opacity: 1 !important;
}
.step_jbt {
    width: 33%;
    background: #fbfbfb;
    padding: 10px 10px;
    box-shadow: 1px 1px 2px 0px rgb(0 0 0 / 27%);
    float: left;
    margin-left: 0.2%;
    opacity: 0.3;
}
.circle {
    width: 45px;
    height: 45px;
    border: solid 3px #7d7d7d;
    text-align: center;
    font-size: 17px;
    color: #484747;
    border-radius: 50px;
    padding-top: 7px;
    font-weight: bold;
    margin-bottom: 0px;
}
.text {
    font-size: 17px;
    color: #484747;
    padding-left: 10px;
    margin-bottom: 0px;
}
.step-head{
      margin-top: -15px;
    margin-left: -15px;
    margin-right: -17px;
    margin-bottom: 20px !important;
    clear: both;
}
.step-content{
  padding-top: 15px;
}
.pilihjabatan{
  cursor: pointer;
}
.terpilih{
  background: #17a2b8 !important;
  color: white;
}
.header-modal{
  font-size: 17px;
    margin-bottom: 25px;
    font-family: arial;
    color: #000;
    border-left: solid 5px #035B71;
    padding-left: 10px;
    box-shadow: 1px 1px 2px 0px rgb(0 0 0 / 27%);
}
.paginate_button {
    background: white !important;
    padding: 1px 10px !important;
}
.paginate_button:hover{
   background: #aaa !important;
   border: solid 1px #aaa !important;
}
.iframe{
  width: 100%;
    height: 450px;
    border: none;
    overflow-x: hidden !important;
}
.head-evaluasi {
    padding: 5px 15px;
    font-weight: bold;
    font-size: 15px;
    border-radius: 3px 3px 0px 0px;
}

.text-danger{
  color:  #17a2b88c !important;
}
.btn-kkj{
    font-size: 10px;
    padding: 3px 5px;
    float: right;
    border: solid 1px #fff !important;
    background: #00A2BA !important;
    color: white;
    margin-top: 10px;
}
.btn-kkj:hover{
    border: solid 1px #035B71 !important;
    background: #035B71 !important;
    color: white !important;
}
.filters2 {
    background: #c9c8c8;
    padding: 0px;
    font-weight: bold;
}
.filters2 td{
  padding: 3px 5px !important;
}
.table-jabatan{
  font-size: 12px;
}
.noborder{
  border-left:none !important;
  border-right:none !important;
}
.search-jbt{
  font-size: 12px;
  padding: 3px 10px !important;
}
.btn-xs{
  font-size: 10px !important;
  padding: 3px 10px !important;
}