html.login,
html.full-page {
  background-color: var(--color-login-gradient-end);
}
html.login body,
html.full-page body {
  min-height: 100dvh;
  background: transparent;
}
html.login .shell,
html.full-page .shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
@media (min-width: 880px) {
  html.login .shell,
  html.full-page .shell {
    flex-direction: row;
    gap: 0;
  }
}
html.login .pane,
html.full-page .pane {
  padding: 32px;
}
@media (min-width: 880px) {
  html.login .pane,
  html.full-page .pane {
    flex: 1 1 0;
    min-width: 0;
    padding: 64px;
  }
}
html.login .pane-login,
html.full-page .pane-login {
  position: relative;
  background-color: var(--color-login-gradient-end);
  justify-content: center;
}
@media (min-width: 1280px) {
  html.login .pane-login,
  html.full-page .pane-login {
    flex: 16 1 0;
  }
}
html.login .pane-login .spinner-container,
html.full-page .pane-login .spinner-container {
  z-index: 2;
}
html.login .pane-login .header-image,
html.full-page .pane-login .header-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0.4;
  z-index: 0;
  background-image: linear-gradient(180deg, transparent 0%, var(--color-login-gradient-end) 100%), linear-gradient(rgba(12, 15, 19, 0.3), rgba(12, 15, 19, 0.3)), url('../../static/img/header-login.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 340px;
}
html.login .pane-login .login-form-column,
html.full-page .pane-login .login-form-column {
  gap: var(--spacing-l);
  justify-content: space-between;
  z-index: 1;
  background: none;
  max-width: 496px;
  width: 100%;
  flex: 1;
  margin-inline: auto;
}
html.login .pane-login .login-form-column .logo,
html.full-page .pane-login .login-form-column .logo {
  color: var(--color-rootnet-red);
}
html.login .pane-login .login-form-column h1,
html.full-page .pane-login .login-form-column h1 {
  font-weight: 600;
  font-size: 36px;
  letter-spacing: 0.01em;
  margin-bottom: 0px;
}
html.login .pane-login .login-form-column .message-container,
html.full-page .pane-login .login-form-column .message-container {
  margin-bottom: 0px;
}
html.login .pane-login .login-form-column .message-container:has(.message:empty),
html.full-page .pane-login .login-form-column .message-container:has(.message:empty) {
  display: none;
}
html.login .pane-login .login-form-column .action-block,
html.full-page .pane-login .login-form-column .action-block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}
html.login .pane-login .login-form-column .action-block input,
html.full-page .pane-login .login-form-column .action-block input {
  width: 100%;
}
html.login .pane-login .login-form-column .action-block[data-block="forgot"],
html.full-page .pane-login .login-form-column .action-block[data-block="forgot"],
html.login .pane-login .login-form-column .action-block[data-block="forgot-sent"],
html.full-page .pane-login .login-form-column .action-block[data-block="forgot-sent"],
html.login .pane-login .login-form-column .action-block[data-block="mfa"],
html.full-page .pane-login .login-form-column .action-block[data-block="mfa"] {
  display: none;
}
html.login .pane-login .login-form-column[data-action="forgot"] .action-block[data-block="login"],
html.full-page .pane-login .login-form-column[data-action="forgot"] .action-block[data-block="login"] {
  display: none;
}
html.login .pane-login .login-form-column[data-action="forgot"] .action-block[data-block="forgot"],
html.full-page .pane-login .login-form-column[data-action="forgot"] .action-block[data-block="forgot"] {
  display: flex;
}
html.login .pane-login .login-form-column[data-action="forgot-sent"] .action-block[data-block="login"],
html.full-page .pane-login .login-form-column[data-action="forgot-sent"] .action-block[data-block="login"] {
  display: none;
}
html.login .pane-login .login-form-column[data-action="forgot-sent"] .action-block[data-block="forgot-sent"],
html.full-page .pane-login .login-form-column[data-action="forgot-sent"] .action-block[data-block="forgot-sent"] {
  display: flex;
}
html.login .pane-login .login-form-column[data-action="mfa"] .action-block[data-block="login"],
html.full-page .pane-login .login-form-column[data-action="mfa"] .action-block[data-block="login"] {
  display: none;
}
html.login .pane-login .login-form-column[data-action="mfa"] .action-block[data-block="mfa"],
html.full-page .pane-login .login-form-column[data-action="mfa"] .action-block[data-block="mfa"] {
  display: flex;
}
html.login .pane-login .login-form-column .form-label,
html.full-page .pane-login .login-form-column .form-label {
  margin: 0;
  font-weight: 600;
  cursor: pointer;
}
html.login .pane-login .login-form-column .btn-link,
html.full-page .pane-login .login-form-column .btn-link {
  color: var(--color-login-btn-link);
}
html.login .pane-login .login-form-column footer,
html.full-page .pane-login .login-form-column footer {
  color: var(--color-login-footer);
}
html.login .pane-login .login-form-column footer .footer-links,
html.full-page .pane-login .login-form-column footer .footer-links {
  color: var(--color-login-footer);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-m);
}
html.login .pane-login .login-form-column footer .footer-links .contact-item,
html.full-page .pane-login .login-form-column footer .footer-links .contact-item {
  color: var(--color-login-footer);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-weight: 600;
}
html.login .pane-changelog,
html.full-page .pane-changelog {
  background-color: var(--color-gray-1);
  justify-content: center;
}
@media (min-width: 1280px) {
  html.login .pane-changelog,
  html.full-page .pane-changelog {
    flex: 10 1 0;
  }
}
html.login .pane-changelog #changelog-list,
html.full-page .pane-changelog #changelog-list {
  gap: var(--spacing-m);
}
html.login .pane-changelog #changelog-list #changelog-item-template,
html.full-page .pane-changelog #changelog-list #changelog-item-template {
  display: none;
}
html.login .pane-changelog #changelog-list .changelog-type,
html.full-page .pane-changelog #changelog-list .changelog-type {
  padding: var(--spacing-xxs);
  background-color: var(--color-gray-3);
  color: var(--color-text);
  font-size: var(--text-sm);
}
html.login .pane-changelog #changelog-list .changelog-date,
html.full-page .pane-changelog #changelog-list .changelog-date {
  font-size: var(--text-sm);
  color: var(--color-subtext);
  margin-left: var(--spacing-xs);
}
html.login .pane-changelog #changelog-list .changelog-title,
html.full-page .pane-changelog #changelog-list .changelog-title {
  margin-top: var(--spacing-xxs);
  font-weight: 600;
  color: var(--color-text);
}
html.login .pane-changelog #changelog-list .changelog-summary,
html.full-page .pane-changelog #changelog-list .changelog-summary {
  color: var(--color-input-group-text);
  margin-bottom: 0px;
}
html.login .pane-changelog #changelog-list .placeholder *,
html.full-page .pane-changelog #changelog-list .placeholder * {
  background-color: var(--color-gray-3);
  border: 0px;
  border-radius: var(--border-radius);
  animation-duration: 1.7s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: placeholderAnimate;
  background: linear-gradient(to right, var(--color-gray-3) 2%, var(--color-gray-5) 18%, var(--color-gray-3) 33%);
  background-size: 1300px;
}
@keyframes placeholderAnimate {
  0% {
    background-position: -650px 0;
  }
  100% {
    background-position: 650px 0;
  }
}
html.login .pane-changelog #changelog-list .placeholder .changelog-type,
html.full-page .pane-changelog #changelog-list .placeholder .changelog-type {
  display: inline-block;
  width: var(--spacing-l);
  height: var(--spacing-s);
}
html.login .pane-changelog #changelog-list .placeholder .changelog-date,
html.full-page .pane-changelog #changelog-list .placeholder .changelog-date {
  display: inline-block;
  width: var(--spacing-xl);
  height: var(--spacing-s);
}
html.login .pane-changelog #changelog-list .placeholder .changelog-title,
html.full-page .pane-changelog #changelog-list .placeholder .changelog-title {
  width: calc(var(--spacing-xxl) * 3);
  height: var(--spacing-m);
}
html.login .pane-changelog #changelog-list .placeholder .changelog-summary,
html.full-page .pane-changelog #changelog-list .placeholder .changelog-summary {
  width: calc(var(--spacing-xxl) * 5);
  height: var(--spacing-l);
}
html.login .pane-changelog #changelog,
html.full-page .pane-changelog #changelog {
  border: 1px solid var(--color-gray-4);
  border-radius: 8px;
  padding: 24px;
  max-width: 520px;
  margin-inline: auto;
  gap: var(--spacing-s);
}
html.login .pane-changelog .full-changelog-link,
html.full-page .pane-changelog .full-changelog-link {
  color: var(--color-text);
  font-weight: bold;
}
html.login .pane-changelog .divider,
html.full-page .pane-changelog .divider {
  margin: 0px;
  color: var(--color-gray-4);
}

