.bold {
    font-weight: 700
}

button, .show-password {
    cursor: pointer
}

.show-password {
    width: 18px;
    height: 14px
}

.main-container {
    display: flex;
    min-height: calc(100vh - 64px)
}

.main-container > div {
    width: 50%
}

.main-container .left-col {
    background: #F7FFF6;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 0 150px 0 0
}

.main-container .left-col::before {
    content: '';
    width: 200px;
    height: 200px;
    background: var(--primary-clr);
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1
}

.main-container .left-col::after {
    content: '';
    width: 200px;
    height: 200px;
    background: #F7FFF6;
    position: absolute;
    bottom: 0;
    right: -200px;
    z-index: -1
}

.left-col .content-wrapper {
    position: relative;
    background: #FFF;
    box-shadow: 0px 8px 24px 0px rgba(149, 157, 165, 0.25);
    border-radius: 20px;
    padding: 50px;
    z-index: 1
}

.left-col .content-wrapper h2 {
    font: 700 36px/1.5em Inter;
    color: #32325d;
    text-align: center
}

.left-col .content-wrapper .input-row {
    width: 400px
}

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

.left-col .content-wrapper .input-row:not(.row-1) {
    border-bottom: 1px solid #BFBFBF
}

.left-col .content-wrapper .input {
    display: flex;
    align-items: center
}

.left-col .content-wrapper .input .form-control {
    padding: unset
}

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

.left-col .content-wrapper input:not(input[type=checkbox]) {
    background: unset;
    border: unset;
    width: 100%;
    color: #8898aa;
}

.left-col input:focus {
    outline: unset
}

.left-col input::placeholder {
    color: #8898aa;
    opacity: .5
}

.left-col .row-2, .row-3, .row-4, form button {
    margin-top: 26px
}

.left-col a {
    text-align: right;
    display: inline-block;
    width: 100%;
    color: hsl(209, 25%, 56%);
    transition: all .1s ease-in-out
}

.left-col a:hover {
    color: hsl(209, 25%, 33%);
}

.left-col .tnc {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px
}

.left-col .tnc label {
    margin: unset;
    display: flex;
    align-items: center
}

.left-col input[type=checkbox] {
    width: 0;
    height: 0;
    opacity: 0
}

.left-col input[type=checkbox]:checked ~ .checkmark {
    background: #8898aa;
    border: 2px solid #8898aa;
    position: relative
}

.left-col .checkmark {
    display: inline-block;
    width: 16px;
    aspect-ratio: 1;
    border: 2px solid #8898aa;
    position: relative
}

.left-col input[type=checkbox]:checked ~ .checkmark:after {
    content: "";
    position: absolute;
    left: 4;
    top: 0;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.left-col .tnc p {
    margin: unset;
    font: 300 14px/1.5em Inter;
    color: #8898aa
}

.left-col 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
}

.left-col button:focus {
    outline: none
}

.main-container .right-col {
    background: var(--primary-clr);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 0 150px;
    position: relative;
    color: rgb(11, 7, 7)
}

.right-col .content-wrapper {
    width: min(560px, 100%);
    position: relative
}

.right-col .content-wrapper::after {
    content: '';
    background: rgb(7, 6, 6);
    width: 150px;
    height: 4px;
    position: absolute;
    left: 0;
    top: 80px;
    border-radius: 10px
}

.right-col h1 {
    font: 700 40px/1.5em Inter;
    margin-bottom: 50px;
    color: rgb(7, 4, 4)
}

.right-col p {
    font: 300 20px/1.5em Inter;
}

.main-container .right-col::before {
    content: '';
    width: 275px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 40px solid #F7FFF6;
    position: absolute;
    left: -137px;
    bottom: 10vh
}

.right-col a {
    color: hsl(0, 30%, 5%);
    text-decoration: underline;
}

.right-col a:hover {
    color: hsl(0, 30%, 5%);
    text-decoration: underline;
}

.subrow {
    display: flex;
    justify-content: space-between;
    gap: 1rem
}

.subrow-wrap {
    width: 50%
}

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

/* .subrow-wrap .is-invalid, .input-row .is-invalid {
    border:1px solid red;
} */

@media (max-width: 1200px) {
    .main-container {
        flex-direction: column-reverse;
        justify-content: flex-end;
        background: var(--primary-clr)
    }

    .main-container > div {
        width: 100%
    }

    .main-container .left-col {
        margin-bottom: 5rem
    }

    .main-container .left-col, .main-container .right-col {
        border-radius: unset;
        background: var(--primary-clr)
    }

    .main-container .left-col::after {
        content: unset
    }

    .main-container .right-col .content-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2.5rem 0
    }

    .main-container .right-col::before {
        content: unset
    }

    .main-container .right-col .content-wrapper::after {
        left: 50%;
        top: 120px;
        transform: translateX(-50%)
    }
}