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

/*Accessibility*/
i._access-icon.material-icons._access {
  width: 40px !important;
  height: 40px !important;
  font-size: 30px !important;
  line-height: 40px !important;
  text-indent: 5px;
  background-color: #4054b2;
  color: rgb(255, 255, 255);
  bottom: 40px !important;
  left: auto !important;
  right: 0px !important;
  z-index: 9999;
  opacity: 1;
}
i._access-icon._access {
  width: 50px;
  height: 50px;
  font-size: 40px;
  line-height: 45px;
  text-indent: 5px;
  background-color: transparent;
  color: rgb(255, 255, 255);
  bottom: none;
  left: 0px;
  z-index: 9999;
  opacity: 1;
  top: 130px !important;
}
._access-menu.bottom {
  bottom: none;
  top: 100px !important;
}
._access-menu.left {
  left: auto !important;
  right: 0 !important;
}
._access-menu.close.left {
  left: auto !important;
  right: -25vw !important;
}



#sp-webtools .sp-column{
	display: inline-flex !important;
}
.font-option{
	padding: 0 10px 0 0;
}

#sp-webtools{
	padding: 5px 20px;
	background: #000;
	color: #fff;
	text-align: center;
	font-size: 14px;
}

#sp-section-1{
	background: #005aa8 !important;
	border-bottom: 5px solid #e89f1e;
}

#sp-logo-menu {
    background-color: #3dc8dd !important;
}
.kerawang{
	background: url('../images/kerawang-header-2.png') no-repeat right !important;
	padding-bottom: 10px;
}
#sp-logo-menu img{
	margin-left: auto;
	margin-right: auto;
}
#sp-top-nav{
	background: #005aa8 !important;
}


.logo-header{
	padding-right: 10px !important;
}

.logo-header p{
	margin: 0px;
}

#sp-menu > .sp-column .sp-megamenu-wrapper {
    margin-right: auto;
    margin-left: auto;
}
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
    display: inline-block;
    padding: 0 15px;
    line-height: 50px !important;
    margin: 0;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    background: #fff;
}

.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a {
    font-weight: 600 !important;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover{
	background: #f6ea0d !important;
	color: #000 !important;
	padding:8px;
	font-weight: bold !important;
	display: block;
	width: 100%;
	border-radius: 4px;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner li.sp-menu-item > a {
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 20px;
}


.sp-megamenu-parent > li:not(:last-child)::after {
    content: "/";
    color: #000;
    font-weight: 700;
}

/*carian*/
label.finder {
    display: none !important;
}
.sppb-form-group .sppb-form-control, .form-control, input[type="text"]:not(.form-control), input[type="email"]:not(.form-control), input[type="url"]:not(.form-control), input[type="date"]:not(.form-control), input[type="password"]:not(.form-control), input[type="search"]:not(.form-control), input[type="tel"]:not(.form-control), input[type="number"]:not(.form-control), select:not(.form-control) {
    display: block;
    width: 100%;
    color: #9a9a9a;
    border: none;
    border-bottom: 0px solid #252525;
    border-radius: 0px;
    font-weight: normal;
    font-size: 14px;
    line-height: 30px;
    letter-spacing: -0.3px;
    padding: 5px;
    background: #fff;
    border-radius: 3px;
}

.js-finder-search-query.form-control{
	border: 1px solid #ccc;
}
.word.mb-3 .form-inline{
	display: inherit !important;
}




/*waktu solat*/
.ai-width-1-5 {
    width: 70px;
    border-right: 0px solid #777;
    padding: 0 10px;
    line-height: 20px;
    text-align: center;
}

.ai-text-center{
	display: flex;
	font-size: 12px;
	color: #fff;
}
.ai-text-center hr{
	display: none;
	margin-right: 10px;
}
.ai-oc{
	display: contents !important;
}
.ai-grid.ai-text-center{
	display: flex;
	font-size: 14px;
	color: #fff;
}


#section-id-1614910633372 .sppb-row-container{
	border-bottom: 2px solid #072771;
}



.waktu-solat .ai-width-1-5 {
    width: 20% !important;
}
@media only screen and (max-width: 768px) {

	.waktu-solat .ai-width-1-5 {
    width: 14% !important;
}

    .ai-text-center{
	display:  block !important;
	font-size: 12px;
	color: #fff;
	}
    .ai-grid.ai-text-center{
	display: block !important;
	font-size: 12px;
	color: #fff;
	padding-top: 5px;
	}

  #section-id-1614910633372 .ai-width-1-5{
  padding: 0 20px 0 20px;
  border:0px !important;
  font-size:10px !important;
  line-height:14px;
  }

  #section-id-1614910633372 .ai-width-1-5 strong{
  border:0px !important;
  font-size:10px !important;
  }

}