html.reset-password {
  background-color: var(--color-login-gradient-end);
}
html.reset-password .header-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-image: linear-gradient(var(--color-login-gradient-begin) 25%, var(--color-login-gradient-end)), url('../../static/img/header-login.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  height: 650px;
  width: 100%;
}
html.reset-password,
html.reset-password > body,
html.reset-password #resetPasswordCenterContainer {
  height: 100%;
  display: grid;
}
html.reset-password #resetPasswordFormContainer {
  margin: auto;
  width: 100%;
  max-width: calc(var(--spacing-xxl) * 8);
  padding: var(--spacing-l);
}
html.reset-password #resetPasswordFormContainer .login-form-logo {
  display: block;
  margin: 0 auto var(--spacing-l);
  max-width: calc(var(--spacing-xxl) * 3);
  width: 100%;
}
html.reset-password #resetPasswordFormContainer #resetPasswordForm {
  max-width: calc(var(--spacing-xxl) * 4);
  margin: 0 auto;
}
@media (min-width: 768px) {
  html.reset-password #resetPasswordFormContainer {
    padding: var(--spacing-xxl);
  }
}
html.reset-password #resetPasswordFormContainer .form-label {
  cursor: pointer;
  margin-bottom: 0px;
}
html.reset-password > body {
  background: transparent;
}

