:root {
	--main-color: #86c878;
}

#intro-donation {
  width: 100%;
  min-height: 84vh;
  padding: 10px 0 10px 0;
}

#intro-2 .title {
	font-weight: bold;
	font-size: 1.4rem;
}

a {
	color: black;
}

a:hover {
	color: #187f54;
}

.donasi-santri {
	margin-top: 45px;
}


.donasi-santri .card {
	width: 20rem;
}

.card .card-body .card-desc {
	margin-top: 10px;
}

.progress-donation {
	height: 10px;
}

.progress-donation .progress-bar{
	background-color: var(--main-color);
}

.card .card-img-top {
	height: 220px !important;
	object-fit: cover;
}

.width-detail .title {
	font-weight: bold;
	font-size: 1.3em;
}

.width-detail .title-sum-masked{
	color: var(--main-color);
	font-weight: bold;
}

.green-ai {
	color: var(--main-color);
}

.btn-green-ai {
	background-color: var(--main-color);
	border-color: var(--main-color);
}

.title-h2{
	font-size: 1.2em;
}

.story-content{
	overflow: auto;
    /*max-height: 500px;*/
}


.player-holder{
   height:120px;
   max-width:300px;
   text-align: center;
}
.player-thumb{
   width: 100px;
   height: 100px;
   display: inline-block;
   border-radius: 50%;
   background-size: cover;
   background-position: center;
}

.card-search {
	display: inline-block !important;
}

.card-search .gambar-kiri {
	float: left;
	display: block;
	width: 40%;
	height: 180px;
	object-fit: cover;
}

.card-search .tulisan-kanan {
	float: right;
	width: 55%;
	margin: 1px;
	padding: 10px;
}

.card-search .desc-search {
	position: absolute;
    bottom: 10%;
    width: 50%;
}

.icon-history {
	width: 50px;
	height: 50px;
	float: left;
	display: flex;
	align-items: center;
	justify-content: center;
}

.desc-history {
	margin-left: 65px;
	line-height: 24px;
	font-size: 14px;
}

.desc-history b {
	font-size: 18px;
}

.total-history {
	font-size: 14px;
	font-weight: 600;
}

#detail-donation {
	font-size: 12px;
}

#detail-donation span {
	font-size: 10px;
}

/*media query*/

/*phone*/
@media screen and (max-width: 767px){
	#intro-donation {
		width: 100%;
		min-height: 93vh;
		padding: 10px 0 10px 0;
	}

	.donasi-amal .card {
		width: 22rem;
		margin: auto;
	}

	.icon-history {
		width: 45px;
		height: 45px;
		float: left;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.desc-history {
		margin-left: 55px;
		line-height: 24px;
		font-size: 10px;
	}
	
	.desc-history b {
		font-size: 14px;
	}
	
	.total-history {
		font-size: 14px;
		font-weight: 600;
	}

}

/*Tab*/
@media screen and (min-width: 768px) and (min-width: 768px){

	.donasi-amal .card {
		width: 20rem;
		margin: auto;
	}

	.width-detail {
		width: 90%;
	}

	.player-holder{
		height: 180px !important;
	}

	.player-thumb{
		width: 150px !important;
		height: 150px !important;
	}

}

/*dekstop*/
@media screen and (min-width: 1024px){

	.donasi-amal .card {
		width: 19rem;
		margin: auto;
	}

	.width-detail {
		width: 80%;
	}

	.player-holder{
		height: 180px !important;
	}

	.player-thumb{
		width: 150px !important;
		height: 150px !important;
	}

}