:root {
  --outer-bg: #ffffea;

  --main-bg: #d7ffda;
  --main-fg: #000000bf;
  --level2-bg: #bdf4c2;
  --level3-bg: #a6ecad;

  --head-fg: #871487;
  --head-underline: #3bbc43;
  --notes-fg: #077507;
  --user-bg-selected: #efecfc;

  --menu-bg: #D364D4;
  --menu-bg-selected: #5C5CBF;
  --menu-fg: #0d6efd;
  --menu-item-fg: white;

  --filter-bg: #88d9ff;
  --filter-bg-selected: #6465D4;
  --filter-fg: #2a6b8b;
  --filter-fg-selected: white;

  --function-bg: #0d6efd;
  --function-fg: #0d6efd;

  --button-bg: #9b64d4;
  --button-fg: #ffdefb;
  --button-fg-shadow: purple;

  --label-fg: #077507;
  --input-fg: #396fa6;

  --danger-bg: #ea4d4d;
  --danger-fg: #ffff87;
  --danger-fg-shadow: darkred;


  --warn-bg: #faeabb;
  --warn-fg: #c06549;
  --warn-fg-shadow: #ffdf7f;

  --stats-fg: #f2cdcd;
  --stats-admin-fg: #e26f6f;

  --table-fg: #3a6526;
  --table-border: #dee2e6;

  --msg-success-bg: #cbfabb;
  --msg-success-border: #6fba81;
  --msg-success-fg: #357020;

  --msg-waiting-bg: #deff96;
  --msg-waiting-border: #bbce5f;
  --msg-waiting-fg: #7aaa49;

  --msg-warn-bg: #faeabb;
  --msg-warn-border: #ba926f;
  --msg-warn-fg: #c06549;
}

html * {
  color: inherit;
  font-family: Arial;
  font-size: clamp(16px, 5.5vw, 24px);
  @media only screen and (min-width: 440px) and (orientation:portrait) {
    font-size: clamp(24px, 5.4vw, 32px);
  }
  @media only screen and (min-width: 440px) and (orientation:landscape) {
    font-size: clamp(18px, 3.5vw, 32px);
  }
}

html {
  background: var(--main-bg);
  height: 100%;
  zoom: 100%;
}

body {
  margin: auto;
  max-width: 1800px;
  min-width: 240px; /* 270px is stable */
  &:has(#dialog[style="display: block;"]) {
/*     overflow: hidden; */
  }
}

#amfora { /* base elements */
  a {
    color: var(--head-fg);
    font-size: 0.9em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    /* ellipsis */
    /*! color: unset; */
    display: inline-block;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }

  div {
    color: var(--notes-fg);
    text-shadow: 0.04em 0.04em 0.04em white;
  }

  div > div {
    font-size: inherit;
  }

  form {
    margin: auto;
    text-align: center;

    .title-and-functions {
      .functions {
        flex-wrap: wrap;
        button {
          margin-top: 0;
        }
      }
    }
    .block {
      max-width: 30em;
    }
  }

  input {
    text-align: center;
  }

  h1 {
    color: var(--head-fg);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .title {
      border-bottom: none;
      color: var(--notes-fg);
      font-size: 1.5em;
      margin-left: auto;
      text-align: center;
    }
  }

  h2 {
    border-bottom: 1px solid var(--head-underline);
    color: var(--notes-fg);
    font-size: 0.8em;
    margin: 1em 0 0.5em 0;
  }

  li {
    padding-bottom: 0.3em;
  }

  pre {
    margin-bottom: 0 !important;
    margin-left: 0.5em !important;
  }

  span {
    color: var(--notes-fg);
    text-shadow: 0.04em 0.04em 0.04em white;
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
} /* base elements */

#amfora { /* base classes */
  .block {
    background: var(--main-bg);
    padding: 0.4em;

    @media only screen and (max-width: 920px) {
      .split {
        display: flex !important;
        flex-direction: column;
      }
    }
    .split {
      display: grid;
      grid-template-areas:
        "header header"
        "details subscribers";
      grid-template-columns: 1fr 1fr;
      grid-template-rows: min-content auto;
      gap: 1em;
    }

    .block {
      margin: 0.2em auto 0;
      width: 100%;
    }

    .old {
      filter: grayscale(80%);
    }

    &.old.content {
      border-radius: 0.5em;
      margin-bottom: 0;
      margin-top: 1em;
      padding-bottom: 2em;

      .button {
        background: none;
        a {
          span {
            color: var(--button-bg);
            text-shadow: 0.05em 0.05em 0.05em var(--button-fg);
          }
        }
      }
    }
  }

  .bullet {
    height: 1em;
    display: inline-block;
    position: relative;
    top: 0.1em;
  }

  .dense {
    h2 {
      display: flex;
      flex-flow: column;
      gap: 1em;
      @container li (width < 700px) {
        gap: 0.3em;
      }
      justify-content: space-between;
    }
    .info {
      font-size: 60%;
    }
    .block {
      justify-content: end;
      margin: 0.2em auto;
      padding: 0.2em;
    }
  }

  .ellipsis {
    /*! color: unset; */
    display: inline-block;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }

  .functions {
    display: flex;
    gap: 0.5em;
    margin-left: auto;
    padding: 0 !important;
    .buttons {
      display: flex;
      flex-grow: 1;
      gap: 0.5em;
      justify-content: end;
      .button.light {
        margin: 0;
        min-height: 1.8em;
        a {
          padding: 0;
          span {
            i {
              font-size: 1.2em;
              padding: 0;
              padding-top: 0.1em;
              margin: 0;
            }
          }
        }
      }
    }
  }

  i.icon-star, i.icon-star-full {
    color: orange !important;
    text-shadow: 0 0 0.5em yellow !important;
  }
  h1 {
    i.icon-star, i.icon-star-full {
      margin-right: auto;
      margin-left: 0.5em;
      margin-top: 0.1em;
    }
  }

  .info:not(.button) {
    background: rgb(255, 255, 225, 70%);
    border-radius: 0.3em;
    color: var(--notes-fg);
    margin: auto !important;
    padding: 0.3em !important;
    text-align: center;
    /*! width: 16em; */
  }

  .missing, .alert {
    text-align: center;
    p {
      margin: 0.3em;
    }
    .button {
      margin: auto;
    }
  }


  .notes {
    color: var(--notes-fg);
    font-size: 0.9em;
    flex-wrap: wrap;
    margin: 0.5em 0;
    padding: 0.1em;
    text-align: center;
    .button {
      margin-top: 0.4em !important;
    }
  }
} /* base classes */

#amfora { /* buttons */
  .button {
    a {
      display: block;
      cursor: pointer;
      padding: 0.4em;
      width: 100%;
      span {
        font-size: 1em;
      }
    }
  }
} /* buttons */

