/* Form styles extracted from example.css */

/* Base font family */
body {
    font-family: "proxima-nova", "proxima nova", "helvetica neue", "helvetica", "arial", sans-serif;
    color: #031b4e;
    font-size: 1rem; /* This will be 16px */
}

/* Button styles */
button {
    appearance: none;
    margin: 0;
    font-family: inherit;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0px 1rem;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    line-height: 44px;
    height: 48px;
    font-size: 16px;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
}

.button-green {
    color: #fff;
    background: rgb(18, 124, 67);
}

.button-green:hover {
    background: rgb(10, 166, 83);
}

.button-green:focus {
    outline: #031b4e dotted 2px;
    outline-offset: 2px;
}

/* Disabled button styles - prevents hover and focus effects for green buttons */
.button-green:disabled,
.button-green:disabled:hover,
.button-green:disabled:focus {
    cursor: not-allowed;
    background: #f1f1f1;
    border: 1px solid #f1f1f1;
    color: #bbb;
    box-shadow: none;
}

.button-blue {
    color: #fff;
    background: #0069ff;
    border-color: #0069ff;
}

.button-blue:hover {
    background: #0052ff;
    color: #fff;
}

.button-blue:focus {
    outline: 0;
    box-shadow: 0 0 0 1px #fff,0 0 2px 2px #0069ff;
}

/* Disabled button styles - prevents hover and focus effects */
.button-blue:disabled,
.button-blue:disabled:hover,
.button-blue:disabled:focus {
    cursor: not-allowed;
    background: #f1f1f1;
    border: 1px solid #f1f1f1;
    color: #bbb;
    box-shadow: none;
}

.button-blue-transparent {
    background: none;
    color: #0069ff;
    border-color: #0069ff;
}

.button-blue-transparent:hover {
    background: #0069ff;
    color: #fff;
}

.button-blue-transparent:focus {
    outline: 0;
    box-shadow: 0 0 0 1px #fff, 0 0 2px 2px #0069ff;
}

/* Disabled button styles - prevents hover and focus effects for blue transparent buttons */
.button-blue-transparent:disabled,
.button-blue-transparent:disabled:hover,
.button-blue-transparent:disabled:focus {
    cursor: not-allowed;
    background: #f1f1f1;
    border: 1px solid #f1f1f1;
    color: #bbb;
    box-shadow: none;
}

/* Input styles */
.input {
    transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    outline: none;
    height: 48px;
    border: 1px solid #f1f1f1;
    line-height: 1.5;
    padding: 0 16px;
    font-size: 1rem;
    border-radius: 3px;
    background-color: #fff;
    max-width: 100%;
    box-sizing: border-box;
}

.input:focus {
    outline: rgb(91, 105, 135) dotted 2px;
    outline-offset: 2px;
    border-color: rgb(0, 97, 235);
}

/* Checkbox styles */
.checkbox {
    all: unset;
    box-sizing: border-box;
    align-self: center;
    height: 1rem;
    width: 1rem;
}

.checkbox-input {
    all: unset;
    appearance: none;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: block;
    box-shadow: none;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(131, 144, 175);
}

.checkbox-input:hover {
    box-shadow: rgb(51, 135, 255) 0px 0px 0px 2px;
}

.checkbox-input:checked {
    border-color: rgb(0, 97, 235);
    border-width: 2px;
    background: url("data:image/svg+xml;charset=utf-8,%0A%20%20%3Csvg%20viewBox%3D%220%200%2012%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1%205L4%208L11%201%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%20%20%3C%2Fsvg%3E")
    center center no-repeat rgb(0, 97, 235);
}

/* Radio button styles (similar to checkbox but circular) */
input[type="radio"] {
    appearance: none;
    box-sizing: border-box;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1px solid rgb(131, 144, 175);
    margin-right: 0.5rem;
    position: relative;
    cursor: pointer;
}

input[type="radio"]:hover {
    box-shadow: rgb(51, 135, 255) 0px 0px 0px 2px;
}

input[type="radio"]:checked {
    border-color: rgb(0, 97, 235);
    border-width: 2px;
    background-color: rgb(0, 97, 235);
}

input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background-color: white;
}

/* Text input and file input styles */
input[type="text"],
input[type="password"],
input[type="file"] {
    transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    outline: none;
    height: 48px;
    border: 1px solid #f1f1f1;
    line-height: 1.5;
    padding: 0 16px;
    font-size: 1rem;
    border-radius: 3px;
    background-color: #fff;
    max-width: 100%;
    box-sizing: border-box;
    width: 100%;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="file"]:focus {
    outline: rgb(91, 105, 135) dotted 2px;
    outline-offset: 2px;
    border-color: rgb(0, 97, 235);
}

/* Label styles */
label {
    font-weight: 500;
    color: #031b4e;
    display: inline-block;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

/* Utility classes */
.hidden {
    display: none!important;
    visibility: hidden!important;
}

.font-darkGray {
    color: #676767;
}

.font-blueGray {
    color: #5b6987;
}

.font-blue {
    color: #0069ff;
}

/* Warning message styles */
.warning-message {
    color: #d32f2f;
    font-size: 0.9rem;
    display: none;
}

.file-name-display {
    color: #676767;
    font-size: 0.9rem;
}

/* Radio button styles - Combined from example.css and Modal.css */
.radio-button {
    border: 1px solid #dfdfdf;
    padding: 1rem 2rem 1rem 3rem;
    position: relative;
    cursor: pointer;
    text-align: left;
    border-radius: 3px;
    transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    background-color: #fff;
}

.radio-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 1rem;
    margin-top: -.5rem;
    width: 1rem;
    height: 1rem;
    border: 1px solid #5b6987;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
    transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.radio-button:hover {
    background-color: #fafafa;
    border-color: #0069ff;
}

.radio-button:hover::before {
    border-color: #0069ff;
    box-shadow: 0 0 0 2px rgba(0, 105, 255, 0.1);
}

.radio-button-active, 
.radio-button-active:hover {
    background-color: #f3f8ff;
    border-color: #0069ff;
}

.radio-button-active::before {
    border-color: #007bff;
    background-color: #007bff;
}

.radio-button-active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 1.25rem;
    margin-top: -.25rem;
    width: .5rem;
    height: .5rem;
    background: #fff;
    border-radius: 50%;
}

.radio-button span {
    cursor: pointer;
    font-weight: 400;
    color: #031b4e;
    line-height: 1.4;
    margin: 0;
    padding: 0;
}

.radio-button-active span {
    font-weight: 600;
    color: #031b4e;
}

/* Flex utility classes */
.flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.gap-dot5 {
    gap: .5rem;
}

/* Profile link styles */
.profile-link {
    text-decoration: none;
    color: white;
    display: inline-block;
}