/**
 * Debug
 */
 #wcs-debug {
	padding: 0 0 0;
	font-size: 1em;
	margin-bottom: 20px;

	#wcs-debug-header {
		background: #3d9cd2;
		color: #ffffff;
		padding: 10px 20px;
		cursor: pointer;
		position: relative;

		.wcs-debug-toggle {
			background-image: url("../img/arrow.svg");
			background-repeat: no-repeat;
			background-position: right center;
			width: 42px;
			height: 100%;
			right: 0;
			top: 0;
			background-size: 42px;
			position: absolute;
			transition: .3s all;
		}
	}

	&.closed {
		.wcs-debug-toggle {
			-webkit-transform: rotate(-90deg);
			-ms-transform: rotate(-90deg);
			transform: rotate(-90deg);
		}
	}

	#wcs-debug-contents {
		padding: 20px 20px 0;
		display: none;
		border: 1px solid #dee2e6;
		border-width: 0 1px 1px;

		.wcs-debug-tip {
			color: #1864ab;
			background: url("../img/tip2.svg") no-repeat left 5px;
			background-size: 16px 16px;
			padding-left: 24px;
		}

		h3 {
			margin: 10px 0 20px;
			font-weight: bold;
			font-size: 1.2em;

			&.ruleset-title {
				font-size: 1em;

				a {
					font-weight: bold;
				}
			}
		}
	}

	.wcs-debug-result-label {
		padding: 5px;
		border-radius: 3px;
		color: #ffffff;
		font-weight: bold;
		text-transform: uppercase;
		font-size: 12px;

		&.wcs-debug-result-label-pass {
			background: #2b8a3e;
		}
		
		&.wcs-debug-result-label-fail {
			background: #c92a2a;
		}
	}

	table.wcs-debug-table {
		border: 1px solid #dee2e6;
		margin: 0 0 20px;

		&.wcs-debug-table-fixed {
			table-layout: fixed;
		}

		td, th {
			padding: 5px 10px;
		}

		td.align-right,
		th.align-right {
			text-align: right;
		}
	}
}