.auth-wrap {
    min-height: 100vh;
    background-color: var(--off-white);
    /* background-color: olive; */
    /* padding-top: 4rem; */
    /* padding-bottom: 6rem; */
    /* margin-top: calc(var(--offset)* 1.25); */
    /* margin-bottom: calc(var(--offset)* 1.25); */
    /* border-top-left-radius: var(--border-radius); */
    /* border-top-right-radius: var(--border-radius); */
    /* transition: 0.3s ease-in-out; */
}

.auth-image {
    background-image: url('/static/images/hero.webp');
    background-size: cover;
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
}

.auth-content {
    display: flex;
    /* align-items: center; */
    flex-direction: column;
    justify-content: center;
    margin-left: 3rem;
    padding: 2rem 0;
    transition: var(--rwd-transition);
}

.auth-title {
    margin: 1rem 0 2rem 0;
}

.auth-form {
    --width: 60%;
    width: var(--width);
}

.form-item {
    /* width: 50%; */
    margin-bottom: .5rem;
}

.form-item.two-items .input-fields {
    display: flex;
    gap: .5rem;
}

.form-item .select-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
    margin: .5rem 0;
}

.form-item.checkbox {
    margin-top: 2rem;
}

.form-item.textarea {
    margin-top: 1.5rem;
}

.form-item textarea {
    height: 7rem;
}

.form-item label {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.tooltip {
    position: relative;
}

.tooltip-text {
    width: max-content;
    height: max-content;
    position: absolute;
    background: var(--white);
    border: 1px solid var(--blue);
    z-index: 1;
    top: -485%;
    left: 16px;
    padding: .5rem;
    border-radius: 1rem;
    visibility: hidden;
}

.tooltip-text img {
    border-radius: .5rem;
}

.tooltip-text::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -16px;
    /* margin-left: -5px; */
    border-width: 8px;
    border-style: solid;
    border-color: transparent var(--blue) transparent transparent;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
}

input[type="checkbox"]:checked+label .checkbox-circle {
    background-color: var(--blue);
    background-image: url('/static/images/icon/icon-checkmark-small.svg');
}

.fade-out {
    margin-bottom: 1rem;
}

.fade-out.hide {
    opacity: 0;
}

.password-container {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 2.5%;
    top: 30%;
    font-size: 14px;
    cursor: pointer;
}

.button.auth {
    width: calc(var(--width) / 2);
    margin: .5rem 0 1rem 0;
}

p.success {
    color: #0F9D58;
}

p.error {
    color: #DB4437;
}

p.info {
    font-size: 14px;
    padding: 0 .5rem;
}

.error-text {
    color: #d32f2f;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.input-error {
    border-color: #d32f2f !important;
}

/* .fade-out {
    opacity: 0;
    transition: opacity 0.3s ease;
} */

/* .error {
    color: #d32f2f;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.success {
    color: #2e7d32;
    font-size: 1rem;
    margin-bottom: 1rem;
} */

@media (max-width: 1599px) {
    .auth-form{
        --width: 75%;
    }
}