#amfora { /* content buttons */
  .content {
    i {
      color: var(--notes-fg);
      text-shadow: 0.04em 0.04em 0.04em white;
    }
    .button {
      &:has(a.inactive) {
        filter: opacity(0.44);
      }
    }
    .button.icon {
      width: 2.4em;
      max-width: 2.4em;
    }
    .button.big {
      a {
        white-space: break-spaces;
        span {
          &:not(:first-child) {
            font-size: 0.8em;
          }
          display: block !important;
        }
      }
    }
    .button.light {
      margin: 0.15em;
      width: unset;
      max-width: 12em;
      a {
        display: flex;
        gap: 0.5em;
        align-items: center;
        justify-content: center;
        span {
          margin: 0.2em 0.2em 0.1em 0.4em;
        }
      }
    }
    .button.danger, .button.light.danger {
      background: var(--danger-bg) !important;
      a {
        color: var(--danger-fg);
        text-shadow: 0.05em 0.05em 0.05em darkred;
        span {
          color: inherit;
          text-shadow: inherit;
          i {
            color: #dfff00;
          }
        }
      }
    }
    .button.icon {
      a {
        padding: 0.5em 0 0.3em 0.3em;
      }
    }
    .button.light {
      a {
        padding: 0.2em;
      }
    }
    .button.icon,
    .button.light {
      background: var(--level3-bg);
      margin: auto;
      min-height: 2em;
      margin-bottom: 0.15em;
      a {
        span {
          color: var(--notes-fg);
          text-shadow: 0.01em 0.01em 0.01em white;
          .icon2 {
            font-size: 1.53em;
            margin-left: -0.1em;
            text-shadow: 0.01em 0.01em 0.01em white;
          }
        }
      }
    }
    .button.info {
      border-radius: 1em;
      height: 1.9em;
      margin-left: 0 !important;
      width: 1.9em;
      flex-shrink: 0;
      background: var(--filter-bg);
      a {
        height: 100%;
        text-align: center;
        width: 100%;
        padding-top: 0.2em;
        span {
          color: var(--filter-fg);
          text-shadow: 0.05em 0.05em 0.05em var(--filter-fg-shadow);
          font-size: 1.4em;
          padding: 0;
          i {
            padding-top: 0.1em;
          }
        }
      }
    }
    button, .button {
      background: var(--button-bg);
      border: 0.05em solid white;
      border-radius: 0.3em;
      box-shadow: 0.05em 0.05em 0.15em #846990;
      color: var(--button-fg);
      cursor: pointer;
      font-size: 0.8em;
      margin-bottom: auto;
      margin-left: auto;
      text-align: center;
      width: 8em;
    }

    .button {
      a {
        font-weight: bold;
        span {
          color: var(--button-fg);
          text-shadow: 0.05em 0.05em 0.05em var(--button-fg-shadow);
        }
      }
      &:first-child:not(.danger) {
        font-size: 0.8em;
        width: 8em;
      }
    }

    button {
      padding: 0.4em 1em;
      &[type='submit'] {
        margin: 0.5em 0 0.5em auto;
        text-shadow: 0.05em 0.05em 0.05em var(--button-fg-shadow);
      }
    }
  }
} /* content buttons */

#amfora { /* title and info */
  .title-and-info {
    align-items: flex-start;
    display: flex;
    gap: 0.5em;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 0.5em !important;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    .button.info {
      margin-top: -0.15em;
    }
    i{
      color: var(--button-fg);
      text-shadow: 0.05em 0.05em 0.05em var(--button-fg-shadow);
    }
    .date {
      margin: 0;
      text-align: center;
    }
    .title {
      margin: unset;
      text-align: left;
    }
  }
} /* title and info */

#amfora { /* filters, navigation */
  .filters,
  .navigation {
    display: block;
    padding: 0;

    margin-bottom: 1em !important;
    &.applied {
      border-top: 1px solid var(--head-underline);
      display: flex;
      justify-content: center;
      position: sticky;
      top: 0;
      z-index: 2;
      > .icon {
        color: red !important;
        margin-right: 0.2em;
        margin-top: 0.33em;
        position: relative;
        i{
/*         position: absolute; */
/*         right: 0.5em; */
          text-shadow: 0 0 0.2em yellow;
        }
      }
      .filter {
        border: none !important;
        margin:0;
        padding: 0 !important;;
      }
      .button {
        &.selected, &.danger {
          max-height: 1.8em;
          width: auto;
        }
        &.selected {
          padding: 0 1.5em 0 0.5em;
          span {
            margin: 0;
            i {
              margin-left: 0.5em;
              color: red;
              position: absolute;
              top: 0.55em;
              text-shadow: 0 0 0.2em white;
            }
          }
        }
        &:not(:is(.selected,.danger)), &.all {
          display: none;
        }
        &.danger{
          width: 2em;
          min-width: 1.5em;
          a {
            padding: 0;
            i {
              padding-top: 0.35em
            }
          }
        }
      }
    }

    .button {
      background: var(--filter-bg);
      cursor: pointer;
      display: flex;
      line-height: 1.3em;
      margin: 0.1em !important;;

      a {
        align-self: center;
        white-space: nowrap;
      }

      &:not(.all) {
        max-width: 12em;
      }

      &.selected {
        background: var(--filter-bg-selected);
        border-bottom: 1px solid cyan;
        cursor: default;
      }

      &:not(.selected) {
        a {
          span {
            color: var(--filter-fg);
            text-shadow: 0.05em 0.05em 0.05em var(--filter-fg-selected);
          }
        }
      }
    }
  }

  .filters {
    .filter {
      display: flex;
      flex-wrap: wrap;
      gap: 0.1em;
      justify-content: center;
    }
  }

  .navigation {
    display: flex;
    gap: 0.5em;
    justify-content: center;
    margin-bottom: 1em;
    div {
      margin: auto 0 auto 0;
    }
    .button {
      max-width: 2em !important;
    }
  }
} /* filters, navigation */

#amfora { /* login */
  .clearfix {
    padding-bottom: 0.5em;
  }

  input[name=username],
  input[name=password] {
    border-radius: .25rem;
    border: 1px solid #ced4da;
    padding: 0.4em;
    text-align: center;
    width: 100%;
  }
} /* login */

#amfora { /* badge */
  & div:has(> .badge) {
    position: relative;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
  }
  .badge {
    background:white;
    border-radius: 0.3em;
    box-shadow: 0 0 0.2em yellow;
    color: red;
    margin-left: -0.7em;
    padding: 0 0.1em;
    text-shadow: 0 0 0.2em yellow !important;
    position: absolute;
    bottom: -0.3em;
    right: -0.88em;
  }
} /* badge */

