@media (min-width: 1000px) {
  .container {
    width: 1000px;
  }
}

input,.btn,select,textarea{
	font-size : 14px!important
}
body {
	font-size : 14px!important;
}

.btn-warning, .bg-warning {
  background: #2e4191!important;
  border-color: #2e4191!important;
  color: white!Important;
}

.btn:hover:before {
  content: '';
  background: rgba(0,0,0,.05)!important;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}

.btn {
  position: relative;
  overflow: hidden;
  box-shadow: none!important;
}

.nav-link.btn {
  min-width: 100px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  padding: 0px;
  justify-content: center;
}

.navbar .nav-link {
  font-size: 14px;
}

@media (min-width: 992px) {
  .navbar .nav-item {
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media (min-width: 992px) {
  .navbar .nav-item:last-child {
    padding-right: 0px!Important;
  }
}

@media (min-width: 992px) {
  .navbar .nav-item:first-child {
    padding-left: 0px!important;
  }
}

.fs-14 {
  font-size: 14px;
}

.fs-15 {
  font-size: 15px;
}

.fs-16 {
  font-size: 16px;
}

.fs-17 {
  font-size: 17px;
}

.fs-18 {
  font-size: 18px;
}

.fs-19 {
  font-size: 19px;
}

.fs-20 {
  font-size: 20px;
}

.fs-22 {
  font-size: 22px;
}

.fs-14 {
  font-size: 14px!important;
}

.fs-15 {
  font-size: 15px!important;
}

.fs-16 {
  font-size: 16px!important;
}

.fs-17 {
  font-size: 17px!important;
}

.fs-18 {
  font-size: 18px!important;
}

.fs-19 {
  font-size: 19px!important;
}

.fs-20 {
  font-size: 20px!important;
}

.fs-22 {
  font-size: 22px!important;
}

.nav-link.form-control {
  height: 40px!Important;
}

.border-bottom-light {
  border-bottom: 1px solid #f9f9f9;
}

main {
  padding-top: 20px;
}

.carousel img {
  border-radius: 5px;
}
 
.card-title p, .card-title h5 {
  margin-bottom: 0px!important;
}

.card-title p {
  font-size: 14px;
  color: var(--secondary);
}

.card-title {
  padding-bottom: 10px;
}

.row {
  margin-left: -.5rem!important;
  margin-right: -.5rem!important;
}

.row .col {
  padding: .5rem!important;
}

.card-donation {
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #f1f1f1;
  display: block;
  text-decoration: none!important;
  color: inherit!important;
}

.card-donation img {
  width: 100%;
}

.card-donation .title {
  font-size: 14px;
  font-weight: 500;
  display: block;
}

.card-donation .card-body {
  padding: 15px;
}

.overflow-2, .text-overflow-2 {
  display: -webkit-box!important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-donation small {
  color: var(--secondary);
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 10px;
}

.progress {
  font-size: 10px;
  height: 10px;
}

.progress-bar {
  background-color: #2e4191;
}

.card-donation .progress {
  margin-bottom: 10px;
}

.card-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 16px;
}

.card-info-price {
  width: 70%;
}

.text-overflow {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.card-info-price span {
  font-weight: 500;
  font-size: 14px;
}

.card-info-day span {
  font-weight: 500;
}

.card-info-day {
  text-align: right;
}

.card-info small {
  margin: 0px!important;
}

.bg-transparent-warning {
  background: rgb(255, 237, 222);
}

.promotion-main {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.promotion {
}

.promotion {
  background: rgb(255, 237, 222);
  padding: 1rem;
  border-radius: 5px;
}

.text-warning {
  color: #2e4191!important;
}

.promotion {
  padding: 2rem;
}

.btn-lg {
  height: 50px;
  font-size: 16px;
}

.tab-round .image-tabs {
  height: 65px;
  margin-bottom: 10px;
  width: 65px;
  border-radius: 100%;
  border: 3px solid transparent;
  background: #f9f9fa;
  border: 3px solid #f9f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-item {
  display: inline-flex;
  justify-content: center;
}

.nav-link.active .image-tabs {
  border: 4px solid #1b237f!important;
}

.nav-link img {
  border-radius: 100%;
}

.nav-link {
}

.tab-round .nav-link {
  max-width: 200px;
  text-align: center;
}

.tab-round .nav-link {
  display: flex;
  align-items: start;
  font-size: 14px;
}

.tab-round .nav-link {
  border: 0px!important;
}

.tab-round .nav-link {
  color: var(--secondary);
}

.nav.tab-round {
  border: 0px!important;
}

.tab-content {
  padding-top: 1rem;
}

.link-apps img {
  height: 40px;
}

.link-apps {
  padding: 5px;
}

.logo {
  height: 40px;
}

.footer {
  padding: 1rem;
  background: rgb(255, 237, 222);
  font-size: 14px;
}

.footer a {
  text-decoration: none!important;
  color: var(--secondary);
}

.footer b, .footer strong, .footer a, .footer p {
  display: block;
}

.footer-link {
  line-height: 26px;
}

.full {
  width: 100%;
  border-radius: 5px;
}

.detail-info p {
  color: var(--secondary);
}

.progress-sm {
  height: 4px;
  border-radius: 3px;
}

.profile-sm {
  height: 50px;
}

.profile-name {
  width: calc(100% - 50px);
  overflow: hidden;
  position: relative;
  display: block;
  padding-left: 10px;
  font-size: 14px;
  line-height: 16px;
}

.detail-description {
  border: 1px solid gainsboro;
  background: white;
  position: relative;
  margin-top: -75px!Important;
}

.relative {
  position: relative;
  display: block;
}

.detail-main {
  position: relative;
  padding-top: 20px;
}

.tab-style .nav-link {
  border: 0px;
  padding: 15px;
  border-bottom: 2px solid transparent!important;
  padding-left: 20px!Important;
  padding-right: 20px!Important;
}

.tab-style .nav-link.active {
  border-bottom: 2px solid #2e4191!important;
  color: #2e4191;
}

@media (max-width: 577px) {
  .tab-style .nav-item {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    text-align: center;
  }
}

.form-small {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.form-small-body {
  width: 500px;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  padding-left: 1rem;
  align-items: center;
  justify-content: center;
  padding-right: 1rem;
}

.form-small-body.form-small-header a {
  color: var(--secondary);
  font-size: 18px;
}

.form-small-body-form {
}

.form-small-body-form {
  width: 500px;
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

.form-small-top {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  background: white;
  z-index: 9999;
}

.form-small-bottom {
  position: fixed;
  background: white;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 9999;
}

.form-small-main {
  min-height: 100vh;
  padding-top: 60px;
  padding-bottom: 90px;
}

.form-small-top .form-small-body, .form-small-bottom .form-small-body {
  height: 60px;
}

.form-input-number {
  font-size: 20px;
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid gainsboro;
  height: 50px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
}

.form-input-number input {
  border: 0px!Important;
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0px;
  font-size: 20px!important;
  text-align: right;
  box-shadow: none!important;
  outline: none!important;
}


.form-input-number img {
  height: 18px;
  margin-right: 10px;
}

.fs-18 {
}

input, textarea, select {
  box-shadow: none!important;
  outline: none!important;
}

input:focus, input:active, textarea:focus, textarea:active {
  border-color: black!important;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


.radius-0{border-radius:0px!important }
.dropdown-menu .dropdown-item{height: 40px; display:flex; align-items:center; font-size : 15px!important;}
.dropdown-menu .dropdown-item:hover{color:white!important;background: #2e4191!important ;}


.btn-link:hover:before{
content:unset!important;
background: transparent!important; 
}

.btn-link,
.btn-link:hover{
text-decoration:none!important;
background: transparent !important;
}

 
.row-image-tabs .image-tabs.active{border:5px solid #1b237f!important;}
th:before,
th:after{content:''!important;}
.table{margin:0px !important; }
th,td{font-size : 14px;}
	td:first-child,th:first-child{padding-left:0px!important;}
	.dataTables_length,
	.dataTables_info{display:none!important;}
	
.dataTables_wrapper > .row:first-child{display:block!important; margin:0px !important; ;}
.dataTables_wrapper > .row:first-child .col-sm-12{padding:0px!important}
.dataTables_wrapper > .row:first-child .dataTables_filter{text-align:left!Important;}


.detail-description img{max-width:100%!Important; }


	.card-donation img{
		max-width:100%;  
	}
	
	.card-donation .image-donation{
		height: 170px; overflow:hidden;
		display:flex; align-items:center; justify-content:center;
		background: #f9f9f9;
		
		border-bottom:1px solid gainsboro;
	}
	
	.card-info-donation .image-donation{
		height: 150px!important;
		background: #f9f9f9;
		border-bottom:1px solid gainsboro;
		overflow:hidden;
		display:flex; align-items:center; justify-content:center;
	}
	
	
	.image-tabs{width : 50px; height: 50px; overflow:hidden; background: #f9f9f9; padding:10px;}
	.image-tabs img{width : 100%; }
	
	
	.owl-nav button:hover{
		background: rgba(0,0,0,0.2)!important;
	}
	
	.owl-nav button{
		width : 40px; 
		height: 50%; display:flex; align-items:center;
	}
	
	
	.owl-nav{
	position: absolute;
    top: 0px;
	margin:0px !important; 
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    font-size: 50px;
    color: white;}
	
	
	
	.aside .btn-group{
		position:absolute; bottom:0px; 
	}
	
	.aside *{font-size : 15px!Important;color:#212529;}
	
	
	.aside-dropdown .btn, 
	.aside-link{
		display:flex!important;
		font-size : 14px!important;
		color:inherit!important;
		min-height:40px;
		padding:0px!important;
		align-items:center;
	}
	 
	.aside-dropdown{
		margin:0px !important; 
		padding:0px; 
	}
	
	
	.aside .dropdown-item{
		padding-top:10px!Important;
		padding-bottom:10px!Important;
		white-space:nowrap;
		display:block!important;
		overflow:hidden;
		text-overflow:ellipsis;
	}
	
	.aside .dropdown-menu .dropdown-item{
		font-size : 14px!important;
	}
	 
	.aside i{font-size : 14px!Important ;width : 25px; text-align:left;}
	 
	.aside .dropdown-menu{
		padding-right:10px!important;
		padding-left:10px!important; 
		background: #f9f9f9;
		transform:none!Important;
		float:none!Important;
		font-size : 14px!Important;
		width : 100%!Important; 
		position:relative!important; margin:0px !important; padding:0px; border:0px!important; 
	}
	
	
	.aside.active{
		left:0px!Important;
	}
	.aside{
		transition:.5s;
		width : 250px; position:fixed; overflow:hidden;
		height: 100vh; left:-250px; top:0px; background: white; z-index:9999!important;
	}
	.aside-main{
		padding-top:10px;
		padding-left:10px; 
		padding-right:10px;
		width : 100%; height: calc(100vh - 60px); overflow:auto; 
	}
	
		
	.slide-x .splide__arrow--next,
	.slide-x .splide__arrow--prev{
		transform:unset!important;
		height: 40px!important;
		width : 40px!important;
		top:auto!important;
		position:relative;
		display:inline-block;
	}


	.slide-x .splide__arrows:not(.splide__arrow--prev):not(.splide__arrow--next){position:absolute; right:0px; left:auto; 
	top:20px ;width : 120px; margin:0px !important; height: 50px;
	justify-content:space-between!important;
	display:flex; align-items:center;
	}

 
	.logo-sm{height: 25px;}
	@media(max-width:500px){
		.btn-smx .btn{height: 35px; padding-top:0px; padding-bottom:0px;display:flex; align-items:center; font-size : 14px; }
	}
	
	
	
	@media(max-width:900px){
		.absolute-sm{position:fixed; z-index:99999!important; left:10px; right:10px; width : calc(100% - 20px)!important; bottom:10px!important;} 
	}
	
	
#st-1 .st-btn[data-network='sharethis'] img{
	top:0px!Important;
}
.st-btn{text-transform:capitalize!Important;}
#st-1 .st-btn > span{font-weight : 600!important;}
.st-btn.st-first.st-last{border:3px solid var(--success)!important; font-weight : 600!important; 
 display:flex!important; align-items:center!important; justify-content:center!important; font-size : 15px!Important;
 color:var(--success)!important; float:left;  margin-top: 10px; }
.st-btn.st-first.st-last *{ color:var(--success)!important }

.st-disclaimer,
.st-logo{display:none!Important;}
@media(max-width:600px){
	.absolute-btn-sm{position:fixed; 
	width : calc(100% - 130px)!important;
	left:120px; 
	height: 42px;
	bottom:10px; z-index:999!important; 
	}
	
	.main-index-bottom{position:fixed; z-index:998; background: white;border-top:1px solid gainsboro; height: 60px; width : 100%; 
	bottom:0px; 
	left:0px;}
	
	.st-btn.st-first.st-last{ 
	width : 100px!important; 
	left:10px!important;
		min-width:unset!IMportant;
		position:fixed!important; bottom:10px; top:unset!Important; z-index:999!important;
	} 
}


.bold{font-weight : 550!important}



.detail-description{color:rgba(75,85,99,1); font-size : 15px; font-weight : 500; line-height:25px;}

.row-image-tabs span, 
.nav-justified .nav-link{
font-weight : 500!important;
font-size : 13px!Important;
}



.nav-tabs:not(.nav-justified) .nav-link{
font-weight : 700!important;
font-size : 15px!important;
}

body{color:rgba(75,85,99,.98);}


.bg-info,
.btn-info{
background: #38B6FF!important;
border-color: #38B6FF!important;
}

.card-num:hover,
.btn-warning,
.btn-primary,
.bg-style{
background: #1b237f!important;
color:white!important;
border-color:#1b237f!important;
}



.card-num{background: white; height: 40px; display:flex; align-items:center; 
justify-content:center; cursor:pointer; text-decoration:none!important;color:rgba(75,85,99,.98); }


.text-white,
.text-white *:not(.btn):not(i)
{
color:white!important
}



.share-absolute{display:none!important;}
.share-absolute.active{display:flex!important;}

@media(max-width:600px){
.absolute-sm-btn .btn{font-size : 14px!Important; height: 40px!important; }
.absolute-sm-btn{position:fixed; bottom:10px; left:5px; width : calc(100% - 10px); z-index:99999 }

}
 .st-btn span{display:inline-block!important; }
.st-btn {display:inline-block!important; min-width:calc(33.33% - 10px)!Important;margin:5px!important; top:0px!Important; transform:none!important;}
 

aside {
  position: fixed;
  bottom: 0px;
  width: inherit;
  background: white;
  z-index: 999!important;
  font-size: 13px;
  /*border-top: 1px solid gainsboro;*/
  box-shadow: 0px 0px 5px 0px gainsboro;
}

.width {
  max-width: 25rem!important;
  width: 100%;
  /*margin: auto;*/
}

.navbar .nav-link, .navbar .nav-link * {
  color: white!Important;
  font-weight: 400;
  font-size: 17px;
  /*text-shadow: 0px 0px 5px gray;*/
}


aside {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  grid-gap: 0px;
  gap: 0px;
}

.aside-item * {
  display: block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  /*text-overflow: ellipsis;*/
  /*overflow: hidden;*/
}

.aside-item {
  padding: 5px;
  padding-top: 10px!Important;
  padding-bottom: 10px!important;
  font-weight: 400;
  line-height: 14.52px;
  font-size: 12px;
}

.aside-item svg, .aside-item i {
  font-size: 28px;
}

.width.text-shadow-all * {
  color: #393737!important;
  text-shadow: 0px 0px 5px gainsboro;
}

.text-dark, .text-dark * {
  color: #393737!important;
}

.btn-style {
  font-weight: bold;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto!important;
  border-radius: 5px;
  font-size: 14px!important;
}

aside * {
  text-decoration: none!important;
}

* {
  text-decoration: none!important;
}

.menu-list-item {
  display: flex;
  align-items: center;
  margin-bottom: 1.2rem;
}

.menu-list-item svg, .menu-list-item i {
  font-size: 30px!important;
  width: 30px;
  text-align: left!important;
  display: inline-flex;
  justify-content: start;
}

.menu-list-item span {
  width: calc(100% - 30px);
  padding-left: 1.5rem;
}

.input-style {
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto; 
  border-radius: 5px;
  margin-bottom: .7rem;
}

.btn-primary {
  color: white!important;
}

.text-primary {
  color: var(--primary)!important;
}

.navbar {
	z-index:99!important;
  left: auto!important;
  right: auto!important;
  /*margin-bottom: 80px!Important;*/
}

.icon-back {
  font-size: 35px;
  color: white!Important;
}

.navbar-brand * {
  color: white!important;
} 


.btn.bg-primary,
.bg-primary, .bg-style, .navbar-primary {
  background: #1b237f!important;
  border-color:#1b237f!important;
}

.text-dark .btn-primary,
.text-dark .bg-style,
.text-dark .btn-success,
.text-dark .btn-danger,
.text-dark .btn-info{
	color:white!important
}

.btn-outline-primary {
  border-color: #1b237f!important;
  color: #1b237f!important;
}

.btn-outline-primary:hover {
  background: #1b237f!important;
  color: white!Important;
}

.text-secondary {
  color: rgba(0,0,0,.5)!important;
}

.svg-menu {
  font-size: 30px;
  width: 22px;
  height: 26px;
}

.svg-menu-bottom {
  width: 24px;
  margin: auto;
}

body {
  color: #393737!important;
  position: relative;
  width: 25rem;
}

@media(max-width:700px){
body{
	width:100%!important;
}
}



.aside-item:hover, .aside-item.active {
  color: #1b237f!important;
}

.aside-item svg {
  margin-bottom: 5px;
}

.aside-item {
  color: #c4c4c4;
}

.navbar-single {
  height: 70px;
  background: #1b237f;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.navbar-single * {
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin: 0px;
  font-weight: bold;
}

.navbar {
  height: 80px!important;
  overflow: hidden;
}

.bold {
  font-weight: bold;
}

.navbar-category-menu, .search_navbar {
  background: rgba(0,0,0,0.2);
  position: fixed;
  width: 25rem;
  height: 100%;
  transition: .3s;
  top: -100%;
  padding-top: 80px;
  z-index: 1;
}

.navbar-category-menu .container, .search_navbar .container {
  background: white;
  position: fixed;
  /*z-index: 3;*/
  width: 25rem;
  transition: 0.5s;
  top: -100%;
}

.navbar {
  z-index: 2;
}

.row-head {
  display: flex;
  flex-wrap: wrap!important;
}

.col-xs-6.c-over {
  overflow: hidden;
  /*display: inline-flex;*/
  /*align-items: center;*/
  /*justify-content: center;*/
  /*max-width: 100%;*/
}

.h-100-header-o {
  height: 90px;
  background: red;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 5px;
  position: relative;
}

.h-100-header-o img {
  height: 100%;
}

.h-100-header-o h1 {
  position: absolute;
  bottom: 10px;
  margin: 0px;
  font-size: 16px;
  color: white;
  font-weight: bold;
  text-shadow: 0px 0px 10px black;
}

.navbar-category-menu.active, .search_navbar.active {
  display: block!important;
  top: 0px!Important;
}

.navbar-category-menu.active .container, .search_navbar.active .container {
  top: 80px!important;
}

.search_navbar .input-group {
  background: gainsboro!important;
  border-radius: 5px;
  overflow: hidden;
  padding-top: 7px;
  padding-bottom: 7px;
}

.search_navbar .input-group * {
  background: transparent;
  border: 0px!important;
  color: #393737!important;
  box-shadow: none!important;
  outline: none!important;
}

.search_navbar .input-group input {
  font-size: 13px;
}

input, textarea, select {
  outline: none!Important;
  box-shadow: none!important;
}

.profile-akun {
  border-radius: 100%;
  width: 140px;
  height: 140px;
  padding: 7px;
  border: 1px solid var(--primary) !important;
  margin-bottom: 20px;
}

.btn-warning:hover {
  background: #d37e33!important;
  color: white!important;
}

i.absolute-right, svg.absolute-right {
  position: absolute;
  right: 0px;
  font-size: 22px;
  margin-right: 10px;
}

.btn-style {
  position: relative;
}

.btn-warning {
  background: #F2994A;
  color: white!important;
}

.btn-style.pt-3 {
  padding-top: 15px!important;
}

.btn-style.pb-3 {
  padding-bottom: 15px!Important;
}

.hr-style {
  margin-left: -1rem;
  margin-right: -1rem;
  border-width: 5px;
  border-right: 0px!important;
}

.radius-30 {
  border-radius: 30px;
}

.profile-akun-sm {
  width: 60px;
  margin: auto;
}

.btn-primary {
  background: #1b237f;
}

.form-radius input, .form-radius textarea, .form-radius select {
  border-radius: 30px;
}

.form-radius {
}

.navbar-single-back * {
  color: white;
  font-size: 30px;
}

.navbar-single-back {
  position: absolute;
  left: 0px;
  padding-left: 10px;
}

.navbar-single {
  position: sticky!important;
  top: 0px;
  z-index: 2;
}

.aside-top-scrool {
}

.aside-top-scrool {
  background: white;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  overflow: auto;
  white-space: nowrap;
}

.aside-top-scrool .btn {
  font-size: 13px;
  padding-left: 20px;
  padding-right: 20px;
  margin-right: 7px;
}

.btn-outline-primary {
}

.aside-top-scrool img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.aside-top-scrool::-webkit-scrollbar {
  width: 0px;
}

/* Track */

.aside-top-scrool::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px transparent;
  border-radius: 10px;
}

/* Handle */

.aside-top-scrool::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 0px;
}

/* Handle on hover */

.aside-top-scrool::-webkit-scrollbar-thumb:hover {
  background: transparent;
}

.aside-top-scrool {
  max-height: 70px!important;
}

.card-history {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: .8rem;
}

.card-history-img {
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 10px;
}

.card-history-img img {
  width: auto;
  max-height: 100%;
}

.card-history-body {
  width: calc(100% - 80px);
  padding-left: 10px;
}

.card-history-body a {
  font-size: 13px;
  line-height: 10px!Important;
  color: #393737!important;
  text-decoration: none;
}

.card-history-body {
  line-height: 16px;
  color: #393737;
}

.card-history-date {
  position: absolute;
  bottom: 0px;
  margin: 0px;
  font-size: 11px;
  color: gray;
}

.card-history {
  position: relative;
}

.nav-style {
  border-bottom: 0px!important;
}

.nav-style * {
  border-radius: 0px!important;
  background: transparent!important;
  color: #E3B3C3;
  font-size: 14px;
}

.nav-style .nav-link {
  border-bottom: 1px solid gainsboro!important;
}

.nav-style .nav-link.active {
  color: #1b237f!important;
  border-bottom: 1px solid #1b237f!important;
}

.nav-style {
  margin-left: -15px;
  margin-right: -15px;
}

.card-long {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  margin-bottom: 10px;
}

.card-long-img {
  width: 50%;
  overflow: hidden;
  border-radius: 5px;
  height: 100px;
}

.card-long-img img {
  width: 100%;
  max-height: auto;
  height: auto;
}

.card-long-body {
  width: 50%;
  padding-left: 10px;
  height: 100%;
  position: relative;
  height: 100px;
  display: block;
}

.card-long-title {
  font-size: 14px;
  color: #393737!important;
  font-weight: 500!important;
}

.card-long {
  line-height: 16px;
}

.text-overflow {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.progress-sm .progress-bar, .progress-sm {
  height: 5px;
}

.card-info-bottom {
  position: absolute;
  bottom: 0px;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  padding-right: 10px;
}

.card-info-bottom div {
  width: 50%;
}

.card-info-bottom small {
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  white-space: nowrap;
  line-height: 12px;
}

.fs-8 {
  font-size: 8px;
}

.fs-9 {
  font-size: 9px;
}

.aside-top-scrool-category-item {
  color: #393737!important;
  font-size: 12px;
  text-align: center;
  width: 50px;
  display: inline-block;
  margin-right: 20px;
}

.aside-top-scrool-category-item img {
  border-radius: 100%;
  width: 50px;
  height: 50px;
  display: block;
  margin: auto;
}

.aside-top-scrool-category {
  max-height: 120px!important;
  text-align: left;
}

.aside-top-scrool {
  min-width: 100%;
}

.navbar-single h1 {
  max-width: calc(100% - 100px);
  display: inline-block;
}

.relative {
  position: relative;
}

.absolute-left {
  position: absolute;
  left: 0px;
  top: 0px;
  font-size: 26px;
  color: white;
  margin-left: 10px;
  margin-top: 10px;
}

.navbar-scrool {
  position: fixed!important;
  top: -100px!Important;
  width: 25rem;
  transition: 0.5s;
}

.navbar-scrool.sticky {
  top: 0px!important;
}

.absolute-favorite {
  position: absolute;
  bottom: 0px;
  right: 0px;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: bold;
  margin: 10px;
}

.detail-title {
  display: flex;
  align-items: start;
  justify-content: space-between;
}

.detail-title .btn {
  width: 70px;
  font-size: 12px;
}

.detail-title h6 {
  width: calc(100% - 70px);
}

.bold-sm {
  font-weight: 500;
}

.card-flex-profile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.card-flex-profile .w1 {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 100%;
  background: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  text-transform: uppercase;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.card-flex-profile .w2 {
  width: calc(100% - 50px);
  padding-left: 10px;
  line-height: 14px;
}

.card-deskripsi {
  position: relative;
}

.fundraiser:not(.active), .donatur:not(.active), .deskripsi:not(.active) {
  height: 150px!important;
  overflow: hidden;
  background: -webkit-linear-gradient(#383838,#fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative!Important;
}

.btn-baca {
  border-radius: 10px;
  z-index: 2!important;
  opacity: 0.8;
  font-size: 12px!important;
}

.deskripsi.active, .fundraiser.active, .donatur.active {
  height: auto!important;
}

.kabar {
  width: 100px;
  margin: auto;
  text-align: center;
}

.kabar-empty {
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.aside-detail .btn-share {
  width: 100px;
  margin-right: 10px;
}

.aside-detail {
  display: flex!important;
  padding: 1rem;
  z-index: 9!important;
}

.radius-10 {
  border-radius: 10px!important;
}

.radius-5 {
  border-radius: 5px!important;
}

.btn-sedekah {
  width: calc(100% - 110px);
}

.btn-sedekah, .btn-share {
  padding-top: 7px!important;
  padding-bottom: 7px!important;
  height: auto!important;
}

.card-join-fundraiser {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-join-fundraiser .btn {
  width: 120px!important;
}

.card-join-fundraiser p {
  width: calc(100% - 120px);
}

.navbar-share {
  position: fixed;
  width: 25rem;
  height: 100%;
  transition: .3s;
  bottom: -100%;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  background: rgba(0,0,0,0.5);
  z-index: 99;
}

.navbar-share.active {
  bottom: 0px;
}

.navbar-share .container {
  background: white!important;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.absolute-close {
  position: absolute;
  right: 0px;
  top: 0px;
  margin: 0px;
  color: #393737;
  font-size: 20px;
}

.share-div-icon {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.share-icon-item {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
}

.input-group-link * {
  font-size: 14px;
  border: 0px!important;
}

.input-group-link {
  border: 1px solid gainsboro;
  margin-top: 15px;
  border-radius: 5px;
  overflow: hidden;
}

.pembayaran-image-el {
  max-height: 100px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  /*padding: .5rem;*/
  /*background: #f1f1f1;*/
}

.gap-2 {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  grid-gap: 15px;
  gap: 15px;
}

.gap-2 .btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gap-2 .btn i {
}

.btn-light {
  border: 1px solid gainsboro;
}

.gap-2 .btn i, .gap-2 .btn svg {
  margin-left: -10px;
}

.gap-2 .btn {
  font-size: 14px;
  font-weight: 500;
}

.gap-2 .btn svg {
  font-size: 18px;
}

.btn-select {
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
}

.input-style.readonly {
  background: #f9f9f9!important;
}

.flex-toggle {
  padding-top: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
}

.flex-toggle * {
  margin-bottom: 0px!important;
  margin-top: 0px!important;
}

.text-area-height {
  height: 100px!important;
}

.absolute-salin {
  position: absolute;
  right: 0px;
  font-size: 12px;
  margin-right: 10px;
}

.btn-flex {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-right: 10px;
}

.btn-salin {
  border: 1px solid gainsboro!important;
  background: #f1f1f1!important;
}

.flex-salin {
  justify-content: space-between;
  display: flex;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 5px;
  border: 1px solid gainsboro;
  margin-bottom: 10px;
}

.width-salin {
  width: 40px;
  font-size: 13px;
  color: var(--primary);
  text-align: right;
}

.flex-salin * {
  margin: 0px;
}

.flex-salin img {
  height: 25px;
}

.bg-f1 {
  background: #f1f1f1;
  border-radius: 5px;
}

.bg-f1 svg {
  width: 30px;
  font-size: 22px!important;
  color: var(--warning);
  margin-top: 2px;
}

.bg-f1 p {
  width: calc(100% - 30px);
  padding-left: 5px;
}

.space-bottom {
  height: 200px;
}

.d-flex-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  padding-top: 10px;
  border-bottom: 1px solid gainsboro;
}

.d-flex-menu span:last-child {
  text-align: right;
}




			
.card-donation {
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #f1f1f1;
  display: block;
  text-decoration: none!important;
  color: inherit!important;
}

.card-donation img {
  width: 100%;
}

.card-donation .title {
  font-size: 14px;
  font-weight: 500;
  display: block;
}

.card-donation .card-body {
  padding: 15px;
}

.overflow-2, .text-overflow-2 {
  display: -webkit-box!important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-donation small {
  color: var(--secondary);
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 10px;
}


.card-donation .progress {
  margin-bottom: 10px;
}

 
.card-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 16px;
}

.card-info-price {
  width: 70%;
}

.text-overflow {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.card-info-price span {
  font-weight: 500;
  font-size: 14px;
}

.card-info-day span {
  font-weight: 500;
}

.card-info-day {
  text-align: right;
}

.card-info small {
  margin: 0px!important;
}

.bg-transparent-warning {
  background: rgb(255, 237, 222);
}

.promotion-main {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

@media(min-width:900px){
.slide-x .splide__arrow--next,
.slide-x .splide__arrow--prev{
	transform:unset!important;
	height: 40px!important;
	width : 40px!important;
	top:auto!important;
	position:relative;
	display:inline-block;
}


.slide-x .splide__arrows:not(.splide__arrow--prev):not(.splide__arrow--next){position:absolute; right:0px; left:auto; 
top:20px ;width : 120px; margin:0px !important; height: 50px;
justify-content:space-between!important;
display:flex; align-items:center;
}
}
		.aside-top-scrool-category-2 a img{
		width : 100%; height: auto!important;border-radius:100%; }
		
		.aside-top-scrool-category-2 a img{
			background: rgb(186 230 253 / 1);
			height: 50px; width : 50px;border-radius:100%;padding:10px; 
		}
		
		.aside-top-scrool-category-2{
		height: auto!important;
		max-height:unset!important;
		padding-left:0px!important;
		padding-right:0px!Important;
		}
		.aside-top-scrool-category-2 a{
		width : 25%;  margin-right: 0px!important; 
		}
		
		
		.social-main {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.social-item {
  width: 30px;
  height: 30px;
  background: #f1f1f1;
  border-radius: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: black;
  margin: 5px;
}



.footer-flex a:last-child{
border:0px!important;}
.footer-flex a{
width : 33%;
border-right:1px solid gainsboro;
color:black;
}

.footer-flex{
display:flex;  align-items:center;  }





.bg-primary{
	background: #1b237f!important;
}


body {
  font-family: 'Inter','Roboto', sans-serif;
  width: 100%!important;
  max-width: 25rem!important;
  margin: 0 auto!important;
  overflow-x: hidden!important;
  background-color: #eee!important;
  /*font-family: Roboto,sans-serif;*/
} 

main {
  min-height: calc(100vh - 120px);
  background: white;
  padding-bottom: 60px!important;
}
 
.navbar-brand img {
  max-height: 40px;
  width: auto!important;
}

aside {
  position: fixed!important;
  bottom: 0px!important;
  width: inherit!important;
  background: white!important;
  z-index: 999!important;
  font-size: 13px!important;
  /*border-top: 1px solid gainsboro;*/
  box-shadow: 0px 0px 5px 0px gainsboro!important;
}

.width {
  max-width: 25rem!important;
  width: 100%!important;
  /*margin: auto;*/
}


.fs-10 {
  font-size: 10px!important;
}

.fs-11 {
  font-size: 11px!important;
}

.fs-12 {
  font-size: 12px!important;
}

.fs-13 {
  font-size: 13px!important;
}

.fs-14 {
  font-size: 14px!important;
}

.fs-15 {
  font-size: 15px!important;
}

.fs-16 {
  font-size: 16px!important;
}

.fs-17 {
  font-size: 17px!important;
}

.fs-18 {
  font-size: 18px!important;
}

.fs-19 {
  font-size: 19px!important;
}

.fs-20 {
  font-size: 20px!important;
}

.fs-21 {
  font-size: 21px!important;
}

.fs-22 {
  font-size: 22px!important;
}

.fs-23 {
  font-size: 23px!important;
}

.fs-24 {
  font-size: 24px!important;
}

.fs-25 {
  font-size: 25px!important;
}

.fs-26 {
  font-size: 26px!important;
}

.fs-27 {
  font-size: 27px!important;
}

.fs-28 {
  font-size: 28px!important;
}

.fs-29 {
  font-size: 29px!important;
}

.fs-30 {
  font-size: 30px!important;
}

aside {
  display: grid!important;
  grid-template-columns: repeat(5,minmax(0,1fr))!important;
  grid-gap: 0px!important;
  gap: 0px!important;
}

.aside-item * {
  display: block!important;
  width: 100%!important;
  text-align: center!important;
  white-space: nowrap!important;
  /*text-overflow: ellipsis;*/
  /*overflow: hidden;*/
}

.aside-item {
  padding: 5px!important;
  padding-top: 10px!Important;
  padding-bottom: 10px!important;
  font-weight: 400!important;
  line-height: 18px!important;
  color: #393737!important;
}

.aside-item svg, .aside-item i {
  font-size: 28px!important;
} 

.width.text-shadow-all * {
  color: #393737!important;
  text-shadow: 0px 0px 5px gainsboro;
}

.text-dark, .text-dark * {
  color: #393737!important;
}

.btn-style {
  font-weight: bold;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto!important;
  border-radius: 10px;
}

aside * {
  text-decoration: none!important;
}

* {
  text-decoration: none!important;
}

.menu-list-item {
  display: flex;
  align-items: center;
  margin-bottom: .8rem;
}

.menu-list-item svg, .menu-list-item i {
  font-size: 30px!important;
  width: 30px;
  text-align: left!important;
  display: inline-flex;
  justify-content: start;
}

.menu-list-item span {
  width: calc(100% - 30px);
  padding-left: 1rem;
}

.input-style {
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto; 
  font-weight: 500;
  border-radius: 8px;
  margin-bottom: .7rem;
}

.btn-primary {
  color: white!important;
}

.text-primary {
  color: var(--primary)!important;
}

.navbar {
  left: auto!important;
  right: auto!important;
  /*margin-bottom: 80px!Important;*/
}