@charset "UTF-8";

/* SpryValidationRadio.css - version 0.1 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2007. Adobe Systems Incorporated. All rights reserved. */


/* These are the classes applied on the messages
 * (required message and invalid value message )
 * which prevent them from being displayed by default.
 */
.radioRequiredMsg, .radioInvalidMsg{
	display: none;
}

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and font color for the error text.
 * The state class (e.g. .radioRequiredState) is applied on the top-level container for the widget, 
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.radioRequiredState .radioRequiredMsg,
.radioInvalidState .radioInvalidMsg{
	display: inline;
	color: #CC3333;
	font-size: 80%;
}

/* When the widget is in an invalid state, the radio buttons have a red background applied to them */
.radioRequiredState input[type="radio"],
.radioInvalidState input[type="radio"] {
        appearance: none;
        width: 15px;
        height: 15px;
        border: 1px solid red; /* border color for alert */
        border-radius: 50%;
        outline: none;
        cursor: pointer;
}

input[type="radio"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 15px;
        height: 15px;
        border: 2px solid gray; /* default border color */
        border-radius: 50%;
        outline: none;
        cursor: pointer;
        position: relative;
}

input[type="radio"]:checked {
        border-color: black; /* border color when checked */
}
 
input[type="radio"]:checked::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px; /* inner circle size */
        height: 5px; /* inner circle size */
        border-radius: 50%;
        background: #28a745; /* inner circle color when checked */
        transform: translate(-50%, -50%);
}
        
.radio-container {
        display: flex;
        justify-content: center; /* centers buttons horizontally */
        align-items: center; /* centers buttons vertically */
 	white-space: nowrap; /* prevents wrapping */
        gap: 15px; /* adjusts space between buttons */
        padding: 6px; 
}

input[type="radio"]:disabled {
        background-color: #D3D3D3;
        border: 1px solid gray;
}

input[type="radio"].highlight {
        border: 2px solid red;
}