body {
  background: url('../images/bg-image-new2.jpg') no-repeat fixed center center / cover !important;
}
.layout-boxed .body-innerwrapper {
  background: transparent;
}
.layout-boxed .body-innerwrapper {
  max-width: 1000px;
  margin: 0 auto;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
body.menu-utama .body-innerwrapper {
  background: transparent;
}

/*toolbar*/
#sp-top-bar {
  background: #174D60;
}
#sp-top-bar a {
  color: #FFF;
}
.medsoc {
	display: inline-flex !important;
}
.medsoc a{
	margin-right: 5px;
}
.bahasa{
	float: right !important;
}
.mod-languagesbahasa {
	display: inline-flex !important;
	
}
.lang-inline{
	list-style: none !important;
}
/*colum*/
.colum-zero .sppb-row-column {
	padding: 0 !important;
}  

/*cari*/
.awesomplete{
	width: 100%;
}
.cari{
	margin: 20px 0 !important;
}
#mod-finder-searchword290{
	border-radius: 0px !important;
}
.form-control::placeholder {
  color: #000;
  opacity: 1;
  font-size: 12px;
  font-weight: 500;
}

/*header*/
#sp-logo{
	margin: 0px;
	padding: 25px;
	background: url('../images/header-bg.jpg') no-repeat !important;
	object-fit: cover;
}
#sp-header {
  height: 140px !important;
  width: 100%;
  position: relative;
  z-index: 99;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
  animation: spFadeIn 0.5s;
}

/*menu*/
.sp-megamenu-parent > li:hover > a {
  color: #a4a4a4;
}
#sp-menu{
	background: #fff;
}
.sp-megamenu-parent > li > a {
  color: #0D0D0D;
}
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
  display: inline-block;
  padding: 0 18px;
  line-height: 70px;
  font-size: 14px;
  margin: 0;
  text-transform: uppercase;
}
.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a {
  color: #666666;
}
.sp-megamenu-parent > li.active > a {
  font-weight: 600;
}
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
  display: inline-block;
  padding: 0 18px;
  line-height: 70px;
  font-size: 14px;
  margin: 0;
  text-transform: uppercase;
  font-weight: 600 !important;
}
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  background: #14a23e;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > span {
  color: #fff;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
  color: #fff;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item{
	padding: 0 5px;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover {
  background: #1ecd53;
}
.sp-dropdown-main.sp-dropdown-mega .sp-dropdown-inner .row > div ul.sp-mega-group {
  padding: 20px;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a, .sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge) {
  font-size: 14px;
  line-height: 0.3 !important;
  display: inline-block;
  padding: 0px 0px 5px 0px;
  cursor: pointer;
}
.sp-megamenu-parent .sp-dropdown-mega .sp-mega-group > li > a {
  font-size: 14px !important;
  line-height: 1.3 !important;
  color: #fff !important;
  font-weight: 400;
}
.sp-dropdown-main.sp-dropdown-mega .sp-dropdown-inner .sp-mega-group > li:hover a::after {
  opacity: 1;
  visibility: visible;
  color: #fff;
}
.sp-dropdown ul li span{
	color: #fff !important;
    margin: 8px 0;
}
.sp-mega-group li.item-header a.sp-group-title,
.sp-mega-group li.item-header span.sp-group-title{
	font-weight: bold;
}


/*mobile menu*/
.burger-icon > span {
    display: block;
    height: 2px;
    background-color: #000;
    margin: 5px 0;
    transition: background-color 0.3s ease-in, opacity 0.3s ease-in, transform 0.3s ease-in;
}

.offcanvas-menu.border-menu{
	overflow: scroll !important;
}
.offcanvas-menu .offcanvas-inner ul.menu > li ul.menu-child {
  display: inherit !important;
}



/*PERSONALISATION*/
#sp-menu{
	z-index: 99 !important;
}
.z1{
	z-index: 9 !important;
}
.z2{
	z-index: 1 !important;
}
.dj-megamenu-default li.dj-up {
  position: relative;
  display: block;
  float: left;
  padding: 0 !important;
  margin: 0 !important;
  width: 25% !important;
}
.dj-megamenu-default li a.dj-up_a > span {
  float: none !important;
  text-align: center;
 }
.dj-submenu li a{
	width: 100% !important;
}

.personalisation {
    padding: 0;
}

.nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    background: none;
}

a.dj-up_a.awam {
    background: #33df66!important;
    width: 100%;
}
a.dj-up_a.penyelidik{
    background: #1fcf54!important;
    width: 100%;
}
a.dj-up_a.swasta {
    background: #14a23e!important;
    width: 100%;
}
a.dj-up_a.warga {
    background: #0b812e!important;
    width: 100%;
}

.personalisation .dj-megamenu-default li a.dj-up_a {
	border-right: 0px solid #fff;  
}
.dj-megamenu-default li a.dj-up_a {
	border-left: 0 !important;
}
span.dj-drop {
    position: relative;
    padding-left: 50px;
	background: none !important;
}
.dj-megamenu-default li:hover a.dj-up_a, 
.dj-megamenu-default li.hover a.dj-up_a, 
.dj-megamenu-default li.active a.dj-up_a {
    color: #fff;
	background: none;
}
.dj-megamenu-default li ul.dj-submenu > li > a {
    color: #fff !important;
}

a.dj-mobile-open-btn::before{
	content:'Menu Pengguna :';
	color:#333;
	font-size: 12px;
	position: absolute;
	left:10px;
	top: 8px;
	font-weight:600;
}