html.accept-invite {
  background-color: var(--color-login-gradient-end);
}
html.accept-invite .header-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-image: linear-gradient(var(--color-login-gradient-begin) 25%, var(--color-login-gradient-end)), url('../../static/img/header-login.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  height: 650px;
  width: 100%;
}
html.accept-invite > body {
  background: transparent;
}
html.accept-invite,
html.accept-invite > body,
html.accept-invite .center-container {
  height: 100%;
  display: grid;
}
html.accept-invite .center-container > .menhir {
  margin: auto;
  width: 100%;
  max-width: 992px;
}
html.accept-invite #initialMenhir {
  min-height: var(--spacing-xxl);
}
html.accept-invite .invite-status i {
  font-size: var(--text-xl);
  display: none;
}
html.accept-invite .invite-status.success .fa-check-circle {
  display: initial;
}
html.accept-invite .invite-status.error .fa-times-circle {
  display: initial;
}
html.accept-invite .invite-status p {
  margin-bottom: 0;
}

html.email-verification {
  background-color: var(--color-login-gradient-end);
}
html.email-verification .header-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-image: linear-gradient(var(--color-login-gradient-begin) 25%, var(--color-login-gradient-end)), url('../../static/img/header-login.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  height: 650px;
  width: 100%;
}
html.email-verification > body {
  background: transparent;
}
html.email-verification,
html.email-verification > body,
html.email-verification .center-container {
  height: 100%;
  display: grid;
}
html.email-verification .center-container > .menhir {
  margin: auto;
  width: 100%;
  max-width: 768px;
}
html.email-verification .email-verification-container {
  margin: auto;
  width: 100%;
  max-width: calc(var(--spacing-xxl) * 7);
}
html.email-verification .email-verification-container .rootnet-logo {
  display: block;
  margin: 0 auto var(--spacing-xl);
  max-width: calc(var(--spacing-xxl) * 3);
  width: 100%;
}
html.email-verification .email-verification-container .flex-container {
  justify-content: center;
}
html.email-verification .email-verification-container .flex-container i {
  font-size: var(--text-xl);
  display: none;
}
html.email-verification .email-verification-container .flex-container.success .fa-check-circle {
  display: initial;
}
html.email-verification .email-verification-container .flex-container.error .fa-times-circle {
  display: initial;
}
html.email-verification .email-verification-container .flex-container p {
  margin-bottom: 0;
}