#amfora { /* main menu ~> buttons */
  #menu {
    background: var(--main-bg);
    display: flex;
    height: 1.9em;
    margin: 0;
    min-width: 240px; /* 270px is stable */
    padding: 0 !important;

    .buttons, #sandwich {
      height: 100%;
      overflow: auto;
      scrollbar-width: none;  /* Firefox, Chrome, Safari */
      -ms-overflow-style: none;  /* Internet Explorer 10+, Edge */
      &::-webkit-scrollbar { /* Chrome, Opera */
        display: none;
      }
    }
    #buttons-container {
      background: var(--menu-bg);
      margin-left: 0.3em;
      width: calc(100% - 4.3em);
    }
    .buttons {
      margin-left: -0.3em;
      display: flex;
      flex-grow: 1;
      flex-shrink: 0;
      /*! flex-wrap: wrap; */
      gap: 5px 0;

      .button:first-child {
        border-radius: 0 0 0 0.3em !important;
        a {
          span:nth-of-type(1) {
            margin-left: 0.6em;
            margin-right: 0.4em;
          }
          span:nth-of-type(2) {
            padding-right: 1.5em;
          }
        }
      }
      .button:last-child {
        padding-right: 1em;
      }
    }

    .button {
      background: var(--menu-bg);
      border-radius: 0 !important;
      flex-grow: 1;
      flex-shrink: 0;

      &.icon {
        a {
          line-height: 1.8em;
          display: flex;
          justify-content: center;
        }
      }
      &.selected {
        background: var(--menu-bg-selected);
        border-radius: 0.2em !important;
      }
      a {
        height: 100%;
        font-size: 70%;
        .icon2 {
          padding-right: 0.2em;
        }
        span {
          color: var(--menu-item-fg);
          text-shadow: 0.05em 0.05em 0.05em var(--button-fg-shadow);
        }
        span:nth-of-type(2){
          vertical-align: 0.1em;
        }
        span.icon {
          font-size: 1.3em;
          position: relative;
        }
      }
    }
    #sandwich-container {
      padding-left: 1em;
      margin-left: -1em;
      overflow: hidden;
      width: 5em;
    }
    #sandwich {
      box-shadow: 0 0 1em var(--button-fg-shadow);
      display: flex;
      flex-shrink: 0;
      border-left: 0.005em dotted white !important;
      width: 4em;
      .button {
        a {
          padding: 0.4em 0;
          display: flex;
          justify-content: center;
        }
        border-radius: unset !important;
      }
      .button:first-of-type {
        padding-left: 0.2em;
      }
      .button:last-of-type {
        border-radius: 0 0 0.3em 0 !important;
      }
    }
  }
} /* main menu ~> buttons */

#amfora { /* main menu page ~> buttons */
  #menu-page {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.6em;
    justify-content: center;
    :has([href='/']) {
      display: none;
    }
    .collapsible {
      display: unset !important;
    }
    .button {
      border-radius: 1.5em !important;
      color: var(--button-fg);
      margin: 0;
      max-width: 45%;
      min-width: 9.6em;
      a {
        padding: 0 1.1em 1.2em;
        .icon2{
          font-size: 72px;
          padding-top: 0.1em;
          margin-left: 0;
        }
      }
      a {
        & span {
          display: block;
        }
      }
    }
  }
} /* main menu page ~> buttons */

#amfora { /* main menu and menu page ~> buttons */
  #menu {
    .button {
      a {
        .badge {
          font-size: 0.9em;
          line-height: 1.2em;
          bottom: -0.10em;
          right: 0.02em;
        }
        &:has(.badge) .icon i {
          font-size: 1.4em;
          line-height: 1em !important;
        }
      }
    }
  }
  #menu {
    .buttons {
      a {
        &:has(.badge) {
          .icon {
            margin-right: 0.1em;
          }
        }
        .badge {
          margin-right: 0.2em;
        }
      }
    }
  }
  #menu-page {
    .button {
      padding-bottom: 0.2em;
      padding-top: 0.3em;
      a {
        line-height: 1em;
        span {
          margin-top: 0.5em;
        }
        .badge {
          font-size: 2.2em;
          line-height: 1.1em;
          margin-top: -2em;
          position: absolute;
          right: 0.95em;
          bottom: -0.1em;
        }
        .icon {
          position: relative;
          i {
            width: 100%;
          }
        }
      }
    }
  }
  #menu, #menu-page {
    .button {
      a {
        .badge {
          color: red;
        }
        &:has(.badge) .icon i {
          color: yellow;
          text-shadow: 0 0 0.2em red;
        }
      }
    }
  }
} /* main menu and menu page ~> buttons */

@keyframes messageAnimation {
  0%{
    display: block;
    height: 0;
    opacity: 0;
    zoom: 0.2;
  }
  10%{
    height: 6em;
    opacity: 1;
    zoom: 1;
  }
  50%{
    height: 6em;
    opacity: 1;
    zoom: 1;
  }
  100%{
    display: none;
    height: 0;
    opacity: 0;
    zoom: 0.02;
  }
} /* message animation */

#amfora { /* message */
  div.message {
    animation-name: messageAnimation;
    animation-duration: 5000ms;
    animation-fill-mode: both;
    height: 6em;
    left: 0;
    position: fixed;
    top: 0.2em;
    width: 100%;
    z-index: 1000;
    & > div {
      margin: auto;
      padding: 0.7em;
      width: 80%;
    }
    .error {
      background: var(--msg-warn-bg) !important;
      border: 1px solid var(--msg-warn-border);
      color: var(--msg-warn-fg);
    }
    .success {
      background: var(--msg-success-bg) !important;
      border: 1px solid var(--msg-success-border);
      color: var(--msg-success-fg);
    }
    .waiting {
      background: var(--msg-waiting-bg) !important;
      border: 1px solid var(--msg-waiting-border);
      color: var(--msg-waiting-fg);
    }
    .warn {
      background: var(--msg-warn-bg) !important;
      border: 1px solid var(--msg-warn-border);
      color: var(--msg-warn-fg);
    }
  }
} /* message */

#amfora { /* auto grow textarea */
  /* PLAN a year or two in replace it w/
    textarea {
      field-sizing: content;
    } https://stackoverflow.com/a/79251170 */
  /* https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ */
  .grow-wrap {
    /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
    display: grid;
/*     height: 1.8em; */
  }
  .grow-wrap::after {
    /* Note the weird space! Needed to prevent jumpy behavior */
    content: attr(data-replicated-value) " ";

    /* This is how textarea text behaves */
    white-space: pre-wrap;
    background: red;
    min-width: 100%;
    overflow-wrap: anywhere;
    margin-left: 0 !important;
    margin-right: 0 !important;

    /* Hidden from view, clicks, and screen readers */
    visibility: hidden;
  }
  .grow-wrap > textarea {
    /* You could leave this, but after a user resizes, then it ruins the auto sizing */
    resize: none;

    /* Firefox shows scrollbar on growth, you can hide like this. */
    overflow: hidden;
/*     height: 1.8em; */
  }
  .grow-wrap > textarea,
  .grow-wrap::after {
    /* Identical styling required!! */
    font: inherit;

    /* Place on top of each other */
    grid-area: 1 / 1 / 2 / 2;
  }
  /* end of auto grow textarea */
  textarea,
  .grow-wrap::after {
    border: none;
    width: calc(100% - 6em);
    border-radius: 0.2em;
    margin-bottom: 0.2em;
    padding: 0.5em;
    margin: 0.5em 3em;
  }
} /* auto grow textarea */

