*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font: inherit; /* Get rid of all font sizes and heights */
}

html {
  hanging-punctuation: first last; /* Not supported in Chrome */
}

body {
  min-height: 100vh;
}

/* Media responsive */
img, picture, svg, video {
  display: block;
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p {
  max-width: 75ch;
  text-wrap: pretty; /* Prevents orphans on lines */
}

@media (prefers-reduced-motion: no-preference) {
  :has(:target) {
    scroll-behavior: smooth;
    scroll-padding-top: 3rem;
  }
}
:root {
  --text-color: rgba(51,51,51);
  --background-color: rgb(243,243,243);
  --border-color: rgb(212,212,216);
  --border-width: 0.12em;
  --border-radius: 1rem;
  --brand-primary-color: rgb(255,103,0);
  --brand-primary-color-light: rgba(255,103,0,0.2);
  --brand-primary-color-filter: invert(43%) sepia(21%) saturate(7237%) hue-rotate(3deg) brightness(107%) contrast(103%);
  --status-active: rgb(76,175,80);
}

:root {
  --icon-logo: url(/img/icon.svg);
  --icon-account-circle: url(/img/icons/account_circle.svg);
  --icon-add: url(/img/icons/add.svg);
  --icon-arrow-down: url(/img/icons/keyboard_arrow_down.svg);
  --icon-arrow-drop-down: url(/img/icons/arrow_drop_down.svg);
  --icon-arrow-drop-up: url(/img/icons/arrow_drop_up.svg);
  --icon-calendar: url(/img/icons/calendar.svg);
  --icon-check: url(/img/icons/check.svg);
  --icon-check-white: url(/img/icons/check_white.svg);
  --icon-close: url(/img/icons/close.svg);
  --icon-copy-outline: url(/img/icons/copy_outline.svg);
  --icon-chat-bubble: url(/img/icons/chat_bubble.svg);
  --icon-cloud-download: url(/img/icons/cloud_download.svg);
  --icon-cloud-upload: url(/img/icons/cloud_upload.svg);
  --icon-csv: url(/img/icons/csv.svg);
  --icon-dashboard: url(/img/icons/dashboard.svg);
  --icon-dashboard-outline: url(/img/icons/dashboard_outline.svg);
  --icon-delete: url(/img/icons/delete.svg);
  --icon-download: url(/img/icons/download.svg);
  --icon-error: url(/img/icons/error.svg);
  --icon-folder: url(/img/icons/folder.svg);
  --icon-folder-outline: url(/img/icons/folder_outline.svg);
  --icon-fullscreen: url(/img/icons/fullscreen.svg);
  --icon-fullscreen-exit: url(/img/icons/fullscreen_exit.svg);
  --icon-grid-view: url(/img/icons/grid_view.svg);
  --icon-help: url(/img/icons/help.svg);
  --icon-help-outline: url(/img/icons/help_outline.svg);
  --icon-home: url(/img/icons/home.svg);
  --icon-home-outline: url(/img/icons/home_outline.svg);
  --icon-image-outline: url(/img/icons/image_outline.svg);
  --icon-link: url(/img/icons/link.svg);
  --icon-location-on: url(/img/icons/location_on.svg);
  --icon-location-on-outline: url(/img/icons/location_on_outline.svg);
  --icon-logout: url(/img/icons/logout.svg);
  --icon-mail: url(/img/icons/mail.svg);
  --icon-mail-read: url(/img/icons/mail_read.svg);
  --icon-map: url(/img/icons/map_24dp.svg);
  --icon-more-vert: url(/img/icons/more_vert.svg);
  --icon-notifications: url(/img/icons/notifications.svg);
  --icon-notifications-outline: url(/img/icons/notifications_outline.svg);
  --icon-open-new: url(/img/icons/open_in_new.svg);
  --icon-pause: url(/img/icons/pause.svg);
  --icon-play: url(/img/icons/play.svg);
  --icon-photo-library: url(/img/icons/photo_library.svg);
  --icon-photo-library-outline: url(/img/icons/photo_library_outline.svg);
  --icon-settings: url(/img/icons/settings.svg);
  --icon-settings-outline: url(/img/icons/settings_outline.svg);
  --icon-setting-account-box: url(/img/icons/settings_account_box.svg);
  --icon-setting-account-box-outline: url(/img/icons/settings_account_box_outline.svg);
  --icon-search: url(/img/icons/search.svg);
  --icon-share: url(/img/icons/share.svg);
  --icon-sync: url(/img/icons/sync.svg);
  --icon-tag: url(/img/icons/tag.svg);
  --icon-tag-outline: url(/img/icons/tag_outline.svg);
  --icon-tags-outline: url(/img/icons/tags_outline.svg);
  --icon-timer: url(/img/icons/timer.svg);
  --icon-trash: url(/img/icons/delete.svg);
  --icon-user: url(/img/icons/person.svg);
  --icon-user-outline: url(/img/icons/person_outline.svg);
  --icon-view-list: url(/img/icons/view_list.svg);
  --icon-videocam: url(/img/icons/videocam.svg);
  --icon-videocam-outline: url(/img/icons/videocam_outline.svg);
  --icon-video-library: url(/img/icons/video_library.svg);
  --icon-video-library-outline: url(/img/icons/video_library_outline.svg);
  --icon-visibility: url(/img/icons/visibility.svg);
  --icon-visibility-off: url(/img/icons/visibility_off.svg);
}

.icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.icon.dashboard {
  background-image: var(--icon-dashboard);
}
.icon.source {
  background-image: var(--icon-source);
}
.icon.logout {
  background-image: var(--icon-logout);
}
.icon.map {
  background-image: var(--icon-map);
}

INPUT {
  background-color: white;
  border: var(--border-width) solid var(--border-color);
  border-radius: 0.5rem;
  padding: 0.3em 0.5em;
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}

SELECT {
  background-color: white;
  border: var(--border-width) solid var(--border-color);
  border-radius: 0.3rem;
  padding: 0.3em 1em 0.3em 0.5em;
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}

BODY {
  display: grid;
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  grid-template-rows: [content-start] 1fr [content-end footer-start] auto [footer-end];
  grid-template-columns: [login-start] 1fr [login-end];
  gap: 0rem;
  padding: 0.5rem;
  background-color: rgb(243, 243, 243);
}

BODY > FOOTER {
  color: #333;
  font-size: 0.76em;
  display: flex;
  justify-content: space-between;
}
BODY > FOOTER A {
  color: #333;
  cursor: pointer;
}
BODY > FOOTER A:hover {
  text-decoration: underline;
}

body {
  padding: 0;
  min-height: 100dvh;
  display: grid;
  align-items: center;
  justify-items: center;
}

.ui-panel {
  display: grid;
  border: 0.1rem solid rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
  grid-template-columns: 20rem minmax(30rem, auto);
  background-color: white;
}
.ui-panel > section {
  padding: 2rem;
}
.ui-panel > section:first-child {
  background-color: #000;
  border-radius: 1rem 0 0 1rem;
  color: white;
}
.ui-panel > section:first-child H2 {
  margin-top: 2rem;
  font-weight: bold;
  font-size: 1.5rem;
}
.ui-panel > section:first-child UL {
  margin-top: 1rem;
  padding: 1rem 1rem;
  display: grid;
  gap: 0.5rem;
}
.ui-panel > section:last-child a {
  color: var(--brand-primary-color);
}
.ui-panel > section:last-child input[type=checkbox] {
  display: inline-grid;
  place-content: center;
  appearance: none;
  background-color: #fff;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.5em;
  height: 1.5em;
  border: 0.15em solid currentColor;
  transform: translateY(-0.075em);
  border-radius: 0.5rem;
  border-color: var(--brand-primary-color);
  vertical-align: middle;
  margin-right: 0.5rem;
  cursor: pointer;
}
.ui-panel > section:last-child input[type=checkbox]::before {
  content: "";
  width: 1em;
  height: 1em;
  border-radius: 0.3rem;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--brand-primary-color);
}
.ui-panel > section:last-child input[type=checkbox]:checked::before {
  transform: scale(1);
}
.ui-panel > section:last-child h3 {
  font-weight: bold;
}
.ui-panel > section:last-child ol {
  padding-left: 1rem;
  display: grid;
  gap: 1rem;
}
@media (orientation: portrait) {
  .ui-panel {
    grid-template-columns: 1fr;
    grid-template-rows: 5rem minmax(30rem, auto);
  }
  .ui-panel section:first-child {
    border-radius: 1rem 1rem 0 0;
    padding: 1rem 2rem;
  }
  .ui-panel section:first-child img {
    height: 3rem;
  }
  .ui-panel section:first-child h2,
  .ui-panel section:first-child ul {
    display: none;
  }
  .ui-panel section:last-child {
    border-radius: 0 0 1rem 1rem;
    padding: 1rem;
  }
  .ui-panel .ui-form .ui-form-columns {
    grid-auto-flow: row;
  }
}

