/**
* BASE CSS PARAMETERS
*
* 1. Components shouldn't set the external geometry and influence their environment.
*    In short: AVOID USING MARGINS whenever it's possible.
*    Instead of margins, use the PADDING of the container element.
*
* 2. Class names should be self-explanatory and be prefixed with the component name.
*    Ex: panel, panel-header, panel-title, panel-icon, panel-body...
* 
* A word about performances:
*    An important % of the page rendering time is spent figuring out what we call the "Computed Style" of elements (= how the elements look after all style rules have been applied)
*    Despite the intrinsic (and convenient) cascading nature of CSS, we should limit the use of cascading classes because it takes a longer time to process the computed style.
*    In short:
*    - limit the global number of classes
*    - avoid (or at least limit) nested or complex selectors
*    - attach from 1 to 3 classes to elements, not more (when possible)
*
* 3. When possible, avoid using "pixels" as a unit of measure.
*    Use "rem" instead so your interface can scale properly by adjusting the font-size of the root element.
*/
html {
    
    /* MOST IMPORTANT PARAMETER TO SCALE THE ENTIRE UI */
    font-size: 62.5%;
    
    /* Reset default browser styles */
    min-height: 100%;
    box-sizing: border-box;
    overscroll-behavior-y: none;
}

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

body {
    font-size: var(--body-font-size);
    margin: var(--body-margin);
    min-height: var(--body-min-height);

    color: var(--body);
    background: var(--body-background);
    font-family: var(--font-family);
    overscroll-behavior-y: none;
}

a {
    color: var(--link);
}

p {
    font-family: inherit;
    margin: var(--paragraph-margin);
    padding: var(--paragraph-padding);
}

p:empty::before {
    content: "\00a0";
    display: block;
    margin-top: var(--body-font-size);
}

pre {
    font-family: inherit;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
}

ul {
    display: block;
    line-height: var(--ul-line-height);
    margin-block-start: var(--ul-margin-block-start);
    margin-block-end: var(--ul-margin-block-end);
    margin-inline-start: var(--ul-margin-inline-start);
    margin-inline-end: var(--ul-margin-inline-end);
    padding-inline-start: var(--ul-padding-inline-start);
}

/* Remove default field outline */
input:focus, textarea:focus, select:focus {
    outline: none;
}

/* Scrollbars (webkit only) */
::-webkit-scrollbar {
    height: var(--webkit-scrollbar-height);
    width: var(--webkit-scrollbar-width);
    background-color: var(--scrollbar-background);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
    border-radius: var(--webkit-scrollbar-thumb-border-radius);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-hover);
}

/* Scrollbars (Firefox) */
* {
    scrollbar-width: thin !important;
    scrollbar-color: var(--scrollbar);
}

/* Underline effects (currently used by form tabs) */
.underline-effect {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
}

.underline-effect:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 51%;
    right: 51%;
    bottom: 0;
    background: var(--tab-underline-effect);
    height: 2px;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.underline-effect:hover:before,
.underline-effect:focus:before,
.underline-effect:active:before {
    left: 0;
    right: 0;
}

/* Highlight UI elements - Used for onboarding quick tips */
.highlight-overlay {
    position: absolute;
    background-color: rgba(0,0,0,0.5);
    user-select: none;
    z-index: 9999;
}

.highlight-arrow {
    position: fixed;
    color: #fff;
    width: 0;
    height: 0;
}

.highlight-label {
    position: fixed;
    padding: 2rem;
    color: var(--body-background);
    background: var(--body);
    font-size: 1.8rem;
    font-weight: bold;
    border-style: solid;
    border-color: var(--body-background);
    border-width: 1px;
    border-radius: 1rem;
    box-shadow: var(--shadow-4);
    cursor: pointer;
}

@keyframes highlight-arrow-vertical {
    0% {
        transform: translateY(+1rem);
    }

    100% {
        transform: translateY(-1rem);
    }
}

@keyframes highlight-arrow-horizontal {
    0% {
        transform: translateX(+1rem);
    }

    100% {
        transform: translateX(-1rem);
    }
}

:root {
    /* Base colors */
    --yellow: #FFD139;
    --alt-yellow: #CCA266;
    --green: #09b626;
    --alt-green: #008833;
    --blue: #00aaee;
    --alt-blue: #0075ff;
    --purple: #ad77ee;
    --alt-purple: #8833ee;
    --red: #ED3757;
    --alt-red: #B22222;
    --orange: #FFAA00;
    --alt-orange: #F77D05;
    --pink: #FF8080;
    --alt-pink: #EE77CC;
    --gray: #cccccc;
    --alt-gray: #7a7a7a;

    /* Backgrounds */
    --background-yellow: linear-gradient(120deg, var(--yellow) 0%, var(--alt-yellow) 100%);
    --background-green: linear-gradient(120deg, var(--green) 0%, var(--alt-green) 100%);
    --background-blue: linear-gradient(120deg, var(--blue) 0%, var(--alt-blue) 100%);
    --background-purple: linear-gradient(120deg, var(--purple) 0%, var(--alt-purple) 100%);
    --background-red: linear-gradient(120deg, var(--red) 0%, var(--alt-red) 100%);
    --background-orange: linear-gradient(120deg, var(--orange) 0%, var(--alt-orange) 100%);
    --background-pink: linear-gradient(120deg, var(--pink) 0%, var(--alt-pink) 100%);
    --background-gray: linear-gradient(120deg, var(--gray) 0%, var(--alt-gray) 100%);

    /* Animation transitions */
    --transition-fast: all 0.1s;
    --transition-medium: all 0.3s;
    --transition-slow: all 0.6s;

    /* Mask filter */
    --backdrop-filter: blur(4px);
    
    /* Loading overlay */
    --background-overlay: rgba(27, 11, 11, 0.3);
}
/* BASE CSS PARAMETERS */
/* LIGHT THEME PARAMETERS */
:root {
    --body: #555555;
    --body-alt: #dddddd;
    --body-background: #ffffff;
    --body-background-alt: #f5f5f5;
    --link: #00aaee;
    --panel-background: #ffffff;
    --panel-header: #00aaee;
    --panel-border: #dddddd;
    --panel-box-shadow: 0px 0px 32px #555555;
    --field: #000000;
    --field-label: #556677;
    --field-background: #fafafa;
    --field-background-hover: #ffffff;
    --field-background-focus: #fdffe8;
    --field-border: #f0f0f0;
    --field-border-hover: #000000;
    --select-option: #888888;
    --select-option-background: #ffffff;
    --select-option-background-selected: #eeeeee;
    --select-option-highlight: #000000;
    --select-option-background-highlight: #fafafa;
    --select-option-box-shadow: 0 0.5rem 1rem #777777;
    --select-value-shadow: 0 0 0 #dddddd;
    --menu-background: #ffffff;
    --menu-border: #dddddd;
    --menu-separator: #eeeeee;
    --menu-item: #445566;
    --menu-item-hover: #00aaee;
    --menu-item-background-hover: #f5f5f5;
    --menu-item-background-selected: #e5e5e5;
    --menu-item-selected: #000000;
    --button-text: #555555;
    --button-text-hover: #446677;
    --button-icon: #000000;
    --button-background: #ffffff;
    --button-background-hover: #eeeeee;
    --button-border: #e5e5e5;
    --button-border-hover: #cccccc;
    --button-shadow: 0 0 1rem #f0f0f0;
    --button-shadow-hover: 0 0 0 #dddddd;
    --datacomponent-header: #000000;
    --datacomponent-header-background: #f5f5f5;
    --datacomponent-header-background-hover: #dddddd;
    --datacomponent-interaction-hover: #00aaee;
    --datacomponent-alternate-border: #eeeeee;
    --datacomponent-body-background: #fafafa;
    --datacomponent-input-background: #ffffff;
    --datacomponent-row-hover: #f5f5f5;
    --datacomponent-row-selected: #fcffd5;
    --datacomponent-cell: #000000;
    --datacomponent-cell-background: #ffffff;
    --datacomponent-cell-border: #eeeeee;
    --datacomponent-1st-column: #aaaaaa;
    --datacomponent-1st-column-background: #fafafa;
    --datacomponent-toolbar-background: #ffffff;
    --datacomponent-group-text: #00aaee;
    --datacomponent-group-background: #fafafa;
    --shadow-1: 0 0 1.5rem 0 rgba(0, 0, 0, 0.05);
    --shadow-2: 0 0 1.5rem 0 rgba(0, 0, 0, 0.1);
    --shadow-3: 0 0 1.5rem 0 rgba(0, 0, 0, 0.2);
    --shadow-4: 0 0 1.5rem 0 rgba(0, 0, 0, 0.25);
}
/* /LIGHT THEME PARAMETERS */
/* DEFAULT GEOMETRY PARAMETERS */
:root {
    /* Most important parameter: the fonts! */
    --font-family: Arial, Helvetica, Sans-serif;
    --font-family-sans-serif: Sans-serif;
    --font-family-monospace: Monospace;
    
    /* Body */
    --body-font-size: 1.3rem;
    --body-margin: 0;
    --body-min-height: 100%;

    /* Fields */
    --field-padding: 0.5rem;
    --field-font-size: 1.3rem;
    --field-label-font-weight: normal;
    --field-border-width: 1px;
    --field-border-radius: 0.3rem;
    --field-border-invalid-style: dashed;
    --field-border-invalid-width: 1px;
    --field-transition: all 0.5s;

    /* Select */
    --field-select-value-height: 2rem;
    --field-select-value-margin: 0.2rem 0.4rem 0.2rem 0;
    --field-select-value-border: none 1px #dddddd;
    --field-select-value-border-radius: 0.3rem;
    --field-select-value-padding: 0.2rem 1rem 0.2rem 1rem;

    /* Paragraph */
    --paragraph-margin: 0;
    --paragraph-padding: 0;

    /* Unordered lists */
    --ul-line-height: 1.3rem;
    --ul-margin-block-start: 0;
    --ul-margin-block-end: 0;
    --ul-margin-inline-start: 0;
    --ul-margin-inline-end: 0;
    --ul-padding-inline-start: 4rem;

    /* Scrollbars */
    --webkit-scrollbar-height: 1rem;
    --webkit-scrollbar-width: 1rem;
    --webkit-scrollbar-thumb-border-radius: 1rem;

    /* Buttons */
    --button-padding: 0.4rem;
    --button-font-size: 1.4rem;
    --button-icon-padding: 0;
    --button-icon-font-size: 1.4rem;
    --button-border-style: solid;
    --button-border-width: 1px;
    --button-border-radius: 0.5rem;
    --button-width: 100%;
    --button-height: 3.2rem;

    /* Panels */
    --panel-padding: 1rem;
    --panel-border-style: solid;
    --panel-border-width: 1px;
    --panel-border-radius: 0.5rem;

    /* Menus */
    --menu-border-radius: 1rem;
    --menu-item-border-radius: 1rem;

    /* Datatables */
    --datacomponent-header-height: 3.6rem;
    --datacomponent-1st-column-width: 8.8rem;
    --datacomponent-cell-height: 4rem;
    --datacomponent-cell-padding: 0 0.4rem;
    --datacomponent-group-cell-height: 4rem;
    --datacomponent-group-cell-padding: 0 0.5rem 0 0;

    /* Kanban */
    --kanban-column-width: 28rem;

    /* Gallery */
    --gallery-column-width: 20rem;
    
    /* Timeline */
    --timeline-day-width: 5rem;
    --timeline-1st-column-width: 10rem;

    /* Form */
    --form-tab-height: 3.6rem;
    --form-tab-font-size: 1.3rem;
    --form-tab-border-radius: 0.5rem 0.5rem 0 0;

    /* Tabs */
    --tab-border-radius: 1rem 1rem 0 0;
}
/* /DEFAULT GEOMETRY PARAMETERS */
/**
 * ANIMATE
 *
 * animate.css - https://animate.style/
 * Version - 4.1.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2020 Animate.css
 */
:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1
}

.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

.animate__animated.animate__infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}

.animate__animated.animate__repeat-1 {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: var(--animate-repeat);
  animation-iteration-count: var(--animate-repeat)
}

.animate__animated.animate__repeat-2 {
  -webkit-animation-iteration-count: 2;
  animation-iteration-count: 2;
  -webkit-animation-iteration-count: calc(var(--animate-repeat)*2);
  animation-iteration-count: calc(var(--animate-repeat)*2)
}

.animate__animated.animate__repeat-3 {
  -webkit-animation-iteration-count: 3;
  animation-iteration-count: 3;
  -webkit-animation-iteration-count: calc(var(--animate-repeat)*3);
  animation-iteration-count: calc(var(--animate-repeat)*3)
}

.animate__animated.animate__delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-delay: var(--animate-delay);
  animation-delay: var(--animate-delay)
}

.animate__animated.animate__delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-delay: calc(var(--animate-delay)*2);
  animation-delay: calc(var(--animate-delay)*2)
}

.animate__animated.animate__delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
  -webkit-animation-delay: calc(var(--animate-delay)*3);
  animation-delay: calc(var(--animate-delay)*3)
}

.animate__animated.animate__delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  -webkit-animation-delay: calc(var(--animate-delay)*4);
  animation-delay: calc(var(--animate-delay)*4)
}

.animate__animated.animate__delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
  -webkit-animation-delay: calc(var(--animate-delay)*5);
  animation-delay: calc(var(--animate-delay)*5)
}

.animate__animated.animate__light {
  -webkit-animation-duration: .1s;
  animation-duration: .1s;
  -webkit-animation-duration: calc(var(--animate-duration)/10);
  animation-duration: calc(var(--animate-duration)/10)
}

.animate__animated.animate__faster {
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-duration: calc(var(--animate-duration)/3);
  animation-duration: calc(var(--animate-duration)/3)
}

.animate__animated.animate__fast {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-duration: calc(var(--animate-duration)*0.5);
  animation-duration: calc(var(--animate-duration)*0.5)
}

.animate__animated.animate__slow {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: calc(var(--animate-duration)*1);
  animation-duration: calc(var(--animate-duration)*1)
}

