:root {
  /* ========================================================================
     #GLOBAL
     ======================================================================== */

  /*  The global settings file contains any project-wide variables; things that
   need to be made available to the entire codebase. */

  /* Spacing
    ======================================================================== */

  /*  Baseline */
  --baseline: 5px;

  /*  Spacing */
  --spacing-tiny: calc(var(--baseline) * 1);
  --spacing-small: calc(var(--baseline) * 2);
  --spacing-small-tiny: calc(var(--baseline) * 3);
  --spacing-base: calc(var(--baseline) * 4);
  --spacing-base-tiny: calc(var(--baseline) * 5);
  --spacing-base-small: calc(var(--baseline) * 6);
  --spacing-large: calc(var(--baseline) * 8);
  --spacing-large-tiny: calc(var(--baseline) * 9);
  --spacing-large-small: calc(var(--baseline) * 10);
  --spacing-large-base: calc(var(--baseline) * 12);
  --spacing-huge: calc(var(--baseline) * 16);
  --spacing-huge-tiny: calc(var(--baseline) * 17);
  --spacing-huge-small: calc(var(--baseline) * 18);
  --spacing-huge-base: calc(var(--baseline) * 20);

  /* Typographic
    ======================================================================== */

  --font-family-default: 'IBM Plex Sans', 'Helvetica Neue', 'Helvetica', 'Arial',
    sans-serif;
  --font-family-monospace: 'Mono';

  /*  Base font size */
  --font-size-small: 11px;
  --font-size-base: 13px;
  --font-size-large: 15px;

  /*  Heading sizes */
  --font-size-h1: 33px;
  --font-size-h2: 24px;
  --font-size-h3: 18px;
  --font-size-h4: 14px;
  --font-size-h5: 14px;
  --font-size-h6: 14px;

  /* Color
    ======================================================================== */

  /* Main colors */
  --color-primary-dark: #17436f;
  --color-primary: #4074a8;
  --color-black: #4d4d4d;
  --color-white: #fff;
  --color-active-light: #d9ece0;
  --color-active: #56b57f;
  --color-active-dark: #3b8455;

  /* Shades of grey */
  --color-grey-lighter: #f8f8f8;
  --color-grey-light: #f3f3f4;
  --color-grey: #e4e4e4;
  --color-grey-dark: #b4b6b8;
  --color-grey-darker: #676a6c;

  /*  Elements */
  --color-typo: var(--color-black);
  --color-typo-light: var(--color-white);
  --color-background-light: var(--color-primary);
  --color-background-dark: #238ca0;

  /*  State */
  --color-error: #f44a52;
  --color-warning: #f9a331;
  --color-success: #28b46e;

  /* Mime */
  --mime-color-pdf: #b1daca;
  --mime-color-xml: #f5cfca;
  --mime-color-zip: #e6cba9;
  --mime-color-msword: #a1c8d4;
  --mime-color-html: #c0d6f0;
  --mime-color-rtf: #ddbcf1;
  --mime-color-plain: #decce9;
  --mime-color-x-shockwave-flash: #bddbbd;
  --mime-color-mp4: #e5e5b6;
  --mime-color-mpeg: #d2dbbd;

  /* Stuff
    ======================================================================== */

  /* Transition */
  --transition-base: 0.3s ease-in-out;

  /* Shadow */
  --shadow-small: 0 0 var(--spacing-small) rgba(65 33 33 / 50%);
  --shadow-base: 0 0 var(--spacing-base) rgba(0 0 0 / 50%);
  --shadow-large: 0 0 var(--spacing-large) rgba(0 0 0 / 50%);
}

/* SETTINGS */

/* ==========================================================================
   # APPLICATION / BREADCRUMB / ITEM
   ========================================================================== */

.Qunrq {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: var(--spacing-tiny) var(--spacing-small-tiny) var(--spacing-tiny)
    var(--spacing-tiny);
  min-width: 60px;
  max-width: 250px;
  border-radius: var(--spacing-tiny);
  background-color: var(--color-grey-light);
  transition:
    background-color 0.3s ease-in-out,
    color 0.3s ease-in-out,
    transform 0.8s ease-in-out,
    opacity 0.8s ease-in-out;
}

.Qunrq::after {
    position: absolute;
    top: 0;
    right: calc(var(--spacing-small-tiny) * -1);
    width: var(--spacing-small);
    height: var(--spacing-base-small);
    content: '\f105';
    text-align: center;
    display: inline-block;
    line-height: 2 !important;

    /* TODO: Replace FontAwesome */
    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
    font-family: FontAwesome;
    font-size: 14px;
    font-size: inherit;
    text-rendering: auto;
  }

.Qunrq:last-child::after {
    display: none;
  }

.Qunrq:hover,
  .Qunrq:focus {
    background-color: var(--color-grey);
  }

.AbVSw {
    background-color: var(--color-active);
    color: var(--color-white);
  }

.AbVSw:hover,
    .AbVSw:focus {
      background-color: var(--color-active-dark);
    }

.\+ngfl {
    padding-right: var(--spacing-small);
  }

.\+139X,
  .iLewb {
    transform: translateX(200%);
    opacity: 0;
  }

.lsA0W,
  .oD6Rb {
    transform: translateX(0);
    opacity: 1;
  }

.l9hak {
  display: inline-block;
  overflow: hidden;
  padding: var(--spacing-tiny) var(--spacing-small);
  height: 100%;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: normal;
}

.l9hak:hover,
  .l9hak:focus {
    color: inherit;
  }

.Q5dX8 {
  flex-shrink: 0;
  margin-right: var(--spacing-tiny);
  width: 13px;
  height: 13px;
  fill: currentcolor;
  margin-bottom: -1px;
}

.ep01v {
  flex-shrink: 0;
  margin-left: var(--spacing-tiny);
  width: var(--spacing-small);
  height: var(--spacing-small);
  border-radius: 50%;
  background-color: var(--color-warning);
  color: var(--color-white);
  text-align: center;
}

.sF4o1 {
  font-size: var(--font-size-small);
}

.yMTqo {
  font-size: var(--font-size-h) 3;
}

.gijcQ {
  margin-top: var(--spacing-small);
  color: var(--color-warning);
}

.gijcQ::before {
    display: inline-block;
    margin-right: var(--spacing-tiny);
    width: var(--spacing-small);
    height: var(--spacing-small);
    border-radius: 50%;
    background-color: currentcolor;
    content: '';
  }

/* ==========================================================================
   # APPLICATION / BREADCRUMB
   ========================================================================== */

.gOzqq {
  display: flex;
  overflow-x: auto;
  margin: 0;
  padding: 0;
  min-width: 0;
  border-radius: var(--spacing-small);
  background-color: var(--color-white);
  border: 1px solid var(--color-grey);
  list-style: none;
  grid-area: breadcrumb;
}

/* Print
     ========================================================================== */

@media print {
  .gOzqq {
    display: none;
  }
}

/* ==========================================================================
   # UI / AVATAR
   ========================================================================== */

