/*=========================== Human Test Styles =======================*/

#HumanTestRow {
    width: 95%;
    max-width: 785px;
    margin: 0;
    padding: .6em;
    background-color: #f9f9f9;
}

.testMessageRow {
    width: 98%;
    margin: auto;
    font-weight: bold;
    text-align: center;
    color: red;
}

#TestImageRow {
    width: 98%;
    margin: auto;
    padding: 0;
    text-align: center;
}

    /* Hide the default radio button */
    #TestImageRow label {
        display: inline-block;
        max-width: 32%;
        margin: 0;
        padding: 0;
    }

        /* Add styles for the input */
        #TestImageRow label input[type="radio"] {
            position: absolute;
            width: 0px;
            padding: 0;
            margin: 0;
            padding-inline: 0;
            padding-block: 0;
            visibility: hidden;
        }


    /* Style for the custom image */
    #TestImageRow .testImg {
        cursor: pointer;
        width: 99.95%;
    }



    /* Add styles for the selected state */
    #TestImageRow label input[type="radio"]:hover + .testImg {
        border: 1px solid #bf6508; /* Example border color */
        border-radius: .5rem;
    }


    #TestImageRow label input[type="radio"]:checked + .testImg {
        border: 2px solid red; /* Example border color */
        border-radius: .5rem;
    }


    #TestImageRow :has(#TestValue):invalid {
        border: 4px double red !important;
    }