/*!
 * /*
 * * This file is subject to the terms and conditions defined in
 *  * file 'LICENSE.txt', which is part of this source code package.
 *  * /
 *
 */
/* afaik popover needs a positioning context to be able to calculate the transform */
.PopoverContainer {
  position: absolute;
  z-index: 4;
}
.PopoverBody {
  pointer-events: auto;
  min-width: 1em; /* ewwwwwwww */
  display: flex;
  flex-direction: column;
  /* add a max-width so that long strings don't cause the popover to expand
   * see metabase#4930 */
  max-width: 500px;
}
.PopoverBody.PopoverBody--withBackground {
  border: 1px solid #edf2f5;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.13);
  background-color: #ffffff;
  border-radius: 6px;
  overflow: auto;
}
.tippy-box[data-theme~="tooltip"] {
  color: white;
  font-weight: bold;
  background-color: #2e353b;
  border: none;
  pointer-events: none;
  line-height: 1.26;
  font-size: 12px;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.13);
}
.tippy-box[data-theme~="tooltip"] .tippy-content {
  padding: 10px 12px;
}
.tippy-box[data-theme~="popover"] {
  background-color: #ffffff;
  color: var(--color-text-default);
  border: 1px solid #f0f0f0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.13);
  background-color: #ffffff;
  border-radius: 6px;
  overflow: auto;
}
.tippy-box[data-theme~="popover"] .tippy-content {
  padding: 0;
}
/* remove the max-width in cases where the popover content needs to expand
 * initially added  for date pickers so the dual date picker can fully
 * expand as necessary - metabase#5971
 */
.PopoverBody.PopoverBody--autoWidth {
  max-width: none;
}
.PopoverBody.PopoverBody--tooltip {
  color: white;
  font-weight: bold;
  background-color: #2e353b;
  border: none;
  pointer-events: none;
  line-height: 1.26;
  padding: 10px 12px;
}
.PopoverBody.PopoverBody--tooltip.PopoverBody--tooltipConstrainedWidth {
  font-size: 12px;
  max-width: 200px;
}
/* shared arrow styles */
.PopoverBody--withArrow:before,
.PopoverBody--withArrow:after {
  position: absolute;
  content: "";
  display: block;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  pointer-events: none;
}
/* As Popover footer uses absolute positioning
 * to stick to bottom, options lists and other
 * middle content need extra margin-bottom
 */
.PopoverBody--marginBottom {
  margin-bottom: 60px;
}
.PopoverBody .Form-input {
  font-size: 1rem;
}
.PopoverBody .Form-field {
  margin-bottom: 0.75rem;
}
.PopoverHeader {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  min-width: 400px;
}
.PopoverHeader-item {
  flex: 1;
  position: relative;
  top: 1px; /* to overlap bottom border */
  text-align: center;
  padding: 1em;

  text-transform: uppercase;
  font-size: 0.8em;
  font-weight: 700;
  color: #949aab;
  border-bottom: 2px solid transparent;
}
.PopoverHeader-item.selected {
  color: currentcolor;
  border-color: currentcolor;
}
.PopoverHeader-item--withArrow {
  margin-right: 8px;
}
.PopoverHeader-item--withArrow:before,
.PopoverHeader-item--withArrow:after {
  position: absolute;
  content: "";
  display: block;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  top: 50%;
  margin-top: -8px;
}
/* create a slightly larger arrow on the right for border purposes */
.PopoverHeader-item--withArrow:before {
  right: -16px;
  border-left-color: #f0f0f0;
}
/* create a smaller inset arrow on the right */
.PopoverHeader-item--withArrow:after {
  right: -15px;
  border-left-color: #ffffff;
}
.PopoverFooter {
  background: white;
  position: absolute;
  bottom: 0;
  border-top: 1px solid #f0f0f0;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  padding-top: 8px;
  width: calc(100% - 2px);
  /* Without z-index; calendar days, if selected, scroll above this component */
  z-index: 1;
}
.PopoverBody--withBackground .PopoverFooterWhenIsNotEqualOps {
  bottom: 0;
  padding-bottom: 12px;
  padding-top: 10px;
  width: calc(100% - 26px);
}
.PopoverParameterFieldWidgetFooter {
  position: fixed;
  bottom: -7px;
}
/* create a slightly larger arrow on the top for border purposes */
.tether-element-attached-top .PopoverBody--withArrow:before {
  top: -20px;
  border-bottom-color: #f0f0f0;
}
.tether-element-attached-top .PopoverBody--tooltip:before {
  border-bottom: none;
}
/* create a smaller inset arrow on the top */
.tether-element-attached-top .PopoverBody--withArrow:after {
  top: -18px;
  border-bottom-color: #ffffff;
}
.tether-element-attached-top .PopoverBody--tooltip:after {
  border-bottom-color: #2e353b;
}
/* create a slightly larger arrow on the bottom for border purposes */
.tether-element-attached-bottom .PopoverBody--withArrow:before {
  bottom: -20px;
  border-top-color: #f0f0f0;
}
.tether-element-attached-bottom .PopoverBody--tooltip:before {
  border-top: none;
}
/* create a smaller inset arrow on the bottom */
.tether-element-attached-bottom .PopoverBody--withArrow:after {
  bottom: -18px;
  border-top-color: #ffffff;
}
.tether-element-attached-bottom .PopoverBody--tooltip:after {
  border-top-color: #2e353b;
}
/* if the tether element is attached right, move our arrows right */
.tether-target-attached-right .PopoverBody--withArrow:before,
.tether-target-attached-right .PopoverBody--withArrow:after {
  right: 12px;
}
/* if the tether element is attached center, move our arrows to the center */
.tether-element-attached-center .PopoverBody--withArrow:before,
.tether-element-attached-center .PopoverBody--withArrow:after {
  margin-left: 50%;
  left: -10px;
}
.tether-element-attached-right .PopoverBody--withArrow:before,
.tether-element-attached-right .PopoverBody--withArrow:after {
  right: 12px;
}
.tether-element-attached-left .PopoverBody--withArrow:before,
.tether-element-attached-left .PopoverBody--withArrow:after {
  left: 12px;
}
#popover-event-target {
  position: fixed;
  width: 6px;
  height: 6px;
  pointer-events: none;
}
/* transition classes */
.Popover-appear,
.Popover-enter {
  opacity: 0.01;
}
.Popover-appear.Popover-appear-active,
.Popover-enter.Popover-enter-active {
  opacity: 1;
  transition: opacity 100ms ease-in;
}
.Popover-leave {
  opacity: 1;
}
.Popover-leave.Popover-leave-active {
  opacity: 0.01;
  transition: opacity 100ms ease-in;
}

.Calendar-weeks {
  padding-bottom: 14px;
}

.Calendar-week {
  display: flex;
  padding-left: 12px;
  padding-right: 12px;
}

.Calendar-header {
  padding: 14px;
  margin-bottom: 8px;
}

.Calendar-header h4 {
  font-weight: 700;
}

.Calendar-day-names {
  opacity: 0.12;
}

.Calendar-day,
.Calendar-day-name {
  flex: 1;
}

.Calendar-day {
  color: #b8bbc3;
  position: relative;
  border-radius: 99px;
  font-weight: 700;
  font-size: 12px;
  background-color: transparent;
  padding: 10px;
}

.Calendar-day:hover {
  background-color: #7172ad;
  color: white;
}

.Calendar-day-name {
  cursor: inherit;
}

.Calendar-day--this-month {
  color: currentcolor;
}

.Calendar-day-name {
  color: inherit !important;
}

.Calendar-day--selected,
.Calendar-day--selected-end {
  color: white !important;
  background-color: #7172ad;
  z-index: 1;
}