.animate__animated.animate__slower {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-duration: calc(var(--animate-duration)*2);
  animation-duration: calc(var(--animate-duration)*2)
}

@media (prefers-reduced-motion:reduce),
print {
  .animate__animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important
  }

  .animate__animated[class*=Out] {
    opacity: 0
  }
}

@-webkit-keyframes bounce {

  0%,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1)
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05)
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);
    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
    -webkit-transform: translateZ(0) scaleY(.95);
    transform: translateZ(0) scaleY(.95)
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02)
  }
}

@keyframes bounce {

  0%,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1)
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05)
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);
    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
    -webkit-transform: translateZ(0) scaleY(.95);
    transform: translateZ(0) scaleY(.95)
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02)
  }
}

.animate__bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom
}

@-webkit-keyframes flash {

  0%,
  50%,
  to {
    opacity: 1
  }

  25%,
  75% {
    opacity: 0
  }
}

@keyframes flash {

  0%,
  50%,
  to {
    opacity: 1
  }

  25%,
  75% {
    opacity: 0
  }
}

.animate__flash {
  -webkit-animation-name: flash;
  animation-name: flash
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }

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

  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }

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

  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

.animate__pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out
}

@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }

  30% {
    -webkit-transform: scale3d(1.25, .75, 1);
    transform: scale3d(1.25, .75, 1)
  }

  40% {
    -webkit-transform: scale3d(.75, 1.25, 1);
    transform: scale3d(.75, 1.25, 1)
  }

  50% {
    -webkit-transform: scale3d(1.15, .85, 1);
    transform: scale3d(1.15, .85, 1)
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1)
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1)
  }

  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

@keyframes rubberBand {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }

  30% {
    -webkit-transform: scale3d(1.25, .75, 1);
    transform: scale3d(1.25, .75, 1)
  }

  40% {
    -webkit-transform: scale3d(.75, 1.25, 1);
    transform: scale3d(.75, 1.25, 1)
  }

  50% {
    -webkit-transform: scale3d(1.15, .85, 1);
    transform: scale3d(1.15, .85, 1)
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1)
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1)
  }

  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

.animate__rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand
}

@-webkit-keyframes shakeX {

  0%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

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

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0)
  }
}

@keyframes shakeX {

  0%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

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

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0)
  }
}

.animate__shakeX {
  -webkit-animation-name: shakeX;
  animation-name: shakeX
}

@-webkit-keyframes shakeY {

  0%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

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

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0)
  }
}

@keyframes shakeY {

  0%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

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

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0)
  }
}

.animate__shakeY {
  -webkit-animation-name: shakeY;
  animation-name: shakeY
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }

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

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

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

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

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
}

@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }

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

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

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

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

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
}

.animate__headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg)
  }

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

  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg)
  }

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

  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg)
  }

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

  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg)
  }

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

  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }
}

.animate__swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }

  10%,
  20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
    transform: scale3d(.9, .9, .9) rotate(-3deg)
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
  }

  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }

  10%,
  20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
    transform: scale3d(.9, .9, .9) rotate(-3deg)
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
  }

  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

.animate__tada {
  -webkit-animation-name: tada;
  animation-name: tada
}

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

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

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
    transform: translate3d(20%, 0, 0) rotate(3deg)
  }

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

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
    transform: translate3d(10%, 0, 0) rotate(2deg)
  }

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

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes wobble {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

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

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
    transform: translate3d(20%, 0, 0) rotate(3deg)
  }

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

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
    transform: translate3d(10%, 0, 0) rotate(2deg)
  }

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

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble
}

@-webkit-keyframes jello {

  0%,
  11.1%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

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

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

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

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

  66.6% {
    -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
    transform: skewX(-.78125deg) skewY(-.78125deg)
  }

  77.7% {
    -webkit-transform: skewX(.390625deg) skewY(.390625deg);
    transform: skewX(.390625deg) skewY(.390625deg)
  }

  88.8% {
    -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
    transform: skewX(-.1953125deg) skewY(-.1953125deg)
  }
}

@keyframes jello {

  0%,
  11.1%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

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

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

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

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

  66.6% {
    -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
    transform: skewX(-.78125deg) skewY(-.78125deg)
  }

  77.7% {
    -webkit-transform: skewX(.390625deg) skewY(.390625deg);
    transform: skewX(.390625deg) skewY(.390625deg)
  }

  88.8% {
    -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
    transform: skewX(-.1953125deg) skewY(-.1953125deg)
  }
}

.animate__jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center
}

@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3)
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3)
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3)
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3)
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

.animate__heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-duration: calc(var(--animate-duration)*1.3);
  animation-duration: calc(var(--animate-duration)*1.3);
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out
}

@-webkit-keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(.7);
    transform: translateY(-1200px) scale(.7);
    opacity: .7
  }

  80% {
    -webkit-transform: translateY(0) scale(.7);
    transform: translateY(0) scale(.7);
    opacity: .7
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }
}

@keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(.7);
    transform: translateY(-1200px) scale(.7);
    opacity: .7
  }

  80% {
    -webkit-transform: translateY(0) scale(.7);
    transform: translateY(0) scale(.7);
    opacity: .7
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }
}

.animate__backInDown {
  -webkit-animation-name: backInDown;
  animation-name: backInDown
}

@-webkit-keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(.7);
    transform: translateX(-2000px) scale(.7);
    opacity: .7
  }

  80% {
    -webkit-transform: translateX(0) scale(.7);
    transform: translateX(0) scale(.7);
    opacity: .7
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }
}

@keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(.7);
    transform: translateX(-2000px) scale(.7);
    opacity: .7
  }

  80% {
    -webkit-transform: translateX(0) scale(.7);
    transform: translateX(0) scale(.7);
    opacity: .7
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }
}

.animate__backInLeft {
  -webkit-animation-name: backInLeft;
  animation-name: backInLeft
}

@-webkit-keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(.7);
    transform: translateX(2000px) scale(.7);
    opacity: .7
  }

  80% {
    -webkit-transform: translateX(0) scale(.7);
    transform: translateX(0) scale(.7);
    opacity: .7
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }
}

@keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(.7);
    transform: translateX(2000px) scale(.7);
    opacity: .7
  }

  80% {
    -webkit-transform: translateX(0) scale(.7);
    transform: translateX(0) scale(.7);
    opacity: .7
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }
}

.animate__backInRight {
  -webkit-animation-name: backInRight;
  animation-name: backInRight
}

@-webkit-keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(.7);
    transform: translateY(1200px) scale(.7);
    opacity: .7
  }

  80% {
    -webkit-transform: translateY(0) scale(.7);
    transform: translateY(0) scale(.7);
    opacity: .7
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }
}

@keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(.7);
    transform: translateY(1200px) scale(.7);
    opacity: .7
  }

  80% {
    -webkit-transform: translateY(0) scale(.7);
    transform: translateY(0) scale(.7);
    opacity: .7
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }
}

.animate__backInUp {
  -webkit-animation-name: backInUp;
  animation-name: backInUp
}

@-webkit-keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }

  20% {
    -webkit-transform: translateY(0) scale(.7);
    transform: translateY(0) scale(.7);
    opacity: .7
  }

  to {
    -webkit-transform: translateY(700px) scale(.7);
    transform: translateY(700px) scale(.7);
    opacity: .7
  }
}

@keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }

  20% {
    -webkit-transform: translateY(0) scale(.7);
    transform: translateY(0) scale(.7);
    opacity: .7
  }

  to {
    -webkit-transform: translateY(700px) scale(.7);
    transform: translateY(700px) scale(.7);
    opacity: .7
  }
}

.animate__backOutDown {
  -webkit-animation-name: backOutDown;
  animation-name: backOutDown
}

@-webkit-keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }

  20% {
    -webkit-transform: translateX(0) scale(.7);
    transform: translateX(0) scale(.7);
    opacity: .7
  }

  to {
    -webkit-transform: translateX(-2000px) scale(.7);
    transform: translateX(-2000px) scale(.7);
    opacity: .7
  }
}

@keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }

  20% {
    -webkit-transform: translateX(0) scale(.7);
    transform: translateX(0) scale(.7);
    opacity: .7
  }

  to {
    -webkit-transform: translateX(-2000px) scale(.7);
    transform: translateX(-2000px) scale(.7);
    opacity: .7
  }
}

.animate__backOutLeft {
  -webkit-animation-name: backOutLeft;
  animation-name: backOutLeft
}

@-webkit-keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }

  20% {
    -webkit-transform: translateX(0) scale(.7);
    transform: translateX(0) scale(.7);
    opacity: .7
  }

  to {
    -webkit-transform: translateX(2000px) scale(.7);
    transform: translateX(2000px) scale(.7);
    opacity: .7
  }
}

@keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }

  20% {
    -webkit-transform: translateX(0) scale(.7);
    transform: translateX(0) scale(.7);
    opacity: .7
  }

  to {
    -webkit-transform: translateX(2000px) scale(.7);
    transform: translateX(2000px) scale(.7);
    opacity: .7
  }
}

.animate__backOutRight {
  -webkit-animation-name: backOutRight;
  animation-name: backOutRight
}

@-webkit-keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }

  20% {
    -webkit-transform: translateY(0) scale(.7);
    transform: translateY(0) scale(.7);
    opacity: .7
  }

  to {
    -webkit-transform: translateY(-700px) scale(.7);
    transform: translateY(-700px) scale(.7);
    opacity: .7
  }
}

@keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }

  20% {
    -webkit-transform: translateY(0) scale(.7);
    transform: translateY(0) scale(.7);
    opacity: .7
  }

  to {
    -webkit-transform: translateY(-700px) scale(.7);
    transform: translateY(-700px) scale(.7);
    opacity: .7
  }
}

.animate__backOutUp {
  -webkit-animation-name: backOutUp;
  animation-name: backOutUp
}

@-webkit-keyframes bounceIn {

  0%,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }

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

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9)
  }

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

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97)
  }

  to {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

@keyframes bounceIn {

  0%,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }

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

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9)
  }

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

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97)
  }

  to {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

.animate__bounceIn {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-animation-duration: calc(var(--animate-duration)*0.75);
  animation-duration: calc(var(--animate-duration)*0.75);
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn
}

@-webkit-keyframes bounceInDown {

  0%,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }

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

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

  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(.95);
    transform: translate3d(0, -10px, 0) scaleY(.95)
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(.985);
    transform: translate3d(0, 5px, 0) scaleY(.985)
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes bounceInDown {

  0%,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }

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

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

  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(.95);
    transform: translate3d(0, -10px, 0) scaleY(.95)
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(.985);
    transform: translate3d(0, 5px, 0) scaleY(.985)
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown
}

@-webkit-keyframes bounceInLeft {

  0%,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }

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

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

  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(.98);
    transform: translate3d(-10px, 0, 0) scaleX(.98)
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(.995);
    transform: translate3d(5px, 0, 0) scaleX(.995)
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes bounceInLeft {

  0%,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }

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

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

  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(.98);
    transform: translate3d(-10px, 0, 0) scaleX(.98)
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(.995);
    transform: translate3d(5px, 0, 0) scaleX(.995)
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft
}

@-webkit-keyframes bounceInRight {

  0%,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }

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

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

  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(.98);
    transform: translate3d(10px, 0, 0) scaleX(.98)
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(.995);
    transform: translate3d(-5px, 0, 0) scaleX(.995)
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes bounceInRight {

  0%,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }

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

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

  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(.98);
    transform: translate3d(10px, 0, 0) scaleX(.98)
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(.995);
    transform: translate3d(-5px, 0, 0) scaleX(.995)
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight
}

@-webkit-keyframes bounceInUp {

  0%,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }

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

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

  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(.95);
    transform: translate3d(0, 10px, 0) scaleY(.95)
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(.985);
    transform: translate3d(0, -5px, 0) scaleY(.985)
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes bounceInUp {

  0%,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }

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

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

  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(.95);
    transform: translate3d(0, 10px, 0) scaleY(.95)
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(.985);
    transform: translate3d(0, -5px, 0) scaleY(.985)
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9)
  }

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

  to {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9)
  }

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

  to {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }
}

.animate__bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-animation-duration: calc(var(--animate-duration)*0.75);
  animation-duration: calc(var(--animate-duration)*0.75);
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(.985);
    transform: translate3d(0, 10px, 0) scaleY(.985)
  }

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

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3)
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(.985);
    transform: translate3d(0, 10px, 0) scaleY(.985)
  }

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

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3)
  }
}

.animate__bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(.9);
    transform: translate3d(20px, 0, 0) scaleX(.9)
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2)
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(.9);
    transform: translate3d(20px, 0, 0) scaleX(.9)
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2)
  }
}

.animate__bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(.9);
    transform: translate3d(-20px, 0, 0) scaleX(.9)
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2)
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(.9);
    transform: translate3d(-20px, 0, 0) scaleX(.9)
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2)
  }
}

.animate__bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(.985);
    transform: translate3d(0, -10px, 0) scaleY(.985)
  }

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

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3)
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(.985);
    transform: translate3d(0, -10px, 0) scaleY(.985)
  }

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

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3)
  }
}

.animate__bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.animate__fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig
}

@-webkit-keyframes fadeInTopLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes fadeInTopLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__fadeInTopLeft {
  -webkit-animation-name: fadeInTopLeft;
  animation-name: fadeInTopLeft
}

@-webkit-keyframes fadeInTopRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes fadeInTopRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__fadeInTopRight {
  -webkit-animation-name: fadeInTopRight;
  animation-name: fadeInTopRight
}

@-webkit-keyframes fadeInBottomLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes fadeInBottomLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__fadeInBottomLeft {
  -webkit-animation-name: fadeInBottomLeft;
  animation-name: fadeInBottomLeft
}

@-webkit-keyframes fadeInBottomRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes fadeInBottomRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__fadeInBottomRight {
  -webkit-animation-name: fadeInBottomRight;
  animation-name: fadeInBottomRight
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

.animate__fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
}

@keyframes fadeOutDown {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
}

.animate__fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0)
  }
}

@keyframes fadeOutDownBig {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0)
  }
}

.animate__fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }
}