/*media social*/
ul.social-icons {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block;
}

ul.social-icons > li {
    display: inline-block;
    margin: 5px;
    font-size: 16px;
    line-height: 30px;
    width: 30px;
    text-align: center;
    height: 30px;
    background: #fff;
    border-radius: 50%;
}

.fa.fa-facebook{
	color:#3950a4;
}
.fa.fa-twitter{
	color:#63b8fb;
}
.fa.fa-youtube{
	color:#fc3141;
}
.fa.fa-instagram{
	color:#df4f93;
}


#sppb-addon-1614915137382 .sppb-addon-title:before {
    content: url('../images/ibadah.svg');
    width: 50px;
	display: inline-block;
	padding-right: 10px;
	vertical-align: middle;

}
#sppb-addon-1614915137508 .sppb-addon-title:before {
    content: url('../images/pendidikan.svg');
    width: 50px;
	display: inline-block;
	padding-right: 10px;
	vertical-align: middle;
}
#sppb-addon-1614915137503 .sppb-addon-title:before {
    content: url('../images/kaunseling.svg');
    width: 50px;
	display: inline-block;
	padding-right: 10px;
	vertical-align: middle;
}
#sppb-addon-1614915137518 .sppb-addon-title:before {
    content: url('../images/social.svg');
    width: 50px;
	display: inline-block;
	padding-right: 10px;
	vertical-align: middle;
}
#sppb-addon-1614915137513 .sppb-addon-title:before {
    content: url('../images/fasiliti.svg');
    width: 50px;
	display: inline-block;
	padding-right: 10px;
	vertical-align: middle;
}
#sppb-addon-1614915137523 .sppb-addon-title:before {
    content: url('../images/masjid.svg');
    width: 50px;
	display: inline-block;
	padding-right: 10px;
	vertical-align: middle;
}

/*pengumuman*/
.sppb-articles-scroller-date-left-content {
    background: #212125;
    padding: 10px;
    }

.sppb-addon-articles-scroller-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/*berita*/
.bx-wrapper img {
    max-width: 100%;
    display: none !important;
}

.sppb-articles-carousel-link {
    margin: 12px 0;
    font-size: 20px;
    color: #000;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.bx-wrapper {
    position: relative;
    margin-bottom: 0px;
}
.sppb-addon-articles-carousel .bx-controls.bx-has-pager {
    position: absolute;
    width: 100%;
    top: -20px !important;
}



#section-id-1615174795567{
	background: #bfedff;
}


/*container*/
@media(min-width: 1400px) {
 .sppb-row-container {
  max-width: 1140px !important;
 }
}


/*================================FASILITI===================================*/
body.facility-page .sp-module-content .menu {
	list-style: none !important;
}

body.facility-page .sp-module-content .menu li{
	display: inline-block;
	padding: 20px;
	width: 33%;
	vertical-align: top;
	text-align: center;
}

body.facility-page .sp-module-content .menu li a img{
	margin:10px auto;
}

body.facility-page .sp-module-content .menu li a .menu-image-title{
	font-size: 16px;
	text-transform: uppercase;
	font-weight: bold;
}

body.facility-page .sp-module-content .menu li ul.menu-child{
	padding-left: 0px;
	margin-top:10px;
}

body.facility-page .sp-module-content .menu li ul.menu-child li{
	display: block;
	width: 100%;
	padding:4px 10px !important;
}

body.facility-page .sp-module-content .menu li ul.menu-child li a:hover{
	text-decoration: underline;
}

.article-social-share{
	display: none !important;
}

/*=======================breadcrumb=========================*/
.breadcrumb{
	background: transparent;
	padding-right: 60px;
	float: right;
	vertical-align: middle;
}

.breadcrumb li.float-left{
	display: none !important;
}