.Calendar--range .Calendar-day--selected {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.Calendar--range .Calendar-day--selected-end {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.Calendar-day--in-range {
  border-radius: 0;
  background-color: #edf2f5;
}

.circle-button {
  display: block;
  font-size: 20px;
  color: #949aab;
  border: 2px solid #f0f0f0;
  border-radius: 99px;
  width: 24px;
  height: 24px;
  background-color: white;
  text-align: center;
  vertical-align: middle;
  line-height: 20px;
  z-index: 2;
}

.circle-button:hover {
  color: #a989c5;
  border-color: #a989c5;
}

.circle-button--top {
  position: absolute;
  top: -12px;
}

.circle-button--bottom {
  position: absolute;
  bottom: -12px;
}

.circle-button--left {
  position: absolute;
  left: -12px;
}

.circle-button--right {
  position: absolute;
  right: -12px;
}

.Calendar--noContext .Calendar-day {
  visibility: hidden;
  pointer-events: none;
}

.Calendar--noContext .Calendar-day--this-month {
  visibility: visible;
  pointer-events: all;
}

/* TODO - ideally this would be more reusable and not hardcode a value */
@-webkit-keyframes progress-bar {
  from {
    transform: translate3d(0, 0, 0, 0);
  }
  to {
    transform: translate3d(1000px, 0, 0);
  }
}
@keyframes progress-bar {
  from {
    transform: translate3d(0, 0, 0, 0);
  }
  to {
    transform: translate3d(1000px, 0, 0);
  }
}
/* TODO: based on popover.css, combine them? */
/* TODO: other arrow directions */
.arrow-right {
  position: relative; /* TODO: should it be up to the consumer to set a non-static positioning? */
}
/* shared arrow styles */
.arrow-right:before,
.arrow-right:after {
  position: absolute;
  content: "";
  display: block;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
/* create a slightly larger arrow on the right for border purposes */
.arrow-right:before {
  right: -20px;
  border-left-color: #f0f0f0;
}
/* create a smaller inset arrow on the right */
.arrow-right:after {
  right: -19px;
  border-left-color: #ffffff;
}
/* move our arrows to the center */
.arrow-right:before,
.arrow-right:after {
  top: 50%;
  margin-top: -10px;
}
/* lato-regular - latin */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  src: url(./6a8ad33ded37552b512b.eot); /* IE9 Compat Modes */
  src: local("Lato Regular"), local("Lato-Regular"),
    url(./6a8ad33ded37552b512b.eot?#iefix)
      format("embedded-opentype"),
     url(./65e877e527022735c1a1.woff2)
      format("woff2"),
    
      url(./319df0f5492062b546b0.woff) format("woff"),
    
      url(./f71f2288b959243b0ed1.ttf) format("truetype"),
    
      url(./ec5307044f561bd0e346.svg#Lato) format("svg"); /* Legacy iOS */
}
/* lato-700 - latin */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  src: url(./bf65e37b9f1e286dd94b.eot); /* IE9 Compat Modes */
  src: local("Lato Bold"), local("Lato-Bold"),
    url(./bf65e37b9f1e286dd94b.eot?#iefix)
      format("embedded-opentype"),
     url(./f1405bd8a987c2ea8a67.woff2)
      format("woff2"),
    
      url(./a354bb0b0b0f22de7bef.woff) format("woff"),
     url(./96fd01fcb8338aa6ee2c.ttf)
      format("truetype"),
    
      url(./414efa6d77701ff12fc5.svg#Lato) format("svg"); /* Legacy iOS */
}
/* lato-900 - latin */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 900;
  src: url(./c7714e8ee09eae8e60bf.eot); /* IE9 Compat Modes */
  src: local("Lato Black"), local("Lato-Black"),
    url(./c7714e8ee09eae8e60bf.eot?#iefix)
      format("embedded-opentype"),
     url(./f33015cf2124b2046860.woff2)
      format("woff2"),
    
      url(./22f1d97be275c94e30d7.woff) format("woff"),
     url(./10c30b35e83b4ecb040f.ttf)
      format("truetype"),
    
      url(./507133c1c938007abafa.svg#Lato) format("svg"); /* Legacy iOS */
}
html {
  height: 100%; /* ensure the entire page will fill the window */
  width: 100%;
}
body {
  font-family: "Lato", sans-serif;
  font-size: 0.875em;
  font-weight: 400;
  font-style: normal;
  color: #4c5773;
  margin: 0;
  height: 100%; /* ensure the entire page will fill the window */
  display: flex;
  flex-direction: column;
  background-color: #f9fbfc;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*
  override default padding and margin on lists
  in most cases we won't be using list-style so
  the padding isn't necessary
*/
ul,
ol {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
/* reset button element */
button {
  font-size: 100%;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  outline: none;
  background-color: transparent;
}
a {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
button,
input,
textarea {
  font-family: "Lato", "Helvetica Neue", Helvetica,
    sans-serif;
}
textarea {
  min-height: 110px;
}
.pointer-events-none {
  pointer-events: none;
}
.disabled,
._1f32L {
  pointer-events: none;
  opacity: 0.4;
}
.faded,
._1LFbT {
  opacity: 0.4;
}
.fade-in-hover:hover {
  opacity: 1;
  transition: opacity 0.3s;
}
.MB-lightBG {
  background-color: #f9fbfc;
}
.circle {
  border-radius: 99px;
}
.undefined {
  border: 1px solid red !important;
}
.no-outline * {
  outline: none;
}
.bordered,
._2zlem {
  border: 1px solid #f0f0f0;
}
.border-bottom,
.GjCgU {
  border-bottom: 1px solid #f0f0f0;
}
/* ensure that a border-top item inside of a bordred element won't double up */
.bordered > .border-bottom:last-child {
  border-bottom: none;
}
.border-top,
._2Hk-A {
  border-top: 1px solid #f0f0f0;
}
/* ensure that a border-top item inside of a bordred element won't double up */
.bordered > .border-top:first-child {
  border-top: none;
}
.border-column-divider {
  border-right: 1px solid #f0f0f0;
}
.border-column-divider:last-child {
  border-right: none;
}
.border-row-divider {
  border-bottom: 1px solid #f0f0f0;
}
.border-row-divider:last-child {
  border-bottom: none;
}
.border-right {
  border-right: 1px solid #f0f0f0;
}
.border-left {
  border-left: 1px solid #f0f0f0;
}
.border-light {
  border-color: rgba(240, 240, 240, 0.2) !important;
}
.border-dark,
.border-dark-hover:hover {
  border-color: rgba(169, 137, 197, 0.2) !important;
}
.border-purple {
  border-color: #7172ad !important;
}
.border-error,
._3P-AT {
  border-color: #ed6e6e !important;
}
.border-gold {
  border-color: #f9cf48 !important;
}
.border-success {
  border-color: #84bb4c !important;
}
.border-brand,
._3AHku {
  border-color: #509ee3 !important;
}
.border-transparent {
  border-color: transparent;
}
.border-brand-hover:hover {
  border-color: #509ee3;
}
.border-hover:hover {
  border-color: #f0f0f0;
}
/* BORDERLESS IS THE DEFAULT */
/* ONLY USE IF needing to override an existing border! */
/* ensure there is no border via important */
.borderless,
._1RQS5 {
  border: none !important;
}
.border-dashed {
  border-style: dashed;
}
.border-dashed-bottom,
.GjCgU {
  border-bottom: 1px dashed #f0f0f0;
}
.border-medium {
  border-width: 2px;
}
/* set main elements to box-sizing border-box for more reliable box model calc */
body,
div,
nav,
article,
section,
main,
header,
footer,
input,
form,
table,
fieldset,
textarea,
ul,
li,
span {
  box-sizing: border-box;
}
/* for applying border-box to other elements on ad-hoc basis */
.border-box {
  box-sizing: border-box;
}
/* TODO: we should really have these as variables */
/* Nicolas Gallaghers Clearfix solution
   Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */
/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}
.clearfix:after {
  clear: both;
}
/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
  *zoom: 1;
}
/* NOTE: DO NOT ADD COLORS WITHOUT EXTREMELY GOOD REASON AND DESIGN REVIEW
 * NOTE: KEEP SYNCRONIZED WITH COLORS.JS
 */
:root {

  /* Saturated colors for the SQL editor. Shouldn't be used elsewhere since they're not white-labelable. */

  /* night mode colors */
}
/* NOTE: DEPRECATED, replaced with colors above
:root {
  --brand-color: var(--color-brand);
  --brand-light-color: var(--color-text-light);
  --brand-saturated-color: var(--color-brand);

  --base-grey: var(--color-bg-light);
  --grey-5percent: var(--color-bg-medium);
  --grey-1: var(--color-text-light);
  --grey-2: var(--color-text-light);
  --grey-3: var(--color-text-medium);
  --grey-4: var(--color-text-medium);
  --grey-5: var(--color-text-medium);

  --grey-text-color: var(--color-text-medium);
  --alt-color: var(--color-bg-light);
  --alt-bg-color: var(--color-bg-light);

  --success-color: var(--color-success);
  --headsup-color: var(--color-warning);

  --gold-color: var(--color-accent4);
  --orange-color: var(--color-warning);
  --purple-color: var(--color-accent2);
  --green-color: var(--color-accent1);
  --green-saturated-color: var(--color-accent1);
  --dark-color: var(--color-text-dark);
  --slate-color: var(--color-text-medium);
  --slate-light-color: var(--color-text-light);
  --slate-almost-extra-light-color: var(--color-bg-medium);
  --slate-extra-light-color: var(--color-bg-light);

  --error-color: var(--color-error);

  --metric-color: var(--color-accent1);
  --segment-color: var(--color-accent2);
  --pulse-color: var(--color-accent4);
  --dashboard-color: var(--color-brand);
  --data-color: var(--color-accent1);
  --question-color: var(--color-text-medium);
}
*/
.text-default,
._1NNXY {
  color: #4c5773;
}
.text-default-hover:hover {
  color: #4c5773;
}
/* brand */
.text-brand,
._20SLo,
.text-brand-hover:hover,
._1FJ4B:hover {
  color: #509ee3;
}
.text-brand-darken,
.text-brand-darken-hover:hover {
  color: #509ee3;
}
.text-brand-light,
.Pvqsl,
.text-brand-light-hover:hover,
._3mUyQ:hover {
  color: #ddecfa;
}
.bg-brand-light {
  background-color: #ddecfa;
}
.bg-brand-dark,
.bg-brand-dark-hover:hover {
  background-color: rgb(80, 157, 224);
}
.bg-brand-dark,
.bg-brand-dark-hover:hover {
  background-color: rgb(80, 157, 224);
}
.bg-brand-dark,
.bg-brand-dark-hover:hover {
  background-color: rgb(80, 157, 224);
}
.bg-brand,
.bg-brand-hover:hover,
.bg-brand-active:active {
  background-color: #509ee3;
}
@media screen and (min-width: 60em) {
  .md-bg-brand {
    background-color: #509ee3 !important;
  }
}
/* success */
.text-success {
  color: #84bb4c;
}
.bg-success {
  background-color: #84bb4c;
}
/* error */
.text-error,
._1Cy_o,
.text-error-hover:hover {
  color: #ed6e6e;
}
.bg-error,
.bg-error-hover:hover {
  background-color: #ed6e6e;
}
.bg-error-input {
  background-color: #ffffff;
}
/* favorite */
.text-gold,
.text-gold-hover:hover {
  color: #f9d45c;
}
.text-purple,
.text-purple-hover:hover {
  color: #7172ad;
}
.text-green,
.text-green-hover:hover {
  color: #88bf4d;
}
.text-green-saturated,
.text-green-saturated-hover:hover {
  color: #88bf4d;
}
.text-orange,
.text-orange-hover:hover {
  color: #f9cf48;
}
.text-slate {
  color: #949aab;
}
.text-slate-light {
  color: #b8bbc3;
}
.text-slate-extra-light {
  background-color: #f9fbfc;
}
.bg-gold {
  background-color: #f9d45c;
}
.bg-purple,
.bg-purple-hover:hover {
  background-color: #a989c5;
}
.bg-purple-light {
  background-color: rgba(113, 114, 173, 0.15);
}
.bg-green,
.bg-green-hover:hover {
  background-color: #88bf4d;
}
.bg-green-saturated,
.bg-green-saturated-hover:hover {
  background-color: #88bf4d;
}
/* alt */
.bg-alt,
.bg-alt-hover:hover {
  background-color: #f9fbfc;
}
.text-light,
._1EuOD,
.text-light-hover:hover {
  color: #b8bbc3;
}
.text-medium,
.SuKca,
.text-medium-hover:hover {
  color: #949aab;
}
.text-dark,
._17S31,
.text-dark-hover:hover {
  color: #4c5773;
}
.bg-light,
.bg-light-hover:hover {
  background-color: #f9fbfc;
}
.bg-medium,
.bg-medium-hover:hover {
  background-color: #edf2f5;
}
.bg-dark,
.bg-dark-hover:hover {
  background-color: #93a1ab;
}
.bg-black,
.bg-black-hover:hover {
  background-color: #2e353b;
}
/* white  - move to bottom for specificity since its often used on hovers, etc */
.text-white,
.JmZU_,
.text-white-hover:hover {
  color: #ffffff;
}
@media screen and (min-width: 60em) {
  .md-text-white {
    color: #ffffff;
  }
}
/* common pattern, background brand, text white when hovering or selected */
.brand-hover:hover {
  color: #ffffff;
  background-color: #509ee3;
}
.brand-hover:hover * {
  color: #ffffff;
}
.bg-white,
.eTBAP,
.bg-white-hover:hover {
  background-color: #ffffff;
}
.bg-light-blue {
  background-color: #f9fbfc;
}
.bg-light-blue-hover:hover {
  background-color: #edf2f5;
}
.text-light-blue,
.text-light-blue-hover:hover {
  color: #b8bbc3;
}
.text-slate {
  color: #949aab;
}
.bg-transparent {
  background-color: transparent;
}
/* entity colors */
.bg-metric {
  background-color: #88bf4d;
}
.text-metric {
  color: #88bf4d;
}
.bg-data {
  background-color: #88bf4d;
}
.text-data {
  color: #88bf4d;
}
.bg-segment {
  background-color: #a989c5;
}
.text-segment {
  color: #a989c5;
}
.bg-dashboard {
  background-color: #509ee3;
}
.text-dashboard {
  color: #509ee3;
}
.bg-pulse {
  background-color: #f9d45c;
}
.text-pulse {
  color: #f9d45c;
}
.bg-question {
  background-color: #93a1ab;
}
.text-question {
  color: #949aab;
}
.text-light {
  color: #b8bbc3;
}
.text-medium {
  color: #949aab;
}
.text-dark {
  color: #4c5773;
}
.cursor-pointer,
._1a-AI {
  cursor: pointer;
}
.cursor-grab,
.R9Byd {
  cursor: -webkit-grab;
  cursor: grab;
}
.cursor-default,
._2s_B5 {
  cursor: default;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
/* provide flex utilities in lieu of float based layouts */
.flex,
._38618 {
  display: flex;
}
.inline-flex,
._2wjgs {
  display: inline-flex;
}
.flex-auto,
._1aNwX {
  flex: auto;
}
.flex-full,
._2kZNz {
  flex: 1 0 auto;
}
.flex-half,
._1vRAn {
  flex: 0.5;
}
.flex-3-quarters,
.WDf_6 {
  flex: 0.75;
}
.flex-1-quarter,
.l4joF {
  flex: 0.25;
}
.flex-no-shrink,
._9DUFn {
  flex-shrink: 0;
}
/* The behavior of how `flex: <flex-grow>` sets flex-basis is inconsistent across
 * browsers. Specifically:
 * - On Chrome and FF it's set to `flex-basis: 0%`. That behaves equally as `height: 0%`.
 *   It means that if the containing block has no explicit height, then `height: 0%` is computed as `height: auto`,
 *   and element grows as its content grows. That is the most common scenario in Metabase codebase.
 * - On older IEs it's set to `flex-basis: 0` which means that the initial main size of flex item is zero.
 *   It is also notable that `flex-basis: 0%` doesn't work correctly on IE.
 *
 *  As a solution, `flex-basis-auto` should always be used in conjunction with `flex-full` when it is
 *  a desired behavior that the element grows with its contents.
*/
.flex-basis-auto {
  flex-basis: auto;
}
.flex-basis-none {
  flex-basis: 0;
}
.shrink-below-content-size {
  /* W3C spec says:
     * By default, flex items won’t shrink below their minimum content size (the length of the longest word or
     * fixed-size element). To change this, set the min-width or min-height property.
     */
  min-width: 0;
  min-height: 0;
}
.align-center,
._3Dqep {
  align-items: center;
}
.align-baseline,
._1YEbp {
  align-items: baseline;
}
.justify-center,
._1X7sA {
  justify-content: center;
}
.justify-evenly {
  justify-content: space-evenly;
}
.justify-between {
  justify-content: space-between;
}
.justify-end {
  justify-content: flex-end;
}
.align-start {
  align-items: flex-start;
}
.align-end {
  align-items: flex-end;
}
.align-stretch {
  align-items: stretch;
}
.align-self-end,
._12FEI {
  align-self: flex-end;
}
.align-self-start,
._1Hum3 {
  align-self: flex-start;
}
.align-self-center {
  align-self: center;
}
.align-self-stretch {
  align-self: stretch;
}
.flex-align-right,
.VW9bs {
  margin-left: auto;
}
@media screen and (min-width: 40em) {
  .sm-flex-align-right {
    margin-left: auto;
  }
}
@media screen and (min-width: 60em) {
  .md-flex-align-right {
    margin-left: auto;
  }
}
@media screen and (min-width: 80em) {
  .lg-flex-align-right {
    margin-left: auto;
  }
}
.layout-centered,
._3-Ogs {
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 40em) {
  .sm-layout-centered {
    align-items: center;
    justify-content: center;
  }
}
@media screen and (min-width: 60em) {
  .md-layout-centered {
    align-items: center;
    justify-content: center;
  }
}
@media screen and (min-width: 80em) {
  .lg-layout-centered {
    align-items: center;
    justify-content: center;
  }
}
.flex-column {
  flex-direction: column;
}
.flex-column-reverse {
  flex-direction: column-reverse;
}
@media screen and (min-width: 40em) {
  .sm-flex-column {
    flex-direction: column;
  }
}
@media screen and (min-width: 60em) {
  .md-flex-column {
    flex-direction: column;
  }
}
.flex-row,
._1BJhh {
  flex-direction: row;
}
@media screen and (min-width: 40em) {
  .sm-flex-row {
    flex-direction: row;
  }
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-reverse {
  flex-direction: row-reverse;
}
@media screen and (min-width: 40em) {
  .sm-flex-reverse {
    flex-direction: row-reverse;
  }
}
@media screen and (min-width: 60em) {
  .md-flex-reverse {
    flex-direction: row-reverse;
  }
}
@media screen and (min-width: 80em) {
  .lg-flex-reverse {
    flex-direction: row-reverse;
  }
}
@media screen and (min-width: 120em) {
  .xl-flex-reverse {
    flex-direction: row-reverse;
  }
}
.no-flex {
  flex: 0 1 0%;
}
@media screen and (min-width: 60em) {
  .md-no-flex {
    flex: 0 !important;
  }
}
/* Contents of elements inside flex items might not be wrapped correctly on IE11,
   set max-width manually to enforce wrapping
*/
.ie-wrap-content-fix {
  max-width: 100%;
}
.row-gap-1,
._9_poO {
  grid-row-gap: 0.5rem;
  row-gap: 0.5rem;
}
.float-left,
._3kFch {
  float: left;
}
.float-right,
._1f5dR {
  float: right;
}
:root {
}
.Grid {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.Grid-cell,
.Grid--normal > .Grid-cell {
  flex: 1;
}
.Grid--flexCells > .Grid-cell {
  display: flex;
}
.Grid--top {
  align-items: flex-start;
}
.Grid--bottom {
  align-items: flex-end;
}
.Grid--center {
  align-items: center;
}
.Grid--justifyCenter {
  justify-content: center;
}
.Grid-cell--top {
  align-self: flex-start;
}
.Grid-cell--bottom {
  align-self: flex-end;
}
.Grid-cell--center {
  align-self: center;
}
.Grid-cell--autoSize {
  flex: none;
}
.Grid--fit > .Grid-cell {
  flex: 1;
}
.Grid--full > .Grid-cell {
  flex: 0 0 100%;
}
.Grid--1of2 > .Grid-cell {
  flex: 0 0 50%;
}
.Grid--1of3 > .Grid-cell {
  flex: 0 0 33.3333%;
}
.Grid--1of4 > .Grid-cell {
  flex: 0 0 25%;
}
@media (min-width: 40em) {
  .small-Grid--fit > .Grid-cell {
    flex: 1;
  }
  .small-Grid--full > .Grid-cell {
    flex: 0 0 100%;
  }
  .small-Grid--1of2 > .Grid-cell {
    flex: 0 0 50%;
  }
  .small-Grid--1of3 > .Grid-cell {
    flex: 0 0 33.3333%;
  }
  .small-Grid--1of4 > .Grid-cell {
    flex: 0 0 25%;
  }
}
@media (min-width: 60em) {
  .md-Grid--fit > .Grid-cell {
    flex: 1;
  }
  .md-Grid--full > .Grid-cell {
    flex: 0 0 100%;
  }
  .md-Grid--1of2 > .Grid-cell {
    flex: 0 0 50%;
  }
  .md-Grid--1of3 > .Grid-cell {
    flex: 0 0 33.3333%;
  }
  .md-Grid--1of4 > .Grid-cell {
    flex: 0 0 25%;
  }
}
@media (min-width: 80em) {
  .large-Grid--fit > .Grid-cell {
    flex: 1;
  }
  .large-Grid--full > .Grid-cell {
    flex: 0 0 100%;
  }
  .large-Grid--1of2 > .Grid-cell {
    flex: 0 0 50%;
  }
  .large-Grid--1of3 > .Grid-cell {
    flex: 0 0 33.3333%;
  }
  .large-Grid--1of4 > .Grid-cell {
    flex: 0 0 25%;
  }
}
.Grid--gutters {
  margin: -1em 0 1em -1em;
}
.Grid--gutters > .Grid-cell {
  padding: 1em 0 0 1em;
}
.Grid--guttersLg {
  margin: -1.5em 0 1.5em -1.5em;
}
.Grid--guttersLg > .Grid-cell {
  padding: 1.5em 0 0 1.5em;
}
.Grid--guttersXl {
  margin: -2em 0 2em -2em;
}
.Grid--guttersXl > .Grid-cell {
  padding: 2em 0 0 2em;
}
.Grid--guttersXXl {
  margin: -5em 0 5em -5em;
}
.Grid--guttersXXl > .Grid-cell {
  padding: 5em 0 0 5em;
}
@media (min-width: 40em) {
  .small-Grid--gutters {
    margin: -1em 0 1em -1em;
  }
  .small-Grid--gutters > .Grid-cell {
    padding: 1em 0 0 1em;
  }
  .small-Grid--guttersLg {
    margin: -1.5em 0 1.5em -1.5em;
  }
  .small-Grid--guttersLg > .Grid-cell {
    padding: 1.5em 0 0 1.5em;
  }
  .small-Grid--guttersXl {
    margin: -2em 0 2em -2em;
  }
  .small-Grid--guttersXl > .Grid-cell {
    padding: 2em 0 0 2em;
  }
  .small-Grid--guttersXXl {
    margin: -5em 0 5em -5em;
  }
  .small-Grid--guttersXXl > .Grid-cell {
    padding: 5em 0 0 5em;
  }
  .sm-Grid--normal > .Grid-cell {
    flex: 1;
  }
}
@media (min-width: 60em) {
  .md-Grid--gutters {
    margin: -1em 0 1em -1em;
  }
  .md-Grid--gutters > .Grid-cell {
    padding: 1em 0 0 1em;
  }
  .md-Grid--guttersLg {
    margin: -1.5em 0 1.5em -1.5em;
  }
  .md-Grid--guttersLg > .Grid-cell {
    padding: 1.5em 0 0 1.5em;
  }
  .md-Grid--guttersXl {
    margin: -2em 0 2em -2em;
  }
  .md-Grid--guttersXl > .Grid-cell {
    padding: 2em 0 0 2em;
  }
  .md-Grid--guttersXXl {
    margin: -5em 0 5em -5em;
  }
  .md-Grid--guttersXXl > .Grid-cell {
    padding: 5em 0 0 5em;
  }
  .md-Grid--normal > .Grid-cell {
    flex: 1;
  }
}
@media (min-width: 80em) {
  .large-Grid--gutters {
    margin: -1em 0 1em -1em;
  }
  .large-Grid--gutters > .Grid-cell {
    padding: 1em 0 0 1em;
  }
  .large-Grid--guttersLg {
    margin: -1.5em 0 1.5em -1.5em;
  }
  .large-Grid--guttersLg > .Grid-cell {
    padding: 1.5em 0 0 1.5em;
  }
  .large-Grid--guttersXl {
    margin: -2em 0 2em -2em;
  }
  .large-Grid--guttersXl > .Grid-cell {
    padding: 2em 0 0 2em;
  }
  .large-Grid--guttersXXl {
    margin: -5em 0 5em -5em;
  }
  .large-Grid--guttersXXl > .Grid-cell {
    padding: 5em 0 0 5em;
  }
  .large-Grid--normal > .Grid-cell {
    flex: 1;
  }
}
.Grid-cell.Cell--1of3 {
  flex: 0 0 33.3333%;
}
@media screen and (min-width: 40em) {
  .Grid-cell.sm-Cell--1of3 {
    flex: 0 0 33.3333%;
  }
}
@media screen and (min-width: 60em) {
  .Grid-cell.md-Cell--1of3 {
    flex: 0 0 33.3333%;
  }
}
@media screen and (min-width: 80em) {
  .Grid-cell.lg-Cell--1of3 {
    flex: 0 0 33.3333%;
  }
}
@media screen and (min-width: 120em) {
  .Grid-cell.xl-Cell--1of3 {
    flex: 0 0 33.3333%;
  }
}
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0;
}
.h1 {
  font-size: 2em;
}
.h2 {
  font-size: 1.5em;
}
.h3 {
  font-size: 1.17em;
}
.h4 {
  font-size: 1.12em;
}
.h5 {
  font-size: 0.83em;
}
.h6 {
  font-size: 0.75em;
}
@media screen and (min-width: 40em) {
  .sm-h1 {
    font-size: 2em;
  }
  .sm-h2 {
    font-size: 1.5em;
  }
  .sm-h3 {
    font-size: 1.17em;
  }
  .sm-h4 {
    font-size: 1.12em;
  }
  .sm-h5 {
    font-size: 0.83em;
  }
  .sm-h6 {
    font-size: 0.75em;
  }
}
@media screen and (min-width: 60em) {
  .md-h1 {
    font-size: 2em;
  }
  .md-h2 {
    font-size: 1.5em;
  }
  .md-h3 {
    font-size: 1.17em;
  }
  .md-h4 {
    font-size: 1.12em;
  }
  .md-h5 {
    font-size: 0.83em;
  }
  .md-h6 {
    font-size: 0.75em;
  }
}
@media screen and (min-width: 80em) {
  .lg-h1 {
    font-size: 2em;
  }
  .lg-h2 {
    font-size: 1.5em;
  }
  .lg-h3 {
    font-size: 1.17em;
  }
  .lg-h4 {
    font-size: 1.12em;
  }
  .lg-h5 {
    font-size: 0.83em;
  }
  .lg-h6 {
    font-size: 0.75em;
  }
}
.hide {
  display: none !important;
}
.show {
  display: inherit;
}
.hidden {
  visibility: hidden;
}
.sm-show,
.md-show,
.lg-show,
.xl-show {
  display: none;
}
/* extra-small */
@media screen and (min-width: 23em) {
  .xs-hide {
    display: none !important;
  }
}
@media screen and (min-width: 23em) {
  .xs-show {
    display: inherit !important;
  }
}
/* small */
@media screen and (min-width: 40em) {
  .sm-hide {
    display: none !important;
  }
}
@media screen and (min-width: 40em) {
  .sm-show {
    display: inherit !important;
  }
}
/* medium */
@media screen and (min-width: 60em) {
  .md-hide {
    display: none !important;
  }
}
@media screen and (min-width: 60em) {
  .md-show {
    display: inherit !important;
  }
}
/* large */
@media screen and (min-width: 80em) {
  .lg-hide {
    display: none !important;
  }
}
@media screen and (min-width: 80em) {
  .lg-show {
    display: inherit !important;
  }
}
/* xl */
@media screen and (--breakpoint-min-xl) h {
  .xl-hide {
    display: none !important;
  }
}
@media screen and (min-width: 120em) {
  .xl-show {
    display: inherit !important;
  }
}
/*
  display
  hide and show a child element using display
*/
.hover-parent.hover--display .hover-child,
.hover-parent:hover.hover--display .hover-child--hidden {
  display: none;
}
.hover-parent:hover.hover--display .hover-child {
  display: block;
}
/*
  visibility
  hide and show a child element using visibility
*/
.hover-parent.hover--visibility .hover-child,
.hover-parent:hover.hover--visibility .hover-child--hidden {
  visibility: hidden;
}
.hover-parent:hover.hover--visibility .hover-child {
  visibility: visible;
}
.hover-parent:hover.hover--inherit > *,
.hover-parent:hover.hover--inherit .hover-child {
  color: inherit !important;
}
.input,
._2hwsw {
  color: #4c5773;
  font-size: 1.12em;
  padding: 0.75rem 0.75rem;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  transition: border 0.3s linear;
}
/* React doesn't receive events from IE11:s input clear button so don't show it */
.input::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}
.input--small {
  padding: 0.3rem 0.4rem;
}
.input--focus,
.input:focus,
._2hwsw:focus {
  outline: none;
  border: 1px solid #509ee3;
  transition: border 0.3s linear;
  color: #4c5773;
}
.input--borderless,
.input--borderless:focus {
  box-shadow: none;
  outline: 0;
  border: none !important;
  background: transparent;
}
.input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.no-focus:focus {
  outline: 0;
}
/* prevent safari from forcing type="search" styles - metabase#5225 */
.input[type="search"] {
  -webkit-appearance: none;
}
/* When converting to styled components, use FullWidthContainer */
.wrapper,
._28B5h {
  width: 100%;
  margin: 0 auto;
  padding: 0 1em;
}
@media screen and (min-width: 40em) {
  .wrapper,
  ._28B5h {
    padding-left: 2em;
    padding-right: 2em;
  }
}
@media screen and (min-width: 60em) {
  .wrapper,
  ._28B5h {
    padding-left: 3em;
    padding-right: 3em;
  }
}
/* set height full relative to the parent */
.full-height,
._2Cz_3 {
  height: 100%;
}
/* display utilities */
.block,
.DsjBV {
  display: block;
}
@media screen and (min-width: 80em) {
  .lg-block {
    display: block;
  }
}
.inline,
._3kYJR {
  display: inline;
}
.inline-block,
.CO6xt {
  display: inline-block;
}
@media screen and (min-width: 40em) {
  .sm-inline-block {
    display: inline-block;
  }
}
.table {
  display: table;
}
.full,
._1b0Gt {
  width: 100%;
}
.half {
  width: 50%;
}
/* position utilities */
.fixed,
._1wiTN {
  position: fixed;
}
.relative,
._18-EI {
  position: relative;
}
.absolute,
._1MD7G {
  position: absolute;
}
@media screen and (min-width: 40em) {
  .sm-absolute {
    position: absolute;
  }
}
.top,
._3fyc4 {
  top: 0;
}
.right,
._3UD_2 {
  right: 0;
}
.bottom,
._2h9Fs {
  bottom: 0;
}
.left,
._1gKwo {
  left: 0;
}
@media screen and (min-width: 60em) {
  .wrapper.wrapper--trim,
  ._28B5h._3KhfO {
    max-width: 940px;
  }
}
@media screen and (min-width: 60em) {
  .wrapper.wrapper--small,
  ._28B5h.TxCZb {
    max-width: 752px;
  }
}
@media screen and (min-width: 80em) {
  .wrapper.lg-wrapper--trim {
    max-width: 1140px;
  }
}
@media screen and (min-width: 120em) {
  .wrapper.lg-wrapper--trim {
    max-width: 1540px;
  }
}
/* fully fit the parent element - use as a base for app-y pages like QB or settings */
.spread,
.Y2_Z- {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
/* force a stacking context for adding z-index to children */
.stacking-context {
  transform: scale(1);
}
.no-decoration,
.qXm3b {
  text-decoration: none;
}
.link {
  cursor: pointer;
  text-decoration: none;
  color: #509ee3;
}
.link:hover {
  text-decoration: underline;
}
.link--nohover:hover {
  text-decoration: none;
}
.link--wrappable {
  word-break: break-all;
}
.link--icon {
  line-height: normal;
  line-height: initial;
}
.expand-clickable {
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 0.5em;
  margin: -0.5em;
}
.overflow-auto {
  overflow: auto;
}
.overflow-scroll {
  overflow: scroll;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overflow-y-hidden {
  overflow-y: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-scroll {
  overflow-x: scroll;
}
.bounded-overflow-x-scroll {
  width: 100%;
  overflow-x: scroll;
}
.overflow-y-scroll {
  overflow-y: scroll;
}
.rounded,
.Wr_al {
  border-radius: 8px;
}
.rounded-top {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.rounded-bottom {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.rounded-left {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.rounded-right {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.circular {
  border-radius: 99px !important;
}
.not-rounded {
  border-radius: 0;
}
.scroll-y,
._2neoE {
  overflow-y: auto;
}
.scroll-x {
  overflow-x: auto;
}
.scroll-show::-webkit-scrollbar {
  width: 15px;
  min-height: 10px;
}
.scroll-show--hover::-webkit-scrollbar {
  display: none;
}
.scroll-show--hover:hover::-webkit-scrollbar {
  display: inherit;
}
.scroll-show::-webkit-scrollbar-thumb {
  border: 4px solid transparent;
  border-radius: 7px;
  background-clip: padding-box;
  background-color: #edf2f5;
}
.scroll-show::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}
.scroll-show::-webkit-scrollbar-corner {
  background-color: transparent;
}
.scroll-show:hover::-webkit-scrollbar-thumb {
  background-color: #93a1ab;
}
.scroll-show::-webkit-scrollbar-thumb:horizontal:hover,
.scroll-show::-webkit-scrollbar-thumb:vertical:hover {
  background-color: #93a1ab;
}
.scroll-show::-webkit-scrollbar-thumb:horizontal:active,
.scroll-show::-webkit-scrollbar-thumb:vertical:active {
  background-color: #93a1ab;
}
/* scroll light */
.scroll-show.scroll--light::-webkit-scrollbar-thumb {
  border-radius: 0;
  background-color: #edf2f5;
}
.scroll-show.scroll--light::-webkit-scrollbar-thumb:horizontal:hover,
.scroll-show.scroll--light::-webkit-scrollbar-thumb:vertical:hover,
.scroll-show.scroll--light::-webkit-scrollbar-thumb:horizontal:active,
.scroll-show.scroll--light::-webkit-scrollbar-thumb:vertical:active {
  background-color: #edf2f5;
}
.scroll-hide {
  -ms-overflow-style: none; /* IE 10+ */
  overflow: -moz-scrollbars-none; /* Firefox */
}
.scroll-hide::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}
.scroll-hide-all,
.scroll-hide-all * {
  -ms-overflow-style: none; /* IE 10+ */
  overflow: -moz-scrollbars-none; /* Firefox */
  scrollbar-width: none; /* Firefox */
}
.scroll-hide-all::-webkit-scrollbar,
.scroll-hide-all *::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}
.shadowed,
._26OGD {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.13);
}
.shadow-hover:hover {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  transition: box-shadow 300ms linear;
}
.ml-auto,
.OPZ6L {
  margin-left: auto;
}
.mr-auto,
.xdpBZ {
  margin-right: auto;
}
.mt-auto {
  margin-top: auto;
}
.mb-auto {
  margin-bottom: auto;
}
/* padding */
/* 0 */
.p0,
.CtsqB {
  padding: 0;
}
.pt0,
._3iJgj {
  padding-top: 0;
}
.pb0,
._3LbOm {
  padding-bottom: 0;
}
.pl0,
._16yVl {
  padding-left: 0;
}
.pr0,
._15Uyn {
  padding-right: 0;
}
/* 1 */
.p1,
._1FLRv {
  padding: 0.5rem;
}
.px1,
._31ino {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.py1,
._2XN97 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.pt1,
._2itq0 {
  padding-top: 0.5rem;
}
.pb1,
.DOCnt {
  padding-bottom: 0.5rem;
}
.pl1,
._3FzDO {
  padding-left: 0.5rem;
}
.pr1,
._1ZfKh {
  padding-right: 0.5rem;
}
/* 2 */
.p2,
._2z9kb {
  padding: 1rem;
}
.px2,
._1aL0S {
  padding-left: 1rem;
  padding-right: 1rem;
}
.py2,
._1s_jv {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.pt2,
.hPXk7 {
  padding-top: 1rem;
}
.pb2,
._2UDhs {
  padding-bottom: 1rem;
}
.pl2,
._4GzCU {
  padding-left: 1rem;
}
.pr2,
._342no {
  padding-right: 1rem;
}
/* 3 */
.p3,
._1GX2b {
  padding: 1.5rem;
}
.px3,
.PYP7R {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py3,
._3jBTn {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.pt3,
._2wbTv {
  padding-top: 1.5rem;
}
.pb3,
._19mch {
  padding-bottom: 1.5rem;
}
.pl3,
._3UYU0 {
  padding-left: 1.5rem;
}
.pr3,
._1WOBS {
  padding-right: 1.5rem;
}
/* 4 */
.p4,
._1iwVX {
  padding: 2rem;
}
.px4,
._2VMbm {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py4,
._3Ot6K {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pt4,
._1B0FZ {
  padding-top: 2rem;
}
.pb4,
._2jjBF {
  padding-bottom: 2rem;
}
.pl4,
.odbte {
  padding-left: 2rem;
}
.pr4,
._3YxA_ {
  padding-right: 2rem;
}
/* margin */
/* 0 */
.m0,
._3-MrN {
  margin: 0;
}
.mt0,
._1VLzq {
  margin-top: 0;
}
.mb0,
._1Bf_e {
  margin-bottom: 0;
}
.ml0,
._3o-sC {
  margin-left: 0;
}
.mr0,
.Pb6RQ {
  margin-right: 0;
}
/* 1 */
.m1,
._2YHpe {
  margin: 0.5rem;
}
.mx1,
._1ZhAK {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.my1,
._2FnGH {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.mt1,
._38YTw {
  margin-top: 0.5rem;
}
.mb1,
._1oIEw {
  margin-bottom: 0.5rem;
}
.ml1,
.BcFLh {
  margin-left: 0.5rem;
}
.mr1,
._3K4no {
  margin-right: 0.5rem;
}
/* 2 */
.m2,
._2Em4n {
  margin: 1rem;
}
.mx2,
._1ABq6 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.my2,
._1ocN4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.mt2,
._17V2F {
  margin-top: 1rem;
}
.mb2,
._2AJrG {
  margin-bottom: 1rem;
}
.ml2,
._1Wqf2 {
  margin-left: 1rem;
}
.mr2,
._2VkQ1 {
  margin-right: 1rem;
}
/* 3 */
.m3,
.aXWCm {
  margin: 1.5rem;
}
.mx3,
._2lQ2X {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
.my3,
._14leg {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.mt3,
._1TQQY {
  margin-top: 1.5rem;
}
.mb3,
._3pezG {
  margin-bottom: 1.5rem;
}
.ml3,
._1LT7f {
  margin-left: 1.5rem;
}
.mr3,
.raIhq {
  margin-right: 1.5rem;
}
/* 4 */
.m4,
._2o3k3 {
  margin: 2rem;
}
.mx4,
.-zXOl {
  margin-left: 2rem;
  margin-right: 2rem;
}
.my4,
._1dBmn {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.mt4,
._37W4X {
  margin-top: 2rem;
}
.mb4,
.A5BYb {
  margin-bottom: 2rem;
}
.ml4,
._3or2i {
  margin-left: 2rem;
}
.mr4,
.rjRpE {
  margin-right: 2rem;
}
/* negative margin (mainly for correction of horizontal positioning) */
.mln1 {
  margin-left: calc(-1 * 0.5rem);
}
.mln2 {
  margin-left: calc(-1 * 1rem);
}
.mln3 {
  margin-left: calc(-1 * 1.5rem);
}
.mln4 {
  margin-left: calc(-1 * 2rem);
}
.mbn1 {
  margin-bottom: calc(-1 * 0.5rem);
}
.mbn2 {
  margin-bottom: calc(-1 * 1rem);
}
.mbn3 {
  margin-bottom: calc(-1 * 1.5rem);
}
.mbn4 {
  margin-bottom: calc(-1 * 2rem);
}
/* responsive spacing */
@media screen and (min-width: 40em) {
  /* padding */

  /* 0 */
  .sm-p0 {
    padding: 0;
  }
  .sm-pt0 {
    padding-top: 0;
  }
  .sm-pb0 {
    padding-bottom: 0;
  }
  .sm-pl0 {
    padding-left: 0;
  }
  .sm-pr0 {
    padding-right: 0;
  }

  /* 1 */
  .sm-p1 {
    padding: 0.5rem;
  }

  .sm-px1 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .sm-py1 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .sm-pt1 {
    padding-top: 0.5rem;
  }
  .sm-pb1 {
    padding-bottom: 0.5rem;
  }
  .sm-pl1 {
    padding-left: 0.5rem;
  }
  .sm-pr1 {
    padding-right: 0.5rem;
  }

  /* 2 */

  .sm-p2 {
    padding: 1rem;
  }

  .sm-px2 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm-py2 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .sm-pt2 {
    padding-top: 1rem;
  }
  .sm-pb2 {
    padding-bottom: 1rem;
  }
  .sm-pl2 {
    padding-left: 1rem;
  }
  .sm-pr2 {
    padding-right: 1rem;
  }

  /* 3 */

  .sm-p3 {
    padding: 1.5rem;
  }

  .sm-px3 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm-py3 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .sm-pt3 {
    padding-top: 1.5rem;
  }
  .sm-pb3 {
    padding-bottom: 1.5rem;
  }
  .sm-pl3 {
    padding-left: 1.5rem;
  }
  .sm-pr3 {
    padding-right: 1.5rem;
  }

  /* 4 */

  .sm-p4 {
    padding: 2rem;
  }

  .sm-px4 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm-py4 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .sm-pt4 {
    padding-top: 2rem;
  }
  .sm-pb4 {
    padding-bottom: 2rem;
  }
  .sm-pl4 {
    padding-left: 2rem;
  }
  .sm-pr4 {
    padding-right: 2rem;
  }

  /* margin */

  /* 0 */
  .sm-m0 {
    margin: 0;
  }
  .sm-mt0 {
    margin-top: 0;
  }
  .sm-mb0 {
    margin-bottom: 0;
  }
  .sm-ml0 {
    margin-left: 0;
  }
  .sm-mr0 {
    margin-right: 0;
  }

  /* 1 */
  .sm-m1 {
    margin: 0.5rem;
  }

  .sm-mx1 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  .sm-my1 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .sm-mt1 {
    margin-top: 0.5rem;
  }
  .sm-mb1 {
    margin-bottom: 0.5rem;
  }
  .sm-ml1 {
    margin-left: 0.5rem;
  }
  .sm-mr1 {
    margin-right: 0.5rem;
  }

  /* 2 */

  .sm-m2 {
    margin: 1rem;
  }

  .sm-mx2 {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .sm-my2 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .sm-mt2 {
    margin-top: 1rem;
  }
  .sm-mb2 {
    margin-bottom: 1rem;
  }
  .sm-ml2 {
    margin-left: 1rem;
  }
  .sm-mr2 {
    margin-right: 1rem;
  }

  /* 3 */

  .sm-m3 {
    margin: 1.5rem;
  }

  .sm-mx3 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .sm-my3 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .sm-mt3 {
    margin-top: 1.5rem;
  }
  .sm-mb3 {
    margin-bottom: 1.5rem;
  }
  .sm-ml3 {
    margin-left: 1.5rem;
  }
  .sm-mr3 {
    margin-right: 1.5rem;
  }

  /* 4 */

  .sm-m4 {
    margin: 2rem;
  }

  .sm-mx4 {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .sm-my4 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .sm-mt4 {
    margin-top: 2rem;
  }
  .sm-mb4 {
    margin-bottom: 2rem;
  }
  .sm-ml4 {
    margin-left: 2rem;
  }
  .sm-mr4 {
    margin-right: 2rem;
  }
}
@media screen and (min-width: 60em) {
  /* padding */

  /* 0 */
  .md-p0 {
    padding: 0;
  }
  .md-pt0 {
    padding-top: 0;
  }
  .md-pb0 {
    padding-bottom: 0;
  }
  .md-pl0 {
    padding-left: 0;
  }
  .md-pr0 {
    padding-right: 0;
  }

  /* 1 */
  .md-p1 {
    padding: 0.5rem;
  }

  .md-px1 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .md-py1 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .md-pt1 {
    padding-top: 0.5rem;
  }
  .md-pb1 {
    padding-bottom: 0.5rem;
  }
  .md-pl1 {
    padding-left: 0.5rem;
  }
  .md-pr1 {
    padding-right: 0.5rem;
  }

  /* 2 */

  .md-p2 {
    padding: 1rem;
  }

  .md-px2 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .md-py2 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .md-pt2 {
    padding-top: 1rem;
  }
  .md-pb2 {
    padding-bottom: 1rem;
  }
  .md-pl2 {
    padding-left: 1rem;
  }
  .md-pr2 {
    padding-right: 1rem;
  }

  /* 3 */

  .md-p3 {
    padding: 1.5rem;
  }

  .md-px3 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md-py3 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .md-pt3 {
    padding-top: 1.5rem;
  }
  .md-pb3 {
    padding-bottom: 1.5rem;
  }
  .md-pl3 {
    padding-left: 1.5rem;
  }
  .md-pr3 {
    padding-right: 1.5rem;
  }

  /* 4 */

  .md-p4 {
    padding: 2rem;
  }

  .md-px4 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .md-py4 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .md-pt4 {
    padding-top: 2rem;
  }
  .md-pb4 {
    padding-bottom: 2rem;
  }
  .md-pl4 {
    padding-left: 2rem;
  }
  .md-pr4 {
    padding-right: 2rem;
  }

  /* margin */

  /* 0 */
  .md-m0 {
    margin: 0;
  }
  .md-mt0 {
    margin-top: 0;
  }
  .md-mb0 {
    margin-bottom: 0;
  }
  .md-ml0 {
    margin-left: 0;
  }
  .md-mr0 {
    margin-right: 0;
  }

  /* 1 */
  .md-m1 {
    margin: 0.5rem;
  }

  .md-mx1 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  .md-my1 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .md-mt1 {
    margin-top: 0.5rem;
  }
  .md-mb1 {
    margin-bottom: 0.5rem;
  }
  .md-ml1 {
    margin-left: 0.5rem;
  }
  .md-mr1 {
    margin-right: 0.5rem;
  }

  /* 2 */

  .md-m2 {
    margin: 1rem;
  }

  .md-mx2 {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .md-my2 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .md-mt2 {
    margin-top: 1rem;
  }
  .md-mb2 {
    margin-bottom: 1rem;
  }
  .md-ml2 {
    margin-left: 1rem;
  }
  .md-mr2 {
    margin-right: 1rem;
  }

  /* 3 */

  .md-m3 {
    margin: 1.5rem;
  }

  .md-mx3 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .md-my3 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .md-mt3 {
    margin-top: 1.5rem;
  }
  .md-mb3 {
    margin-bottom: 1.5rem;
  }
  .md-ml3 {
    margin-left: 1.5rem;
  }
  .md-mr3 {
    margin-right: 1.5rem;
  }

  /* 4 */

  .md-m4 {
    margin: 2rem;
  }

  .md-mx4 {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .md-my4 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .md-mt4 {
    margin-top: 2rem;
  }
  .md-mb4 {
    margin-bottom: 2rem;
  }
  .md-ml4 {
    margin-left: 2rem;
  }
  .md-mr4 {
    margin-right: 2rem;
  }
}
@media screen and (min-width: 80em) {
  /* padding */

  /* 0 */
  .lg-p0 {
    padding: 0;
  }
  .lg-pt0 {
    padding-top: 0;
  }
  .lg-pb0 {
    padding-bottom: 0;
  }
  .lg-pl0 {
    padding-left: 0;
  }
  .lg-pr0 {
    padding-right: 0;
  }

  /* 1 */
  .lg-p1 {
    padding: 0.5rem;
  }

  .lg-px1 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .lg-py1 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .lg-pt1 {
    padding-top: 0.5rem;
  }
  .lg-pb1 {
    padding-bottom: 0.5rem;
  }
  .lg-pl1 {
    padding-left: 0.5rem;
  }
  .lg-pr1 {
    padding-right: 0.5rem;
  }

  /* 2 */

  .lg-p2 {
    padding: 1rem;
  }

  .lg-px2 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .lg-py2 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .lg-pt2 {
    padding-top: 1rem;
  }
  .lg-pb2 {
    padding-bottom: 1rem;
  }
  .lg-pl2 {
    padding-left: 1rem;
  }
  .lg-pr2 {
    padding-right: 1rem;
  }

  /* 3 */

  .lg-p3 {
    padding: 1.5rem;
  }

  .lg-px3 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .lg-py3 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .lg-pt3 {
    padding-top: 1.5rem;
  }
  .lg-pb3 {
    padding-bottom: 1.5rem;
  }
  .lg-pl3 {
    padding-left: 1.5rem;
  }
  .lg-pr3 {
    padding-right: 1.5rem;
  }

  /* 4 */

  .lg-p4 {
    padding: 2rem;
  }

  .lg-px4 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg-py4 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .lg-pt4 {
    padding-top: 2rem;
  }
  .lg-pb4 {
    padding-bottom: 2rem;
  }
  .lg-pl4 {
    padding-left: 2rem;
  }
  .lg-pr4 {
    padding-right: 2rem;
  }

  /* margin */

  /* 0 */
  .lg-m0 {
    margin: 0;
  }
  .lg-mt0 {
    margin-top: 0;
  }
  .lg-mb0 {
    margin-bottom: 0;
  }
  .lg-ml0 {
    margin-left: 0;
  }
  .lg-mr0 {
    margin-right: 0;
  }

  /* 1 */
  .lg-m1 {
    margin: 0.5rem;
  }

  .lg-mx1 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  .lg-my1 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .lg-mt1 {
    margin-top: 0.5rem;
  }
  .lg-mb1 {
    margin-bottom: 0.5rem;
  }
  .lg-ml1 {
    margin-left: 0.5rem;
  }
  .lg-mr1 {
    margin-right: 0.5rem;
  }

  /* 2 */

  .lg-m2 {
    margin: 1rem;
  }

  .lg-mx2 {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .lg-my2 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .lg-mt2 {
    margin-top: 1rem;
  }
  .lg-mb2 {
    margin-bottom: 1rem;
  }
  .lg-ml2 {
    margin-left: 1rem;
  }
  .lg-mr2 {
    margin-right: 1rem;
  }

  /* 3 */

  .lg-m3 {
    margin: 1.5rem;
  }

  .lg-mx3 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .lg-my3 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .lg-mt3 {
    margin-top: 1.5rem;
  }
  .lg-mb3 {
    margin-bottom: 1.5rem;
  }
  .lg-ml3 {
    margin-left: 1.5rem;
  }
  .lg-mr3 {
    margin-right: 1.5rem;
  }

  /* 4 */

  .lg-m4 {
    margin: 2rem;
  }

  .lg-mx4 {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .lg-my4 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .lg-mt4 {
    margin-top: 2rem;
  }
  .lg-mb4 {
    margin-bottom: 2rem;
  }
  .lg-ml4 {
    margin-left: 2rem;
  }
  .lg-mr4 {
    margin-right: 2rem;
  }
}
@media screen and (min-width: 120em) {
  /* padding */

  /* 0 */
  .xl-p0 {
    padding: 0;
  }
  .xl-pt0 {
    padding-top: 0;
  }
  .xl-pb0 {
    padding-bottom: 0;
  }
  .xl-pl0 {
    padding-left: 0;
  }
  .xl-pr0 {
    padding-right: 0;
  }

  /* 1 */
  .xl-p1 {
    padding: 0.5rem;
  }

  .xl-px1 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .xl-py1 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .xl-pt1 {
    padding-top: 0.5rem;
  }
  .xl-pb1 {
    padding-bottom: 0.5rem;
  }
  .xl-pl1 {
    padding-left: 0.5rem;
  }
  .xl-pr1 {
    padding-right: 0.5rem;
  }

  /* 2 */

  .xl-p2 {
    padding: 1rem;
  }

  .xl-px2 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .xl-py2 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .xl-pt2 {
    padding-top: 1rem;
  }
  .xl-pb2 {
    padding-bottom: 1rem;
  }
  .xl-pl2 {
    padding-left: 1rem;
  }
  .xl-pr2 {
    padding-right: 1rem;
  }

  /* 3 */

  .xl-p3 {
    padding: 1.5rem;
  }

  .xl-px3 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .xl-py3 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .xl-pt3 {
    padding-top: 1.5rem;
  }
  .xl-pb3 {
    padding-bottom: 1.5rem;
  }
  .xl-pl3 {
    padding-left: 1.5rem;
  }
  .xl-pr3 {
    padding-right: 1.5rem;
  }

  /* 4 */

  .xl-p4 {
    padding: 2rem;
  }

  .xl-px4 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .xl-py4 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .xl-pt4 {
    padding-top: 2rem;
  }
  .xl-pb4 {
    padding-bottom: 2rem;
  }
  .xl-pl4 {
    padding-left: 2rem;
  }
  .xl-pr4 {
    padding-right: 2rem;
  }

  /* margin */

  /* 0 */
  .xl-m0 {
    margin: 0;
  }
  .xl-mt0 {
    margin-top: 0;
  }
  .xl-mb0 {
    margin-bottom: 0;
  }
  .xl-ml0 {
    margin-left: 0;
  }
  .xl-mr0 {
    margin-right: 0;
  }

  /* 1 */
  .xl-m1 {
    margin: 0.5rem;
  }

  .xl-mx1 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  .xl-my1 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .xl-mt1 {
    margin-top: 0.5rem;
  }
  .xl-mb1 {
    margin-bottom: 0.5rem;
  }
  .xl-ml1 {
    margin-left: 0.5rem;
  }
  .xl-mr1 {
    margin-right: 0.5rem;
  }

  /* 2 */

  .xl-m2 {
    margin: 1rem;
  }

  .xl-mx2 {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .xl-my2 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .xl-mt2 {
    margin-top: 1rem;
  }
  .xl-mb2 {
    margin-bottom: 1rem;
  }
  .xl-ml2 {
    margin-left: 1rem;
  }
  .xl-mr2 {
    margin-right: 1rem;
  }

  /* 3 */

  .xl-m3 {
    margin: 1.5rem;
  }

  .xl-mx3 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .xl-my3 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .xl-mt3 {
    margin-top: 1.5rem;
  }
  .xl-mb3 {
    margin-bottom: 1.5rem;
  }
  .xl-ml3 {
    margin-left: 1.5rem;
  }
  .xl-mr3 {
    margin-right: 1.5rem;
  }

  /* 4 */

  .xl-m4 {
    margin: 2rem;
  }

  .xl-mx4 {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .xl-my4 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .xl-mt4 {
    margin-top: 2rem;
  }
  .xl-mb4 {
    margin-bottom: 2rem;
  }
  .xl-ml4 {
    margin-left: 2rem;
  }
  .xl-mr4 {
    margin-right: 2rem;
  }
}
:root {
  --70-percent-black: #4c5773;
}
/* center */
.text-centered,
.rTQr- {
  text-align: center;
}
@media screen and (min-width: 40em) {
  .sm-text-centered {
    text-align: center;
  }
}
@media screen and (min-width: 60em) {
  .md-text-centered {
    text-align: center;
  }
}
@media screen and (min-width: 80em) {
  .lg-text-centered {
    text-align: center;
  }
}
@media screen and (min-width: 120em) {
  .xl-text-centered {
    text-align: center;
  }
}
/* left */
.text-left,
.oCLs1 {
  text-align: left;
}
@media screen and (min-width: 40em) {
  .sm-text-left {
    text-align: left;
  }
}
@media screen and (min-width: 60em) {
  .md-text-left {
    text-align: left;
  }
}
@media screen and (min-width: 80em) {
  .lg-text-left {
    text-align: left;
  }
}
@media screen and (min-width: 120em) {
  .xl-text-left {
    text-align: left;
  }
}
/* right */
.text-right,
._2i-mE {
  text-align: right;
}
@media screen and (min-width: 40em) {
  .sm-text-right {
    text-align: right;
  }
}
@media screen and (min-width: 60em) {
  .md-text-right {
    text-align: right;
  }
}
@media screen and (min-width: 80em) {
  .lg-text-right {
    text-align: right;
  }
}
@media screen and (min-width: 120em) {
  .xl-text-right {
    text-align: right;
  }
}
.text-uppercase,
._3l3zl {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.text-lowercase {
  text-transform: lowercase;
}
.text-capitalize {
  text-transform: capitalize;
}
.text-transform-none {
  text-transform: none;
}
/* text weight */
/* NOTE: .text-light removed since it conflicted with text-light in colors.css */
.text-normal {
  font-weight: 400;
}
.text-bold,
._3TD8R {
  font-weight: 700;
}
.text-heavy {
  font-weight: 900;
}
/* text style */
.text-italic {
  font-style: italic;
}
/* larger text size used for descriptions  */
.text-body,
._3CT2E {
  font-size: 1.286em;
  line-height: 1.457em;
  color: #949aab; /* TODO - is this bad? */
}
.text-list {
  font-size: 1em;
}
.text-paragraph,
.Tgxr2 {
  font-size: 1.143em;
  line-height: 1.5em;
}
.text-spaced,
._1Ujzn {
  line-height: 1.5em;
}
.text-unspaced,
.Opbex {
  line-height: normal;
}
.text-small {
  font-size: 0.875em;
}
.text-smaller {
  font-size: 0.8em;
}
.text-current {
  color: currentColor;
}
.text-underline {
  text-decoration: underline;
}
.text-underline-hover:hover {
  text-decoration: underline;
}
.text-ellipsis {
  text-overflow: ellipsis;
}
.text-wrap {
  word-wrap: anywhere;
  word-break: break-word;
  word-wrap: anywhere;
}
.text-nowrap {
  white-space: nowrap;
}
.text-code {
  font-family: monospace;
  color: #949aab;
  background-color: #edf2f5;
  border-radius: 2px;
  padding: 0.2em 0.4em;
  line-height: 1.4em;
  white-space: pre-wrap;
}
.text-code-plain {
  font-family: monospace;
  color: #4c5773;
  line-height: 1.4em;
  white-space: pre-wrap;
}
.text-monospace,
._1UYVa {
  font-family: Monaco, monospace;
}
.text-pre-wrap {
  white-space: pre-wrap;
}
.text-measure {
  max-width: 620px;
}
.break-anywhere {
  line-break: anywhere;
}
.transition-color,
._2rmlO {
  transition: color 0.3s linear;
}
.transition-background,
._18Xrq {
  transition: background 0.2s linear;
}
.transition-shadow {
  transition: box-shadow 0.2s linear;
}
.transition-all {
  transition: all 0.2s linear;
}
.transition-border {
  transition: border 0.3s linear;
}
.w-full,
._3Kum9 {
  width: 100%;
}

:root {
  /* taken from Sidebar.css, should probably factor them out into variables */
}

._3_Ba_ {
  display: flex;
  align-items: center;
  color: #b8bbc3;
}

._2TF9W {
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  cursor: default;
}

._2gIyS {
  margin-left: 0.75em;
  margin-right: 0.75em;
  flex-shrink: 0;
}

/* the breadcrumb path will always inherit the color of the breadcrumbs object */

._2TF9W._22hhf {
  color: currentColor;
  transition: color 0.3s linear;
  cursor: pointer;
}

._2TF9W._22hhf:hover {
  color: #4c5773;
  transition: color 0.3s linear;
}

/* the breadcrumb page (current page) should be a different contrasting color  */

._2TF9W._3fU6E {
  color: #4c5773;
}

._3d7eA {
  color: #949aab;
  max-width: 100%;
}

.eVgJF {
  height: 15px;
}

/* the breadcrumb path will always inherit the color of the breadcrumbs object */

.eVgJF._22hhf {
  color: currentColor;
  transition: color 0.3s linear;
}

.eVgJF._22hhf:hover {
  color: #509ee3;
  transition: color 0.3s linear;
}

/* the breadcrumb page (current page) should be a different contrasting color  */

.eVgJF._3fU6E {
  color: #509ee3;
}

.expression-editor-textfield .ace_editor {
  overflow: visible;
  overflow: initial;
}

.expression-editor-textfield textarea {
  min-height: 5px;
}

.expression-editor-textfield .ace_content * {
  font-family: monospace !important;
}

.expression-editor-textfield .ace_hidpi .ace_content {
  color: #4c5773;
  font-weight: 700;
}

.expression-editor-textfield .ace-tm .ace_keyword,
.expression-editor-textfield .ace-tm .ace_constant.ace_numeric {
  color: #4c5773;
}

.expression-editor-textfield .ace-tm .ace_variable {
  color: #509ee3;
}

.expression-editor-textfield .ace-tm .ace_string {
  color: #f2a86f;
}

.expression-editor-textfield .ace_cursor {
  border-left-width: 1px;
}

.expression-editor-textfield .ace_hidden-cursors .ace_cursor {
  opacity: 0;
}

.expression-editor-textfield .ace_content .error {
  position: absolute;
  border-bottom: 2px solid #ed6e6e;
  border-radius: 0px;
  background-color: rgba(237,110,110,0.33333);
}

.PopoverBody .ExpressionPopover {
  width: 480px;
}

.TableInteractive {
  color: #4f575d;
  overflow: hidden;
}

.TableInteractive-headerCellData .cellData {
  font-weight: 900;
  font-size: 10px;
  border: 1px solid rgba(80, 158, 227, 0.2);
  padding: 0.25em 0.65em;
  border-radius: 6px;
  min-width: 35px;
  color: #509ee3;
}

.TableInteractive-headerCellData .cellData:hover {
  border: 1px solid rgba(80, 158, 227, 0.56);
}

.TableInteractive-headerCellData .Icon-chevrondown,
.TableInteractive-headerCellData .Icon-chevronup {
  opacity: 0.2;
}

.TableInteractive-headerCellData--sorted .Icon-chevrondown,
.TableInteractive-headerCellData--sorted .Icon-chevronup {
  opacity: 1;
  transition: opacity 0.3s linear;
}

/* if the column is the one that is being sorted*/

.TableInteractive-headerCellData--sorted {
  color: #509ee3;
}

.TableInteractive-header {
  box-sizing: border-box;
  border-bottom: 1px solid #f0f0f0;
}

.TableInteractive .TableInteractive-cellWrapper {
  /* padding: 0 0.75em; */
  overflow: hidden;
  display: flex;
  align-items: center;

  border-top: 1px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid rgba(240, 240, 240, 0.3);
}

.TableInteractive .TableInteractive-cellWrapper--active {
  z-index: 1;
}

.TableInteractive .TableInteractive-header,
.TableInteractive .TableInteractive-header .TableInteractive-cellWrapper {
  background-color: #ffffff;
  background-image: none;
}

.TableInteractive .TableInteractive-header,
.TableInteractive .TableInteractive-header .TableInteractive-cellWrapper {
  background-color: #ffffff;
}

/* cell overflow ellipsis */

.TableInteractive .cellData {
  margin: 0 0.75em;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
  font-weight: 700;
  font-size: 12.5px;
}

/* pivot */

.TableInteractive.TableInteractive--pivot
  .TableInteractive-cellWrapper--firstColumn {
  border-right: 1px solid #f0f0f0;
}

.PagingButtons {
  border: 1px solid #f0f0f0;
}

.TableInteractive
  .TableInteractive-header
  .TableInteractive-cellWrapper.tether-enabled
  .cellData {
  background-color: rgb(80, 158, 227);
  color: white !important;
}

/*
.TableInteractive .TableInteractive-cellWrapper.tether-enabled {
  background-color: var(--color-brand);
  color: white !important;
}
*/

.TableInteractive-cellWrapper:hover {
  background-color: rgba(80, 158, 227, 0.1);
}

.Table-ID .cellData {
  border: 1px solid rgba(80, 158, 227, 0.14);
  background-color: rgba(80, 158, 227, 0.08);
  padding: 0.25em 0.65em;
  border-radius: 99px;
  min-width: 35px;
  text-align: center;
  color: #509ee3;
}

.TableInteractive-ID.TableInteractive-cellWrapper:hover,
.TableInteractive-ID.TableInteractive-cellWrapper.tether-enabled {
  background-color: transparent;
}

.TableInteractive-ID.TableInteractive-cellWrapper:hover .cellData,
.TableInteractive-ID.TableInteractive-cellWrapper.tether-enabled .cellData {
  background-color: #509ee3;
  color: white;
}

.TableInteractive-headerCellData--sorted {
  color: #509ee3;
}

.TableInteractive-cellWrapper--firstColumn {
  padding-left: 1.5em;
}

.CtorL {
  /* standard table reset */
  border-collapse: collapse;
  border-spacing: 0;

  width: 100%;

  font-size: 12px;
  line-height: 12px;
  text-align: left;
}

.CtorL tr {
  border-bottom: 1px solid rgba(240, 240, 240, 0.3);
}

.CtorL th,
.CtorL td {
  padding: 0.72em;
  border-bottom: 1px solid rgba(240, 240, 240, 0.3);
}

.ipoXK th:first-child,
.ipoXK td:first-child {
  padding-left: 1.44em;
}

.react-sortable-hoc-helper {
  z-index: 1000;
}

._3yC8D {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.5em 0.75em;
  height: 100%;
}

._3yC8D ._3KwDU {
  padding: 0.25em 0.75em;
  font-size: 1.143em;
  line-height: 1.602em;
  pointer-events: all;
  resize: none;
  outline: none;
  border-radius: 8px;
  min-height: unset;
  height: inherit;
}

._3yC8D ._3KwDU:focus {
  border-color: #509ee3;
  background-color: white;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.13);
}

._3yC8D ._1J_Mq {
  height: 100%;
  overflow: auto;
  pointer-events: all;
}

._3yC8D ._1J_Mq h1 {
  font-weight: 900;
  font-size: 1.831em;
  margin: 0.375em 0 0.25em 0;
  padding-right: 1.5em;
}

._3yC8D ._1J_Mq h2 {
  font-size: 1.627em;
  margin: 0.375em 0 0.25em 0;
  padding-right: 1.5em;
}

._3yC8D ._1J_Mq h3 {
  font-size: 1.447em;
  margin: 0.375em 0 0.25em 0;
  padding-right: 1.5em;
}

._3yC8D ._1J_Mq h4 {
  font-size: 1.286em;
  margin: 0.375em 0 0.25em 0;
  padding-right: 1.5em;
}

._3yC8D ._1J_Mq h5 {
  font-size: 1.143em;
  margin: 0.375em 0 0.25em 0;
  padding-right: 1.5em;
}

._3yC8D ._1J_Mq p {
  font-size: 1.143em;
  line-height: 1.602em;
  padding: 0;
  margin: 0 1.5em 0.5em 0;
}

._1J_Mq ul {
  font-size: 16px;
  margin: 0.5em 0 0.5em 0;
  padding: 0 1.5em;
  list-style-type: disc;
}

._1J_Mq ol {
  font-size: 16px;
  margin: 0.5em 0 0.5em 0;
  padding: 0 1.5em;
  list-style-type: decimal;
}

._1J_Mq li {
  list-style-position: outside;
  padding: 0.25em 0 0 0;
}

._1J_Mq a {
  display: inline-block;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  color: #509ee3;
}

._1J_Mq a:hover {
  text-decoration: underline;
}

._1J_Mq a:hover {
  text-decoration: underline;
}

._1J_Mq th {
  text-align: left;
}

._1J_Mq table {
  /* standard table reset */
  border-collapse: collapse;
  border-spacing: 0;

  margin: 1em 0 1em 0;
  width: 100%;
  font-family: Monaco, monospace;
  font-size: 12.64px;
  line-height: 0.76rem;
  text-align: left;
}

._1J_Mq tr {
  border-bottom: 1px solid rgba(240, 240, 240, 0.3);
}

._1J_Mq tr:nth-child(even) {
  background-color: rgba(46, 53, 59, 0.02);
}

._1J_Mq th,
._1J_Mq td {
  padding: 0.75em;
  border: 1px solid rgba(240, 240, 240, 0.3);
}

._1J_Mq code {
  font-family: Monaco, monospace;
  font-size: 12.64px;
  line-height: 20px;
  padding: 0 0.25em;
  background-color: #f9fbfc;
  border-radius: 8px;
}

._1J_Mq pre code {
  padding: 1em;
  display: block;
  margin-right: 1.5em;
}

._1J_Mq blockquote {
  color: #949aab;
  border-left: 5px solid #f0f0f0;
  padding: 0 1.5em 0 17px;
  margin: 0.5em 0 0.5em 1em;
}

._1J_Mq blockquote p {
  padding: 0;
  margin: 0;
}

._1J_Mq img {
  max-width: 100%;
  height: auto;
}

._1J_Mq hr {
  margin: 0;
}

._3guoQ {
  margin: 0;
}

.LineAreaBarChart .renderer {
  margin-top: -5px;
  margin-left: -0.5em;
  margin-right: -0.5em;
  margin-bottom: -0.5em;
  overflow: hidden;
}

.LineAreaBarChart .dc-chart .grid-line.horizontal {
  stroke: rgba(148, 154, 171, 0.2);
  stroke-dasharray: 5, 5;
}

.LineAreaBarChart .dc-chart .axis {
  z-index: -1;
}

.LineAreaBarChart .dc-chart .axis text {
  font-size: 12px;
  font-family: "Lato", sans-serif;
  font-weight: 900;
}

.LineAreaBarChart .dc-chart .axis .domain,
.LineAreaBarChart .dc-chart .axis .tick line {
  stroke: #b8bbc3;
}

.LineAreaBarChart .dc-chart .axis .tick text {
  fill: #949aab;
}

.LineAreaBarChart .dc-chart g.row text.outside {
  fill: #949aab;
  font-weight: 900;
}

.LineAreaBarChart .dc-chart g.row text.inside {
  fill: white;
  font-weight: bold;
}

/* turn off ticks and domain lines */

.LineAreaBarChart .dc-chart .axis.y .domain,
.LineAreaBarChart .dc-chart .axis.yr .domain,
.LineAreaBarChart .dc-chart .axis.y .tick line,
.LineAreaBarChart .dc-chart .axis.yr .tick line {
  display: none;
}

.LineAreaBarChart .dc-chart .x-axis-label,
.LineAreaBarChart .dc-chart .y-axis-label {
  fill: #949aab;
  font-size: 14px;
  font-weight: 900;
}

/* disable grid lines */

.LineAreaBarChart .dc-chart .tick line {
  display: none;
}

/* enabled grid lines for row charts */

.LineAreaBarChart .dc-chart .rowChart .tick .grid-line {
  display: inherit;
}

/* restyle grid-line for 0 to look like X axis */

.LineAreaBarChart .dc-chart .stacked line.zero {
  stroke: #b8bbc3;
  opacity: 1;
  stroke-dasharray: none;
}

/* restyle X axis for stacked charts to look like a grid line */

.LineAreaBarChart .dc-chart .stacked .domain {
  stroke: rgba(148, 154, 171, 0.2);
  stroke-dasharray: 5, 5;
}

/* gridline at 0 overlaps with X axis */

.LineAreaBarChart .dc-chart .grid-line.horizontal line:first-child {
  display: none;
}

/* disable pointer events on all chart elements while dragging to avoid weird interactions */

.LineAreaBarChart .dc-chart .dragging .area,
.LineAreaBarChart .dc-chart .dragging .bar,
.LineAreaBarChart .dc-chart .dragging .line,
.LineAreaBarChart .dc-chart .dragging .dot,
.LineAreaBarChart .dc-chart .dragging .row,
.LineAreaBarChart .dc-chart .dragging .bubble,
.LineAreaBarChart .dc-chart .dragging .voronoi {
  pointer-events: none !important;
}

/* disable dc default behavior */

.LineAreaBarChart .dc-chart rect.bar:hover {
  fill-opacity: 1;
}

.LineAreaBarChart .dc-chart g.row rect {
  fill-opacity: 1;
}

/* highlight single series bar and row charts */

.LineAreaBarChart.mute-0 .dc-chart rect.bar:hover,
.LineAreaBarChart.mute-0 .dc-chart g.row:hover {
  opacity: 1 !important;
}

.LineAreaBarChart .dc-chart circle.bubble {
  fill-opacity: 0.8;
  stroke-width: 1;
  stroke: white;
}

.LineAreaBarChart .dc-chart .enable-dots .dc-tooltip .dot:hover,
.LineAreaBarChart .dc-chart .enable-dots .dc-tooltip .dot.hover {
  fill: currentColor;
}

/* line width = 2px (default) */

.LineAreaBarChart .dc-chart .line {
  stroke-width: 2px;
}

.LineAreaBarChart .dc-chart .dc-tooltip .dot {
  r: 3px !important;
  stroke-width: 2px;
}

/* line width = 3px */

.LineAreaBarChart .dc-chart .line--medium .line {
  stroke-width: 3px;
}

.LineAreaBarChart .dc-chart .line--medium .dc-tooltip .dot {
  r: 3px !important;
  stroke-width: 2px;
}

/* line width = 4px */

.LineAreaBarChart .dc-chart .line--heavy .line {
  stroke-width: 4px;
}

.LineAreaBarChart .dc-chart .line--heavy .dc-tooltip .dot {
  r: 3.5px !important;
  stroke-width: 3px;
}

.LineAreaBarChart .dc-chart .enable-dots .dc-tooltip .dot,
.LineAreaBarChart .dc-chart .dc-tooltip .dot.selected,
.LineAreaBarChart .dc-chart .enable-dots-onhover .dc-tooltip .dot:hover,
.LineAreaBarChart .dc-chart .enable-dots-onhover .dc-tooltip .dot.hover {
  fill: white;
  stroke: currentColor;
  fill-opacity: 1 !important;
  stroke-opacity: 1 !important;
}

.LineAreaBarChart .dc-chart .dc-tooltip .dot.deselected {
  opacity: 0;
}

.LineAreaBarChart .dc-chart .line.deselected {
  color: #b8bbc3;
}

.LineAreaBarChart .dc-chart .area,
.LineAreaBarChart .dc-chart .bar,
.LineAreaBarChart .dc-chart .line,
.LineAreaBarChart .dc-chart .dot,
.LineAreaBarChart .dc-chart .row,
.LineAreaBarChart .dc-chart .bubble {
  transition: opacity 0.15s linear;
}

.LineAreaBarChart .dc-chart .axis.y,
.LineAreaBarChart .dc-chart .y-axis-label,
.LineAreaBarChart .dc-chart .axis.yr,
.LineAreaBarChart .dc-chart .yr-axis-label {
  transition: opacity 0.25s linear;
}

/* .mute-* selectors dynamically generated in LineAreaBarChart.js*/

.LineAreaBarChart.mute-yl .dc-chart .axis.y,
.LineAreaBarChart.mute-yl .dc-chart .y-axis-label.y-label {
  opacity: 0;
}

.LineAreaBarChart.mute-yr .dc-chart .axis.yr,
.LineAreaBarChart.mute-yr .dc-chart .y-axis-label.yr-label {
  opacity: 0;
}

.LineAreaBarChart .dc-chart .voronoi {
  cursor: pointer;
  fill: transparent;
}

/* we put the brush behind everything so this isn't necessary
/*.LineAreaBarChart .dc-chart .brush {
  pointer-events: none;
}*/

/* grid lines aren't clickable, and get in the way of the brush */

.LineAreaBarChart .dc-chart .grid-line {
  pointer-events: none;
}

/* brush handles */

.LineAreaBarChart .dc-chart .brush .resize path {
  fill: #f9fbfc;
  stroke: #949aab;
}

.LineAreaBarChart .dc-chart .goal .line {
  stroke: #949aab;
  stroke-dasharray: 5, 5;
}

.LineAreaBarChart .dc-chart .trend .line {
  stroke-dasharray: 5, 5;
}

text.value-label-outline,
text.value-label {
  pointer-events: none;
}

text.value-label-outline {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.5px;
  stroke-width: 3px;
  stroke: #ffffff;
}

text.value-label {
  fill: #4c5773;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

text.value-label-white {
  fill: #ffffff;
  font-weight: 800;
}

._2I4qY {
}

._1rcAr,
.n71oW {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

._1rcAr {
  display: flex;
}

._2Gb1p {
  flex: 1;
  height: 100%;
}

.n71oW {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

._2tU5X {
  color: #4c5773;
  font-size: 22px;
  font-weight: bolder;
}

.-GCLu {
  color: #b8bbc3;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}

._2Gb1p path {
  transition: opacity 0.3s linear;
}

._3qyVV {
  display: flex;
  justify-content: flex-end;
}

._3qyVV ._1ABjV {
  display: flex;
  justify-content: center;
  max-width: 100%;
}

._3qyVV .l0pij,
._3qyVV ._3H3W- {
  flex-basis: auto;
  flex-grow: 1;
  /* allow legend and spacer to shrink */
  min-width: 0;
  min-height: 0;
}

._3qyVV .l0pij {
  visibility: hidden;
  flex-shrink: 10; /* shrink the spacer much faster than the wrapper */
}

._3qyVV ._3H3W- {
  display: flex;
  justify-content: center;
  flex-shrink: 1;
}

._3qyVV ._2luIt {
  flex-shrink: 0;
  position: relative;
}

/* SMALL */

._3qyVV._1CAv1 ._1ABjV {
  display: none;
}

._3qyVV._1CAv1 ._2luIt {
  flex: 1;
}

/* VERTICAL */

._3qyVV._1rOS_ {
  flex-direction: column-reverse;
}

._3qyVV._1rOS_ ._1ABjV {
  flex-shrink: 1;
  overflow: hidden;
}

._3qyVV._1rOS_ ._3H3W- {
  flex-direction: column;
}

._3qyVV._1rOS_._168j7 ._1ABjV {
  flex-grow: 0;
  flex-shrink: 0;
}

._3qyVV._1rOS_._168j7 ._2luIt {
  flex-grow: 1;
  flex-shrink: 1;
  min-height: 75%;
}

/* HORIZONTAL */

._3qyVV._32nW- {
  flex-direction: row;
}

._3qyVV._32nW- ._1ABjV {
  flex-grow: 0;
  flex-shrink: 1;
  overflow: hidden;
}

._3qyVV._32nW- ._3H3W- {
  flex-direction: row;
}

._3qyVV._32nW-._168j7 ._1ABjV {
  flex-grow: 0;
  flex-shrink: 0;
}

._3qyVV._32nW-._168j7 ._2luIt {
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 66%;
}

/* DEBUG */

/*
:local .ChartWithLegend .Legend {
  background-color: color-mod(var(--color-bg-black) alpha(-90%));
}
:local .ChartWithLegend .Chart {
  background-color: color-mod(var(--color-success) alpha(-90%));
}
:local .ChartWithLegend.flexChart .Chart {
  background-color: color-mod(var(--color-error) alpha(-90%));
}
*/

/*
legend item needs to be in the scope in order to control the font size in
fullscreen dashboard mode
*/
.LegendItem {
  font-size: 1.2em;
  font-weight: bold;
  transition: opacity 0.25s linear;
  opacity: 1;
}
._14YpV {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}
._1zU60.muted {
  opacity: 0.4;
}
._2tUFa._3YdyC {
  display: none;
}
._2tUFa._1BBNM {
  display: flex;
  flex-direction: column;
  margin-right: 1em;
}
._2tUFa._1TLy7 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 1em;
}

/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}

.leaflet-container {
	overflow: hidden;
	}

.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        -ms-user-select: none;
	    user-select: none;
	  -webkit-user-drag: none;
	}

/* Prevents IE11 from highlighting tiles in blue */

.leaflet-tile::-moz-selection {
	background: transparent;
}

.leaflet-tile::selection {
	background: transparent;
}

/* Safari renders non-retina tile on retina better with this, but Chrome is worse */

.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}

/* hack that prevents hw layers "stretching" when loading new tiles */

.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}

.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}

/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */

/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */

.leaflet-container .leaflet-overlay-pane svg,
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	}

.leaflet-container.leaflet-touch-zoom {
	touch-action: pan-x pan-y;
	}

.leaflet-container.leaflet-touch-drag {
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}

.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	touch-action: none;
}

.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}

.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}

.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}

.leaflet-tile-loaded {
	visibility: inherit;
	}

.leaflet-zoom-box {
	width: 0;
	height: 0;
	box-sizing: border-box;
	z-index: 800;
	}

/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */

.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }

.leaflet-overlay-pane { z-index: 400; }

.leaflet-shadow-pane  { z-index: 500; }

.leaflet-marker-pane  { z-index: 600; }

.leaflet-tooltip-pane   { z-index: 650; }

.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }

.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}

.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}

/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}

.leaflet-top {
	top: 0;
	}

.leaflet-right {
	right: 0;
	}

.leaflet-bottom {
	bottom: 0;
	}

.leaflet-left {
	left: 0;
	}

.leaflet-control {
	float: left;
	clear: both;
	}

.leaflet-right .leaflet-control {
	float: right;
	}

.leaflet-top .leaflet-control {
	margin-top: 10px;
	}

.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}

.leaflet-left .leaflet-control {
	margin-left: 10px;
	}

.leaflet-right .leaflet-control {
	margin-right: 10px;
	}

/* zoom and fade animations */

.leaflet-fade-anim .leaflet-tile {
	will-change: opacity;
	}

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	transition: opacity 0.2s linear;
	}

.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}

.leaflet-zoom-animated {
	transform-origin: 0 0;
	}

.leaflet-zoom-anim .leaflet-zoom-animated {
	will-change: transform;
	}

.leaflet-zoom-anim .leaflet-zoom-animated {
	transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}

.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}

/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}

.leaflet-grab {
	cursor: -webkit-grab;
	cursor:         grab;
	}

.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}

.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}

.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */

.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline: 0;
	}

.leaflet-container a {
	color: #0078A8;
	}

.leaflet-container a.leaflet-active {
	outline: 2px solid orange;
	}

.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}

/* general typography */

.leaflet-container {
	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
	}

/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}

.leaflet-bar a,
.leaflet-bar a:hover {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}

.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}

.leaflet-bar a:hover {
	background-color: #f4f4f4;
	}

.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}

.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}

.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}

.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}

.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}

/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}

.leaflet-control-layers-toggle {
	background-image: url(./416d91365b44e4b4f477.png);
	width: 36px;
	height: 36px;
	}

.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(./8f2c4d11474275fbc161.png);
	background-size: 26px 26px;
	}

