.hs-login { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 32px 64px; position: absolute; background: #fcfcfc; } .logo { width: 190px; height: 51.54px; } .fs-login { display: flex; flex-direction: column; align-items: flex-start; /* width: 100%; */ } .fs-label { display: flex; width: 100%; } .container-login { background-image: url("../../../assets/img/Background.png"); background-size: cover; height: 100vh; } .cs-login { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 60px 40px; width: 100%; max-width: 500px; background: #fcfcfc; border-radius: 5px; } /* Textos */ .ls-saudacao, .ls-plataforma { font-family: "Fira Sans", sans-serif; text-align: center; margin-bottom: 16px; } .ls-saudacao { font-weight: 400; font-size: 40px; color: #ef7d00; } .ls-plataforma { font-weight: 700; font-size: 40px; color: #2d2e83; } .ls-subtitle { font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 20px; color: #ef7d00; margin-bottom: 10px; } .ls-text { position: static; width: 87px; height: 19px; left: 0px; top: 37px; font-family: "Open Sans"; font-style: normal; font-weight: 700; font-size: 14px; line-height: 19px; /* identical to box height */ color: #848484; /* Inside auto layout */ flex: none; order: 1; flex-grow: 0; margin: 10px 0px; } .is-text { /* Auto layout */ display: flex; flex-direction: row; align-items: flex-start; padding: 0px; align-items: center; position: static; width: 408px; height: 48px; left: 0px; top: 66px; /* Inside auto layout */ flex: none; order: 2; align-self: stretch; flex-grow: 0; margin: 10px 0px; } .bs-default { display: flex; justify-content: center; align-items: center; color: white; width: 100%; height: 48px; background: #2d2e83; border-radius: 5px; margin-top: 16px; } .ls-forgot-password { text-align: center; margin-top: 16px; } .ls-link-forgot-password { text-decoration: underline; color: #2d2e83; } /* Responsividade */ /* Smartphones */ @media (max-width: 575.98px) { .cs-login { padding: 40px 20px; max-width: 300px; } .ls-saudacao { font-size: 24px; } .ls-plataforma { font-size: 20px; } .bs-default { height: 56px; } .is-text { width: 300px; height: 40px; } .ls-forgot-password { font-size: 12px; } .ls-link-forgot-password { font-size: 12px; } } /* Tablets */ @media (max-width: 991.98px) { .cs-login { max-width: 400px; } .ls-saudacao { font-size: 28px; } .ls-plataforma { font-size: 24px; } .is-text { width: 250px; height: 40px; } } /* Desktops */ @media (min-width: 992px) { .cs-login { max-width: 500px; } }