/* fallback */
@font-face {
    font-family: 'Material Icons Outlined';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/material-icons/material-outline.woff2?v=2.6.4) format('woff2');
}
icon {
    display: inline-block;
    user-select: none;
    -moz-user-select: none;
}
icon,
.material-icons-outlined {
    font-family: 'Material Icons Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 1em;
    line-height: inherit;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    vertical-align: middle;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
}
icon[size="larger"] {
    transform: scale(1.2);
}
icon[size="large"] {
    transform: scale(2);
}
/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.7.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2018 Daniel Eden
 */
@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0, -4px, 0);
  }
}
.bounce {
  animation-name: bounce;
  transform-origin: center bottom;
}
@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}
.flash {
  animation-name: flash;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}
.pulse {
  animation-name: pulse;
}
@keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}
.rubberBand {
  animation-name: rubberBand;
}
@keyframes shake {
  from,
  to {
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translate3d(10px, 0, 0);
  }
}
.shake {
  animation-name: shake;
}
@keyframes headShake {
  0% {
    transform: translateX(0);
  }

  6.5% {
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    transform: translateX(0);
  }
}
.headShake {
  animation-timing-function: ease-in-out;
  animation-name: headShake;
}
@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.swing {
  transform-origin: top center;
  animation-name: swing;
}
@keyframes tada {
  from {
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}
.tada {
  animation-name: tada;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes wobble {
  from {
    transform: translate3d(0, 0, 0);
  }

  15% {
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}
.wobble {
  animation-name: wobble;
}
@keyframes jello {
  from,
  11.1%,
  to {
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
.jello {
  animation-name: jello;
  transform-origin: center;
}
@keyframes heartBeat {
  0% {
    transform: scale(1);
  }

  14% {
    transform: scale(1.3);
  }

  28% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.3);
  }

  70% {
    transform: scale(1);
  }
}
.heartBeat {
  animation-name: heartBeat;
  animation-duration: 1.3s;
  animation-timing-function: ease-in-out;
}
@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
.bounceIn {
  animation-duration: 0.75s;
  animation-name: bounceIn;
}
@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}
.bounceInDown {
  animation-name: bounceInDown;
}
@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }

  75% {
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    transform: translate3d(5px, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}
.bounceInLeft {
  animation-name: bounceInLeft;
}
@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    transform: translate3d(10px, 0, 0);
  }

  90% {
    transform: translate3d(-5px, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}
.bounceInRight {
  animation-name: bounceInRight;
}
@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  75% {
    transform: translate3d(0, 10px, 0);
  }

  90% {
    transform: translate3d(0, -5px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}
.bounceInUp {
  animation-name: bounceInUp;
}
@keyframes bounceOut {
  20% {
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.bounceOut {
  animation-duration: 0.75s;
  animation-name: bounceOut;
}
@keyframes bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.bounceOutDown {
  animation-name: bounceOutDown;
}
@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}
.bounceOutLeft {
  animation-name: bounceOutLeft;
}
@keyframes bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}
.bounceOutRight {
  animation-name: bounceOutRight;
}
@keyframes bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
.bounceOutUp {
  animation-name: bounceOutUp;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.fadeIn {
  animation-name: fadeIn;
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInDown {
  animation-name: fadeInDown;
}
@keyframes fadeInDownBig {
  from {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInDownBig {
  animation-name: fadeInDownBig;
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInLeft {
  animation-name: fadeInLeft;
}
@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInLeftBig {
  animation-name: fadeInLeftBig;
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInRight {
  animation-name: fadeInRight;
}
@keyframes fadeInRightBig {
  from {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInRightBig {
  animation-name: fadeInRightBig;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}
@keyframes fadeInUpBig {
  from {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUpBig {
  animation-name: fadeInUpBig;
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
.fadeOut {
  animation-name: fadeOut;
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}
.fadeOutDown {
  animation-name: fadeOutDown;
}
@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.fadeOutDownBig {
  animation-name: fadeOutDownBig;
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}
.fadeOutLeft {
  animation-name: fadeOutLeft;
}
@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}
.fadeOutLeftBig {
  animation-name: fadeOutLeftBig;
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}
.fadeOutRight {
  animation-name: fadeOutRight;
}
@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}
.fadeOutRightBig {
  animation-name: fadeOutRightBig;
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}
.fadeOutUp {
  animation-name: fadeOutUp;
}
@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
.fadeOutUpBig {
  animation-name: fadeOutUpBig;
}
@keyframes flip {
  from {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    animation-timing-function: ease-out;
  }

  40% {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    animation-timing-function: ease-out;
  }

  50% {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    animation-timing-function: ease-in;
  }

  80% {
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    animation-timing-function: ease-in;
  }

  to {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    animation-timing-function: ease-in;
  }
}
.animated.flip {
  backface-visibility: visible;
  animation-name: flip;
}
@keyframes flipInX {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    transform: perspective(400px);
  }
}
.flipInX {
  backface-visibility: visible !important;
  animation-name: flipInX;
}
@keyframes flipInY {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    animation-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    transform: perspective(400px);
  }
}
.flipInY {
  backface-visibility: visible !important;
  animation-name: flipInY;
}
@keyframes flipOutX {
  from {
    transform: perspective(400px);
  }

  30% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.flipOutX {
  animation-duration: 0.75s;
  animation-name: flipOutX;
  backface-visibility: visible !important;
}
@keyframes flipOutY {
  from {
    transform: perspective(400px);
  }

  30% {
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
.flipOutY {
  animation-duration: 0.75s;
  backface-visibility: visible !important;
  animation-name: flipOutY;
}
@keyframes lightSpeedIn {
  from {
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    transform: skewX(-5deg);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}
.lightSpeedIn {
  animation-name: lightSpeedIn;
  animation-timing-function: ease-out;
}
@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
.lightSpeedOut {
  animation-name: lightSpeedOut;
  animation-timing-function: ease-in;
}
@keyframes rotateIn {
  from {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    transform-origin: center;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateIn {
  animation-name: rotateIn;
}
@keyframes rotateInDownLeft {
  from {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    transform-origin: left bottom;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateInDownLeft {
  animation-name: rotateInDownLeft;
}
@keyframes rotateInDownRight {
  from {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    transform-origin: right bottom;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateInDownRight {
  animation-name: rotateInDownRight;
}
@keyframes rotateInUpLeft {
  from {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    transform-origin: left bottom;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateInUpLeft {
  animation-name: rotateInUpLeft;
}
@keyframes rotateInUpRight {
  from {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    transform-origin: right bottom;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateInUpRight {
  animation-name: rotateInUpRight;
}
@keyframes rotateOut {
  from {
    transform-origin: center;
    opacity: 1;
  }

  to {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
.rotateOut {
  animation-name: rotateOut;
}
@keyframes rotateOutDownLeft {
  from {
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
.rotateOutDownLeft {
  animation-name: rotateOutDownLeft;
}
@keyframes rotateOutDownRight {
  from {
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.rotateOutDownRight {
  animation-name: rotateOutDownRight;
}
@keyframes rotateOutUpLeft {
  from {
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.rotateOutUpLeft {
  animation-name: rotateOutUpLeft;
}
@keyframes rotateOutUpRight {
  from {
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
.rotateOutUpRight {
  animation-name: rotateOutUpRight;
}
@keyframes hinge {
  0% {
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    transform: rotate3d(0, 0, 1, 80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    transform: rotate3d(0, 0, 1, 60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
.hinge {
  animation-duration: 2s;
  animation-name: hinge;
}
@keyframes jackInTheBox {
  from {
    opacity: 0;
    transform: scale(0.1) rotate(30deg);
    transform-origin: center bottom;
  }

  50% {
    transform: rotate(-10deg);
  }

  70% {
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}
.jackInTheBox {
  animation-name: jackInTheBox;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes rollIn {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.rollIn {
  animation-name: rollIn;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
.rollOut {
  animation-name: rollOut;
}
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
.zoomIn {
  animation-name: zoomIn;
}
@keyframes zoomInDown {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInDown {
  animation-name: zoomInDown;
}
@keyframes zoomInLeft {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInLeft {
  animation-name: zoomInLeft;
}
@keyframes zoomInRight {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInRight {
  animation-name: zoomInRight;
}
@keyframes zoomInUp {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInUp {
  animation-name: zoomInUp;
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}
.zoomOut {
  animation-name: zoomOut;
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomOutDown {
  animation-name: zoomOutDown;
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform-origin: left center;
  }
}
.zoomOutLeft {
  animation-name: zoomOutLeft;
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    transform: scale(0.1) translate3d(2000px, 0, 0);
    transform-origin: right center;
  }
}
.zoomOutRight {
  animation-name: zoomOutRight;
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomOutUp {
  animation-name: zoomOutUp;
}
@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideInDown {
  animation-name: slideInDown;
}
@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideInLeft {
  animation-name: slideInLeft;
}
@keyframes slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideInRight {
  animation-name: slideInRight;
}
@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideInUp {
  animation-name: slideInUp;
}
@keyframes slideOutDown {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
  }
}
.slideOutDown {
  animation-name: slideOutDown;
}
@keyframes slideOutLeft {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(-100%, 0, 0);
  }
}
.slideOutLeft {
  animation-name: slideOutLeft;
}
@keyframes slideOutRight {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
  }
}
.slideOutRight {
  animation-name: slideOutRight;
}
@keyframes slideOutUp {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, -100%, 0);
  }
}
.slideOutUp {
  animation-name: slideOutUp;
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.animated.infinite {
  animation-iteration-count: infinite;
}
.animated.delay-1s {
  animation-delay: 1s;
}
.animated.delay-2s {
  animation-delay: 2s;
}
.animated.delay-3s {
  animation-delay: 3s;
}
.animated.delay-4s {
  animation-delay: 4s;
}
.animated.delay-5s {
  animation-delay: 5s;
}
.animated.fast {
  animation-duration: 800ms;
}
.animated.faster {
  animation-duration: 500ms;
}
.animated.slow {
  animation-duration: 2s;
}
.animated.slower {
  animation-duration: 3s;
}
@media (print), (prefers-reduced-motion) {
  .animated {
    animation: unset !important;
    transition: none !important;
  }
}
#noty_layout__bottom,
#noty_layout__bottomCenter,
#noty_layout__bottomLeft,
#noty_layout__bottomRight,
#noty_layout__center,
#noty_layout__centerLeft,
#noty_layout__centerRight,
#noty_layout__top,
#noty_layout__topCenter,
#noty_layout__topLeft,
#noty_layout__topRight,
.noty_layout_mixin {
    position: fixed;
    margin: 0;
    padding: 0;
    z-index: 9999999;
    -webkit-transform: translateZ(0) scale(1, 1);
    transform: translateZ(0) scale(1, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    filter: blur(0);
    -webkit-filter: blur(0);
    max-width: 90%
}
#noty_layout__top {
    top: 0;
    left: 5%;
    width: 90%
}
#noty_layout__topLeft {
    top: 20px;
    left: 20px;
    width: 325px
}
#noty_layout__topCenter {
    top: 5%;
    left: 50%;
    width: 325px;
    -webkit-transform: translate(-webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
    transform: translate(calc(-50% - .5px)) translateZ(0) scale(1, 1)
}
#noty_layout__topRight {
    top: 20px;
    right: 20px;
    width: 325px
}
#noty_layout__bottom {
    bottom: 0;
    left: 5%;
    width: 90%
}
#noty_layout__bottomLeft {
    bottom: 20px;
    left: 20px;
    width: 325px
}
#noty_layout__bottomCenter {
    bottom: 5%;
    left: 50%;
    width: 325px;
    -webkit-transform: translate(-webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
    transform: translate(calc(-50% - .5px)) translateZ(0) scale(1, 1)
}
#noty_layout__bottomRight {
    bottom: 20px;
    right: 20px;
    width: 325px
}
#noty_layout__center {
    top: 50%;
    left: 50%;
    width: 325px;
    -webkit-transform: translate(-webkit-calc(-50% - .5px), -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
    transform: translate(calc(-50% - .5px), calc(-50% - .5px)) translateZ(0) scale(1, 1)
}
#noty_layout__centerLeft {
    top: 50%;
    left: 20px;
    width: 325px;
    -webkit-transform: translate(0, -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
    transform: translate(0, calc(-50% - .5px)) translateZ(0) scale(1, 1)
}
#noty_layout__centerRight {
    top: 50%;
    right: 20px;
    width: 325px;
    -webkit-transform: translate(0, -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
    transform: translate(0, calc(-50% - .5px)) translateZ(0) scale(1, 1)
}
.noty_progressbar {
    display: none
}
.noty_has_timeout.noty_has_progressbar .noty_progressbar {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background-color: #646464;
    opacity: .2
}
.noty_bar {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate(0, 0) translateZ(0) scale(1, 1);
    -ms-transform: translate(0, 0) scale(1, 1);
    transform: translate(0, 0) scale(1, 1);
    -webkit-font-smoothing: subpixel-antialiased;
    overflow: hidden
}
.noty_effects_open {
    opacity: 0;
    -webkit-transform: translate(50%);
    -ms-transform: translate(50%);
    transform: translate(50%);
    -webkit-animation: noty_anim_in .5s cubic-bezier(.68, -.55, .265, 1.55);
    animation: noty_anim_in .5s cubic-bezier(.68, -.55, .265, 1.55);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}
.noty_effects_close {
    -webkit-animation: noty_anim_out .5s cubic-bezier(.68, -.55, .265, 1.55);
    animation: noty_anim_out .5s cubic-bezier(.68, -.55, .265, 1.55);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}
.noty_fix_effects_height {
    -webkit-animation: noty_anim_height 75ms ease-out;
    animation: noty_anim_height 75ms ease-out
}
.noty_close_with_click {
    cursor: pointer
}
.noty_close_button {
    position: absolute;
    top: 2px;
    right: 2px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    background-color: rgba(0, 0, 0, .05);
    border-radius: 2px;
    cursor: pointer;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out
}
.noty_close_button:hover {
    background-color: rgba(0, 0, 0, .1)
}
.noty_modal {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 10000;
    opacity: .3;
    left: 0;
    top: 0
}
.noty_modal.noty_modal_open {
    opacity: 0;
    -webkit-animation: noty_modal_in .3s ease-out;
    animation: noty_modal_in .3s ease-out
}
.noty_modal.noty_modal_close {
    -webkit-animation: noty_modal_out .3s ease-out;
    animation: noty_modal_out .3s ease-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}
@-webkit-keyframes noty_modal_in {
    100% {
        opacity: .3
    }
}
@keyframes noty_modal_in {
    100% {
        opacity: .3
    }
}
@-webkit-keyframes noty_modal_out {
    100% {
        opacity: 0
    }
}
@keyframes noty_modal_out {
    100% {
        opacity: 0
    }
}
@keyframes noty_modal_out {
    100% {
        opacity: 0
    }
}
@-webkit-keyframes noty_anim_in {
    100% {
        -webkit-transform: translate(0);
        transform: translate(0);
        opacity: 1
    }
}
@keyframes noty_anim_in {
    100% {
        -webkit-transform: translate(0);
        transform: translate(0);
        opacity: 1
    }
}
@-webkit-keyframes noty_anim_out {
    100% {
        -webkit-transform: translate(50%);
        transform: translate(50%);
        opacity: 0
    }
}
@keyframes noty_anim_out {
    100% {
        -webkit-transform: translate(50%);
        transform: translate(50%);
        opacity: 0
    }
}
@-webkit-keyframes noty_anim_height {
    100% {
        height: 0
    }
}
@keyframes noty_anim_height {
    100% {
        height: 0
    }
}
.noty_theme__app.noty_bar {
    margin: 4px 0;
    overflow: hidden;
    border-radius: 2px;
    position: relative
}
.noty_theme__app.noty_bar .noty_body {
    padding: 10px;
    font-size: 14px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .1)
}
.noty_theme__app.noty_bar .noty_buttons {
    padding: 10px
}
.noty_theme__app.noty_type__alert,
.noty_theme__app.noty_type__notification {
    background-color: var(--kiss-color-contrast);
    color: #fff
}
.noty_theme__app.noty_type__alert .noty_progressbar,
.noty_theme__app.noty_type__notification .noty_progressbar {
    background-color: #fff
}
.noty_theme__app.noty_type__warning {
    background-color: var(--kiss-color-warning);
    color: #fff
}
.noty_theme__app.noty_type__error {
    background-color: var(--kiss-color-danger);
    color: #fff
}
.noty_theme__app.noty_type__error .noty_progressbar {
    opacity: .4
}
.noty_theme__app.noty_type__info,
.noty_theme__app.noty_type__information {
    background-color: var(--kiss-color-primary);
    color: #fff
}
.noty_theme__app.noty_type__info .noty_progressbar,
.noty_theme__app.noty_type__information .noty_progressbar {
    opacity: .6
}
.noty_theme__app.noty_type__success {
    background-color: var(--kiss-color-success);
    color: #fff
}
/* START TOOLTIP STYLES */
[tooltip] {
    position: relative; /* opinion 1 */
}
/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
    text-transform: none; /* opinion 2 */
    font-size: .9em; /* opinion 3 */
    line-height: 1;
    user-select: none;
    pointer-events: none;
    position: absolute;
    display: none;
    opacity: 0;
}
[tooltip]::before {
    content: '';
    border: 5px solid transparent; /* opinion 4 */
    z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
    content: attr(tooltip); /* magic! */

    /* most of the rest of this is opinion */
    font-family: Helvetica, sans-serif;
    text-align: center;
    font-size: 12px;
    font-weight: bolder;
    letter-spacing: .5px;

    /*
      Let the content set the size of the tooltips
      but this will also keep them from being obnoxious
      */
    min-width: 3em;
    max-width: 21em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1ch 1.5ch;
    border-radius: .3ch;
    box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
    background: var(--tooltip-bgcolor, #000);
    color: var(--tooltip-color,#fff);
    z-index: 1000; /* absurdity 2 */
  }
/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
    display: block;
  }
/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
    display: none !important;
  }
/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
    bottom: 100%;
    border-bottom-width: 0;
    border-top-color: #000;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
    bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
    margin-bottom: var(--tooltip-offset, 10px);
    left: 50%;
    transform: translate(-50%, -.5em);
}
/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
    top: 100%;
    border-top-width: 0;
    border-bottom-color: var(--tooltip-bgcolor, #000);
}
[tooltip][flow^="down"]::after {
    top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
    margin-top: var(--tooltip-offset, 10px);
    left: 50%;
    transform: translate(-50%, .5em);
}
/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
    margin-right: var(--tooltip-offset, 10px);
    top: 50%;
    border-right-width: 0;
    border-left-color: var(--tooltip-bgcolor, #000);
    left: calc(0em - 5px);
    transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
    margin-right: var(--tooltip-offset, 10px);
    top: 50%;
    right: calc(100% + 5px);
    transform: translate(-.5em, -50%);
}
/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
    margin-left: var(--tooltip-offset, 10px);
    top: 50%;
    border-left-width: 0;
    border-right-color: var(--tooltip-bgcolor, #000);
    right: calc(0em - 5px);
    transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
    margin-left: var(--tooltip-offset, 10px);
    top: 50%;
    left: calc(100% + 5px);
    transform: translate(.5em, -50%);
}
/* KEYFRAMES */
@keyframes tooltips-vert {
    to {
        opacity: .9;
        transform: translate(-50%, 0);
    }
}
@keyframes tooltips-horz {
  to {
      opacity: .9;
      transform: translate(0, -50%);
  }
}
/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
    animation: tooltips-vert 300ms ease-out forwards;
}
[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
    animation: tooltips-horz 300ms ease-out forwards;
}
.app-switch {

    position: relative;
    width: 2em;
    height: 1em;

    font-size: inherit;
    background: var(--app-switch-offcolor, red);

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}
.app-switch:checked {
    background: var(--app-switch-oncolor, green);
}
.app-switch::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    height: 1em;
    background: #fff;
    transition: left 250ms;
    border: .15em var(--app-switch-offcolor, red) solid;
}
.app-switch:checked::before {
    left: calc(100% - 1em);
    right: 0;
    border-color: var(--app-switch-oncolor, green);
}
app-actionbar {
    position: fixed;
    display: block;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px 0;
    background: var(--app-actionbar-bgcolor, rgba(0,0,0,.4));
    z-index: 4;
}
app-fieldcontainer {
    display: block;
    container-type: inline-size;
}
app-field[disabled="true"] {
    opacity: .6;
}
.app-fieldcontainer-visible-hover {
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}
app-fieldcontainer:not([disabled="true"]):hover  .app-fieldcontainer-visible-hover {
    opacity: 1;
    pointer-events: all;
}
@media (min-width:1220px) {

    app-fieldcontainer {
        padding-left: 15px;
        border-left: 2px var(--app-fieldcontainer-border-color-inactive, rgba(0,0,0,.1)) solid;
        transition: border-color 200ms, opacity 100ms ease;
        opacity: .7;
    }

    app-fieldcontainer:hover {
        opacity: 1;
    }

    app-fieldcontainer[active="true"] {
        border-color: var(--app-fieldcontainer-border-color-active, blue);
        opacity: 1;
    }
}
app-frame {
    display: block;
}
app-frame iframe {
    border:none;
    width:100%;
    height:auto;
    padding: 0px;
    background-color: transparent;
    overflow:visible;
    overflow-y:visible;
    overflow-x:visible;
}
app-loader {
    display: block;
    position: relative;
    width: 40px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
}
app-loader[size="large"] {
    width: 80px;
    height: 80px;
}
app-loader[size="small"] {
    width: 20px;
    height: 20px;
}
/**
 * ORBIT
 **/
app-loader[mode="orbit"] > div {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: app-loader-orbit-rotate 8000ms infinite linear;
}
app-loader[mode="orbit"] div div {
    border-radius: 50%;
    transform: scale(0.1);
    opacity: 0.1;
}
app-loader[mode="orbit"] div div:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
    background: var(--app-loader-color1, #0e8fff);
    animation: app-loader-orbit-pulse 1000ms infinite ease alternate;
    animation-delay: 0;
}
app-loader[mode="orbit"] div div:nth-child(2) {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 50%;
    background: var(--app-loader-color2, #000);
    animation: app-loader-orbit-pulse 1000ms infinite ease alternate;
    animation-delay: 250ms;
}
app-loader[mode="orbit"] div div:nth-child(3) {
    position: absolute;
    top: 50%;
    left: 0;
    width: 50%;
    height: 50%;
    background: var(--app-loader-color3, #3c4bbf);
    animation: app-loader-orbit-pulse 1000ms infinite ease alternate;
    animation-delay: 500ms;
}
app-loader[mode="orbit"] div div:nth-child(4) {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    background: var(--app-loader-color4, #0e8fff);
    animation: app-loader-orbit-pulse 1000ms infinite ease alternate;
    animation-delay: 750ms;
}
@keyframes app-loader-orbit-rotate {
    from { transform: rotate(-180deg); }
    to { transform: rotate(180deg); }
}
@keyframes app-loader-orbit-pulse {
    from {
        top: -50%;
        left: -50%;
        transform: scale(1.0);
        opacity: 0;
    }

    to {
        transform: scale(0.2);
        opacity: 0.8;
    }
}
/**
 * DOTS
 **/
app-loader[mode="dots"] {
    position: relative;
}
app-loader[mode="dots"] div {
    position: absolute;
    top: 40%;
    width: 16%;
    height: 16%;
    border-radius: 50%;
    background: var(--app-loader-color-dots, currentColor);
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
app-loader[mode="dots"] div:nth-child(1) {
    left: 10%;
    animation: app-loader-dots-1 0.6s infinite;
}
app-loader[mode="dots"] div:nth-child(2) {
    left: 10%;
    animation: app-loader-dots-2 0.6s infinite;
}
app-loader[mode="dots"] div:nth-child(3) {
    left: 45%;
    animation: app-loader-dots-4 0.6s infinite;
}
app-loader[mode="dots"] div:nth-child(4) {
    left: 80%;
    animation: app-loader-dots-3 0.6s infinite;
}
@keyframes app-loader-dots-1 {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}
@keyframes app-loader-dots-3 {
    0% { transform: scale(1); }
    100% { transform: scale(0); }
}
@keyframes app-loader-dots-2 {
    0% { left: 10%; }
    100% { left: 45%; }
}
@keyframes app-loader-dots-4 {
    0% { left: 45%; }
    100% { left: 80%; }
}
/**
 * COVER LOADER
 **/
app-loader-cover {
    position: fixed;
    display: flex;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    align-items: center;
    justify-content: center;
    background: var(--app-loader-cover-bg, rgba(255, 255, 255, 0.8));
    z-index: 1000000000000000;
}
app-loader-cover[cover="area"] {
    position: absolute;
}
app-loader-cover app-loader {
    display: inline-block;
}
.app-loader-cover-label {
    display: none;
    margin-top: 2rem;
    font-weight: 200;
    font-size: 2rem;
}
app-loader-cover[label] .app-loader-cover-label {
    display: block;
}
app-scrollcontainer {
    display: block;
    overflow: auto;
}
html,
body {
    margin: 0;
    padding: 0;
}
html {

    /* prevent adjustments of font size after orientation changes on some mobile devices */
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: var(--kiss-base-background-color, #fff);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-size: var(--kiss-base-font-size, 16px);
    line-height: var(--kiss-base-line-height, 1.5);
    color: var(--kiss-base-text-color, #000);
}
*,
*::before,
*::after {
    box-sizing: inherit;
}
body {
    font-family: var(--kiss-base-font-family, -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif);
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 var(--kiss-heading-margin-bottom, .8em);
    padding: 0;
    font-family: var(--kiss-heading-font-family, inherit);
    font-weight: var(--kiss-heading-font-weight, var(--kiss-font-weight-medium, bold));
    line-height: var(--kiss-heading-line-height, 1.2);
}
a {
  text-decoration: var(--kiss-link-text-decoration, none);
  -webkit-text-decoration-skip: objects;
  color: var(--kiss-link-color, var(--kiss-color-primary, hsl(210, 100%, 50%)));
  transition: color var(--kiss-speed, 0.1s) var(--kiss-easing, ease-out);
  cursor: pointer;
}
a:hover {
    color: var(--kiss-link-hover-color, hsl(210, 100%, 25%));
}
a:focus {
    outline: none;
    color: var(--kiss-link-focus-color, hsl(210, 100%, 25%));
}
a:focus-visible {
    box-shadow: 0 0 0 var(--kiss-outline-width, .2rem) var(--kiss-outline-color, hsl(210, 100%, 85%));
}
a:active {
    color: var(--kiss-link-active-color, hsl(210, 100%, 25%));
}
img,
canvas,
svg,
audio,
video {
  border-style: none;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}
img { display: block; }
svg:not(:root) {
  overflow: hidden;
}
iframe {
  margin: 0;
  padding: 0;
  border: 0;
}
p {
    margin: 0 0 var(--kiss-block-element-margin, 1rem);
    padding: 0;
}
hr {
    box-sizing: content-box;
    height: var(--kiss-hr-height, 1px);
    overflow: visible;
    margin-top: var(--kiss-block-element-margin, 1rem);
    margin-bottom: var(--kiss-block-element-margin, 1rem);
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    border: 0;
    background-color: var(--kiss-hr-color, rgba(0,0,0,.1));
}
table {
    width: 100%;
    max-width: 100%;
    margin: 0 0 var(--kiss-block-element-margin, 1rem);
    border-collapse: collapse;
    border-spacing: 0;
}
th,
td {
    padding: var(--kiss-table-cell-padding-vertical, 0.5rem) var(--kiss-table-cell-padding-horizontal, 0.75rem);
    text-align: inherit;
    vertical-align: top;
}
th {
    background-color: var(--kiss-table-heading-background-color, transparent);
    font-weight: var(--kiss-table-heading-font-weight, bold);
    color: var(--kiss-table-heading-color, #000);
}
::-moz-selection {
    background-color: var(--kiss-selection-background-color, hsl(210, 100%, 90%));
    text-shadow: none;
}
::selection {
    background-color: var(--kiss-selection-background-color, hsl(210, 100%, 90%));
    text-shadow: none;
}
template { display: none; }
kiss-accordion {
    display: block;
}
kiss-accordion > kiss-content {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-in-out;
}
kiss-accordion-trigger {
    display: block;
    cursor: pointer;
    font-weight: var(--kiss-accordion-trigger-font-weight, bold);
}
kiss-accordion-trigger[active="true"] + kiss-content {
    max-height: 100vh;
}
.kiss-button {
    margin: 0;
    border: none;
    overflow: visible;
    font: inherit;
    font-weight: bold;
    color: inherit;
    text-transform: none;
    display: inline-block;
    box-sizing: border-box;
    padding: 0 var(--kiss-button-padding, 2.5em);
    vertical-align: middle;
    font-size: .65em;
    line-height: var(--kiss-button-default-line-height, 4.5em);
    letter-spacing: .1em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    background-color: var(--kiss-button-default-background, rgba(0,0,0,.5));
    border: 1px var(--kiss-button-default-background, rgba(0,0,0,.5)) solid;
    color: var(--kiss-button-default-color, #fff);
}
.kiss-button:hover,
.kiss-button:focus {
    color: inherit;
}
.kiss-button-outline {
    background: rgba(0, 0, 0, 0);
    border: var(--kiss-button-outline-width, 1px) currentColor solid;
    color: currentColor;
}
.kiss-button-blank {
    background: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0);
    color: currentColor;
}
.kiss-button:not(:disabled) { cursor: pointer; }
.kiss-button:disabled {
    opacity: .6;
}
.kiss-button:hover {
    text-decoration: none;
}
.kiss-button-primary {
    background-color: var(--kiss-button-primary-background, hsl(210, 100%, 50%));
    border-color: var(--kiss-button-primary-background, hsl(210, 100%, 50%));
    color: var(--kiss-button-primary-color, #fff);
}
.kiss-button-primary:hover,
.kiss-button-primary:focus {
    background-color: var(--kiss-button-primary-background-hover, var(--kiss-button-primary-background, hsl(210, 100%, 50%)));
    border-color: var(--kiss-button-primary-background-hover, var(--kiss-button-primary-background, hsl(210, 100%, 50%)));
    color: var(--kiss-button-primary-color-hover, var(--kiss-button-primary-color, #fff));
}
.kiss-button-primary:active,
.kiss-button-primary.kiss-active {
    background-color: var(--kiss-button-primary-background-active, var(--kiss-button-primary-background, hsl(210, 100%, 50%)));
    border-color: var(--kiss-button-primary-background-active, var(--kiss-button-primary-background, hsl(210, 100%, 50%)));
    color: var(--kiss-button-primary-color-active, var(--kiss-button-primary-color, #fff));
}
.kiss-button-danger {
    background-color: var(--kiss-button-danger-background, red);
    border-color: var(--kiss-button-danger-background, red);
    color: var(--kiss-button-danger-color, #fff);
}
.kiss-button-danger:hover,
.kiss-button-danger:focus {
    background-color: var(--kiss-button-danger-background-hover, var(--kiss-button-danger-background, red));
    border-color: var(--kiss-button-danger-background-hover, var(--kiss-button-danger-background, red));
    color: var(--kiss-button-danger-color-hover, var(--kiss-button-danger-color, #fff));
}
.kiss-button-danger:active,
.kiss-button-danger.kiss-active {
    background-color: var(--kiss-button-danger-background-active, var(--kiss-button-danger-background, red));
    border-color: var(--kiss-button-danger-background-active, var(--kiss-button-danger-background, red));
    color: var(--kiss-button-danger-color-active, var(--kiss-button-danger-color, #fff));
}
.kiss-button-large {
    padding: 0 var(--kiss-button-large-padding-horizontal, 5em);
    line-height: var(--kiss-button-large-line-height, 5em);
}
.kiss-button-small {
    padding: 0 var(--kiss-button-small-padding-horizontal, 2em);
    line-height: var(--kiss-button-small-line-height, 4em);
    font-size: var(--kiss-button-small-font-size, .5em);
}
.kiss-badge {
    display: inline-flex;
    box-sizing: border-box;
    font-size: .6em;
    padding: .2em .4em;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
    min-width: 20px;
    background: var(--kiss-badge-bgcolor, var(--kiss-color-primrary, hsl(210, 100%, 50%)));
    border: .1em var(--kiss-badge-bgcolor, var(--kiss-color-primrary, hsl(210, 100%, 50%))) solid;
    color: var(--kiss-badge-color, #fff) !important;
    font-weight: bold;
}
.kiss-badge-outline {
    background: none;
    background-color: transparent;
    border-color: currentColor;
    color: currentColor !important;
}
.kiss-breadcrumbs {
    padding: 0;
    list-style: none;
}
.kiss-breadcrumbs > * {
    display: contents;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kiss-breadcrumbs > * > * {
    font-size: var(--kiss-breadcrumbs-size, 85%);
    color: var(--kiss-breadcrumbs-color, inherit);
}
.kiss-breadcrumbs > :nth-child(n+2)::before {
    content: var(--kiss-breadcrumbs-divider, "-");
    display: inline-block;
    margin: 0 var(--kiss-breadcrumbs-divider-margin-horizontal, 5px);
    font-size: var(--kiss-breadcrumbs-divider-size, var(--kiss-breadcrumbs-size, 85%));
    color: var(--kiss-breadcrumbs-divider-color, inherit);
}
kiss-card {
    display: block;
    position: relative;
}
kiss-card[theme*="shadowed"] {
    box-shadow: 0 1px 2px 0 var(--kiss-card-shadowed-color, rgba(0,0,0,0.22));
}
kiss-card[theme*="bordered"] {
    border: 1px solid var(--kiss-card-bordered-color, rgba(0,0,0,0.22));
}
kiss-card[hover] {
    transition: all 250ms;
    z-index: 2;
}
kiss-card[hover]:hover {
    z-index: 3;
}
kiss-card[hover*="shadow"]:hover {
    box-shadow: 0 25px 80px rgba(0,0,0,0.12), 0 3px 12px rgba(0,0,0,0.05);
}
kiss-carousel,
kiss-slides {
    display: block;
    position: relative;
}
kiss-slides {
    overflow: hidden;
}
kiss-slide {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
}
kiss-slide.active {
    pointer-events: auto;
    opacity: 1;
}
kiss-slide.visible {
    opacity: 1;
}
[kiss-slide] {
    user-select: none;
    -webkit-user-select: none;
}
[kiss-container],
kiss-container {
    display: block;
    padding-left: var(--kiss-container-padding, 30px);
    padding-right: var(--kiss-container-padding, 30px);
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
    max-width: var(--kiss-container-max-width, 1200px);
}
[kiss-container="small"],
kiss-container[size="small"] {
    max-width: var(--kiss-container-small-max-width, 900px);
}
[kiss-container="large"],
kiss-container[size="large"] {
    max-width: var(--kiss-container-large-max-width, 1600px);
}
[kiss-container="expand"],
kiss-container[size="expand"] {
    max-width: 100%;
}
kiss-container::before,
kiss-container::after {
    content: "";
    display: table;
}
kiss-container kiss-container {
    padding-left: 0;
    padding-right: 0;
}
kiss-dropdown {
    position: relative;
    display: inline-block;
}
kiss-dropdownbox {
    position: absolute;
    min-width: 200px;
    top: 100%;
    left: auto;
    right: 0;
    opacity: 0;
    pointer-events: none;
}
kiss-dropdown[open="true"] kiss-dropdownbox {
    display: block;
    opacity: 1;
    transform: translateY(10px);
    pointer-events: auto;
}
kiss-dropdownbox {
    background: var(--kiss-dropdown-background, var(--kiss-color-contrast));
    border-radius: var(--kiss-dropdown-border-radius, 3px);
    padding: var(--kiss-dropdown-padding, 10px);
    left: auto;
    right: 0;
    margin-top: 10px;
    min-width: 250px;
    transform: translateY(20px);
    transition: all 200ms;
    z-index: 5;
}
kiss-dropdownbox[pos="left"] {
    left: 0;
    right: auto;
}
kiss-dropdownbox[pos="center"] {
    right: auto;
    left: 50%;
    transform: translateY(-40%) translateX(-50%);
}
kiss-dropdown[open="true"] kiss-dropdownbox[pos="center"] {
    transform: translateY(-50%) translateX(-50%);
}
kiss-dropdownbox[pos="aside-left"] {
    top: 0;
    left: 0;
    margin-top: 0;
    margin-left: -10px;
    transform: translateY(20px) translateX(-100%);
    right: auto;
}
kiss-dropdown[open="true"] kiss-dropdownbox[pos="aside-left"] {
    transform: translateY(0px) translateX(-100%);
}
kiss-dialog {
    display: flex;
    align-items: flex-start;
    position: fixed;
    background: var(--kiss-dialog-background, rgba(0,0,0,.1));
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    touch-action: none;
    opacity: 0;
    pointer-events: none;
    overflow-y: auto;
    transform: translateZ(0);
    will-change: opacity;
    z-index: var(--kiss-dialog-zIndex, 1000);
}
kiss-dialog > kiss-content {
    position: relative;
    display: flow-root;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;

    padding: var(--kiss-dialog-content-spacing, 10px);

    background: var(--kiss-dialog-content-background, #fff);
    color: var(--kiss-dialog-content-color, inherit);

    width: var(--kiss-dialog-width, 350px);
    max-width: calc(100% - 0.01px) !important;

    transform: translateZ(0);

    box-sizing: border-box;
}
kiss-dialog[size="medium"] > kiss-content {
    width: var(--kiss-dialog-medium-width, 500px);
}
kiss-dialog[size="large"] > kiss-content {
    width: var(--kiss-dialog-large-width, 600px);
}
kiss-dialog[size="xlarge"] > kiss-content {
    width: var(--kiss-dialog-xlarge-width, 1200px);
}
kiss-dialog[open] {
    opacity: 1;
    pointer-events: auto;
}
kiss-grid {
    --grid-gap: var(--kiss-grid-gap, 20px);
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: 1fr;
    gap: var(--grid-gap);
}
kiss-grid > * {
    min-width: 0;
}
/*
 * Small
 */
kiss-grid[gap="small"] {
    --grid-gap: var(--kiss-grid-gap-small, 10px);
}
/*
 * Large
 */
kiss-grid[gap="large"] {
    --grid-gap: var(--kiss-grid-gap-large, 3vw);
}
/*
 * xLarge
 */
kiss-grid[gap="xlarge"] {
    --grid-gap: var(--kiss-grid-gap-xlarge, 5vw);
}
kiss-grid[gap="none"] {
    --grid-gap: 0;
}
kiss-grid[cols="2"] { grid-template-columns: repeat(2, 1fr); }
kiss-grid[cols="3"] { grid-template-columns: repeat(3, 1fr); }
kiss-grid[cols="4"] { grid-template-columns: repeat(4, 1fr); }
kiss-grid[cols="5"] { grid-template-columns: repeat(5, 1fr); }
kiss-grid[cols="6"] { grid-template-columns: repeat(6, 1fr); }
kiss-grid[cols="8"] { grid-template-columns: repeat(8, 1fr); }
kiss-grid[cols="10"] { grid-template-columns: repeat(10, 1fr); }
/* Phone landscape and bigger */
@media (max-width: 960px) {

    kiss-grid[cols*="2@s"] { grid-template-columns: repeat(2, 1fr); }
    kiss-grid[cols*="3@s"] { grid-template-columns: repeat(3, 1fr); }
    kiss-grid[cols*="4@s"] { grid-template-columns: repeat(4, 1fr); }
    kiss-grid[cols*="5@s"] { grid-template-columns: repeat(5, 1fr); }
    kiss-grid[cols*="6@s"] { grid-template-columns: repeat(6, 1fr); }
    kiss-grid[cols*="8@s"] { grid-template-columns: repeat(8, 1fr); }
    kiss-grid[cols*="10@s"] { grid-template-columns: repeat(10, 1fr); }

}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
    kiss-grid[cols*="2@m"] { grid-template-columns: repeat(2, 1fr); }
    kiss-grid[cols*="3@m"] { grid-template-columns: repeat(3, 1fr); }
    kiss-grid[cols*="4@m"] { grid-template-columns: repeat(4, 1fr); }
    kiss-grid[cols*="5@m"] { grid-template-columns: repeat(5, 1fr); }
    kiss-grid[cols*="6@m"] { grid-template-columns: repeat(6, 1fr); }
    kiss-grid[cols*="8@m"] { grid-template-columns: repeat(8, 1fr); }
    kiss-grid[cols*="10@m"] { grid-template-columns: repeat(10, 1fr); }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
    kiss-grid[cols*="2@l"] { grid-template-columns: repeat(2, 1fr); }
    kiss-grid[cols*="3@l"] { grid-template-columns: repeat(3, 1fr); }
    kiss-grid[cols*="4@l"] { grid-template-columns: repeat(4, 1fr); }
    kiss-grid[cols*="5@l"] { grid-template-columns: repeat(5, 1fr); }
    kiss-grid[cols*="6@l"] { grid-template-columns: repeat(6, 1fr); }
    kiss-grid[cols*="8@l"] { grid-template-columns: repeat(8, 1fr); }
    kiss-grid[cols*="10@l"] { grid-template-columns: repeat(10, 1fr); }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
    kiss-grid[cols*="2@xl"] { grid-template-columns: repeat(2, 1fr); }
    kiss-grid[cols*="3@xl"] { grid-template-columns: repeat(3, 1fr); }
    kiss-grid[cols*="4@xl"] { grid-template-columns: repeat(4, 1fr); }
    kiss-grid[cols*="5@xl"] { grid-template-columns: repeat(5, 1fr); }
    kiss-grid[cols*="6@xl"] { grid-template-columns: repeat(6, 1fr); }
    kiss-grid[cols*="8@xl"] { grid-template-columns: repeat(8, 1fr); }
    kiss-grid[cols*="10@xl"] { grid-template-columns: repeat(10, 1fr); }
}
kiss-navlist {
    display: block;
}
kiss-navlist ul {
    margin: 0;
    padding: 0;
    font-size: var(--kiss-navlist-font-size, inherit);
    list-style: none;
}
kiss-navlist ul > li > * {
    display: block;
    text-decoration: none;
    font-size: inherit;
    padding: var(--kiss-navlist-padding-vertical, 5px) var(--kiss-navlist-padding-horizontal, 0);
    line-height: 1;
}
.kiss-nav-header {
    padding: var(--kiss-navlist-padding-vertical, 5px) var(--kiss-navlist-padding-horizontal, 0);
    text-transform: uppercase;
    font-size: .8em;
    font-weight: bold;
    letter-spacing: .1em;
}
.kiss-nav-divider {
    margin: var(--kiss-navlist-padding-vertical, 5px) var(--kiss-navlist-padding-horizontal, 0);
    border-top: 1px solid var(--kiss-navlist-divider-color, var(--kiss-hr-color, rgba(0,0,0,.1)));
}
kiss-offcanvas {
    display: block;
    position: fixed;
    background: var(--kiss-offcanvas-background, rgba(0,0,0,.1));
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    touch-action: none;
    opacity: 0;
    pointer-events: none;
    transform: translateZ(0);
    will-change: opacity;
    z-index: var(--kiss-offcanvas-zIndex, 1000);
}
kiss-offcanvas > kiss-content {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--kiss-offcanvas-content-background, #000);
    color: var(--kiss-offcanvas-content-color,  #fff);
    min-width: 300px;
    overflow-y: auto;
    box-sizing: border-box;
    transform: translateX(-100%) translateZ(0);
    transition: transform 0.3s ease-in-out;
}
kiss-offcanvas[flip="true"] > kiss-content {
    right: 0;
    transform: translateX(100%) translateZ(0);
}
kiss-offcanvas[open] {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease-in-out;
}
kiss-offcanvas[open] > kiss-content {
    transform: translateX(0) translateZ(0);
}
kiss-popout {
    display: flex;
    align-items: flex-start;
    position: fixed;
    background: var(--kiss-popout-background, rgba(0,0,0,.1));
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    touch-action: none;
    opacity: 0;
    pointer-events: none;
    overflow-y: auto;
    transform: translateZ(0);
    will-change: opacity;
    transition: opacity .3s;
    z-index: var(--kiss-popout-zIndex, 1000);
}
kiss-popout > kiss-content {
    position: relative;
    display: flow-root;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;

    padding: var(--kiss-popout-content-spacing, 15px);

    background: var(--kiss-popout-content-background, #fff);
    color: var(--kiss-popout-content-color, inherit);

    min-width: var(--kiss-popout-width, 250px);
    max-width: calc(100% - 0.01px) !important;

    box-sizing: border-box;

    transform: translateY(20px);
    transition: all 200ms;
}
kiss-popout[size="large"] > kiss-content {
    width: var(--kiss-popout-large-width, 600px);
}
kiss-popout[open] {
    opacity: 1;
    pointer-events: auto;
}
kiss-popout[open] > kiss-content {
    transform: translateY(10px);
}
kiss-popout kiss-navlist a {
    color: var(--kiss-popout-color, inherit);
}
kiss-popout kiss-navlist a:hover {
    color: var(--kiss-popout-color-hover, inherit);
}
kiss-row {
    --row-gap: var(--kiss-row-gap, 20px);
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: var(--row-gap);
}
kiss-row > * {
    margin: 0;
}
kiss-row > * > :last-child { margin-bottom: 0; }
/*
 * Small
 */
kiss-row[gap="small"] {
    --row-gap: var(--kiss-row-gap-small, 10px);
}
/*
 * Large
 */
kiss-row[gap="large"] {
    --row-gap: var(--kiss-row-gap-large, 3vw);
}
/*
 * xLarge
 */
kiss-row[gap="xlarge"] {
    --row-gap: var(--kiss-row-gap-xlarge, 5vw);
}
kiss-row[gap="none"] {
    --row-gap: 0px;
}
kiss-row[match] > *,
.kiss-row-item-match {
    display: flex;
    flex-wrap: wrap;
}
kiss-row[match] > * > :not([class*='kiss-width']),
.kiss-row-item-match > :not([class*='kiss-width']) {
    box-sizing: border-box;
    width: 100%;
    flex: auto;
}
kiss-parallax {
    display: block;
}
kiss-sticky {
    display: block;
    position: -webkit-sticky;
    position: sticky;
}
kiss-svg {
    display: block;
}
kiss-svg[inline] {
    display: inline-block;
}
kiss-svg > svg,
kiss-svg:not([preserve]) [fill*='#']:not(.kiss-preserve) { fill: currentcolor; }
kiss-svg:not([preserve]) [stroke*='#']:not(.kiss-preserve) { stroke: currentcolor; }
/*
 * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
 */
kiss-svg > svg { transform: translate(0,0); }
kiss-tabs {
    display: block;
}
kiss-tabs tab {
    display: none;
}
kiss-tabs tab[active="true"] {
    display: block;
}
.kiss-tabs-nav {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}
.kiss-tabs-nav-link:hover {
    color: inherit;
}
.kiss-tabs-nav-link {
    display: block;
    position: relative;
    font-size: .8em;
    line-height: inherit;
    letter-spacing: .015em;
    text-decoration: none;
    color: inherit;
    padding: 8px 12px;
    opacity: .5;
}
[active="true"] > .kiss-tabs-nav-link {
    opacity: 1;
    color: var(--kiss-tabs-active-color, inherit);
    font-weight: bold;
}
[active="true"] > .kiss-tabs-nav-link:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    border-bottom: 1px currentColor solid;
}
.kiss-tabs-nav-link > * {
    pointer-events: none;
}
kiss-tooltip {
    display: block;
    position:fixed;
    z-index: 100000;
    pointer-events: none;
    opacity: 0;

    font-size: var(--kiss-tooltip-fontsize, 12px);
    background: var(--kiss-tooltip-bgcolor, #000);
    color: var(--kiss-tooltip-color, #fff);
    padding: var(--kiss-tooltip-padding, 5px 10px);
    max-width: var(--kiss-tooltip-maxwidth, 200px);
    font-weight: bold;
    transition: opacity 300ms;
}
kiss-tooltip[show="true"] {
    opacity: 1;
}
.kiss-color-primary { color: var(--kiss-color-primary, blue) !important; }
.kiss-color-success { color: var(--kiss-color-success, green) !important; }
.kiss-color-danger { color: var(--kiss-color-danger, red) !important; }
.kiss-color-warning { color: var(--kiss-color-warning, orange) !important; }
.kiss-color-muted { color: var(--kiss-color-muted, #6d6f79) !important; }
.kiss-color-contrast { color: var(--kiss-color-contrast, #fff) !important; }
.kiss-color-alternate { color: var(--kiss-color-alternate, var(--kiss-color-contrast)) !important; }
.kiss-bgcolor-primary { background-color: var(--kiss-color-primary, blue) !important; }
.kiss-bgcolor-success { background-color: var(--kiss-color-success, green) !important; }
.kiss-bgcolor-danger { background-color: var(--kiss-color-danger, red) !important; }
.kiss-bgcolor-warning { background-color: var(--kiss-color-warning, orange) !important; }
.kiss-bgcolor-muted { background-color: var(--kiss-color-muted, #6d6f79) !important; }
.kiss-bgcolor-contrast { background-color: var(--kiss-color-contrast, #fff) !important; }
.kiss-bgcolor-transparent {
    background: rgba(0,0,0,0) !important;
    background-color: rgba(0,0,0,0) !important;
}
.kiss-input,
.kiss-select,
.kiss-textarea,
.kiss-radio,
.kiss-checkbox {
    box-sizing: border-box;
    margin: 0;
    border-radius: 0;
    font: inherit;
}
.kiss-input { overflow: visible; }
.kiss-select { text-transform: none; }
.kiss-select optgroup {
    font: inherit;
    font-weight: bold;
}
.kiss-textarea { overflow: auto; }
.kiss-input[type="search"]::-webkit-search-cancel-button,
.kiss-input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
.kiss-input[type="number"]::-webkit-inner-spin-button,
.kiss-input[type="number"]::-webkit-outer-spin-button { height: auto; }
.kiss-input::-moz-placeholder,
.kiss-textarea::-moz-placeholder { opacity: 1; }
.kiss-radio:not(:disabled),
.kiss-checkbox:not(:disabled) { cursor: pointer; }
.kiss-fieldset {
    border: none;
    margin: 0;
    padding: 0;
}
.kiss-input-blank {
    background: none !important;
    border: none !important;
    color: inherit !important;
}
.kiss-input,
.kiss-textarea { -webkit-appearance: none; }
.kiss-input,
.kiss-select,
.kiss-textarea {
    max-width: 100%;
    width: 100%;
    border: 0 none;
    padding: 0 var(--kiss-form-padding-horizontal, 10px);
    background: 0 var(--kiss-form-background, #fff);
    color: var(--kiss-form-color, inherit);
}
.kiss-input,
.kiss-select:not([multiple]):not([size]) {
    height: var(--kiss-form-height);
    vertical-align: middle;
    display: inline-block;
}
.kiss-select[multiple],
.kiss-select[size],
.kiss-textarea {
    padding-top: var(--kiss-form-padding-vertical, 4px);
    padding-bottom: var(--kiss-form-padding-vertical, 4px);
    vertical-align: top;
}
.kiss-input[seamless="true"] {
    background: none !important;
    border: none !important;
    color: inherit;
}
/* Focus */
.kiss-input:focus,
.kiss-select:focus,
.kiss-textarea:focus {
    outline: none;
}
.kiss-input::-ms-input-placeholder { color: var(--kiss-form-placeholder-color) !important;}
.kiss-input::placeholder { color: var(--kiss-form-placeholder-color);}
.kiss-textarea::-ms-input-placeholder { color: var(--kiss-form-placeholder-color) !important;}
.kiss-textarea::placeholder { color: var(--kiss-form-placeholder-color);}
.kiss-form-large { font-size: var(--kiss-form-large-font-size);}
.kiss-form-large:not(textarea):not([multiple]):not([size]) {
    height: var(--kiss-form-large-height);
    padding-left: var(--kiss-form-large-padding-horizontal);
    padding-right: var(--kiss-form-large-padding-horizontal);
}
.kiss-form-large:not(select):not(input):not(textarea) { line-height: var(--kiss-form-large-line-height);}
.kiss-form-danger,
.kiss-form-danger:focus {
    color: var(--kiss-form-danger-color, red);
}
.kiss-form-success,
.kiss-form-success:focus  {
    color: var(--kiss-form-success-color, green);
}
.kiss-form-blank {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: none;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
}
.kiss-legend {
    width: 100%;
    color: inherit;
    padding: 0;
    font-size: var(--kiss-form-legend-font-size, 1rem);
    line-height: var(--kiss-form-legend-line-height, 1.4);
}
.kiss-overlay-input {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
}
.kiss-overlay-input select,
.kiss-overlay-input input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    z-index: 1;
}
.kiss-section {
    padding-top: var(--kiss-section-padding, 3vh);
    padding-bottom: var(--kiss-section-padding, 3vh);
}
.kiss-section-large {
    padding-top: calc(2 * var(--kiss-section-large-padding, 3vh));
    padding-bottom: calc(2 * var(--kiss-section-large-padding, 3vh));
}
.kiss-section-xlarge {
    padding-top: calc(4 * var(--kiss-section-large-padding, 3vh));
    padding-bottom: calc(4 * var(--kiss-section-large-padding, 3vh));
}
.kiss-flex {
    display: flex !important;
    gap: var(--kiss-flex-gap, 0);
}
.kiss-flex-inline {
    display: inline-flex !important;
    gap: var(--kiss-flex-gap, 0);
}
.kiss-flex::before,
.kiss-flex::after,
.kiss-flex-inline::before,
.kiss-flex-inline::after { display: none; }
.kiss-flex-left { justify-content: flex-start; }
.kiss-flex-center { justify-content: center; }
.kiss-flex-right { justify-content: flex-end; }
.kiss-flex-between { justify-content: space-between; }
.kiss-flex-around { justify-content: space-around; }
.kiss-flex-stretch { align-items: stretch; }
.kiss-flex-top { align-items: flex-start; }
.kiss-flex-middle { align-items: center; }
.kiss-flex-bottom { align-items: flex-end; }
.kiss-flex-row { flex-direction: row; }
.kiss-flex-row-reverse { flex-direction: row-reverse; }
.kiss-flex-column { flex-direction: column; }
.kiss-flex-column-reverse { flex-direction: column-reverse; }
.kiss-flex-nowrap { flex-wrap: nowrap; }
.kiss-flex-wrap { flex-wrap: wrap; }
.kiss-flex-wrap-reverse { flex-wrap: wrap-reverse; }
.kiss-flex-wrap-stretch { align-content: stretch; }
.kiss-flex-wrap-top { align-content: flex-start; }
.kiss-flex-wrap-middle { align-content: center; }
.kiss-flex-wrap-bottom { align-content: flex-end; }
.kiss-flex-wrap-between { align-content: space-between; }
.kiss-flex-wrap-around { align-content: space-around; }
.kiss-flex-first { order: -1;}
.kiss-flex-last { order: 99;}
.kiss-flex[gap],
.kiss-flex-inline[gap] { --kiss-flex-gap: var(--kiss-block-element-margin, 1rem); }
.kiss-flex[gap="none"],
.kiss-flex-inline[gap="none"] { --kiss-flex-gap: 0;}
.kiss-flex[gap="xsmall"],
.kiss-flex-inline[gap="xsmall"] { --kiss-flex-gap: var(--kiss-block-element-margin-xsmall, 4px);}
.kiss-flex[gap="small"],
.kiss-flex-inline[gap="small"] { --kiss-flex-gap: var(--kiss-block-element-margin-small, .6rem);}
.kiss-flex[gap="large"],
.kiss-flex-inline[gap="large"] { --kiss-flex-gap: var(--kiss-block-element-margin-large, 3rem);}
/* Phone landscape and bigger */
@media (min-width: 640px) {

    .kiss-flex-first\@s { order: -1; }
    .kiss-flex-last\@s { order: 99; }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {

    .kiss-flex-first\@m { order: -1; }
    .kiss-flex-last\@m { order: 99; }
}
/* Desktop and bigger */
@media (min-width: 1200px) {

    .kiss-flex-first\@l { order: -1; }
    .kiss-flex-last\@l { order: 99; }
}
/* Large screen and bigger */
@media (min-width: 1600px) {

    .kiss-flex-first\@xl { order: -1; }
    .kiss-flex-last\@xl { order: 99; }
}
.kiss-flex-none { flex: none; }
.kiss-flex-auto { flex: auto; }
.kiss-flex-1 {
    flex-grow: 1;
    min-width: 0;
    min-height: 0;
    flex-basis: 0;
}
.kiss-align-center {
  text-align: center !important;
}
.kiss-align-justified {
  text-align: justify !important;
}
.kiss-align-left {
  text-align: left !important;
}
.kiss-align-right {
  text-align: right !important;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .kiss-align-center\@s { text-align: center !important; }
  .kiss-align-justified\@s { text-align: justify !important; }
  .kiss-align-left\@s { text-align: left !important; }
  .kiss-align-right\@s { text-align: right !important; }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .kiss-align-center\@m { text-align: center !important; }
  .kiss-align-justified\@m { text-align: justify !important; }
  .kiss-align-left\@m { text-align: left !important; }
  .kiss-align-right\@m { text-align: right !important; }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  .kiss-align-center\@l { text-align: center !important; }
  .kiss-align-justified\@l { text-align: justify !important; }
  .kiss-align-left\@l { text-align: left !important; }
  .kiss-align-right\@l { text-align: right !important; }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
  .kiss-align-center\@xl { text-align: center !important; }
  .kiss-align-justified\@xl { text-align: justify !important; }
  .kiss-align-left\@xl { text-align: left !important; }
  .kiss-align-right\@xl { text-align: right !important; }
}
.kiss-position-absolute { position: absolute; }
.kiss-position-relative { position: relative; }
.kiss-position-fixed { position: fixed; }
.kiss-position-absolute[center] {
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
}
.kiss-position-top-left {
    position: absolute;
    top: 0;
    left: 0;
}
.kiss-position-top-right {
    position: absolute;
    top: 0;
    right: 0;
}
.kiss-position-bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
}
.kiss-position-bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
}
h1,
.kiss-size-1 {
  font-size: var(--kiss-font-size-1, 2.5rem);
  line-height: 1.2;
}
h2,
.kiss-size-2 {
  font-size: var(--kiss-font-size-2, 2rem);
  line-height: 1.2;
}
h3,
.kiss-size-3 {
  font-size: var(--kiss-font-size-3, 1.75rem);
  line-height: 1.2;
}
h4,
.kiss-size-4 {
  font-size: var(--kiss-font-size-4, 1.5rem);
  line-height: 1.2;
}
h5,
.kiss-size-5 {
  font-size: var(--kiss-font-size-5, 1rem);
}
h6,
.kiss-size-6 {
  font-size: var(--kiss-font-size-6, 0.875rem);
}
.kiss-size-large {
  font-size: var(--kiss-font-size-large, var(--kiss-font-size-4, 1.5rem));
  line-height: 1.25;
}
.kiss-size-xlarge {
  font-size: var(--kiss-font-size-xlarge, 3.5rem);
  line-height: 1.25;
}
small,
.kiss-size-small {
  font-size: var(--kiss-font-size-small, var(--kiss-font-size-6, 0.875rem));
}
.kiss-size-xsmall {
  font-size: var(--kiss-font-size-xsmall, 11px);
}
/**
 * margins
 */
* + .kiss-margin,
.kiss-margin-top {
    margin-top: var(--kiss-block-element-margin, 1rem) !important;
}
.kiss-margin:not(:last-child),
.kiss-margin-bottom {
    margin-bottom: var(--kiss-block-element-margin, 1rem) !important;
}
.kiss-margin-left {
    margin-left: var(--kiss-block-element-margin, 1rem) !important;
}
.kiss-margin-right {
    margin-right: var(--kiss-block-element-margin, 1rem) !important;
}
* + .kiss-margin-small,
.kiss-margin-small-top {
    margin-top: var(--kiss-block-element-margin-small, .6rem) !important;
}
.kiss-margin-small:not(:last-child),
.kiss-margin-small-bottom {
    margin-bottom: var(--kiss-block-element-margin-small, .6rem) !important;
}
.kiss-margin-small-left {
    margin-left: var(--kiss-block-element-margin-small, .6rem) !important;
}
.kiss-margin-small-right {
    margin-right: var(--kiss-block-element-margin-small, .6rem) !important;
}
* + .kiss-margin-xsmall,
.kiss-margin-xsmall-top {
    margin-top: var(--kiss-block-element-margin-xsmall, 4px) !important;
}
.kiss-margin-xsmall:not(:last-child),
.kiss-margin-xsmall-bottom {
    margin-bottom: var(--kiss-block-element-margin-xsmall, 4px) !important;
}
.kiss-margin-xsmall-left {
    margin-left: var(--kiss-block-element-margin-xsmall, 4px) !important;
}
.kiss-margin-xsmall-right {
    margin-right: var(--kiss-block-element-margin-xsmall, 4px) !important;
}
* + .kiss-margin-large,
.kiss-margin-large-top {
    margin-top: var(--kiss-block-element-margin-large, 3rem) !important;
}
.kiss-margin-large:not(:last-child),
.kiss-margin-large-bottom {
    margin-bottom: var(--kiss-block-element-margin-large, 3rem) !important;
}
.kiss-margin-large-left {
    margin-left: var(--kiss-block-element-margin-large, 3rem) !important;
}
.kiss-margin-large-right {
    margin-right: var(--kiss-block-element-margin-large, 3rem) !important;
}
.kiss-margin-remove { margin: 0 !important; }
.kiss-margin-remove-top { margin-top: 0 !important; }
.kiss-margin-remove-bottom { margin-bottom: 0 !important; }
.kiss-margin-remove-left { margin-left: 0 !important; }
.kiss-margin-remove-right { margin-right: 0 !important; }
.kiss-margin-remove-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.kiss-margin-remove-horizontal {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.kiss-margin-remove-adjacent + * { margin-top: 0 !important; }
.kiss-margin-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}
.kiss-margin-auto-top { margin-top: auto !important; }
.kiss-margin-auto-bottom { margin-bottom: auto !important; }
.kiss-margin-auto-left { margin-left: auto !important; }
.kiss-margin-auto-right { margin-right: auto !important; }
.kiss-margin-auto-vertical {
    margin-top: auto !important;
    margin-bottom: auto !important;
}
/**
 * paddings
 */
.kiss-padding { padding: var(--kiss-padding, 1rem); }
.kiss-padding-small { padding: var(--kiss-padding-small, .6rem); }
.kiss-padding-xsmall { padding: var(--kiss-padding-xsmall, .3rem); }
.kiss-padding-larger { padding: var(--kiss-padding-larger, 2rem); }
.kiss-padding-large { padding: var(--kiss-padding-large, 3rem); }
.kiss-padding-remove { padding: 0 !important; }
.kiss-padding-remove-top { padding-top: 0 !important; }
.kiss-padding-remove-bottom { padding-bottom: 0 !important; }
.kiss-padding-remove-left { padding-left: 0 !important; }
.kiss-padding-remove-right { padding-right: 0 !important; }
.kiss-padding-remove-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.kiss-padding-remove-horizontal {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.kiss-text-bold {
    font-weight: bold !important;
}
.kiss-text-light {
    font-weight: 100 !important;
}
.kiss-text-bolder {
    font-weight: bolder !important;
}
.kiss-text-normal {
    font-weight: normal !important;
}
.kiss-text-capitalize {
    text-transform: capitalize !important;
}
.kiss-text-upper {
    text-transform: uppercase !important;
}
.kiss-text-caption {
    font-size: .65em;
    line-height: inherit;
    letter-spacing: .015em;
    text-decoration: none;
    text-transform: uppercase;
}
.kiss-text-truncate {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
th.kiss-text-truncate,
td.kiss-text-truncate { max-width: 0; }
.kiss-text-pacing-loose {
    letter-spacing: .05em !important;
}
.kiss-text-pacing-looser {
    letter-spacing: .1em !important;
}
.kiss-text-monospace {
    font-family: ui-monospace,
    Menlo, Monaco,
    "Cascadia Mono", "Segoe UI Mono",
    "Roboto Mono",
    "Oxygen Mono",
    "Ubuntu Monospace",
    "Source Code Pro",
    "Fira Mono",
    "Droid Sans Mono",
    "Courier New", Courier, monospace;
}
.kiss-text-leading-normal { line-height: var(--kiss-base-line-height, 1.5) !important; }
.kiss-text-leading-tight { line-height: 1.25 !important; }
.kiss-text-leading-relaxed { line-height: 1.65 !important; }
.kiss-text-leading-loose { line-height: 2 !important; }
.kiss-text-leading-none { line-height: 1 !important; }
[class*='kiss-child-width'] > * {
    box-sizing: border-box;
    width: 100%;
}
.kiss-child-width-1-2 > * { width: 50%; }
.kiss-child-width-1-3 > * { width: calc(100% * 1 / 3.001); }
.kiss-child-width-1-4 > * { width: 25%; }
.kiss-child-width-1-5 > * { width: 20%; }
.kiss-child-width-1-6 > * { width: calc(100% * 1 / 6.001); }
.kiss-child-width-auto > * { width: auto; }
.kiss-child-width-expand > :not([class*='kiss-width']) {
    flex: 1;
    min-width: 1px;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {

    .kiss-child-width-1-1\@s > * { width: 100%; }
    .kiss-child-width-1-2\@s > * { width: 50%; }
    .kiss-child-width-1-3\@s > * { width: calc(100% * 1 / 3.001); }
    .kiss-child-width-1-4\@s > * { width: 25%; }
    .kiss-child-width-1-5\@s > * { width: 20%; }
    .kiss-child-width-1-6\@s > * { width: calc(100% * 1 / 6.001); }

    .kiss-child-width-auto\@s > * { width: auto; }
    .kiss-child-width-expand\@s > :not([class*='kiss-width']) {
        flex: 1;
        min-width: 1px;
    }

}
/* Tablet landscape and bigger */
@media (min-width: 960px) {

    .kiss-child-width-1-1\@m > * { width: 100%; }
    .kiss-child-width-1-2\@m > * { width: 50%; }
    .kiss-child-width-1-3\@m > * { width: calc(100% * 1 / 3.001); }
    .kiss-child-width-1-4\@m > * { width: 25%; }
    .kiss-child-width-1-5\@m > * { width: 20%; }
    .kiss-child-width-1-6\@m > * { width: calc(100% * 1 / 6.001); }

    .kiss-child-width-auto\@m > * { width: auto; }
    .kiss-child-width-expand\@m > :not([class*='kiss-width']) {
        flex: 1;
        min-width: 1px;
    }

}
/* Desktop and bigger */
@media (min-width: 1200px) {

    .kiss-child-width-1-1\@l > * { width: 100%; }
    .kiss-child-width-1-2\@l > * { width: 50%; }
    .kiss-child-width-1-3\@l > * { width: calc(100% * 1 / 3.001); }
    .kiss-child-width-1-4\@l > * { width: 25%; }
    .kiss-child-width-1-5\@l > * { width: 20%; }
    .kiss-child-width-1-6\@l > * { width: calc(100% * 1 / 6.001); }

    .kiss-child-width-auto\@l > * { width: auto; }
    .kiss-child-width-expand\@l > :not([class*='kiss-width']) {
        flex: 1;
        min-width: 1px;
    }

}
/* Large screen and bigger */
@media (min-width: 1600px) {

    .kiss-child-width-1-1\@xl > * { width: 100%; }
    .kiss-child-width-1-2\@xl > * { width: 50%; }
    .kiss-child-width-1-3\@xl > * { width: calc(100% * 1 / 3.001); }
    .kiss-child-width-1-4\@xl > * { width: 25%; }
    .kiss-child-width-1-5\@xl > * { width: 20%; }
    .kiss-child-width-1-6\@xl > * { width: calc(100% * 1 / 6.001); }

    .kiss-child-width-auto\@xl > * { width: auto; }
    .kiss-child-width-expand\@xl > :not([class*='kiss-width']) {
        flex: 1;
        min-width: 1px;
    }

}
[class*='kiss-width'] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}
/* Halves */
.kiss-width-1-2 { width: 50%; }
/* Thirds */
.kiss-width-1-3 { width: calc(100% * 1 / 3.001); }
.kiss-width-2-3 { width: calc(100% * 2 / 3.001); }
/* Quarters */
.kiss-width-1-4 { width: 25%; }
.kiss-width-3-4 { width: 75%; }
/* Fifths */
.kiss-width-1-5 { width: 20%; }
.kiss-width-2-5 { width: 40%; }
.kiss-width-3-5 { width: 60%; }
.kiss-width-4-5 { width: 80%; }
/* Sixths */
.kiss-width-1-6 { width: calc(100% * 1 / 6.001); }
.kiss-width-5-6 { width: calc(100% * 5 / 6.001); }
/* Auto */
.kiss-width-auto { width: auto; }
/* Expand */
.kiss-width-expand {
    flex: 1;
    min-width: 1px;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {

    /* Whole */
    .kiss-width-1-1\@s { width: 100%; }

    /* Halves */
    .kiss-width-1-2\@s { width: 50%; }

    /* Thirds */
    .kiss-width-1-3\@s { width: calc(100% * 1 / 3.001); }
    .kiss-width-2-3\@s { width: calc(100% * 2 / 3.001); }

    /* Quarters */
    .kiss-width-1-4\@s { width: 25%; }
    .kiss-width-3-4\@s { width: 75%; }

    /* Fifths */
    .kiss-width-1-5\@s { width: 20%; }
    .kiss-width-2-5\@s { width: 40%; }
    .kiss-width-3-5\@s { width: 60%; }
    .kiss-width-4-5\@s { width: 80%; }

    /* Sixths */
    .kiss-width-1-6\@s { width: calc(100% * 1 / 6.001); }
    .kiss-width-5-6\@s { width: calc(100% * 5 / 6.001); }

    /* Auto */
    .kiss-width-auto\@s { width: auto; }

    /* Expand */
    .kiss-width-expand\@s {
        flex: 1;
        min-width: 1px;
    }

}
/* Tablet landscape and bigger */
@media (min-width: 960px) {

    /* Whole */
    .kiss-width-1-1\@m { width: 100%; }

    /* Halves */
    .kiss-width-1-2\@m { width: 50%; }

    /* Thirds */
    .kiss-width-1-3\@m { width: calc(100% * 1 / 3.001); }
    .kiss-width-2-3\@m { width: calc(100% * 2 / 3.001); }

    /* Quarters */
    .kiss-width-1-4\@m { width: 25%; }
    .kiss-width-3-4\@m { width: 75%; }

    /* Fifths */
    .kiss-width-1-5\@m { width: 20%; }
    .kiss-width-2-5\@m { width: 40%; }
    .kiss-width-3-5\@m { width: 60%; }
    .kiss-width-4-5\@m { width: 80%; }

    /* Sixths */
    .kiss-width-1-6\@m { width: calc(100% * 1 / 6.001); }
    .kiss-width-5-6\@m { width: calc(100% * 5 / 6.001); }

     /* Auto */
    .kiss-width-auto\@m { width: auto; }

    /* Expand */
    .kiss-width-expand\@m {
        flex: 1;
        min-width: 1px;
    }

}
/* Desktop and bigger */
@media (min-width: 1200px) {

    /* Whole */
    .kiss-width-1-1\@l { width: 100%; }

    /* Halves */
    .kiss-width-1-2\@l { width: 50%; }

    /* Thirds */
    .kiss-width-1-3\@l { width: calc(100% * 1 / 3.001); }
    .kiss-width-2-3\@l { width: calc(100% * 2 / 3.001); }

    /* Quarters */
    .kiss-width-1-4\@l { width: 25%; }
    .kiss-width-3-4\@l { width: 75%; }

    /* Fifths */
    .kiss-width-1-5\@l { width: 20%; }
    .kiss-width-2-5\@l { width: 40%; }
    .kiss-width-3-5\@l { width: 60%; }
    .kiss-width-4-5\@l { width: 80%; }

    /* Sixths */
    .kiss-width-1-6\@l { width: calc(100% * 1 / 6.001); }
    .kiss-width-5-6\@l { width: calc(100% * 5 / 6.001); }

    /* Auto */
    .kiss-width-auto\@l { width: auto; }

    /* Expand */
    .kiss-width-expand\@l {
        flex: 1;
        min-width: 1px;
    }

}
/* Large screen and bigger */
@media (min-width: 1600px) {

    /* Whole */
    .kiss-width-1-1\@xl { width: 100%; }

    /* Halves */
    .kiss-width-1-2\@xl { width: 50%; }

    /* Thirds */
    .kiss-width-1-3\@xl { width: calc(100% * 1 / 3.001); }
    .kiss-width-2-3\@xl { width: calc(100% * 2 / 3.001); }

    /* Quarters */
    .kiss-width-1-4\@xl { width: 25%; }
    .kiss-width-3-4\@xl { width: 75%; }

    /* Fifths */
    .kiss-width-1-5\@xl { width: 20%; }
    .kiss-width-2-5\@xl { width: 40%; }
    .kiss-width-3-5\@xl { width: 60%; }
    .kiss-width-4-5\@xl { width: 80%; }

    /* Sixths */
    .kiss-width-1-6\@xl { width: calc(100% * 1 / 6.001); }
    .kiss-width-5-6\@xl { width: calc(100% * 5 / 6.001); }

    /* Auto */
    .kiss-width-auto\@xl { width: auto; }

    /* Expand */
    .kiss-width-expand\@xl {
        flex: 1;
        min-width: 1px;
    }

}
.kiss-width-max-small { max-width: var(--kiss-width-max-small, 200px) !important; }
.kiss-width-max-medium { max-width: var(--kiss-width-max-small, 640px) !important; }
.kiss-disabled { pointer-events: none; }
.kiss-link-muted,
.kiss-link-muted:hover,
.kiss-link-muted:active,
.kiss-link-muted:visited
{ color: inherit; }
.kiss-overflow-auto { overflow: auto; }
.kiss-overflow-x-auto { overflow-x: auto; }
.kiss-overflow-y-auto { overflow-y: auto; }
.kiss-overflow-hidden { overflow: hidden; }
.kiss-display-block { display: block !important; }
.kiss-display-inline { display: inline !important; }
.kiss-display-inline-block { display: inline-block !important; }
.kiss-cursor-pointer { cursor: pointer;}
.kiss-border-circle { border-radius: 50%; }
.kiss-svg,
.kiss-svg:not(.kiss-preserve) [fill*='#']:not(.kiss-preserve) { fill: currentcolor; }
.kiss-svg:not(.kiss-preserve) [stroke*='#']:not(.kiss-preserve) { stroke: currentcolor; }
/*
 * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
 */
.kiss-svg { transform: translate(0,0); }
.kiss-cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.kiss-cover[invisible="true"] {
    visibility: hidden;
    user-select: none;
    -webkit-user-select: none;
}
.kiss-responsive-width {
    max-height: none;
    max-width: 100%;
    height: auto;
}
.kiss-responsive-height {
    max-height: 100%;
    width: auto;
}
[hidden],
.kiss-hidden { display: none !important; }
.kiss-hidden-visually {
    position: absolute !important;
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important
}
.kiss-visible {
    visibility: visible !important;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
    .kiss-hidden\@s { display: none !important; }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .kiss-hidden\@m { display: none !important; }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
    .kiss-hidden\@l { display: none !important; }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
    .kiss-hidden\@xl { display: none !important; }
}
/*
 * Visible
 */
/* Phone portrait and smaller */
@media (max-width: 639px) {
    .kiss-visible\@s { display: none !important; }
}
/* Phone landscape and smaller */
@media (max-width: 959px) {
    .kiss-visible\@m { display: none !important; }
}
/* Tablet landscape and smaller */
@media (max-width: 1199px) {
    .kiss-visible\@l { display: none !important; }
}
/* Desktop and smaller */
@media (max-width: 1599px) {
    .kiss-visible\@xl { display: none !important; }
}
.kiss-invisible {
    visibility: hidden !important;
    pointer-events: none;
}
.kiss-visible-toggle:not(:hover):not(:focus) .kiss-hidden-hover:not(:focus-within) {
    display: none;
}
.kiss-visible-toggle:not(:hover):not(:focus) .kiss-invisible-hover:not(:focus-within) {
    opacity: 0 !important;
}
.kiss-visible-toggle {
    -webkit-tap-highlight-color: transparent;
}
.kiss-visible-toggle:focus { outline: none; }
@media (pointer: coarse) {
    .kiss-hidden-touch { display: none !important; }
}
.kiss-hidden-notouch { display: none !important; }
@media (pointer: coarse) {
    .kiss-hidden-notouch { display: block !important; }
}
:root {
    --kiss-base-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    --kiss-base-background-color: #131720;
    --kiss-base-text-color: #fafafa;
    --kiss-base-font-size: 15px;
    --kiss-font-size-1: 2rem;
    --kiss-font-size-4: 1.3rem;
    --kiss-hr-color: rgba(255,255,255,.1);
    --kiss-link-color: var(--kiss-color-primary);
    --kiss-link-hover-color: #1994ff;

    --kiss-block-element-margin: 1.5rem;

    --kiss-button-default-background: #2b2d42;

    --kiss-color-alternate: var(--kiss-base-text-color);
    --kiss-color-contrast: #10131a;
    --kiss-color-primary: #0e8fff;
    --kiss-color-success: #4caf50;
    --kiss-color-warning: orange;
    --kiss-color-danger: #f91941;
    --kiss-color-muted: rgba(255,255,255,.5);
    --kiss-color-overlay: rgba(0, 0, 0, .6);

    --kiss-container-max-width: 1800px;
    --kiss-container-small-max-width: 900px;

    --kiss-input-border-color: rgba(255,255,255,.1);
    --kiss-input-background: rgba(255,255,255,.05);

    --kiss-badge-bgcolor: var(--kiss-color-primary);

    --kiss-button-primary-background: var(--kiss-color-primary);
    --kiss-button-large-padding-horizontal: 5em;
    --kiss-button-large-font-size: 5em;

    --kiss-dialog-background: var(--kiss-color-overlay);
    --kiss-dialog-content-background: var(--kiss-color-contrast);
    --kiss-dialog-content-spacing: 20px;
    --kiss-dialog-width: 400px;
    --kiss-dialog-large-width: 840px;
    --kiss-dialog-xlarge-width: var(--kiss-container-max-width);

    --kiss-dropdown-background: #030915;

    --kiss-offcanvas-content-background: var(--kiss-base-background-color);
    --kiss-offcanvas-background: var(--kiss-color-overlay);
    --kiss-offcanvas-content-color: var(--kiss-base-text-color);

    --kiss-popout-background: var(--kiss-color-overlay);
    --kiss-popout-content-background: var(--kiss-color-contrast);

    --kiss-navlist-font-size: 14px;
    --kiss-navlist-padding-vertical: 10px;

    --kiss-card-shadowed-color: rgba(0, 0, 0, 0.85);
    --kiss-card-bordered-color: rgb(106, 85, 85, .15);

    --kiss-breadcrumbs-size: 11px;
    --kiss-table-heading-background-color: #171b24;
    --kiss-table-row-hover-color: #222;
}
[kiss-container="medium"],
kiss-container[size="medium"] {
    max-width: var(--kiss-container-medium-max-width, 1200px);
}
kiss-card,
.kiss-button,
.kiss-badge,
kiss-dialog kiss-content,
kiss-dropdownbox,
kiss-popout kiss-content,
kiss-tooltip {
    border-radius: var(--app-border-radius);
}
.kiss-has-transition {
    transition: all 300ms;
}
.kiss-inactive {
    opacity: .2;
    filter: grayscale(1);
}
.kiss-bgcolor-transparentimage {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%), linear-gradient(-45deg, rgba(255, 255, 255, .15) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .15) 75%), linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .15) 75%);
    background-size: var(--kiss-bgcolor-transparentimage-size, 20px) var(--kiss-bgcolor-transparentimage-size, 20px);
    background-position: 0 0, 0 calc(var(--kiss-bgcolor-transparentimage-size, 20px) / 2), calc(var(--kiss-bgcolor-transparentimage-size, 20px) / 2) calc(-1 * var(--kiss-bgcolor-transparentimage-size, 20px) / 2), calc(-1 * var(--kiss-bgcolor-transparentimage-size, 20px) / 2) 0px;
}
.kiss-height-30vh { min-height: 30vh; }
.kiss-height-50vh { min-height: 50vh; }
.kiss-height-100vh { min-height: 100vh; }
kiss-dialog,
kiss-offcanvas,
kiss-popout {
    backdrop-filter: grayscale(1) blur(4.5px);
}
kiss-offcanvas kiss-content,
kiss-dialog kiss-content,
kiss-dropdownbox,
kiss-popout kiss-content {
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12);
}
kiss-dropdownbox,
kiss-popout kiss-content {
    border-top: 2px var(--kiss-color-primary) solid;
}
kiss-dropdownbox kiss-navlist > ul > li > a > icon,
kiss-popout kiss-navlist > ul > li > a > icon {
    transform: scale(1.2);
}
.kiss-input {
    padding: .6em .6em;
    color: var(--kiss-base-text-color);
    background: var(--kiss-input-background);
    border: 1px var(--kiss-input-border-color) solid;
    border-radius: var(--app-border-radius);
    transition: all 250ms;
    font-size: .9em;
    line-height: 2;
}
/*
 * Fix select boxes in dark theme (chrome on windows)
 */
select.kiss-input optgroup,
select.kiss-input option {
    background: var(--kiss-base-background-color);
}
.kiss-input[type="text"],
.kiss-input[type="password"] {
    width: 100%;
}
.kiss-input:focus {
    background: var(--kiss-input-background-active, rgba(255,255,255,.15));
    border-color: var(--kiss-input-border-color-active, var(--kiss-color-primary));
}
.kiss-input[seamless="true"]:focus {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
}
.kiss-input::placeholder {
    color: var(--kiss-input-placeholder-color, rgba(255,255,255,.2));
}
.kiss-input-small {
    padding: .3em .3em;
    font-size: .8em;
}
.kiss-disabled,
.kiss-nav-header { opacity: .6; }
kiss-offcanvas kiss-navlist ul > li > a,
kiss-dropdownbox kiss-navlist ul > li > a {
    color: inherit;
    opacity: .65;
    transition: all 250ms;
}
kiss-offcanvas kiss-navlist ul > li > a:hover,
kiss-dropdownbox kiss-navlist ul > li > a:hover {
    color: inherit;
    opacity: 1;
}
kiss-offcanvas kiss-navlist ul > li.active > a {
    color: var(--kiss-color-primary);
    font-weight: bold;
    opacity: 1;
}
kiss-offcanvas kiss-navlist ul > li > * {
    display: flex;
    align-items: center;
    padding: 8px 0;
    letter-spacing: 1.5px;
}
kiss-offcanvas kiss-navlist[space="small"] ul > li > * {
    padding: 6px 0;
}
kiss-offcanvas kiss-navlist .kiss-nav-header {
    padding: 8px 0;
    color: var(--kiss-color-muted);
    margin-top: .6rem;
}
kiss-offcanvas kiss-navlist .kiss-nav-divider {
    margin-left: calc(-1 * var(--kiss-padding, 1rem));
    margin-right: calc(-1 * var(--kiss-padding, 1rem));
    margin-top: 1.2rem;
    margin-bottom: 1.2rem;
}
kiss-dropdownbox kiss-navlist ul > li a icon,
kiss-offcanvas kiss-navlist ul > li a icon,
kiss-offcanvas kiss-navlist ul > li a kiss-svg {
    font-size: 1.2em;
    margin-right: 5px;
}
.kiss-nav-spacer {
    margin-top: 5px;
}
kiss-card[hover="shadow"]:hover {
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12);
}
kiss-card[theme*="contrast"],
kiss-card[hover*="contrast"]:hover {
    background: var(--kiss-card-theme-contrast-color, #141923);
    background: var(--kiss-card-theme-contrast-color, #171d28);
}
.kiss-button:active {
    transform: scale(.99);
    filter: brightness(.9);
}
.kiss-button-group {
    display: inline-flex;
}
.kiss-button-group .kiss-button {
    border-radius: 0;
}
.kiss-button-group .kiss-button:not(:last-child) {
    border-right-width: 1px;
    border-right-color: rgba(0,0,0,.08);
    border-right-style: solid;
}
.kiss-button-group .kiss-button:first-child {
    border-top-left-radius: var(--app-border-radius);
    border-bottom-left-radius: var(--app-border-radius);
}
.kiss-button-group .kiss-button:last-child {
    border-top-right-radius: var(--app-border-radius);
    border-bottom-right-radius: var(--app-border-radius);
}
.kiss-button icon {
    transform: scale(2);
    line-height: 1;
}
.kiss-breadcrumbs {
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}
.kiss-breadcrumbs > *:not(.active) > *  {
    opacity: .6;
    transition: opacity .3s;
}
.kiss-breadcrumbs > *:not(.active):hover > *  {
    opacity: 1;
    color: inherit;
}
.kiss-breadcrumbs > .active > *  {
    font-weight: bold;
}
.kiss-tabs-nav-link {
    padding-left: 0;
    padding-right: 0;
    margin-right: 25px;
    letter-spacing: .05em;
}
[active="true"] > .kiss-tabs-nav-link:after {
    bottom: -0.5px;
}
.kiss-table {
    width: 100%;
    background: var(--kiss-color-contrast);
}
.kiss-table th {
    color: inherit;
    font-size: .6em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 12px 8px;
}
.kiss-table thead {
    background: rgba(0, 0, 0, 0.15);
    border-radius: var(--app-border-radius);
}
.kiss-table thead tr {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 22%);
}
.kiss-table td {
    font-size: .9em;
    border-bottom: 1px var(--kiss-hr-color) solid;
    padding: 16px 8px;
}
.kiss-table th,
.kiss-table td {
    text-align: left;
    vertical-align: middle;
}
.kiss-table tbody tr:hover td {
    background-color: var(--kiss-table-row-hover-color);
}
.kiss-checkbox {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    margin: 0;
    width: 1.2em;
    height: 1em;
    border: none;
    cursor: pointer;
    color: var(--kiss-base-text-color);
}
.kiss-checkbox:focus { outline: none; }
.kiss-checkbox:before {
    font-family: 'Material Icons Outlined';
    content: "";
    position: absolute;
    box-sizing: border-box;
    left: 0;
    z-index: 1;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid currentColor;
    border-radius: 2px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
}
.kiss-checkbox:checked:before {
    background: var(--kiss-color-primary);
}
.kiss-checkbox:checked:after {
    font-family: 'Material Icons Outlined';
    content: "done";
    position: absolute;
    box-sizing: border-box;
    top: 60%;
    left: 50%;
    z-index: 1;
    font-size: 1em;
    text-align: center;
    transform: translateY(-50%) translateX(-50%);
    color: #fff;
}
.kiss-checkbox[disabled] {
    opacity: .6;
}
.kiss-dialog-overflow {
    max-height: 60vh;
    overflow-y: auto;
}
.kiss-dialog-overflow[expand="true"] {
    height: 60vh;
}
[data-theme="dark"] .app-icon-preview img {
    filter: invert(100%);
}
vue-view {
    display: block;
}
vue-view:not([init="true"]) {
    display: none;
}
:root {

    --app-header-background: var(--kiss-base-background-color);
    --app-border-radius: 3px;
    --app-shadow-color: rgba(0, 0, 0, 0.12);

    --app-actionbar-bgcolor: #131720e6;

    --app-loader-color1: var(--kiss-color-primary);
    --app-loader-color2: #fff;
    --app-loader-cover-bg: var(--kiss-color-overlay);

    --app-fieldcontainer-border-color-active: var(--kiss-color-primary);
    --app-fieldcontainer-border-color-inactive: rgba(255, 255, 255, .1);
    --app-scrollbar-color: #000;
    --app-switch-offcolor: var(--kiss-color-muted);
    --app-switch-oncolor: var(--kiss-color-primary);
}
html[data-theme='light'] {
    --kiss-base-background-color: #f6f8fa;
    --kiss-base-text-color: #121212;
    --kiss-hr-color: rgba(0, 0, 0, .1);
    --kiss-link-hover-color: #1994ff;
    --kiss-button-default-background: #e0dee6;
    --kiss-button-default-color: #000;
    --kiss-color-alternate: #fff;
    --kiss-color-contrast: #fafcfe;
    --kiss-color-primary: #8932ff;
    --kiss-color-success: #4caf50;
    --kiss-color-warning: orange;
    --kiss-color-danger: #f91941;
    --kiss-color-muted: rgba(0, 0, 0, .55);
    --kiss-color-overlay: rgba(255, 255, 255, .8);

    --kiss-input-border-color: rgba(0, 0, 0, .1);
    --kiss-input-background: rgba(255, 255, 255, .5);
    --kiss-input-placeholder-color: rgba(0, 0, 0, .3);

    --kiss-dropdown-background: rgba(255, 255, 255, 1);

    --kiss-card-theme-contrast-color: #fff;
    --kiss-card-shadowed-color: rgba(0, 0, 0, 0.15);
    --kiss-card-bordered-color: rgb(106, 85, 85, .15);

    --kiss-input-background-active: #fff;
    --kiss-table-heading-background-color: #fff;
    --kiss-table-row-hover-color: #efefef;

    --app-shadow-color: rgba(0, 0, 0, 0.12);
    --app-actionbar-bgcolor: #eff7f7e8;
    --app-loader-color2: #333;
    --app-fieldcontainer-border-color-inactive: rgba(0, 0, 0, .1);
    --app-scrollbar-color: var(--kiss-color-muted);
}
html[data-theme='light'] .kiss-bgcolor-transparentimage {
    background-image: linear-gradient(45deg, rgba(0, 0, 0, .15) 25%, transparent 25%), linear-gradient(-45deg, rgba(0, 0, 0, .15) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, .15) 75%), linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, .15) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
html[data-theme='light'] [active="true"] .kiss-tabs-nav-link:after {
    border-color: var(--kiss-color-primary);
    border-width: 2px;
}
html[data-theme='light'] .kiss-bgcolor-success,
html[data-theme='light'] .kiss-bgcolor-danger {
    color: #fff;
}
html[data-theme='light'] kiss-card[hover="shadow"]:hover {
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.014),
        0 6.7px 5.3px rgba(0, 0, 0, 0.028),
        0 12.5px 10px rgba(0, 0, 0, 0.04),
        0 22.3px 17.9px rgba(0, 0, 0, 0.052),
        0 41.8px 33.4px rgba(0, 0, 0, 0.066),
        0 100px 80px rgba(0, 0, 0, 0.06);
}
html[data-theme='light'] [src$="App/assets/logo.svg"] {
    filter: invert(1);
}
html[data-theme='light'] kiss-offcanvas kiss-content {
    --kiss-color-contrast: #fff;
}
html[data-theme='light'].login-page {
    background-image: url(img/bg-light.svg);
}
@media (prefers-color-scheme: light) {
    html {
        --app-auto-theme: light;
    }
}
@media (prefers-color-scheme: dark) {
    html {
        --app-auto-theme: dark;
    }
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--app-scrollbar-color) var(--kiss-base-background-color);
}
/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-track {
    background: var(--kiss-base-background-color);
}
*::-webkit-scrollbar-thumb {
    background-color: var(--app-scrollbar-color);
    border-radius: 20px;
    border: 3px solid var(--kiss-base-background-color);
}
html {
    scroll-padding-top: 80px;
}
body {
    font-weight: 400;
    min-height: 100vh;
}
ins,
del {
    color: #fff;
    text-decoration: none;
}
ins {
    background: #249924
}
del {
    background: #c92a2a
}
.app-container {
    display: flex;
}
.app-container-aside {
    display: none;
    height: 100vh;
    margin-right: 20px;
    width: 50px;
    z-index: 5;
}
.has-side-panel .app-container-aside {
    width: 320px;
}
.app-container-aside-menu {
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    width: 50px;
    height: 100vh;
    padding-top: 15px;
    padding-bottom: 20px;
    flex-direction: column;
}
.app-container-aside-panel {
    position: fixed;
    display: flex;
    top: 15px;
    left: 50px;
    padding: 20px 20px;
    flex-direction: column;
    width: 280px;
    height: calc(100vh - 30px);
    background: var(--kiss-card-theme-contrast-color, #171d28);
    border-radius: 8px;
    box-shadow: 0 0 10px rgb(0 0 0 / 10%);
    overflow: auto;
}
.app-container-aside-menu kiss-navlist a {
    text-align: center;
}
.app-container-aside-menu kiss-navlist kiss-svg {
    margin-left: auto;
    margin-right: auto;
}
.app-container-aside-menu kiss-navlist ul>li>a {
    color: inherit;
    opacity: .5;
    transition: all 250ms;
}
.app-container-aside-menu kiss-navlist ul>li>a:hover {
    color: inherit;
    opacity: 1;
}
.app-container-aside-menu kiss-navlist ul>li.active>a {
    position: relative;
    color: var(--kiss-color-primary);
    font-weight: bold;
    opacity: 1;
}
.app-container-aside-menu kiss-navlist ul>li.active>a:before {
    content: "";
    position: absolute;
    width: 2px;
    top: 8px;
    left: 0;
    bottom: 8px;
    background: var(--kiss-color-primary);
}
.app-container-aside-menu kiss-navlist ul>li>* {
    display: flex;
    align-items: center;
    padding: 8px 0;
    letter-spacing: 1.5px;
}
.app-container-aside-menu kiss-navlist[space="small"] ul>li>* {
    padding: 6px 0;
    font-size: 18px;
}
.app-container-aside-menu kiss-navlist .kiss-nav-divider {
    margin-top: 1.2rem;
    margin-bottom: 1.2rem;
    opacity: .8;
}
app-avatar canvas,
.app-border-radius {
    border-radius: var(--app-border-radius);
}
.app-switch,
.app-switch::before {
    border-radius: 60px;
}
.app-field-links-outline {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--kiss-font-size-small, var(--kiss-font-size-6, 0.875rem));
    max-height: 80vh;
    overflow-y: auto;
}
.app-field-links-outline li {
    margin: 4px 0;
}
.app-field-links-outline li a {
    position: relative;
    display: block;
    color: var(--kiss-color-muted);
    opacity: .6;
    transition: all 150ms;
}
.app-field-links-outline li a.inview {
    color: inherit;
    opacity: .6;
}
.app-field-links-outline li a.active {
    font-weight: bold;
    padding-left: 20px;
    opacity: 1;
}
.app-field-links-outline li a:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    border-top: 1px solid currentColor;
    transition: all 150ms;
}
.app-field-links-outline li a.active:before {
    border-color: var(--kiss-color-primary);
    width: 15px;
}
label {
    display: block;
    font-weight: bold;
    font-size: .75em;
    line-height: inherit;
    letter-spacing: .015em;
    text-decoration: none;
    margin-bottom: 5px;
    color: var(--kiss-color-muted);
}
.login-page {
    background-image: url(img/bg-dark.svg);
    background-position: 50%;
    background-attachment: scroll;
    background-size: auto;
    background-repeat: repeat;
    overflow: hidden;
}
.login-wrapper {
    position: relative;
    width: 500px;
    max-width: 90%;
    margin-top: 20vh;
}
.login-dialog {
    padding: var(--kiss-padding-large, 3rem);
    border-radius: 10px;
    background: var(--kiss-base-background-color);
    z-index: -1;
    opacity: .8;

    box-shadow:
        0 2.8px 2.2px rgba(0, 0, 0, 0.034),
        0 6.7px 5.3px rgba(0, 0, 0, 0.048),
        0 12.5px 10px rgba(0, 0, 0, 0.06),
        0 22.3px 17.9px rgba(0, 0, 0, 0.072),
        0 41.8px 33.4px rgba(0, 0, 0, 0.086),
        0 100px 80px rgba(0, 0, 0, 0.12);
}
app-header {
    display: block;
    position: relative;
    padding: 20px 0;
    background: var(--app-header-background);
    z-index: 6;
}
app-actionbar kiss-container {
    padding-left: var(--kiss-container-padding, 30px);
    padding-right: var(--kiss-container-padding, 30px);
}
.app-offcanvas-container {
    display: flex;
    height: 100vh;
    max-height: 100vh;
    flex-direction: column;
}
.app-offcanvas-content {
    overflow-y: auto;
    flex: 1;
}
.app-list-items {
    list-style: none;
    padding: 0;
    margin: 0;
}
.app-list-items>li {
    padding: 0;
    margin: 0;
}
.app-list-items>li:not(:first-child) {
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px var(--kiss-hr-color) solid;
}
[field="boolean"] {
    font-size: .95em;
}
[field="boolean"] label {
    all: unset;
    cursor: pointer;
}
.fields-renderer[nested="true"] .fields-renderer-field {
    display: inline-block;
    font-weight: normal;
    font-size: 11px;
}
.field-multiple-sortable-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: 1fr;
    gap: 10px;
}
.field-multiple-sortable-grid > * {
    min-width: 0;
}
.field-layout-dragarea {
    min-height: 47px;
    border-radius: var(--app-border-radius);
}
.sortable-chosen[data-draggable="true"] {
    border: 1px var(--kiss-color-primary) solid;
}
app-fieldcontainer label {
    color: inherit;
}
app-fieldcontainer app-fieldcontainer,
.app-fieldcontainer-no-style app-fieldcontainer {
    padding: unset;
    border: unset;
    display: block;
}
app-pagination {
    display: inline-flex;
    align-items: center;
    padding: var(--kiss-padding-small, .6rem);
    background-color: var(--kiss-color-contrast);
    font-size: var(--kiss-font-size-small, var(--kiss-font-size-6, 0.875rem));
    border-radius: var(--app-border-radius);
}
.table-scroll {
    overflow-x: auto;
    white-space: nowrap;
}
.table-scroll>table {
    margin: 0;
}
.table-scroll [fixed] {
    position: sticky;
    position: -webkit-sticky;
    z-index: 1;
}
.table-scroll thead {
    position: relative;
    z-index: 2;
}
.table-scroll [fixed="top"] {
    top: 0;
}
.table-scroll [fixed="left"] {
    left: 0;
}
.table-scroll [fixed="right"] {
    right: 0;
}
.table-scroll th[fixed] {
    background-color: var(--kiss-table-heading-background-color);
}
.table-scroll td[fixed] {
    background: var(--kiss-color-contrast);
}
kiss-dialog[type="app-search"]>kiss-content {
    margin-top: 15vh;
}
kiss-dialog[type="alert"]>kiss-content,
kiss-dialog[type="confirm"]>kiss-content,
kiss-dialog[type="prompt"]>kiss-content {
    border: none;
    background: none;
    box-shadow: none;
}
.kiss-dialog-alert-message,
.kiss-dialog-confirm-message,
.kiss-dialog-prompt-message {
    font-size: var(--kiss-font-size-2, 2rem);
}
@media (min-width: 768px) {

    app-header {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
    }

    app-actionbar {
        padding-left: 70px;
    }

    .has-side-panel app-actionbar {
        padding-left: 340px;
    }

    .app-container-aside {
        display: block;
    }

}
@container (min-width: 500px) {
    .field-multiple-sortable-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@container (min-width: 700px) {
    .field-multiple-sortable-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@container (min-width: 980px) {
    .field-multiple-sortable-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}