.animate__fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft
}

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0)
  }
}

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0)
  }
}

.animate__fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }
}

.animate__fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight
}

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0)
  }
}

@keyframes fadeOutRightBig {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0)
  }
}

.animate__fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
}

.animate__fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp
}

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0)
  }
}

@keyframes fadeOutUpBig {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0)
  }
}

.animate__fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig
}

@-webkit-keyframes fadeOutTopLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0)
  }
}

@keyframes fadeOutTopLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0)
  }
}

.animate__fadeOutTopLeft {
  -webkit-animation-name: fadeOutTopLeft;
  animation-name: fadeOutTopLeft
}

@-webkit-keyframes fadeOutTopRight {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0)
  }
}

@keyframes fadeOutTopRight {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0)
  }
}

.animate__fadeOutTopRight {
  -webkit-animation-name: fadeOutTopRight;
  animation-name: fadeOutTopRight
}

@-webkit-keyframes fadeOutBottomRight {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0)
  }
}

@keyframes fadeOutBottomRight {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0)
  }
}

.animate__fadeOutBottomRight {
  -webkit-animation-name: fadeOutBottomRight;
  animation-name: fadeOutBottomRight
}

@-webkit-keyframes fadeOutBottomLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0)
  }
}

@keyframes fadeOutBottomLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0)
  }
}

.animate__fadeOutBottomLeft {
  -webkit-animation-name: fadeOutBottomLeft;
  animation-name: fadeOutBottomLeft
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  40% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  50% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg);
    transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  to {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  40% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  50% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg);
    transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  to {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }
}

.animate__animated.animate__flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  60% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
    opacity: 1
  }

  80% {
    -webkit-transform: perspective(400px) rotateX(-5deg);
    transform: perspective(400px) rotateX(-5deg)
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  60% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
    opacity: 1
  }

  80% {
    -webkit-transform: perspective(400px) rotateX(-5deg);
    transform: perspective(400px) rotateX(-5deg)
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }
}

.animate__flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-20deg);
    transform: perspective(400px) rotateY(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  60% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
    opacity: 1
  }

  80% {
    -webkit-transform: perspective(400px) rotateY(-5deg);
    transform: perspective(400px) rotateY(-5deg)
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-20deg);
    transform: perspective(400px) rotateY(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  60% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
    opacity: 1
  }

  80% {
    -webkit-transform: perspective(400px) rotateY(-5deg);
    transform: perspective(400px) rotateY(-5deg)
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }
}

.animate__flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }

  30% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    opacity: 1
  }

  to {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0
  }
}

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }

  30% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    opacity: 1
  }

  to {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0
  }
}

.animate__flipOutX {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-animation-duration: calc(var(--animate-duration)*0.75);
  animation-duration: calc(var(--animate-duration)*0.75);
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }

  30% {
    -webkit-transform: perspective(400px) rotateY(-15deg);
    transform: perspective(400px) rotateY(-15deg);
    opacity: 1
  }

  to {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }

  30% {
    -webkit-transform: perspective(400px) rotateY(-15deg);
    transform: perspective(400px) rotateY(-15deg);
    opacity: 1
  }

  to {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0
  }
}

.animate__flipOutY {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-animation-duration: calc(var(--animate-duration)*0.75);
  animation-duration: calc(var(--animate-duration)*0.75);
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY
}

@-webkit-keyframes lightSpeedInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0
  }

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

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

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes lightSpeedInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0
  }

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

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

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__lightSpeedInRight {
  -webkit-animation-name: lightSpeedInRight;
  animation-name: lightSpeedInRight;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out
}

@-webkit-keyframes lightSpeedInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0
  }

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

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

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes lightSpeedInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0
  }

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

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

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__lightSpeedInLeft {
  -webkit-animation-name: lightSpeedInLeft;
  animation-name: lightSpeedInLeft;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out
}

@-webkit-keyframes lightSpeedOutRight {
  0% {
    opacity: 1
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0
  }
}

@keyframes lightSpeedOutRight {
  0% {
    opacity: 1
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0
  }
}

.animate__lightSpeedOutRight {
  -webkit-animation-name: lightSpeedOutRight;
  animation-name: lightSpeedOutRight;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in
}

@-webkit-keyframes lightSpeedOutLeft {
  0% {
    opacity: 1
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0
  }
}

@keyframes lightSpeedOutLeft {
  0% {
    opacity: 1
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0
  }
}

.animate__lightSpeedOutLeft {
  -webkit-animation-name: lightSpeedOutLeft;
  animation-name: lightSpeedOutLeft;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

@keyframes rotateIn {
  0% {
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

.animate__rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
  -webkit-transform-origin: center;
  transform-origin: center
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

.animate__rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

@keyframes rotateInDownRight {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

.animate__rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

.animate__rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

@keyframes rotateInUpRight {
  0% {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

.animate__rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom
}

@-webkit-keyframes rotateOut {
  0% {
    opacity: 1
  }

  to {
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0
  }
}

@keyframes rotateOut {
  0% {
    opacity: 1
  }

  to {
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0
  }
}

.animate__rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
  -webkit-transform-origin: center;
  transform-origin: center
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    opacity: 1
  }

  to {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0
  }
}

@keyframes rotateOutDownLeft {
  0% {
    opacity: 1
  }

  to {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0
  }
}

.animate__rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom
}

@-webkit-keyframes rotateOutDownRight {
  0% {
    opacity: 1
  }

  to {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0
  }
}

@keyframes rotateOutDownRight {
  0% {
    opacity: 1
  }

  to {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0
  }
}

.animate__rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom
}

@-webkit-keyframes rotateOutUpLeft {
  0% {
    opacity: 1
  }

  to {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0
  }
}

@keyframes rotateOutUpLeft {
  0% {
    opacity: 1
  }

  to {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0
  }
}

.animate__rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    opacity: 1
  }

  to {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0
  }
}

@keyframes rotateOutUpRight {
  0% {
    opacity: 1
  }

  to {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0
  }
}

.animate__rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom
}

@-webkit-keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
  }

  20%,
  60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
  }

  40%,
  80% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0
  }
}

@keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
  }

  20%,
  60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
  }

  40%,
  80% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0
  }
}

.animate__hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-duration: calc(var(--animate-duration)*2);
  animation-duration: calc(var(--animate-duration)*2);
  -webkit-animation-name: hinge;
  animation-name: hinge;
  -webkit-transform-origin: top left;
  transform-origin: top left
}

@-webkit-keyframes jackInTheBox {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) rotate(30deg);
    transform: scale(.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
  }

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

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

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes jackInTheBox {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) rotate(30deg);
    transform: scale(.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
  }

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

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

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

.animate__jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox
}

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
    transform: translate3d(-100%, 0, 0) rotate(-120deg)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
    transform: translate3d(-100%, 0, 0) rotate(-120deg)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn
}

@-webkit-keyframes rollOut {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
    transform: translate3d(100%, 0, 0) rotate(120deg)
  }
}

@keyframes rollOut {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
    transform: translate3d(100%, 0, 0) rotate(120deg)
  }
}

.animate__rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut
}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }

  50% {
    opacity: 1
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }

  50% {
    opacity: 1
  }
}

.animate__zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn
}

@-webkit-keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

@keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

.animate__zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown
}

@-webkit-keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

@keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

.animate__zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft
}

@-webkit-keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

@keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

.animate__zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight
}

@-webkit-keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

@keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

.animate__zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp
}

@-webkit-keyframes zoomOut {
  0% {
    opacity: 1
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }

  to {
    opacity: 0
  }
}

@keyframes zoomOut {
  0% {
    opacity: 1
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }

  to {
    opacity: 0
  }
}

.animate__zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

.animate__zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
  }

  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
    transform: scale(.1) translate3d(-2000px, 0, 0)
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
  }

  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
    transform: scale(.1) translate3d(-2000px, 0, 0)
  }
}

.animate__zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
  -webkit-transform-origin: left center;
  transform-origin: left center
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
  }

  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
    transform: scale(.1) translate3d(2000px, 0, 0)
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
  }

  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
    transform: scale(.1) translate3d(2000px, 0, 0)
  }
}

.animate__zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
  -webkit-transform-origin: right center;
  transform-origin: right center
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

.animate__zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom
}

@-webkit-keyframes slideInDown {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes slideInDown {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown
}

@-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft
}

@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes slideInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight
}

@-webkit-keyframes slideInUp {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes slideInUp {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp
}

@-webkit-keyframes slideOutDown {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
}

@keyframes slideOutDown {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
}

.animate__slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown
}

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }
}

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }
}

.animate__slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }
}

@keyframes slideOutRight {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }
}

.animate__slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
}

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
}

.animate__slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp
}
/* /ANIMATE */
/* COMPONENT */
.component-loader,
.component-loader:after {
    border-radius: 50%;
}

.component-loader {
    text-indent: -9999em;
    border-top: 1.1em solid rgba(120,120,120, 0.2);
    border-right: 1.1em solid rgba(120,120,120, 0.2);
    border-bottom: 1.1em solid rgba(120,120,120, 0.2);
    border-left: 1.1em solid #00aaee;
    
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: spinner 6s infinite linear;
    animation: spinner 0.6s infinite linear;
}

.component-loader-mask {
    position: fixed;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
/* /COMPONENT */
/* DATA COMPONENT */

/* CHECKBOX */
.data-type-checkbox-checked {
    font-size: 1.8rem;
    vertical-align: middle;
}

.data-type-checkbox-unchecked {
    font-size: 1.8rem;
    color: #dddddd;
    vertical-align: middle;
}

/* ICON */
.data-type-icon {
    font-size: 2.4rem;
}

/* COLOR */
.data-type-color {
    display: inline-block;
    min-width: 2.4rem;
    height: 2.4rem;
    text-align: center;
    padding: 0.8rem;
    border-radius: var(--panel-border-radius);
    box-shadow: var(--shadow-1);
}

/* ATTACHMENT */
.data-type-attachments-container {
    display: flex;
    flex-flow: row;
    height: 100%;
}

.data-type-attachment-image {
    object-fit: cover;
    border: solid 2px #dddddd;
    margin: 0.2rem;
    height: 90%;
    cursor: pointer;
}

.data-type-attachment-image:hover {
    border-color: #bbbbbb;
}

.data-type-attachment-icon {
    line-height: 3.2rem !important;
    max-height: 3.6rem;
    font-size: 2.7rem;
    width: 2.8rem;
    text-align: center;
    border: solid 2px #dddddd;
    margin: 0.2rem;
    border-radius: 0.5rem;
    cursor: pointer;
}

.data-type-attachment-icon:hover {
    border-color: #bbbbbb;
}

/* /DATA COMPONENT */
/* BLOCK */
.a-block {
    display: block;
    overflow: hidden;
}

.block-droppable {
    padding: 1rem;
    border-color: transparent #00aaee transparent transparent;
    border-width: 1px;
    border-style: solid;
}

.block-droppable:hover {
    border-color: #00aaee;
    border-style: dashed;
    background-color: #fafafa;
}
/* /BLOCK */
/* PANEL (and derivatives) */
.a-panel {
    display: flex;
    flex-flow: column;
    background: var(--panel-background);
    border-style: var(--panel-border-style);
    border-width: var(--panel-border-width);
    border-color: var(--panel-border);
    border-radius: var(--panel-border-radius);
    box-shadow: var(--panel-box-shadow);
    user-select: none;
}

/* Panel mask for modal windows */
.panel-mask {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.3);
}

/* Panel header and header items */
.panel-header {
    display: flex;
    flex-flow: row;
    align-items: center;
    padding: 0.8rem;
    font-weight: bold;
    line-height: 2.4rem;
    background: var(--panel-header);
    border-radius: var(--panel-border-radius) var(--panel-border-radius) 0 0;
}

.panel-header-collapsible {
    cursor: pointer;
}

.panel-header-draggable {
    cursor: move;
}

.panel-title {
    color: #ffffff;
    font-size: 1.6rem;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 1rem;
}

.panel-icon {
    margin: 0 1rem 0 0.5rem;
    color: #ffffff;
    font-size: 1.6rem;
    vertical-align: middle;    
}

.panel-buttons {
    color: #ffffff;
    font-size: 2.2rem;
    margin-right: 1rem;
    cursor: pointer;
}

.panel-button {
    box-shadow: none !important;
    padding: 0 !important;
    margin-right: 0.5rem;
}

.panel-custom-buttons {
    display: flex;
    flex-flow: row;
    align-items: center;
}

.panel-custom-icons {
    display: flex;
    flex-flow: row;
    align-items: center;
}

@media (hover: hover) {
    .panel-buttons:hover {
        color: black;
    }
    
    .panel-button-close:hover {
        transform: rotate(90deg);
        transition: all 0.2s;
    }
}

/* Panel body and content */
/* Only the bottom corners must be rounded when there is a header */
/* All corners must be rounded when there is no header */
.panel-body {
    border-radius: 0 0 var(--panel-border-radius) var(--panel-border-radius);
    padding: var(--panel-padding);
    overflow: hidden;
    flex: 1;
}

.panel-body-no-header {
    border-radius: var(--panel-border-radius);
    padding: var(--panel-padding);
    overflow: hidden;
    flex: 1;
}
/* /PANEL */
/* CALENDAR */
.a-calendar {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    user-select: none;
}

.calendar-body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 4rem);
}

.calendar-title {
    font-size: 1.6rem;
    font-weight: 600;
}

.a-calendar-mobile .calendar-title {
    font-size: 1.2rem;
}

.calendar-header {
    display: flex;
    flex-flow: row;
    align-items: center;
    height: 3.2rem;
}

.calendar-header-title {
    flex: 1;
    text-align: center;
    background: var(--datacomponent-header-background);
    padding: 0.5rem;
    margin: 0.2rem;
    border-radius: 2.4rem;
}

.a-calendar-mobile .calendar-header-title {
    font-size: 1rem;
}

.calendar-week {
    display: flex;
    flex-flow: row;
    flex: 1;
    overflow: hidden;
}