.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}

.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}

.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}

.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}

.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}

.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}

.leaflet-control-layers label {
	display: block;
	}

.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */

.leaflet-default-icon-path {
	background-image: url(./2b3e1faf89f94a483539.png);
	}

/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.7);
	margin: 0;
	}

.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	}

.leaflet-control-attribution a {
	text-decoration: none;
	}

.leaflet-control-attribution a:hover {
	text-decoration: underline;
	}

.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
	font-size: 11px;
	}

.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}

.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}

.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	box-sizing: border-box;

	background: #fff;
	background: rgba(255, 255, 255, 0.5);
	}

.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}

.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}

.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}

/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}

.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}

.leaflet-popup-content {
	margin: 13px 19px;
	line-height: 1.4;
	}

.leaflet-popup-content p {
	margin: 18px 0;
	}

.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}

.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	transform: rotate(45deg);
	}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}

.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	padding: 4px 4px 0 0;
	border: none;
	text-align: center;
	width: 18px;
	height: 14px;
	font: 16px/14px Tahoma, Verdana, sans-serif;
	color: #c3c3c3;
	text-decoration: none;
	font-weight: bold;
	background: transparent;
	}

.leaflet-container a.leaflet-popup-close-button:hover {
	color: #999;
	}

.leaflet-popup-scrolled {
	overflow: auto;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}