.m9Msz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-base-small);
  height: var(--spacing-base-small);
  border-radius: var(--spacing-base);
}

.CABjP {
    background-color: var(--color-white);
    color: var(--color-primary);
  }

.ZvRF\+ {
    background-color: var(--color-active);
    color: var(--color-white);
  }

.ZvRF\+.W3z1z {
    background-color: var(--color-error);
    color: var(--color-white);
  }

/* ==========================================================================
  # UI / CIRCULAR PROGRESS
  ========================================================================== */

.sr1lz {
  border-radius: 50%;
}

.x0fLI {
  transition: 0.35s stroke-dashoffset;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  fill: transparent;
}

/* ==========================================================================
  # APPLICATION / HEADER / QUEUE
  ========================================================================== */

.EImxN {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--spacing-small);
  width: var(--spacing-base-small);
  height: var(--spacing-base-small);
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-primary);
}

._5coLV {
  position: absolute;
  inset: 0;
  stroke: var(--color-active);
}

.lAEwi {
  fill: currentcolor;
  width: 60%;
  height: 60%;
}

.cKn-o {
  margin-top: var(--spacing-small);
  box-shadow: var(--shadow-base);
  border-radius: var(--spacing-tiny);
  min-width: 280px;
}

.cKn-o::before {
    position: absolute;
    top: calc(var(--spacing-tiny) * -1);
    right: var(--spacing-small);
    display: block;
    width: var(--spacing-small);
    height: var(--spacing-small);
    background-color: var(--color-grey-darker);
    content: '';
    transform: rotate(45deg);
  }

.hHU-f {
  border-top-left-radius: var(--spacing-tiny);
  border-top-right-radius: var(--spacing-tiny);
  background-color: var(--color-grey-darker);
  color: var(--color-typo-light);
  padding: var(--spacing-small) var(--spacing-base);
}

.HvUAv {
  padding: var(--spacing-small) var(--spacing-base);
  display: flex;
  border-bottom: 1px solid var(--color-grey-light);
  color: inherit;
}

.HvUAv:hover,
  .HvUAv:focus {
    background-color: var(--color-grey-light);
    color: inherit;
  }

.HvUAv:last-child {
    border-bottom: 0;
  }

.HvUAv:last-child:hover,
    .HvUAv:last-child:focus {
      border-bottom-left-radius: var(--spacing-tiny);
      border-bottom-right-radius: var(--spacing-tiny);
    }

._52iHl {
  flex-grow: 1;
}

.m-mfm {
  position: relative;
  width: var(--spacing-base);
  height: var(--spacing-base);
  background-color: var(--color-grey);
  border-radius: 50%;
  margin-left: var(--spacing-base);
  display: flex;
  align-items: center;
  justify-content: center;
}

._5KOou .m-mfm {
  background-color: var(--color-active);
}

.forHI .m-mfm {
  background-color: var(--color-error);
}

.Qmx1C {
  fill: var(--color-white);
}

.X6w24 {
  fill: var(--color-white);
  width: 50%;
  height: 50%;
}

.x5Y9S {
  fill: var(--color-white);
  width: 70%;
  height: 70%;
}

/* ==========================================================================
  # APPLICATION / HEADER
  ========================================================================== */

.YTSFT {
  grid-area: header;
  display: flex;
  align-items: center;
  border-bottom-right-radius: var(--spacing-small);
  border-bottom-left-radius: var(--spacing-small);
}

.J1O-i {
  display: flex;
  gap: var(--spacing-tiny);
}

.-m2D7 {
  margin-right: 168px;
  margin-left: var(--spacing-tiny);
  padding: var(--spacing-small);
  height: var(--spacing-large);
  color: var(--color-white);
  cursor: pointer;
}

.OiBy\+ {
  flex-grow: 1;
}

.TIEYP {
  display: flex;
  align-items: center;
  padding-left: var(--spacing-base);
  border-radius: var(--spacing-base);
  color: var(--color-white);
}

.TIEYP:hover,
  .TIEYP:focus {
    outline: none;
    border: none;
    background: rgba(var(--color-white) / 20%);
  }

.vYG8N {
  margin-right: var(--spacing-small);
}

.L-W\+M {
  margin-top: var(--spacing-small);
  box-shadow: var(--shadow-base);
  border-radius: var(--spacing-tiny);
  min-width: 200px;
}

.L-W\+M::before {
    position: absolute;
    top: -@spacing-tiny;
    right: var(--spacing-small);
    display: block;
    width: var(--spacing-small);
    height: var(--spacing-small);
    background-color: var(--color-white);
    content: '';
    transform: rotate(45deg);
    z-index: -1;
  }

.\-24OT {
  border-top: 1px solid var(--color-grey-light);
  margin: 0;
}

.Ednfv {
  font-weight: bold;
  padding: var(--spacing-small) var(--spacing-small-tiny);
  padding-right: var(--spacing-large);
}

.jYDnO {
  all: unset;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: var(--spacing-small) var(--spacing-small-tiny);
  color: var(--color-grey-darker);
  cursor: pointer;
}

.s2X23 {
    color: var(--color-error);
  }

.jYDnO:hover,
  .jYDnO:focus {
    background-color: var(--color-grey-light);
    color: inherit;
  }

.jYDnO:last-child {
    border-bottom: 0;
  }

.jYDnO:last-child:hover,
    .jYDnO:last-child:focus {
      border-bottom-left-radius: var(--spacing-tiny);
      border-bottom-right-radius: var(--spacing-tiny);
    }

.jYDnO:first-child:hover {
    border-top-left-radius: var(--spacing-tiny);
    border-top-right-radius: var(--spacing-tiny);
  }

.ciYdR {
  display: inline-block;
  width: var(--spacing-base);
}

.U2-52 {
  flex-grow: 1;
}

.Qt7qc {
  display: inline-block;
  color: var(--color-grey-dark);
  font-size: var(--font-size-small);
}

.JR-xq {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}

._5fcln {
    max-height: 120px;
  }

.EGFCL {
  display: inline-block;
  width: var(--spacing-small);
  fill: var(--color-grey-dark);
}

/* Media queries
   ========================================================================== */

@media (width < 992px) {
  .-m2D7 {
    margin-right: var(--spacing-small);
  }

  .vYG8N {
    display: none;
  }
}

/* Print
   ========================================================================== */

@media print {
  .YTSFT {
    display: none;
  }
}

.eat-motion-indicator {
    width: 10px;
    height: 10px;
    background-color: red;
    display: inline-block;
}

.eat-motion-indicator.active {
    background-color: green;
}

.eat-time-control {
    display: flex;
    padding: 0.5em 1.5em;
    flex-direction: column;
}
.eat-time-control > div {
    display: flex;
    align-items: center;
}
.eat-time-control > div > label {
    min-width: 8em;
}
.eat-time-control > div > div {
    flex: 1;
    position: relative;
}
.eat-time-control--tick-marks {
    min-height: 1.5em;
    margin-bottom: 4px;
}

