body{ font-family: 'Roboto', sans-serif; } .title{ text-align: center; font-weight: 700; font-size: 2rem; } .form{ max-width: 500px; margin: 10px auto; padding: .5em 2em; } .form__label { display: inline-block; margin-top: 20px; margin-bottom: 5px; cursor: pointer; } .form__input{ box-sizing: border-box; width: 100%; margin-bottom: 20px; border-width: 3px; height: 45px; border-radius: 3px; } .input-container{ position: relative; } .form__input-icon{ display: none; position: absolute; top: 10px; left: 93%; } .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48 } .icon-check{ color: #1ed12d; } .icon-cancel{ color: #be2a38; } .icon-warning{ vertical-align: bottom; } .form__input-error{ display: none; margin: 0; font-size: 1rem; text-align: justify; } .form__error-text{ display: none; background: #F66060; margin-top: 10px; margin-bottom: 30px; padding: .7em; } .form__submit{ margin: 10px 0; text-align: center; } .form__submit__button{ width: 30%; padding: .8em; background: #000; color: #fff; font-weight: 700; border: none; border-radius: 3px; cursor: pointer; } .form__success-send-text{ display: none; text-align: center; color: #119200; }