.personalisation .dj-megamenu-select-dark .dj-mobile-open-btn, 
.personalisation .dj-megamenu-offcanvas-dark .dj-mobile-open-btn, 
.personalisation .dj-megamenu-accordion-dark .dj-mobile-open-btn {
    width: 25px !important;
    height: 25px !important;
    font-size: 25px !important;
	float:left;
	margin-left: 120px;
}
.dj-subwrap{
		border: 5px solid #96F1FF;
}
.dj-subwrap-in{
	background:#fff;
}
.dj-megamenu-default li:hover a.dj-up_a, 
.dj-megamenu-default li.hover a.dj-up_a, 
.dj-megamenu-default li.active a.dj-up_a {
    background: #96F1FF !important;
    color: #000 !important;
}

.dj-megamenu-default li ul.dj-submenu > li > a {
    color: #000 !important;
}







/*awam*/
li:first-child .dj-subwrap ul.dj-submenu > li.parent:hover > a,
li:first-child .dj-subwrap ul.dj-submenu > li:hover > a{
    background-color: #96F1FF  !important;
	color: #000 !important;
}

/*penyelidik*/
li:nth-child(2) .dj-subwrap ul.dj-submenu > li.parent:hover > a,
li:nth-child(2) .dj-subwrap ul.dj-submenu > li:hover > a{
    background-color:#96F1FF !important;
	color: #000 !important;
}

/*swasta*/
li:nth-child(3) .dj-subwrap ul.dj-submenu > li.parent:hover > a,
li:nth-child(3) .dj-subwrap ul.dj-submenu > li:hover > a{
    background-color: #96F1FF !important;
	color: #000 !important;
}

/*warga*/
li:nth-child(4) .dj-subwrap ul.dj-submenu > li.parent:hover > a,
li:nth-child(4) .dj-subwrap ul.dj-submenu > li:hover > a{
    background-color: #96F1FF !important;
	color: #000 !important;
}



/*Article*/
#sp-main-body {
  padding: 20px 0;
}
.com-content.view-article #sp-main-body .article-details-intro {
  padding: 10px 0 10px 0;
  background-repeat: no-repeat;
  background-position: bottom;
  position: relative;
  background-image: none;
  background-color: transparent;
  text-align: center;
  background-size: cover;
}
.com-content.view-article #sp-main-body .article-media-wrapper {
  margin-top: 0;
  position: relative;
  z-index: 2;
}
.view-category #sp-main-body{
	background: #12B4D8 !important;
}
.content-category a{
	color: #003ded;
}
.view-category #sp-main-body #sp-component .sp-column {
	padding: 0 15px;
}
.article-details .article-header h1, .article-details .article-header h2 {
  font-size: 24px;
  color: #000;
  line-height: 1.3;
  text-align: left;
}
.article-details-intro .container,
.article-media-wrapper .container{
	padding-bottom: 0 !important;
}
.article-details .article-info {
  color: #666;
}
.article-details {
  font-size: 14px;
  line-height: 1.7;
  background: #12B4D8 ;
}
.article-details .container{
	padding-bottom: 20px;
}
.com-content.view-article #sp-main-body {
  padding-top: 0;
  padding-bottom: 0;
}
.article-details .article-info {
  margin-bottom: 0;
  }
  
/*right menu*/
#sp-left .sp-module, #sp-right .sp-module {
  border: 1px solid #f3f3f3;
  padding: 20px;
  border-radius: 3px;
  background: #fff;
}
#sp-right .menu li.current{
	background: #96F1FF;
}
#sp-right .menu li{
	padding-left: 10px;
	padding-right: 10px;
}
#sp-right .menu li.current a{
	color: #184EE2 ;
}
#sp-right .menu li.current a:hover{
	color: #000;
}
.sp-module ul > li > a:hover {
  color: #184EE2;
}

/*Breadcrumbs*/
#sp-breadcrumbs{
	padding: 0 !important;
}
.breadcrumb a,
.breadcrumb span{
	color: #000 !important;
}
.breadcrumb {
  padding: 8px 15px;;
  background-color: #fff;
  border-radius: 0;
  margin-top: 10px;
  margin-bottom: 0;
}
.breadcrumb .fa-map-marker-alt::before {
  display: none;
}

/*Footer*/
#sp-footer {
  background-color: #174D60 !important;
  color: #FFFFFF;
}


/*offcanvas personalization*/
.dj-mobile-open-btn.dj-fa-1{
	margin-left: 15px !important;
	margin-bottom: 10px !important;
}
.dj-mobile-open-btn.dj-fa-0 .dj-mobile-open-icon::before, .dj-mobile-open-btn.dj-fa-1 .dj-mobile-open-icon::before, .dj-mobile-open-btn.dj-fa-5 .dj-mobile-open-icon::before {
  content: "\f0c9";
  display: inline-block;
  font: normal normal normal 32px/1 "FontAwesome" !important;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.dj-megamenu-select-dark .dj-mobile-open-btn, .dj-megamenu-offcanvas-dark .dj-mobile-open-btn, .dj-megamenu-accordion-dark .dj-mobile-open-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin: 0 auto;
    margin-left: auto;
  padding: 0;
  width: 35px !important;
  height: 35px !important;
  background: #e91e63 !important;
  color: #e4e4e4;
  border: none;
  text-align: center;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: background-color 0.2s ease-out, color 0.2s ease-out;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
  text-decoration: none;
}