.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-popup-tip-container {
	margin-top: -1px;
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}

/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}

/* Tooltip */

/* Base styles for the element that has a tooltip */

.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}

.leaflet-tooltip.leaflet-clickable {
	cursor: pointer;
	pointer-events: auto;
	}

.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}

.leaflet-tooltip-top {
	margin-top: -6px;
}

.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}

.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}

.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}

.leaflet-tooltip-left {
	margin-left: -6px;
}

.leaflet-tooltip-right {
	margin-left: 6px;
}

.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}

.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}

.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* hide leaflet-draw controls  */
.leaflet-draw.leaflet-control {
  display: none;
}

.PS5df {
  color: #949aab;
}

._2vUMz {
  width: 100%;
  min-width: 20px;
  border-right: 1px solid #f0f0f0;
}

._2vUMz._2N5af {
  min-width: unset;
  width: unset;
}

/* Display information for the initial blox */

._2Wc6M {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: right;
  flex-grow: 1;

  padding-right: 0.5em;
  font-size: 24px;
}

._2Wc6M ._1o3km {
  font-weight: bold;
  color: black;
}

._2Wc6M ._2N341 {
  font-size: 0.6875em;
}

/* Head information */

._cker {
  text-align: right;
  padding: 0.5em;
  min-width: 0;
}

