/**
 * County Emergency Manager
 * Status Card
 * UI v1
 */

.cem-card{

	max-width:420px;
	background:#fff;
	border-radius:18px;
	overflow:hidden;
	box-shadow:0 10px 30px rgba(0,0,0,.12);
	border:1px solid #e5e5e5;

}

/*=========================
Header
=========================*/

.cem-card-header{

	display:flex;
	align-items:center;
	gap:20px;

	padding:36px;

	color:#fff;

}

.cem-card.cem-watch .cem-card-header {
    background: var(--cem-watch);
}

.cem-card.cem-warning .cem-card-header {
    background: var(--cem-warning);
}

.cem-card.cem-emergency .cem-card-header {
    background: var(--cem-emergency);
}

.cem-card.cem-ready .cem-card-header {
    background: var(--cem-ready);
}

/*=========================
Status Colors
=========================*/

.cem-card.cem-ready .cem-card-divider,
.cem-card.cem-ready .cem-card-message-icon,
.cem-card.cem-ready .cem-card-icon {
	color: var(--cem-ready);
}

.cem-card.cem-watch .cem-card-divider,
.cem-card.cem-watch .cem-card-message-icon,
.cem-card.cem-watch .cem-card-icon {
	color: var(--cem-watch);
}

.cem-card.cem-warning .cem-card-divider,
.cem-card.cem-warning .cem-card-message-icon,
.cem-card.cem-warning .cem-card-icon {
	color: var(--cem-warning);
}

.cem-card.cem-emergency .cem-card-divider,
.cem-card.cem-emergency .cem-card-message-icon,
.cem-card.cem-emergency .cem-card-icon {
	color: var(--cem-emergency);
}
.cem-card-icon .cem-icon {
	width: 38px;
	height: 38px;
}

.cem-card-message-icon .cem-icon {
	width: 20px;
	height: 20px;
}
.cem-card-icon{

	width:70px;
	height:70px;

	border-radius:50%;

	background:#fff;

	display:flex;
	align-items:center;
	justify-content:center;

	flex-shrink:0;

}

.cem-card-status{

	font-size:32px;
	font-weight:700;
	line-height:1;

}

.cem-card-subtitle{

	margin-top:6px;

	font-size:14px;
	text-transform:uppercase;
	letter-spacing:.08em;

	opacity:.9;

}

/*=========================
Body
=========================*/

.cem-card-body{

	padding:34px;

}

.cem-card-county{

	margin:0;

font-size:30px;
line-height:1.2;

	color:#152238;

}

.cem-card-divider{

	width:80px;
	height:4px;

	margin:22px 0;

	border-radius:20px;

	background:currentColor;

}

.cem-card-message{

	display:flex;
	align-items:center;
	gap:16px;

	font-size:18px;
	line-height:1.5;

	color:#000;

}

.cem-card-message-icon{

	width:42px;
	height:42px;

	border-radius:50%;

	background:currentColor;

	color:#fff;

	display:flex;
	align-items:center;
	justify-content:center;

	flex-shrink:0;

	line-height:0;

}

.cem-card-updated{

	margin-top:30px;
	padding-top:24px;

	border-top:1px solid #eee;

}

.cem-card-updated-label{

	font-weight:700;
	margin-bottom:4px;

}

.cem-card-updated-date{

	color:#666;

}

/*=========================
Footer
=========================*/

.cem-card-footer{

	padding:0 34px 34px;

}

.cem-card-button{

	display:block;

	background:var(--cem-purple);

	color:#fff;
	text-align:center;
	text-decoration:none;

	padding:16px;

	border-radius:10px;

	font-weight:700;
	font-size:18px;

	transition:.25s;

}

.cem-card-button:hover{

	background:var(--cem-purple-hover);

	color:#fff;

	transform:translateY(-2px);

}
.cem-card-icon .cem-icon {
	width:46px;
    height:46px;
}

.cem-card-message-icon .cem-icon {
	width: 30px;
	height: 30px;
	stroke: #fff;
}