html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } html { -webkit-text-size-adjust: 100%; } body { -webkit-overflow-scrolling: touch; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0 none; } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } a { background-color: transparent; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: bolder; } dfn { font-style: italic; } mark { background-color: #ffff00; color: #000000; } svg:not(:root) { overflow: hidden; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } hr { box-sizing: content-box; height: 0; overflow: visible; } button, input, select, textarea { font: inherit; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } input, textarea, button, select, a { -webkit-tap-highlight-color: rgba(0,0,0,0); } address { font-style: normal; } a:focus:not(:focus-visible), select:focus:not(:focus-visible), input:focus:not(:focus-visible), textarea:focus:not(:focus-visible) { outline: 0 } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button, input[type="reset"], input[type="button"], input[type="submit"] { cursor: pointer; } button[disabled], input[disabled] { cursor: default; } button { appearance: none; background: transparent; padding: 0; border: 0; border-radius: 0; line-height: 1; } button:focus:not(:focus-visible) { outline: 0 } a, a:hover { text-decoration: none; } [href="javascript:void();"], [href="javascript:"] { cursor: default; } ul, ol { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: none; } table { border-collapse: collapse; border-spacing: 0; } input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="week"], textarea { box-sizing: border-box; } [type="checkbox"], [type="radio"] { box-sizing: border-box; margin: 0; padding: 0; } input[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } input[type="number"] { -moz-appearance: textfield; } select { width: 100%; height: 20px; border: 0 none; background: none; } textarea { resize: none; border: 0 none; overflow: auto; } ::placeholder { color: #777777; line-height: normal; } [hidden] { display: none; } .form { display: grid; row-gap: 16px; margin: 60px; max-width: 400px; } .form__row { display: flex; flex-direction: column; } .form__label { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 600; padding-top: 12px; padding-bottom: 12px; } .form__input { display: block; width: 100%; height: 50px; padding: 6px 12px; font-size: 16px; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; appearance: none; border-radius: 6px; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; } .form__input:focus { color: #212529; background-color: #fff; border-color: #86b7fe; outline: 0; box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%); } .form__button { justify-self: start; height: 50px; min-width: 200px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; color: rgb(255, 255, 255); text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; border: 1px solid #0d6efd;; border-radius: 6px; background-color: #0d6efd; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; } .form__button:focus { color: #fff; background-color: #0b5ed7; border-color: #0a58ca; outline: 0; box-shadow: 0 0 0 0.25rem rgba(49,132,253,.5); } .alert { display: none; --bs-alert-bg: transparent; --bs-alert-padding-x: 1rem; --bs-alert-padding-y: 1rem; --bs-alert-margin-bottom: 1rem; --bs-alert-color: inherit; --bs-alert-border-color: transparent; --bs-alert-border: 1px solid var(--bs-alert-border-color); --bs-alert-border-radius: 0.375rem; position: relative; padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x); margin-bottom: var(--bs-alert-margin-bottom); color: var(--bs-alert-color); background-color: var(--bs-alert-bg); border: var(--bs-alert-border); border-radius: var(--bs-alert-border-radius); } .alert-danger { --bs-alert-color: #842029; --bs-alert-bg: #f8d7da; --bs-alert-border-color: #f5c2c7; } .alert-success { --bs-alert-color: #0f5132; --bs-alert-bg: #d1e7dd; --bs-alert-border-color: #badbcc; }