.bg-info {
	background-color: #09ebaf;
}

.bg-dark-info {
	background-color: #0ea079;
}

.bg-primary {
	background-color: #502c6c;
}

.bg-cyan {
	background-color: #35bdff;
}

.bg-success {
	background-color: #44c553;
}

.bg-danger {
	background-color: #ff5916;
}

.bg-warning {
	background-color: #ffde03;
}

.bg-white {
	background-color: white;
}

.bg-secondary {
	background-color: #8c8c8c;
}

.border-buttom-danger {
	border-bottom: 10px solid #ff5916;
}


.border-buttom-secondary {
	border-bottom: 7px solid #c4c4c4;
}

.border-buttom-warning {
	border-bottom: 7px solid #ffde03;
}

.border-buttom-success {
	background-color: #44c553;
}

.border-top-dark-primary {
	border-top: 7px solid #253b80;
}

.border-top-secondary {
	border-top: 7px solid #c4c4c4;
}

.border-top-danger {
	border-top: 7px solid #c4c4c4;
}

.box {
	text-align: center;
}

.box-item {
	padding: 20px;
}

.box-item p {
	text-align: center;
}

.lingkaran {
	margin: 0 auto;
	width: 75px;
	height: 75px;
	border-radius: 100%;
	margin-bottom: 15px;
}

.lingkaran i.fa {
	color: white;
	margin-top: 23px;
}

.img-kepsek {
	padding: 10px;
}

/*======================================================================*/

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

/*=====================================================================*/

.text-white {
	color: white;
}

.text-secondary {
	color: #5a5a5a;
}

.head {
	font-size: 30px;
}



/*ukuran smartphone*/
@media screen and (min-width: 425px) {
	.col-3 {
		width: 100%;
		float: left;
		padding: 10px;
	}

	.col-4 {
		width: 100%;
		float: left;
		padding: 10px;
	}

	.col-6 {
		width: 100%;
		float: left;
		padding: 10px;
	}
}

/*ukuran tablet*/
@media screen and (min-width: 768px) {
	.col-3 {
		width: 50%;
		float: left;
		padding: 10px;
	}

	.col-4 {
		width: 50%;
		float: left;
		padding: 10px;
	}

	.col-6 {
		width: 50%;
		float: left;
		padding: 10px;
	}

	.yesu {
		color: red;
	}
}

/*ukuran monitor*/
@media screen and (min-width: 1024px) {
	.col-3 {
		width: 25%;
		float: left;
		padding: 10px;
	}

	.col-4 {
		width: 33.33%;
		float: left;
		padding: 10px;
	}

	.col-6 {
		width: 50%;
		float: left;
		padding: 10px;
	}

	.col-8 {
		width: 70%;
		float: left;
		padding: 10px;
	}
}

/*ukuran monitor HD*/
@media screen and (min-width: 1440px) {
	
	.col-3 {
		width: 25%;
		float: left;
		padding: 10px;
	}

	.col-4 {
		width: 33.33%;
		float: left;
		padding: 10px;
	}

	.col-6 {
		width: 50%;
		float: left;
		padding: 10px;
	}

	.col-8 {
		width: 70%;
		float: left;
		padding: 10px;
	}
}