/***
 * Alert
 */

/** Alert Element */

.alert {
	background: #f0f0f0;
	border: 1px solid #dcdcdc;
	color: #9d9d9d;
	margin-bottom: 15px;
	font-size: 14px;
	font-family: $font-family-1;
	border-radius: 4px;
	padding-left: 50px;
	min-height: 22px;
	line-height: 22px;
	position: relative;
	padding-top: 10px;
	padding-bottom: 10px;

	i {
		font-size: 17px;
		color: inherit;
		padding: 0px;
		width: 40px;
		height: 30px;
		text-align: center;
		position: absolute;
		left: 0;
		line-height: 20px;
	}

	.close {
		color: #727272;
		float: right;
		background: transparent;
		border: none;
		position: relative;
		height: 22px;
		width: 46px;
		vertical-align: top;
		opacity: .2;
		padding: 0;
		transition: opacity .2s;

		&:hover,
		&:focus {
			opacity: .5;
		}

		i {
			padding: 0;
			vertical-align: top;
			width: 46px;
			height: auto;
			line-height: 22px;
			top: 0;
			text-align: center;
		}
	}	
}

/** Alert Variations */

.alert-danger-style-2,
.alert-info-style-2,
.alert-success-style-2,
.alert-useful-style-2,
.alert-normal-style-2,
.alert-warning-style-2 {
	border: none;
	color: #fff;

	.close {
		color: #fff;
	}
}

/* Alert Info */

.alert-info {
	background: #f0f0f0;
	border-color: #dcdcdc;
}

.alert-info-style-2 {
	background: #fab702;
}

/* Alert Danger */

.alert-danger {
	background: #ffccc8;
	border-color: #e0a7a3;
}

.alert-danger-style-2 {
	background: #fa7267;
}

/* Alert Warning */

.alert-warning {
	background: #fff4bc;
	border-color: #ddd4a4;
}

.alert-warning-style-2 {
	background: #ffe24d;
}

/* Alert Success */

.alert-success {
	background: #c1faa9;
	border-color: #afe09b;
}

.alert-success-style-2 {
	background: #7add51;
}

/* Alert Useful */

.alert-useful {
	background: #bdeeff;
	border-color: #aad7e7;
}

.alert-useful-style-2 {
	background: #77dcff;
}

/* Alert Normal */

.alert-normal {
	background: #dccedf;
	border-color: #cbbfce;
}

.alert-normal-style-2 {
	background: #dc90ec;
}