html, body{ font-family: Inter !important;letter-spacing: 0.5px; }
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {background: #F5F5F5 !important; }
::-webkit-scrollbar-thumb {background: #E9E9E9; }
::-webkit-scrollbar-thumb:hover {background: #E9E9E9 !important; }
input, select, option, textarea{
  font-size: 12px !important;
}
.first-content-campaign{ height: 175px !important; overflow: hidden !important; }
.header-sm{ display: none; }
.bg-green-paz{ background: #07A148 !important; }
.bg-orange-paz{background: #FFA41D !important;}
.dropdown-indicator-mintop{line-height: normal !important;}
.form-note{font-size: 11px !important;}
.dropdown-indicator-mintop::after{margin-top: -7px !Important;margin-right: 3px !important;}
.main-header-tools{padding-top: 5px !important;padding-bottom: 5px !important;}
.container_loading_bar {display: flex;justify-content: center;align-items: center;height: 100vh;}
.container_loading_bar .loading-bar {
  display: flex;height: 5px;width: 100%;max-width: 320px;box-shadow: inset 0px 0px 0px 1px #C8C8CD;border-radius: 50px;overflow: hidden;
}
.badge-success{
  background: rgba(7, 161, 72, 0.1) !important;
}
.badge-warning{
  background: rgba(255, 149, 5, 0.1) !important;
}
@-webkit-keyframes progress-animation {
  0% { width: 0%; }
  20% { width: 25%; }
  40% { width: 50%; }
  50% { width: 75%; }
  100% { width: 100%; }
}
@keyframes progress-animation {
  0% {width: 0%;}
  20% {width: 25%;}
  40% {width: 50%;}
  50% {width: 75%;}
  100% {width: 90%;}
}
.container_loading_bar .loading-bar .progress-bar {
  display: flex;height: 100%;width: 100%;background: linear-gradient(-180deg,#f53d2d,#f63) !important;
  -webkit-animation: progress-animation 3s ease-in-out;animation: progress-animation 3s ease-in-out;
}
.fixed-donasi-content-action{
  position: fixed; right: 10%; max-width: 40%;
}
.absolute-footer{
  position: absolute;bottom: 0;width: 100%;
}
.fixed-menu-detail-campaign{
    position: fixed;
    top: 10%;
    width: 40%;
    background: #ffffff;
    z-index: 99;
}
.mb-25-percent{ margin-bottom: 25% !important;  }
#startup {
  width: 100%;height: 100%;position: relative;background-color: #FFFFFF;
  -moz-user-select: none;-webkit-user-select: none;
  display: flex;align-items: center;justify-content: center;display: -webkit-box;display: -webkit-flex;
  -webkit-align-items: center;-webkit-justify-content: center;
  padding:0px;position: absolute;left: 0;right: 0;
}
.spinner-container {
  -webkit-animation: rotate 2s linear infinite;animation: rotate 2s linear infinite;
}
.spinner-container .path {
  stroke-dasharray: 1,150;stroke-dashoffset: 0;stroke: rgba(27, 154, 89, 0.7);stroke-linecap: round;
  -webkit-animation: dash 1.5s ease-in-out infinite;animation: dash 1.5s ease-in-out infinite;
}
@keyframes rotate {100% { transform: rotate(360deg); }}
@-webkit-keyframes rotate{100% { -webkit-transform: rotate(360deg); }}
@keyframes dash {
  0% {stroke-dasharray: 1,150;stroke-dashoffset: 0;}
  50% {stroke-dasharray: 90,150;stroke-dashoffset: -35;}
  100% {stroke-dasharray: 90,150;stroke-dashoffset: -124;}
}
@-webkit-keyframes dash {
  0% {stroke-dasharray: 1,150;  /* 1%, 101% circumference */stroke-dashoffset: 0;}
  50% {stroke-dasharray: 90,150;stroke-dashoffset: -35;}
  100% {stroke-dasharray: 90,150;stroke-dashoffset: -124;}
}
.edit_foto{
  position: absolute !important;top: 0 !important;right: 0 !important;width: 25px !important;height: 25px !important;
  line-height: 25px !important;text-align: center !important;border-radius: 50% !important;font-size: 15px !important;
}
.edit_foto .icon{line-height: 25px !important;}
.pagination li a{
  font-size: 0.8125rem !important;display: inline-flex !important;align-items: center !important;justify-content: center !important;
  min-width: calc(1rem + 1.125rem + 2px) !important;position: relative !important;padding: 0.5625rem 0.625rem !important;margin-left: -1px !important;
  line-height: 1rem !important;color: #526484;background-color: #fff;border: 1px solid #e5e9f2;
}
.pagination li.active a{
  color: #fff !important;background-color: #854fff !important;border-color: #854fff !important;
}
.label-info {
  background-color: #5bc0de;display: inline;padding: .2em .6em .3em;font-size: 75%;font-weight: 700;
  line-height: 1;color: #fff;text-align: center;white-space: nowrap;vertical-align: baseline;border-radius: .25em;
}
.icon-status.no-notif:after{display: none !important;}
.item-table-responsive ul{text-align: left !important;}
.img_list{height: 250px !important;display: flex !important;justify-content: center !important;}
.img_list img{width: auto !important;height: auto !important;}
.act-img-list{position: absolute !important;left: 0 !Important;bottom: 0 !important;}
.user-card .user-avatar img{width: 100% !important;height: 100% !important;}
.singkat{text-overflow: ellipsis !important;overflow: hidden !important;white-space: nowrap !important;}
.datatable-wrap{border: none !important;}
.nk-sidebar-head{
  min-width: 250px !important;width: 275px !important;height: 55px !important;margin: auto !important;
  background-image: linear-gradient(245deg, #4db0ff 3%, rgb(3 74 131) 98%) !important;border-radius: 0px 0px 18px 18px !important;
}
.is-dark .nk-quick-nav-icon{color:  #ffffff !important;}
.nk-sidebar-logo{display: flex !important;align-items: center !important;}
.logo-label{
  float: right;color: #FFFFFF;font-size: 20px;letter-spacing: 0.5px; margin-left: 10px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;width: 150px;
}
.card-inner{padding: 15px !important;}
.card + .card{margin-top: 0px !important;}
.card-title, .row{margin-bottom: 0.375rem !important;}
.logo-img-lg{max-height: 75px !important;}
.nk-header-fixed + .nk-content{margin-top: 50px !important;}
.nk-block-title{font-size: 18px !important;}
.nk-block-des{font-size: 13px !important;}
.page-content, .page-manage{padding: 0px 15px !important;}
.header-page{
  box-shadow: 0 2px 2px rgb(0 0 0 / 12%) !important;margin-top: 54px !important; 
  border: none !important;border-radius: 0px !important;
}
.nk-block-head{padding-bottom: 10px !important;}

.box-card-item{
  box-shadow: 0px 16px 24px rgb(0 0 0 / 6%), 0px 2px 6px rgb(0 0 0 / 4%), 0px 0px 1px rgb(0 0 0 / 4%) !important;border-radius: 12px !important;border: none !important;
}
.box-card-item .box-img{
  height: 208px !important;display: flex !important;align-items: center !important;
  justify-content: center !important;overflow: hidden !important;border-radius: 4px 4px 0px 0px;
}
.box-card-item .box-img img{
  width: auto !important;max-width: 100% !important;
  height: auto !important;max-height: 100% !important;
}
.box-card-item .box-detail{
  height: 140px !important;border-radius: 0px 0px 4px 4px !important;
}
.box-detail-large{
  height: 165px !important;border-radius: 0px 0px 4px 4px !important;
}
.btn-outline-success{
  color: #07A148 !important;border-color: #07A148 !important;
}
.btn-outline-success:hover{
  color: #ffffff !important;background-color: #07A148 !important;
}
.btn-success{
  background-color: #07A148 !important;border-color: #07A148 !important;
}
.btn-outline-orange-paz{
  color: #FFA41D !important;border-color: #FFA41D  !important;
}
.btn-outline-orange-paz:hover, .btn-outline-orange-paz:active{
  color: #121527 !important;background-color: #FFA41D !important;
}

/*==================================== CSS HMI ====================================*/
article{font-size: 13px !important;}
article h4{font-size: 20px !important;margin: 0.5rem 0px !important;}
article p{margin: 0px !important;}
.breadcrumb-item a{color: #07A148 !important;}
.breadcrumb-item.active{color: #121527 !important;}
header{min-height: 0px !important;max-height: 60px !Important;padding: 0px !important;}
.header-wrap{height: 60px !important;padding: 0px !important;}
.header-main{position: fixed !important;z-index: 99999999 !important;}
.menu-link{padding: 0px 1rem !important;}
.header-text-only{margin-bottom: 0px !important;min-height: 65vh;}
.header-no-content{margin-bottom: 0px !important;min-height: 0px;}
.itm-list .itm-left img{border-radius: 4px !important;}
.itm-list .itm-right .itm-title{font-size: 13px !important;font-weight: bold !important;margin-bottom: 5px !important;}
.itm-list .itm-right .itm-subtitle{color: #757682 !important;font-size: 12px !important;}
.itm-more{display: flex !important;align-items: center !important;}
.itm-more a span{margin-right: 5px !important;}
.itm-inner{
  position: absolute !important;bottom: 0 !important;left: 0 !important;right: 0 !important;
  width: 100% !important;background: rgba(26, 30, 39, 0.7) !important;padding: 10px !important;
}
.itm-inner .itm-subtitle{font-size: 12px !important;margin: 0px !important;}
.itm-inner .itm-title{font-size: 13px !important;font-weight: bold !important;}
.menu-link:hover, .active>.menu-link, .menu-link.active{color: #ffffff !important;}
.bg-grad-a{background-image: linear-gradient(181.98deg, #07A148 26.57%, rgba(7, 161, 72, 0) 283.01%) !important;}
.menu-link{font-size: 13px !important;}
.header-logo .logo-img{height: 50px !important;}
.header-title{text-transform: uppercase !important;font-family: Inter;font-weight: bold;letter-spacing: 0.5px;font-size: 40px;}
.header-text p{color: #FFFFFF !important;font-size: 14px;letter-spacing: 0.5px;}
.title-section{text-align: center;letter-spacing: 0.02em;text-transform: uppercase;}
.title-section span{
  color: #ffffff;display: inline-block;background: linear-gradient(265.12deg, #07A148 28.42%, #7FC241 100%);
  -webkit-background-clip: text;-webkit-text-fill-color: transparent;
  padding-bottom: 3px;border-bottom: 2px solid #07A148;font-weight: bold;
}
.section-head .title{font-size: 30px !important;color: #2E3E5C !important;letter-spacing: 0.5px !important;}
.section-head .title p{color: #757682 !important;font-size: 14px !important;}
.section{padding: 2rem 0 !important;}
#footer{background: #FBFBFB !important;}
#footer .title-item{color: #121527 !important;font-weight: bold !important;font-size: 15px !important;}
#footer .items ul li a{color: #757682 !important;font-size: 13px !important;}
#footer .items ul li{margin-bottom: 5px !important;}
.footer-contact li a{display: flex !important;align-items: center !important;}
.footer-contact li a i, .footer-contact li a em{
  width: 25px !important;height: 25px !important;display: inline-block !important;
  text-align: center !important;line-height: 25px !important;border-radius: 80px !important;font-size: 15px !important;
}
.footer-contact li a span{margin-left: 10px !important}
.footer-social a{margin-right: 10px !important;}
.footer-social li a i, .footer-social li a em{
  width: 35px !important;height: 35px !important;display: inline-block !important;
  text-align: center !important;line-height: 35px !important;border-radius: 80px !important;font-size: 20px !important;
}
#footer .logo-img{height: 75px !important;}
.slick-slide{margin: 0px 5px !important;padding-bottom: 5px !important;}
.inner-title .text-title{font-size: 14px !important;}
.inner-title p{font-size: 12px !important;color: #757682 !important;}
.inner-desc div{font-size: 13px !important;color: #757682 !important;display: flex !important;align-items: center !important;}
.inner-desc div em, .inner-desc div i{font-size: 15px !important;}
.inner-desc div span{font-size: 13px !important;margin-left: 5px !important;}
.pagination-slide button, .is-pagination-slide-item{
  margin: 0px 3px !important; border: 1px solid #07A148 !important;display: inline-flex !important;width: 30px !important;height: 30px !important;
  line-height: 30px !important;text-align: center !important;justify-content: center !important;border-radius: 50% !important; background: transparent !important;
  color: #07A148 !important;
}
.pagination-slide button.slick-disabled, .is-pagination-slide-item.slick-disabled{ border:1px solid #07a14847 !important;color:#07a14847 !important; }
.pagination-slide button:focus, .pagination-slide button:hover, .pagination-slide button:active{ box-shadow:none !important; }
.is-pagination-slide-item:focus, .is-pagination-slide-item:hover, .is-pagination-slide-item:active{ box-shadow:none !important; }
.default-pagination-slide.to-left{left: -45px !important;}
.default-pagination-slide.to-right{right: -45px !important;}
.top-content-dark{
  position: fixed;top: 0;left: 0;width: 100%;background: rgba(0, 0, 0, 0.64);
  z-index: 999999999;height: 40px;color: #ffffff;
}
.bottom-content-dark{
  position: fixed;bottom: 0;left: 0;width: 100%;background: rgba(0, 0, 0, 0.64);
  z-index: 999999999;height: 40px;color: #ffffff;
}
.top-content-dark .block-content, .bottom-content-dark .block-content{padding: 0px 10px;}
.top-content-dark .left, .bottom-content-dark .left{flex: 20% !important;text-align: left;}
.top-content-dark .title, .bottom-content-dark .title{flex: 60% !important;text-align: center;font-size: 13px;}
.top-content-dark .right, .bottom-content-dark .right{flex: 20% !important;text-align: right;}
.color-paz{color: #07A148 !important;}
.color-orange-paz{color: #FD7D24 !important;}
.default-pagination-slide.on-show{top: 50% !important;}
.default-pagination-slide.on-show-dark{
  background: #ffffff!important;border-color: #121527 !important;color: #121527 !important;
}
.default-pagination-slide.to-left.l-10{left: 10px !important;}
.default-pagination-slide.to-right.r-10{right: 10px !important;}
.is_miny_header{min-height: 20vh !important;}
.box-custom-control{border: 1px solid #dbdfea  !important;padding: 3px 10px  !important;}
.box-custom-control.active{border: 1px solid #07A148  !important;}
.box-custom-control.active label{color: #07A148  !important;}
.box-custom-control.active label::before{
  color: #FFFFFF  !important;border-color: #07A148;background-color: #07A148;
}
.slide-banner ul.slick-dots{ text-align: left !important; }
.slick-dots li{  width: 10px !important;height: 10px !important; }
.slick-dots li.slick-active{  width: 40px !important;}
.slick-dots li button{ width: 10px !important;height: 10px !important;background:#b6c6e3 !important;  }
.slick-dots li.slick-active button{ background-color: #4caf50 !important;width: 40px !important; }
.slick-dots li.slick-active button:before{ width:40px !important;  }
.slick-dots li button:before{ width: 10px !important;height: 10px !important; }
.pagination-slide{ margin:0px !important; }
.pagination-slide.right{ justify-content: end !important; }
.pagination-slide.bottom{ margin-top:-25px !important; }
.lazy-banner{height: 300px;display: inline-block;width: 100%;}
.nav-link:focus, .nav-link:active, .nav-link:hover{ color: #07A148 !important; }
.card-item{ padding: 10px 15px !important; }
.item-title{color: #121527 !important; font-weight: bold !important; font-size: 13px !important;}
.item-subtitle{ color: #121527 !important;font-size: 12px !important; }
.amount-price{color: #07A148 !Important;font-weight: bold !Important;font-size: 14px !Important;letter-spacing: 0.5px !Important;}
.amount-text{color: #757682 !Important;font-size: 10px !Important;}
.progress{ background: #E9E9E9 !Important; }
.item-campaign-desc{ justify-content: space-between !important; }
.count-campaign, .time-campaign{color: #121527 !Important;font-size: 11px !Important;}
.count-campaign span, .time-campaign span{ font-size: 12px !Important;font-weight: bold !Important;margin-right: 5px !Important; }
.head-item{padding: 10px 0px !important;margin: 0px !important;margin-bottom: 1rem !important;}
.head-item .title{color: #121527 !important;font-weight: bold !important;letter-spacing: 0.5px !important;font-size: 18px !important;}
.category-list, .menu-detail-campaign-list{
  border: 1px solid #AAACBA !important;box-sizing: border-box !important;border-radius: 30px !important;color: #121527 !important;
  min-width: 75px !important;text-align: center !important;justify-content: center;
}
.category-list.active, .menu-detail-campaign-list.active{background: #07A148 !important;border: 1px solid #07A148 !important;color: #ffffff !important;}
#category-campaign .category-list{margin: 0px 3px !important;}
.is-pagination-slide-item{position: absolute;top: 50%;}
.is-pagination-slide-item.left{ left:-25px; }
.is-pagination-slide-item.right{ right:-25px; }
.box-card-cover-campaign{ box-shadow: none !important; }
.box-card-cover-campaign .box-img{height: 325px !important;}
.box-card-cover-campaign .box-img.small{height: 75px !important;}
.content-detail-campaign{margin-bottom: 1rem !important;position: relative;}
.content-detail-campaign .title{color: #121527;font-weight: bold;font-size: 13px;}
.content-detail-campaign .desription{color: #121527;font-size: 11px;}
.box-disclaimer, .box-warning{
  background: rgba(255, 149, 5, 0.04);border: 1px solid rgba(255, 149, 5, 0.5);box-sizing: border-box;border-radius: 6px;color: #121527;
}
.box-disclaimer .title, .box-warning .title{font-size: 11px;}
.box-disclaimer .text, .box-warning .text{font-size: 10px;}
#main-detail-campaign .title-campaign{color: #121527;font-weight: bold;font-size: 18px;}
#main-detail-campaign .subtitle-campaign{color: #121527;font-size: 14px;}
#main-detail-campaign .date-campaign{color: #757682;font-size: 12px;}
#main-detail-campaign .amount-campaign .total{color: #07A148;font-weight: bold;}
#main-detail-campaign .amount-campaign .description{color: #757682;font-size: 12px;}
.box-card-item .box-img.h-big-cover-campaign{ height: 305px !important; }
#campaign-donasi .item-title{ font-size: 15px !important; }
#campaign-donasi .amount-price{ font-size: 16px !important; }
#accordion-payment .accordion-icon{left: 10px;}
#accordion-payment .accordion-item{border: 1px solid #dbdfea !important;border-radius: 6px;}
#accordion-payment .accordion-head, #accordion-payment .accordion-item:not(:last-child) .accordion-inner{border: 0px !important;}
#accordion-payment .accordion-head{border-radius: 6px 6px 0px 0px !important;}
#accordion-payment .accordion-head.collapsed{border-radius: 6px !important;}
.lazy-category-button{
  width: 70px;height: 30px;display: inline-flex;margin: 0px 3px;box-sizing: border-box !important;
  border-radius: 30px !important;color: #121527 !important;text-align: center !important;justify-content: center;position: relative;vertical-align: middle;
}
.box-card-item .detail-item{ height:150px !important; }
#is-payment-list{ height: auto;max-height: 300px;overflow: auto; }
#to-top a{
  border-radius: 50% !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
  text-align: center !important;
  padding: 0px !important;
  justify-content: center !important;
  color: #ffffff !important;
  position: fixed !important;
  right: 20px !important;
  bottom: 10% !important;
}
.border-bottom-line{border-bottom: 1px solid #E9E9E9 !important;}
.title-lembaga-detail{font-size: 20px !important;}
.to-lembaga span:hover, .to-lembaga span:active{ color: #07A148 !important;  }
.area-more-content-campaign{
  position: absolute;
  bottom: 0;
  z-index: 9;
}