#amfora { /* stats */
  #stats {
    padding: 1em;
    div {
      color: var(--stats-fg);
      font-size: 0.5em;
      text-align: center;
    }
  }
  #stats-admin {
    position: absolute;
    left: 0;
    width: 100%;
    div {
      color: var(--stats-admin-fg);
      font-size: 0.8em;
      text-align: center;
    }
  }
} /* stats */

#amfora { /* tables */
  table, tr, td, th {
    box-sizing: border-box;
    color: var(--table-fg);
    font-size: 0.8em;
  }

  table {
    background: transparent;
    border-collapse: collapse;
    border-spacing: 0px;
    margin-bottom: 1em;
    max-width: 100%;
    text-align: center;
    width: 100%;
  }

  td {
    border: 1px solid #3bbc43;
    padding: 0.2em;
    hr {
      color: white;
      height: 0.02em;
      background: white;
      border: 0;
      margin: 0.2em;
    }
    span {
      font-size: 1em;
    }
  }

  th {
    border: 1px solid #3bbc43;
    padding: 0.2em;
    word-wrap: anywhere;
    position: sticky;
    top: 0;
    background: var(--level2-bg);
  }

  tr.add {
    td.from,
    td.op,
    td.to {
      color: green;
    }
  }

  tr.changed{
    td.from {
      color: red;
    }
    td.op{
      color: blue;
    }
    td.to {
      color: green;
    }
  }

  tr.delete{
    td.from,
    td.op,
    td.to {
      color: red;
    }
  }

  td.warn {
    background: var(--danger-fg);
  }

  td.alert {
    color: var(--danger-fg);
    background: var(--danger-bg);
    text-shadow: 0.05em 0.05em 0.05em darkred;
  }
} /* tables */

#amfora { /* title and functions */
  .title-and-functions {
    display: flex;
    gap: 0.5em;
    justify-content: flex-end;
    .buttons {
      display: flex;
    }
    .button {
      width: 7em;
      min-width: 7em;
      margin-top: 0 !important;
      margin-right: 0;
      margin-bottom: auto;
    }
    h1 {
      flex-grow: 1;
    }
  }
} /* title and functions */

/* APP */
#amfora { /* app base: date, type, (event)type + id */
  span.date {
    margin-left: auto;
  }
  .date{
    margin-top: auto;
    span {
      color: unset;
      margin: 0 0.15em;
      &.year,
      &.month_day_block,
      &.day_time_block {
        display: inline-block;
        text-align: center;
        padding-top: 0.15em;
      }
      &.day_name {
        font-size: 58%;
        margin: 0 0 0 -0.2em;
      }
      &.minute {
        font-size: 60%;
        margin: 0 0 0 -0.1em;
      }
      &.minute {
        text-decoration: underline;
        vertical-align: super;
      }
    }
  }

  h1 {
    color: var(--notes-fg);
    font-size: 1.2rem;
    span.type{
      color: var(--notes-fg);
      font-size: 1em;
      .id {
        font-size: 0.5em;
        margin-left: 0.3em;
      }
    }
  }
} /* app base: date, type, (event)type + id */

#amfora { /* location */
  .locations {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-top: 0.5em;
  }
  .location, .location-dense {
    align-items: self-end;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2em;
    .address {
      display: inline-block;
    }
    .city {
      font-size: 80%;
    }
    .functions {
      margin: auto;
    }
  }
} /* location */

#amfora { /* app calendar */
  .calendar {
    margin-top: 1em;
    .dense.agenda {
    }
    .wrap {
      width: 100%;
    }
    .dense.daily {
      height: 22em;
      div.type {
        display: none !important;
      }
    }
    .dense.weekly {
      height: 22em;
      ul {
        li {
          min-height: 33em;
          .events {
            .event {
            }
          }
        }
      }
    }
    .dense.monthly {
      min-height: 22em;
      ul {
        li {
          min-height: 4em;
          .events {
            .event {
            }
          }
        }
      }
    }
    .dense.weekly,
    .dense.monthly {
      ul {
        display: flex;
        gap: 0.2em;
        flex-flow: row wrap;
        margin: 0 0 1em 0;
        span.date {
          display:block;
          padding-bottom: 0.3em;
          text-align: center;
          zoom: 0.6;
          .month_day_block {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
          }
          span {
            &.day_name {
              margin-left: 0;
            }
          }
        }
        li {
          background: var(--level2-bg);
          border: 0.05em solid white;
          border-radius: 0.2em;
          box-shadow: 0.05em 0.05em 0.15em #846990;
          display: flex;
          flex-direction: column;
          flex-grow: 1;
          font-size: 0.5em;
          height: auto;
          overflow: auto;
          padding: 0.2em;
          width: 3em;

          &:has(.speech) {
            background: var(--level3-bg);
          }
          &.day_0 {
            &::after {
              content: '';
              display: block;
              width: 100%;
            }
          }
          .speeches {
            .speech {
              a {
                background: var(--head-fg);
                border-radius: 0.2em;
                display: flex;
                flex-wrap: wrap;
                gap: 0.1em;
                justify-content: space-around;
                line-height: 0.85em;
                padding: 0.1em 0.1em 0.2em;
                span {
                  color: white;
                  text-shadow: 0.04em 0.04em 0.04em blue;
                  display: inline-block;
                  font-size: 0.72em;
                }
              }
            }
          }
          .events {
            margin-bottom: 0.5em;
            margin-top: 0;
            .event {
              margin-bottom: 0.2em;
              a {
                display: flex;
                flex-wrap: wrap;
                gap: 0 0.1em;
                height: auto;
                justify-content: center;
                width: auto;
                line-height: 1em;
              }
              .time {
                color: var(--filter-bg-selected);
                font-size: 0.5em;
              }
              .type {
                font-size: 0.43em;
              }
              .id {
                font-size: 0.82em;
              }
            }
          }
        }
      }
    }
  }
} /* app calendar */

