/* Horizontal MixItUp Control Layout ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.controls {padding: 0;}
.control {background: #999; cursor: pointer; color: white; transition: background 150ms; padding: 5px 8px; border: 0; margin: 5px 0 10px 15px;}
	.control-text {font-size: 120%;}
	.control:hover, .control:active { background: #ce0e2d;}

.checkbox-group {display: block; padding: 0; margin: 0 0 5px 15px;}
.checkbox-group-label, .checkbox-label {color: #000; font-size: 120%; line-height: 22px; padding: 0 7px 5px 0; margin: 0;}
.checkbox-group-label {font-weight: bold; display: block;}
.checkbox-label {margin: 0 0 10px;}

.container-w3c {float: left; position: relative !important; padding-left: 28px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.container-w3c input {opacity: 0; cursor: pointer; height: 0; width: 0;}

.checkmark {position: absolute; top: 0px; left: 0; height: 20px; width: 20px; background-color: #fff; border: 1px solid #000;}
.container-w3c:hover input ~ .checkmark {background-color: #77cfe0;}
.container-w3c input:checked ~ .checkmark { background-color: #fff;}
.checkmark:after {content: ""; position: absolute; display: none;}
.container-w3c input:checked ~ .checkmark:after {display: block;}
.container-w3c .checkmark:after {left: 6px; top: 3px; width: 5px; height: 9px; border: solid #000; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

.text-input-wrapper {margin: 5px 0 10px 13px; display: inline-block; padding: 3px; background: #fff; vertical-align: top;}
.text-input-wrapper input {font-size: .9rem; padding: .5em; border-radius: 2px; border: 1px solid #343434;}

@media print {
	.controls {display: none;}
}