.calendar-day {
    font-weight: bold;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
    flex: 1;
    border: 1px solid var(--panel-border);
    border-radius: 0.5rem;
    padding: 0.5rem;
    margin: 0.2rem;
    overflow: hidden;
}

.calendar-today {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 3.2rem;
}

.day-items {
    overflow-y: auto;
}

.calendar-weekend {
    background-color: var(--body-background-alt);
}

.calendar-no-weekend {
    display: none;
}

.calendar-otherMonth {
    font-weight: normal;
    color: #c8c8c8;
}

/* RECORDS */
.calendar-record {
    border: solid 2px;
    font-weight: normal;
    margin: 0 0 0.5rem 0;
    padding: 0.5rem;
    border-radius: var(--panel-border-radius);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow-1);
}

.calendar-record:hover {
    background-color: var(--body-background-alt);
}

.calendar-record-field {
    margin: 1rem;
}

.calendar-record-label {
    font-weight: 600;
    margin-top: 0.5rem;
}

/* TOOLBAR */
.calendar-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 4rem;
    padding: 0.5rem;
}

.calendar-toolbar .a-button {
    margin: 0 0.5rem 0 0;
    height: 3.2rem;
}

.calendar-toolbar .button-icon {
    font-size: 1.4rem;
}

.calendar-toolbar .button-text {
    font-size: 1.2rem;
}

.calendar-toolbar .spacer {
    flex: 1;
}

/* /CALENDAR */
/* CHARTVIEW */
.a-chartview {
    display: flex;
    flex-flow: column;
    box-sizing: border-box;
    user-select: none;
    flex: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.chartview-highlight {
    background: var(--blue) !important;
}

/* HELP */
.chartview-help {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 100%;
    margin: 0 auto;
    color: var(--body-alt);
    font-size: 2.4rem;
    font-weight: 600;
    background-color: var(--datacomponent-body-background);
}

.chartview-wizard {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 1rem;
}

.chartview-wizard-section {
    border-radius: var(--panel-border-radius);
    box-shadow: var(--shadow-2);
    padding: 1rem;
    margin: 1rem;
}

/* LIST OF CHART TYPES */
.chartview-field-select-value {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    
    height: 5rem !important;
    margin: 0.5rem !important;
    padding: 0.5rem !important;

    color: #ffffff;
    background: #99aabb;
    
    border: var(--field-select-value-border);
    border-radius: var(--field-select-value-border-radius);
    box-shadow: var(--select-value-shadow);
    cursor: pointer;
}

.chartview-wizard-setup-select-icon {
    font-size: 3.2rem;
    margin: 1rem;
}

/* CHARTVIEW TOOLBAR */
.chartview-toolbar {
    height: 4rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: var(--datacomponent-toolbar-background);
}

.chartview-toolbar .a-button {
    margin: 0;
    height: 3.2rem;
}

.chartview-toolbar .button-icon {
    font-size: 1.4rem;
}

.chartview-toolbar .button-text {
    font-size: 1.2rem;
}

.chartview-toolbar .spacer {
    flex: 1
}

/* CHARTVIEW CONTAINER */
.chartview-container {
    display: flex;
    flex-flow: column;
    height: 100%;
    margin: 1rem;
    background-color: var(--datacomponent-body-background);
    border-radius: var(--panel-border-radius);
    box-shadow: var(--shadow-2);
}

.chartview-container:hover {
    box-shadow: var(--shadow-3);
    border-color: var(--panel-border);
}

.chartview-container-empty::before {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--body-alt);
    font-size: 12.8rem;
    min-width: 100%;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f49e";
}

.chartview-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem 0 1rem;
    background-color: var(--datacomponent-toolbar-background);
    border-radius: var(--panel-border-radius) var(--panel-border-radius) 0 0;
    border-bottom: 1px solid var(--datacomponent-cell-border);
}

.chartview-title {
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--body);
    overflow: hidden;
    text-wrap: nowrap;
}

.chartview-chart {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 100%;
    padding: 0 0.5rem;
    background-color: var(--datacomponent-body-background);
}

.chartview-number {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: xxx-large;
    font-weight: 600;
    width: 100%;
    height: calc(100% - 1rem);
    border-radius: var(--panel-border-radius);
    text-wrap: nowrap;
}

.chartview-unit {
    font-size: 2rem;
}
/* /CHARTVIEW */
/* DASHBOARD */
.a-dashboard {
    display: flex;
    flex-flow: column;
    box-sizing: border-box;
    user-select: none;
    flex: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* HELP */
.dashboard-help {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 100%;
    margin: 0 auto;
    color: var(--body-alt);
    font-size: 2.4rem;
    font-weight: 600;
    background-color: var(--datacomponent-body-background);
}

.dashboard-wizard {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 1rem;
}

.dashboard-wizard-section {
    border-radius: var(--panel-border-radius);
    box-shadow: var(--shadow-2);
    padding: 1rem;
    margin: 1rem;
}

/* DASHBOARD TOOLBAR */
.dashboard-toolbar {
    height: 4rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: var(--datacomponent-toolbar-background);
}

.dashboard-toolbar .a-button {
    margin: 0;
    height: 3.2rem;
}

.dashboard-toolbar .button-icon {
    font-size: 1.4rem;
}

.dashboard-toolbar .button-text {
    font-size: 1.2rem;
}

.dashboard-toolbar .spacer {
    flex: 1;
}

/* DASHBOARD CONTAINER */
.dashboard-container {
    display: flex;
    flex-flow: column;
    height: 100%;
    background-color: var(--datacomponent-body-background);
}

.dashboard-groups {
    display: flex;
    flex-flow: column;
    align-items: center;
    overflow-y: auto;
    width: 100%;
    height: 100%;
    background-color: var(--datacomponent-body-background);
}

.dashboard-group {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    width: calc(100% - 2rem);
    height: 40vh;
    margin: 1rem;
    padding: 0.5rem;
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-border-radius);
    background: var(--body-background-alt);
    cursor: pointer;
}

.dashboard-group:hover {
    border-color: var(--body);
}

.dashboard-container:hover {
    box-shadow: var(--shadow-3);
    border-color: var(--panel-border);
}

.dashboard-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem 0 1rem;
    background-color: var(--datacomponent-toolbar-background);
    border-bottom: 1px solid var(--datacomponent-cell-border);
}

.dashboard-title {
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--body);
}

/* @media print {
    body * {
        visibility: hidden;
        margin: 0;
        padding: 0;
    }

    canvas {
        display: block;
        max-width: 100%;
        height: auto;
    }

    .dashboard-container {
        display: flex;
        flex-flow: column;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--datacomponent-body-background);
    }

    .dashboard-container * {
        visibility: visible;
    }

    .dashboard-container img {
        display: block;
        width: 100%;
        max-width: fit-content;
        height: 100%;
        max-height: fit-content;
    }

    .dashboard-group {
        padding: 0;
        border: none;
    }

    .a-button,
    .a-button * {
        visibility: hidden !important;
    }
} */

/* /DASHBOARD *//* DATATABLE

It's the most compex UI component of KissJS library, so it deserves a few explanations.

The first column of the body is statically positionned on the side of the screen.
For this, the CSS uses a body "container" with 2 components:
- a div for the first column
- a div for other columns

body container:
-----------------------------
| fixed  | body             |
| body's | (other columns)  |
| 1st    |                  |
| column |                  |
|        |                  |
|        |                  |
|        |                  |
-----------------------------

The same principle is used for the datatable header columns.
The virtual scrollbar is achieved with a fixed positionned layer on top of the datatable.

*/

/* DATATABLE */
.a-datatable {
    display: block;
    box-sizing: border-box;
    flex: 1;
}

.datatable {
    display: flex;
    flex-flow: column;
    user-select: none;
}

/* DATATABLE TOOLBAR */
.datatable-toolbar {
    height: 4rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: var(--datacomponent-toolbar-background);
    padding: 0.5rem;
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: var(--datacomponent-cell-border);
}

.datatable-toolbar .a-button {
    margin: 0 0.5rem 0 0;
    height: 3.2rem;
}

.datatable-toolbar .button-icon {
    font-size: 1.4rem;
}

.datatable-toolbar .button-text {
    font-size: 1.2rem;
}

.datatable-toolbar .spacer {
    flex: 1;
}

.datatable-toolbar-pager-index {
    max-height: 3.2rem;
    line-height: 3.2rem;
    margin: 0 0.5rem 0 0.5rem;
    white-space: nowrap;
    font-size: 1.1rem;
}

.datatable-toolbar-search {
    width: 3.2rem;
    font-size: 2rem;
    text-align: center;
}

/* DATATABLE HEADER */
.datatable-header-container {
    display: flex;
    flex-direction: row;
}

.datatable-header {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    min-height: var(--datacomponent-header-height);
    border-style: solid;
    border-width: 1px 0;
    border-color: var(--datacomponent-alternate-border);
}

/* FIRST COLUMN HEADER */
.datatable-header-1st-column {
    display: flex;
    align-items: center;
    width: var(--datacomponent-1st-column-width);
    min-width: var(--datacomponent-1st-column-width);
    background-color: var(--datacomponent-header-background);
    border-style: solid;
    border-width: 1px 1px 1px 0;
    border-color: var(--datacomponent-alternate-border);
}

/* FIRST COLUMN HEADER CHECKBOX */
.datatable-header-checkbox {
    padding: 0 0 0 0.4rem;
    font-size: 1.8rem;
    width: 100%;
}

.datatable-header-checkbox:hover {
    background: var(--datacomponent-header-background-hover);
    cursor: pointer;
}

.datatable-header-checkbox-on::after {
    content: "\f14a";
    font-family: "Font Awesome 5 Free";
    font-weight: 200;
    font-size: 1.8rem;
}

.datatable-header-checkbox-off::after {
    content: "\f0c8";
    font-family: "Font Awesome 5 Free";
    font-weight: 200;
    font-size: 1.8rem;
}

.datatable-header-checkbox:hover {
    color: var(--datacomponent-interaction-hover);
}

/* COLUMN HEADER */
.datatable-column-header {
    background: var(--datacomponent-header-background);
    display: inline-flex;
    flex-direction: row;
    white-space: nowrap;
    min-height: 3.2rem;
    line-height: 3.2rem;
}

.datatable-column-header:hover {
    background-color: var(--datacomponent-header-background-hover);
}

.datatable-column-header-1st {
    padding: 0;
    border-color: var(--datacomponent-cell-border);
    border-style: solid;
    border-width: 0 0 0 1px;
}

.datatable-column-header-title {
    min-width: 17.4rem;
    width: 17.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--datacomponent-header);
    vertical-align: middle;
    font-size: 1.4rem;
    font-weight: normal;
    cursor: grab;
    user-select: none;
}

.datatable-column-header-icon {
    font-size: 1.1rem;
    color: var(--datacomponent-interaction-hover);
    margin: 0 0.5rem 0 0.3rem;
}

/* COLUMN HEADER PROPERTIES MENU */
.datatable-column-header-properties {
    min-width: 1rem;
    padding-top: 1.2rem;
    font-size: 1rem;
    cursor: pointer;
}

.datatable-column-header-properties:hover {
    color: var(--datacomponent-interaction-hover);
}

/* COLUMN HEADER RESIZER */
.datatable-column-header-resizer {
    min-width: 0.5rem;
    height: 100%;
    cursor: ew-resize;
    border-radius: 1rem;
}

.datatable-column-header-resizer:hover {
    background-color: var(--datacomponent-interaction-hover);
}

/* COLUMN DRAG & DROP */
.datatable-column-dragover-right {
    border-style: solid;
    border-width: 0 1px 0 0 !important;
    border-color: var(--datacomponent-interaction-hover) !important;
}

.datatable-column-dragover-left {
    border-style: solid;
    border-width: 0 0 0 1px !important;
    border-color: var(--datacomponent-interaction-hover) !important;
}

