
.umb-healthcheck {
	display: flex;
	flex-wrap: wrap;
	margin-left: -10px;
	margin-right: -10px;
}

.umb-healthcheck-help-text {
	line-height: 1.6em;
	margin-bottom: 30px;
	max-width: 750px;
}

.umb-healthcheck-action-bar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 20px;
}


/* Group and states */
.umb-healthcheck-group {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	background: @gray-10;
	border-radius: 3px;
	padding: 15px 10px;
	box-sizing: border-box;
	text-align: center;
	border: 2px solid transparent;
	height: 100%;
}

.umb-healthcheck-group:hover {
	border: 2px solid @turquoise;
	cursor: pointer;
}

.umb-healthcheck-group__load-container {
	position: relative;
	height: 30px;
	margin-top: 15px;
	margin-bottom: 16px;
}


/* Title */
.umb-healthcheck-title {
	font-size: 14px;
	font-weight: bold;
}


/* Messages */
.umb-healthcheck-messages {
	margin-top: 15px;
}

.umb-healthcheck-message {
	position: relative;
	background: @white;
    border-radius: 50px;
    display: inline-flex;
	align-items: center;
	padding-left: 8px;
	padding-right: 8px;
    margin-bottom: 5px;
    color: @black;
    font-weight: bold;
	font-size: 13px;
}

.umb-healthcheck-message i {
	font-size: 15px;
	margin-right: 3px;
}

.umb-healthcheck-details-link {
	color: @turquoise-d1;
}

.umb-healthcheck-details-link:hover {
	text-decoration: none;
	color: @turquoise-d1;
}


/* Helpers */
.align-self-center {
	align-self: center;
}


/* Spacing for boxes */
.umb-air {
	flex: 0 0 auto;
	flex-basis: 100%;
    max-width: 100%;
	padding: 10px;
	box-sizing: border-box;

	@media (min-width: 500px) {
		flex-basis: 50%;
		max-width: 50%;
	}

	@media (min-width: 768px) {
		flex-basis: 20%;
		max-width: 20%;
	}
}


/* DETAILS */

.umb-healthcheck-back-link {
	font-weight: bold;
	color: @black;
}

.umb-healthcheck-group__details {
	border-radius: 3px;
	margin-bottom: 40px;
}

.umb-healthcheck-group__details-group-title {
	background-color: @purple-l1;
	padding: 10px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 3px 3px 0 0;
}

.umb-healthcheck-group__details-group-name {
	font-size: 16px;
	color: @white;
	font-weight: bold;
}

.umb-healthcheck-group__details-checks {
	border: 1px solid @gray-8;
	border-top: none;
	border-radius: 0 0 3px 3px;
}

.umb-healthcheck-group__details-check {
	position: relative;
}

.umb-healthcheck-group__details-check-title {
	padding: 15px 20px;
	background-color: @gray-10;
}

.umb-healthcheck-group__details-check-name {
	font-size: 15px;
	color: @black;
	font-weight: bold;
	margin-bottom: 5px;
}

.umb-healthcheck-group__details-check-description {
	font-size: 13px;
	color: @gray-3;
	line-height: 1.6em;
}

.umb-healthcheck-group__details-status {
	padding: 15px 0;
	display: flex;
	border-bottom: 2px solid @gray-10;
}

.umb-healthcheck-group__details-status-overlay {
	background: @white;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0.9;
}

.umb-healthcheck-group__details-status:last-child {
	border-bottom: none;
}

.umb-healthcheck-group__details-status-icon-container {
	flex: 0 0 50px;
	display: flex;
	justify-content: center;
	padding: 0 20px;
}

.umb-healthcheck-status-icon {
	font-size: 20px;
	margin-top: 2px;
}

.umb-healthcheck-status-icon.-large {
	width: 70px;
	height: 70px;
	font-size: 30px;
	background-color: @white;
}

.umb-healthcheck-group__details-status-content {
	padding: 0 20px;
	flex: 1 1 auto;
}

.umb-healthcheck-group__details-status-text {
	line-height: 1.6em;
}

.umb-healthcheck-group__details-status-actions {
	display: flex;
	flex-direction: column;
	margin-top: 10px;
}

.umb-healthcheck-group__details-status-action {
	background-color: @gray-10;
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 3px;
}

.umb-healthcheck-group__details-status-action:last-child {
	margin-bottom: 0;
}

.umb-healthcheck-group__details-status-action-description {
	margin-top: 5px;
	font-size: 12px;
}