/* Plot graph element */

.GvdI5 {
  flex-grow: 1;
}

/* Information at the end of the step */

._129-- {
  text-align: right;
  padding: 0.5em 0.5em 0 0.5em;
  font-size: 16px;
}

._129-- ._1o3km {
}

._129-- ._2N341 {
  font-size: 0.6875em;
  margin-top: 1em;
}

/* Narrow version */

._3ef-7 ._cker {
  font-size: 12px;
}

._3ef-7 ._129-- {
  font-size: 12px;
}

._3ef-7 ._129-- ._2N341 {
  font-size: 0.875em;
}

._3ef-7 ._2Wc6M ._1o3km {
  font-size: 0.75em;
}

._3ef-7 ._2Wc6M ._2N341 {
  font-size: 0.5em;
}

.tfpVo {
  transition: opacity 500ms linear;
  border: 2px solid #f0f0f0;
  margin-right: 0.85em;
  margin-bottom: 0.5em;
  padding: 0.25em 1em 0.25em 1em;
}

.tfpVo legend {
  text-transform: none;
  position: relative;
  height: 2px;
  line-height: 0;
  margin-left: -0.45em;
  padding: 0 0.5em;
}

.tfpVo._2twtF {
  opacity: 0.4;
}

.tfpVo._2twtF:hover {
  opacity: 1;
}