.eat-time-control--tick-marks > div {
    position: absolute;
    border-left: 1px solid black;
    height: 1em;
    margin-top: 1em;
}

.eat-time-control--tick-marks > div > span {
    position: relative;
    top: -4px;
    left: 4px;
    cursor: pointer;
}

.eat-time-control--slider {
    width: 100%;
    padding: 0;
    margin: 0;
}

.animated-tools {
    position: fixed;
    top: 0;
    right: 0;
    font-size: 1rem;
    width: 50vw;
    transform: translateX(100%);
    transition: transform 250ms;
    opacity: 0.9;
    z-index: 1;
}

.animated-tools.is-open {
    transform: none;
}

.animated-tools-launcher {
    cursor: pointer;
    position: absolute;
    left: -1.5rem;
    width: 1.5rem;
    bottom: 0;
    text-align: center;
    border: 1px solid black;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-right-width: 0;
    background-color: #ddd;
}

.animated-tools-panel {
    background-color: #ddd;
    border: 1px solid black;
}

/* ==========================================================================
   # UI / WINDOW
   ========================================================================== */

.YXQFN {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  background-color: var(--color-white);
  border: 1px solid var(--color-grey);
  border-radius: var(--spacing-small);
}

.BAYX8 {
  flex-shrink: 0;
  transition: all var(--transition-base);
  border-bottom: 1px solid var(--color-grey);
}

.VfX2N {
  transition: all var(--transition-base);
}

.F5CGl > .BAYX8 > .VfX2N {
  transform: translateX(50%);
}

.dUUtS {
  margin-top: var(--spacing-small);
  transition: all var(--transition-base);
}

.F5CGl > .BAYX8 > .VfX2N > .dUUtS {
  visibility: hidden;
  margin: 0;
  font-size: 0;
  opacity: 0;
}

.Fo\+M\+ {
  display: inline-block;
  margin-top: 0;
  margin-bottom: var(--spacing-small);
  transition: all var(--transition-base);
  width: -moz-fit-content;
  width: fit-content;
}

.F5CGl > .BAYX8 > .VfX2N > .Fo\+M\+ {
  margin: 0;
  font-weight: normal;
  font-size: var(--font-size-base);
  transform: translateX(-50%);
}

.GlpKd {
  font-size: 15px;
  opacity: 1;
  visibility: visible;
  margin-top: var(--spacing-small);
}

.F5CGl > .BAYX8 > .GlpKd {
  visibility: hidden;
  margin: 0;
  font-size: 0;
  opacity: 0;
}

.m-hzh {
  margin-top: var(--spacing-small);
  flex-shrink: 0;
}

.NQQZ4 {
  position: relative;
  flex-grow: 1;
  flex-shrink: 1;
  overflow: hidden;
  background-color: var(--color-grey-light);
  transition: opacity var(--transition-base);
}

._9cnKf {
  overflow: auto;
  height: 100%;
}

.o4J1q ._9cnKf {
  opacity: 0.4;
}

.CVn8d > .NQQZ4 > ._9cnKf {
  padding: 0;
}

.c\+ChB {
  flex-shrink: 0;
  border-top: 1px solid var(--color-grey);
}

.urZfs {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

/* Media queries
   ========================================================================== */

@media (width < 768px) {
  .BAYX8 {
    padding: var(--spacing-small);
  }

  ._9cnKf {
    padding: var(--spacing-small);
  }

  .c\+ChB {
    padding: var(--spacing-tiny);
  }
}

@media (width > 768px) {
  .BAYX8 {
    padding: var(--spacing-small) var(--spacing-base);
  }

  ._9cnKf {
    padding: var(--spacing-base);
  }

  .c\+ChB {
    padding: var(--spacing-small) var(--spacing-base);
  }
}

/* Print
   ========================================================================== */

@media print {
  .YXQFN {
    background-color: transparent;
    border: 0;
  }

  .BAYX8 {
    display: none;
  }

  .m-hzh {
    display: none;
  }

  ._9cnKf {
    padding-bottom: 0 !important;
    overflow: visible;
  }

  .c\+ChB {
    display: none;
  }
}

.AvYT0 {
  padding: var(--spacing-small);
  margin-bottom: var(--spacing-small);
  border: 1px solid var(--color-grey);
  border-left-width: var(--spacing-tiny);
}

  .UWNsF {
    border-left-color: var(--color-success);
  }

  ._7jvZm {
    border-left-color: var(--color-warning);
  }

  ._6Yc5z {
    border-left-color: var(--color-error);
  }

.OMHqA {
  display: flex;
  font-weight: bold;
  box-sizing: content-box;
}

.DL1vo {
  background-color: var(--color-white);
  margin-bottom: 0;
  min-width: 100%;
}

.y0VML {
  display: flex;
  background-color: var(--color-white);
  border: 1px solid var(--color-grey);
  border-bottom: 0;
}

.GViV7 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  width: var(--spacing-large);
  height: var(--spacing-large);
}

._9OAG9 {
    background-color: var(--color-error);
  }

.\+FUEB {
    background-color: var(--color-warning);
  }

.EzfDB {
    background-color: var(--color-success);
  }

.tlo4a {
  rotate: 180deg;
  width: 40%;
  fill: var(--color-white);
}

.DL1vo[open] .tlo4a {
  rotate: 0deg;
}

._9dC1u {
  padding: var(--spacing-small);
  flex-grow: 1;
  margin: 0;
  font-weight: normal;
  font-size: var(--font-size);
}

.LnCMa {
  width: calc(100px - var(--spacing-base));
  padding: var(--spacing-small);
  flex-shrink: 0;
}

.m86LE {
  width: calc(100px - var(--spacing-base));
  padding: var(--spacing-small);
  flex-shrink: 0;
}

._3HetV {
  background-color: var(--color-white);
  border: 1px solid var(--color-grey);
  padding: var(--spacing-small);
  border-bottom: 0;
}

._51udu {
  margin-bottom: 0;
  margin-top: var(--spacing-small);
}

._51udu:first-child {
    margin-top: 0;
  }

.lnPq0 {
  position: relative;
}

