.msg__error { display: none; color: var(--red-color); font-size: 14px; text-align: left; margin: 8px 0px; } .frm__lbl { display: block; font-size: 18px; font-weight: 600; color: var(--text-color-light); text-align: left; margin-bottom: 6px; } .input { border: 1px solid #bfbfbf; border-radius: 4px; width: -moz-available; width: -webkit-fill-available; width: fill-available; padding: 8px 12px; color: var(--text-color-light); margin: auto; display: block; margin-bottom: 14px; font-size: 18px; line-height: 1.3; outline: 0; background-color: #f3f3f3; font-family: "Avenir"; } .input.error { border: 1px solid var(--red-color); } .input.success { border: 1px solid var(--green-color); } .frm__cta { width: 146px; height: 43px; background-color: #75787b; color: var(--text-color-negative); font-size: 14px; display: flex; justify-content: center; align-items: center; border-radius: 34px; cursor: no-drop; } .frm__cta.enabled { background-color: var(--green-color); cursor: pointer !important; } .chk__item { display: flex; margin-bottom: 5px; } .input__chk { width: 28px; min-width: 28px; height: 28px; margin-right: 10px; } .chk__lbl { color: var(--text-color-light); font-size: 14px; line-height: 1.3; } .chk__lbl a { color: var(--green-color); text-decoration: underline; } .login { max-width: 470px; width: 84%; background-color: #ffffff; margin: auto; position: relative; box-shadow: 0px 3px 12px #00000029; border: 1px solid #c1c1c1; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; height: 100%; min-height: 400px; padding: 15px; padding: 2rem 1rem; display: flex; flex-direction: column; gap: 1rem; } .login img{ order: -1; } .login__wrapper { width: 100%; /* position: fixed; */ background: radial-gradient( closest-side at 50% 50%, #43b02a 0%, #006341 100% ); top: 0; left: 0; right: 0; bottom: 0; z-index: 20; overflow-y: auto; padding: 22px 0px; } .login__cover { border-radius: 0px 8px 8px 0px; } .frm h1 { font-size: 16px; line-height: 1.4; margin-bottom: 12px; text-align: center; } .frm h2 { font-size: 14px; color: var(--text-color-light); font-weight: normal; margin-bottom: 12px; text-align: center; } .frm__row { position: relative; } .password__cta img { width: 22px; } .password__cta { position: absolute; right: 20px; margin-top: -42px; } .hide__tarjeta { display: none; } .hide__tarjeta__bin { display: none; } .login__show__error { width: 20px; height: 20px; border-radius: 20px; background-color: var(--red-color); margin-left: 10px; display: inline-block; } .ctas { display: flex; justify-content: center; align-items: center; margin-top: 35px; } .error__wrapper { width: 100%; position: fixed; height: 100%; background-color: rgba(0, 0, 0, 0.5); top: 0; left: 0; right: 0; bottom: 0; z-index: 20; display: none; } .error__content { padding: 15px 10px 23px 10px; max-width: 254px; border: 1px solid #c1c1c1; border-radius: 8px; box-shadow: 0px 3px 12px #00000029; margin: 5% auto; background-color: #ffffff; } .error__icon { width: 78px; display: block; margin: auto; } .error__content p { font-size: 16px; line-height: 1.4; margin: 18px 0px 30px 0px; text-align: center; } .error__cta { width: 162px; height: 43px; background-color: var(--green-color); color: var(--text-color-negative); font-size: 14px; display: flex; justify-content: center; align-items: center; border-radius: 34px; margin: auto; } .terms__wrapper { width: 100%; position: fixed; height: 100%; background-color: rgba(0, 0, 0, 0.5); top: 0; left: 0; right: 0; bottom: 0; z-index: 21; display: none; } .terms { padding: 50px 2px 30px 2px; width: 90%; border: 1px solid #c1c1c1; border-radius: 8px; box-shadow: 0px 3px 12px #00000029; margin: 5% auto; background-color: #ffffff; position: relative; max-width: 1000px; } .terms object { width: 98%; height: 400px; border: 1px solid #c1c1c1; border-radius: 8px; box-shadow: 0px 3px 12px #00000029; margin: auto; } .close__terms { position: absolute; top: 15px; right: 20px; } .close__terms img { width: 19px; } .terms__cta { height: 36px; padding: 3px 5px; max-width: 370px; background-color: var(--green-color); color: var(--text-color-negative); font-size: 14px; display: flex; justify-content: center; align-items: center; margin: 15px auto 0px auto; border-radius: 34px; } .terms__cta img { display: none; } @media screen and (min-width: 768px) { .login { height: auto; padding: 40px; } .terms__cta img { display: block; width: 18px; margin-right: 16px; } .terms object { height: 500px; } .terms { margin: 2% auto; padding: 50px 20px 30px 20px; } } @media screen and (min-width: 960px) { .login { width: auto; width: 100%; max-width: 950px; padding: 0; flex-direction: row; } .login img{ order: 0; } .frm { padding: 0px 40px; width: 50%; } .login__wrapper { padding: 40px 10px; } .login__cover { display: block; width: 50%; } .login__wrapper { padding: 0; display: flex; align-items: center; justify-content: center; } .error__content { padding: 28px 60px 30px 60px; max-width: 390px; margin: 10% auto; } .error__icon { width: 110pxpx; } .error__content p { font-size: 24px; margin: 20px 0px 35px 0px; } .error__cta { width: 230px; height: 65px; font-size: 22px; } } @media screen and (min-width: 1280px) { .frm__lbl, .checkup__frm .frm__lbl { font-size: 22px; } .input { margin-bottom: 15px; font-size: 22px; } .frm__cta { width: 238px; height: 65px; margin-top: 25px; font-size: 22px; } .msg__error { font-size: 18px; } .chk__lbl { font-size: 22px; } .input__chk { width: 30px; height: 30px; margin-right: 12px; } .chk__item { margin-bottom: 8px; } .frm h1 { font-size: 28px; margin-bottom: 20px; } .frm h2 { font-size: 20px; margin-bottom: 24px; } .login { max-width: 1250px; } .password__cta img { width: 27px; } .password__cta { margin-top: -48px; } .terms object { height: 546px; } .terms__cta { height: 58px; font-size: 22px; max-width: 500px; margin-top: 30px; } .close__terms img { width: 24px; } .login__wrapper { background: radial-gradient( closest-side at 50% 50%, #43b02a 0%, #006341 100% ); } } @media screen and (min-width: 1550px) { .login { max-width: 1340px; } .frm { padding: 0px 60px; } } .see__bin{ padding-top: 3px; }