#amfora { /* app users & groups */
  .groups .group {
    font-size: 80%;
    text-align: center;
  }

  .users {
    container-type: inline-size;
    container-name: users;
    span.notes {
      color: darkcyan;
      font-size: 0.8em;
      margin: -0.1em 0 0.5em;
      padding: 0;
      span.comment {
        font-size: 1.2em;
        i {
          color: darkcyan;
          display: inline-block;
          margin-left: -1.2em;
          margin-top: 0.15em;
          position: absolute;
        }
      }
    }
    .user {
      align-content: inherit;
      display: flex;
      font-size: 80%;
      min-width: 9.7em;
      text-align: center;
      justify-content: center;
      span.name {
        display: inline-block;
        font-size: 100%;
        margin: auto;
        padding-top: 0.2em;
        width: calc(100% - 2.6em);
      }
      span.online {
        font-size: 1.2em;
        margin-right: 0.2em;
        i {
          color: darkcyan;
          display: inline-block;
          margin-left: -1.2em;
          margin-top: 0.1em;
          position: absolute;
        }
      }
      .buttons {
        display: flex;
        justify-content: space-around;
        margin: auto;
      }
      .button.light {
        display: inline;
        float: right;
        margin-right: 0.15em;
        margin-left: 1em;
        @container users (width < 700px) {
          margin-left: 0.2em;
        }
        width: 2em;
        margin-top: auto;
        margin-bottom: auto;
        min-width: 1.9em;
        a {
          padding: 0;
          .icon {
            margin-right: 0;
            margin-bottom: 0;
          }
        }
      }
    }

    .selected {
      span.name {
        background: var(--user-bg-selected);
        border-radius: 0.2em;
        padding: 0 0 0 0.3em;
      }
    }

    .waiting-list-warning {
      background: #ffc75c;
      border-radius: 0.3em;
      color: var(--head-fg);
      font-size: 0.7em;
      margin-right: 0.5em;
      margin-left: 0.1em;
      padding: 0 0.1em;
    }
  }

  .select {
    font-size: 2em;
    display: flex;
    flex-direction: column;
  }
} /* app users & groups */

#amfora { /* app speeches */
  .speech {
    .title {
      margin-left: 0.2em;
    }
    .details {
      .functions {
        display: flex;
        justify-content: center;
        margin: 1em;
        .button {
          margin: unset;
        }
      }
    }
    .views {
      .button {
        margin-top: 0.4em !important;
      }
    }
    .attendance {
      display: flex;
      justify-content: center;
      margin-top: 0.5em;
      text-align: center;

      .button {
        filter: saturate(0.8);
        margin: 0;
        margin-bottom: auto;

        &.icon {
          margin-left: 1em;
          &.add {
            background: #45c945;
            i {
              color: white;
              text-shadow: none;
            }
          }
        }
        &:has(i) {
          font-size: 0.4em;
          margin-bottom: auto;
        }
        &.danger {
          margin-left: 1em;
          margin-top: 0.2em;
        }
      }
      h2 {
        text-align: center;
      }
      i.icon-star-full {
        margin-right: 0.3em;
      }
    }
    .events {
      h2 {
        font-weight: bold;
        text-align: center;
      }
      div.type {
        display: none !important;
      }
    }
    .block.notes{
      padding-top: 0;
      &.open {
        .notes {
          max-height: unset;
        }
      }
    }
    pre.notes {
      overflow: auto;
      max-height: 8.2em;
      margin-top: 0;
      padding: 0;
      text-align: left;
      text-wrap: wrap;
    }
  }
} /* app speeches */

#amfora { /* app events */
  .event_details,
  .events ul li {
    .users {
      padding-bottom: 0.5em;
    }
    .subscribers {
      display: flex;
      flex-direction: column;
      grid-area: subscribers;
      margin-top: 0;
      padding-top: 0;
      overflow: hidden;
      font-weight: bold;
      padding-top: 0.5em;
      .users {
        display: flex;
        flex-flow: column;
        margin-bottom: 0.3em;
        min-height: 3.4em;
        overflow: auto;
        gap: 0.1em 0;
        justify-content: start;
        min-width: 2.4em; /*keep useradd button box-shadow*/
        p {
          width: auto;
          margin: auto;
        }
        > .button {
          margin-top: 0.3em;
        }
      }

      .functions {
        margin: auto;
        flex-wrap: wrap;
        .button {
          margin-left: auto;
          margin-right: auto;
        }
      }
    }
  }
} /* app events */

@keyframes highlighter {
  0% {
  }
  50% {
    background: #78f984;
  }
  100% {
  }
} /* highlight animation */

#amfora:is(._labors,._labors__labor__) {
  .events ul>h2{
    top: 0;
  }
}

#amfora[class^='labors'] {
  .events ul>h2{
    top: 0.5em;
  }
}

#amfora:is(.labors,.laborslabor) {
  .events ul>h2 {
    top: 0;
  }
}

#amfora:[class^='labors'] {
  .events ul>h2 {
    top: 0.5em;
  }
}

#amfora { /* app events */
  .events {
    margin-top: 1em;

    h2 {
      .title {
        font-weight: bold;
        text-align: center;
      }
    }
    &:is(.filter_labor, .single) {
      div.type {
        display: none !important;
      }
    }

    .speech-title {
      margin-top: 1em;
      .id {
        display: none !important;
      }
    }

    ul {
      display: flex;
      flex-wrap: wrap;
      gap: 1.2em 1.2em;
      padding-bottom: 1.5em;
      width: 100%;

      h2 {
        margin: 0 !important;
        width: 100%;
      }
      &>h2 {
        background: var(--main-bg);
        position: sticky;
        top: 0;
        z-index: 1;
      }

      li.highlight {
        box-shadow: 0 0 0.3em #00ffe7 !important;
        animation: highlighter 5s linear infinite;
        animation-fill-mode: both;
        background:#95ff9f;
      }

      li.created_by_me {
        /* background:#ffe4db; */
        .star {
          margin-top: 0.15em;
        }
        .created_by_me {
          background: var(--filter-bg);
          span {
            color: var(--filter-fg);
            text-shadow: var(--button-fg-shadow);
          }
        }
      }

      li {
        container-name: li;
        container-type: inline-size;
        overflow-y: hidden;
        width: 100%;

        &.is_full {
          filter: hue-rotate(20deg);
        }

        .type-and-title {
          display: flex;
          flex-direction: row;
          justify-content: center;
          margin-bottom: 0.5em !important;
          padding-bottom: 0.5em;

          .title {
            font-weight: bold;
            text-align: center;
          }
          .button.light {
            margin: 0;
            margin-bottom: auto;
            min-height: 0;
            a {
              padding: 0.2em 0.2em 0 0.4em;
              span {
                margin: 0;
              }
            }
          }
          .type-and-speech {
            max-width: 53%;
            padding-left: 0.25em;
            a {
              display: flex;
            }
            .type {
              display: flex;
              justify-content: center;
              width: 100%;

              .id {
                display: inline;
                font-size: 0.7em;
                margin-left: 0.5em;
                margin-top: 0.3em;
              }
            }
          }
        }

        .event-details {
          align-content: start;
          display: flex;
          flex-direction: row;
          gap: 0.5em;
          @container li (width < 500px) {
            flex-direction: column;
            gap: 0em;
          }
          justify-content: space-between;
          padding: 0 0.4em 0 0.1em;

          .location-dense {
            margin-bottom: auto;
            margin-top: 1em;
            padding-bottom: 0.3em;
            @container li (width < 500px) {
              margin-right: 0;
              margin-top: 0;
            }
            .city {
              display: block;
              margin-bottom: 0.5em;
            }
            .button {
              width: 2.5em;
              margin: auto;
            }
          }

          div.subscribers {
            border-left: 1px solid var(--head-underline);
            padding-left: 0.5em;
            @container li (width < 500px) {
              border-top: 1px solid var(--head-underline);
              border-left: none;
            }
          }

          span.subscribers { /* TODO remove if counter is not restored */
            background: #a8f78b;
            color: #107926;
            text-align: center;
            border-radius: 0.2em;
            font-size: 0.8em;
            padding: 0.1em 0.4em;
            &.full {
              background: #f78b8b;
              color: #900909;
            }
            &.soft {
              background: #54e93e;
            }
            &.min-soft {
              background: #5ce91c;
              color: #107926;
            }
            &.min-hard {
              background: #f4f78b;
              color: #469009;
            }
            &.no-min-hard {
              background: #ffc4c4;
              color: #9d4747;
            }
          }
        }
      }
    }
  }
} /* app events */