.yX9DJ .sAIkX {
  background-color: color-mix(in hsl, var(--color-error), #fff 70%);
  stroke: var(--color-error);
}

.mOE2f .sAIkX {
  background-color: color-mix(in hsl, var(--color-warning), #fff 70%);
  stroke: var(--color-warning);
}

.FJ2NW .sAIkX {
  background-color: color-mix(in hsl, var(--color-success), #fff 70%);
  stroke: var(--color-success);
}

.epYhC {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.GYKyE {
  font-size: clamp(12px, 2vw, 50px);
}

.yX9DJ .epYhC {
  color: var(--color-error);
}

.mOE2f .epYhC {
  color: var(--color-warning);
}

.FJ2NW .epYhC {
  color: var(--color-success);
}

.u5HIK {
  position: relative;
  width: 100%;
}

.kl6WB {
  border-bottom: 1px solid var(--color-grey);
  padding: var(--spacing-tiny) 0;
}

.cQpM9 {
  width: auto;
  padding: 4px 0;
  text-align: left;
}

.qaqa4 {
  position: relative;
  display: flex;
  height: var(--spacing-large);
}

.rbpqX {
  height: 100%;
}

.wiqaL {
    background-color: var(--color-success);
  }

._2n-kd {
    background-color: var(--color-warning);
  }

.Idp4F {
    background-color: var(--color-error);
  }

.liP2f {
  position: absolute;
  top: var(--spacing-small);
  left: var(--spacing-small);
  color: var(--color-white);
  text-transform: uppercase;
  font-weight: bold;
}

.oHBux {
  width: 100px;
  padding: var(--spacing-small);
  text-align: left;
}

.yYOoJ {
  display: grid;
  grid-template-columns: minmax(100px, 300px) 4fr;
  gap: var(--spacing-large);
}

.IrmVU {
  margin-top: var(--spacing-large);
  margin-bottom: calc(var(--spacing-base-small) * -1);
}

/* ==========================================================================
  # RECORD EXPLORER / TABLE / TD / RELATION
  ========================================================================== */

.GPfkS {
  position: relative;
}

.LgPZK {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 var(--spacing-tiny);
  border-radius: var(--spacing-tiny);
  background-color: var(--color-primary);
  color: var(--color-white);
}

.LgPZK:hover,
  .LgPZK:focus {
    background-color: var(--color-primary-dark);
  }

._7KnRO .LgPZK {
  z-index: 3;
}

._8n3fW {
  overflow: hidden;
  text-overflow: ellipsis;
}

.r0tk8 {
    padding-right: var(--spacing-base-small);
  }

.syYSq {
  display: none;
  position: absolute;
  top: calc(var(--spacing-small) * -1);
  left: calc(var(--spacing-small) * -1);
  right: calc(var(--spacing-small) * -1);
  padding: var(--spacing-small);
  background-color: var(--color-white);
  box-shadow: var(--shadow-small);
  z-index: 2;
  border-radius: var(--spacing-tiny);
  white-space: initial;
}

._7KnRO .syYSq {
  display: block;
}

.P9qSR {
  padding-bottom: var(--spacing-tiny);
  margin-bottom: var(--spacing-tiny);
  border-bottom: 1px solid var(--color-grey-light);
}

.P9qSR:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }

/* Print
   ========================================================================== */

@media print {
  ._8n3fW {
    display: none;
  }

  .LgPZK {
    display: none;
  }

  .syYSq {
    display: block;
    position: relative;
    box-shadow: none;
    background-color: transparent;
    white-space: nowrap;
    padding: 0;
    top: 0;
    left: 0;
    right: 0;
  }

  .P9qSR {
    border: 0;
    margin-bottom: 0;
  }
}

/* ==========================================================================
  # RECORD EXPLORER / TABLE / TD / ROW STATUS
  ========================================================================== */

.dHQxd {
    padding: 0 var(--spacing-tiny);
  }

._0qjGC {
  height: var(--spacing-base-small);
  display: inline-block;
  vertical-align: bottom;
}

.nkmxQ {
  height: var(--spacing-base-small);
  fill: var(--color-error);
}

/* ==========================================================================
  # RECORD EXPLORER / TABLE / TD
  ========================================================================== */

.gkkun {
  border-bottom: 1px solid var(--color-grey);
  vertical-align: middle;
  white-space: nowrap;
}

.gkkun:first-child {
    padding-left: var(--spacing-base);
  }

.gkkun:last-child {
    padding-right: var(--spacing-base);
  }

.J5JEY {
    max-width: 250px;
  }

.J5JEY:not(.aDkiA) {
    overflow: hidden;
    text-overflow: ellipsis;
  }

.J5JEY:not(.aDkiA) a {
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      vertical-align: middle;
      max-width: 100%;
    }

.J5JEY.zrl6j {
    max-width: 350px;
  }

.F1MiX {
    text-align: right;
  }

.uJDeS {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    position: sticky;
    right: 0;
    width: 1%;
  }

.TNmam {
    padding: 0;
  }

.gkkun:first-child.TNmam {
    padding-left: var(--spacing-small-tiny);
  }

.gkkun:not(.TNmam) {
    padding: var(--spacing-tiny) var(--spacing-small);
  }

/* Print
     ========================================================================== */

@media print {
  .gkkun {
    vertical-align: top;
  }

    .uJDeS {
      display: none;
    }
}

/* ==========================================================================
  # RECORD EXPLORER / TABLE / TH
  ========================================================================== */

.iB0g9 {
  padding: var(--spacing-small);
  background-clip: padding-box;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-grey-dark);
}

.iB0g9:first-child {
    padding-left: var(--spacing-base);
  }

.iB0g9:last-child {
    padding-right: var(--spacing-base);
  }

.k6-Z- {
    width: 99%;
  }

.oVuUE {
    width: 80px;
  }

._0RmPu,
  .gvVQe {
    width: 140px;
  }

.iKp47,
  ._3xITG {
    width: 100px;
  }

.mgEFC {
    width: 32px;
    text-align: center;
  }

.DDokj {
    position: relative;
    padding-right: var(--spacing-large) !important;
    cursor: pointer;
  }

.iTn6I {
  position: absolute;
  right: var(--spacing-small);
  width: var(--spacing-base);
  height: var(--spacing-base);
  fill: var(--color-grey);
}

.Utt3x,
  .K5gGy {
    fill: var(--color-active);
  }

.iB0g9:hover .iTn6I {
  fill: var(--color-grey-dark);
}

/* Media queries
   ========================================================================== */

@media (width < 768px) {
  .iB0g9 {
    padding: var(--spacing-tiny);
  }

  .iTn6I {
    top: var(--spacing-tiny);
  }
}

@media (width > 768px) {
  .iB0g9 {
    padding: var(--spacing-small);
  }

  .iTn6I {
    top: var(--spacing-small);
  }
}

/* Print
   ========================================================================== */

@media print {
    .DDokj {
      padding-right: var(--spacing-small) !important;
    }

    .mgEFC {
      display: none;
    }

  .iTn6I {
    display: none;
  }
}

/* ==========================================================================
  # RECORD EXPLORER / TABLE / TD
  ========================================================================== */

.OFoip {
  border-bottom: 1px solid var(--color-grey);
  vertical-align: middle;
  white-space: nowrap;

  &:first-child {
    padding-left: var(--spacing-base);
  }

  &:last-child {
    padding-right: var(--spacing-base);
  }

  &--is-truncate {
    max-width: 250px;
  }

  &--is-truncate:not(&--type-relation) {
    overflow: hidden;
    text-overflow: ellipsis;

    a {
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      vertical-align: middle;
      max-width: 100%;
    }
  }

  &--is-truncate&--is-main-column {
    max-width: 350px;
  }

  &--align-right {
    text-align: right;
  }

  &--type-row-actions {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    position: sticky;
    right: 0;
    width: 1%;
  }

  &--type-row-status {
    padding: 0;
  }

  &:first-child&--type-row-status {
    padding-left: var(--spacing-small-tiny);
  }

  &:not(&--type-row-status) {
    padding: var(--spacing-tiny) var(--spacing-small);
  }
}

/* Print
     ========================================================================== */

@media print {
  .OFoip {
    vertical-align: top;

    &--type-row-actions {
      display: none;
    }
  }
}

/* ==========================================================================
  # RECORD EXPLORER TABLE
  ========================================================================== */

._80fmY {
  margin-bottom: 0;
  min-width: 100%;
}

.BJ1AR {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0 var(--spacing-base);
  background-color: var(--color-white);
}

.jIv1T .kwx1k:nth-child(2n) {
  background-color: var(--color-grey-lighter);
}

.jIv1T .kwx1k:hover,
.jIv1T .kwx1k:focus-within {
  background-color: color-mix(in srgb, var(--color-grey-light), #000 4%);
}

.jIv1T .kwx1k:hover td:last-child, .jIv1T .kwx1k:focus-within td:last-child {
    opacity: 1;
  }

.jIv1T .lXAxl {
  background-color: var(--color-active-light) !important;
}

.btX6v {
  border-bottom: 1px solid var(--color-grey-dark);
}

._8X62n {
}

.TZYid {
  padding: 10px;
  border: 1px solid var(--color-grey);
  text-align: center;
}

._98bSS {
  background-color: var(--color-white);
  border: 1px solid var(--color-grey);
  min-width: 100%;
}

/* ==========================================================================
   # UI / ASSET PREVIEW
   ========================================================================== */

/*
 * Asset preview component with two layouts und multiple color schemes
 * 1. Layout: relation (hasMany or belongsTo)
 * 2. Layout: list (list-component)
 * 3. Mime color schemas
 */

/* stylelint-disable no-duplicate-selectors */

.y3vAD {
  position: relative;
  outline: 2px solid transparent;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.Wvg-q {
  display: flex;
  flex-wrap: wrap;
}

.X59kR {
  position: absolute;
  top: var(--spacing-small);
  right: var(--spacing-small);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-base-small);
  height: var(--spacing-base-small);
  border: 2px solid var(--color-active);
  border-radius: 50%;
  background-color: var(--color-active);
  box-shadow: var(--shadow-small);
  color: var(--color-white);
}

.CFmZF {
  position: relative;
  display: flex;
  flex-grow: 1;
  flex-basis: 150px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--color-grey-dark);
  color: var(--color-white);
  text-align: center;
}

.\+LoWk {
  width: 100%;
  height: 100%;
  transition: transform var(--transition-base);
}

._7D14\+ .\+LoWk {
  -o-object-fit: cover;
     object-fit: cover;
}

._44Fnc .\+LoWk {
  -o-object-fit: scale-down;
     object-fit: scale-down;
}

.BI0Ll .\+LoWk {
  -o-object-fit: cover;
     object-fit: cover;
}

.bsVFq {
  font-size: 25px;
}

._5Y\+AZ {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(90 20 20 / 80%);
  color: var(--color-white);
}

._8B0jn {
  flex-grow: 10;
  flex-basis: 150px;
  padding: 10px;
}

.g3X-X {
  margin-bottom: 10px;
  word-break: break-word;
  font-weight: bold;
}

.ELf6L {
  width: var(--spacing-small);
  height: var(--spacing-small);
  fill: var(--color-error);
}

.dRAas {
  position: absolute;
  right: var(--spacing-tiny);
  bottom: var(--spacing-tiny);
}

/* 1. Layout: relation (hasMany or belongsTo)
  ========================================================================== */

.ZzyCQ .CFmZF {
    height: 100px;
    border-radius: var(--spacing-tiny);
  }

.ZzyCQ .\+LoWk {
    border-radius: var(--spacing-tiny);
  }

/* 2. Layout: card (list-component)
  ========================================================================== */

.Mgp9T {
    border: 2px solid transparent;
    background-color: var(--color-white);
    box-shadow: 0 25px 40px -35px var(--color-black);
    cursor: pointer;
  }

.Mgp9T:hover {
      transform: scale(1.02);
      z-index: 10;
    }

.Mgp9T:hover .\+LoWk {
    transform: scale(1.1);
  }

.Mgp9T.j0jTa {
    background-color: var(--color-active);
    color: var(--color-white);
  }

.Mgp9T.Kt\+MD {
    outline: 4px solid var(--color-active);
    border: 2px solid var(--color-white);
  }

.Mgp9T .CFmZF {
    height: 150px;
  }

/* 3. Mime color schemas
  ========================================================================== */

.mJSMA .CFmZF {
    background-color: var(--mime-color-pdf);
  }

.GKF2q .CFmZF {
    background-color: var(--mime-color-xml);
  }

.\+fRgk .CFmZF {
    background-color: var(--mime-color-zip);
  }

.n-7lw .CFmZF {
    background-color: var(--mime-color-msword);
  }

.OQ445 .CFmZF {
    background-color: var(--mime-color-html);
  }

.v6fEQ .CFmZF {
    background-color: var(--mime-color-rtf);
  }

.GfEy8 .CFmZF {
    background-color: var(--mime-color-plain);
  }

.\-0vZ9 .CFmZF {
    background-color: var(--mime-color-x-shockwave-flash);
  }

._0qQyr .CFmZF {
    background-color: var(--mime-color-mp4);
  }

.S4moe .CFmZF {
    background-color: var(--mime-color-mpeg);
  }

/* ==========================================================================
   # RECORD DETAIL / FORMS / ASSET / ASSET FORMAT RELATION
   ========================================================================== */

._7jfRT {
  max-height: 400px;
  overflow: auto;
}

/* ==========================================================================
   # RECORD DETAIL / FORMS / ASSET / UPLOAD
   ========================================================================== */

.fSvVB {
  margin-bottom: var(--spacing-base);
  padding: var(--spacing-large);
  border: 1px solid var(--color-grey);
  background-color: var(--color-grey-light);
  text-align: center;
}

/* ==========================================================================
  # RECORD DETAIL / FORMS / ASSET / INFO / ASSET TOOLS / INFORMATIONS
  ========================================================================== */

._6zvXB {
  margin-bottom: 20px;
}

.fMkJI {
  margin-bottom: 10px;
  height: 75px !important;
}

/* ==========================================================================
  # RECORD DETAIL / FORMS / ASSET / INFO / ASSET TOOLS / DOWNLOAD
  ========================================================================== */

.crCd8 {
  margin-bottom: var(--spacing-base);
  display: flex;
  gap: var(--spacing-tiny);
}

._3M-EM {
  margin-left: var(--spacing-base);
}

.YmvgO {
  width: 100%;
}

/* ==========================================================================
  # RECORD DETAIL / FORMS / ASSET / INFO / ASSET TOOLS / EMBED CODE
  ========================================================================== */

.Td9a- {
  margin-bottom: var(--spacing-base);
}

.x6Fox {
  margin-top: @spacing-base;
}

/* ==========================================================================
  # RECORD DETAIL / FORMS / ASSET / INFO / ASSET TOOLS / PREVIEW EDITOR
  ========================================================================== */

.-kFUx {
  position: relative;
  flex-grow: 0;
  flex-shrink: 0;
  border: 1px solid var(--color-grey);
  background-color: var(--color-grey-light);
  text-align: center;
  margin-bottom: var(--spacing-base);
}

.H27wK .ZlVQd {
  opacity: 0.2;
}

._4sx0S {
  padding: var(--spacing-tiny);
}

.bGBL5 {
  font-size: var(--font-size-small);
  text-align: center;
}

.YkoPE {
  margin-bottom: var(--spacing-base);
  transition: all var(--transition-base);
}

.iiQqC,
  .cbpJF {
    transform: translate(0, -100%);
    opacity: 0;
    max-height: 0;
  }

.Kmwaj,
  .h2ADx {
    transform: translate(0, 0);
    opacity: 1;
    max-height: auto;
  }

.kws6c {
  position: relative;
}

.DyXkk {
  display: block;
  margin-bottom: var(--spacing-tiny);
}

._19QfK {
  display: none;
}

/* ==========================================================================
  # RECORD DETAIL / FORMS / ASSET / INFO / ASSET TOOLS / SAMPLING
  ========================================================================== */

._0vkPA {
  margin-bottom: var(--spacing-base);
  display: flex;
  gap: var(--spacing-tiny);
}

.OpvUU {
  margin-left: var(--spacing-base);
}

.EX8j2 {
  width: 100%;
}

/* ==========================================================================
   # RECORD DETAIL / FORMS / ASSET / INFO
   ========================================================================== */

.a6-Jq {
  display: flex;
  margin-bottom: var(--spacing-base);
  border: 1px solid var(--color-grey);
  background-color: var(--color-white);
}

.jSD8z {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
}

.aNHLO {
  position: relative;
}

.dbWtn {
  max-height: 70vh;
  background-color: var(--color-grey);
  background-image: linear-gradient(
      45deg,
      var(--color-grey-dark) 25%,
      transparent 25%
    ),
    linear-gradient(-45deg, var(--color-grey-dark) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--color-grey-dark) 75%),
    linear-gradient(-45deg, transparent 75%, var(--color-grey-dark) 75%);
  background-position:
    0 0,
    0 10px,
    10px -10px,
    -10px 0;
  background-size: 20px 20px;
}

.E9LhK {
  width: 100%;
}

._42yqq {
  width: 100%;
  max-height: 70vh;
}

.uNoHq {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-base);
  width: 100%;
  height: 100%;
  color: var(--color-white);
  font-size: 30px;
  background-color: var(--color-grey-dark);
}