html.tickets-feedback,
html.tickets-close {
  background-color: var(--color-login-gradient-end);
}
html.tickets-feedback .header-image,
html.tickets-close .header-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-image: linear-gradient(var(--color-login-gradient-begin) 25%, var(--color-login-gradient-end)), url('../../static/img/header-login.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  height: 650px;
  width: 100%;
}
html.tickets-feedback > body,
html.tickets-close > body {
  background: transparent;
}
html.tickets-feedback,
html.tickets-close,
html.tickets-feedback > body,
html.tickets-close > body,
html.tickets-feedback .center-container,
html.tickets-close .center-container {
  height: 100%;
  display: grid;
}
html.tickets-feedback .center-container > .menhir,
html.tickets-close .center-container > .menhir {
  margin: auto;
  width: 100%;
  max-width: 768px;
}
html.tickets-feedback .ticket-feedback-form-container,
html.tickets-close .ticket-feedback-form-container,
html.tickets-feedback .ticket-close-container,
html.tickets-close .ticket-close-container {
  margin: auto;
  width: 100%;
  max-width: calc(var(--spacing-xxl) * 7);
}
html.tickets-feedback .ticket-feedback-form-container .rootnet-logo,
html.tickets-close .ticket-feedback-form-container .rootnet-logo,
html.tickets-feedback .ticket-close-container .rootnet-logo,
html.tickets-close .ticket-close-container .rootnet-logo {
  display: block;
  margin: 0 auto var(--spacing-xl);
  max-width: calc(var(--spacing-xxl) * 3);
  width: 100%;
}
html.tickets-feedback .ticket-feedback-form-container .feedback-smileys-container,
html.tickets-close .ticket-feedback-form-container .feedback-smileys-container,
html.tickets-feedback .ticket-close-container .feedback-smileys-container,
html.tickets-close .ticket-close-container .feedback-smileys-container {
  gap: var(--spacing-s);
}
html.tickets-feedback .ticket-feedback-form-container .feedback-smileys-container .feedback-smiley,
html.tickets-close .ticket-feedback-form-container .feedback-smileys-container .feedback-smiley,
html.tickets-feedback .ticket-close-container .feedback-smileys-container .feedback-smiley,
html.tickets-close .ticket-close-container .feedback-smileys-container .feedback-smiley {
  font-size: var(--text-xxl);
}
html.tickets-feedback .ticket-feedback-form-container .feedback-smileys-container .feedback-smiley .smiley,
html.tickets-close .ticket-feedback-form-container .feedback-smileys-container .feedback-smiley .smiley,
html.tickets-feedback .ticket-close-container .feedback-smileys-container .feedback-smiley .smiley,
html.tickets-close .ticket-close-container .feedback-smileys-container .feedback-smiley .smiley {
  opacity: 0.5;
  transition: all 150ms;
}
html.tickets-feedback .ticket-feedback-form-container .feedback-smileys-container .feedback-smiley > input:checked ~ .smiley,
html.tickets-close .ticket-feedback-form-container .feedback-smileys-container .feedback-smiley > input:checked ~ .smiley,
html.tickets-feedback .ticket-close-container .feedback-smileys-container .feedback-smiley > input:checked ~ .smiley,
html.tickets-close .ticket-close-container .feedback-smileys-container .feedback-smiley > input:checked ~ .smiley,
html.tickets-feedback .ticket-feedback-form-container .feedback-smileys-container .feedback-smiley:hover,
html.tickets-close .ticket-feedback-form-container .feedback-smileys-container .feedback-smiley:hover,
html.tickets-feedback .ticket-close-container .feedback-smileys-container .feedback-smiley:hover,
html.tickets-close .ticket-close-container .feedback-smileys-container .feedback-smiley:hover {
  opacity: 1;
}
html.tickets-feedback .ticket-feedback-form-container .form-floating textarea.form-control,
html.tickets-close .ticket-feedback-form-container .form-floating textarea.form-control,
html.tickets-feedback .ticket-close-container .form-floating textarea.form-control,
html.tickets-close .ticket-close-container .form-floating textarea.form-control {
  height: calc(var(--spacing-xxl) * 2);
}
html.tickets-feedback .feedback-smileys-container,
html.tickets-close .feedback-smileys-container {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xs);
}
html.tickets-feedback .feedback-smileys-container .feedback-smiley,
html.tickets-close .feedback-smileys-container .feedback-smiley {
  font-size: var(--text-l);
}
html.tickets-feedback .ticket-close-container .flex-container,
html.tickets-close .ticket-close-container .flex-container {
  justify-content: center;
}
html.tickets-feedback .ticket-close-container .flex-container i,
html.tickets-close .ticket-close-container .flex-container i {
  font-size: var(--text-xl);
  display: none;
}
html.tickets-feedback .ticket-close-container .flex-container.success .fa-check-circle,
html.tickets-close .ticket-close-container .flex-container.success .fa-check-circle {
  display: initial;
}
html.tickets-feedback .ticket-close-container .flex-container.error .fa-times-circle,
html.tickets-close .ticket-close-container .flex-container.error .fa-times-circle {
  display: initial;
}
html.tickets-feedback .ticket-close-container .flex-container p,
html.tickets-close .ticket-close-container .flex-container p {
  margin-bottom: 0;
}