.breadcrumb li.breadcrumb-item a.pathway span,
.breadcrumb li.breadcrumb-item.active::before,
.breadcrumb li.breadcrumb-item.active span,
.breadcrumb li.breadcrumb-item:before,
.breadcrumb li.breadcrumb-item span{
	color:#fff !important;
	text-shadow: 1px 1px 4px #000;
}

.bread-bg{
	height: 200px;
	background-image: url('../images/bg-breadcrumb/standard.jpeg');
	background-position-y:440px;
	background-size: cover;
	display: table-cell;
	width: 100vw;
	vertical-align: middle;
}

h1, h2, h3, h4, h5, h6{
	font-family: 'Mukta', sans-serif !important;
	font-weight: 700;
	color: #1b2b68;
}

#sp-main-body {
  padding: 50px 0 100px;
}


.bx-has-controls-direction .fa{
	font-weight: 600 !important;
}

div.bx-wrapper .bx-controls-direction a {
    text-indent: initial;
    color: #000;
    font-size: 16px;
    text-align: center;
    left: 15px !important;
    width: 20px;
}
.bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    margin-top: -10px !important;
    outline: 0;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    z-index: 9999;
}
div.bx-wrapper .bx-controls-direction a.bx-next {
    left: 50px !important;
}
/*div.bx-wrapper .bx-controls-direction a.bx-next:before {
    content: "|";
    padding-right: 4px;
}*/
.sppb-addon-articles-carousel .bx-wrapper .bx-pager.bx-default-pager a {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50px !important;
    position: relative;
    overflow: hidden;
    transition: .35s;
}
.sppb-addon-articles-carousel .bx-wrapper .bx-pager.bx-default-pager a.active {
    width: 20px !important;
}
.bx-wrapper .bx-pager.bx-default-pager a {
    background: #465590;
    }
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus,
.bx-wrapper .bx-pager.bx-default-pager a:hover {
    background: #1b2b68;
}




.over-gambar .sppb-addon-overlay-image-content {
    height: 200px !important;
}
.overlay-image-title {
    position: relative;
    z-index: 999;
    left: -20px;
	top: 20px;
}

 .overlay-background-style {
    background: #45a9f5;
    position: absolute;
    top: 45%;
    left: -50% !important;
    z-index: 10;
    width: 150%;
    height: 100%;
    transform: rotate(200.25deg);
    transition-property: all;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.over-gambar .overlay-background-style:hover {
    top: 50% !important;
}
.overlay-background-style::after {
    top: 50%;
}


.sppb-addon.sppb-addon-text-block.text-right.mr-4{
	text-align: center !important;
	transform: translateY(10px);
	transition: transform 0.3s ease;
	padding: 0px;
	margin: 0px;
	line-height: 20px;
}

.social-icons{
	transform: translateY(10px);
	transition: transform 0.3s ease;
	padding: 0px;
	margin: 0px;
	line-height: 20px;
}
.form-search{
	transform: translateY(6px);
	transition: transform 0.3s ease;
	padding: 0px;
	margin: 0 0 10px 0;
	line-height: 20px;
}
.form-search #mod-finder-searchword116 {
  display: block !important;
  width: 100%;
  color: #000 !important;
  border: none;
  border-bottom: 1px solid #fff !important;
  border-radius: 0px;
  font-weight: 500;
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: -0.3px;
  padding: 8px 5px !important;
  background: #fff  !important;
  border-radius: 5px !important;
}

.rsform-block-kategori .col-sm-9.formControls{
	background: transparent !important;
}
.rsform-block-kategori .col-sm-9.formControls::after{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f107";
	float: right;
	position: absolute;
	right: 24px;
	top: 9px;
	color: #6c757d;
	height: 2px;
}

html.coming-soon body, html.offline body{
  background-repeat: no-repeat;
	background-position: 10% 56%;
  background-image: url('../images/bread-bg.jpg');
}

html.offline body .input-group .form-control{
  border: 1px solid #ced4da;
}

.sppb-addon-feature.style-two {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .15);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  border-radius: 5px;
  position: relative;
}
.sppb-addon-feature.style-two:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 0.4s;
  z-index: 1;
  border-radius: 5px;
}
.sppb-addon-feature.style-two .sppb-addon-content {
  z-index: 10;
}
.sppb-addon-feature.style-two .sppb-addon-content .sppb-img-container {
  margin-bottom: 30px;
}
.sppb-addon-feature.style-two .sppb-addon-content .sppb-img-container img {
  transition: height 0.4s;
  height: 70px;
}
.sppb-addon-feature.style-two .sppb-addon-content .sppb-addon-text {
  margin-top: 15px;
  display: none;
}
.sppb-addon-feature.style-two:hover:before {
  box-shadow: 0 10px 20px rgba(0, 0, 0, .4);
}
.sppb-addon-feature.style-two:hover .sppb-img-container img {
  height: 50px;
}

