/* Custom styling for pill buttons */
.pill-button {
    display: inline-block;
    padding: 10px 0px;
    font-weight: 500;
    color: black;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.pill-button input[type="radio"] {
    display: none; /* Hide the default radio button */
}

.pill-button:hover {
    color: white;
    background-color: rgb(26, 115, 232);
}

.pill-button.active {
    color: white;
    background-color: rgb(26, 115, 232);
}

.icon-box {
    background-color: rgb(248, 249, 250);

}

.icon-box img {
    display: block;
    margin: 0rem auto;
    max-width: 75px;
}
.material-textfield {
position: relative;
margin-top: 30px;
}

.material-textfield input[type="text"] {
border: 1px solid #9e9e9e;
display: block;
font-size: 16px;
width: 100%;
padding: 10px 5px;
background: none;
text-align: left;
color: #212121;
box-sizing: border-box;
}

.material-textfield input[type="text"]:focus {
outline: none;
border-bottom: 2px solid #3f51b5;
}

.material-textfield label {
color: #9e9e9e;
font-size: 16px;
padding-left: 5px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 0;
top: 10px;
transition: 0.2s ease all;
}

.material-textfield input[type="text"]:focus ~ label,
.material-textfield input[type="text"]:valid ~ label {
top: -20px;
font-size: 12px;
color: #3f51b5;
}
.md-button {
background-color: rgb(26,115,232); /* Material Design primary color */
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
font-size: 16px;
text-transform: lowercase;
letter-spacing: 1.25px;
transition: background-color 0.3s, box-shadow 0.3s;
cursor: pointer;
outline: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24), 0 2px 4px rgba(0, 0, 0, 0.12);
}

.md-button:hover {
background-color: rgb(0, 0, 0); /* Darker shade for hover effect */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.24), 0 4px 8px rgba(0, 0, 0, 0.12);
}

.md-button:active {
background-color: rgb(0, 0, 0);
box-shadow: none; /* Flat effect on click */
}

.md-button:focus {
background-color: black;
box-shadow: 0 0 0 3px rgba(98, 0, 238, 0.3); /* Focus ring */
}
/* Error styling for material text fields */
.material-textfield.error input[type="text"] {
border-bottom: 2px solid #f44336; /* Red border for error */
}

.material-textfield.error label {
color: #f44336; /* Red color for label in error state */
}
.error-input {
    border-bottom: 2px solid #f44336; /* Red border for error */
}