#check-url-widget {
	width: 100%;
	padding: 1rem;
	margin: 2rem 0;
	border: 1px solid #e4e4e4;
	border-radius: 4px;
}

	#check-url-widget .fields {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-items: stretch;
	}

		#check-url-widget .fields #url-to-check {
			flex: 1 0 auto;
			line-height: 50px;
			height: 50px;
			padding: 0 1rem;
			border: 1px solid #ddd;
			border-radius: 3px;
			font-size: 1.2rem;
			font-weight: 300;
			color: #666;
		}

			#check-url-widget .fields #url-to-check::-webkit-input-placeholder, /* Chrome/Opera/Safari */ 
			#check-url-widget .fields #url-to-check::-moz-placeholder, /* Firefox 19+ */
			#check-url-widget .fields #url-to-check:-ms-input-placeholder, /* IE 10+ */
			#check-url-widget .fields #url-to-check:-moz-placeholder /* Firefox 18- */ {
				color: #ccc;
			}

		#check-url-widget .fields #check-url-button {
			/*
			font-family: Oswald, helvetica, sans-serif;
			font-size: 1.2rem;
			font-weight: 300;
			text-transform: uppercase;
			*/
			border-radius: 50%;
			height: 50px;
			width: 50px;
			line-height: 50px;
			font-size: 1.2rem;
			margin: 0 0 0 1rem;
			padding: 0 0 0 0.25rem;
			text-align: center;
			vertical-align: top;
			outline: 0;
		}

			#check-url-widget .fields #check-url-button.inactive {
				background: #ddd;
				cursor: not-allowed;
			}

#check-url-widget .wait {
	margin: 2rem;
	text-align: center;
	transition: all 0.1s ease-in-out;
	display: none;
	transform: scale(0);
	opacity: 0;
}

#check-url-widget .wait.showing {
	display: block;
	transform: scale(1);
	opacity: 1;
}

#check-url-widget .results {
	align-items: flex-start;
	flex-wrap: wrap;
	flex-direction: row;
	margin: 2rem 0 0 0;
	padding: 0;
	background: #f8f8f8;
	border: 1px solid #e4e4e4;
	border-radius: 4px;
	transition: all 0.1s ease-in-out;
	display: none;
	transform: scale(0);
	opacity: 0;
}

#check-url-widget .results.showing {
	display: flex;
	transform: scale(1);
	opacity: 1;
}

#check-url-widget .results .result {
	flex: 1 1 calc(50% - 2rem);
	min-height: 360px;
	padding: 1rem;
	margin: 1rem;
	background: #fff;
	border: 1px solid #e4e4e4;
	border-radius: 3px;
}

#check-url-widget .results .result:nth-of-type(1) {
	margin-right: 0.5rem;
	margin-bottom: 0.5rem;
}

#check-url-widget .results .result:nth-of-type(2) {
	margin-left: 0.5rem;
	margin-bottom: 0.5rem;
}

#check-url-widget .results .result:nth-of-type(3) {
	margin-right: 0.5rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

#check-url-widget .results .result:nth-of-type(4) {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

#check-url-widget .results .result:nth-of-type(5) {
	margin-left: 0.5rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

#check-url-widget .results .result:nth-of-type(6) {
	margin-top: 0.5rem;
}

#check-url-widget .results #scr {
	flex: 1 1 calc(40% - 2rem);
}

#check-url-widget .results #scr .data {
	border-radius: 4px;
	width: 100%;
	background-image: url( '../img/website-compromised.jpg' );
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

#check-url-widget .results #scr .data {
	min-height: calc(240px + 5.4rem);
}

#check-url-widget .results #sts .data {
	min-height: 240px;
}

#check-url-widget .results #sts {
	flex: 1 1 calc(60% - 2rem);
}

#check-url-widget .results #tru {
	flex: 1 1 calc(33% - 2rem);
}

#check-url-widget .results #url {
	flex: 1 1 calc(34% - 2rem);
}

#check-url-widget .results #dom {
	flex: 1 1 calc(34% - 2rem);
}

#check-url-widget .results #ipr {
	flex: 1 1 calc(40% - 2rem);
}

#check-url-widget .results #gsb {
	flex: 1 1 calc(60% - 2rem);
}

#check-url-widget .results #msg {
	flex: 1 1 calc(100% - 2rem);
}

#check-url-widget .results .result header {
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 1rem;
	border-bottom: 3px solid #f4f4f4;
}

#check-url-widget .results .result header svg {
	vertical-align: top;
}

#check-url-widget .results header .title {
	flex: 1;
}

#check-url-widget .results .result header .title h4 {
	margin: 0;
	display: block;
	font-size: 1.2rem;
	font-weight: 300;
	color: #444;
	padding: 0 0 0.25rem 1rem;
}

#check-url-widget .results .result header .title p {
	display: block;
	margin: 0;
	padding: 0 0.5rem 0 1rem;
	font-size: 0.75rem;
	font-weight: 400;
	color: #444;
}

#check-url-widget .results .result .data {
	flex-wrap: wrap;
	margin-top: 0;
	padding: 1rem;
	font-size: 0.9rem;
	transition: all 0.1s ease-in-out;
	display: none;
	transform: scale(0);
	opacity: 0;
}

#check-url-widget .results .result .data.showing {
	display: flex;
	transform: scale(1);
	opacity: 1;
}

#check-url-widget .results .result .data > div {
	display: flex;
	flex-wrap: nowrap;
	flex: 1 1 100%;
}

#check-url-widget .results .result .data h5 {
	padding-top: 0;
	margin: 0;
	line-height: 2;
	align-items: center;
	display: flex;
	flex: 1 1 100%;
	border-bottom: 1px dotted #ddd;
}

#check-url-widget .results .result .data h5 span.label {
	font-weight: 300;
	vertical-align: bottom;
	margin: 0;
}

#check-url-widget .results #sts.result .data h5 span.label {
	flex: 0 0 120px;
}

#check-url-widget .results #tru.result .data h5 span.label,
#check-url-widget .results #url.result .data h5 span.label {
	flex: 1 0 240px;
}

#check-url-widget .results #dom.result .data h5 span.label {
	flex: 1 0 135px;
}

#check-url-widget .results .result .data h5 span.value {
	font-family: 'Open Sans', sans-serif;
	font-size: 0.85rem;
	font-weight: 400;
	margin: 0;
}

#check-url-widget .results .good {
	color: #40c080;
}

#check-url-widget .results .bad {
	color: #c04040;
}

circle.progress,
circle.background {
	transition: 0.5s stroke-dashoffset;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
}

circle.progress {
	stroke-dasharray: 326.726, 326.726;
	stroke-dashoffset: 326.726;
}

text.progress {
	font-weight: 600;
	font-size: 1.4rem;
	transform-origin: 50% 50%;
}

tspan.units {
	font-size: 1rem;
	transform-origin: 50% 50%;
}

i.pass {
	color: #a6f2a6;
}

i.fail {
	color: #c04040;
}

i.unsure {
	color: #f9dc86;
}