html.update-username {
  background-color: var(--color-login-gradient-end);
}
html.update-username .header-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-image: linear-gradient(var(--color-login-gradient-begin) 25%, var(--color-login-gradient-end)), url('../../static/img/header-login.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  height: 650px;
  width: 100%;
}
html.update-username > body {
  background: transparent;
}
html.update-username,
html.update-username > body,
html.update-username .center-container {
  height: 100%;
  display: grid;
}
html.update-username .center-container > .menhir {
  margin: auto;
  width: 100%;
  max-width: 768px;
}
html.update-username .menhir {
  margin: auto;
  width: 100%;
  max-width: calc(var(--spacing-xxl) * 7);
}
html.update-username .menhir .rootnet-logo {
  display: block;
  margin: 0 auto var(--spacing-xl);
  max-width: calc(var(--spacing-xxl) * 3);
  width: 100%;
}
html.update-username #initialMenhir {
  min-height: var(--spacing-xxl);
}
html.update-username #verificationStatus .flex-container {
  justify-content: center;
}
html.update-username #verificationStatus i {
  font-size: var(--text-xl);
  display: none;
}
html.update-username #verificationStatus.success .fa-check-circle {
  display: initial;
}
html.update-username #verificationStatus.error .fa-times-circle {
  display: initial;
}
html.update-username #verificationStatus p {
  margin-bottom: 0;
}