/* LAST COLUMN HEADER */
.datatable-header-last-column {
    min-width: 5rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.datatable-header-last-column > span {
    font-size: 1.6rem;
    padding: 0.8rem;
}

.datatable-header-last-column > span:hover {
    transform: rotate(90deg);
    transition: all 0.2s;
}

/* DATATABLE BODY */
.datatable-body-container {
    display: flex;
    flex-flow: row;
    overflow: hidden;
    height: 100%;
    background-color: var(--datacomponent-body-background);
}

.datatable-body-container-empty::before {
    color: var(--body-alt);
    font-size: 12.8rem;
    position: relative;
    top: 35%;
    left: calc(50% - var(--datacomponent-1st-column-width) / 2);
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* 200 for regular icons, 900 for solid icons */
    content: "\f49e"; /*  fas fa-box-open */
    transition: all 1s;
}

.datatable-body-1st-column {
    display: flex;
    flex-flow: column;
    min-width: var(--datacomponent-1st-column-width);
    width: var(--datacomponent-1st-column-width);
}

.datatable-body {
    display: flex;
    flex-flow: column;
    overflow-y: hidden;
    background-color: var(--datacomponent-body-background);
}

/* ROWS */
.datatable-row {
    display: block;
    white-space: nowrap;
    width: min-content;
    background-color: var(--datacomponent-cell-background);
}

.datatable-row:hover {
    background-color: var(--datacomponent-row-hover);
}

.datatable-row-selected {
    background-color: var(--datacomponent-row-selected);
}

/* ROW NUMBER */
.datatable-row-number {
    display: inline-block;
    padding-left: 0.5rem;
    width: 100%;
}

/* ROW CHECKBOX */
.datatable-row-checkbox {
    margin-right: 0.8rem;
    color: var(--datacomponent-1st-column);
}

.datatable-row-checkbox-on::after {
    content: "\f14a";
    font-family: "Font Awesome 5 Free";
    font-weight: 200;
    font-size: 1.8rem;
}

.datatable-row-checkbox-off::after {
    content: "\f0c8";
    font-family: "Font Awesome 5 Free";
    font-weight: 200;
    font-size: 1.8rem;
}

.datatable-row-checkbox:hover {
    color: var(--datacomponent-interaction-hover);
}

/* ROW EXPAND / ROW ACTION */
.datatable-row-action {
    padding: 0.8rem;
}

.datatable-cell-1st:hover .datatable-row-action {
    padding: 0.8rem;
    color: var(--datacomponent-interaction-hover);
}

.datatable-row-action:hover {
    transition: all 0.1s;
    color: var(--datacomponent-interaction-hover) !important;
    font-size: 1.6rem;
}

/* Mobile don't need row action column */
.a-datatable-mobile .datatable-row-action {
    display: none;
}

/* CELL */
.datatable-cell {
    display: inline-block;
    align-items: center;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;

    min-height: var(--datacomponent-cell-height);
    max-height: var(--datacomponent-cell-height);
    line-height: var(--datacomponent-cell-height);
    height: 100%;
    padding: var(--datacomponent-cell-padding);

    color: var(--datacomponent-cell);
    border-color: var(--datacomponent-cell-border);
    border-style: solid;
    border-width: 0 1px 1px 0;
    font-size: 1.2rem;
    font-weight: normal;
    user-select: none;
}

/* SELECTED CELL */
.datatable-cell-selected {
    color: var(--datacomponent-interaction-hover);
    border-color: var(--datacomponent-interaction-hover) !important;
    border-width: 1px !important;
    cursor: pointer;
    outline: none;
}

.datatable-cell-selected-locked {
    color: var(--red);
    border-color: var(--red) !important;
}

.datatable-cell-selected-locked::after {
    content: "\f023";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.8rem;
    color: var(--red);
    margin-left: 0.5rem;
}

.datatable-cell-copied {
    background-color: var(--body-alt);
}

/* EDITED CELL */
.datatable-cell-edited {
    font-size: 1.2rem;
}

/* FIRST COLUMN CELL */
.datatable-cell-1st {
    width: var(--datacomponent-1st-column-width);

    display: inline-flex;
    flex-flow: row;
    align-items: center;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;

    height: var(--datacomponent-cell-height);
    padding: var(--datacomponent-cell-padding);

    color: var(--datacomponent-1st-column);
    background-color: var(--datacomponent-1st-column-background);
    border-style: solid;
    border-width: 0 1px 1px 1px;
    border-color: var(--datacomponent-cell-border);
    user-select: none;
    cursor: pointer;
}

/* LAST COLUMN CELL (just for spacing) */
.datatable-cell-blank {
    min-width: 5rem;
}

/* DATATABLE CELL TYPES */

/* TEXT */
.datatable-type-text {
    text-align: left;
}

/* TEXTAREA, AI TEXTAREA, RICH TEXT FIELD */
.datatable-type-textarea, .datatable-type-aiTextarea, .datatable-type-richTextField {
    display: inline-flex;
    justify-content: left;
    white-space: pre-wrap;
    flex-wrap: wrap;
    line-height: unset;
    cursor: pointer;
}

/* NUMBER */
.datatable-type-number {
    text-align: right;
}

/* DATE */
.datatable-type-date {
    text-align: center;
}

.datatable-cell input[type=date] {
    font-size: 1.2rem;
}

/* PASSWORD */
.datatable-type-password {
    text-align: center;
}

/* CHECKBOX */
.datatable-type-checkbox {
    text-align: center;
}

/* COLOR */
.datatable-type-color {
    display: inline-block;
    min-width: 2.4rem;
    height: 2.4rem;
    text-align: center;
    padding: 0.8rem;
    cursor: pointer;
}

/* ICON */
.datatable-type-icon {
    text-align: center;
    cursor: pointer;
}

/* ATTACHMENT */
.datatable-type-attachment {
    display: inline-flex;
    align-items: inherit;
    overflow: hidden;
    height: 100%;
}

/* BUTTON */
.datatable-cell-button {
    height: 3rem;
    border-width: 2px;
}

/* LINK */
.datatable-type-link {
    text-align: center;
    cursor: pointer;
}

/* GROUP SECTION */
.datatable-group {
    position: relative;
    display: flex;
    align-items: center;
    white-space: nowrap;
    height: var(--datacomponent-group-cell-height);
    line-height: var(--datacomponent-group-cell-height);
    color: var(--datacomponent-group-text);
    cursor: pointer;
    padding: 0 3.2rem 0 3.2rem;
    border-color: var(--datacomponent-alternate-border);
    border-style: solid;
    border-width: 0 0 1px 0;
    background-color: var(--datacomponent-group-background);
}

/* GROUP AGGREGATION TYPE (sum, avg...) */
.datatable-group-summary {
    color: var(--datacomponent-group-background);
}

.datatable-group-summary>span {
    font-size: 1rem;
    font-weight: normal;
    margin: 0 1rem 0 0.5rem;
}

.datatable-group-summary:hover {
    color: var(--body);
}

/* GROUP HIERARCHY NUMBER */
.datatable-group-hierarchy {
    color: var(--datacomponent-group-text);
    font-weight: bold;
    margin-right: 10rem;
}

/* GROUP HIERARCHY INDENTATION */
.datatable-group-level-1 {
    border-width: 0 0 1px 3.2rem;
}

.datatable-group-level-2 {
    border-width: 0 0 1px 6.4rem;
}

.datatable-group-level-3 {
    border-width: 0 0 1px 9.6rem;
}

.datatable-group-level-4 {
    border-width: 0 0 1px 12.8rem;
}

.datatable-group-level-5 {
    border-width: 0 0 1px 16rem;
}

/* GROUP ROW */
.datatable-group-row {
    display: block;
    white-space: nowrap;
    width: min-content;
    background-color: var(--datacomponent-group-background);
    cursor: pointer;
}

.datatable-group-row:hover {
    background-color: var(--datacomponent-row-hover);
}

/* GROUP CELL */
.datatable-group-cell {
    display: inline-block;
    padding: var(--datacomponent-group-cell-padding);
    min-height: var(--datacomponent-group-cell-height);
    max-height: var(--datacomponent-group-cell-height);
    line-height: var(--datacomponent-group-cell-height);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    text-align: right;
    color: var(--datacomponent-group-text);
    font-size: 1.4rem;
    font-weight: bold;
    user-select: none;
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: var(--datacomponent-alternate-border);
}

/* GROUP EXPAND / COLLAPSE ICON */
.datatable-group-expanded::after {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 2rem;
    margin-right: 1rem;
    color: #777777;
}

.datatable-group-collapsed::after {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 2rem;
    margin-right: 1rem;
    color: #777777;
}

/* VIRTUAL SCROLLER */
.datatable-virtual-scroller-container {
    visibility: hidden;
    position: fixed;
    z-index: 0;
    width: 1.9rem;
    overflow-y: scroll;
    opacity: 0.85;
}

.datatable-virtual-scroller-container:hover {
    opacity: 1;
}
/* /DATATABLE */
/* GALLERY */
.a-gallery {
    display: block;
    box-sizing: border-box;
    flex: 1;
}

.gallery {
    display: flex;
    flex-flow: column;
    user-select: none;
}

/* GALLERY TOOLBAR */
.gallery-toolbar {
    height: 4rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: var(--datacomponent-toolbar-background);
    padding: 0.5rem;
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: var(--datacomponent-cell-border);
}

.gallery-toolbar .a-button {
    margin: 0 0.5rem 0 0;
    height: 3.2rem;
}

.gallery-toolbar .button-icon {
    font-size: 1.4rem;
}

.gallery-toolbar .button-text {
    font-size: 1.2rem;
}

.gallery-toolbar .spacer {
    flex: 1;
}

/* GALLERY BODY */
.gallery-body-container {
    overflow-x: auto;
    height: 100%;
    background-color: var(--datacomponent-body-background);
}

.gallery-body {
    display: flex;
    flex-flow: column;
    width: 100%;
    background-color: var(--datacomponent-body-background);
}

.gallery-body-no-group {
    display: inline-flex !important;
    flex-flow:unset !important;
    flex-wrap: wrap !important;
}

.gallery-body-container-empty::before {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--body-alt);
    font-size: 12.8rem;
    min-width: 100%;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f49e";
    height: 90%;
}

.gallery-group-container {
    display: inline-flex;
    flex-wrap: wrap;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 1rem 1rem 0 1rem;
    padding: 2rem;
    background: var(--body-background-alt);
    border-radius: var(--panel-border-radius);
    border: solid 1px var(--panel-border);
}

.gallery-group {
    display: flex;
    align-items: center;
    width: 100%;
    color: var(--blue);
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 0.2rem 0;
    padding: 1rem;
    border-style: solid;
    border-width: 1px;
    border-radius: var(--panel-border-radius);
    border-color: var(--panel-border);
    background: var(--body-background);
    cursor: pointer;
}

.gallery-group:hover {
    background-color: var(--body-background-alt);
}

/* GROUP EXPAND / COLLAPSE ICON */
.gallery-group-expanded::before {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 2rem;
    margin-right: 1rem;
    color: #777777;
}

.gallery-group-collapsed::before {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 2rem;
    margin-right: 1rem;
    color: #777777;
}

/* CHECKBOX */
.gallery-checkbox {
    font-size: 2rem;
    margin: 0 0 0.5rem 0;
    color: var(--datacomponent-1st-column);
}

.gallery-checkbox:hover {
    color: var(--datacomponent-interaction-hover);
}

/* RECORDS */
.gallery-record {
    font-weight: normal;
    margin: 0 0 1rem 0;
    padding: 0.5rem;
    border-radius: var(--panel-border-radius);
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow-4);
    background: var(--body-background);
    min-width: calc(var(--gallery-column-width) + 2rem);
    max-width: calc(var(--gallery-column-width) + 2rem);
    margin: 1rem;
}

.gallery-record:hover {
    box-shadow: var(--shadow-2);
    transition: all 0.1s;
}

.gallery-record-selected {
    background-color: var(--datacomponent-row-selected);
}

.gallery-record-field {
    margin: 10px;
}

.gallery-record-label {
    font-weight: 600;
    margin-top: 0.5rem;
}

.gallery-record-button {
    display: flex;
    width: 95%;
    padding: 2rem !important;
    height: 2.4rem;
    margin: auto;
    justify-content: center;
}

.gallery-record-button-icon {
    font-size: 1.6rem;
    margin-right: 1rem;
}

.gallery-record-index {
    font-size: 1rem;
    float: right;
    color: var(--body-alt);
}

.gallery-record-image-container {
    display: flex;
    justify-content: center;
    width: 100%;
    max-height: calc(var(--gallery-column-width) * 2 / 3);
    min-height: calc(var(--gallery-column-width)* 2 / 3);
    border: solid 1px var(--body-alt);
    border-radius: 5px;
    overflow: hidden;
}

.gallery-record-image {
    object-fit: none;
;}

.gallery-record-icon {
    font-size: 8rem;
    align-self: center;
}

.gallery-record-empty {
    color: var(--body-alt);
    font-size: 8rem;
    align-self: center;
}

/* /GALLERY */
/* KANBAN */
.a-kanban {
    display: block;
    box-sizing: border-box;
    flex: 1;
}

.kanban {
    display: flex;
    flex-flow: column;
    user-select: none;
}

/* HELP */
.kanban-help {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 100%;
    margin: 0 auto;
    color: var(--body-alt);
    font-size: 2.4rem;
    font-weight: 600;
    background-color: var(--datacomponent-body-background);
}

/* KANBAN TOOLBAR */
.kanban-toolbar {
    height: 4rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: var(--datacomponent-toolbar-background);
    padding: 0.5rem;
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: var(--datacomponent-cell-border);
}

.kanban-toolbar .a-button {
    margin: 0 0.5rem 0 0;
    height: 3.2rem;
}

.kanban-toolbar .button-icon {
    font-size: 1.4rem;
}

.kanban-toolbar .button-text {
    font-size: 1.2rem;
}

.kanban-toolbar .spacer {
    flex: 1;
}

/* KANBAN HEADER */
.kanban-header-container {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important;  /* IE, Edge */
}

.kanban-header-container::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, Opera */
}

.kanban-header {
    display: flex;
    flex-direction: row;
    min-height: var(--datacomponent-header-height);
    border-style: solid;
    border-width: 1px 0 1px 0;
    border-color: var(--datacomponent-alternate-border);
}

.kanban-column-header {
    min-width: calc(var(--kanban-column-width) + 2rem);
    max-width: calc(var(--kanban-column-width) + 2rem);
    font-size: 1.4rem;
    font-weight: 600;
    display: flex;
    flex-flow: row;
    align-items: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-height: 3.2rem;
    line-height: 3.2rem;
    padding: 0.1rem;
    border-style: solid;
    border-width: 1px 1px 1px 0;
    border-color: var(--datacomponent-alternate-border);
    background: var(--datacomponent-header-background);
}

.kanban-column-header-icon {
    font-size: 1.6rem;
    margin: 0 0.5rem;
}

/* KANBAN BODY */
.kanban-body-container {
    display: flex;
    flex-flow: row;
    overflow-x: auto;
    height: 100%;
    background-color: var(--datacomponent-body-background);
}

.kanban-body {
    display: flex;
    flex-flow: row;
    width: 100%;
    background-color: var(--datacomponent-body-background);
}

.kanban-column-highlight {
    background: var(--blue) !important;
    border: dashed 1px var(--body) !important;
}

.kanban-body-container-empty::before {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--body-alt);
    font-size: 12.8rem;
    min-width: 100%;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f49e";
}

.kanban-column-container {
    min-width: var(--kanban-column-width);
    max-width: var(--kanban-column-width);
    overflow-x: hidden;
    overflow-y: auto;
    margin: 1rem;
    padding: 2rem;
    background: var(--body-background-alt);
    border-radius: var(--panel-border-radius);
    border: solid 1px var(--panel-border);
}

.kanban-column-category {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    padding: 1rem;
    border-style: solid;
    border-width: 1px;
    border-radius: var(--panel-border-radius);
    border-color: var(--panel-border);
    background: var(--body-background);
}

/* RECORDS */
.kanban-record {
    font-weight: normal;
    margin: 0 0 1rem 0;
    padding: 0.5rem;
    border-radius: var(--panel-border-radius);
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow-4);
    background: var(--body-background);
}

.kanban-record:hover {
    transform: rotate(2deg);
    box-shadow: var(--shadow-2);
    z-index: 5;
    transition: all 0.1s;
    cursor: move;
}

