/* Ollies Proposal */

/* Blue rgba(58,65,115,1) */

/*input[type="text"].risk-factor, input[type="datetime-local"].risk-factor, input[type="search"].risk-factor, input[type="password"].risk-factor, input[type="email"].risk-factor, input[type="tel"].risk-factor, input[type="number"].risk-factor, input[type="date"].risk-factor, select.risk-factor, textarea.risk-factor {
    border: solid 2px rgba(58,65,115,1);
    background-color: rgba(58,65,115,0.1);
}*/

/*    input[type="text"].risk-factor:not(.valid), input[type="datetime-local"].risk-factor:not(.valid), input[type="search"].risk-factor:not(.valid), input[type="password"].risk-factor:not(.valid), input[type="email"].risk-factor:not(.valid), input[type="tel"].risk-factor:not(.valid), input[type="number"].risk-factor:not(.valid), input[type="date"].risk-factor:not(.valid), select.risk-factor:not(.valid), textarea.risk-factor:not(.valid) {
        border: solid 2px rgba(58,65,115,1);
        background-color: rgba(58,65,115,0.1);
    }*/

input[type="text"].input-validation-error, input[type="datetime-local"].input-validation-error, input[type="search"].input-validation-error, input[type="password"].input-validation-error, input[type="email"].input-validation-error, input[type="tel"].input-validation-error, input[type="number"].input-validation-error, input[type="date"].input-validation-error, select.input-validation-error, textarea.input-validation-error {
    border: solid 2px red;
    background-color: rgb(255, 0, 0, 0.1);
}

/*input[type="text"].valid, input[type="datetime-local"].valid, input[type="search"].valid, input[type="password"].valid, input[type="email"].valid, input[type="tel"].valid, input[type="number"].valid, input[type="date"].valid, select.valid, textarea.valid {
    position: relative;
    border: solid 2px green;
    background-color: rgb(0, 255, 0, 0.1);
    color: green;
}*/

.input-container, .customRadioQuestion {
    position: relative;
}

    /* only when the input is valid */
    .showTickMarks .input-container:has(> input:not(.ignore-save).valid)::before {
        content: "✔"; /* checkmark character */
        position: absolute;
        top: 12px; /* vertical center */
        left: -25px; /* adjust to taste */
        transform: translateY(-50%); /* nudge into exact center */
        width: 20px; /* circle size */
        height: 20px;
        background-color: #28a745; /* bootstrap–green, swap for your green */
        border-radius: 50%; /* makes it round */
        display: inline-flex; /* allow centering the ✔ */
        align-items: center;
        padding-top: 2px;
        justify-content: center;
        color: white; /* checkmark color */
        font-size: 12px; /* adjust weight/size of check */
    }



    .showTickMarks .customRadioQuestion:has(input:not(.ignore-save):checked)::before {
        content: "✔"; /* checkmark character */
        position: absolute;
        top: 20px; /* vertical center */
        left: -10px; /* adjust to taste */
        transform: translateY(-50%); /* nudge into exact center */
        width: 20px; /* circle size */
        height: 20px;
        background-color: #28a745; /* bootstrap–green, swap for your green */
        border-radius: 50%; /* makes it round */
        display: inline-flex; /* allow centering the ✔ */
        align-items: center;
        padding-top: 2px;
        justify-content: center;
        color: white; /* checkmark color */
        font-size: 12px; /* adjust weight/size of check */
    }



    /*.customRadioQuestion:not(:has(input[type="radio"]:checked)) {
    border-left: solid 3px rgba(58,65,115,1);
    background-color: rgba(58,65,115,0.1);
}

    .customRadioQuestion:not(:has(input[type="radio"]:checked)) .form-radio-option-label {
        background-color: white;
        border: solid 2px rgba(58,65,115,1);
        color: rgba(58,65,115,1);
    }*/

    .customRadioQuestion:has(.input-validation-error) {
        border-left: solid 3px red;
        background: rgb(255, 0, 0, 0.1)
    }

        .customRadioQuestion:has(.input-validation-error) .form-radio-option-label {
            background-color: white;
            border: solid 2px red;
            color: red;
        }

/*    .customRadioQuestion:has(input:checked) {
        border-left: solid 3px green;
        background-color: rgb(0, 255, 0, 0.1);
    }*/

/*        .customRadioQuestion:has(input:checked) .form-radio-option-label {
            background-color: white;
            border: solid 2px green;
            color: green;
        }

        .customRadioQuestion:has(input:checked) input[type="radio"]:checked + label {
            background-color: green;
        }*/


/* 3XD Proposal */

/* Adding asterisks */

.input-container:has(input[data-val-required]) label::before, .split-input-container:has(input[data-val-required]) label::before {
    content: "*️ ";
    color: red;
    font-size: 1rem;
    vertical-align: middle;
}

.customRadioQuestion .question-text .form-question::before {
    content: "*️ ";
    color: red;
    font-size: 1rem;
    vertical-align: middle;
}

/*.input-container label, .question-text {
    position: relative;
}

.input-container:has(input[data-val-required]) label::before, .split-input-container:has(input[data-val-required]) label::before {
    content: "*️ ";
    color: red;
    font-size: 2rem;
    vertical-align: middle;
    position: absolute;
    left: -17px;
    top: -6px;
}

.customRadioQuestion .question-text .form-question::before {
    content: "*️ ";
    color: red;
    font-size: 2rem;
    vertical-align: middle;
    position: absolute;
    left: -17px;
    top: -6px;
}*/