._20z_B {
  font-weight: 600;
  min-height: 30px;
  min-width: 150px;
  color: #949aab;
}

._2i2x7 {
  min-height: 30px;
  min-width: 150px;
  color: #949aab;
  border: none;
  font-size: 1em;
  font-weight: 600;
  border: none;
}

._2G87x {
  margin-right: 0;
  margin-left: 0;
}

._2G87x ._2m475 {
  font-size: 14px;
}

._2G87x ._20z_B {
  min-width: 0;
  min-height: 0;
  background-color: transparent;
  font-size: 14px;
}

._20z_B._2YcmO {
  font-weight: bold;
  color: #509ee3;
  border-color: #509ee3;
}

._20z_B.pg3LL input {
  /* NOTE: Fixed with to circumvent issues with flexbox with container having a min-width */
  width: 115px;
  font-size: 1em;
  font-weight: 600;
  border: none;
  background: none;
}

._20z_B.pg3LL._2AYUY input {
  width: 138px;
}

._20z_B.pg3LL._2YcmO input {
  width: 127px;
  font-weight: bold;
  color: #509ee3;
}

._20z_B.pg3LL input:focus {
  outline: none;
  color: #4c5773;
  width: 127px;
}

._20z_B.pg3LL input::-webkit-input-placeholder {
  color: #949aab;
}

._20z_B.pg3LL input:-moz-placeholder {
  color: #949aab;
}

._20z_B.pg3LL input::-moz-placeholder {
  color: #949aab;
}

._20z_B.pg3LL input:-ms-input-placeholder {
  color: #949aab;
}

.Dashboard--night ._20z_B.pg3LL input:focus,
.Theme--night ._20z_B.pg3LL input:focus {
  color: #ffffff;
}

._38Q_V {
}

._2i2x7:focus,
._38Q_V:focus {
  outline: none;
}

._2m475 {
  font-size: 16px;
  font-weight: bold;
  color: #949aab;
}

._2bHbr {
  display: flex;
  justify-content: space-around;
  font-size: smaller;
}

._3tq8o,
._1kPst {
}

._3tq8o:hover {
  color: #509ee3;
}

._1kPst:hover {
  color: #ed6e6e;
}

._1oJCz {
  display: inline-block;
  height: 0;
  margin-left: 0.25em;
  width: 10px;
}

._1oJCz > svg {
  position: absolute;
  top: -6px;
}

._1PJaB {
  padding: 1em;
  min-width: 200px;
}

._3oZM_ {
  color: #949aab;
  font-weight: bold;
  font-size: 0.75em;
  text-transform: uppercase;
  margin-bottom: 1em;
  margin-left: 0.5em;
}

._3sT2c {

  color: #4c5773;
  font-weight: bold;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

._3sT2c:hover,
._3sT2c:hover .UY_RI {
  color: #509ee3 !important;
}

._3sT2c._1YWy_.BoMv1,
._3sT2c._1YWy_.BoMv1 .UY_RI {
  color: #88bf4d;
}

._3sT2c .Icon {
  visibility: hidden;
  margin-right: 0.5em;
}

._3sT2c:hover .Icon {
  visibility: visible;
}

._3sT2c.BoMv1 .Icon {
  visibility: visible;
}

._3sT2c .UY_RI {
  color: #949aab;
}

.react-grid-layout {
  position: relative;
  transition: height 200ms ease;
}
.react-grid-item {
  transition: all 200ms ease;
  transition-property: left, top;
}
.react-grid-item img {
  pointer-events: none;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;  
}
.react-grid-item.cssTransforms {
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}
.react-grid-item.resizing {
  z-index: 1;
  will-change: width, height;
}
.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
  will-change: transform;
}
.react-grid-item.dropping {
  visibility: hidden;
}
.react-grid-item.react-grid-placeholder {
  background: red;
  opacity: 0.2;
  transition-duration: 100ms;
  z-index: 2;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.react-grid-item > .react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
}
.react-grid-item > .react-resizable-handle::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-right: 2px solid rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
}
.react-resizable-hide > .react-resizable-handle {
  display: none;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w,
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
  left: 0;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  right: 0;
  -webkit-transform: rotate(315deg);
          transform: rotate(315deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n,
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
  top: 0;
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  bottom: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.react-resizable {
  position: relative;
}
.react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
  background-position: bottom right;
  padding: 0 3px 3px 0;
}
.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}
.react-resizable-handle-w,
.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-resizable-handle-w {
  left: 0;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}