.HwI0C {
  background-color: var(--mime-color-pdf);
}

.qPDfn {
  background-color: var(--mime-color-xml);
}

._7YEMk {
  background-color: var(--mime-color-zip);
}

.QeWxp {
  background-color: var(--mime-color-msword);
}

._7UABD {
  background-color: var(--mime-color-html);
}

._7XeSt {
  background-color: var(--mime-color-rtf);
}

.BLpWf {
  background-color: var(--mime-color-plain);
}

.fsdmm {
  background-color: var(--mime-color-x-shockwave-flash);
}

.-s9WO {
  background-color: var(--mime-color-mp4);
}

.uq2mn {
  background-color: var(--mime-color-mpeg);
}

.TXKdQ {
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  padding: var(--spacing-base);
  background-color: var(--color-white);
}

.zkTPe {
  margin-bottom: var(--spacing-base);
}

.qEI66 {
  margin-bottom: var(--spacing-small);
}

.yentV {
  font-weight: bold;
}

/* Media queries
     ========================================================================== */

@media (width <= 992px) {
  .a6-Jq {
    flex-direction: column;
  }

  .TXKdQ {
    flex-direction: row;
    border-top: 1px solid var(--color-grey);
  }

  .Q2N4j {
    margin-left: var(--spacing-base);
    padding-left: var(--spacing-small);
    border-left: 1px solid var(--color-grey);
  }
}