#amfora { /* app forms */
  @media only screen and (min-width: 1360px) {
    ul.forms {
      li.form {
        width: calc(50% - 0.6em);
      }
    }
  }
  .answer {
    line-height: 1.2em;
  }
  .divider {
    color: red;
    font-size: 2em;
    padding: 0 0.1em;
    position: relative;
    top: 0.15em;
  }
  .radio, .checkbox {
    margin: auto;
    position: relative;
    text-align: left;
    width: 2em;

    input {
      position: absolute !important;
      left: -1.8em;
      top: 0.14em;
      width: 1.3em;
      height: 1.3em;
    }
  }
  .checkbox {
    input {
      top: -0.01em;
    }
  }
  &.formassigned {
    h2 {
      text-align: center;
      font-weight: bold;
      margin-top: 0.5em !important;
    }
  }
  &[class^="formassigned"] {
    hr {
      height: 0.02em;
      background: var(--main-fg);
      border: 0;
    }
    .schedule {
      margin-top: 2em;
      text-align: center;
      .title {
      }
      .question {
        text-align: center;
        margin-top: 0em;
      }
      .answer {
        max-width: 27em;
        margin: auto;
        p:last-child {
          padding-bottom: 2em;
        }
      }
    }
  }
  ul.forms {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2em;
    justify-content: space-between;
    margin-bottom: 2em;
    .form {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      .questions {
        max-height: 4em;
        overflow: auto;
      }
      ul.schedules {
        &.assigned {
          max-width: 27em !important;
          margin: auto;
          .schedule {
            margin: 0 0.5em 0 0;
          }
        }
        gap: 0.5em;
        li.schedule {
          align-items: center;
          flex-direction: row;
          padding: 0 0 0 0.5em;
          justify-content: space-between;
          width: 100%;
          .functions {
            flex-wrap: nowrap;
            flex-shrink: 0;
            .button {
              flex-shrink: 0;
            }
            .button:has(.badge) {
              position: relative;
            }
            .badge {
              background: white;
              height: 1.2em;
              right: -0.3em;
              top: 1.8em;
              color: var(--notes-fg);
            }
          }
        }
      }
    }
  }
  .form {
    .counter {
      display: inline-block;
      padding-right: 0.2em;
      text-align: right;
      width: 1.6em;
    }
    form {
      margin: 0;
      max-width: unset;
      width: 100%;
      display: flex;
    }
    input[type=text] {
      height: 1.6em;
      margin-left: 4.8em;
      margin-right: 0.4em;
      margin-top: 0.5em;
      width: calc(100% - 9.3em);
    }
    .questions.editor {
      margin-bottom: 0.4em;
      .question {
        display: flex;
        .counter {
          color: var(--notes-fg);
          padding-top: 0.45em;
        }
        .move {
          margin-right: 0.5em;
          display: flex;
          width: 4em;
          .button {
            margin-top: unset;
            margin-bottom: auto;
          }
        }
        .preview {
          .form-group {
            margin-top: 0.4em;
          }
        }
      }
      .functions {
        margin-top: unset;
        margin-bottom: auto;
        form {
          align-content: center;
          align-items: center;
          display: flex;
          button, input {
            margin-top: auto;
            margin-bottom: auto;
          }
        }
        input {
          border-radius: 0.3em;
          display: block;
          padding: 1em;
        }
      }
    }
    ul.schedules {
      display: flex;
      gap: 1.2em;
      flex-wrap: wrap;
      width: 100%;
    }
    .schedules {
      input[type=text] {
        margin-left: 1.5em;
        width: calc(100% - 5.2em);
      }
      .functions {
        align-content: right;
        justify-content: end;
        form {
          width: unset;
        }
      }
      .schedule {
        display: flex;
        flex-direction: column;
        gap: 1em;
        .details {
          display: flex;
          flex-wrap: wrap;
          align-items: self-end;
          width: calc(100% - 2em);
          .options {
            margin-right: 0.5em;
            display: flex;
            width: 3em;
          }
          .title {
            width: 8em;
          }
          .date {
            margin: 0;
            min-width: 11em;
            width: 11em;
          }
          .dates {
            display: flex;
            flex-wrap: wrap;
            .submission_opened_at {

            }
            .submission_locked_at {

            }
          }
        }
        .functions {
        }
      }
    }
  }
} /* app forms */

#amfora { /* app 2nd and 3rd level blocks */
  .tile,
  .block.stats,
  .events > ul > li,
  .forms > ul > li,
  .schedules > ul > li,
  .speeches > ul > li,
  .subscriptions > ul > li,
  .locations > ul > li {
    background: var(--level2-bg);
    margin: 0;
    padding: 0.6em;
    border-radius: 0.4em;
    border: 0.05em solid white;
    box-shadow: 0.05em 0.05em 0.15em #846990;
    div:not(.button) {
      background: inherit;
    }
  }
  .speeches > ul > li {
    margin: 0 0 1.5em 0;
  }
  .tile .tile,
  .locations > ul > li .events > ul > li {
    background: var(--level3-bg);
  }
  .tile {
    margin: 1em 0 2em;
    h1 {
      font-weight: bold;
    }
  }
  .tile .tile {
    margin: 1.5em 0.3em;
    padding: 0.5em;
    h1 {
      font-weight: normal;
    }
  }
} /* app 2nd and 3rd level blocks */

