body {
    background: #eaf0f1
}

.main {
    width: 100vw;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 50px 0
}

.main-card {
    width: 90%;
    height: 100%;
    display: flex;
    justify-content: center;
    background: white;
    border-radius: 7px;
    border: 1px solid #d5dbdd
}

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

.main-content {
    display: flex;
    align-items: center;
    padding: 125px 0;
    position: relative;
}

.main-content img {
    width: 100%;
    display: block;
    margin: 0 auto 24px
}

.title {
    margin: 16px 0;
    color: #212529;
    font-size: 18px;
    text-align: center;
}

form {
    margin: 0 auto;
    width: 55%;
    padding: 40px 0
}

.alert.alert-emails {
  position: absolute;
  top: 20px;
  left: 50%;
  width: max-content;
  z-index: 9999;
  border-radius: 3px;
  transform: translateX(-50%)
}

form #email {
    width: 100%;
    border: 1px solid hsl(0, 0%, 88%);
    border-radius: 30px;
    padding: 13px 16px !important;
    color: #393939;
    margin-bottom: 12px;
    font-size: 11px;
    outline: none
}

form input::placeholder {
    font-size: 13px
}

form #email:focus {
    border: 1px solid hsl(0, 0%, 63%)
}


.invalid-feedback {
    text-align: center;
    margin: -12px 0 12px
}

button {
    width: 100%;
    background-color: #58ba47;
    border: none;
    border-radius: 30px;
    padding: 13px;
    color: #fff;
    font-size: 14px
}

.alert {
    margin-top: 12px;
    text-align: center
}

.right-col {
    background: url('../images/login-page-logo_03.png') center;
    background-size: cover;
    display: grid;
    place-content: center;
}

@media (max-width: 992px) {
    .main-card {
        flex-direction: column
    }

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

    .right-col {
        height: 600px
    }
}