FORM:invalid .ui-button.primary {
  pointer-events: none;
  opacity: 0.5;
}

H1 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: var(--brand-primary-color);
}

.ui-form {
  display: grid;
  gap: 1rem;
}

.ui-form-columns {
  display: grid;
  grid-auto-flow: column;
  gap: 1rem;
}

.ui-form-element {
  display: grid;
  gap: 0.5rem;
  grid-template-rows: auto auto;
  grid-template-columns: auto auto;
}
.ui-form-element > label {
  grid-column: span 2;
  color: rgba(0, 0, 0, 0.5);
}
.ui-form-element > input[type=email],
.ui-form-element > input[type=text] {
  border-width: 0.15rem;
  padding: 0.5rem 1rem;
  grid-column: span 2;
}
.ui-form-element > input[type=email]:user-valid,
.ui-form-element > input[type=text]:user-valid {
  border-color: green;
}
.ui-form-element > input[type=email]:focus,
.ui-form-element > input[type=text]:focus {
  border-color: var(--brand-primary-color);
  outline-color: var(--brand-primary-color);
}

.ui-form-actions {
  padding-top: 2rem;
  text-align: center;
}

.ui-button {
  font-size: 1.5rem;
  padding: 1rem 3rem;
  background-color: var(--brand-primary-color);
  border: none;
  border-radius: 5rem;
}
.ui-button.primary {
  background-color: var(--brand-primary-color);
  color: white;
}

/*# sourceMappingURL=signup.css.map */