body { height: 100vh; margin: 0; } .header { width: 100%; height: 55px; background: #FFFFFF 0% 0% no-repeat padding-box; box-shadow: 0px 1px 0px #0000001A; } .header__logo { position: relative; left: 90px; width: 60px; height: 56px; background: #1082D2 0% 0% no-repeat padding-box; } .logo__m { height: 56px; line-height: 56px; text-align: center; } .logo__m:before { font-family: "Montserrat Bold"; font-size: 34px; color: #FFFFFF; content: 'M'; } .body { width: 100%; position: relative; height: calc(100vh - 57px); } .body__form { height: fit-content; width: 330px; margin: auto; top: 0; bottom: 0; left: 0; right: 0; position: absolute; } .form__title { font: normal normal normal 30px/24px "Montserrat Bold"; letter-spacing: -1px; color: #000000; height: 35px; display: block; } .form__subtitle { font: normal normal normal 14px/18px "Montserrat Regular"; letter-spacing: -0.8px; margin-bottom: 20px; } .form__input { height: 40px; width: calc(100% - 22px); background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #ECECEC; padding: 0 10px; display: block; font: normal normal normal 14px/15px "Montserrat Regular"; letter-spacing: -0.28px; margin-bottom: 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form__input:focus { outline:none; } .form__input::placeholder { color: #CCC9C9; } .form__btn { height: 42px; width: 100%; background: #1082D2 0% 0% no-repeat padding-box; font: normal normal bold 15px/23px "Montserrat Bold"; letter-spacing: 0px; color: #FFFFFF; border: 0; padding: 0; display: block; margin-bottom: 50px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form__btn:focus { outline:none; } .form__btn:hover { cursor: pointer; background: #0d79c5 0% 0% no-repeat padding-box; } .result__summary, .result__list { font: normal normal normal 14px/18px "Montserrat Regular"; letter-spacing: -0.8px; } .body__result { height: fit-content; max-height: 500px; overflow-x: hidden; overflow-y: auto; transition: max-height 1s; } .hidden { max-height: 0; transition: max-height 1s; } .result__summary:after { content: ''; border-bottom: 1px solid #000000; display: block; width: 100%; height: 8.5px; opacity: 0.15; margin-bottom: 29.5px } .result__list { text-transform: capitalize; list-style-position: inside; padding: 0; margin: 0; }