main {
    height: calc(100vh - 64px);
    display: flex !important
}

main > div:not(.wrapper) {
    width: 50%
}

.left-col {
    background: #F7FFF6;
    border-radius: 0 0 150px 0;
    position: relative
}

.left-col::before {
    content: '';
    width: 200px;
    aspect-ratio: 1;
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--primary-clr);
    z-index: -1
}

.right-col {
    background: var(--primary-clr);
    border-radius: 150px 0 0 0;
    position: relative;
}

.right-col::before {
    content: '';
    width: 200px;
    aspect-ratio: 1;
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    z-index: -1
}

.wrapper {
    width: min(525px, 100%);
    background: white;
    margin: 100px auto 0;
    box-shadow: 0px 8px 24px 0px hsla(210, 8%, 32%, 0.25);
    padding: 75px 50px;
    border-radius: 20px;
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%)
}

.wrapper h1 {
    font: 700 24px/1.5em Inter;
    color: #32325d;
    text-align: center
}

.wrapper > p {
    text-align: center;
    font: 300 1rem/1.5em Inter;
    color: #8898aa
}

.wrapper .input-row {
    border-bottom: 1px solid #BFBFBF
}

.wrapper .label {
    font: 400 18px/1.5em Inter;
    color: #32325d;
    margin-bottom: 15px
}

.wrapper .input {
    /* margin-bottom: 15px; */
    display: flex;
    height: 48px
}

.wrapper .input-icon {
    display: flex;
    align-items: center;
    width: 24px
}

.wrapper .form-control {
    padding: unset;
    height: unset
}

.wrapper button {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    color: white;
    background: var(--primary-clr);
    border: none;
    margin-top: 45px;
    font: 700 18px/1.5em Inter;
    cursor: pointer
}

.wrapper button:focus {
    outline: none;
}

.wrapper input {
    color: #8898aa;
    border: none;
    font-size: 1rem;
    width: 100%
}

.wrapper input::placeholder {
    color: #8898aa;
    opacity: .5;
    font-size: 1rem
}

.wrapper input:focus::placeholder {
    color: #8898aa;
    opacity: .5
}

.wrapper input:focus {
    color: #8898aa;
    opacity: 1;
    outline: none
}

/* .input-row .is-invalid {
    border: 1px solid red;
    padding: 0 4px
} */

.input-row .is-invalid input::placeholder {
    color: unset
}

@media (max-width: 1200px) {
    .left-col {
        background: var(--primary-clr)
    }

    .right-col {
        border-radius: unset
    }
}