/* @import "App-vars.less"; */

/* Common style */

@media (max-width: 767px) {
    .radio-group__radio {
        padding-top: 7px;
        margin-bottom: 0;
        display: block;
    }
}

@media (min-width: 768px) {
    .radio-group__radio {
        display: inline-block;
    }
}

.radio-group {

}

.radio-group__radio {
	padding-right: 30px;
}
	
input[type="radio"] {
    box-shadow: none;
}

[type="radio"]:not(:checked),
[type="radio"]:checked,
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
}

[type="radio"]:not(:checked) + label,
[type="checkbox"]:not(:checked) + label,
[type="radio"]:checked + label,
[type="checkbox"]:checked + label {
    position: relative;
    padding-left: 27px;
    cursor: pointer;
	color: #3A3F42;
    /* color: @black; */
}

[type="radio"][disabled] + label,
[type="checkbox"][disabled] + label {
    color: rgba(156, 159, 160, 0.35); 
	/* fade(@cool-grey, 35%); */
}


[type="radio"]:checked + label:before,
[type="checkbox"]:checked + label:before {
	background: #007FAC;
    /* background: @client-color;  */
    border: 2px solid #007FAC; 
	/* @client-color; */
}

[type="radio"]:not(:checked) + label:before,
[type="checkbox"]:not(:checked) + label:before {
    background: white;
    border: 2px solid #9c9fa0;
	/* @border-color; */
}

// change 'checkbox-required' class
[type="radio"]:not(:checked) + label.checkbox-required:before,
[type="checkbox"]:not(:checked) + label.checkbox-required:before {
    border: 2px solid #DD2412;
	/* @error-color; */
}

[type="radio"]:not(:checked) + label:after,
[type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    transform: scale(0);
}

[type="radio"]:checked + label:after,
[type="checkbox"]:checked + label:after {
    opacity: 1;
    transform: scale(1);
}

[type="radio"][disabled]:not(:checked) + label:before,
[type="radio"][disabled]:checked + label:before,
[type="checkbox"][disabled]:not(:checked) + label:before,
[type="checkbox"][disabled]:checked + label:before {
    opacity: 0.35;
    -moz-opacity: 0.35;
    -khtml-opacity: 0.35;
}

[type="radio"]:not([disabled]) + label:hover:before,
[type="checkbox"]:not([disabled]) + label:hover:before,
[type="radio"]:not([disabled]):not(:checked):hover + label:before,
[type="radio"]:checked:focus + label:before,
[type="radio"]:not([disabled]):not(:checked):focus + label:not(.checkbox-required):before,
[type="checkbox"]:not([disabled]):not(:checked):hover + label:before,
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not([disabled]):not(:checked):focus + label:not(.checkbox-required):before {
    border: 2px solid #007FAC;
	/* @client-color; */
}

/* Radio style */
[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

[type="radio"]:not(:checked) + label:after,
[type="radio"]:checked + label:after {
    font-family: 'icomoon' !important;
    content: "";
    position: absolute;
    top: 3px;
    left: 2px;
    font-size: 16px;
    line-height: 1;
    color: white;
    /*font-weight: bold;*/
    border: solid 3px white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
}

/* Checkbox style */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    width: 16px;
    height: 16px;
    border-radius: 2px;
}

[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
    font-family: 'icomoon' !important;
    content: "\e910";
    position: absolute;
    top: 5px;
    left: 2px;
    /* top: 7px; */
    /* left: 4px; */
    font-size: 16px;
    line-height: 0.8;
    color: white;
}