﻿/*Radio buttons*/
.custom-radio-button input[type="radio"] + label span:not(.nowrap-line):not(.question-tooltip):not(.break-spaces) {
    box-shadow: none!important; 
    border: 1px solid lightgray;
}
.custom-radio-button input[type="radio"]:checked + label span:not(.nowrap-line):not(.question-tooltip):not(.break-spaces) {
    background-size: 12px 10px !important;
}
.custom-radio-button input[type="radio"]:checked + label span:not(.nowrap-line):not(.question-tooltip):not(.break-spaces) {
    border: none;
}

.custom-radio-button {
    padding-top: 3px;
}

.custom-radio-button.inline {
    display: inline-flex !important;
}

    .custom-radio-button.inline label {
        margin-right: 15px;
    }

.custom-radio-button input[type="radio"] {
    display: none;
}

        .custom-radio-button input[type="radio"] + label span:not(.nowrap-line):not(.question-tooltip):not(.break-spaces) {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: -5px 10px 0 0;
            vertical-align: middle;
            cursor: pointer;
            border-radius: 50%;
            box-shadow: -2px 2px 3px 1px rgba(0, 0, 0, 0.33);
            background-repeat: no-repeat;
            background-position: center;
            text-align: center;
            line-height: 18px;
        }

            .custom-radio-button input[type="radio"] + label span:not(.nowrap-line):not(.question-tooltip):not(.break-spaces) img {
                opacity: 0;
                transition: all 0.3s ease;
            }

    .custom-radio-button input[type="radio"]:checked + label span:not(.nowrap-line):not(.question-tooltip):not(.break-spaces) {
        opacity: 1;
        background: url("../../images/tick-icon.png") center center no-repeat; /*Should use local icon*/
        width: 20px;
        height: 20px;
        display: inline-block;
        background-color: #E48914;
    }

.custom-radio-button input[type="radio"]:disabled + label span:not(.nowrap-line):not(.question-tooltip):not(.break-spaces) {
    pointer-events: none;
    cursor: default;
    opacity: 0.5;
}

/*Checkboxes*/
/*Sqare checkbox*/
.checkbox label {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom:12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox .checkmark {
    position: absolute;
    top: 2px;
    left: 0;
    height: 20px;
    width: 20px;
    border: 1px solid lightgray;
    cursor: pointer;
    background-color: white;
}

.checkbox .checkmark-td {
    position: absolute;
    top: -15px;
    left: 20px;
    height: 20px;
    width: 20px;
    border: 1px solid;
    cursor: pointer;
}

.checkbox input:checked ~ .checkmark {
    background-color: #E48914;
}

.checkbox input:checked ~ .checkmark-td {
    background-color: #E48914;
}

.checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox .checkmark-td:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox input:checked ~ .checkmark:after {
    display: block;
}

.checkbox input:checked ~ .checkmark-td:after {
    display: block;
}

.checkbox .checkmark:after {
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.checkbox .checkmark-td:after {
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.checkbox .checkmark-radio {
    position: absolute;
    top: 0;
    left: 0;
    height: 14px;
    width: 14px;
    border: 1px solid lightgray;
    cursor: pointer;
    border-radius: 1.5em;
}

.checkbox input:checked ~ .checkmark-radio {
    background-color: #007bff;
}

.checkbox .checkmark-radio:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox input:checked ~ .checkmark-radio:after {
    display: block;
}

/*Round checkbox*/

.round-checkbox input[type="checkbox"] + label span:not(.nowrap-line):not(.question-tooltip) {
    box-shadow: none !important;
    border: 1px solid lightgray;
}

.round-checkbox input[type="checkbox"]:checked + label span:not(.nowrap-line):not(.question-tooltip) {
    background-size: 12px 10px !important;
}

.round-checkbox input[type="checkbox"]:checked + label span:not(.nowrap-line):not(.question-tooltip) {
    border: none;
}

.round-checkbox.inline {
    display: inline-flex !important
}

.round-checkbox input[type="checkbox"] {
    display: none;
}

    .round-checkbox input[type="checkbox"] + label span:not(.nowrap-line):not(.question-tooltip) {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: -5px 10px 0 0;
        vertical-align: middle;
        cursor: pointer;
        border-radius: 50%;
        box-shadow: -2px 2px 3px 1px rgba(0, 0, 0, 0.33);
        background-repeat: no-repeat;
        background-position: center;
        text-align: center;
        line-height: 18px;
    }

        .round-checkbox input[type="checkbox"] + label span:not(.nowrap-line):not(.question-tooltip) img {
            opacity: 0;
            transition: all 0.3s ease;
        }

    .round-checkbox input[type="checkbox"]:checked + label span:not(.nowrap-line):not(.question-tooltip) {
        opacity: 1;
        background: url("../../images/tick-icon.png") center center no-repeat; /*Should use local icon*/
        width: 20px;
        height: 20px;
        display: inline-block;
        background-color: #E48914;
    }

.disabled-input {
    border: none!important;
    background-color: transparent!important;
}