@media (width > 992px) {
  .a6-Jq {
    flex-direction: row;
  }

  .jSD8z {
    padding: var(--spacing-base);
  }

  .TXKdQ {
    flex-shrink: 0;
    flex-direction: column;
    width: 320px;
    border-left: 1px solid var(--color-grey);
  }

  .Q2N4j {
    margin-top: var(--spacing-base);
    padding-top: var(--spacing-small);
    border-top: 1px solid var(--color-grey);
  }
}

.EhMBF {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--spacing-small);
}

.uSmGm {
  flex-grow: 1;
}

._0Nt9B {
  margin-top: var(--spacing-base);
}

.x6TYt {
  margin-top: var(--spacing-base);
}

/* ==========================================================================
  # PAGE BUILDER / CONTENT ITEMS / ITEM
  ========================================================================== */

.o5YNo {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--color-white), #000 10%);
  margin-bottom: var(--spacing-small);
  padding: var(--spacing-small);
  transition: all var(--transition-base);
  background-color: rgba(var(--color-white) / 40%);
  color: var(--color-typo);
}

._5MA5u {
    background-color: var(--color-white);
  }

.BkuSO {
    background-color: var(--color-active-light) !important;
  }

.LexHH {
    background-color: var(--color-error-light) !important;
  }

.o5YNo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background-color: var(--color-active);
    z-index: 2;
  }

.BkuSO::before {
    width: 3px;
  }

.LexHH::before {
    width: 3px;
    background-color: var(--color-error);
  }

.o5YNo.is-dragging {
    transition-duration: 0s;
    z-index: 1;
    box-shadow: 0 5px 10px rgba(0 0 0 / 10%);
  }