#amfora { /* app event_type filters ~> buttons */
  .filters {
    .event_type.filter {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      .button:not(.all) {
        min-width: 5em;
        max-width: 12em !important;
        max-height: 2em;
        padding: 0 0.2em;
        a {
          text-overflow: ellipsis;
          max-height: inherit;
          line-clamp: 1;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }
    .filter.alphabet {
      .button {
        max-width: 2em;
      }
      .button:first-of-type {
        max-width: 12em;
      }
    }
    .filter.city, .filter.type {
      filter: hue-rotate(310deg);
    }
    .filter.event_type,
    .filter.speech {
      filter: hue-rotate(50deg);
/*       .button {
        width: auto;
        padding-left: 0.5em;
        padding-right: 0.5em;
      } */
    }
    .filter.cal.type {
      border-bottom: 1px solid var(--head-underline);
      filter: hue-rotate(310deg);
      padding-bottom: 0.15em;

      .button {
        width: 9em;
      }
    }
    .filter.cal.view {
      padding-top: 0.1em;
    }
    .filter.city,
    .filter.event_type,
    .filter.speech {
      border-bottom: 1px solid var(--head-underline);
      padding-bottom: 0.15em;
    }
    .filter.city,
    .filter.speech {
      .button {
        a {
          font-size: 1.1em;
        }
      }
      .button:first-of-type {
        a {
          font-size: 0.9em;
        }
      }
    }
    .filter.date, .filter.speech, .filter.event_type {
      padding-top: 0.1em;
    }
  }
} /* app event_type filters ~> buttons */

#amfora { /* app messages */
  div.block.messages {
    label {
      display: block;
    }
    .comment {
      display: flex;
      flex-grow: 1;
      gap: 1em;
      width: 100%;
      padding: 0.1em;
      &.own {
        background: #edffda;
        .sender {
        }
      }
      div.sender-and-date {
        display: flex;
        flex-wrap: wrap;
        width: 30%;
        gap: 1em;
      }
      div.sender {
        a {
          color: var(--head-fg);
          font-size: 0.8em;
        }
      }
      div.sent {
        color: var(--notes-fg);
        font-size: 65%;
        justify-content: right;
        text-align: center;
        align-content: center;
      }
      div.text {
        width: 50%;
        color: var(--notes-fg);
        flex-grow: 1;
        white-space: pre;
      }
      margin-bottom: 0.1em;
    }
  }
} /* app messages */

#amfora { /* app notifications */
  .notifications .notification {
    @media(max-width: 732px) {
      zoom: 0.9;
    }
    flex-direction: row;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5em;
    max-width: 28em;
    .date {
      max-width: 4em;
    }
  }
  .notification {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 0.5em;
    align-items: center;
    > *:not(.button) {
      zoom: 0.8;
    }
    h2 {
      display: flex;
      flex-direction: column;
      gap: 0.3em;
      div {
        text-align: center;
        margin: auto;
      }
    }
    div {
      flex-grow: 1;
      margin-top: 0;
      text-align: center;
    }
    .button {
      margin-left: unset;
      flex-grow: 0;
      margin-bottom: unset;
      flex-shrink: 0;
      width: 5.2em;
      i {
        width: 100%;
      }
    }
    .text {
      flex-grow: 2;
    }
    span {
      padding-top: 0 !important;
    }
    .details {
      display: flex;
      .text {
        text-align: center;
        width: 100%;
      }
    }
  }
} /* app notifications */

#amfora { /* media */
  @media only screen and (max-width: 732px) {
    h1 {
      .date {
        order: 2;
        width: 100%;
      }
      .functions {
        flex-wrap: wrap;
        flex-direction: column-reverse;
        width: 7em;
      }
      .title {
        width: 100%;
      }
    }
    #menu {
      & .buttons {
        & a {
          font-size: 0.73em;
          height: 100%;
          line-height: 1.86em !important;
        }
      }
    }
    .collapsible {
      display: none !important;
    }
    .events .location-dense .address {
      font-size: 0.9em;
    }
    .form, .form .schedules {
      input[type=text] {
        margin-left: 0;
        ;
        width: calc(100% - 3em);
      }
    }
    /* .filters {
      & .filter:not(.alphabet):not(.city) {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr !important;
        width: 100%;
        .button {
          width: auto;
        }
      }
    } */
  }

  @media only screen and (min-width: 732px) and (max-width: 920px) {
    h1 {
      .date {
        order: 2;
        width: 100%;
      }
      .title {
        order: 1;
        width: 100%;
      }
    }
    #menu {
      & .buttons {
        & a {
          height: 100%;
          font-size: 0.73em;
          line-height: 1.86em !important;
        }
      }
    }
    .collapsible {
      display: none !important;
    }
    .events .location-dense .address {
      font-size: 0.9em;
    }
    .form, .form .schedules {
      input[type=text] {
        margin-left: 0;
        ;
        width: calc(100% - 4em);
      }
    }

    .filters {
      /* .filter:not(.alphabet) {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr !important;
        width: 100%;
        .button {
          width: auto;
          max-width: 12em;
        }
      } */
      &.messages {
        textarea,
        .grow-wrap::after {
          margin: 0.5em 0.5em;
          padding: 0.5em;
          width: calc(100% - 1em);
        }
      }
    }
  }

  @media only screen and (min-width: 920px) and (max-width: 1360px) {
    .events .location-dense .address {
      font-size: 0.95em;
    }
    &.messages {
      textarea,
      .grow-wrap::after {
        margin: 0.5em 2em;
        padding: 0.5em;
        width: calc(100% - 4em);
      }
    }
    .events:not(.single), .schedules {
      ul {
        li {
          width: calc(50% - 0.6em) !important; /* - ul gap/2 */
          .functions {
            gap: 0.2em;
            /*! flex-flow: column nowrap; */
          }
        }
      }
    }
  }

  @media only screen and (min-width: 1360px) {
    .events .location-dense .address {
      font-size: 0.95em;
    }
    .events:not(.single), .schedules {
      ul {
        li {
          width: calc(33.333% - 0.8em) !important; /* - ul gap*2/3 */
        }
      }
    }
  }
  .events.single {
    max-width: 28em;
    margin: auto;
  }
} /* media */

#amfora { /* bootstrap compat */
  body {
    line-height: 1.5;
  }
  .content {
    &:not(.old) > h1 {
      margin-top: 3em;
    }
    &.old > h1:first-of-type {
      margin-top: 0.5em;
    }
    > h2:first-of-type {
      margin-top: 0;
    }
    > h2 {
      margin-top: 1rem;
    }
  }
  h1, h2 {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-weight: 500;
    line-height: 1.2;
    font-size: 1em;
  }

  button, input, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
  }

  label {
    display: inline-block;
  }

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

  .form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5;
    background: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  }

  table {
    caption-side: bottom;
    border-collapse: collapse;
  }

  .table {
    --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
    margin-bottom: 1rem;
    border-color: var(--table-border);
  }

  tbody, td, tfoot, th, thead, tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0.01em;
  }

  .table-bordered > :not(caption) > * > * {
    border-width: 0 1px;
  }

  .table-bordered > :not(caption) > * {
    border-width: 1px 0;
  }

  .table > :not(caption) > * > * {
    padding: .5rem .5rem;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
  }

  .table-striped > tbody > tr:nth-of-type(2n+1) {
    --bs-table-accent-bg: var(--bs-table-striped-bg);
    color: var(--bs-table-striped-color);
  }

} /* bootstrap compat */

