﻿.thongkesoluonghoso-wrapper {
}

	.thongkesoluonghoso-wrapper .card-thongke {
		height: 100%;
		border-radius: 5px;
		padding: 0;
		border: 0 solid transparent;
		-webkit-box-shadow: 0 0 20px rgb(0 0 0 / 8%);
		box-shadow: 0 0 20px rgb(0 0 0 / 8%);
		opacity: 0.85;
		background: linear-gradient(135deg, #17ead9 0%,#6078ea 100%);
		color: #FFF;
	}

		.thongkesoluonghoso-wrapper .card-thongke .icon {
			text-align: center;
			font-size: 3rem;
		}

		.thongkesoluonghoso-wrapper .card-thongke .content .card-category {
			font-weight: 400;
			font-size: .98rem;
		}

		.thongkesoluonghoso-wrapper .card-thongke .content .card-title {
			font-size: 2rem;
			font-weight: 700;
			min-height: 48px
		}


		.thongkesoluonghoso-wrapper .card-thongke .content .loader {
			float: left;
			vertical-align: middle;
			border-radius: 1px;
			height: 40px;
			display: flex;
			align-items: end;
			margin-bottom: 0.75rem;
		}

			.thongkesoluonghoso-wrapper .card-thongke .content .loader.danger .typing_loader {
				width: 6px;
				height: 6px;
				border-radius: 50%;
				-webkit-animation: typing_danger 1s linear infinite alternate;
				-moz-animation: typing_danger 1s linear infinite alternate;
				-ms-animation: typing_danger 1s linear infinite alternate;
				animation: typing_danger 1s linear infinite alternate;
				position: relative;
			}

			.thongkesoluonghoso-wrapper .card-thongke .content .loader.warning .typing_loader {
				width: 6px;
				height: 6px;
				border-radius: 50%;
				-webkit-animation: typing_warning 1s linear infinite alternate;
				-moz-animation: typing_warning 1s linear infinite alternate;
				-ms-animation: typing_warning 1s linear infinite alternate;
				animation: typing_warning 1s linear infinite alternate;
				position: relative;
			}

			.thongkesoluonghoso-wrapper .card-thongke .content .loader.info .typing_loader {
				width: 6px;
				height: 6px;
				border-radius: 50%;
				-webkit-animation: typing_info 1s linear infinite alternate;
				-moz-animation: typing_info 1s linear infinite alternate;
				-ms-animation: typing_info 1s linear infinite alternate;
				animation: typing_info 1s linear infinite alternate;
				position: relative;
			}

			.thongkesoluonghoso-wrapper .card-thongke .content .loader.success .typing_loader {
				width: 6px;
				height: 6px;
				border-radius: 50%;
				-webkit-animation: typing_success 1s linear infinite alternate;
				-moz-animation: typing_success 1s linear infinite alternate;
				-ms-animation: typing_success 1s linear infinite alternate;
				animation: typing_success 1s linear infinite alternate;
				position: relative;
			}
@media (min-width: 768px) and (max-width: 1024px) {
	.thongkesoluonghoso-wrapper .card-thongke .icon {
		font-size: 2rem;
	}
	.thongkesoluonghoso-wrapper .card-thongke .content .card-title {
		font-size: 1.5rem;
	}
	.thongkesoluonghoso-wrapper .card-thongke .content .card-category {
		height: 50px;
	}
	/* 
	  ##Device = Tablets, Ipads (Portrait)
	  ##Screen = B/w 768px to 1024px
	*/
}

@-webkit-keyframes typing_danger {
	0% {
		background-color: rgba(223, 53, 69, 1);
		box-shadow: 12px 0px 0px 0px rgba(223, 53, 69, 0.2), 24px 0px 0px 0px rgba(223, 53, 69, 0.2);
	}

	25% {
		background-color: rgba(255,255,255, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(223, 53, 69, 2), 24px 0px 0px 0px rgba(223, 53, 69, 0.2);
	}

	75% {
		background-color: rgba(223, 53, 69, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(223, 53, 69, 0.2), 24px 0px 0px 0px rgba(223, 53, 69, 1);
	}
}

@-moz-keyframes typing_danger {
	0% {
		background-color: rgba(223, 53, 69, 1);
		box-shadow: 12px 0px 0px 0px rgba(223, 53, 69, 0.2), 24px 0px 0px 0px rgba(223, 53, 69, 0.2);
	}

	25% {
		background-color: rgba(255,255,255, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(223, 53, 69, 2), 24px 0px 0px 0px rgba(223, 53, 69, 0.2);
	}

	75% {
		background-color: rgba(223, 53, 69, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(223, 53, 69, 0.2), 24px 0px 0px 0px rgba(223, 53, 69, 1);
	}
}

@-ms-keyframes typing_danger {
	0% {
		background-color: rgba(223, 53, 69, 1);
		box-shadow: 12px 0px 0px 0px rgba(223, 53, 69, 0.2), 24px 0px 0px 0px rgba(223, 53, 69, 0.2);
	}

	25% {
		background-color: rgba(255,255,255, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(223, 53, 69, 2), 24px 0px 0px 0px rgba(223, 53, 69, 0.2);
	}

	75% {
		background-color: rgba(223, 53, 69, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(223, 53, 69, 0.2), 24px 0px 0px 0px rgba(223, 53, 69, 1);
	}
}

@keyframes typing_danger {	
	0% {
		background-color: rgba(223, 53, 69, 1);
		box-shadow: 12px 0px 0px 0px rgba(223, 53, 69, 0.2), 24px 0px 0px 0px rgba(223, 53, 69, 0.2);
	}

	25% {
		background-color: rgba(255,255,255, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(223, 53, 69, 2), 24px 0px 0px 0px rgba(223, 53, 69, 0.2);
	}

	75% {
		background-color: rgba(223, 53, 69, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(223, 53, 69, 0.2), 24px 0px 0px 0px rgba(223, 53, 69, 1);
	}
}

/* warning */
@-webkit-keyframes typing_warning {
	0% {
		background-color: rgba(255, 193, 7, 1);
		box-shadow: 12px 0px 0px 0px rgba(255, 193, 7, 0.2), 24px 0px 0px 0px rgba(255, 193, 7, 0.2);
	}

	25% {
		background-color: rgba(255, 193, 7, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(255, 193, 7, 2), 24px 0px 0px 0px rgba(255, 193, 7, 0.2);
	}

	75% {
		background-color: rgba(255, 193, 7, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(255, 193, 7, 0.2), 24px 0px 0px 0px rgba(255, 193, 7, 1);
	}
}

@-moz-keyframes typing_warning {
	0% {
		background-color: rgba(255, 193, 7, 1);
		box-shadow: 12px 0px 0px 0px rgba(255, 193, 7, 0.2), 24px 0px 0px 0px rgba(255, 193, 7, 0.2);
	}

	25% {
		background-color: rgba(255, 193, 7, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(255, 193, 7, 2), 24px 0px 0px 0px rgba(255, 193, 7, 0.2);
	}

	75% {
		background-color: rgba(255, 193, 7, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(255, 193, 7, 0.2), 24px 0px 0px 0px rgba(255, 193, 7, 1);
	}
}

@-ms-keyframes typing_warning {
	0% {
		background-color: rgba(255, 193, 7, 1);
		box-shadow: 12px 0px 0px 0px rgba(255, 193, 7, 0.2), 24px 0px 0px 0px rgba(255, 193, 7, 0.2);
	}

	25% {
		background-color: rgba(255, 193, 7, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(255, 193, 7, 2), 24px 0px 0px 0px rgba(255, 193, 7, 0.2);
	}

	75% {
		background-color: rgba(255, 193, 7, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(255, 193, 7, 0.2), 24px 0px 0px 0px rgba(255, 193, 7, 1);
	}
}

@keyframes typing_warning {
	0% {
		background-color: rgba(255, 193, 7, 1);
		box-shadow: 12px 0px 0px 0px rgba(255, 193, 7, 0.2), 24px 0px 0px 0px rgba(255, 193, 7, 0.2);
	}

	25% {
		background-color: rgba(255, 193, 7, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(255, 193, 7, 2), 24px 0px 0px 0px rgba(255, 193, 7, 0.2);
	}

	75% {
		background-color: rgba(255, 193, 7, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(255, 193, 7, 0.2), 24px 0px 0px 0px rgba(255, 193, 7, 1);
	}
}

/* info */
@-webkit-keyframes typing_info {
	0% {
		background-color: rgba(23, 162, 184, 1);
		box-shadow: 12px 0px 0px 0px rgba(23, 162, 184, 0.2), 24px 0px 0px 0px rgba(23, 162, 184, 0.2);
	}

	25% {
		background-color: rgba(23, 162, 184, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(23, 162, 184, 2), 24px 0px 0px 0px rgba(23, 162, 184, 0.2);
	}

	75% {
		background-color: rgba(23, 162, 184, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(23, 162, 184, 0.2), 24px 0px 0px 0px rgba(23, 162, 184, 1);
	}
}

@-moz-keyframes typing_info {
	0% {
		background-color: rgba(23, 162, 184, 1);
		box-shadow: 12px 0px 0px 0px rgba(23, 162, 184, 0.2), 24px 0px 0px 0px rgba(23, 162, 184, 0.2);
	}

	25% {
		background-color: rgba(23, 162, 184, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(23, 162, 184, 2), 24px 0px 0px 0px rgba(23, 162, 184, 0.2);
	}

	75% {
		background-color: rgba(23, 162, 184, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(23, 162, 184, 0.2), 24px 0px 0px 0px rgba(23, 162, 184, 1);
	}
}

@-ms-keyframes typing_info {
	0% {
		background-color: rgba(23, 162, 184, 1);
		box-shadow: 12px 0px 0px 0px rgba(23, 162, 184, 0.2), 24px 0px 0px 0px rgba(23, 162, 184, 0.2);
	}

	25% {
		background-color: rgba(23, 162, 184, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(23, 162, 184, 2), 24px 0px 0px 0px rgba(23, 162, 184, 0.2);
	}

	75% {
		background-color: rgba(23, 162, 184, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(23, 162, 184, 0.2), 24px 0px 0px 0px rgba(23, 162, 184, 1);
	}
}

@keyframes typing_info {
	0% {
		background-color: rgba(23, 162, 184, 1);
		box-shadow: 12px 0px 0px 0px rgba(23, 162, 184, 0.2), 24px 0px 0px 0px rgba(23, 162, 184, 0.2);
	}

	25% {
		background-color: rgba(23, 162, 184, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(23, 162, 184, 2), 24px 0px 0px 0px rgba(23, 162, 184, 0.2);
	}

	75% {
		background-color: rgba(23, 162, 184, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(23, 162, 184, 0.2), 24px 0px 0px 0px rgba(23, 162, 184, 1);
	}
}

/* success */
@-webkit-keyframes typing_success {
	0% {
		background-color: rgba(40, 167, 69, 1);
		box-shadow: 12px 0px 0px 0px rgba(40, 167, 69, 0.2), 24px 0px 0px 0px rgba(40, 167, 69, 0.2);
	}

	25% {
		background-color: rgba(40, 167, 69, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(40, 167, 69, 2), 24px 0px 0px 0px rgba(40, 167, 69, 0.2);
	}

	75% {
		background-color: rgba(40, 167, 69, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(40, 167, 69, 0.2), 24px 0px 0px 0px rgba(40, 167, 69, 1);
	}
}

@-moz-keyframes typing_success {
	0% {
		background-color: rgba(40, 167, 69, 1);
		box-shadow: 12px 0px 0px 0px rgba(40, 167, 69, 0.2), 24px 0px 0px 0px rgba(40, 167, 69, 0.2);
	}

	25% {
		background-color: rgba(40, 167, 69, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(40, 167, 69, 2), 24px 0px 0px 0px rgba(40, 167, 69, 0.2);
	}

	75% {
		background-color: rgba(40, 167, 69, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(40, 167, 69, 0.2), 24px 0px 0px 0px rgba(40, 167, 69, 1);
	}
}

@-ms-keyframes typing_success {
	0% {
		background-color: rgba(40, 167, 69, 1);
		box-shadow: 12px 0px 0px 0px rgba(40, 167, 69, 0.2), 24px 0px 0px 0px rgba(40, 167, 69, 0.2);
	}

	25% {
		background-color: rgba(40, 167, 69, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(40, 167, 69, 2), 24px 0px 0px 0px rgba(40, 167, 69, 0.2);
	}

	75% {
		background-color: rgba(40, 167, 69, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(40, 167, 69, 0.2), 24px 0px 0px 0px rgba(40, 167, 69, 1);
	}
}

@keyframes typing_success {
	0% {
		background-color: rgba(40, 167, 69, 1);
		box-shadow: 12px 0px 0px 0px rgba(40, 167, 69, 0.2), 24px 0px 0px 0px rgba(40, 167, 69, 0.2);
	}

	25% {
		background-color: rgba(40, 167, 69, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(40, 167, 69, 2), 24px 0px 0px 0px rgba(40, 167, 69, 0.2);
	}

	75% {
		background-color: rgba(40, 167, 69, 0.4);
		box-shadow: 12px 0px 0px 0px rgba(40, 167, 69, 0.2), 24px 0px 0px 0px rgba(40, 167, 69, 1);
	}
}