:root {
    /* --color :: stand for main color */
    --color-primary: #0D2EA0;
    --color-secondary: #005CAB;
    --color-error: #FF1010;
    --color-error-50: rgba(255, 16, 16, 0.75);
    --color-yellow: #FDFDBD;
}

.card-profile .profile-img {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    width: 8.5rem;
    gap: .25rem;
}

.card-profile .profile-img-box {
    width: 8.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--color-primary);
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-profile .profile-img-box i {
    font-size: 4rem;
    color: white;
}

.card-profile .profile-img-text {
    border: 2px solid var(--color-primary);
    border-radius: .75rem;
    padding-block: .25rem;
    padding-inline: .5rem;
    font-size: .75rem;
}

.card-profile .profile-img:hover .profile-img-box {
    background-color: var(--color-secondary);
}

.card-profile .profile-img:hover .profile-img-text {
    border-color: var(--color-secondary);
}

.card-profile [type="file"] {
    width: 0;
    height: 0;
    position: absolute;
}

.card-profile .form-check-label a {
    color: var(--color-primary);
}

.card-profile .form-check-label a:hover {
    text-decoration: underline;
    color: var(--color-secondary);
}

label span.required {
    color: var(--color-error);
}

label.error {
    color: var(--color-error);
}

input.error,
select.error {
    border-color: var(--color-error-50);
}

.errorMessage {
    color: red;
}

.card-profile .profile-img-text {
    text-align: center;
    margin-top: 20px;
}

#preview {
    width: 8.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    display: none;
}

#registration-form select {
    color: #767676;
}