html { height: 100% }
html {
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  font-size: 1.5rem;
  background-color: #f6f6ef;
}

:root {
    --active-brightness: 0.85;
    --border-radius: 5px;
    --box-shadow: 2px 2px 10px;
    --color: #ff6600;
    --color-accent: #e9e9e9;
    --color-bg: #fff;
    --color-bg-secondary: #e9e9e9;
    --color-link: #ff6600;
    --color-secondary: #920de9;
    --color-secondary-accent: #920de90b;
    --color-shadow: #f4f4f4;
    --color-table: #ff6600;
    --color-text: #000;
    --color-text-secondary: #999;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --hover-brightness: 1.2;
    --justify-important: center;
    --justify-normal: left;
    --line-height: 1.5;
    --width-card: 285px;
    --width-card-medium: 460px;
    --width-card-wide: 800px;
    --width-content: 1080px;
}

/* Styles */

.main-bg { color: #CCC; }
.fg-hn { color: #ff6600; }

.full-width { width: 100%; }

.dashed-underline { border-bottom: 0.1em dashed; }

.hidden { display: none; }

.cursor-pointer { cursor: pointer }

button.outline {
  background-color: rgba(0,0,0,0);
}

.content-width { width: fit-content; }

.input-group {
  display: flex;
}

.input-group input {
  padding: 0;
  height: 2em;
  padding-left: 1em;

  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.input-group input:nth-of-type(1) {
  margin: 0;
  border-bottom-left-radius: 0.25em;
  border-top-left-radius: 0.25em;
}

.input-group button {
  margin: 0;
  padding: 0 1em;
  height: 3.1em;
  min-width: 5em;

  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0.25em;
  border-top-right-radius: 0.25em;
}

.text-centered { text-align: center; }
.text-sm { font-size: 0.5em; }

.flex { display: flex; }
.flex.justify-center { justify-content: center; }
.flex.justify-right { justify-content: right; }
.flex.align-items-center { align-items: center; }
.flex.col { flex-direction: column; }
.flex.centered {
  justify-content: center;
  align-items: center;
}

.float-right { float: right; }

.width-auto { width: auto; }

.pad-sm { padding: 0.5em; }
.pad-md { padding: 1em; }

.no-margin { margin: 0; }
.margin-v-sm {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.margin-v-md {
  margin-top: 1em;
  margin-bottom: 1em;
}

form .nonce { display: none; }

form.listmonk-form {
  max-width: none;
}

.borderless { border: none; }

.hidden { display: none; }

/**************/
/* Page Flash */
/**************/

#page-flash {
  display: none;
  position: absolute;

  width: 100%;
  border-radius: 0.25em;
  top: 0.5em;
  width: 90%;
  padding: 0.5em;
}

#page-flash.shown {
  display: block;
}

#page-flash.flash-success {
  background-color: #d4edda;
  color: #155724;
}

#page-flash.flash-error {
  background-color: #f8d7da;
  color: #721c24;
}

#page-flash .close {
  margin-top: -0.25em;
}

/***********/
/* Loading */
/***********/

.animation.dot-loading::after {
  animation: dot-loading 3s linear infinite alternate;
  content: '';
}

@keyframes dot-loading {
  0% { content: '.'; }
  25% { content: '..'; }
  50% { content: '...'; }
  75% { content: '..'; }
  100% { content: '.'; }
}