.card-custom{
	min-height: 340px;
}
.img-custom{
	max-width: 50px;
}

span.title{
	padding: 8px 15px;
	background: #685526;
	border-radius: 3px;
	color: #fff;
	cursor: pointer;
}

span.total{
	position: absolute;
	top: 8px;
	margin-left: 10px;
}

span.fs-4{
	margin-left: 15px;
}

span.persen{
	float: right;
	font-size: 25px;
}

@media screen and (max-width: 1366px) {

	span.total{
		font-size: 14px;
	}

	div.update-data{
		font-size: 12px;
	}
}

@media screen and (max-width: 1366px) and (min-width: 1000px){
	.col-md-4 {
	  	flex: 0 0 auto;
	  	width: 50%;
	}
}
@media screen and (max-width: 999px) {
	.col-md-4 {
	  	flex: unset;
	  	width: 100%;
	  	margin-bottom: 5px;
	}
	.col-md-6 {
	  	flex: unset;
	  	width: 100%;
	  	margin-bottom: 5px;
	}
	ul.col-12{
		width: unset;
	}

	div.content{
		height: 600px;
	}

}

@media screen and (max-width: 1150px){
	span.persen{
		float: unset;
		position: absolute;
		right: 10px;
		top: 90px;

	}
}

@media screen and (max-width: 800px) {

	img.img-icon{
		width: 80px;
	}	
	span.fs-4{
		font-size: 20px !important;
	}

}

@media screen and (min-width: 801px) {

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

}


@media screen and (max-width: 600px) {

	/*canvas.canvas-chart{
		height: 400px !important;
	}*/

	span.total{
		font-size: 11px;
	}

	span.persen{
		top: 76px;
	}
	span.fs-4{
		font-size: 16px !important;
	}

}

@media screen and (max-width: 440px) {
	ul.setting-ul{
		display: none;
	}
}



@media screen and (max-width: 1400px) and (min-width:1000px) {
  	div.content{
		height: 500px;
	}
}

@media screen and (min-width: 1401px) {
  	div.content{
		height: 800px;
	}
}

div.deskripsi{
	padding: 5px 15px;
	background: #81c1ec;
	color: #000;
	border-radius: 5px;
	overflow: auto;
	text-align:justify;
	height: 250px;
}
html, body {margin: 0; height: 100%; overflow: hidden}

div.content .col-md-4, div.content .col-md-6{
	margin-bottom: 10px;
}

hr.page {
  border: 3px solid #198754;
  opacity: 1;
}

button.title{
	width: 400px;
	border-radius: 0px;
	font-size: 25px;
}
div.row-content{
	margin: 4px 0px;
	padding: 0px 10px;
}

@media screen and (min-width: 1401px) {
  	div.single-content{
		min-height: 500px;
	}
	.carousel-item{
		min-height: 500px;
	}
}

@media screen and (max-width: 1400px) and (min-width:1000px) {
  	div.single-content{
		min-height: 300px;
	}
	.carousel-item{
		min-height: 300px;
	}
}