.kanban-record-field {
    margin: 10px;
}

.kanban-record-label {
    font-weight: 600;
    margin-top: 0.5rem;
}

.kanban-record-button {
    display: flex;
    width: 95%;
    padding: 2rem !important;
    height: 2.4rem;
    margin: auto;
    justify-content: center;
}

.kanban-record-button-icon {
    font-size: 1.6rem;
    margin-right: 1rem;
}

.kanban-record-index {
    font-size: 1rem;
    float: right;
    color: var(--body-alt);
}

/* /KANBAN */
/* LIST */
.a-list {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    user-select: none;
}

.list-body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 40px);
}

.list-title {
    font-size: 16px;
    font-weight: 600;
}

.list-header {
    display: flex;
    flex-flow: row;
    align-items: center;
    height: 32px;
}

.list-header-title {
    flex: 1;
    text-align: center;
    background: var(--datacomponent-header-background);
    padding: 5px;
    margin: 2px;
    border-radius: 24px;
}

.list-record {
    border: solid 2px;
    font-weight: normal;
    margin: 0 0 5px 0;
    padding: 5px;
    border-radius: var(--panel-border-radius);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow-1);
}

.list-record:hover {
    background-color: var(--body-background-alt);
}

.list-record-field {
    margin: 10px;
}

.list-record-label {
    font-weight: 600;
    margin-top: 5px;
}

/* TOOLBAR */
.list-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 40px;
    padding: 5px;
}

.list-toolbar .a-button {
    margin: 0px 5px 0px 0px;
    height: 32px;
}

.list-toolbar .button-icon {
    font-size: 14px;
}

.list-toolbar .button-text {
    font-size: 12px;
}

.list-toolbar .spacer {
    flex: 1
}

/* /LIST */
/* TIMELINE */
.a-timeline {
    display: block;
    box-sizing: border-box;
    flex: 1;
}

.timeline {
    display: flex;
    flex-flow: column;
    user-select: none;
}

/* TIMELINE TOOLBAR */
.timeline-toolbar {
    height: 4rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: var(--datacomponent-toolbar-background);
    padding: 0.5rem;
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: var(--datacomponent-cell-border);
}

.timeline-toolbar .a-button {
    margin: 0 0.5rem 0 0;
    height: 3.2rem;
}

.timeline-toolbar .button-icon {
    font-size: 1.4rem;
}

.timeline-toolbar .button-text {
    font-size: 1.2rem;
}

.timeline-toolbar .spacer {
    flex: 1;
}

.timeline-toolbar-pager-index {
    max-height: 3.2rem;
    line-height: 3.2rem;
    margin: 0 0.5rem 0 0.5rem;
    white-space: nowrap;
    font-size: 1.1rem;
}

.timeline-toolbar-search {
    width: 3.2rem;
    font-size: 2rem;
    text-align: center;
}

/* TIMELINE HEADER */
.timeline-header-container {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.timeline-header {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: var(--datacomponent-header-height);
    border-style: solid;
    border-width: 1px 0 1px 0;
    border-color: var(--datacomponent-alternate-border);
    width: 100%;
}

/* FIRST COLUMN HEADER */
.timeline-header-1st-column {
    display: flex;
    align-items: center;
    width: var(--timeline-1st-column-width);
    min-width: var(--timeline-1st-column-width);
    background-color: var(--datacomponent-header-background);
    border-style: solid;
    border-width: 1px 1px 1px 0;
    border-color: var(--datacomponent-alternate-border);
}

/* FIRST COLUMN HEADER CHECKBOX */
.timeline-header-checkbox {
    flex: 1;
    padding: 0 0 0 0.4rem;
    font-size: 1.8rem;
    cursor: pointer;
}

.timeline-header-checkbox-on::after {
    content: "\f14a";
    font-family: "Font Awesome 5 Free";
    font-weight: 200;
    font-size: 1.8rem;
}

.timeline-header-checkbox-off::after {
    content: "\f0c8";
    font-family: "Font Awesome 5 Free";
    font-weight: 200;
    font-size: 1.8rem;
}

.timeline-header-checkbox:hover {
    color: #000000;
}

/* COLUMN HEADER */
.timeline-column-header {
    display: inline-flex;
    flex-direction: row;
    white-space: nowrap;
    min-height: 3.2rem;
    flex: 1;
}

.timeline-column-header-1st {
    display: flex;
    align-items: center;
    padding: 0;
    border-color: var(--datacomponent-cell-border);
    border-style: solid;
    border-width: 0 0 0 1px;
    height: 100%;
}

/* COLUMN HEADER RESIZER */
.timeline-column-header-resizer {
    display: flex;
    align-items: center;
    min-width: 0.3rem;
    height: 100%;
    cursor: ew-resize;
}

.timeline-column-header-resizer:hover {
    color: #00aaee;
}

/* TIMELINE UNITS: MONTHS & DAYS */
.timeline-header-months {
    display: inline-flex;
    flex-direction: row;
    white-space: nowrap;
    min-height: 3.2rem;
    flex: 1;
}

.timeline-header-month {
    font-size: 1.2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: solid;
    border-color: var(--panel-border);
    border-width: 0 1px 1px 0;
}

.timeline-header-days {
    display: inline-flex;
    flex-direction: row;
    white-space: nowrap;
    min-height: 3.2rem;
    flex: 1;
}

.timeline-header-day {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1rem;
    flex: 1;
    border-color: var(--panel-border);
    border-style: solid;
    border-width: 0 1px 0 0;
    overflow: hidden;
    min-width: var(--timeline-day-width);
    max-width: var(--timeline-day-width);
}

.timeline-header-weekend {
    background-color: var(--body-background-alt);
}

/* TIMELINE BODY */
.timeline-body-container {
    display: flex;
    flex-flow: row;
    overflow: hidden;
    height: 100%;
    background-color: var(--datacomponent-body-background);
}

.timeline-body-container-empty::before {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--body-alt);
    font-size: 12.8rem;
    min-width: 100%;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f49e";
}

.timeline-body-1st-column {
    display: flex;
    flex-flow: column;
    min-width: var(--timeline-1st-column-width);
    width: var(--timeline-1st-column-width);
    box-shadow: var(--shadow-1);
}

.timeline-body {
    display: flex;
    flex-flow: column;
    overflow: hidden;
    background-color: var(--datacomponent-body-background);
    cursor: pointer;
}

/* ROWS */
.timeline-row {
    display: inline-flex;
    white-space: nowrap;
    width: 100%;
    background-color: var(--datacomponent-cell-background);
    height: var(--datacomponent-cell-height);
    border-style: solid;
    border-color: var(--datacomponent-cell-border);
    border-width: 0 0 1px 0;
}

.timeline-row:hover {
    background-color: var(--datacomponent-row-hover);
}

.timeline-row-selected {
    background-color: var(--datacomponent-row-selected);
}

/* ROW NUMBER */
.timeline-row-number {
    display: inline-block;
    padding: 0 0.5rem;
}

/* ROW CHECKBOX */
.timeline-row-checkbox {
    margin-right: 0.8rem;
    color: var(--datacomponent-1st-column);
}

.timeline-row-checkbox-on::after {
    content: "\f14a";
    font-family: "Font Awesome 5 Free";
    font-weight: 200;
    font-size: 1.8rem;
}

.timeline-row-checkbox-off::after {
    content: "\f0c8";
    font-family: "Font Awesome 5 Free";
    font-weight: 200;
    font-size: 1.8rem;
}

.timeline-row-checkbox:hover {
    color: #000000;
}

/* ROW TITLE */
.timeline-row-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* CELL */
.timeline-cell {
    display: flex;
    align-items: center;
    flex-flow: row;
    min-height: var(--datacomponent-cell-height);
    max-height: var(--datacomponent-cell-height);
    cursor: w-resize;
}

.timeline-cell-data {
    color: white;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.5rem;
    border-color: var(--datacomponent-cell-border);
    border-style: solid;
    border-width: 0;
    border-radius: 0.3rem;
    font-size: 1.2rem;
    font-weight: normal;
    user-select: none;
    cursor: pointer;
}

.timeline-cell-data:hover {
    transform: scale(1.01); 
    transition: all 0.1s;
}

/* FIRST COLUMN CELL */
.timeline-cell-1st {
    width: var(--timeline-1st-column-width);
    display: inline-flex;
    flex-flow: row;
    align-items: center;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    min-height: var(--datacomponent-cell-height);
    max-height: var(--datacomponent-cell-height);
    padding: 0 0.5rem;
    color: var(--body);
    background-color: var(--body-background-alt);
    border-style: solid;
    border-width: 0 1px 1px 1px;
    border-color: var(--datacomponent-cell-border);
    user-select: none;
    cursor: pointer;
}

.timeline-cell-1st:hover {
    background-color: var(--datacomponent-row-hover);
}

/* GROUP SECTION */
.timeline-group {
    position: relative;
    display: flex;
    align-items: center;
    white-space: nowrap;
    min-height: var(--datacomponent-group-cell-height);
    max-height: var(--datacomponent-group-cell-height);
    line-height: var(--datacomponent-group-cell-height);
    color: var(--datacomponent-group-text);
    cursor: pointer;
    padding: 0 3.2rem 0 3.2rem;
    border-color: var(--datacomponent-alternate-border);
    border-style: solid;
    border-width: 0 0 1px 0;
    background-color: var(--datacomponent-group-background);
}

.timeline-group-id {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--body);
    height: 100%;
    padding: 0 10rem;
    border-color: var(--datacomponent-alternate-border);
    border-style: solid;
    border-width: 1px;
}

/* GROUP HIERARCHY INDENTATION */
.timeline-group-level-1 {
    border-width: 0 0 1px 3.2rem;
}

.timeline-group-level-2 {
    border-width: 0 0 1px 6.4rem;
}

.timeline-group-level-3 {
    border-width: 0 0 1px 9.6rem;
}

.timeline-group-level-4 {
    border-width: 0 0 1px 12.8rem;
}

.timeline-group-level-5 {
    border-width: 0 0 1px 16rem;
}

/* GROUP ROW */
.timeline-group-row {
    display: block;
    width: 100%;
    background: var(--body-background-alt);
    height: var(--datacomponent-cell-height);
    border-style: solid;
    border-color: var(--datacomponent-cell-border);
    border-width: 0 0 1px 0;
}

/* GROUP CELL */
.timeline-group-cell {
    display: inline-block;
    padding: var(--datacomponent-group-cell-padding);
    min-height: var(--datacomponent-group-cell-height);
    max-height: var(--datacomponent-group-cell-height);
    line-height: var(--datacomponent-group-cell-height);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    text-align: right;
    color: var(--datacomponent-group-text);
    font-size: 1.4rem;
    font-weight: bold;
    user-select: none;
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: var(--datacomponent-alternate-border);
}

/* GROUP EXPAND / COLLAPSE ICON */
.timeline-group-expanded::after {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 2rem;
    margin-right: 1rem;
    color: #777777;
}

.timeline-group-collapsed::after {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 2rem;
    margin-right: 1rem;
    color: #777777;
}

/* VIRTUAL SCROLLER */
.timeline-virtual-scroller-container {
    visibility: hidden;
    position: fixed;
    z-index: 0;
    width: 1.9rem;
    overflow-y: scroll;
    opacity: 0.85;
}

.timeline-virtual-scroller-container:hover {
    opacity: 1;
}

/* /TIMELINE */
/* TREE LIST */
.tree {
    margin: 0px;
    padding: 0px;
    user-select: none;
}

ul .tree {
    padding-inline-start: 16px; /* Edit this to modify the indentation size */
}

/* TREE LIST: FOLDER */
.tree-folder {
    list-style: none;
}

.tree-folder > div {
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 10px;
}

.tree-folder > div:hover {
    color: var(--tree-folder-hover);
    background: var(--tree-folder-background-hover);
}

/* TREE LIST: OPENED FOLDER */
.tree-folder-open > div::before {
    font-family: "Font Awesome 5 Free";
    content: "\f07c"; /* far fa-folder-open */
    font-weight: 900; /* 200 for regular icons, 900 for solid icons */
    color: #00aaee;
    padding-right: 10px;
}

/* TREE LIST: CLOSED FOLDER */
.tree-folder-closed > div::before {
    font-family: "Font Awesome 5 Free";
    content: "\f07b"; /* far fa-folder */
    font-weight: 900; /* 200 for regular icons, 900 for solid icons */
    color: #00aaee;
    padding-right: 10px;
}

/* TREE LIST: LEAF */
.tree-leaf {
    list-style: none;
}

.tree-leaf > div {
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 10px;
}

.tree-leaf > div::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* 200 for regular icons, 900 for solid icons */
    content: "\f00b"; /* fas fa-th-list */
    color: #eeeeee;
    padding-right: 10px;
}

.tree-leaf > div:hover {
    color: var(--tree-leaf-hover);
    background: var(--tree-leaf-background-hover);
}

/* TREE LIST: MENU */
.tree-leaf-menu {
    float: right;
    width: 40px;
}

.tree-leaf-menu::after {
    float: right;
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* 200 for regular icons, 900 for solid icons */
    content: "\f142"; /* fas fa-ellipsis-v */
    color: var(--tree-leaf-menu)
}

.tree-leaf-menu:hover::after {
    color: var(--tree-leaf-menu-hover);
}
/* /TREE LIST */
/* BUTTON */
.a-button {
    display: inline-flex;
    align-items: center;
    padding: var(--button-padding);
    background: var(--button-background);
    border-style: var(--button-border-style);
    border-width: var(--button-border-width);
    border-color: var(--button-border);
    border-radius: var(--button-border-radius);
    box-shadow: var(--button-shadow);
    cursor: pointer;
    user-select: none;
    transition: var(--transition-fast);
}

@media (hover: hover) {
    .a-button:hover {
        color: var(--button-text-hover);
        background: var(--button-background-hover);
        border-color: var(--button-border-hover);
        box-shadow: var(--button-shadow-hover);
    }

    .a-button:hover > * {
        color: var(--button-text-hover);
    }
}

