*, *::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-copy-outline: url(/img/icons/copy_outline.svg);
  --icon-chat-bubble: url(/img/icons/chat_bubble.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-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: auto [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);
  min-height: 100dvh;
  align-items: center;
  justify-items: center;
}

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

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.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 H1 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: var(--brand-primary-color);
}
.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 h3 {
  font-weight: bold;
}
.ui-panel .ui-form {
  margin-bottom: 2rem;
}
.ui-panel .ui-form form {
  display: grid;
  gap: 0.5rem 1rem;
  margin-bottom: 2rem;
  grid-template-columns: 1fr auto;
}
.ui-panel .ui-form form.loading {
  pointer-events: none;
}
.ui-panel .ui-form form.loading button[type=submit] {
  position: relative;
  display: grid;
  color: transparent;
}
.ui-panel .ui-form form.loading button[type=submit]:before {
  content: "";
  position: absolute;
  width: 2rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0.2rem solid white;
  border-top-color: transparent;
  animation: rotation 1s linear infinite;
}
.ui-panel .ui-form form.success {
  pointer-events: none;
}
.ui-panel .ui-form form.success button[type=submit] {
  position: relative;
  display: grid;
  background-color: rgb(27, 94, 32);
  color: transparent;
}
.ui-panel .ui-form form.success button[type=submit]:before {
  content: "";
  position: absolute;
  width: 2rem;
  display: block;
  width: 2rem;
  height: 2rem;
  background-image: var(--icon-check-white);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 2rem;
}
.ui-panel .ui-form form.otp input[type=email] {
  display: none;
}
.ui-panel .ui-form form.otp input[type=text] {
  display: block;
}
.ui-panel .ui-form form .msg {
  text-align: left;
  padding-left: 2rem;
}
.ui-panel .ui-form form .msg p {
  display: none;
  grid-template-columns: 1.5rem 1fr;
  font-size: 76%;
  color: var(--brand-primary-color);
}
.ui-panel .ui-form form .msg p[class^=error]:before {
  content: "!";
  display: grid;
  align-items: center;
  justify-items: center;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--brand-primary-color);
  color: white;
  font-weight: bold;
}
.ui-panel .ui-form form[data-error="404"] .msg .error-404 {
  display: grid;
}
.ui-panel .ui-form input[type=email],
.ui-panel .ui-form input[type=text] {
  font-size: 1.2rem;
  padding: 1rem 2rem 1rem 3rem;
  border-radius: 0.5rem;
}
.ui-panel .ui-form input[type=email] {
  background-image: var(--icon-mail);
  background-position: 0.5rem center;
  background-repeat: no-repeat;
  background-size: auto 2rem;
}
.ui-panel .ui-form input[type=text] {
  text-align: center;
  display: none;
  background-image: var(--icon-mail-read);
  background-position: 0.5rem center;
  background-repeat: no-repeat;
  background-size: auto 2rem;
}
.ui-panel .ui-form button[type=submit] {
  font-size: 1.2rem;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: var(--brand-primary-color);
  border-color: var(--brand-primary-color);
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-items: center;
  cursor: pointer;
}
.ui-panel .ui-form input[type=email]:invalid ~ button[type=submit] {
  pointer-events: none;
  filter: grayscale(1);
}
.ui-panel .ui-login-form + .ui-otp-form {
  display: none;
}
.ui-panel .divider {
  margin: 1rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  color: rgba(0, 0, 0, 0.5);
}
.ui-panel .g_id_signin {
  display: grid;
  justify-content: center;
}
.ui-panel .g_id_signin [aria-labelledby=button-label] {
  font-size: 150%;
}