#amfora { /* overrides */
  h2 {
    .title {
      margin-bottom: 0.2em;
      margin-top: auto;
    }
  }

  form {
    input, select {
      background: #feffe2;
      text-align: center;
    }
  }

  .alert,
  .warn {
    flex-grow: 0;
    overflow: hidden;
    text-align: center;
    a {
      padding: 0.7em;
    }
    p {
      font-weight: bold;
      padding: 0.2em;
    }
    div {
      border-radius: 0.2em;
    }
    .buttons {
      padding: 0.2em 0.8em 0.8em;
    }
    .button {
      width: 14em !important;
      margin: 0.5em auto !important;
      a {
        span{
          font-size: 1.2em;
        }
      }
    }
  }

  #banner {
    div {
      border-radius: 0.5em;
      margin: 0.5em;
      padding: 0.5em;
    }
    .alert{
      color: var(--danger-fg);
      background: var(--danger-bg);
      text-shadow: 0.05em 0.05em 0.05em var(--danger-fg-shadow);
    }
    .warn{
      color: var(--warn-fg);
      background: var(--warn-bg);
      text-shadow: 0.05em 0.05em 0.05em var(--warn-fg-shadow);
    }
  }

  #dialog {
    flex-grow: 1;
    display: none;
    position: fixed;
    align-content: start;
    left: 0;
    right: 0;
    top: 0;
    background: rgba(120, 120, 120, 0.5) !important;
    z-index: 999;
    bottom: 0;
    .info {
      margin: 0;
    }
    .alert {
      position: fixed;
      left: calc(50% - 8em);
      top: calc(50% - 5.5em);
      border-radius: 3px;
      width: 16em;
      background: var(--level2-bg) !important;
      box-shadow: 0px 0px 5px #00ffe7 !important;
      border: 1px solid #00ffe7;
      p {
        margin-top: 0.6em;
        padding: 0;
      }
      .buttons {
        justify-content: center;
        .button {
          padding: 0;
          margin: 0;
        }
      }
    }
    .back-panel {
      padding: 1em;
      .back-and-forth {
        display: flex;
      }
      button {
        margin: 0.25em;
        padding: 0.50em;
        width: calc(100% - 0.5em);
      }
    }
  }

  #spinner {
    position: fixed;
    background: rgba(120, 120, 120, 0.5) !important;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;

    object {
      margin-left: calc(50% - 100px);
      margin-top: 0.4em;
    }
  }

  .messages {
    textarea {
      color: var(--input-fg);
    }
  }

  .form-control {
    background: #fff4f4;
    color: var(--input-fg);
    textarea,
    option {
      color: var(--input-fg);
    }
    option:checked {
      color: white;
      background: var(--filter-bg-selected);
    }
  }
  .remaining {
    bottom: 0;
    opacity: 0.6;
    position: absolute;
    right: 0.2em;
  }

  .form-group.has-error {
    margin: 0.5em 0;
    background: #efd7ff;
    border-radius: 0.3em;
  }

  .form-group {
    margin-bottom: 0.75em;
    margin-left: 0.4em;
    margin-top: 0.75em;
    position: relative;

    label {
      color: var(--label-fg);
      font-size: 0.8em;
      font-weight: bold;
      margin-bottom: 0.5em;

      .label-warning {
        color: red;
        margin-left: 0.2em;
      }
      &:has([type='checkbox']) {
        position: relative;
      }
    }

    .help-block {
      color: var(--input-fg);
      display: block;
      margin-bottom: 1em;
      text-decoration: none;
    }
  }
} /* overrides */


/*--------------------------------

hgi2 icon font
Generated using nucleoapp.com

-------------------------------- */
@font-face {
  font-family: 'hgi2';
  src: url('hgi2.eot?v=5');
  src: url('hgi2.eot?v=5') format('embedded-opentype'),
      url('hgi2.woff2?v=5') format('woff2'),
      url('hgi2.woff?v=5') format('woff'),
      url('hgi2.ttf?v=5') format('truetype'),
      url('hgi2.svg?v=5') format('svg');
}

#amfora { /* icons */
  /*--------------------------------

  hgi2 icon font
  Generated using nucleoapp.com

  -------------------------------- */

  /* base class */
  .icon2 {
    display: inline-block;
    font: normal normal normal 1em/1 'hgi2';
    color: inherit;
    flex-shrink: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }


  /* icons */
  .icon-add::before {
    content: "\ea01";
  }

  .icon-brush::before {
    content: "\ea02";
  }

  .icon-calendar::before {
    content: "\ea03";
  }

  .icon-calendar-love::before {
    content: "\ea04";
  }

  .icon-clipboard::before {
    content: "\ea05";
  }

  .icon-comment::before {
    content: "\ea06";
  }

  .icon-copy::before {
    content: "\ea07";
  }

  .icon-copy-link::before {
    content: "\ea08";
  }

  .icon-eye::before {
    content: "\ea09";
  }

  .icon-filter::before {
    content: "\ea0a";
  }

  .icon-form::before {
    content: "\ea0b";
  }

  .icon-globe::before {
    content: "\ea0c";
  }

  .icon-graph::before {
    content: "\ea0d";
  }

  .icon-heart-add::before {
    content: "\ea0e";
  }

  .icon-home::before {
    content: "\ea0f";
  }

  .icon-location::before {
    content: "\ea10";
  }

  .icon-lock::before {
    content: "\ea11";
  }

  .icon-mail::before {
    content: "\ea12";
  }

  .icon-mail-open::before {
    content: "\ea13";
  }

  .icon-mail-secure::before {
    content: "\ea14";
  }

  .icon-mail-unread::before {
    content: "\ea15";
  }

  .icon-menu::before {
    content: "\ea16";
  }

  .icon-move-down::before {
    content: "\ea17";
  }

  .icon-move-up::before {
    content: "\ea18";
  }

  .icon-paint-board::before {
    content: "\ea19";
  }

  .icon-pencil::before {
    content: "\ea1a";
  }

  .icon-settings::before {
    content: "\ea1b";
  }

  .icon-star::before {
    content: "\ea1c";
  }

  .icon-star-full::before {
    content: "\ea1d";
  }

  .icon-trash::before {
    content: "\ea1e";
  }

  .icon-user::before {
    content: "\ea1f";
  }

  .icon-useradd::before {
    content: "\ea20";
  }

  .icon-userdel::before {
    content: "\ea21";
  }
} /* icons */