/* Variables
   ========================================================================== */

:root {
  /* font family */
  --f-family: 'Arial Pro', sans-serif;
  /* font weight */
  --f-weight-l: 300;
  --f-weight-n: 400;
  --f-weight-sb: 600;
  --f-weight-b: 700;
  /* font size */
  --f-size-s-2: 75%;
  --f-size-s-1: 90%;
  --f-size: 100%;
  --f-size-l-1: 115%;
  --f-size-l-2: 150%;
  --f-size-l-3: 175%;
  --f-size-l-4: 230%;
  --f-size-l-5: 280%;
  /* color */
  --c-primary-light: 7, 136, 229;
  --c-primary: 0, 105, 180;
  --c-primary-dark: 2, 75, 128;
  --c-neutral-lightest: 255, 255, 255;
  --c-neutral-lighter: 240, 240, 240;
  --c-neutral-light: 197, 198, 198;
  --c-neutral: 170, 170, 170;
  --c-neutral-dark: 26, 23, 27;
  --c-neutral-darker: 41, 41, 41;
  --c-neutral-darkest: 0, 0, 0;
  --c-error: 210, 47, 47;
  /* grid */
  --g-gap-s: 0.75rem;
  --g-gap: 1.75rem;
  --g-gap-l: 4.5rem;
  /*border radius*/
  --b-radius: 28px;
  --b-radius-s: 14px;
  /* margin for url scroll to element */
  --m-scroll: 9rem;
}

.gkmb_csv2html {

  & .ce-table-scroll {
    max-height: 80vh;
    overflow-y: scroll;
  }

  & table {
    font-size: var(--f-size-s-1);

    & th {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      padding: 0.3rem 0.8rem;
    }

    /* Ein sortierbarer Kopf traegt sein Polster im Button, damit die ganze
       Zelle anklickbar bleibt. */
    & th.gkmbcsvhtml_sortable {
      padding: 0;
    }

    & .gkmbcsvhtml_sort {
      padding: 0.3rem 0.8rem;
    }

    & td {
      padding: 0.3rem 0.8rem !important;
    }

    & tr:nth-child(even) td {
      color: rgb(var(--c-neutral-darkest));
      font-size: var(--f-size);
      background-color: rgb(var(--c-neutral-light));
    }

    & tr:nth-child(odd) td {
      color: rgb(var(--c-neutral-darkest));
      font-size: var(--f-size);
      background: rgb(var(--c-neutral-lighter));
    }

  }

  & form {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: var(--g-gap);
    margin-bottom: var(--g-gap);
  }

  & form > div:first-child {
    display: none;
  }

  & .copyright {
    font-size: var(--f-size-s-2);
  }

  & .lastChange {
    margin-bottom: 1rem;
    font-size: var(--f-size-s-2);
  }

}

/* Filter, Sortierung und Anfragekorb bringt die Extension selbst mit
   (EXT:gkmb_csv2html/Resources/Public/Css/frontend.css). Hier steht nur, was
   fuer Euroflex anders sein soll.
   ========================================================================== */

.gkmbcsvhtml_filterbutton,
.gkmbcsvhtml_resetbutton {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 5px;
  background-color: rgb(var(--c-neutral-darker));
  color: rgb(var(--c-neutral-lightest));
  font-size: var(--f-size);
  cursor: pointer;
}

.gkmbcsvhtml_resetbutton {
  background-color: rgb(var(--c-neutral));
}

.gkmbcsvhtml_filterbutton:hover,
.gkmbcsvhtml_resetbutton:hover {
  background-color: rgb(var(--c-neutral));
}

.gkmbcsvhtml_filterbutton:active,
.gkmbcsvhtml_resetbutton:active {
  background-color: rgb(var(--c-neutral-darker));
}

input.gkmbcsvhtml_rangefield,
input.gkmbcsvhtml_textfield,
select.gkmbcsvhtml_selectitemvalue {
  padding: 0.5rem;
  background-color: rgb(var(--c-neutral-light));
  color: rgb(var(--c-neutral-darkest));
  font-size: 80%;
  box-sizing: border-box;
}