/***************************************
      Alert Styles
****************************************/
.AdministrationAlertBox {
	position: relative;
	width: 100%;
	overflow: hidden;
}

	.AdministrationAlertBox .ActiveAlertBlock {
		color: white;
	}

	.AdministrationAlertBox img {
		display: none;
		width: 100%;
	}

	.AdministrationAlertBox .AlertTitle, .AdministrationAlertBox .AlertDescription {
		display: block;
	}

	.AdministrationAlertBox .MoreDetailsLink {
		display: inline-block; /* makes positioning easier. */
		background: lightblue;
		text-decoration: none;
	}

.AlertContainer input.k-primary-asp {
	overflow: visible;
	padding: 5px 25px 23.5px;
	border: 1px solid #999;
	font-size: 12px;
	cursor: pointer;
	background: rgba(22,117,165, .8);
	text-decoration: none;
	color: white;
	border-radius: 3px;
	line-height: 20px;
	display: inline-block;
	float: right;
	margin: .7rem 0px 10px 10px;
}

	.AlertContainer input.k-primary-asp:hover {
		background: #1675a5;
	color: white;
	}

@media (max-width: 767.5px) {
	.AdministrationAlertBox {
    border-top: 1px solid #948148;
    border-bottom: 1px solid #948148;
		background: #ffdf78 url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M15.78 14.31L8.95.7C8.69.23 8.34 0 8 0c-.34 0-.69.23-.95.7L.22 14.31C-.3 15.24.14 16 1.21 16h13.58c1.07 0 1.51-.76.99-1.69M8 14c-.64 0-1.16-.52-1.16-1.16s.52-1.16 1.16-1.16 1.16.52 1.16 1.16S8.64 14 8 14m.8-3.48H7.2l-.36-4.63c0-.64.52-1.16 1.16-1.16s1.16.52 1.16 1.16l-.36 4.63z' fill='%23384243'/%3E%3C/svg%3E") no-repeat 20px 30px/32px 32px;
	}

		.AdministrationAlertBox .ActiveAlertBlock {
			padding: 25px 20px;
			color: #384243;
		}

		.AdministrationAlertBox .AlertTitle,
		.AdministrationAlertBox .AlertDate {
			padding-left: 45px;
		}

		.AdministrationAlertBox .AlertTitle {
			font-size: 1.4rem;
	font-weight: bold;
		}

			.AdministrationAlertBox .AlertTitle:before {
				display: none;
			}

		.AdministrationAlertBox .AlertDescription {
			margin: 20px 0;
			line-height: 1.3;
		}

		.AdministrationAlertBox .MoreDetailsLink {
			padding: 9px 33px 9px 12px;
			color: #fff;
			font-size: 0.975em;
			text-align: center;
			background: #00597b url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 12c0 1.11-.9 2-2 2s-2-.89-2-2V6.83l-8.59 8.59c-.39.38-.9.58-1.41.58-.51 0-1.02-.2-1.41-.59-.78-.78-.78-2.05 0-2.83L9.17 4H4c-1.11 0-2-.89-2-2s.9-2 2-2h12v12z' fill='%23fff'/%3E%3C/svg%3E") no-repeat right 12px center/10px 10px;
			border-radius: 5px;
		}

		.AdministrationAlertBox .AlertDate {
			font-size: 1.4rem;
		}
}

@media (min-width: 768px) {
	.AdministrationAlertBox {
		padding-top: 24.519%; /* aspect ratio: 208 : 51; 51/208 = .24519 */
		max-height: 255px; /* we dont want the image blowing out the page. */
		/* @note: for later mins there is a 26.16% shrinkage between tablet and desktop. */
	}

		.AdministrationAlertBox .ActiveAlertBlock {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 1;
		}

		.AdministrationAlertBox img {
			display: block;
		}

		.AdministrationAlertBox .AlertTitle,
		.AdministrationAlertBox .AlertDate {
			font-size: min(2.4vw, 25px); /* t=18.46px; d=25px */
		}

	.AdministrationAlertBox .AlertTitle {
				padding-right: min(14.9vw, 155px); /* t=114.45px; d=155px */
			}

			.AdministrationAlertBox .AlertTitle:before {
				margin-top: min(0.57vw, 6px); /* t=4.4px; d=6px */
				vertical-align: top;
	}

	.AdministrationAlertBox .AlertDate {
		position: absolute;
				top: 0;
				right: 0;
				z-index: 1;
	}

	.AdministrationAlertBox .AlertDescription {
			padding-top: min(0.54vw, 10px);
			font-size: min(1.54vw, 16px); /* t=11.81px; d=16px */
	}

		.AdministrationAlertBox .AlertsBoxContainer {
			padding-bottom: 42px; /* height of .MoreDetailsLink plus extra for space. */
			position: absolute;
			top: min(3.85vw, 40px); /* t=29.54px; d=40px */
			right: min(8.84vw, 92px);
			bottom: 0;
			left: min(17.11vw, 178px); /* t=131.44px; d=178px */
	}

		.AdministrationAlertBox .MoreDetailsLink {
			padding: min(0.77vw, 8px) min(1.92vw, 20px); /* t=5.91px; d=8px */ /* t=14.77px; d=20px */
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 1;
			font-size: min(1.28vw, 13.333px); /* t=9.85px; d=13.333px */
		}	
}

@media (min-width: 1080px) {
	@supports (-ms-ime-align: auto) {
		.AdministrationAlertBox .AlertTitle,
		.AdministrationAlertBox .AlertDate {
			font-size: 25px;
		}

		.AdministrationAlertBox .AlertTitle {
			padding-right: 30%;
		}

			.AdministrationAlertBox .AlertTitle:before {
				margin-top: 1%;
				vertical-align: top;
			}

		.AdministrationAlertBox .AlertDescription {
			padding-top: 1%;
			font-size: 16px;
		}

		.AdministrationAlertBox .AlertsBoxContainer {
			padding-bottom: 42px;
			position: absolute;
			top: 12%;
			right: 9%;
			bottom: 0;
			left: 18%;
		}

		.AdministrationAlertBox .MoreDetailsLink {
			padding: 1% 2%;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 1;
			font-size: 13.333px;
		}
	}
}

@media (min-width: 768px) and (max-width: 1080px) {
	@supports (-ms-ime-align: auto) {
		.AdministrationAlertBox .AlertTitle,
		.AdministrationAlertBox .AlertDate {
			font-size: 2.35vw;
		}

		.AdministrationAlertBox .AlertTitle {
			padding-right: 30%;
		}

			.AdministrationAlertBox .AlertTitle:before {
				margin-top: 1%;
				vertical-align: top;
			}

		.AdministrationAlertBox .AlertDescription {
			padding-top: 1%;
			font-size: 1.54vw;
		}

		.AdministrationAlertBox .AlertsBoxContainer {
			padding-bottom: 42px;
			position: absolute;
			top: 12%;
			right: 9%;
			bottom: 0;
			left: 18%;
		}

		.AdministrationAlertBox .MoreDetailsLink {
			padding: 1% 2%;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 1;
			font-size: 1.28vw;
		}
	}
}