.equal-addons.equal2 .sppb-column-addons > div {
	z-index: 2 !important;
	position: relative !important;
}

.equal-addons .sppb-column-addons > div {
  height: 100px;
	z-index: 1 !important;
}


.sp-page-builder .page-content #section-id-1615174795567{
	z-index: 0;
}


/*custom breadcrumb perkhidmatan*/
/*ibadah*/
.sp-module.bread.bread-ibadah .sp-module-content .bread-bg {
  background-image: url('../images/bg-breadcrumb/ibadah.jpeg') !important;
	background-position-y:400px !important;

}

/*dakwah*/
.sp-module.bread.bread-dakwah .sp-module-content .bread-bg {
  background-image: url('../images/bg-breadcrumb/dakwah.jpeg') !important;
	background-position-y:700px !important;
}


/*fasiliti*/
.sp-module.bread.bread-fasiliti .sp-module-content .bread-bg {
  background-image: url('../images/bg-breadcrumb/fasiliti.jpeg') !important;
	background-position-y:700px !important;
}

/*programme*/
.sp-module.bread.bread-programme .sp-module-content .bread-bg {
  background-image: url('../images/bg-breadcrumb/programme.jpeg') !important;
	background-position-y:1000px !important;
}

/*hubungi*/
.sp-module.bread.bread-hubungi .sp-module-content .bread-bg {
  background-image: url('../images/bg-breadcrumb/hubungi.jpeg') !important;
	background-position-y:-700px !important;
}

/*galeri*/
.sp-module.bread.bread-galeri .sp-module-content .bread-bg {
  background-image: url('../images/bg-breadcrumb/galeri.jpeg') !important;
	background-position-y:500px !important;
}

#sppb-addon-1630282987657 .nspArt h4.nspHeader {
  font-size: 16px !important;
	margin-bottom: 0px !important;
	padding-bottom: 0px !important;
}

#sppb-addon-1630282987657 .nspArt h4.nspHeader a{
  color: #000 !important;
}

#sppb-addon-1630282987657 .nspPagination{
	margin-bottom: 14px !important;
}



@media (max-width: 800px) {

	#sppb-addon-1630282987657 .readon-button{
		position: absolute;
		right: 0px;
		bottom: 10px;
	}

}

@media (min-width: 801px) {

	#sppb-addon-1630282987657 .readon-button{
		position: absolute;
		right: 20px;
		bottom: 45px;
	}

}

@media (max-width: 991px) {

	.hijri_date{
		margin-bottom: 10px !important;
	}

	#sppb-addon-1632039727064 .apt-main{
		padding: 0px !important;
	}
	.apt-time, .apt-location{
		padding: 0 0px !important;
		margin: 0 2px !important;
	}

	label.apt-display-block.apt-label {
    transform: translateY(0px);
    transition: transform 0.3s ease;
    padding: 0px;
    margin: 0px;
    line-height: 20px;
	}

	#sppb-addon-1632039727066{
		margin-bottom: 30px;
	}

}

@media (min-width: 992px){
	label.apt-display-block.apt-label {
    transform: translateY(0px);
    transition: transform 0.3s ease;
    padding: 0px;
    margin: 0px;
    line-height: 20px;
	}
	.apt-time, .apt-location {
    padding: 0 5px !important;
    margin: 0 5px !important;
	}
}


/*article page*/
.article-details .article-header h1, .article-details .article-header h2,
#directory h5.department-title{
	background-color: #3dc8dd;
	padding: 10px;
	margin-bottom: 20px;
}

.mfp-content{
  text-align:center !important;
}

.hijri_date{
	text-align: center !important;
	transform: translateY(5px);
	transition: transform 0.3s ease;
	font-size: 14px;
    font-weight: bold;
    color:#fff;
line-height: 18px;
}

.hj_ad{
	margin-right: 5px;
	margin-left: 5px;
}

.hj_label,
.hj_day,
.hj_ad,
.hj_date{
	font-size: 12px;
}