.auth { background: white; padding: 40px 20px 40px 20px; border: 1px solid #dde2e4; border-radius: 8px; width: 70%; max-width: 900px; font-family: "LabGrotesque", sans-serif; &-body { &__main { width: 80%; display: flex; flex-direction: column; align-items: center; row-gap: 20px; &-title { font-weight: 500; font-size: 35px; line-height: 32px; display: flex; justify-content: center; margin: 0; @media (max-width: 960px) { font-size: 25px; } @media (max-width: 703px) { align-items: center; font-size: 20px; } span { color: #52b709; margin-left: 10px; @media (max-width: 703px) { margin-left: 5px; } } } .input-body { margin-top: 44px; display: flex; flex-direction: row; justify-content: space-between; width: 100%; @media (max-width: 703px) { flex-direction: column; align-items: center; margin-top: 10px; } &__box { display: flex; flex-direction: column; width: 47%; @media (max-width: 703px) { width: 85%; } h5 { font-weight: 400; font-size: 15px; line-height: 18px; margin: 0 0 10px 10px; } input { height: 43px; background: #eff2f7; border-radius: 8px; border: none; margin-bottom: 5px; font-size: 15px; font-weight: 400; line-height: 18px; font-style: normal; letter-spacing: normal; text-align: left; padding: 16px 15px 16px 22px; outline: none; } .input-container { margin: 0 0 20px 0; width: 100%; display: flex; flex-direction: column; } } } .error { color: red; font-size: 11px; font-weight: 400; } .button-box { display: flex; flex-direction: row; margin-top: 10px; &__submit { width: 174px; height: 50px; font-size: 18px; } .disable { opacity: 0.5; pointer-events: none; } h5 { display: flex; align-items: flex-end; font-size: 16px; line-height: 28px; p { color: #406128; text-decoration: underline; margin: 0 0 0 5px; } } } } } }