#system-check-widget-wrapper {
		width: 100%;
		border-style: solid;
		border-width: 24px 0 0;
		border-color: #6e6e6e;
		border-image: none;
		box-sizing: border-box;
		font-size: 14px;
		box-shadow: 0 0 2px -1px rgba(0, 0, 0, 0.5);
}

#system-check-widget-wrapper ul {
		padding: 0;
		margin: 0;
		box-sizing: padding-box;
		font-size: 1em;
}

#system-check-widget-wrapper li {
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
		font-family: Arial,Helvetica,sans-serif;
		padding: 0 0 0 10px;
		background-color: #888888;
}

#system-check-widget-wrapper li:not(:last-child) {
		border-bottom: thin solid #c8c8c8;
}

#system-check-widget-wrapper li:first-child .component-name::before {
		font-size: 0.7em;
		text-transform: uppercase;
		letter-spacing: 1px;
		content: "Component";
		position: absolute;
		top: -20px;
		color: white;
		left: 0;
		right: 0;
}

#system-check-widget-wrapper li:first-child .component-status::before {
		font-size: 0.7em;
		text-transform: uppercase;
		letter-spacing: 1px;
		content: "Status";
		position: absolute;
		text-align: center;
		top: -20px;
		color: white;
		left: 0;
		right: 0;
}

#system-check-widget-wrapper li > div {
		height: 30px;
		display: flex;
		flex-direction: row;
		align-items: center;
}

#system-check-widget-wrapper li .component-icon {
		padding: 2px 2px 2px 0;
		flex: 0 0 35px;
		max-width: 35px;
}

#system-check-widget-wrapper li .component-icon svg {
		height: 26px;
		width: auto;
		-webkit-filter: drop-shadow(1px 1px 1px #000);
		filter: drop-shadow(1px 1px 1px #000);
}

#system-check-widget-wrapper li .component-name {
		position: relative;
		max-width: 300px;
		height: 34px;
		flex: 1 0 40%;
		color: white;
		justify-content: flex-start;
		order: 1;
}

#system-check-widget-wrapper li .component-status {
		position: relative;
		flex: 1 1 33%;
		max-width: 270px;
		justify-content: center;
		order: 3;
		padding: 0 10px;
		height: 34px;
		transition: all 0.15s ease-in-out;
}

#system-check-widget-wrapper li .component-status button {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		position: absolute;
		background-color: red;
		letter-spacing: 2px;
		pointer-events: none;
		opacity: 0;
		width: 100%;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		color: white;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 0.8em;
}

#system-check-widget-wrapper li .component-status button span {
		display: block;
		flex: 0 0 100%;
		text-align: center;
}

#system-check-widget-wrapper li .component-status::after {
		text-align: center;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 0.8em;
}

#system-check-widget-wrapper li .component-recheck {
		position: relative;
		cursor: pointer;
		flex: 1 1 300px;
		font-size: 0.7em;
		font-weight: bold;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: #6e6e6e;
		text-decoration: underline;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 34px;
		margin: 0;
		border: none;
		background-color: #cce6ff;
		box-shadow: inset 3px -4px 13px -10px black;
		transition: opacity 0.2s ease-in-out 1s, color 0.25s ease-in-out, background-color 0.2s ease-in-out;
		order: 2;
}

#system-check-widget-wrapper li .component-recheck:hover {
		background-color: yellow;
		color: black;
}

#system-check-widget-wrapper li[data-component-status="checking"] .component-status {
		background-color: yellow;
}

#system-check-widget-wrapper li[data-component-status="checking"] .component-status::after {
		content: "Checking";
		color: black;
}

#system-check-widget-wrapper li[data-component-status="passed"] .component-status {
		background-color: #08dd7d;
}

#system-check-widget-wrapper li[data-component-status="passed"] .component-status::after {
		content: "Pass";
		color: black;
}

#system-check-widget-wrapper li[data-component-status="failed"] .component-status button {
		opacity: 1;
		pointer-events: all;
}