.button-icon {
    padding: var(--button-icon-padding);
    color: var(--button-icon);
    font-size: var(--button-icon-font-size);
    text-align: center;
}

.button-text {
    padding: var(--button-padding);
    width: var(--button-width);
    text-align: center;
    color: var(--button-text);
    font-size: var(--button-font-size);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /BUTTON */
/* DIALOG */
.panel-dialog .panel-header {
    height: 5rem;
}

.panel-dialog .panel-title {
    font-size: 2rem;
}

.panel-dialog .panel-icon {
    font-size: 2rem;
}

.panel-dialog .panel-body {
    min-width: 40rem;
    padding: 2rem;
}

@media (pointer: coarse) and (hover: none) {
    .panel-dialog .panel-body {
        min-width: unset;
        padding: 1rem;
    }
}

.panel-dialog .a-button {
    height: 4rem;
}
/* /DIALOG */
/* HTML */
.a-html {
    display: block;
}
/* /HTML */
/* IMAGE */
.a-image {
    display: inline-flex;
}

.image-caption-text {
    color: var(--body-alt);
    font-size: 0.9rem;
    margin-top: 0.5rem;
    text-align: center;
}
/* /IMAGE */
/* MENU */
.a-menu {
    overflow: auto;
    padding: 1rem;
    background: var(--menu-background);
    box-shadow: var(--shadow-4);
    border-style: solid;
    border-width: 1px;
    border-color: var(--menu-border);
    border-radius: var(--menu-border-radius);
    cursor: pointer;
    user-select: none;
}

.a-menu-mobile {
    width: 100%;
    height: 100%;
    top: 0 !important;
    left: 0 !important;
    max-height: 100% !important;
    box-shadow: unset!important;
    border-radius: unset!important;
}

.a-menu-mobile-close {
    width: 100%;    
    font-size: 1.6rem;
    padding: 1rem;
}

/* Menu items */
.a-menu .menu-item {
    padding: 1rem;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    color: var(--menu-item);
    border-radius: var(--menu-item-border-radius);
}

.a-menu .menu-item:hover {
    color: var(--menu-item-hover) !important;
    background: var(--menu-item-background-hover) !important;
    transition: all 0.1s;
}

/* Menu icons */
.a-menu .menu-item-icon {
    width: 4rem;
    padding: 0 2rem 0 0;
    
    color: inherit;
    font-size: 1.6rem;
    text-align: center;
}

/* Menu texts */
.a-menu .menu-item-text {
    color: inherit;
    font-size: 1.6rem;
    white-space: nowrap;
}

/* Menu section */
.a-menu .menu-section {
    display: block;
    color: var(--field-label);
    font-weight: var(--field-label-font-weight);
    text-align: center;
    width: 100%;
    margin: 0.8rem 0;
}

/* Menu separator */
.a-menu .menu-separator {
    margin: 1rem 0;
    display: block;
    height: 0.2rem;
    width: 100%;
    background: var(--menu-separator);
}
/* /MENU */
/* NOTIFICATION */
.a-notification {
    padding: 1rem;
    border-radius: var(--panel-border-radius);
    color: #ffffff;
    border-color: #000000;
    background-color: #000000;
    box-shadow: var(--panel-box-shadow);
}
/* /NOTIFICATION */
/* TIP */
.a-tip {
    position: fixed;
    padding: 1rem;
    border-radius: var(--panel-border-radius);
    color: var(--body-background);
    background-color: var(--body);
    box-shadow: var(--shadow-4);
    z-index: 50000;
}
/* /TIP */
/* ATTACHMENT FIELD */
.a-attachment {
    display: block;
    width: 100% !important;
    padding: var(--field-padding);
    line-height: 2rem;
}

.a-attachment:hover {
    border-color: var(--field-border-hover);
}

.field-attachment-button {
    height: 2.4rem;
    padding: 0.5rem 1rem;
    margin: 0 0.2rem 1rem 0.2rem;
    font-size: 1.2rem;
}

.field-attachment-icon {
    margin-right: 1rem;
}

.field-attachment-layout {
    display: none;
}

.field-attachment-gallery {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: center;

    width: 100%;
    border-style: solid;
    border-width: var(--field-border-width);
    border-color: var(--field-border);
    border-radius: var(--field-border-radius);
}

/* FILES */
.field-attachment-item {
    display: flex;
    flex-flow: row;
    align-items: center;
    height: 5rem;
    width: 100%;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.field-attachment-item:hover {
    background-color: var(--menu-item-background-hover);
}

.field-attachment-preview-container {
    display: block;
    text-align: center;
    margin-right: 1rem;
}

.field-attachment-preview {
    font-size: 3.2rem;
    line-height: 5rem !important;
    width: 5rem !important;
    height: 5rem;
    object-fit: contain;
    transition: all 0.2s;
}

.field-attachment-filename {
    flex: 1;
    text-align: left;
    word-break: break-all;
    margin-right: 1rem;
}

.field-attachment-buttons {
    display: inline-flex;
    align-items: center;
}

.field-attachment-filesize {
    color: var(--body);
    text-align: right;
}

.field-attachment-delete {
    width: 3.2rem;
    font-size: 1.3rem;
    text-align: center;
    color: #aaaaaa;
    cursor: pointer;
}

.field-attachment-delete:hover {
    color: #ff0000;
    font-size: 1.6rem;
    transition: all 0.1s;
}

.field-attachment-access {
    width: 3.2rem;
    font-size: 1.3rem;
    text-align: center;
    color: #aaaaaa;
    cursor: pointer;
}

.field-attachment-access:hover {
    color: #00aaee;
    font-size: 1.6rem;
    transition: all 0.1s;
}

.field-attachment-download {
    width: 3.2rem;
    font-size: 1.3rem;
    text-align: center;
    color: #00aaee;
    cursor: pointer;
}

.field-attachment-download:hover {
    color: #334455;
    font-size: 1.6rem;
    transition: all 0.1s;
}

.field-attachment-menu {
    width: 3.2rem;
    font-size: 1.3rem;
    text-align: center;
    color: #aaaaaa;
    cursor: pointer;
}

.field-attachment-menu:hover {
    color: #00aaee;
    font-size: 1.6rem;
    transition: all 0.1s;
}

.field-attachment-read-only {
    border-style: none !important;
}

/* VARIATIONS FOR THUMBNAILS VIEW */
.field-attachment-item-thumbnails {
    display: inline-flex;
    flex-flow: column;
    width: 21.8rem;
    height: 21rem;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 0.5rem;
    margin: 0.5rem;
    box-shadow: var(--shadow-2);
    padding: 0.5rem;
    overflow: hidden;
    transition: all 0.2s;
}

.field-attachment-preview-thumbnails {
    display: flex !important;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    font-size: 3.2rem;
    width: 20rem;
    height: 15rem;
    object-fit: cover;
    transition: all 0.2s;
}

.field-attachment-filename-thumbnails {
    text-align: left;
    height: 2.4rem;
    width: 20rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* VARIATIONS FOR LARGE THUMBNAILS VIEW */
.field-attachment-item-thumbnails-large {
    display: inline-flex;
    flex-flow: column;
    width: 27.2rem;
    height: 30.5rem;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 0.5rem;
    margin: 0.5rem;
    box-shadow: var(--shadow-2);
    padding: 0.5rem;
    overflow: hidden;
    transition: all 0.2s;
}

.field-attachment-preview-thumbnails-large {
    display: flex !important;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    font-size: 3.2rem;
    width: 29rem;
    height: 25rem;
    object-fit: cover;
    transition: all 0.2s;
}

.field-attachment-filename-thumbnails-large {
    text-align: left;
    height: 2.4rem;
    width: 25.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* /ATTACHMENT FIELD */
/* CHECKBOX FIELD */
.a-checkbox {
    display: flex;
    margin: 0;
    padding: var(--field-padding);
    cursor: pointer;
}

/* Hide the "real" checkbox (which is ugly and depends on the browser */
.field-checkbox {
    display: none;
}

/* CHECKBOX ICON */
.field-checkbox-icon {
    padding: var(--field-padding);
    font-size: 2rem;
    cursor: inherit;
}

.field-checkbox-read-only {
    cursor: default;
}
/* /CHECKBOX FIELD */
/* COLOR FIELD */
.a-color {
    display: inline-flex;
    flex-flow: row;
    vertical-align: top;
    margin: 0;
    padding: var(--field-padding);
}

.field-color-container {
    display: flex;
    flex-flow: row;
    align-items: center;
    
    min-height: 2.7rem;
    min-width: 2.7rem;

    border-style: solid;
    border-width: 1px;
    border-color: var(--field-border);
    background: var(--field-background);
    border-radius: var(--field-border-radius);
    cursor: pointer;
}

.field-color-container-custom {
    padding: var(--field-padding);
}

.field-color-container-standard {
    padding: 0 var(--field-padding);
}

.field-color-palette-custom {
    min-width: 1.6rem;
    min-height: 1.6rem;
    border-radius: 0.3rem;
    border: solid 1px var(--body);
    transition: var(--transition-medium);
    padding: 0;
    margin: 0;
}

.field-color-palette-standard {
    background: transparent !important;
    padding: 0;
    border-style: none;
    width: 2rem;
    height: 2.4rem;
}

.field-color-input {
    color: var(--field);
    font-size: var(--field-font-size);
    margin-left: 0.5rem;
    border-style: none;
    background-color: transparent;
    width: 100%;

    -moz-user-select: text;
    -khtml-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;    
}
/* /COLOR FIELD */
/* COLOR PICKER */
.a-colorpicker {
    display: inline;
    flex-flow: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

.color-selector {
    display: inline-block;
    text-align: center;
    vertical-align: bottom;
    cursor: pointer;
    border-color: var(--field-border);
    border-style: solid;
    border-width: 1px;
    margin: 0.1rem;
}
/* /COLOR PICKER */
/* INPUT FIELD */
.a-field {
    display: inline-flex;
    flex-flow: row;
    vertical-align: top;
    margin: 0;
    padding: var(--field-padding);
}

.field-input {
    display: inline-block;
    min-height: 2.7rem;
    padding: var(--field-padding);
    color: var(--field);
    background: var(--field-background);
    font-family: var(--font-family);
    font-size: var(--field-font-size);
    border-style: solid;
    border-width: var(--field-border-width);
    border-color: var(--field-border);
    border-radius: var(--field-border-radius);
    
    box-sizing: border-box;
    resize: none;
    word-wrap: break-word;
}

.field-input-textarea {
    flex: 1;
}

.field-input:hover {
    border-color: var(--field-border-hover);
    background: var(--field-background-hover);
    transition: var(--field-transition);
}

.field-input:focus {
    background: var(--field-background-focus);
    transition: var(--field-transition);
}

.field-input-invalid {
    border-style: var(--field-border-invalid-style) !important;
    border-width: var(--field-border-invalid-width) !important;
    border-color: var(--red) !important;
}

.field-input-read-only {
    border-style: none !important;
    cursor: unset !important;
}

.field-label {
    display: inline-block;
    padding: var(--field-padding);
    color: var(--field-label);
    font-size: var(--field-font-size);
    font-weight: var(--field-label-font-weight);
}

.field-label-read-only {
    vertical-align: text-top;
    font-size: 0.8rem;
}

.field-label-required {
    color: #ff0000;
    line-height: 0.5rem;
}

.field-label-setup:hover::after {
    font-family: "Font Awesome 5 Free";
    content: "\f0d7"; /* fas fa-caret-down */
    font-weight: 900; /* 200 for regular icons, 900 for solid icons */
    padding-left: 0.4rem;
    cursor: pointer;
}

/* DATE PICKER */
::-webkit-datetime-edit {
    padding: 0 0 0 0.5rem;
}

::-webkit-datetime-edit-fields-wrapper {
    background: transparent;
}

::-webkit-inner-spin-button {
    display: block;
}

::-webkit-calendar-picker-indicator {
    opacity: 0.2;
    cursor: pointer;
}

::-webkit-datetime-edit-text,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
    color: var(--field-color);
}

/* Removes the blue background when editing date fields */
::-webkit-datetime-edit-day-field:focus,
::-webkit-datetime-edit-month-field:focus,
::-webkit-datetime-edit-year-field:focus {
    font-size: 2rem;
    color: #00aaee;
    background-color: transparent;
}
/* /INPUT FIELD */
/* ICON FIELD */
.a-icon {
    display: inline-flex;
    flex-flow: row;
    vertical-align: top;
    margin: 0;
    padding: var(--field-padding);
}

.field-icon-container {
    display: flex;
    flex-flow: row;
    align-items: center;
    
    min-height: 2.7rem;
    min-width: 2.7rem;
    padding: var(--field-padding);
    overflow: hidden;

    border-style: solid;
    border-width: 1px;
    border-color: var(--field-border);
    background: var(--field-background);
    border-radius: var(--field-border-radius);
    cursor: pointer;
}

.field-icon-palette {
    font-size: 1.6rem;
    min-width: 1.6rem;
    min-height: 1.6rem;
    cursor: pointer;
    border-radius: 0.3rem;
    transition: var(--transition-medium);
}

.field-icon-input {
    color: var(--field);
    font-size: var(--field-font-size);
    margin-left: 0.5rem;
    border-style: none;
    background-color: transparent;

    -moz-user-select: text;
    -khtml-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;    
}
/* /ICON FIELD */
/* ICON PICKER */
.a-iconpicker {
    display: inline-block;
    overflow: auto;
}

.icon-selector {
    text-align: center;
    cursor: pointer;
}

.icon-selector:hover {
    color: var(--body) !important;
    background-color: var(--body-background-alt) !important;
}

.icon-selector-selected {
    color: #ffffff !important;
}
/* /ICON PICKER */
/* RATING FIELD */
.a-rating {
    display: flex;
    margin: 0;
    padding: var(--field-padding);
    cursor: pointer;
}

.field-rating {
    display: flex;
    flex-flow: row;
    align-items: center;
    min-height: 2.7rem;
    overflow: hidden;
}

.rating {
    font-size: 1.3rem;
    margin: 0 0 0 0.2rem;
}

.rating:hover {
    transform: rotate(360deg) scale(1.5);
    transition: all 0.2s;
}/* SELECT */
.a-select {
    display: flex;
    flex-flow: row;
    vertical-align: top;
    margin: 0;
    padding: var(--field-padding);
}

/* FIELD CONTAINER */
.field-select {
    display: inline-flex;
    flex-flow: column;
    padding: 0.2rem;
    min-height: 2.7rem;
    color: var(--field);
    background: var(--field-background);
    font-size: var(--field-font-size);
    border-style: solid;
    border-width: var(--field-border-width);
    border-color: var(--field-border);
    border-radius: var(--field-border-radius);
}

.field-select:hover {
    border-color: var(--field-border-hover);
    background: var(--field-background-hover);
    transition: var(--field-transition);
}

.field-select:focus {
    background: var(--field-background-focus);
    transition: var(--field-transition);
}

.field-select-values {
    overflow-x: hidden;
    overflow-y: hidden;
}

/* SINGLE VALUE */
.field-select-value {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    height: var(--field-select-value-height);
    margin: var(--field-select-value-margin);
    padding: var(--field-select-value-padding);
    color: #ffffff;
    background: #99aabb;
    border: var(--field-select-value-border);
    border-radius: var(--field-select-value-border-radius);
    box-shadow: var(--select-value-shadow);
    cursor: pointer;
}

.field-select-value-delete {
    font-size: var(--field-font-size);
    padding-left: 0.8rem;
    cursor: pointer;
}

.field-select-value-delete:hover {
    color: #000000;
}

/* INPUT */
.field-select-input {
    color: var(--field);
    font-size: var(--field-font-size);
    width: 100%;
    background: transparent;
    padding: var(--field-padding);
    border-style: solid;
    border-color: var(--field-border);
    border-radius: var(--field-border-radius);
}

/* PLACEHOLDER */
.field-select-placeholder {
    display: inline-block;
    color: var(--field);
    padding: var(--field-padding);
}

/* OPTIONS WRAPPER */
.field-select-options {
    display: none;
    position: absolute;
    z-index: 1000;
    overflow: hidden;

    background: var(--body-background);
    border: var(--menu-border);
    box-shadow: var(--select-option-box-shadow);
    border-radius: 0.5rem;
    padding: 0.5rem;
}

/* OPTIONS WRAPPER */
.field-select-options-list {
    overflow-y: auto;
}

.a-select-mobile .field-select-options-list {
    height: calc(100% - 3.6rem);
    overflow: auto !important;
}

.a-select-mobile-close-container {
    display: block;
    width: 100%;
}

.a-select-mobile-close {
    font-size: 1.6rem;
    padding: 1rem;
}

/* SINGLE OPTION */
.field-option {
    position: relative;
    display: flex;
    align-items: center;
    font-size: var(--field-font-size);
    color: var(--select-option);
    background: var(--select-option-background);
    
    margin: 0.3rem;
    padding: 0.7rem 1rem;
    border-width: 0 0 0 3px;
    border-style: solid;
    cursor: pointer;
}

.field-option:hover {
    background: var(--select-option-background-highlight);
}

.field-option-hidden {
    display: none;
}

.field-option-selected {
    background-color: var(--select-option-background-selected);
}

.field-option-icon {
    width: 2.4rem;
    font-size: 2rem;
    padding: 0 3.2rem 0 0.5rem;
}

.field-option-icon-small {
    width: 2.4rem;
    font-size: 1.4rem;
    padding: 0 3.2rem 0 0.5rem;
}

/* HIGHLIGHT OPTION WHEN NAVIGATING THE LIST */
.field-option-highlight {
    color: var(--select-option-highlight) !important;
    border-color: var(--select-option-background-highlight);
    background-color: var(--select-option-background-highlight) !important;
}

.field-option-disabled {
    display: none;
}
/* /SELECT */
/* PROGRESS BAR FIELD */
.a-slider {
    display: flex;
    margin: 0;
    padding: var(--field-padding);
}

.field-slider-container {
    display: flex;
    flex-flow: row-reverse;
    align-items: center;
    flex: 1;
    min-height: 2.7rem;
    overflow: hidden;
}

.field-slider {
    width: 100%;
}/* FORM */
.form-tabs {
    align-items: center;
    padding: 0.5rem 1rem 0 1rem;
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: var(--body-background-alt);
}

.form-tab {
    font-weight: 600;
    border-width: 0 0 2px 0;
    border-radius: 0;
    margin: 0 0.5rem 0 0;
    padding: 1rem 0.5rem;
    background: transparent;
}

.form-record {
    background: var(--body-background);
}

/* Form side bar */
.form-side-bar {
    min-width: 30rem;
    padding: 1rem;
    background-color: var(--body-background);
    border-style: solid;
    border-color: var(--panel-border);
    border-width: 0 2px 0 0;
    overflow-y: auto;
}

.form-side-bar-menu {
    margin: 0.5rem;
}

.form-side-bar-button {
    margin: 0 0.5rem 1rem 0.5rem;
    border-radius: var(--panel-border-radius);
}

/* Record form panel */
.form-record .panel-header {
    height: 5rem;
}

.form-record .panel-icon {
    font-size: 3.2rem;
}

.form-record .panel-title {
    font-size: 2.4rem;
}

/* Form content panel */
.form-content .a-panel {
    margin: 0 0 0.8rem 0;
    box-shadow: var(--shadow-1);
}

.form-content .panel-header {
    height: 4rem;
}

.form-content .panel-icon {
    color: #ffffff;
    font-size: 1.6rem;
}

.form-content .panel-title {
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: bold;
}

.form-content .panel-buttons {
    color: #ffffff;
    font-size: 1.6rem;
}

.form-content .panel-body {
    display: flex;
    flex-flow: column;
}

/* Form panel body */
.form-panel .panel-body {
    transition: all 1s;
}

.form-content {
    padding: 1rem;
}

/* Feature welcome/help text */
.form-feature-arrow {
    width: 15rem;
    height: 6.4rem;
    font-size: 4rem;
    text-align: center;
}

.form-feature-description {
    align-items: center;
    justify-content: center;
    margin: 1rem;
    padding: 1rem;
    color: #ffffff;
    border-radius: 1rem;
    min-height: 30rem;
}

.form-feature-description-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem;
    padding: 2rem;
    font-size: 12.8rem;
    border-radius: 1rem;
    min-height: 28rem;
}

.form-feature-description-title {
    font-size: 3.2rem;
    font-weight: 600;
    padding: 1rem;
}

.form-feature-description-text {
    font-size: 1.6rem;
    padding: 1rem;
}
/* /FORM */
/* WINDOW TO SELECT FIELDS */
.switch-field {
    padding: 0;
    border-radius: 0.5rem;
}

.switch-field:hover {
    background-color: var(--menu-item-background-hover);
}

.switch-field > .field-label {
    cursor: grab;
}
/* /WINDOW TO SELECT FIELDS */
/* DATA FILTER */

/* Filter container */
.filter {
    padding: 0 1rem;
    margin: 0.5rem 2rem;
    border-radius: var(--panel-border-radius);
    background-color: var(--body-background);
    box-shadow: var(--shadow-2);
}

/* Filter delete / trash button */
.filter .a-button {
    margin: 0 2rem 0 1rem !important;
}
/* /DATA FILTER */
/* DATA FILTER GROUP */

/* Operator of the group: AND / OR */
.filter-group-operator .field-select {
    width: 6rem;
}

/* Zone that contains the filters have a left curly bracket */
.filter-group-content {
    padding: 1rem;
    margin: 0.5rem 2rem;
    background-color: var(--body-background);
    border-style: solid;
    border-width: 0 0 0 5px;
    border-color: #00aaee;
    border-radius: var(--panel-border-radius);
    width: 100%;
    box-shadow: var(--shadow-1);
}

/* Effect when dragging over a group of filters */
.filter-group-dragover {
    background-color: var(--body-background);
    animation-name: filter-group-dragover;
    animation-duration: 1s;
}

@-webkit-keyframes filter-group-dragover {
    0% {
        background-color: var(--body-background);
    }

    50% {
        background-color: var(--body-background-alt);
    }

    100% {
        background-color: var(--body-background);
    }
}

@keyframes filter-group-dragover {
    0% {
        background-color: var(--body-background);
    }

    50% {
        background-color: var(--body-background-alt);
    }

    100% {
        background-color: var(--body-background);
    }
}
/* /DATA FILTER GROUP */
/* DATA SORTER */
.data-sorter {
    padding: 0.5rem 0.8rem 0.5rem 1.6rem;
    font-size: 1.4rem;
    cursor: pointer;
    border-radius: var(--panel-border-radius);
}

.data-sorter:hover {
    background-color: var(--menu-item-background-hover);
}

.data-sorter-delete {
    font-size: 1.4rem;
}

.data-sorter-delete:hover {
    color: #999999;
}
/* /DATA SORTER */
/* WINDOW TO PREVIEW ITEMS */

/* Preview item */
.preview-item-container {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    background: #000000;
    opacity: unset!important;
}

.preview-item {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
    opacity: unset!important;
}

.preview-item-icon {
    font-size: 10rem;
}

.preview-not-available {
    font-size: 1.6rem;
    margin: 3.2rem;
    color: #ffffff;
}

/* Preview navigation */
.preview-navigation {
    width: 5rem;
    height: 100%;
    align-items: center;
}

.preview-navigation-button {
    height: 100%;
    font-size: 3.2rem;
    color: #ffffff;
    cursor: pointer;
}

.preview-navigation-button:hover {
    font-size: 4rem;
    color: #cccccc;
    transition: all .1s;
}

/* Preview thumbnails */
.preview-thumbnails-container {
    text-align: center;
    white-space: nowrap;
    padding: 1rem;
    height: 8rem;
}

.preview-thumbnail {
    vertical-align: text-top;
    font-size: 6.2rem;
    height: 6.4rem;
    object-fit: contain;
    cursor: pointer;
    border-style: solid;
    border-width: 2px;
    border-color: #000000;
    border-radius: 0.5rem;
    margin: 0 0.2rem;
}

.preview-thumbnail:hover {
    border-color: #ffffff;
}

.preview-thumbnail-selected {
    box-shadow: 0 0 0.5rem 0.5rem #aaaaaa;
    border: solid 2px #ffffff;
}
/* /WINDOW TO PREVIEW ITEMS */
/* FILE UPLOAD */
.upload-window {
    width: 80rem;
    height: 60rem;
}

.upload-window-mobile {
    width: 100%;
    height: 100%;
}

.upload-method-title {
    font-size: 2rem;
}

/* Upload gallery */
.upload-gallery-container {
    flex: 1;
    padding: 0.5rem;
}

.upload-gallery {
    width: 100%;
    border-style: dashed;
    border-width: 2px;
    border-color: #aaaaaa;
    border-radius: var(--panel-border-radius);
    padding: 0.5rem;
    text-align: center;
}

.upload-gallery-dragover {
    border-color: #00aaee !important;
    background-color: #eaeaea;
    transition: all 0.5s;
}

.upload-gallery-items {
    display: flex;
    flex-flow: column;
    width: 100%;
    flex: 1;
    overflow: auto;
}

/* Web search preview */
.upload-preview-items {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    overflow-y: auto;
}

.upload-preview-item {
    object-fit: cover;
    height: 15rem;
    width: 15rem;
    border: solid 3px #ffffff;
    border-radius: var(--panel-border-radius);
    cursor: pointer;
}

.upload-preview-item-selected, .upload-instagram-item-selected {
    border-color: #00aaee;
    border-radius: 7.5rem;
    transition: all .2s ease;
}

.upload-preview-item-selected::after, .upload-instagram-item-selected::after {
    font-family: "Font Awesome 5 Free";
    content: "\f07c"; /* far fa-folder-open */
    font-weight: 900; /* 200 for regular icons, 900 for solid icons */
    color: #00aaee;
    padding-right: 1rem;
}

/* Gallery item */
.upload-item {
    display: flex;
    flex-flow: row;
    align-items: center;
    height: 5rem;
    width: 100%;
    font-size: 1.2rem;
}

.upload-thumbnail-container {
    display: block;
    text-align: center;
    margin-right: 1rem;
}

.upload-thumbnail {
    font-size: 3.2rem;
    line-height: 5rem !important;
    width: 5rem !important;
    height: 5rem;
    object-fit: contain;
}

.upload-filename {
    flex: 1;
    text-align: left;
}

.upload-filesize {
    color: #00aaee;
    text-align: right;
}

.upload-delete {
    width: 3.2rem;
    font-size: 1.6rem;
    text-align: center;
    color: #888888;
    cursor: pointer;
}

.upload-delete:hover {
    color: #dddddd;
}

/* Upload widget button bar */
.upload-button-bar {
    min-height: 5rem;
    margin: 1rem 0 0 0;
    padding: 1rem 0 0 0;
    border-style: solid;
    border-color: #dddddd;
    border-width: 1px 0 0 0;
}

/* Dropbox button */
.dropbox-dropin-btn, .dropbox-dropin-btn:link {
    font-size: 1.6rem !important;
    padding: 0.5rem 2rem 1rem 2rem !important;
    margin: 2rem;
    border-radius: 1rem !important;
}

/* Box button */
.box-authentication-button {
    margin: 1rem;
    padding: 0.5rem 1rem;
}

.upload-box-picker {
    width: 100%;
    height: 100%;
}
/* /FILE UPLOAD */
/* AUTHENTICATION */
.auth-block {
    padding: 1rem;
    box-shadow: var(--shadow-2);
    border-radius: var(--panel-border-radius);
    overflow: unset;
    flex-shrink: 0 !important;
}

.auth-separator {
    height: auto;
}

.auth-separator-text {
    font-size: 1.6rem;
    padding: 1.6rem 3.2rem;
}

.auth-create-account {
    margin: 1.6rem 0;
    width: 100%;
    color: #00aaee;
    text-decoration: underline;
    text-align: center;
    cursor: pointer;
}

.auth-reset-password {
    margin: 1.6rem 0;
    width: 100%;
    color: #00aaee;
    text-decoration: underline;
    text-align: center;
    cursor: pointer;
}

/* /AUTHENTICATION */