.react-resizable-handle-e {
  right: 0;
  -webkit-transform: rotate(315deg);
          transform: rotate(315deg);
}
.react-resizable-handle-n,
.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-resizable-handle-n {
  top: 0;
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
}
.react-resizable-handle-s {
  bottom: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.sort {
  padding: 4px 6px 4px 12px;
  border-radius: 100px;
}
.sort:hover > svg {
  color: white;
}
.horizontal-button {
  border-radius: 4px;
}
.horizontal-button:hover > svg {
  color: white;
}
.formatting-button {
  color: rgba(184, 187, 195, 0.65);
}

/* HACK: DataPopover should be below the search box */
.DataPopoverContainer {
  z-index: 2;
}

.NativeQueryEditor .ace_editor {
  height: 100%;
  background-color: #f9fbfc;
  color: #4c5773;
}
.NativeQueryEditor .ace_editor .ace_keyword {
  color: #885ab1;
}
.NativeQueryEditor .ace_editor .ace_function,
.NativeQueryEditor .ace_editor .ace_variable {
  color: #2d86d4;
}
.NativeQueryEditor .ace_editor .ace_constant,
.NativeQueryEditor .ace_editor .ace_type {
  color: #ed6e6e;
}
.NativeQueryEditor .ace_editor .ace_string {
  color: #70a63a;
}
.NativeQueryEditor .ace_editor .ace_templateTag {
  color: #509ee3;
}
.NativeQueryEditor .react-resizable {
  position: relative;
}
.NativeQueryEditor .react-resizable-handle {
  position: absolute;
  width: 100%;
  height: 10px;
  bottom: -5px;
  cursor: ns-resize;
}
.NativeQueryEditor .ace_editor.read-only .ace_cursor {
  display: none;
}
.NativeQueryEditor .ace_editor .ace_gutter-cell {
  padding-top: 2px;
  font-size: 10px;
  font-weight: 700;
  color: #b8bbc3;
  padding-left: 0;
  padding-right: 7px;
  display: block;
  text-align: center;
}
.NativeQueryEditor .ace_editor .ace_gutter {
  background-color: #f9fbfc;
}
/* ace UI element styling */
/* overall dropdown */
.ace_editor.ace_autocomplete {
  border: none;
  box-shadow: 0 2px 3px 2px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  background-color: white;
  color: #4c5773;
}
.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line,
.ace_editor.ace_autocomplete .ace_marker-layer .ace_line-hover {
  background-color: #ddecfa;
  border: none;
  outline: none;
}
.ace_completion-highlight {
  color: #509ee3;
}
.ace_editor.ace_autocomplete .ace_line {
  font-weight: bold;
  padding-left: 4px;
}
.ace_editor.ace_autocomplete .ace_completion-meta {
  font-weight: 400;
}

.cCKvM {
}

._1LYwk {
  max-width: 100%;
}

.saveQuestionModalFields {
  overflow: hidden;
}

.saveQuestionModalFields-enter {
  max-height: 0px;
}

.saveQuestionModalFields-enter.saveQuestionModalFields-enter-active {
  /* using 100% max-height breaks the transition */
  max-height: 300px;
  transition: max-height 500ms ease-out;
}

.saveQuestionModalFields-leave {
  max-height: 300px;
}

.saveQuestionModalFields-leave.saveQuestionModalFields-leave-active {
  max-height: 0px;
  transition: max-height 500ms ease-out;
}

._1-jio {
  width: 30%;
  max-width: 500px;
  background-color: #f9fbfc;
  color: #949aab;
}

._1-jio a {
  text-decoration: none;
}

._1qQzv,
._143k8 {
}

._1qQzv {
  font-size: 1em;
  color: #b8bbc3;
}

._1qQzv .saWAj {
  line-height: 1em;
}

._143k8 {
  font-size: 16px;
}

._1qQzv:hover,
._143k8:hover {
  background-color: #edf2f5;
  color: #509ee3;
}

._1qQzv._1CO2D,
._1qQzv._1CO2D .saWAj,
._143k8._1CO2D {
  color: #509ee3;
}

._1qQzv._1CO2D,
._143k8._1CO2D {
  background-color: rgba(80, 158, 227, 0.15);
}

._2A40N {
}

._1IN-G {
  color: #949aab;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}

._1qQzv:hover ._1IN-G,
._1qQzv._1CO2D ._1IN-G {
  color: #509ee3;
}

.saWAj {
}

._2zt9Q {
}

._2Xzg6 {
  width: 18px;
  height: 18px;
  border-radius: 3px;
}

.BdMvi {
  font-size: 20px;
}

._2ztzj {
  color: currentColor;
}

.OrJnq {
}

._22-Fp {
}

.OrJnq a {
  text-decoration: none;
}

._2Q0dA {
  color: #4c5773;
  font-size: 24px;
  min-height: 48px;
}

._3PuT1 {
  align-items: center;
  height: 100%;
  border-color: #509ee3;
}

._3jMbI {
  font-size: 14px;
}

._1Xizi {
  font-size: 14px;
}

._35R0S {
  padding-top: 75px;
}

._3TXsO {
}

._1xlpf {
  max-width: 100%;
}

._18GKE {
  max-width: 100%;
  overflow: hidden;
}

.DgBui {
  max-width: 100%;
  overflow: hidden;
}

.S4xyd {
  color: #949aab;
  max-width: 600px;
  font-size: 14px;
}

._3eIll {
  font-size: 14px;
}

._2XUgV {
  color: #4c5773;
}

._3A7d2 {
}

.lVe5d {
}

._36T_3 {
}

._37l0u {
  padding-top: 4px;
}

._3dGxg {
  right: -40px;
}

/* hack fix for IE 11 which was hiding the archive icon */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  ._3dGxg {
  }
}

._3wr12 {
  color: #b8bbc3;
}

._3TXsO ._3wr12 {
  visibility: hidden;
}

._3TXsO:hover ._3wr12 {
  visibility: visible;
}

._3wr12:hover {
  color: #509ee3;
}

/* ITEM CHECKBOX */

._3hW74 {
  display: none;
  visibility: visible !important;
  margin-left: 10px;
}

._3TXsO:hover ._3hW74,
._3TXsO._1yGSm ._3hW74 {
  display: inline;
}

._3TXsO._1yGSm ._3hW74 {
  color: #509ee3;
}

/* ITEM ICON */

._2ied7 {
  visibility: visible !important;
}

._3TXsO:hover ._2ied7,
._3TXsO._1yGSm ._2ied7 {
  display: none;
}

/* CHART ICON */

._1UrM0 {
  visibility: visible !important;
}

/* ACTION ICONS */

._3xPxp,
._3Nsel,
.bPQA9 {
}

._1oUEe {
  line-height: 0;
}

._3hqM3 {
  overflow: hidden;
  align-items: center;
  border-color: #f0f0f0;
}

._3RsBq {
  font-size: 18px;
  color: #949aab;
  width: 100%;
  max-width: 550px;
}

._2iZsI {
}

.jgTY3 {
  font-size: 14px;
}

._1usD6 {
  color: #509ee3;
  text-decoration: none;
}

._1usD6:hover {
  color: #509ee3;
  transition: color 0.3s linear;
}

.QplMQ {
  top: -10px;
  font-size: 12px;
}

._2EsTk {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 43px;
  background-color: rgba(255, 255, 255, 0.15);
}

._3xwd3 {
}

._34R76 {
  border: none;
  color: #509ee3;
}

._2jdvQ {
}

._1swfk {
  opacity: 0.5;
}

._2ffFt {
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 32px;
}

._10mBH {
  resize: none;
  font-size: 16px;
  min-height: 100px;
}

.mZTuB {
}

._1GT7O {
  max-width: 900px;
}

.cDEmX {
  color: #949aab;
}

._3XQ7b {
  white-space: pre-wrap;
  font-size: 16px;
  line-height: 24px;
  padding-top: 6px;
}

._18EFR {
  padding-top: 6px;
}

._2ttuh {
  resize: none;
  font-size: 16px;
  width: 100%;
  min-height: 100px;
  border-color: #b8bbc3;
}

.POIhF {
  font-size: 16px;
}

._190pI {
  font-size: 14px;
  color: #949aab;
}

._2Hhl3 {
  background-color: #f9fbfc;
  cursor: pointer;
}

._3CI1f {
}

.kp0FY {
  font-size: 16px;
}

._1kWrk {
}

.formulaDefinition {
  overflow: hidden;
}

.formulaDefinition-enter {
  max-height: 0px;
}

.formulaDefinition-enter.formulaDefinition-enter-active {
  /* using 100% max-height breaks the transition */
  max-height: 150px;
  transition: max-height 300ms ease-out;
}

.formulaDefinition-leave {
  max-height: 150px;
}

.formulaDefinition-leave.formulaDefinition-leave-active {
  max-height: 0px;
  transition: max-height 300ms ease-out;
}

._3lkOe {
  padding-top: 75px;
}

._12lXO {
  max-width: 400px;
}

._2Nc8g {
}

._1nDeh {
  padding-top: 20px;
  padding-bottom: 20px;
}

._3eHg- {
  padding-top: 20px;
  padding-left: 60px;
}

.bdjv2 {
  margin-left: 60px;
  font-size: 18px;
}

._3JG6m {
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 13px;
  line-height: 1.4em;
  letter-spacing: 1px;
  white-space: pre-wrap;
  color: #949aab;
  background-color: #f9fbfc;
  border: 1px solid #b8bbc3;
  border-radius: 4px;
  padding: 0.2em 0.4em;
}

._3h8aH {
}

._3h8aH::before {
  /*FIXME: not sure how to share this with other components
     because we can't use composes here apparently. any workarounds?*/
  content: "";
  display: block;
  flex: 0.3;
  max-width: 250px;
  margin-right: 50px;
}

._2kKIm {
  flex: 0.7;
  max-width: 550px;
}

._1ssXs {
  margin-bottom: 50px;
}

._16TLB {
  font-size: 24px;
  margin-top: 50px;
}

._3t1qJ {
}

._3cYiX {
  font-size: 18px;
}

._3eu5P {
}

._27TXd {
}

._2d-Io {
  margin-bottom: 100px;
}

._1MaeR {
  font-size: 16px;
}

._3TJNb {
  max-width: 550px;
  color: #4c5773;
}

._1MXor {
  font-size: 24px;
}

._38Ah_ {
}

._2kwIW {
}

._2hn2X {
  font-size: 16px;
  color: #949aab;
}

._3fnbu {
  font-size: 16px;
}

._1Ysza {
  color: #949aab;
  font-size: 16px;
  margin-top: 50px;
}

._28W2g {
  color: #b8bbc3;
  font-size: 16px;
  max-width: 700px;
}

.JxqTW {
  padding-right: 3.5rem;
}

.JxqTW::before {
  content: "";
  display: block;
  flex: 250;
  max-width: 250px;
  margin-right: 50px;
}

._2RVkP {
  flex: 550;
  max-width: 550px;
}

._2JkPZ {
  resize: none;
  font-size: 16px;
  width: 100%;
  max-width: 850px;
  min-height: 100px;
}

._15kU1 {
}

._1zQbQ {
  flex: 250;
  max-width: 250px;
  margin-right: 50px;
}

._3P-xH {
  flex: 550;
  max-width: 550px;
}

._3a5pX {
  font-size: 16px;
  display: block;
}

._3J87J {
}

._3hiLw {
}

._3jtS4 {
}

._3MrIp {
  color: #949aab;
  width: 100%;
  font-size: 14px;
}

._1uQ7X {
}

._12hYh {
  overflow: hidden;
  white-space: nowrap;
}

._3FxLA {
}

.Nf7Hp {
  font-size: 13px;
}

._1NnDR {
  font-size: 12px;
  letter-spacing: 1px;
}

._4KwNG {
}

._1ujEJ {
}

.EmbedFrame {
  background-color: white;
}

.EmbedFrame-header,
.EmbedFrame-footer {
  color: #4c5773;
  background-color: white;
}

.Theme--night.EmbedFrame {
  background-color: #2e353b;
  border: 1px solid #93a1ab;
}

.Theme--night .EmbedFrame-header,
.Theme--night .EmbedFrame-footer {
  color: rgba(255, 255, 255, 0.86);
  background-color: #2e353b;
  border-color: #93a1ab;
}

.Theme--night.EmbedFrame .fullscreen-night-text {
  color: rgba(255, 255, 255, 0.86);
  transition: color 1s linear;
}

.Theme--night.EmbedFrame svg text {
  fill: rgba(255, 255, 255, 0.86) !important;
}

.Theme--night.EmbedFrame .DashCard .Card {
  background-color: #2e353b;
  border: 1px solid #93a1ab;
}

.Theme--night.EmbedFrame .enable-dots-onhover .dc-tooltip circle.dot:hover,
.Theme--night.EmbedFrame .enable-dots .dc-tooltip circle.dot {
  fill: currentColor;
}

.artist-do-wrapper{
    width: 100%;
    height: 100%;
    text-align: center; 
    padding-top: 2.5%;
    justify-content: center;
}

.canvas-container textarea{
    overflow: hidden;
    position: relative;
    left: 0 !important;
}
.dt-container{white-space:nowrap;-webkit-tap-highlight-color:rgba(0,0,0,0)}.dt-container .dt-canvas-container{vertical-align:top;display:inline-block;outline:0}.dt-container .dt-canvas-container.with-border{border:1.5px solid #979797;border-radius:0 8px 8px 0}.dt-container .dt-canvas-container.with-border canvas{border-radius:0 8px 8px 0}.dt-container .dt-tools{z-index: 1; display:inline-block;vertical-align:top;width:40px;margin:0;position:relative;border:1.5px solid #979797;border-radius:8px 0 0 8px;border-right:none;box-sizing:content-box;box-sizing:initial}.dt-container .dt-tools img{vertical-align:baseline;vertical-align:initial}.dt-container .dt-btn{z-index:1000;display:block;overflow:hidden;position:relative;text-indent:0;white-space:nowrap;font-size:12px;line-height:45px;height:40px;width:40px;color:#3f3f3f;background:#f5fbfc;vertical-align:middle;text-align:center;padding:0;cursor:pointer;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.dt-container .dt-btn:hover{background:#d8eff5;cursor:pointer}.dt-container .dt-btn.dt-active{background:#b7e2ec}.dt-container .dt-btn.dt-locked{cursor:default}.dt-container .dt-btn.dt-locked img{opacity:.35}.dt-container .dt-btn.dt-text-btn{font-size:12px;font-family:Arial,sans-serif;width:auto;padding:0 3px;border-top:1.5px solid #979797;border-right:1.5px solid #979797;border-bottom:1.5px solid #979797;line-height:40px;margin-top:-1px}.dt-container .dt-btn.dt-text-btn.dt-active{border-right:1.5px solid #b7e2ec}.dt-container .dt-btn.dt-img-btn{position:relative;line-height:normal}.dt-container .dt-btn.dt-img-btn span{display:inline-block}.dt-container .dt-btn.dt-img-btn img{max-width:32px;max-height:36px;width:auto !important;width:initial !important;height:auto !important;height:initial !important;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.dt-container .dt-btn.dt-stroke-color:before,.dt-container .dt-btn.dt-fill-color:before{content:"";background:#fff;position:absolute;top:8px;left:8px;width:24px;height:24px}.dt-container .dt-btn.dt-stroke-color .dt-inner1{background:#fff;position:absolute;height:12px;width:12px;left:5px;top:5px}.dt-container .dt-btn.dt-stroke-color .dt-inner2{background:#3e8acc;border:none;position:absolute;height:10px;width:10px;left:6px;top:6px}.dt-container .dt-btn.dt-first{border-radius:6.4px 0 0 0}.dt-container .dt-btn.dt-last{border-radius:0 0 0 6.4px}.dt-container .dt-btn.dt-separator-after{border-bottom:1.5px solid #979797}.dt-container .dt-btn .dt-color{background:#fff;overflow:hidden;position:absolute;top:9px;left:9px;width:22px;height:22px}.dt-container .dt-btn .dt-color.dt-no-color:after{content:"L";color:#e66665;position:absolute;left:-12px;bottom:-14px;font-size:50px}.dt-container .dt-btn.dt-transparent{background:#f4f4f4}.dt-container .dt-btn.dt-transparent:after{content:"L";color:#e66665;position:absolute;left:-32px;bottom:-16px;font-size:100px}.dt-container .dt-btn.dt-send-to,.dt-container .dt-btn.dt-undo-redo{line-height:41px}.dt-container .dt-expand{position:relative}.dt-container .dt-expand:after{position:absolute;display:block;content:" ";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg%3E%3Cg%3E%3Cpath d='M0 0H40V40H0z' transform='translate(-1947.000000, -892.000000) translate(1947.000000, 892.000000)'/%3E%3Cpath fill='%230481A0' d='M7 0L7 7 0 7z' transform='translate(-1947.000000, -892.000000) translate(1947.000000, 892.000000) translate(28.500000, 29.500000)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");bottom:0;right:0;width:40px;height:40px}.dt-container .dt-selected-line-width{position:absolute;bottom:0;text-align:center;right:0;left:0;height:36px}.dt-container .dt-palette.dt-horizontal .dt-btn{display:inline-block;vertical-align:middle;border-top:1.5px solid #979797;border-bottom:1.5px solid #979797}.dt-container .dt-palette.dt-horizontal .dt-btn:first-of-type{width:42px}.dt-container .dt-palette.dt-horizontal .dt-btn:last-of-type{border-right:1.5px solid #979797;border-radius:0 8px 8px 0;width:42px}.dt-container .dt-palette.dt-horizontal .dt-btn img{width:40px;height:40px}.dt-container .dt-palette.dt-vertical{border-radius:8px 0 0 8px}.dt-container .dt-palette.dt-vertical .dt-btn{display:block}.dt-container .dt-palette.dt-vertical .dt-text-btn{border-bottom:none}.dt-container .dt-palette.dt-vertical .dt-text-btn:last-of-type{border-bottom:1.5px solid #979797}.dt-container .dt-spin{-webkit-animation:dt-spin 2s infinite linear;animation:dt-spin 2s infinite linear}@-webkit-keyframes dt-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}@keyframes dt-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
.icon-in-gallery{
  width: 100%;
  height:100%;
  padding: 10%; 
  box-sizing: border-box;
}

.icon-ref{
  position: absolute;
  z-index: -100;
  top: 50%;
  left: 50%;
}


.QuestionViewer{
    height: 100%;
    padding-top: 3%;
}

.AdminSelect{
    width:100%;
}

.AdminSelect-content {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.art-list li{
    overflow: hidden;
    padding-right: 35px;
}

.filter-row:hover {
    color: #509ee3;
}

.DashCard .Card{
    border: 2px solid transparent;
    transition: border 1s;
}

.DashCard .card-favorited{
    border: 2px solid #f9d45c;
}

.note-list li{
    overflow: hidden;
    padding-right: 35px;
}
.journalist-do-wrapper{
    width: 100%;
    height: 98%;
}

.story-outline{
    position: absolute;
    transform-origin: 0 0;
}

.story-element-picker h3{
    text-align: center; 
    padding: 10px 0px;
}

.story-element-picker .Card{
    overflow-y:auto;
    height: 90%;
    height: calc(100% - 40px);
}

.story-element-picker{
    height: 100%;
  }

.story-element-picker .element-list{
    width: 100%; 
    height: 100px; 
    padding: 10px; 
    box-sizing: border-box;
    word-wrap: break-word;
  }

.story-element-picker .element-list .Icon {
    width: 45%;
    height: 45%;
  }

.icon-ref{
    position: absolute;
    z-index: -100;
    top: 50%;
    left: 50%;
  }

.role-textarea{
    min-height:unset;
    font-family: inherit;
    font-weight: 700;
    font-size: 1rem;
    color: #4C5773;
    background-color: #FFFFFF;
    padding: 0.75rem;
    border: 1px solid hsl(0,0%,84.7%);
    border-radius: 4px;
    outline: none;
    width: 100%;
    resize: none;
  }

.story-element-detail ul{
    list-style: square;
    margin: 0;
    padding-left: 30px;
  }

.story-element{
    display: inline-block;
    font-size: 1.5em;
  }

.story-element .element .Icon{
    height: 50px;
    width: 50px;
    margin-right: 5px;
  }

.story-element .element{
    max-width: 300px; 
    height: 120px;
    padding: 5px;
    box-shadow: 0px 0px 0px transparent;
    transition: .5s;
  }

.story-element .element h4{
    word-wrap: break-word;
    padding-right: 25px;
  }

.story-element:hover .drag{
    opacity: 1;
  }

.story-element .drag{
    transition: .3s;
    opacity: 0;
  }

.story-element .clicked{
    box-shadow: 0px 0px 5px #84bb4c;
  }

.story-form-wrapper{
    width: 100%;
    height: 95%;
    padding: 6px 12px 6px 12px;
    margin-top: 10px;
    text-align: center;
    overflow-x: scroll;
  }

  
.role-layout{
  height: 100%;  
  padding-top: 64px;
  margin-top: -64px;
}

.role-main-layout{
  overflow-y: auto;
  position: relative;
}

.role-sidebar-layout{
  width: 100%;
  height: 100%;
  justify-content: space-evenly;
  align-items: center;
}

.role-sidebar-layout > section{
  width: 90%;
  padding-bottom: 3%;
}

.driver-modal{
  width: unset;
}

.driver-modal::after{
  content: "Waiting for Response from Driver";
  color:white;
  position: absolute;
  top: 35%;
  left: 2rem;
}

.Nav .demo{
  position: absolute;
  top:0;
  width: 100%;
  text-align: center;
}

.Nav .demo .bar{
  min-width: 300px;
  max-width: 30%;
  border: 1px solid #4c5773;
  border-top: none;
  margin:auto;
  padding: 1px 10px;
  font-weight: bolder;
  border-radius: 0px 0px 5px 5px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Nav .role-menu{
  width: 170px;
}

@-webkit-keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }

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

  to {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }

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

  to {
    transform: scale3d(1, 1, 1);
  }
}

.ping-enter {
  opacity: 0.01;
}

.ping-enter-active {
  opacity: 1;
  transition: opacity 200ms;
  -webkit-animation-name: pulse;
          animation-name: pulse;
  -webkit-animation-duration: 400ms;
          animation-duration: 400ms;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

.ping-leave {
  opacity: 1;
}

.ping-leave-active {
  opacity: 0.01;
  transition: opacity 300ms;
}
@charset "UTF-8";
/*!
 * animate.css - https://animate.style/
 * Version - 4.1.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2020 Animate.css
 */
.animate__animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-duration:1s;animation-duration:1s;-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:1;animation-iteration-count:1}
.animate__animated.animate__repeat-2{-webkit-animation-iteration-count:2;animation-iteration-count:2;-webkit-animation-iteration-count:calc(1*2);animation-iteration-count:calc(1*2)}
.animate__animated.animate__repeat-3{-webkit-animation-iteration-count:3;animation-iteration-count:3;-webkit-animation-iteration-count:calc(1*3);animation-iteration-count:calc(1*3)}
.animate__animated.animate__delay-1s{-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-delay:1s;animation-delay:1s}
.animate__animated.animate__delay-2s{-webkit-animation-delay:2s;animation-delay:2s;-webkit-animation-delay:calc(1s*2);animation-delay:calc(1s*2)}
.animate__animated.animate__delay-3s{-webkit-animation-delay:3s;animation-delay:3s;-webkit-animation-delay:calc(1s*3);animation-delay:calc(1s*3)}
.animate__animated.animate__delay-4s{-webkit-animation-delay:4s;animation-delay:4s;-webkit-animation-delay:calc(1s*4);animation-delay:calc(1s*4)}
.animate__animated.animate__delay-5s{-webkit-animation-delay:5s;animation-delay:5s;-webkit-animation-delay:calc(1s*5);animation-delay:calc(1s*5)}
.animate__animated.animate__faster{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-duration:calc(1s/2);animation-duration:calc(1s/2)}
.animate__animated.animate__fast{-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-duration:calc(1s*0.8);animation-duration:calc(1s*0.8)}
.animate__animated.animate__slow{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-duration:calc(1s*2);animation-duration:calc(1s*2)}
.animate__animated.animate__slower{-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-duration:calc(1s*3);animation-duration:calc(1s*3)}
@media (prefers-reduced-motion:reduce), print{.animate__animated{-webkit-animation-duration:1ms!important;animation-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);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);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);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0) scaleY(.95)}90%{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);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);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);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0) scaleY(.95)}90%{transform:translate3d(0,-4px,0) scaleY(1.02)}}
.animate__bounce{-webkit-animation-name:bounce;animation-name:bounce;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%{transform:scaleX(1)}50%{transform:scale3d(1.05,1.05,1.05)}to{transform:scaleX(1)}}
@keyframes pulse{0%{transform:scaleX(1)}50%{transform:scale3d(1.05,1.05,1.05)}to{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%{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}
@keyframes rubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}
.animate__rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}
@-webkit-keyframes shakeX{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}20%,40%,60%,80%{transform:translate3d(10px,0,0)}}
@keyframes shakeX{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}20%,40%,60%,80%{transform:translate3d(10px,0,0)}}
.animate__shakeX{-webkit-animation-name:shakeX;animation-name:shakeX}
@-webkit-keyframes shakeY{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(0,-10px,0)}20%,40%,60%,80%{transform:translate3d(0,10px,0)}}
@keyframes shakeY{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(0,-10px,0)}20%,40%,60%,80%{transform:translate3d(0,10px,0)}}
.animate__shakeY{-webkit-animation-name:shakeY;animation-name:shakeY}
@-webkit-keyframes headShake{0%{transform:translateX(0)}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:translateX(0)}}
@keyframes headShake{0%{transform:translateX(0)}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:translateX(0)}}
.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%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}
@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}
.animate__swing{transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}
@-webkit-keyframes tada{0%{transform:scaleX(1)}10%,20%{transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{transform:scaleX(1)}}
@keyframes tada{0%{transform:scaleX(1)}10%,20%{transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{transform:scaleX(1)}}
.animate__tada{-webkit-animation-name:tada;animation-name:tada}
@-webkit-keyframes wobble{0%{transform:translateZ(0)}15%{transform:translate3d(-25%,0,0) rotate(-5deg)}30%{transform:translate3d(20%,0,0) rotate(3deg)}45%{transform:translate3d(-15%,0,0) rotate(-3deg)}60%{transform:translate3d(10%,0,0) rotate(2deg)}75%{transform:translate3d(-5%,0,0) rotate(-1deg)}to{transform:translateZ(0)}}
@keyframes wobble{0%{transform:translateZ(0)}15%{transform:translate3d(-25%,0,0) rotate(-5deg)}30%{transform:translate3d(20%,0,0) rotate(3deg)}45%{transform:translate3d(-15%,0,0) rotate(-3deg)}60%{transform:translate3d(10%,0,0) rotate(2deg)}75%{transform:translate3d(-5%,0,0) rotate(-1deg)}to{transform:translateZ(0)}}
.animate__wobble{-webkit-animation-name:wobble;animation-name:wobble}
@-webkit-keyframes jello{0%,11.1%,to{transform:translateZ(0)}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{transform:skewX(.390625deg) skewY(.390625deg)}88.8%{transform:skewX(-.1953125deg) skewY(-.1953125deg)}}
@keyframes jello{0%,11.1%,to{transform:translateZ(0)}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{transform:skewX(.390625deg) skewY(.390625deg)}88.8%{transform:skewX(-.1953125deg) skewY(-.1953125deg)}}
.animate__jello{-webkit-animation-name:jello;animation-name:jello;transform-origin:center}
@-webkit-keyframes heartBeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}
@keyframes heartBeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{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(1s*1.3);animation-duration:calc(1s*1.3);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
@-webkit-keyframes backInDown{0%{transform:translateY(-1200px) scale(.7);opacity:.7}80%{transform:translateY(0) scale(.7);opacity:.7}to{transform:scale(1);opacity:1}}
@keyframes backInDown{0%{transform:translateY(-1200px) scale(.7);opacity:.7}80%{transform:translateY(0) scale(.7);opacity:.7}to{transform:scale(1);opacity:1}}
.animate__backInDown{-webkit-animation-name:backInDown;animation-name:backInDown}
@-webkit-keyframes backInLeft{0%{transform:translateX(-2000px) scale(.7);opacity:.7}80%{transform:translateX(0) scale(.7);opacity:.7}to{transform:scale(1);opacity:1}}
@keyframes backInLeft{0%{transform:translateX(-2000px) scale(.7);opacity:.7}80%{transform:translateX(0) scale(.7);opacity:.7}to{transform:scale(1);opacity:1}}
.animate__backInLeft{-webkit-animation-name:backInLeft;animation-name:backInLeft}
@-webkit-keyframes backInRight{0%{transform:translateX(2000px) scale(.7);opacity:.7}80%{transform:translateX(0) scale(.7);opacity:.7}to{transform:scale(1);opacity:1}}
@keyframes backInRight{0%{transform:translateX(2000px) scale(.7);opacity:.7}80%{transform:translateX(0) scale(.7);opacity:.7}to{transform:scale(1);opacity:1}}
.animate__backInRight{-webkit-animation-name:backInRight;animation-name:backInRight}
@-webkit-keyframes backInUp{0%{transform:translateY(1200px) scale(.7);opacity:.7}80%{transform:translateY(0) scale(.7);opacity:.7}to{transform:scale(1);opacity:1}}
@keyframes backInUp{0%{transform:translateY(1200px) scale(.7);opacity:.7}80%{transform:translateY(0) scale(.7);opacity:.7}to{transform:scale(1);opacity:1}}
.animate__backInUp{-webkit-animation-name:backInUp;animation-name:backInUp}
@-webkit-keyframes backOutDown{0%{transform:scale(1);opacity:1}20%{transform:translateY(0) scale(.7);opacity:.7}to{transform:translateY(700px) scale(.7);opacity:.7}}
@keyframes backOutDown{0%{transform:scale(1);opacity:1}20%{transform:translateY(0) scale(.7);opacity:.7}to{transform:translateY(700px) scale(.7);opacity:.7}}
.animate__backOutDown{-webkit-animation-name:backOutDown;animation-name:backOutDown}
@-webkit-keyframes backOutLeft{0%{transform:scale(1);opacity:1}20%{transform:translateX(0) scale(.7);opacity:.7}to{transform:translateX(-2000px) scale(.7);opacity:.7}}
@keyframes backOutLeft{0%{transform:scale(1);opacity:1}20%{transform:translateX(0) scale(.7);opacity:.7}to{transform:translateX(-2000px) scale(.7);opacity:.7}}
.animate__backOutLeft{-webkit-animation-name:backOutLeft;animation-name:backOutLeft}
@-webkit-keyframes backOutRight{0%{transform:scale(1);opacity:1}20%{transform:translateX(0) scale(.7);opacity:.7}to{transform:translateX(2000px) scale(.7);opacity:.7}}
@keyframes backOutRight{0%{transform:scale(1);opacity:1}20%{transform:translateX(0) scale(.7);opacity:.7}to{transform:translateX(2000px) scale(.7);opacity:.7}}
.animate__backOutRight{-webkit-animation-name:backOutRight;animation-name:backOutRight}
@-webkit-keyframes backOutUp{0%{transform:scale(1);opacity:1}20%{transform:translateY(0) scale(.7);opacity:.7}to{transform:translateY(-700px) scale(.7);opacity:.7}}
@keyframes backOutUp{0%{transform:scale(1);opacity:1}20%{transform:translateY(0) scale(.7);opacity:.7}to{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;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}to{opacity: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;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}to{opacity:1;transform:scaleX(1)}}
.animate__bounceIn{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(1s*0.75);animation-duration:calc(1s*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;transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;transform:translate3d(0,25px,0) scaleY(.9)}75%{transform:translate3d(0,-10px,0) scaleY(.95)}90%{transform:translate3d(0,5px,0) scaleY(.985)}to{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;transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;transform:translate3d(0,25px,0) scaleY(.9)}75%{transform:translate3d(0,-10px,0) scaleY(.95)}90%{transform:translate3d(0,5px,0) scaleY(.985)}to{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;transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;transform:translate3d(25px,0,0) scaleX(1)}75%{transform:translate3d(-10px,0,0) scaleX(.98)}90%{transform:translate3d(5px,0,0) scaleX(.995)}to{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;transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;transform:translate3d(25px,0,0) scaleX(1)}75%{transform:translate3d(-10px,0,0) scaleX(.98)}90%{transform:translate3d(5px,0,0) scaleX(.995)}to{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;transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;transform:translate3d(-25px,0,0) scaleX(1)}75%{transform:translate3d(10px,0,0) scaleX(.98)}90%{transform:translate3d(-5px,0,0) scaleX(.995)}to{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;transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;transform:translate3d(-25px,0,0) scaleX(1)}75%{transform:translate3d(10px,0,0) scaleX(.98)}90%{transform:translate3d(-5px,0,0) scaleX(.995)}to{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;transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;transform:translate3d(0,-20px,0) scaleY(.9)}75%{transform:translate3d(0,10px,0) scaleY(.95)}90%{transform:translate3d(0,-5px,0) scaleY(.985)}to{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;transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;transform:translate3d(0,-20px,0) scaleY(.9)}75%{transform:translate3d(0,10px,0) scaleY(.95)}90%{transform:translate3d(0,-5px,0) scaleY(.985)}to{transform:translateZ(0)}}
.animate__bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}
@-webkit-keyframes bounceOut{20%{transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(.3,.3,.3)}}
@keyframes bounceOut{20%{transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(.3,.3,.3)}}
.animate__bounceOut{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(1s*0.75);animation-duration:calc(1s*0.75);-webkit-animation-name:bounceOut;animation-name:bounceOut}
@-webkit-keyframes bounceOutDown{20%{transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;transform:translate3d(0,-20px,0) scaleY(.9)}to{opacity:0;transform:translate3d(0,2000px,0) scaleY(3)}}
@keyframes bounceOutDown{20%{transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;transform:translate3d(0,-20px,0) scaleY(.9)}to{opacity:0;transform:translate3d(0,2000px,0) scaleY(3)}}
.animate__bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}
@-webkit-keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;transform:translate3d(-2000px,0,0) scaleX(2)}}
@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;transform:translate3d(-2000px,0,0) scaleX(2)}}
.animate__bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}
@-webkit-keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;transform:translate3d(2000px,0,0) scaleX(2)}}
@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;transform:translate3d(2000px,0,0) scaleX(2)}}
.animate__bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}
@-webkit-keyframes bounceOutUp{20%{transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;transform:translate3d(0,20px,0) scaleY(.9)}to{opacity:0;transform:translate3d(0,-2000px,0) scaleY(3)}}
@keyframes bounceOutUp{20%{transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;transform:translate3d(0,20px,0) scaleY(.9)}to{opacity:0;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;transform:translate3d(0,-100%,0)}to{opacity:1;transform:translateZ(0)}}
@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:translateZ(0)}}
.animate__fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}
@-webkit-keyframes fadeInDownBig{0%{opacity:0;transform:translate3d(0,-2000px,0)}to{opacity:1;transform:translateZ(0)}}
@keyframes fadeInDownBig{0%{opacity:0;transform:translate3d(0,-2000px,0)}to{opacity:1;transform:translateZ(0)}}
.animate__fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}
@-webkit-keyframes fadeInLeft{0%{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:translateZ(0)}}
@keyframes fadeInLeft{0%{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:translateZ(0)}}
.animate__fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}
@-webkit-keyframes fadeInLeftBig{0%{opacity:0;transform:translate3d(-2000px,0,0)}to{opacity:1;transform:translateZ(0)}}
@keyframes fadeInLeftBig{0%{opacity:0;transform:translate3d(-2000px,0,0)}to{opacity:1;transform:translateZ(0)}}
.animate__fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}
@-webkit-keyframes fadeInRight{0%{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:translateZ(0)}}
@keyframes fadeInRight{0%{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:translateZ(0)}}
.animate__fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}
@-webkit-keyframes fadeInRightBig{0%{opacity:0;transform:translate3d(2000px,0,0)}to{opacity:1;transform:translateZ(0)}}
@keyframes fadeInRightBig{0%{opacity:0;transform:translate3d(2000px,0,0)}to{opacity:1;transform:translateZ(0)}}
.animate__fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}
@-webkit-keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:translateZ(0)}}
@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:translateZ(0)}}
.animate__fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}
@-webkit-keyframes fadeInUpBig{0%{opacity:0;transform:translate3d(0,2000px,0)}to{opacity:1;transform:translateZ(0)}}
@keyframes fadeInUpBig{0%{opacity:0;transform:translate3d(0,2000px,0)}to{opacity:1;transform:translateZ(0)}}
.animate__fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}
@-webkit-keyframes fadeInTopLeft{0%{opacity:0;transform:translate3d(-100%,-100%,0)}to{opacity:1;transform:translateZ(0)}}
@keyframes fadeInTopLeft{0%{opacity:0;transform:translate3d(-100%,-100%,0)}to{opacity:1;transform:translateZ(0)}}
.animate__fadeInTopLeft{-webkit-animation-name:fadeInTopLeft;animation-name:fadeInTopLeft}
@-webkit-keyframes fadeInTopRight{0%{opacity:0;transform:translate3d(100%,-100%,0)}to{opacity:1;transform:translateZ(0)}}
@keyframes fadeInTopRight{0%{opacity:0;transform:translate3d(100%,-100%,0)}to{opacity:1;transform:translateZ(0)}}
.animate__fadeInTopRight{-webkit-animation-name:fadeInTopRight;animation-name:fadeInTopRight}
@-webkit-keyframes fadeInBottomLeft{0%{opacity:0;transform:translate3d(-100%,100%,0)}to{opacity:1;transform:translateZ(0)}}
@keyframes fadeInBottomLeft{0%{opacity:0;transform:translate3d(-100%,100%,0)}to{opacity:1;transform:translateZ(0)}}
.animate__fadeInBottomLeft{-webkit-animation-name:fadeInBottomLeft;animation-name:fadeInBottomLeft}
@-webkit-keyframes fadeInBottomRight{0%{opacity:0;transform:translate3d(100%,100%,0)}to{opacity:1;transform:translateZ(0)}}
@keyframes fadeInBottomRight{0%{opacity:0;transform:translate3d(100%,100%,0)}to{opacity:1;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;transform:translate3d(0,100%,0)}}
@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;transform:translate3d(0,100%,0)}}
.animate__fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}
@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;transform:translate3d(0,2000px,0)}}
@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;transform:translate3d(0,2000px,0)}}
.animate__fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}
@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;transform:translate3d(-100%,0,0)}}
@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;transform:translate3d(-100%,0,0)}}
.animate__fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}
@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;transform:translate3d(-2000px,0,0)}}
@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;transform:translate3d(-2000px,0,0)}}
.animate__fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}
@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0)}}
@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0)}}
.animate__fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}
@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;transform:translate3d(2000px,0,0)}}
@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;transform:translate3d(2000px,0,0)}}
.animate__fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}
@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}
@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}
.animate__fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}
@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;transform:translate3d(0,-2000px,0)}}
@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;transform:translate3d(0,-2000px,0)}}
.animate__fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}
@-webkit-keyframes fadeOutTopLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(-100%,-100%,0)}}
@keyframes fadeOutTopLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(-100%,-100%,0)}}
.animate__fadeOutTopLeft{-webkit-animation-name:fadeOutTopLeft;animation-name:fadeOutTopLeft}
@-webkit-keyframes fadeOutTopRight{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(100%,-100%,0)}}
@keyframes fadeOutTopRight{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(100%,-100%,0)}}
.animate__fadeOutTopRight{-webkit-animation-name:fadeOutTopRight;animation-name:fadeOutTopRight}
@-webkit-keyframes fadeOutBottomRight{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(100%,100%,0)}}
@keyframes fadeOutBottomRight{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(100%,100%,0)}}
.animate__fadeOutBottomRight{-webkit-animation-name:fadeOutBottomRight;animation-name:fadeOutBottomRight}
@-webkit-keyframes fadeOutBottomLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(-100%,100%,0)}}
@keyframes fadeOutBottomLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(-100%,100%,0)}}
.animate__fadeOutBottomLeft{-webkit-animation-name:fadeOutBottomLeft;animation-name:fadeOutBottomLeft}
@-webkit-keyframes flip{0%{transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}
@keyframes flip{0%{transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{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%{transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{transform:perspective(400px) rotateX(10deg);opacity:1}80%{transform:perspective(400px) rotateX(-5deg)}to{transform:perspective(400px)}}
@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{transform:perspective(400px) rotateX(10deg);opacity:1}80%{transform:perspective(400px) rotateX(-5deg)}to{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%{transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{transform:perspective(400px) rotateY(10deg);opacity:1}80%{transform:perspective(400px) rotateY(-5deg)}to{transform:perspective(400px)}}
@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{transform:perspective(400px) rotateY(10deg);opacity:1}80%{transform:perspective(400px) rotateY(-5deg)}to{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%{transform:perspective(400px)}30%{transform:perspective(400px) rotateX(-20deg);opacity:1}to{transform:perspective(400px) rotateX(90deg);opacity:0}}
@keyframes flipOutX{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateX(-20deg);opacity:1}to{transform:perspective(400px) rotateX(90deg);opacity:0}}
.animate__flipOutX{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(1s*0.75);animation-duration:calc(1s*0.75);-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}
@-webkit-keyframes flipOutY{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateY(-15deg);opacity:1}to{transform:perspective(400px) rotateY(90deg);opacity:0}}
@keyframes flipOutY{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateY(-15deg);opacity:1}to{transform:perspective(400px) rotateY(90deg);opacity:0}}
.animate__flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(1s*0.75);animation-duration:calc(1s*0.75);-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}
@-webkit-keyframes lightSpeedInRight{0%{transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{transform:skewX(20deg);opacity:1}80%{transform:skewX(-5deg)}to{transform:translateZ(0)}}
@keyframes lightSpeedInRight{0%{transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{transform:skewX(20deg);opacity:1}80%{transform:skewX(-5deg)}to{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%{transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{transform:skewX(-20deg);opacity:1}80%{transform:skewX(5deg)}to{transform:translateZ(0)}}
@keyframes lightSpeedInLeft{0%{transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{transform:skewX(-20deg);opacity:1}80%{transform:skewX(5deg)}to{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{transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}
@keyframes lightSpeedOutRight{0%{opacity:1}to{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{transform:translate3d(-100%,0,0) skewX(-30deg);opacity:0}}
@keyframes lightSpeedOutLeft{0%{opacity:1}to{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%{transform:rotate(-200deg);opacity:0}to{transform:translateZ(0);opacity:1}}
@keyframes rotateIn{0%{transform:rotate(-200deg);opacity:0}to{transform:translateZ(0);opacity:1}}
.animate__rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn;transform-origin:center}
@-webkit-keyframes rotateInDownLeft{0%{transform:rotate(-45deg);opacity:0}to{transform:translateZ(0);opacity:1}}
@keyframes rotateInDownLeft{0%{transform:rotate(-45deg);opacity:0}to{transform:translateZ(0);opacity:1}}
.animate__rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft;transform-origin:left bottom}
@-webkit-keyframes rotateInDownRight{0%{transform:rotate(45deg);opacity:0}to{transform:translateZ(0);opacity:1}}
@keyframes rotateInDownRight{0%{transform:rotate(45deg);opacity:0}to{transform:translateZ(0);opacity:1}}
.animate__rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight;transform-origin:right bottom}
@-webkit-keyframes rotateInUpLeft{0%{transform:rotate(45deg);opacity:0}to{transform:translateZ(0);opacity:1}}
@keyframes rotateInUpLeft{0%{transform:rotate(45deg);opacity:0}to{transform:translateZ(0);opacity:1}}
.animate__rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft;transform-origin:left bottom}
@-webkit-keyframes rotateInUpRight{0%{transform:rotate(-90deg);opacity:0}to{transform:translateZ(0);opacity:1}}
@keyframes rotateInUpRight{0%{transform:rotate(-90deg);opacity:0}to{transform:translateZ(0);opacity:1}}
.animate__rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight;transform-origin:right bottom}
@-webkit-keyframes rotateOut{0%{opacity:1}to{transform:rotate(200deg);opacity:0}}
@keyframes rotateOut{0%{opacity:1}to{transform:rotate(200deg);opacity:0}}
.animate__rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut;transform-origin:center}
@-webkit-keyframes rotateOutDownLeft{0%{opacity:1}to{transform:rotate(45deg);opacity:0}}
@keyframes rotateOutDownLeft{0%{opacity:1}to{transform:rotate(45deg);opacity:0}}
.animate__rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft;transform-origin:left bottom}
@-webkit-keyframes rotateOutDownRight{0%{opacity:1}to{transform:rotate(-45deg);opacity:0}}
@keyframes rotateOutDownRight{0%{opacity:1}to{transform:rotate(-45deg);opacity:0}}
.animate__rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight;transform-origin:right bottom}
@-webkit-keyframes rotateOutUpLeft{0%{opacity:1}to{transform:rotate(-45deg);opacity:0}}
@keyframes rotateOutUpLeft{0%{opacity:1}to{transform:rotate(-45deg);opacity:0}}
.animate__rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft;transform-origin:left bottom}
@-webkit-keyframes rotateOutUpRight{0%{opacity:1}to{transform:rotate(90deg);opacity:0}}
@keyframes rotateOutUpRight{0%{opacity:1}to{transform:rotate(90deg);opacity:0}}
.animate__rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight;transform-origin:right bottom}
@-webkit-keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{transform:rotate(80deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{transform:rotate(60deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{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%{transform:rotate(80deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{transform:rotate(60deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{transform:translate3d(0,700px,0);opacity:0}}
.animate__hinge{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-duration:calc(1s*2);animation-duration:calc(1s*2);-webkit-animation-name:hinge;animation-name:hinge;transform-origin:top left}
@-webkit-keyframes jackInTheBox{0%{opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}
@keyframes jackInTheBox{0%{opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}
.animate__jackInTheBox{-webkit-animation-name:jackInTheBox;animation-name:jackInTheBox}
@-webkit-keyframes rollIn{0%{opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;transform:translateZ(0)}}
@keyframes rollIn{0%{opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;transform:translateZ(0)}}
.animate__rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}
@-webkit-keyframes rollOut{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0) rotate(120deg)}}
@keyframes rollOut{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0) rotate(120deg)}}
.animate__rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}
@-webkit-keyframes zoomIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}
@keyframes zoomIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}
.animate__zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}
@-webkit-keyframes zoomInDown{0%{opacity: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;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;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;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;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;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;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;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;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;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;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;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;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;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;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;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;transform:scale3d(.3,.3,.3)}to{opacity:0}}
@keyframes zoomOut{0%{opacity:1}50%{opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}
.animate__zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}
@-webkit-keyframes zoomOutDown{40%{opacity:1;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;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;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;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;transform-origin:center bottom}
@-webkit-keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(-2000px,0,0)}}
@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(-2000px,0,0)}}
.animate__zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft;transform-origin:left center}
@-webkit-keyframes zoomOutRight{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(2000px,0,0)}}
@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(2000px,0,0)}}
.animate__zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight;transform-origin:right center}
@-webkit-keyframes zoomOutUp{40%{opacity:1;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;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;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;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;transform-origin:center bottom}
@-webkit-keyframes slideInDown{0%{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translateZ(0)}}
@keyframes slideInDown{0%{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translateZ(0)}}
.animate__slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}
@-webkit-keyframes slideInLeft{0%{transform:translate3d(-100%,0,0);visibility:visible}to{transform:translateZ(0)}}
@keyframes slideInLeft{0%{transform:translate3d(-100%,0,0);visibility:visible}to{transform:translateZ(0)}}
.animate__slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}
@-webkit-keyframes slideInRight{0%{transform:translate3d(100%,0,0);visibility:visible}to{transform:translateZ(0)}}
@keyframes slideInRight{0%{transform:translate3d(100%,0,0);visibility:visible}to{transform:translateZ(0)}}
.animate__slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}
@-webkit-keyframes slideInUp{0%{transform:translate3d(0,100%,0);visibility:visible}to{transform:translateZ(0)}}
@keyframes slideInUp{0%{transform:translate3d(0,100%,0);visibility:visible}to{transform:translateZ(0)}}
.animate__slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}
@-webkit-keyframes slideOutDown{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,100%,0)}}
@keyframes slideOutDown{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,100%,0)}}
.animate__slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}
@-webkit-keyframes slideOutLeft{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(-100%,0,0)}}
@keyframes slideOutLeft{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(-100%,0,0)}}
.animate__slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}
@-webkit-keyframes slideOutRight{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(100%,0,0)}}
@keyframes slideOutRight{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(100%,0,0)}}
.animate__slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}
@-webkit-keyframes slideOutUp{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,-100%,0)}}
@keyframes slideOutUp{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,-100%,0)}}
.animate__slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}
.role-card div{
  height: 45px;
  width: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.work-header{
  margin-left: 5%;
  margin-top: 2rem;
}

.docs-titlebar-buttons{
  visibility: hidden;
}

.role-doc .blocker{
  width: 476px;
  height: 58px;
  margin-top: 2px;
  background-color: #f9fbfd;
  right: 0;
  position: absolute;
}

@media (max-width: 801px) {

  .role-doc .blocker{
    width: 364px;
  }
}

@media (max-width: 671px) {

  .role-doc .blocker{
    width: 348px;
  }
}

.role-doc .relative{
  width: 90%;
}

.role-doc iframe{
  width: 100%;
}