.o5YNo .o5YNo {
    background-color: color-mix(in srgb, var(--color-white), #000 4%);
    border-color: color-mix(in srgb, var(--color-white), #000 10%);
  }

.o5YNo .o5YNo .o5YNo {
    background-color: color-mix(in srgb, var(--color-white), #000 8%);
    border-color: color-mix(in srgb, var(--color-white), #000 14%);
  }

.o5YNo .o5YNo .o5YNo .o5YNo {
    background-color: color-mix(in srgb, var(--color-white), #000 12%);
    border-color: color-mix(in srgb, var(--color-white), #000 18%);
  }

.vjm-A {
    flex-grow: 1;
    flex-basis: 100%;
    margin: 0 var(--spacing-tiny) var(--spacing-small) var(--spacing-tiny);
  }

.DjRnv:not(.d7vvY) {
    padding-bottom: 0;
  }

.xt1UD {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-small);
}

.dyi7A {
  padding-right: var(--spacing-small);
  cursor: grab;
  color: var(--color-grey-dark);
}

._5DSGv {
  display: flex;
  align-items: center;
  opacity: 0.3;
}

._5MA5u > .xt1UD ._5DSGv {
  opacity: 1;
  text-decoration: none;
}

._5IYt- {
  width: var(--spacing-small-tiny);
  height: var(--spacing-small-tiny);
  fill: currentcolor;
  margin-right: var(--spacing-tiny);
}

.etlHb {
  flex-grow: 1;
}

.AHu4n {
  opacity: 0;
  transition: opacity var(--transition-base);
}

.o5YNo:focus-within > .xt1UD .AHu4n,
.o5YNo:hover > .xt1UD .AHu4n {
  opacity: 1;
}

.yEiJJ {
  margin-bottom: 0;
  opacity: 0.3;
}

._5MA5u > .LGOy- .yEiJJ {
  opacity: 1;
}

/* Media queries
   ========================================================================== */

@media (width < 992px) {
  .vjm-A {
    margin-bottom: var(--spacing-small);
  }

    .vjm-A:last-child {
      margin-bottom: 0;
    }
}

/* ==========================================================================
  # RECORD EXPLORER / TOOLBAR / SEARCH
  ========================================================================== */

.NZbeQ {
  min-width: 150px;
}

.esQ11 {
  position: relative;
  display: flex;
}

.kr73v {
  position: absolute;
  top: var(--spacing-tiny);
  left: 12px;
}

.w7oRB {
  padding-left: 30px;
  padding-right: 35px;
  transition: width var(--transition-base);
}

.UlwU0 {
  all: inherit;
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  flex-shrink: 0;
  width: 34px;
  color: var(--color-error);
  font-weight: bold;
  font-size: 18px;
  line-height: 1.75;
  border-left: 1px solid var(--color-grey);
  justify-content: center;
}

.UlwU0:hover {
    background-color: var(--color-grey);
  }

._9a75O ._6LLqx {
  display: none;
}

/* ==========================================================================
  # RECORD EXPLOERER / TOOLBAR / FILTERS / DATE
  ========================================================================== */

.mODsi {
  position: relative;
}

.H6MdD {
  width: 150px;
}

.ZpFP4 {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  border-radius: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
}

.ZpFP4:hover {
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 1px solid rgb(229 230 231);
  }

/* ==========================================================================
  # RECORD EXPLOERER / TOOLBAR / FILTERS
  ========================================================================== */

.OiRir {
  display: flex;
  gap: var(--spacing-tiny);
}

._4WO4S .Fn0lk {
  display: none;
}

/* ==========================================================================
  # RECORD EXPLORER / TOOLBAR
  ========================================================================== */

.D7GlE {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: flex-end;
  gap: var(--spacing-tiny);
}

.KoZIw {
  display: flex;
  gap: var(--spacing-tiny);
  align-items: flex-end;
}

.lV-u0 {
  display: flex;
  gap: var(--spacing-tiny);
  overflow: auto;
  overflow-y: hidden;
}

/* ==========================================================================
  # PAGE BUILDER / CONTENT ITEMS / SELECT / ITEM
  ========================================================================== */

.tYzvY {
  border: 1px solid var(--color-grey);
  padding: var(--spacing-base) var(--spacing-small) var(--spacing-small);
  transition: all var(--transition-base);
  border-radius: var(--spacing-tiny);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: inherit;
}

.tYzvY:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

.tYzvY:hover:not(:disabled) {
    background-color: var(--color-active);
    border-color: var(--color-active);
    color: var(--color-white);
  }

.W4guK {
  height: 28px;
  fill: currentcolor;
  padding-bottom: var(--spacing-tiny);
  margin-bottom: var(--spacing-tiny);
}

/* ==========================================================================
  # PAGE BUILDER / CONTENT ITEMS / SELECT
  ========================================================================== */

.yXrRW {
  z-index: 1;
}

.MQ5Wr {
  position: relative;
  display: inline-block;
  background-color: rgba(0 0 0 / 10%);
  padding: var(--spacing-small);
  margin-left: var(--spacing-small);
  border-radius: var(--spacing-tiny);
}

.MQ5Wr::after {
    position: absolute;
    top: var(--spacing-small-tiny);
    left: calc(-1 * var(--spacing-small));
    width: var(--spacing-small);
    height: var(--spacing-small);
    content: '';
    display: block;
    border-top: var(--spacing-tiny) solid transparent;
    border-bottom: var(--spacing-tiny) solid transparent;
    border-right: var(--spacing-tiny) solid rgba(0 0 0 / 10%);
  }

.qXbQ\+ {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: var(--spacing-small);
}

.OKMsG {
  position: relative;
  text-align: center;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  z-index: inherit;
}

.I7rIn {
    height: 100%;
    margin-left: calc(-1 * var(--spacing-small) - 1px);
    margin-right: calc(-1 * var(--spacing-small));
  }

.Lfjzt {
    margin-top: calc(-1 * var(--spacing-small-tiny) - 1px);
    margin-bottom: calc(-1 * var(--spacing-tiny));
  }

.OKMsG::before {
    position: absolute;
    content: '';
    background-color: var(--color-primary);
    transition: 0.3s all cubic-bezier(0, 0.88, 0.6, 0.99);
  }

.I7rIn::before {
    left: var(--spacing-small);
    top: calc(50% - var(--spacing-tiny));
    height: 0;
    transform: translate(0, -50%);
    width: 2px;
  }

.Lfjzt::before {
    top: var(--spacing-small);
    left: 50%;
    width: 20%;
    transform: translate(-50%, 0);
    height: 2px;
  }

.I7rIn:hover::before,
  .I7rIn:focus::before {
    height: calc(100% - var(--spacing-small));
  }

.Lfjzt:hover::before,
  .Lfjzt:focus::before {
    width: 100%;
  }

.OKMsG:hover,
  .OKMsG:focus {
    opacity: 1;
  }

.srB5L {
  border-radius: 50%;
  width: var(--spacing-base);
  height: var(--spacing-base);
  background-color: var(--color-primary);
  color: var(--color-white);
  z-index: 1;
}

@media (width > 992px) {
  .qXbQ\+ {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media (width < 767px) {
  .qXbQ\+ {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
  # PAGE BUILDER / CONTENT ITEMS
  ========================================================================== */

.-jW9J {
  display: flex;
  justify-content: stretch;
  margin-top: var(--spacing-base);
}

._7cV\+u.ZsT-Q {
    flex-direction: row;
    margin-left: calc(-1 * var(--spacing-tiny));
    margin-right: calc(-1 * var(--spacing-tiny));
  }

.zZnzj {
    flex-direction: column;
  }

/* Media queries
   ========================================================================== */

@media (width < 992px) {
    ._7cV\+u {
      flex-wrap: wrap;
    }
}

/* ==========================================================================
  # PAGE BUILDER / OPTIONS / SELECTED INFO
  ========================================================================== */

.U6Unm {
  padding: var(--spacing-small);
  border-bottom: 1px solid var(--color-grey);
}

.cCetm {
  background-color: var(--color-grey-dark);
  border-radius: 50%;
  width: var(--spacing-large-small);
  height: var(--spacing-large-small);
  display: flex;
  flex-direction: column;
  color: var(--color-white);
  justify-content: center;
  align-items: center;
  font-size: var(--font-size-small);
}

._3mGmR {
  width: var(--spacing-base-tiny);
  height: var(--spacing-base-tiny);
  fill: currentcolor;
}

/* ==========================================================================
  # PAGE BUILDER / OPTIONS
  ========================================================================== */

._0Zb4e {
  display: flex;
  position: sticky;
  top: 0;
  background-color: var(--color-white);
  z-index: 2;
}

.oRH9w {
  position: relative;
  flex-basis: 50%;
  flex-grow: 1;
  text-align: center;
  border-bottom: 1px solid var(--color-grey);
  padding: var(--spacing-small);
}

.oRH9w:first-child {
    border-right: 1px solid var(--color-grey);
  }

.oRH9w::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    background-color: var(--color-active);
  }

.ESc4Z::after {
    height: 3px;
  }

.ESc4Z {
    background-color: var(--color-active-light);
  }

.SU1vv {
  padding: var(--spacing-small);
}

/*! Pickr 1.9.1 MIT | https://github.com/Simonwep/pickr */
.pickr{position:relative;overflow:visible;transform:translateY(0)}.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr .pcr-button{position:relative;height:2em;width:2em;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;border-radius:.15em;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\" stroke=\"%2342445A\" stroke-width=\"5px\" stroke-linecap=\"round\"><path d=\"M45,45L5,5\"></path><path d=\"M45,5L5,45\"></path></svg>") no-repeat center;background-size:0;transition:all .3s}.pickr .pcr-button::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>");background-size:.5em;border-radius:.15em;z-index:-1}.pickr .pcr-button::before{z-index:initial}.pickr .pcr-button::after{position:absolute;content:"";top:0;left:0;height:100%;width:100%;transition:background .3s;background:var(--pcr-color);border-radius:.15em}.pickr .pcr-button.clear{background-size:70%}.pickr .pcr-button.clear::before{opacity:0}.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px var(--pcr-color)}.pickr .pcr-button.disabled{cursor:not-allowed}.pickr *,.pcr-app *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr input:focus,.pickr input.pcr-active,.pickr button:focus,.pickr button.pcr-active,.pcr-app input:focus,.pcr-app input.pcr-active,.pcr-app button:focus,.pcr-app button.pcr-active{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px var(--pcr-color)}.pickr .pcr-palette,.pickr .pcr-slider,.pcr-app .pcr-palette,.pcr-app .pcr-slider{transition:box-shadow .3s}.pickr .pcr-palette:focus,.pickr .pcr-slider:focus,.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px rgba(0,0,0,.25)}.pcr-app{position:fixed;display:flex;flex-direction:column;z-index:10000;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);left:0;top:0}.pcr-app.visible{transition:opacity .3s;visibility:visible;opacity:1}.pcr-app .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}.pcr-app .pcr-swatches.pcr-last{margin:0}@supports(display: grid){.pcr-app .pcr-swatches{display:grid;align-items:center;grid-template-columns:repeat(auto-fit, 1.75em)}}.pcr-app .pcr-swatches>button{font-size:1em;position:relative;width:calc(1.75em - 5px);height:calc(1.75em - 5px);border-radius:.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all .15s;overflow:hidden;background:rgba(0,0,0,0);z-index:1}.pcr-app .pcr-swatches>button::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>");background-size:6px;border-radius:.15em;z-index:-1}.pcr-app .pcr-swatches>button::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--pcr-color);border:1px solid rgba(0,0,0,.05);border-radius:.15em;box-sizing:border-box}.pcr-app .pcr-swatches>button:hover{filter:brightness(1.05)}.pcr-app .pcr-swatches>button:not(.pcr-active){box-shadow:none}.pcr-app .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -0.2em 0 -0.2em}.pcr-app .pcr-interaction>*{margin:0 .2em}.pcr-app .pcr-interaction input{letter-spacing:.07em;font-size:.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all .15s;padding:.45em .5em;margin-top:.75em}.pcr-app .pcr-interaction input:hover{filter:brightness(0.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px rgba(66,133,244,.75)}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all .2s;border-radius:.15em;background:#f1f3f4;cursor:text}.pcr-app .pcr-interaction .pcr-result::-moz-selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff;width:auto}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff}.pcr-app .pcr-interaction .pcr-save:hover,.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover{filter:brightness(0.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-cancel{background:#f44250}.pcr-app .pcr-interaction .pcr-clear:focus,.pcr-app .pcr-interaction .pcr-cancel:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px rgba(244,66,80,.75)}.pcr-app .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.pcr-app .pcr-selection .pcr-color-palette,.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity{position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;flex-direction:column;cursor:grab;cursor:-webkit-grab}.pcr-app .pcr-selection .pcr-color-palette:active,.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active{cursor:grabbing;cursor:-webkit-grabbing}.pcr-app[data-theme=classic]{width:28.5em;max-width:95vw;padding:.8em}.pcr-app[data-theme=classic] .pcr-selection{display:flex;justify-content:space-between;flex-grow:1}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview{position:relative;z-index:1;width:2em;display:flex;flex-direction:column;justify-content:space-between;margin-right:.75em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>");background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color{cursor:pointer;border-radius:.15em .15em 0 0;z-index:2}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color{border-radius:0 0 .15em .15em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color{background:var(--pcr-color);width:100%;height:50%}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette{width:100%;height:8em;z-index:1}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette{flex-grow:1;border-radius:.15em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>");background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity{margin-left:.75em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-picker{left:50%;transform:translateX(-50%)}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider{width:8px;flex-grow:1;border-radius:50em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(to bottom, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%))}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(to bottom, transparent, black),url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>");background-size:100%,50%}

/* ==========================================================================
  # UI / FORM / FIELD / COLOR
  ========================================================================== */

/*
 * Form field color component, to edit color fields
 */

._3CpIG {
  display: flex;
  align-items: center;
}

.fxqFZ {
  margin-right: var(--spacing-tiny);
}

.fxqFZ .TAe32 {
    border: 1px solid var(--color-grey);
  }

.lzq8\+ {
  color: var(--color-grey-dark);
}

.Y-Afj {
  display: flex;
  flex-direction: row;
  margin-bottom: var(--spacing-tiny);
}

.zp1FA {
  margin-right: var(--spacing-tiny);
}

.ember-animated-hidden {
    visibility: hidden !important;
}

.ember-animated-none {
    display: none !important;
}

.ember-animated-top-collapse {
    margin-top: 0 !important;
}

.animated-container {
    position: relative;
}

.animated-container:before, .animated-container:after {
    content: ' ';
    display: table;
}

.animated-orphans {
    position: relative;
}

.XiRS7 {
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
}

.DRyHP {
  width: 100%;
  margin-bottom: var(--spacing-small);
}

.wT81k {
  display: block;
  width: 150px;
  margin: 0 auto;
  transition: width 0.3s ease-in-out;
}

._1DBH2 {
    width: 50px;
  }

.g85KK {
  display: grid;
  grid-template-columns: 1fr 180px;
  align-items: flex-start;
  gap: var(--spacing-small);
  margin: 0 auto;
}

.YDkA5 {
  text-align: center;
}