@charset "UTF-8";@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.ToastMessage {
  margin: 0.25rem 0.5rem 0.25rem 0.5rem;
}
.ToastMessage__title {
  font-size: 16px;
}
.ToastMessage__title--info {
  color: rgb(var(--color-sky-blue-700));
}
.ToastMessage__title--success {
  color: rgb(var(--color-success-600));
}
.ToastMessage__title--warning {
  color: rgb(var(--color-warning-500));
}
.ToastMessage__title--error {
  color: rgb(var(--color-error-500));
}
.ToastMessage__message {
  font-size: 16px;
  line-height: 1.2em;
  margin-top: 5px;
  color: rgb(var(--color-gray-800));
}
.ToastMessage__details {
  margin-top: 5px;
  font-size: 14px;
  color: rgb(var(--color-gray-700));
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.button {
  cursor: pointer;
  color: white;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 5px;
  border: 0;
}
.button--noMargin {
  margin: 0 !important;
}
.button--lg {
  padding-top: 14px;
  padding-bottom: 14px;
}
.button--stale {
  opacity: 0.65;
}
.button .fa {
  margin-left: 5px;
}
.button--isLoading {
  position: relative;
  overflow: hidden;
}
.button--isLoading:hover {
  cursor: default;
}
.button--isLoading:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) 10px, rgba(255, 255, 255, 0.3) 10px, rgba(255, 255, 255, 0.3) 20px);
  background-size: 800%;
  animation: buttonIsLoading 30s infinite;
  animation-timing-function: linear;
}
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
.button.button-size-xxs {
  padding: 4px 7px;
  font-size: 12px;
  line-height: 14px;
  min-height: 29px;
  min-width: 70px;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.button.button-size-xs {
  padding: 5px 9px;
  font-size: 13px;
  line-height: 15px;
  min-height: 31px;
  min-width: 75px;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.button.button-size-sm {
  padding: 9px 11px;
  font-size: 14px;
  line-height: 16px;
  min-height: 33px;
  min-width: 80px;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.button.button-size-md {
  padding: 10px 12px;
  font-size: 16px;
  line-height: 18px;
  min-height: 37px;
  min-width: 90px;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.button.button-size-lg {
  padding: 13px 14px;
  font-size: 17px;
  line-height: 19px;
  min-height: 39px;
  min-width: 95px;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.button.button-size-xl {
  padding: 15px 16px;
  font-size: 18px;
  line-height: 20px;
  min-height: 41px;
  min-width: 100px;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.button-primary {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  min-width: 60px;
  color: rgb(var(--color-white)) !important;
  font-family: "Onest";
  font-weight: 700;
  letter-spacing: 0.01rem;
  background-color: rgb(var(--color-primary-dash3-500));
}
.button-primary:hover {
  background-color: rgb(var(--color-primary-dash3-600));
}
.button-primary.button--isLoading {
  background-color: rgb(var(--color-primary-dash3-200));
}
.button-primary.button--isLoading:hover {
  background-color: rgb(var(--color-primary-dash3-200)) !important;
}
.button-primary {
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
}
.button-primary.button--disabled {
  background-color: rgb(var(--color-primary-dash3-200)) !important;
  cursor: default;
}
.button-primary.button--disabled:hover {
  text-decoration: none;
}
.button-primary.button--disabled .SvgIcon--icon {
  cursor: default !important;
}
.button-text-primary {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Onest";
  font-weight: 700;
  color: rgb(var(--color-primary-dash3-500));
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
  background-color: transparent;
  padding: 0 !important;
  border: none !important;
  min-width: min-content !important;
}
.button-text-primary:hover {
  color: rgb(var(--color-primary-dash3-600));
  text-decoration: underline;
}
.button-text-primary.button--disabled {
  color: rgb(var(--color-gray-400));
  cursor: default;
}
.button-text-primary.button--disabled:hover {
  text-decoration: none;
}
.delete {
  color: rgb(var(--color-error-500));
  background-color: rgb(var(--color-gray-100));
}
.right-side {
  float: right;
  padding-top: 13px;
  padding-right: 14px;
}
.button-secondary {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  min-width: 60px;
  color: rgb(var(--color-white)) !important;
  font-family: "Onest";
  font-weight: 700;
  letter-spacing: 0.01rem;
  background-color: rgb(var(--color-secondary-dash3-500));
}
.button-secondary:hover {
  background-color: rgb(var(--color-secondary-dash3-600));
}
.button-secondary.button--isLoading {
  background-color: rgb(var(--color-secondary-dash3-200));
}
.button-secondary.button--isLoading:hover {
  background-color: rgb(var(--color-secondary-dash3-200)) !important;
}
.button-secondary {
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
}
.button-secondary.button--disabled {
  background-color: rgb(var(--color-secondary-dash3-200)) !important;
  cursor: default;
}
.button-secondary.button--disabled:hover {
  text-decoration: none;
}
.button-secondary.button--disabled .SvgIcon--icon {
  cursor: default !important;
}
.button-text-secondary {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Onest";
  font-weight: 700;
  color: rgb(var(--color-secondary-dash3-500));
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
  background-color: transparent;
  padding: 0 !important;
  border: none !important;
  min-width: min-content !important;
}
.button-text-secondary:hover {
  color: rgb(var(--color-secondary-dash3-600));
  text-decoration: underline;
}
.button-text-secondary.button--disabled {
  color: rgb(var(--color-gray-400));
  cursor: default;
}
.button-text-secondary.button--disabled:hover {
  text-decoration: none;
}
.delete {
  color: rgb(var(--color-error-500));
  background-color: rgb(var(--color-gray-100));
}
.right-side {
  float: right;
  padding-top: 13px;
  padding-right: 14px;
}
.button-gray {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  min-width: 60px;
  color: rgb(var(--color-white)) !important;
  font-family: "Onest";
  font-weight: 700;
  letter-spacing: 0.01rem;
  background-color: rgb(var(--color-gray-dash3-600));
}
.button-gray:hover {
  background-color: rgb(var(--color-gray-dash3-700));
}
.button-gray.button--isLoading {
  background-color: rgb(var(--color-gray-dash3-200));
}
.button-gray.button--isLoading:hover {
  background-color: rgb(var(--color-gray-dash3-200)) !important;
}
.button-gray {
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
}
.button-gray.button--disabled {
  background-color: rgb(var(--color-gray-dash3-200)) !important;
  cursor: default;
}
.button-gray.button--disabled:hover {
  text-decoration: none;
}
.button-gray.button--disabled .SvgIcon--icon {
  cursor: default !important;
}
.button-text-gray {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Onest";
  font-weight: 700;
  color: rgb(var(--color-gray-dash3-600));
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
  background-color: transparent;
  padding: 0 !important;
  border: none !important;
  min-width: min-content !important;
}
.button-text-gray:hover {
  color: rgb(var(--color-gray-dash3-700));
  text-decoration: underline;
}
.button-text-gray.button--disabled {
  color: rgb(var(--color-gray-400));
  cursor: default;
}
.button-text-gray.button--disabled:hover {
  text-decoration: none;
}
.delete {
  color: rgb(var(--color-error-500));
  background-color: rgb(var(--color-gray-100));
}
.right-side {
  float: right;
  padding-top: 13px;
  padding-right: 14px;
}
.button-white {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  min-width: 60px;
  color: rgb(var(--color-white)) !important;
  font-family: "Onest";
  font-weight: 700;
  letter-spacing: 0.01rem;
  background-color: rgb(var(--color-white));
}
.button-white:hover {
  background-color: rgb(var(--color-white));
}
.button-white.button--isLoading {
  background-color: rgb(var(--color-white-dash3-200));
}
.button-white.button--isLoading:hover {
  background-color: rgb(var(--color-white-dash3-200)) !important;
}
.button-white {
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
}
.button-white.button--disabled {
  background-color: rgb(var(--color-white-dash3-200)) !important;
  cursor: default;
}
.button-white.button--disabled:hover {
  text-decoration: none;
}
.button-white.button--disabled .SvgIcon--icon {
  cursor: default !important;
}
.button-text-white {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Onest";
  font-weight: 700;
  color: rgb(var(--color-white));
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
  background-color: transparent;
  padding: 0 !important;
  border: none !important;
  min-width: min-content !important;
}
.button-text-white:hover {
  color: rgb(var(--color-white));
  text-decoration: underline;
}
.button-text-white.button--disabled {
  color: rgb(var(--color-gray-400));
  cursor: default;
}
.button-text-white.button--disabled:hover {
  text-decoration: none;
}
.delete {
  color: rgb(var(--color-error-500));
  background-color: rgb(var(--color-gray-100));
}
.right-side {
  float: right;
  padding-top: 13px;
  padding-right: 14px;
}
.button-black {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  min-width: 60px;
  color: rgb(var(--color-white)) !important;
  font-family: "Onest";
  font-weight: 700;
  letter-spacing: 0.01rem;
  background-color: rgb(var(--color-black));
}
.button-black:hover {
  background-color: rgb(var(--color-black));
}
.button-black.button--isLoading {
  background-color: rgb(var(--color-black-dash3-200));
}
.button-black.button--isLoading:hover {
  background-color: rgb(var(--color-black-dash3-200)) !important;
}
.button-black {
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
}
.button-black.button--disabled {
  background-color: rgb(var(--color-black-dash3-200)) !important;
  cursor: default;
}
.button-black.button--disabled:hover {
  text-decoration: none;
}
.button-black.button--disabled .SvgIcon--icon {
  cursor: default !important;
}
.button-text-black {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Onest";
  font-weight: 700;
  color: rgb(var(--color-black));
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
  background-color: transparent;
  padding: 0 !important;
  border: none !important;
  min-width: min-content !important;
}
.button-text-black:hover {
  color: rgb(var(--color-black));
  text-decoration: underline;
}
.button-text-black.button--disabled {
  color: rgb(var(--color-gray-400));
  cursor: default;
}
.button-text-black.button--disabled:hover {
  text-decoration: none;
}
.delete {
  color: rgb(var(--color-error-500));
  background-color: rgb(var(--color-gray-100));
}
.right-side {
  float: right;
  padding-top: 13px;
  padding-right: 14px;
}
.button-error {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  min-width: 60px;
  color: rgb(var(--color-white)) !important;
  font-family: "Onest";
  font-weight: 700;
  letter-spacing: 0.01rem;
  background-color: rgb(var(--color-error-dash3-500));
}
.button-error:hover {
  background-color: rgb(var(--color-error-dash3-600));
}
.button-error.button--isLoading {
  background-color: rgb(var(--color-error-dash3-200));
}
.button-error.button--isLoading:hover {
  background-color: rgb(var(--color-error-dash3-200)) !important;
}
.button-error {
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
}
.button-error.button--disabled {
  background-color: rgb(var(--color-error-dash3-200)) !important;
  cursor: default;
}
.button-error.button--disabled:hover {
  text-decoration: none;
}
.button-error.button--disabled .SvgIcon--icon {
  cursor: default !important;
}
.button-text-error {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Onest";
  font-weight: 700;
  color: rgb(var(--color-error-dash3-500));
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
  background-color: transparent;
  padding: 0 !important;
  border: none !important;
  min-width: min-content !important;
}
.button-text-error:hover {
  color: rgb(var(--color-error-dash3-600));
  text-decoration: underline;
}
.button-text-error.button--disabled {
  color: rgb(var(--color-gray-400));
  cursor: default;
}
.button-text-error.button--disabled:hover {
  text-decoration: none;
}
.delete {
  color: rgb(var(--color-error-500));
  background-color: rgb(var(--color-gray-100));
}
.right-side {
  float: right;
  padding-top: 13px;
  padding-right: 14px;
}
.button-success {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  min-width: 60px;
  color: rgb(var(--color-white)) !important;
  font-family: "Onest";
  font-weight: 700;
  letter-spacing: 0.01rem;
  background-color: rgb(var(--color-success-dash3-500));
}
.button-success:hover {
  background-color: rgb(var(--color-success-dash3-600));
}
.button-success.button--isLoading {
  background-color: rgb(var(--color-success-dash3-200));
}
.button-success.button--isLoading:hover {
  background-color: rgb(var(--color-success-dash3-200)) !important;
}
.button-success {
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
}
.button-success.button--disabled {
  background-color: rgb(var(--color-success-dash3-200)) !important;
  cursor: default;
}
.button-success.button--disabled:hover {
  text-decoration: none;
}
.button-success.button--disabled .SvgIcon--icon {
  cursor: default !important;
}
.button-text-success {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Onest";
  font-weight: 700;
  color: rgb(var(--color-success-dash3-500));
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
  background-color: transparent;
  padding: 0 !important;
  border: none !important;
  min-width: min-content !important;
}
.button-text-success:hover {
  color: rgb(var(--color-success-dash3-600));
  text-decoration: underline;
}
.button-text-success.button--disabled {
  color: rgb(var(--color-gray-400));
  cursor: default;
}
.button-text-success.button--disabled:hover {
  text-decoration: none;
}
.delete {
  color: rgb(var(--color-error-500));
  background-color: rgb(var(--color-gray-100));
}
.right-side {
  float: right;
  padding-top: 13px;
  padding-right: 14px;
}
.button-warning {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  min-width: 60px;
  color: rgb(var(--color-white)) !important;
  font-family: "Onest";
  font-weight: 700;
  letter-spacing: 0.01rem;
  background-color: rgb(var(--color-warning-dash3-500));
}
.button-warning:hover {
  background-color: rgb(var(--color-warning-dash3-600));
}
.button-warning.button--isLoading {
  background-color: rgb(var(--color-warning-dash3-200));
}
.button-warning.button--isLoading:hover {
  background-color: rgb(var(--color-warning-dash3-200)) !important;
}
.button-warning {
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
}
.button-warning.button--disabled {
  background-color: rgb(var(--color-warning-dash3-200)) !important;
  cursor: default;
}
.button-warning.button--disabled:hover {
  text-decoration: none;
}
.button-warning.button--disabled .SvgIcon--icon {
  cursor: default !important;
}
.button-text-warning {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Onest";
  font-weight: 700;
  color: rgb(var(--color-warning-dash3-500));
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
  background-color: transparent;
  padding: 0 !important;
  border: none !important;
  min-width: min-content !important;
}
.button-text-warning:hover {
  color: rgb(var(--color-warning-dash3-600));
  text-decoration: underline;
}
.button-text-warning.button--disabled {
  color: rgb(var(--color-gray-400));
  cursor: default;
}
.button-text-warning.button--disabled:hover {
  text-decoration: none;
}
.delete {
  color: rgb(var(--color-error-500));
  background-color: rgb(var(--color-gray-100));
}
.right-side {
  float: right;
  padding-top: 13px;
  padding-right: 14px;
}
.button-teal {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  min-width: 60px;
  color: rgb(var(--color-white)) !important;
  font-family: "Onest";
  font-weight: 700;
  letter-spacing: 0.01rem;
  background-color: rgb(var(--color-teal-dash3-500));
}
.button-teal:hover {
  background-color: rgb(var(--color-teal-dash3-600));
}
.button-teal.button--isLoading {
  background-color: rgb(var(--color-teal-dash3-200));
}
.button-teal.button--isLoading:hover {
  background-color: rgb(var(--color-teal-dash3-200)) !important;
}
.button-teal {
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
}
.button-teal.button--disabled {
  background-color: rgb(var(--color-teal-dash3-200)) !important;
  cursor: default;
}
.button-teal.button--disabled:hover {
  text-decoration: none;
}
.button-teal.button--disabled .SvgIcon--icon {
  cursor: default !important;
}
.button-text-teal {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Onest";
  font-weight: 700;
  color: rgb(var(--color-teal-dash3-500));
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
  background-color: transparent;
  padding: 0 !important;
  border: none !important;
  min-width: min-content !important;
}
.button-text-teal:hover {
  color: rgb(var(--color-teal-dash3-600));
  text-decoration: underline;
}
.button-text-teal.button--disabled {
  color: rgb(var(--color-gray-400));
  cursor: default;
}
.button-text-teal.button--disabled:hover {
  text-decoration: none;
}
.delete {
  color: rgb(var(--color-error-500));
  background-color: rgb(var(--color-gray-100));
}
.right-side {
  float: right;
  padding-top: 13px;
  padding-right: 14px;
}
.button-extra-red {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  min-width: 60px;
  color: rgb(var(--color-white)) !important;
  font-family: "Onest";
  font-weight: 700;
  letter-spacing: 0.01rem;
  background-color: rgb(var(--color-extra-red-dash3-500));
}
.button-extra-red:hover {
  background-color: rgb(var(--color-extra-red-dash3-600));
}
.button-extra-red.button--isLoading {
  background-color: rgb(var(--color-extra-red-dash3-200));
}
.button-extra-red.button--isLoading:hover {
  background-color: rgb(var(--color-extra-red-dash3-200)) !important;
}
.button-extra-red {
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
}
.button-extra-red.button--disabled {
  background-color: rgb(var(--color-extra-red-dash3-200)) !important;
  cursor: default;
}
.button-extra-red.button--disabled:hover {
  text-decoration: none;
}
.button-extra-red.button--disabled .SvgIcon--icon {
  cursor: default !important;
}
.button-text-extra-red {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Onest";
  font-weight: 700;
  color: rgb(var(--color-extra-red-dash3-500));
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
  background-color: transparent;
  padding: 0 !important;
  border: none !important;
  min-width: min-content !important;
}
.button-text-extra-red:hover {
  color: rgb(var(--color-extra-red-dash3-600));
  text-decoration: underline;
}
.button-text-extra-red.button--disabled {
  color: rgb(var(--color-gray-400));
  cursor: default;
}
.button-text-extra-red.button--disabled:hover {
  text-decoration: none;
}
.delete {
  color: rgb(var(--color-error-500));
  background-color: rgb(var(--color-gray-100));
}
.right-side {
  float: right;
  padding-top: 13px;
  padding-right: 14px;
}
.button-extra-orange {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  min-width: 60px;
  color: rgb(var(--color-white)) !important;
  font-family: "Onest";
  font-weight: 700;
  letter-spacing: 0.01rem;
  background-color: rgb(var(--color-extra-orange-dash3-500));
}
.button-extra-orange:hover {
  background-color: rgb(var(--color-extra-orange-dash3-600));
}
.button-extra-orange.button--isLoading {
  background-color: rgb(var(--color-extra-orange-dash3-200));
}
.button-extra-orange.button--isLoading:hover {
  background-color: rgb(var(--color-extra-orange-dash3-200)) !important;
}
.button-extra-orange {
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
}
.button-extra-orange.button--disabled {
  background-color: rgb(var(--color-extra-orange-dash3-200)) !important;
  cursor: default;
}
.button-extra-orange.button--disabled:hover {
  text-decoration: none;
}
.button-extra-orange.button--disabled .SvgIcon--icon {
  cursor: default !important;
}
.button-text-extra-orange {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Onest";
  font-weight: 700;
  color: rgb(var(--color-extra-orange-dash3-500));
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
  background-color: transparent;
  padding: 0 !important;
  border: none !important;
  min-width: min-content !important;
}
.button-text-extra-orange:hover {
  color: rgb(var(--color-extra-orange-dash3-600));
  text-decoration: underline;
}
.button-text-extra-orange.button--disabled {
  color: rgb(var(--color-gray-400));
  cursor: default;
}
.button-text-extra-orange.button--disabled:hover {
  text-decoration: none;
}
.delete {
  color: rgb(var(--color-error-500));
  background-color: rgb(var(--color-gray-100));
}
.right-side {
  float: right;
  padding-top: 13px;
  padding-right: 14px;
}
.button-extra-yellow {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  min-width: 60px;
  color: rgb(var(--color-white)) !important;
  font-family: "Onest";
  font-weight: 700;
  letter-spacing: 0.01rem;
  background-color: rgb(var(--color-extra-yellow-dash3-500));
}
.button-extra-yellow:hover {
  background-color: rgb(var(--color-extra-yellow-dash3-600));
}
.button-extra-yellow.button--isLoading {
  background-color: rgb(var(--color-extra-yellow-dash3-200));
}
.button-extra-yellow.button--isLoading:hover {
  background-color: rgb(var(--color-extra-yellow-dash3-200)) !important;
}
.button-extra-yellow {
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
}
.button-extra-yellow.button--disabled {
  background-color: rgb(var(--color-extra-yellow-dash3-200)) !important;
  cursor: default;
}
.button-extra-yellow.button--disabled:hover {
  text-decoration: none;
}
.button-extra-yellow.button--disabled .SvgIcon--icon {
  cursor: default !important;
}
.button-text-extra-yellow {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Onest";
  font-weight: 700;
  color: rgb(var(--color-extra-yellow-dash3-500));
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
  background-color: transparent;
  padding: 0 !important;
  border: none !important;
  min-width: min-content !important;
}
.button-text-extra-yellow:hover {
  color: rgb(var(--color-extra-yellow-dash3-600));
  text-decoration: underline;
}
.button-text-extra-yellow.button--disabled {
  color: rgb(var(--color-gray-400));
  cursor: default;
}
.button-text-extra-yellow.button--disabled:hover {
  text-decoration: none;
}
.delete {
  color: rgb(var(--color-error-500));
  background-color: rgb(var(--color-gray-100));
}
.right-side {
  float: right;
  padding-top: 13px;
  padding-right: 14px;
}
.button-extra-green {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  min-width: 60px;
  color: rgb(var(--color-white)) !important;
  font-family: "Onest";
  font-weight: 700;
  letter-spacing: 0.01rem;
  background-color: rgb(var(--color-extra-green-dash3-500));
}
.button-extra-green:hover {
  background-color: rgb(var(--color-extra-green-dash3-600));
}
.button-extra-green.button--isLoading {
  background-color: rgb(var(--color-extra-green-dash3-200));
}
.button-extra-green.button--isLoading:hover {
  background-color: rgb(var(--color-extra-green-dash3-200)) !important;
}
.button-extra-green {
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
}
.button-extra-green.button--disabled {
  background-color: rgb(var(--color-extra-green-dash3-200)) !important;
  cursor: default;
}
.button-extra-green.button--disabled:hover {
  text-decoration: none;
}
.button-extra-green.button--disabled .SvgIcon--icon {
  cursor: default !important;
}
.button-text-extra-green {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Onest";
  font-weight: 700;
  color: rgb(var(--color-extra-green-dash3-500));
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
  background-color: transparent;
  padding: 0 !important;
  border: none !important;
  min-width: min-content !important;
}
.button-text-extra-green:hover {
  color: rgb(var(--color-extra-green-dash3-600));
  text-decoration: underline;
}
.button-text-extra-green.button--disabled {
  color: rgb(var(--color-gray-400));
  cursor: default;
}
.button-text-extra-green.button--disabled:hover {
  text-decoration: none;
}
.delete {
  color: rgb(var(--color-error-500));
  background-color: rgb(var(--color-gray-100));
}
.right-side {
  float: right;
  padding-top: 13px;
  padding-right: 14px;
}
.button-extra-blue {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  min-width: 60px;
  color: rgb(var(--color-white)) !important;
  font-family: "Onest";
  font-weight: 700;
  letter-spacing: 0.01rem;
  background-color: rgb(var(--color-extra-blue-dash3-500));
}
.button-extra-blue:hover {
  background-color: rgb(var(--color-extra-blue-dash3-600));
}
.button-extra-blue.button--isLoading {
  background-color: rgb(var(--color-extra-blue-dash3-200));
}
.button-extra-blue.button--isLoading:hover {
  background-color: rgb(var(--color-extra-blue-dash3-200)) !important;
}
.button-extra-blue {
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
}
.button-extra-blue.button--disabled {
  background-color: rgb(var(--color-extra-blue-dash3-200)) !important;
  cursor: default;
}
.button-extra-blue.button--disabled:hover {
  text-decoration: none;
}
.button-extra-blue.button--disabled .SvgIcon--icon {
  cursor: default !important;
}
.button-text-extra-blue {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Onest";
  font-weight: 700;
  color: rgb(var(--color-extra-blue-dash3-500));
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
  background-color: transparent;
  padding: 0 !important;
  border: none !important;
  min-width: min-content !important;
}
.button-text-extra-blue:hover {
  color: rgb(var(--color-extra-blue-dash3-600));
  text-decoration: underline;
}
.button-text-extra-blue.button--disabled {
  color: rgb(var(--color-gray-400));
  cursor: default;
}
.button-text-extra-blue.button--disabled:hover {
  text-decoration: none;
}
.delete {
  color: rgb(var(--color-error-500));
  background-color: rgb(var(--color-gray-100));
}
.right-side {
  float: right;
  padding-top: 13px;
  padding-right: 14px;
}
.button-extra-indigo {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  min-width: 60px;
  color: rgb(var(--color-white)) !important;
  font-family: "Onest";
  font-weight: 700;
  letter-spacing: 0.01rem;
  background-color: rgb(var(--color-extra-indigo-dash3-500));
}
.button-extra-indigo:hover {
  background-color: rgb(var(--color-extra-indigo-dash3-600));
}
.button-extra-indigo.button--isLoading {
  background-color: rgb(var(--color-extra-indigo-dash3-200));
}
.button-extra-indigo.button--isLoading:hover {
  background-color: rgb(var(--color-extra-indigo-dash3-200)) !important;
}
.button-extra-indigo {
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
}
.button-extra-indigo.button--disabled {
  background-color: rgb(var(--color-extra-indigo-dash3-200)) !important;
  cursor: default;
}
.button-extra-indigo.button--disabled:hover {
  text-decoration: none;
}
.button-extra-indigo.button--disabled .SvgIcon--icon {
  cursor: default !important;
}
.button-text-extra-indigo {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Onest";
  font-weight: 700;
  color: rgb(var(--color-extra-indigo-dash3-500));
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
  background-color: transparent;
  padding: 0 !important;
  border: none !important;
  min-width: min-content !important;
}
.button-text-extra-indigo:hover {
  color: rgb(var(--color-extra-indigo-dash3-600));
  text-decoration: underline;
}
.button-text-extra-indigo.button--disabled {
  color: rgb(var(--color-gray-400));
  cursor: default;
}
.button-text-extra-indigo.button--disabled:hover {
  text-decoration: none;
}
.delete {
  color: rgb(var(--color-error-500));
  background-color: rgb(var(--color-gray-100));
}
.right-side {
  float: right;
  padding-top: 13px;
  padding-right: 14px;
}
.button-extra-violet {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  min-width: 60px;
  color: rgb(var(--color-white)) !important;
  font-family: "Onest";
  font-weight: 700;
  letter-spacing: 0.01rem;
  background-color: rgb(var(--color-extra-violet-dash3-500));
}
.button-extra-violet:hover {
  background-color: rgb(var(--color-extra-violet-dash3-600));
}
.button-extra-violet.button--isLoading {
  background-color: rgb(var(--color-extra-violet-dash3-200));
}
.button-extra-violet.button--isLoading:hover {
  background-color: rgb(var(--color-extra-violet-dash3-200)) !important;
}
.button-extra-violet {
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
}
.button-extra-violet.button--disabled {
  background-color: rgb(var(--color-extra-violet-dash3-200)) !important;
  cursor: default;
}
.button-extra-violet.button--disabled:hover {
  text-decoration: none;
}
.button-extra-violet.button--disabled .SvgIcon--icon {
  cursor: default !important;
}
.button-text-extra-violet {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Onest";
  font-weight: 700;
  color: rgb(var(--color-extra-violet-dash3-500));
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
  background-color: transparent;
  padding: 0 !important;
  border: none !important;
  min-width: min-content !important;
}
.button-text-extra-violet:hover {
  color: rgb(var(--color-extra-violet-dash3-600));
  text-decoration: underline;
}
.button-text-extra-violet.button--disabled {
  color: rgb(var(--color-gray-400));
  cursor: default;
}
.button-text-extra-violet.button--disabled:hover {
  text-decoration: none;
}
.delete {
  color: rgb(var(--color-error-500));
  background-color: rgb(var(--color-gray-100));
}
.right-side {
  float: right;
  padding-top: 13px;
  padding-right: 14px;
}
.button-extra-pink {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  min-width: 60px;
  color: rgb(var(--color-white)) !important;
  font-family: "Onest";
  font-weight: 700;
  letter-spacing: 0.01rem;
  background-color: rgb(var(--color-extra-pink-dash3-500));
}
.button-extra-pink:hover {
  background-color: rgb(var(--color-extra-pink-dash3-600));
}
.button-extra-pink.button--isLoading {
  background-color: rgb(var(--color-extra-pink-dash3-200));
}
.button-extra-pink.button--isLoading:hover {
  background-color: rgb(var(--color-extra-pink-dash3-200)) !important;
}
.button-extra-pink {
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
}
.button-extra-pink.button--disabled {
  background-color: rgb(var(--color-extra-pink-dash3-200)) !important;
  cursor: default;
}
.button-extra-pink.button--disabled:hover {
  text-decoration: none;
}
.button-extra-pink.button--disabled .SvgIcon--icon {
  cursor: default !important;
}
.button-text-extra-pink {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Onest";
  font-weight: 700;
  color: rgb(var(--color-extra-pink-dash3-500));
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
  background-color: transparent;
  padding: 0 !important;
  border: none !important;
  min-width: min-content !important;
}
.button-text-extra-pink:hover {
  color: rgb(var(--color-extra-pink-dash3-600));
  text-decoration: underline;
}
.button-text-extra-pink.button--disabled {
  color: rgb(var(--color-gray-400));
  cursor: default;
}
.button-text-extra-pink.button--disabled:hover {
  text-decoration: none;
}
.delete {
  color: rgb(var(--color-error-500));
  background-color: rgb(var(--color-gray-100));
}
.right-side {
  float: right;
  padding-top: 13px;
  padding-right: 14px;
}
.dark-mode .button-text-primary {
  color: rgb(var(--color-primary-dash3-500));
}
.dark-mode .button-text-primary:hover {
  color: rgb(var(--color-primary-dash3-600));
}
.dark-mode .button-text-secondary {
  color: rgb(var(--color-secondary-dash3-500));
}
.dark-mode .button-text-secondary:hover {
  color: rgb(var(--color-secondary-dash3-600));
}
.dark-mode .button-text-gray {
  color: rgb(var(--color-gray-dash3-100));
}
.dark-mode .button-text-gray:hover {
  color: rgb(var(--color-gray-dash3-400));
}
.dark-mode .button-text-white {
  color: rgb(var(--color-white-dash3-500));
}
.dark-mode .button-text-white:hover {
  color: rgb(var(--color-white-dash3-600));
}
.dark-mode .button-text-black {
  color: rgb(var(--color-black-dash3-500));
}
.dark-mode .button-text-black:hover {
  color: rgb(var(--color-black-dash3-600));
}
.dark-mode .button-text-error {
  color: rgb(var(--color-error-dash3-500));
}
.dark-mode .button-text-error:hover {
  color: rgb(var(--color-error-dash3-600));
}
.dark-mode .button-text-success {
  color: rgb(var(--color-success-dash3-500));
}
.dark-mode .button-text-success:hover {
  color: rgb(var(--color-success-dash3-600));
}
.dark-mode .button-text-warning {
  color: rgb(var(--color-warning-dash3-500));
}
.dark-mode .button-text-warning:hover {
  color: rgb(var(--color-warning-dash3-600));
}
.dark-mode .button-text-teal {
  color: rgb(var(--color-teal-dash3-500));
}
.dark-mode .button-text-teal:hover {
  color: rgb(var(--color-teal-dash3-600));
}
.dark-mode .button-text-extra-red {
  color: rgb(var(--color-extra-red-dash3-500));
}
.dark-mode .button-text-extra-red:hover {
  color: rgb(var(--color-extra-red-dash3-600));
}
.dark-mode .button-text-extra-orange {
  color: rgb(var(--color-extra-orange-dash3-500));
}
.dark-mode .button-text-extra-orange:hover {
  color: rgb(var(--color-extra-orange-dash3-600));
}
.dark-mode .button-text-extra-yellow {
  color: rgb(var(--color-extra-yellow-dash3-500));
}
.dark-mode .button-text-extra-yellow:hover {
  color: rgb(var(--color-extra-yellow-dash3-600));
}
.dark-mode .button-text-extra-green {
  color: rgb(var(--color-extra-green-dash3-500));
}
.dark-mode .button-text-extra-green:hover {
  color: rgb(var(--color-extra-green-dash3-600));
}
.dark-mode .button-text-extra-blue {
  color: rgb(var(--color-extra-blue-dash3-500));
}
.dark-mode .button-text-extra-blue:hover {
  color: rgb(var(--color-extra-blue-dash3-600));
}
.dark-mode .button-text-extra-indigo {
  color: rgb(var(--color-extra-indigo-dash3-500));
}
.dark-mode .button-text-extra-indigo:hover {
  color: rgb(var(--color-extra-indigo-dash3-600));
}
.dark-mode .button-text-extra-violet {
  color: rgb(var(--color-extra-violet-dash3-500));
}
.dark-mode .button-text-extra-violet:hover {
  color: rgb(var(--color-extra-violet-dash3-600));
}
.dark-mode .button-text-extra-pink {
  color: rgb(var(--color-extra-pink-dash3-500));
}
.dark-mode .button-text-extra-pink:hover {
  color: rgb(var(--color-extra-pink-dash3-600));
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.ButtonRow {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.ButtonRow--hasGap {
  gap: 1rem;
}
.ButtonRow--alignLeft {
  justify-content: flex-start;
  margin-right: auto;
}
.ButtonRow--alignLeft > *:not(.ButtonRow) {
  margin-right: 10px;
}
.ButtonRow--alignLeft > *:first-child:not(.ButtonRow) {
  margin-left: 0;
}
.ButtonRow--alignRight {
  justify-content: flex-end;
  margin-left: auto;
}
.ButtonRow--alignRight > *:not(.ButtonRow) {
  margin-left: 10px;
}
.ButtonRow--alignRight > *:last-child:not(.ButtonRow) {
  margin-right: 0;
}
.ButtonRow--alignBottom {
  align-items: flex-end;
}
.ButtonRow--alignTop {
  align-items: flex-start;
}
.ButtonRow--alignCenter {
  align-items: center;
}
.ButtonRow--justifyCenter {
  justify-content: center;
}
.ButtonRow--padded {
  padding-top: 20px;
}
.ButtonRow--isGutter {
  background: rgb(var(--color-gray-100));
  margin: 20px -20px -20px -20px !important;
  padding: 20px;
}
.ButtonRow--spacingTop {
  margin-top: 10px;
}
.ButtonRow--spacingBottom {
  margin-bottom: 10px;
}
.ButtonRow--spaceBetween {
  justify-content: space-between;
}
.dark-mode .ButtonRow--isGutter {
  background: rgba(var(--color-white), 0.05);
}.ErrorFallback__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vw;
  height: 100vh;
}
.ErrorFallback__textBlock {
  width: 50%;
  padding: 20px;
  background-color: RGB(var(--color-gray-100));
}
.ErrorFallback__titles {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ErrorFallback__titles h1 {
  font-size: 40px;
  margin: 20px 0;
}
.ErrorFallback__buttonRow {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.ErrorFallback__buttonRow button {
  margin: 0 10px;
}
.ErrorFallback__imageAttribution {
  position: absolute;
  z-index: -1;
  bottom: 20px;
  color: grey;
  font-size: 10px;
}
.ErrorFallback__imageAttribution a {
  color: grey;
  text-decoration: none;
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.LoginContainer {
  min-height: 100vh;
  min-width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: auto;
}
.LoginContainer__wrapper {
  width: 75rem;
  height: 43rem;
  border-radius: 5px;
  background: rgb(var(--color-white));
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}
.LoginContainer__wrapper::-webkit-scrollbar {
  background-color: transparent;
  width: 5px;
}
.LoginContainer__wrapper::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 5px;
  outline: 2px solid transparent;
}
@media screen and (max-width: 769px) {
  .LoginContainer__wrapper {
    width: 90%;
    min-width: 500px;
  }
}
.LoginContainer__header {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.LoginContainer__header--floating {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
}
.LoginContainer__header__logo {
  max-width: 300px;
}
@media screen and (max-width: 769px) {
  .LoginContainer__header__logo {
    display: none;
  }
}
.LoginContainer__header__search {
  max-width: 300px;
}
.LoginContainer__header__search .InputField {
  margin-bottom: 0;
}
.LoginContainer__main {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
@media screen and (max-width: 769px) {
  .LoginContainer__main {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.LoginContainer__LeftHero {
  min-height: 700px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.LoginContainer__LeftHero__MottoContainer {
  height: 100%;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
}
.LoginContainer__LeftHero__Motto {
  color: white !important;
  margin-left: 2%;
  margin-bottom: 2%;
}
.LoginContainer__LeftHero__logo {
  padding-top: 10px;
}
@media screen and (max-width: 769px) {
  .LoginContainer__LeftHero {
    display: none;
  }
}
.LoginContainer__Page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  align-items: stretch;
  justify-content: stretch;
  padding: 40px 60px;
}
@media screen and (max-width: 769px) {
  .LoginContainer__Page {
    padding: 40px 30px 30px 30px;
  }
}
.LoginContainer__Page--homepage {
  padding: 0;
  min-height: 700px;
}
@media screen and (max-width: 769px) {
  .LoginContainer__Page--homepage {
    padding: 50px 0;
  }
}
.LoginContainer__FormContainer {
  min-height: 500px;
  padding-top: 20px;
}
.LoginContainer__FormContainer__Gutter {
  align-self: flex-end;
  padding-top: 30px;
}
.terms-condiditons {
  display: flex;
  align-items: center;
}
.terms-condiditons input {
  margin-left: 0;
  margin-right: 10px;
  cursor: pointer;
}
.terms-condiditons div {
  display: flex;
  line-height: 1rem;
}
.terms-condiditons a {
  margin: 0 3px 0 3px;
}
.LoginContentWrapper .LoginContainer__Page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: center;
  align-items: stretch;
  justify-content: stretch;
  padding: 40px 60px;
  min-width: 800px;
}.SvgIcon {
  display: flex;
  justify-content: center;
}
.SvgIcon--icon {
  cursor: pointer;
}
.SvgIcon--icon--noPointer {
  cursor: default;
}.Icon {
  margin-right: 8px;
  cursor: pointer;
}
.Icon--noMargin {
  margin-right: 0;
}
.Icon--leftMargin {
  margin-left: 10px;
}
.Icon--noPointer {
  cursor: default !important;
}
.Icon--disabled {
  cursor: not-allowed !important;
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.code-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.code-input__cell {
  cursor: pointer;
  caret-color: transparent;
  text-align: center;
  width: 36px;
  height: 52px;
  margin: auto;
  font-size: 1.5rem;
  border: 1.5px solid rgb(var(--color-gray-400));
  border-radius: 5px;
}
.code-input__cell:focus {
  opacity: 0.7;
  border: 1.5px solid rgb(var(--color-primary-500));
}
.code-input__cell:nth-child(1) {
  margin-left: 0;
}
.code-input__cell:nth-child(7) {
  margin-right: 0;
}
.code-input__dash {
  content: "";
  margin: 0 7px;
  display: block;
  background: rgb(var(--color-gray-400));
  width: 10px;
  height: 2px;
}
.dark-mode .code-input__cell {
  background-color: rgba(var(--color-white), 0.05);
  color: rgb(var(--color-gray-400));
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.checkboxInput {
  display: flex;
  opacity: 1;
}
.checkboxInput__label {
  display: block;
  position: relative;
  cursor: pointer;
  height: 20px;
  width: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.checkboxInput__label--label {
  margin-left: 0.625rem;
  font-size: 0.875rem;
  color: rgb(var(--color-gray-800));
  display: flex;
  align-items: center;
}
.checkboxInput__label--disabled {
  cursor: default;
  opacity: 0.5;
}
.checkboxInput__label input {
  visibility: hidden;
  height: 20px;
  width: 20px;
  margin: 2px;
}
.checkboxInput__label .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: rgb(var(--color-white));
  border: 2px solid rgb(var(--color-gray-400));
  border-radius: 5px;
}
.checkboxInput__label .checkmark--single {
  height: 20px;
  width: 20px;
  border-width: 2.5px;
  border-radius: 15px;
}
.checkboxInput__label .checkmark--disabled {
  border-color: rgb(var(--color-gray-300));
}
.checkboxInput__label:hover input ~ .checkmark {
  background-color: rgb(var(--color-gray-100));
}
.checkboxInput__label:hover input ~ .checkmark--disabled {
  background-color: transparent;
}
.checkboxInput__label input:checked ~ .checkmark {
  background-color: rgb(var(--color-white));
}
.checkboxInput__label input:checked ~ .checkmark::after {
  display: block;
}
.checkboxInput__label .checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  bottom: 3px;
  width: 7px;
  height: 12px;
  border-bottom-right-radius: 2px;
  border: solid rgb(var(--color-primary-500));
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.checkboxInput__label .checkmark--single::after {
  content: "";
  position: absolute;
  background-color: rgb(var(--color-primary-500));
  left: 4px;
  bottom: 4px;
  height: 7px;
  width: 7px;
  border: none;
  border-radius: 15px;
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
}
.dark-mode .checkboxInput__label--label {
  color: rgb(var(--color-gray-300));
}
.dark-mode .checkboxInput__label .checkmark {
  border-color: rgb(var(--color-white));
  background-color: transparent;
}
.dark-mode .checkboxInput__label .checkmark--disabled {
  border-color: rgb(var(--color-white));
}
.dark-mode .checkboxInput__label:hover input ~ .checkmark {
  background-color: transparent;
}
.dark-mode .checkboxInput__label:hover input:checked ~ .checkmark {
  background-color: rgb(var(--color-white));
}
.dark-mode .checkboxInput__label:hover input ~ .checkmark--disabled {
  background-color: transparent;
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.LoadingContainer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.LoadingContainer--relative {
  position: relative;
  height: 150px;
}
.LoadingContainer--tiny {
  height: 16px;
  width: 16px;
}
.LoadingContainer--inline {
  display: inline-block;
  height: 1em;
  width: 1em;
  position: relative;
}
.LoadingContainer--inline .LoadingSpinner:before {
  height: 1em !important;
  width: 1em !important;
}
.LoadingSpinner {
  height: 50px;
  width: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.LoadingSpinner--tiny {
  height: 16px;
  width: 16px;
}
.LoadingSpinner--tiny:before {
  height: 16px !important;
  width: 16px !important;
  border-width: 2px !important;
}
.LoadingSpinner__Message {
  margin-top: 60px;
  overflow: visible;
  text-align: center;
  position: absolute;
  width: 200px;
  transform: translateX(-50%);
  left: 50%;
  color: rgb(var(--color-gray-600));
  font-weight: 700;
}
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
.LoadingSpinner:before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 4px solid rgb(var(--color-gray-200));
  border-top-color: rgb(var(--color-primary-300));
  animation: spinner 0.8s cubic-bezier(0.68, 0.2, 0.33, 0.87) infinite;
}
.dark-mode .LoadingSpinner__Message {
  color: rgb(var(--color-gray-300));
}
.dark-mode .LoadingSpinner:before {
  border-top-color: rgb(var(--color-primary-300));
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.LoginForm__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  min-width: 400px;
}
.LoginForm__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 10px 30px;
  width: 32.75rem;
}
@media screen and (max-width: 1000px) {
  .LoginForm__wrapper {
    padding: 10px 40px;
    width: 320px;
  }
}
@media screen and (max-width: 769px) {
  .LoginForm__wrapper {
    width: 300px;
    padding: 1.6rem;
    border-radius: 10px;
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);
  }
}
.LoginForm__heading {
  font-family: "Onest";
  color: #13294b;
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.19;
  margin: 0 auto 40px;
  text-align: center;
}
@media screen and (max-width: 769px) {
  .LoginForm__heading {
    font-size: 1.6rem;
  }
}
.LoginForm__login-options {
  max-width: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}
.LoginForm__sso {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.LoginForm__sso__button {
  margin-bottom: 20px;
  min-height: 42px;
  padding: 10px 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.7);
  font-family: "Onest";
  font-size: 15px;
  font-weight: 600;
  background-color: rgb(var(--color-white));
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}
.LoginForm__sso__button:hover {
  background-color: rgb(var(--color-gray-100));
}
.LoginForm__sso__button--icon {
  margin-right: 18px;
}
.LoginForm__form-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(var(--color-gray-500));
  font-size: 15px;
  font-family: "Lato", sans-serif;
  margin-bottom: 2rem;
}
.LoginForm__form-divider::after {
  content: "";
  display: block;
  background: rgb(var(--color-gray-500));
  width: 50%;
  height: 1px;
  margin-left: 35px;
}
.LoginForm__form-divider::before {
  content: "";
  display: block;
  background: rgb(var(--color-gray-500));
  width: 50%;
  height: 1px;
  margin-right: 35px;
}
.LoginForm__email {
  font-family: "Onest";
}
.LoginForm__email__label {
  font-weight: 700;
  font-size: 14px;
  color: #13294b;
  margin-bottom: 15px;
}
.LoginForm__email__input {
  height: 42px;
  font-size: 14px;
  box-sizing: border-box;
  border: 1.5px solid rgb(var(--color-gray-400));
  border-radius: 5px;
  padding: 0 12px;
  margin-bottom: 18px;
}
.LoginForm__email__input::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgb(var(--color-gray-500));
}
.LoginForm__email__forgotpw {
  cursor: pointer;
  text-align: center;
  margin-top: 13px;
  font-size: 13px;
  font-weight: 700;
  color: rgb(var(--color-primary-500));
}
.LoginForm__email__forgotpw:hover {
  color: rgb(var(--color-primary-700));
  text-decoration: underline;
}
.LoginForm__lockedEmail {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}
.LoginForm__lockedEmail__label {
  display: flex;
  color: rgb(var(--color-gray-800));
  font-family: "Onest";
  font-weight: 600;
  font-size: 14px;
  border: 1px solid rgb(var(--color-gray-400));
  border-radius: 24px;
  padding: 10px 15px;
  width: fit-content;
}
.LoginForm__lockedEmail__back {
  font-size: 15px;
  color: rgb(var(--color-primary-500));
  margin-right: 8px;
}
.LoginForm__lockedEmail__back:hover {
  color: rgb(var(--color-primary-700));
}
.LoginForm__mfa__message {
  font-family: "Onest";
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: rgb(var(--color-gray-800));
  line-height: 1.2rem;
  margin-bottom: 2rem;
}
.LoginForm__mfa__code {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}
.LoginForm__mfa__resend {
  cursor: pointer;
  text-align: center;
  margin-top: 13px;
  font-size: 13px;
  font-weight: 700;
  color: rgb(var(--color-primary-500));
}
.LoginForm__mfa__resend:hover {
  color: rgb(var(--color-primary-700));
  text-decoration: underline;
}
.LoginForm__mfa__checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 1.5rem;
}
.LoginForm__mfa__checkbox__text {
  padding-left: 10px;
  font-family: "Onest";
  font-size: 14px;
  color: #13294b;
}
.LoginForm__primary-button {
  min-height: 42px;
  padding: 0.8rem 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-white));
  font-family: "Onest";
  font-size: 15px;
  font-weight: 600;
  background: linear-gradient(135deg, rgb(var(--color-sky-blue-600)) 0%, #a443f0 90%);
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.LoginForm__primary-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #a443f0 0%, #0087f6 90%);
  transition: left 0.4s ease-in-out;
  border-radius: 5px;
  z-index: -1;
}
.LoginForm__primary-button:hover::before {
  left: 0;
}
.LoginForm__primary-button {
  /* Ensure content stays on top */
}
.LoginForm__primary-button > * {
  position: relative;
  z-index: 2;
}
.LoginForm__primary-button--disabled {
  background-color: rgb(var(--color-primary-200)) !important;
  cursor: default;
}
.LoginForm__message {
  margin-bottom: 2rem;
  font-family: "Onest";
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  color: rgb(var(--color-primary-600));
}
.LoginForm__forgot-password {
  margin-top: 1rem;
  text-align: center;
  font-size: 14px;
  font-family: "Onest";
}
.LoginForm__signup {
  margin-top: 1rem;
  text-align: center;
  font-size: 14px;
  font-family: "Onest";
}
.LoginForm__signup__link {
  cursor: pointer;
  font-style: normal;
  font-weight: 600;
  margin: 0 3px;
  color: rgb(var(--color-primary-500));
}
.LoginForm__signup__link:hover {
  color: rgb(var(--color-sky-blue-600));
  text-decoration: underline;
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.login-right-side {
  width: 100%;
  height: 100dvh;
  background-image: url("/assets/login_bg-CFJnMSTp.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 2rem;
  position: relative;
}
.login-right-side__headline {
  font-size: 2.3rem;
  font-weight: 700;
  color: white;
  text-align: center;
  margin: 0;
  margin-bottom: 2rem;
}
@media screen and (max-width: 769px) {
  .login-right-side {
    display: none;
  }
}
.login-right-side .content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: flex-start;
  align-items: center;
  max-width: 600px;
  height: 400px;
  width: 100%;
}
.login-right-side .headline {
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
  text-align: center;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.login-right-side .cards-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}
.login-right-side .glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 1.875rem;
  padding: 1.2rem 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  will-change: transform, opacity;
  transition: none;
}
.login-right-side .glass-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  gap: 1rem;
}
.login-right-side .glass-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: white;
  margin: 0;
  line-height: 1.3;
  flex: 1;
}
.login-right-side .glass-card__date {
  font-size: 0.875rem;
  color: rgb(var(--color-white));
  font-weight: 500;
}
.login-right-side .error-placeholder,
.login-right-side .empty-placeholder {
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  padding: 2rem;
}
.login-right-side .error-placeholder p,
.login-right-side .empty-placeholder p {
  margin: 0.5rem 0;
}
.login-right-side .error-placeholder .error-link,
.login-right-side .empty-placeholder .error-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
}
.login-right-side .error-placeholder .error-link:hover,
.login-right-side .empty-placeholder .error-link:hover {
  color: white;
}
.login-right-side .footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.NiceModalDash3 {
  position: fixed;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: 100vh;
  font-family: "Onest" !important;
}
.NiceModalDash3__item {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.3rem;
}
.NiceModalDash3__item--end {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}
.NiceModalDash3__container {
  position: relative;
  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);
  z-index: 1000;
  background: rgb(var(--color-white));
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}
.NiceModalDash3__contents {
  padding: 45px 45px 30px 45px;
  position: relative;
}
.NiceModalDash3__contents.overflow-visible {
  overflow-y: visible;
}
.NiceModalDash3__contents.overflow-scroll {
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}
.NiceModalDash3__contents.overflow-scroll:hover {
  scrollbar-color: #808080 transparent;
}
.NiceModalDash3__contents.overflow-scroll::-webkit-scrollbar {
  background-color: transparent;
  width: 7px;
}
.NiceModalDash3__contents.overflow-scroll::-webkit-scrollbar-thumb {
  background-color: #ccc;
  outline: 2px solid transparent;
  border-radius: 5px;
}
.NiceModalDash3__contents.overflow-scroll::-webkit-scrollbar-button {
  display: none;
}
.NiceModalDash3__contents.overflow-scroll {
  overflow-x: auto;
}
.NiceModalDash3__progress {
  z-index: 1001;
  position: absolute;
  display: flex;
  flex-direction: column;
  background: rgb(var(--color-white));
  opacity: 0.7;
  top: 0;
  bottom: 0;
  left: 0px;
  right: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.NiceModalDash3__progress__text {
  color: rgb(var(--color-gray-600));
  font-size: 14px;
}
.NiceModalDash3__title {
  color: rgb(var(--color-title-dash3));
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 30px;
  overflow-wrap: break-word;
}
.NiceModalDash3__label {
  font-size: 16px;
  font-weight: 600;
  color: rgb(var(--color-title-dash3));
  margin-bottom: 12px;
}
.NiceModalDash3__message {
  color: rgb(var(--color-gray-800));
  line-height: 22px;
  margin-bottom: 10px;
}
.NiceModalDash3__gutter {
  display: flex;
  justify-content: space-between;
  padding: 25px 45px 45px 45px;
  background: rgb(var(--color-white));
  border-radius: 5px;
}
.NiceModalDash3__gutter--left {
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
}
.NiceModalDash3__gutter--right {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}
.NiceModalDash3__background {
  z-index: 999;
  position: fixed;
  top: -9999px;
  left: -9999px;
  right: -9999px;
  bottom: -9999px;
  background-color: rgba(var(--color-white), 0.7);
  backdrop-filter: blur(2px);
}
/* Dark mode */
.dark-mode .NiceModalDash3__background {
  background-color: rgba(var(--color-white), 0.08);
}
.dark-mode .NiceModalDash3__container {
  background-color: rgb(var(--color-extra-midnight-dash3-900));
}
.dark-mode .NiceModalDash3__item {
  color: rgb(var(--color-gray-200));
}
.dark-mode .NiceModalDash3__title {
  color: rgb(var(--color-gray-200));
}
.dark-mode .NiceModalDash3__label {
  color: rgb(var(--color-gray-300));
}
.dark-mode .NiceModalDash3__message {
  color: rgb(var(--color-gray-400));
}
.dark-mode .NiceModalDash3__gutter {
  background-color: rgb(var(--color-extra-midnight-dash3-900));
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.main-container-dash3 {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.PageContainerDash3 {
  display: flex;
  min-height: 0;
  height: 100%;
  background: rgb(var(--color-white));
}
.MainContainerDash3 {
  overflow: auto;
  width: -moz-available; /* WebKit-based browsers will ignore this. */
  width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
}
.MainContainerDash3__content {
  display: flex;
  flex-direction: column;
  min-width: 1024px;
}
.MainContainerDash3__content .PageHeader-dash3 {
  min-width: 960px;
}
.ContentContainerDash3 {
  min-width: 960px;
  border-radius: 10px;
  border: 1px solid rgb(var(--color-gray-300));
  margin: 0 2rem 1rem;
}
@media (max-width: 1537px) {
  .ContentContainerDash3 {
    margin: 0 1rem 1rem;
  }
}
.ContentContainerDash3__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px;
  height: 60px;
}
.ContentContainerDash3__header__title {
  text-align: left;
  color: rgb(var(--color-soft-purple-600));
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  margin-right: 20px;
}
.ContentContainerDash3__header__text {
  text-align: left;
  color: rgb(var(--color-extra-navy-dash3-900));
  font-weight: 600;
  font-size: 15px;
  line-height: 18px;
}
.ContentContainerDash3__header__section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ContentContainerDash3__body {
  border-top: 1px solid rgb(var(--color-gray-300));
}
.ContentContainerDash3__body--noBorder {
  border-top: none;
}
.dark-mode .ContentContainerDash3 {
  background: transparent;
  border: 1px solid rgba(var(--color-gray-600), 0.7);
}
.dark-mode .ContentContainerDash3__header__title {
  color: rgb(var(--color-gray-300));
}
.dark-mode .ContentContainerDash3__header__text {
  color: rgb(var(--color-gray-300));
}
.dark-mode .ContentContainerDash3__header__icon {
  color: rgb(var(--color-gray-200));
}
.dark-mode .ContentContainerDash3__body {
  border-top: 1px solid rgba(var(--color-gray-600), 0.7);
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
.NiceDropdownDash3__field {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version */
}
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.NiceDropdownDash3 {
  font-family: "Onest";
  position: relative;
  max-width: 600px;
}
.NiceDropdownDash3--withMargin {
  margin-bottom: 1.3rem;
}
.NiceDropdownDash3__inputlabel {
  font-size: 16px;
  line-height: 18px;
  font-weight: 600;
  color: rgb(var(--color-title-dash3));
  margin-bottom: 0.5rem;
  display: flex;
}
.NiceDropdownDash3__field {
  min-width: 100px;
  min-height: 36px;
  transition: 0.2s all;
  border: 1px solid rgb(var(--color-gray-400));
  display: flex;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  color: rgb(var(--color-secondary-900));
  background: rgb(var(--color-white));
  padding: 7px 13px;
  text-align: left;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  font-size: 15px;
  line-height: 20px;
}
.NiceDropdownDash3__field--warning {
  border-color: rgb(var(--color-warning-600));
  color: rgb(var(--color-warning-600));
}
.NiceDropdownDash3__field--error {
  border-color: rgb(var(--color-error-600));
  color: rgb(var(--color-error-600));
}
.NiceDropdownDash3__field--valid {
  border-color: rgb(var(--color-success-600));
  color: rgb(var(--color-success-600));
}
.NiceDropdownDash3__field__children {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.NiceDropdownDash3__field__children--trimmed {
  display: inline;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.NiceDropdownDash3__field__children--trimmed:hover {
  overflow: hidden;
}
.NiceDropdownDash3__field__caret {
  font-size: 10px;
  padding-left: 10px;
  margin-left: auto;
}
.NiceDropdownDash3__field__caret--changable {
  transition: 0.2s all;
}
.NiceDropdownDash3__field__caret--changable--less-padding {
  padding-left: 6.48px;
}
.NiceDropdownDash3__field__textWithMargin {
  margin-left: 10px;
}
.NiceDropdownDash3__field__image {
  width: 30px;
  height: 30px;
  margin-top: -2px;
  margin-bottom: -2px;
}
.NiceDropdownDash3__field__image > img {
  height: 100%;
  width: 100%;
}
.NiceDropdownDash3__field__image--loading {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 3px;
}
.NiceDropdownDash3__field__image--error {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  color: rgb(var(--color-gray-500));
}
.NiceDropdownDash3__field--isOpen {
  border-color: rgb(var(--color-primary-300));
}
.NiceDropdownDash3__field--isOpen .NiceDropdownDash3__field__caret {
  opacity: 0.5;
}
.NiceDropdownDash3__field--unstyled {
  height: unset;
  min-width: unset;
  border: unset;
  color: unset;
  background: unset;
  padding: unset;
  border-radius: unset;
}
.NiceDropdownDash3__field--unstyled.NiceDropdownDash3__field--disabled {
  color: unset !important;
  background: unset !important;
  text-decoration: unset !important;
}
.NiceDropdownDash3__field--disabled {
  cursor: not-allowed;
  color: rgba(var(--color-secondary-900), 0.5);
  background: rgb(var(--color-gray-100));
}
.NiceDropdownDash3__field--edited {
  background: rgb(var(--color-secondary-100));
}
.NiceDropdownDash3__field--nopad {
  padding: 0;
  border: 0;
}
.NiceDropdownDash3__field .fa-angle-down {
  margin-left: 15px;
}
.NiceDropdownDash3__field__input {
  border: 0;
}
.NiceDropdownDash3__field__boolOption {
  transition: 0.2s all;
  height: 36px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid rgba(var(--color-gray-600), 0.5);
  border-right: none;
}
.NiceDropdownDash3__field__boolOption:first-of-type {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.NiceDropdownDash3__field__boolOption:last-of-type {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right: 1px solid rgba(var(--color-gray-600), 0.5);
}
.NiceDropdownDash3__field__boolOption:hover {
  color: rgb(var(--color-secondary-900));
  background: rgba(var(--color-secondary-500), 0.2);
}
.NiceDropdownDash3__field__boolOption--active {
  background: rgb(var(--color-secondary-500)) !important;
  color: rgb(var(--color-white)) !important;
}
.NiceDropdownDash3__field__loading {
  margin-right: 10px;
  font-size: 15px;
  color: rgb(var(--color-gray-600));
}
.NiceDropdownDash3__field__loading--icon {
  color: rgb(var(--color-gray-600));
}
.NiceDropdownDash3__dropdown {
  position: absolute;
  overflow: visible;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 1100;
  top: calc(100% + 15px);
  min-width: fit-content;
  border-radius: 5px;
}
.NiceDropdownDash3__dropdown--popup {
  top: auto;
  bottom: 100%;
}
.NiceDropdownDash3__dropdown--alignLeft {
  left: unset;
  right: 0;
}
.NiceDropdownDash3__dropdown--alignLeft .NiceDropdownDash3__dropdown__content::after {
  top: -8px;
  right: 22px;
  left: unset;
}
.NiceDropdownDash3__dropdown__wrapper {
  border-radius: 5px;
  width: fit-content;
  max-width: calc(100vw - 30px);
}
.NiceDropdownDash3__dropdown__content {
  background: rgb(var(--color-white));
  color: rgb(var(--color-extra-navy-dash3-900));
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
  border-radius: 5px;
  position: relative;
  z-index: 2;
}
.NiceDropdownDash3__dropdown__content__groupList {
  padding: 0.5rem 1rem;
  position: relative;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}
.NiceDropdownDash3__dropdown__content__groupList:hover {
  scrollbar-color: #808080 transparent;
}
.NiceDropdownDash3__dropdown__content__groupList::-webkit-scrollbar {
  background-color: transparent;
  width: 7px;
}
.NiceDropdownDash3__dropdown__content__groupList::-webkit-scrollbar-thumb {
  background-color: #ccc;
  outline: 2px solid transparent;
  border-radius: 5px;
}
.NiceDropdownDash3__dropdown__content__groupList::-webkit-scrollbar-button {
  display: none;
}
.NiceDropdownDash3__dropdown__search {
  position: relative;
  z-index: 1;
  padding: 20px 15px 10px 15px;
  margin-bottom: 0px;
}
.NiceDropdownDash3__dropdown__search .InputField {
  margin-bottom: 0 !important;
}
.NiceDropdownDash3__dropdown__search .InputField > input {
  border-color: rgb(var(--color-gray-400));
}
.NiceDropdownDash3__dropdown__placer {
  height: 15px;
  background-color: transparent;
}
.NiceDropdownDash3__dropdown__noResults {
  padding: 15px 0 15px 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.NiceDropdownDash3__dropdown__noResults__action {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: rgb(var(--color-primary-400));
  font-weight: 600;
  font-size: 14px;
  text-decoration: underline;
}
.NiceDropdownDash3__dropdown__noResults__action:hover {
  color: rgb(var(--color-primary-500));
}
.NiceDropdownDash3__group {
  z-index: 3;
  position: relative;
  padding: 0.5rem 0;
}
.NiceDropdownDash3__group__item {
  margin-bottom: 15px;
}
.NiceDropdownDash3__group__title {
  display: flex;
  font-weight: 500;
  font-size: 14px;
  padding: 15px 10px 5px 10px;
  color: rgb(var(--color-gray-700));
  white-space: nowrap;
}
.NiceDropdownDash3__group--withDivider {
  border-top: 1.5px solid rgb(var(--color-gray-300));
}
.NiceDropdownDash3__header {
  padding: 5px 15px 15px 15px;
}
.NiceDropdownDash3__item {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin: 5px;
  padding: 5px 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5em;
  position: relative;
  color: rgb(var(--color-title-dash3));
  border-radius: 5px;
}
.NiceDropdownDash3__item:hover {
  background: rgba(var(--color-soft-purple-600), 0.1);
  color: rgba(var(--color-soft-purple-600), 1);
}
.NiceDropdownDash3__item--active {
  background: rgba(var(--color-extra-violet-dash3-800), 0.2);
  color: rgb(var(--color-primary-600));
}
.NiceDropdownDash3__item--error:hover {
  background: rgba(var(--color-error-500), 0.1);
  color: rgba(var(--color-error-500));
}
.NiceDropdownDash3__item--disabled {
  cursor: not-allowed;
  color: rgb(var(--color-gray-500));
  background-color: transparent;
}
.NiceDropdownDash3__item--disabled:hover {
  background: rgb(var(--color-gray-200));
  color: rgb(var(--color-gray-500));
}
.NiceDropdownDash3__item__image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: -2px;
  margin-bottom: -2px;
}
.NiceDropdownDash3__item__image > img {
  height: 100%;
  width: 100%;
}
.NiceDropdownDash3__item__image--container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.NiceDropdownDash3__item__image--loading {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 3px;
}
.NiceDropdownDash3__item__image--error {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  color: rgb(var(--color-gray-500));
}
.NiceDropdownDash3__item__tag {
  display: flex;
  flex-grow: 0;
}
.NiceDropdownDash3__item__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 20px;
}
.NiceDropdownDash3__item__text--hasImage {
  margin-left: 10px;
}
.NiceDropdownDash3__item__text--disabled {
  font-weight: 500;
  color: rgb(var(--color-gray-600));
}
.NiceDropdownDash3__item__subtext {
  font-size: 15px;
  font-weight: 300;
  color: rgb(var(--color-gray-600));
}
.NiceDropdownDash3__checkbox {
  display: flex;
}
.NiceDropdownDash3__checkbox__text {
  padding-left: 10px;
  font-size: 14px;
  line-height: 1.1rem;
  padding-top: 2px;
  color: #13294b;
}
.NiceDropdownDash3__footer {
  font-size: 14px;
  padding: 1rem 0;
  margin: 0 1rem;
  border-top: 1px solid rgb(var(--color-gray-300));
}
.NiceDropdownDash3__footer__container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: rgb(var(--color-soft-purple-600));
  cursor: pointer;
}
.NiceDropdownDash3__footer__container:hover .NiceDropdownDash3__footer__text {
  color: rgb(var(--color-primary-dash3-500));
}
.NiceDropdownDash3__footer__container:hover .NiceDropdownDash3__footer__icon {
  color: rgb(var(--color-primary-dash3-500));
}
.NiceDropdownDash3__footer__icon {
  width: 30px;
  font-size: 18px;
  color: rgb(var(--color-soft-purple-600));
  margin-right: 5px;
}
.NiceDropdownDash3__footer__text {
  font-weight: 600;
  font-size: 14px;
}
.NiceDropdownDash3__validationMessage {
  position: absolute;
  bottom: -3px;
  left: 2px;
  font-size: 12px;
  transform: translateY(100%);
}
.NiceDropdownDash3__validationMessage--warning {
  color: rgb(var(--color-warning-600));
}
.NiceDropdownDash3__validationMessage--error {
  color: rgb(var(--color-error-600));
}
.NiceDropdownDash3__validationMessage--valid {
  color: rgb(var(--color-success-600));
}
.NiceDropdownDash3__validationMessage--disabled {
  color: rgb(var(--color-gray-500));
  cursor: not-allowed;
}
.NiceDropdownDash3__validationMessage__number {
  display: flex;
  justify-content: flex-end;
}
.NiceDropdownDash3.small-dropdown {
  width: 200px;
  padding: 0 10px 0 0;
}
.dark-mode .NiceDropdownDash3__inputlabel {
  color: rgb(var(--color-gray-300));
}
.dark-mode .NiceDropdownDash3__field {
  background-color: rgba(var(--color-white), 0.05);
  color: rgb(var(--color-gray-300));
}
.dark-mode .NiceDropdownDash3__field--isOpen {
  border-color: rgb(var(--color-primary-500));
}
.dark-mode .NiceDropdownDash3__field--unstyled {
  background-color: transparent;
}
.dark-mode .NiceDropdownDash3__field--disabled {
  background-color: rgba(var(--color-gray-500), 0.5);
  border: solid 1px rgba(var(--color-gray-500), 0.3);
}
.dark-mode .NiceDropdownDash3__field--error {
  border-color: rgb(var(--color-error-500));
}
.dark-mode .NiceDropdownDash3__field__loading {
  color: rgb(var(--color-gray-500));
}
.dark-mode .NiceDropdownDash3__field__loading--icon {
  color: rgb(var(--color-gray-500));
}
.dark-mode .NiceDropdownDash3__dropdown__wrapper {
  background-color: rgb(var(--color-extra-midnight-dash3-900));
}
.dark-mode .NiceDropdownDash3__dropdown__content {
  background-color: rgba(var(--color-white), 0.05);
  border: solid 0.1px rgba(var(--color-gray-700), 0.5);
  color: rgb(var(--color-gray-300));
}
.dark-mode .NiceDropdownDash3__checkbox input[type=checkbox] {
  background: transparent;
  color: white;
}
.dark-mode .NiceDropdownDash3__checkbox__text {
  color: rgb(var(--color-gray-300));
}
.dark-mode .NiceDropdownDash3__group__title {
  color: rgb(var(--color-extra-indigo-dash3-200));
}
.dark-mode .NiceDropdownDash3__group--withDivider {
  border-top: 1.5px solid rgba(var(--color-gray-700), 0.5);
}
.dark-mode .NiceDropdownDash3__item {
  color: rgb(var(--color-gray-200));
}
.dark-mode .NiceDropdownDash3__item--disabled {
  color: rgb(var(--color-gray-600));
}
.dark-mode .NiceDropdownDash3__item__image--error {
  background: rgba(255, 255, 255, 0.1);
  color: rgb(var(--color-gray-400));
}
.dark-mode .NiceDropdownDash3__item__text--disabled {
  color: rgb(var(--color-gray-500));
}
.dark-mode .NiceDropdownDash3__item__subtext {
  color: rgb(var(--color-gray-400));
}
.dark-mode .NiceDropdownDash3__item:hover {
  background-color: rgba(var(--color-white), 0.05);
  color: rgb(var(--color-extra-indigo-dash3-200));
}
.dark-mode .NiceDropdownDash3__footer {
  border-top: 1px solid rgb(var(--color-gray-700));
}
.dark-mode .NiceDropdownDash3__footer__text {
  color: rgb(var(--color-white));
}
.dark-mode .NiceDropdownDash3__footer__icon {
  color: rgb(var(--color-white));
}
.dark-mode .NiceDropdownDash3__footer:hover .NiceDropdownDash3__footer__text {
  color: rgb(var(--color-extra-violet-dash3-900));
}
.dark-mode .NiceDropdownDash3__footer:hover .NiceDropdownDash3__footer__icon {
  color: rgb(var(--color-extra-violet-dash3-900));
}
.dark-mode .NiceDropdownDash3__validationMessage--error {
  color: rgb(var(--color-error-400));
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
.InputField__instructions {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version */
}
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
::placeholder {
  color: rgb(var(--color-gray-500));
  transition: 0.2s color;
  font-size: 15px;
  font-family: "Onest";
  font-weight: 500;
}
.InputField {
  position: relative;
  margin-bottom: 1.3rem;
}
.InputField--noMargin {
  margin: 0;
}
.InputField textarea {
  resize: none;
  height: 100px;
}
.InputField__label {
  display: block;
  margin-bottom: 5px;
  padding-left: 0 !important;
  color: rgb(var(--color-title-dash3));
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-family: "Onest";
}
.InputField__label__required {
  color: rgb(var(--color-primary-500));
  font-weight: 700;
  margin-left: 5px;
}
.InputField__wrapper {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid rgb(var(--color-gray-400));
  border-radius: 5px;
  transition: 0.2s all;
}
.InputField__wrapper:focus-within {
  background-color: rgb(var(--color-white));
  border-color: rgb(var(--color-primary-300));
}
.InputField__wrapper--warning {
  border-color: rgb(var(--color-warning-600));
}
.InputField__wrapper--warning:focus-within {
  background-color: rgb(var(--color-warning-100));
  border-color: rgb(var(--color-warning-600));
}
.InputField__wrapper--error {
  border-color: rgb(var(--color-error-600));
}
.InputField__wrapper--error:focus-within {
  background-color: rgb(var(--color-error-100));
  border-color: rgb(var(--color-error-600));
}
.InputField__wrapper--valid {
  border-color: rgb(var(--color-success-600));
}
.InputField__wrapper--valid:focus-within {
  background-color: rgb(var(--color-success-100));
  border-color: rgb(var(--color-success-600));
}
.InputField__wrapper--disabled {
  cursor: not-allowed;
  background-color: rgb(var(--color-gray-100));
  border-color: rgb(var(--color-gray-300));
}
.InputField__wrapper--noBorder {
  border: none;
}
.InputField__input {
  margin-top: -1px;
  min-width: 0;
  width: 100%;
  line-height: 20px;
  font-size: 15px;
  padding: 7px 13px;
  transition: 0.2s all;
  caret-color: rgb(var(--color-primary-500));
  color: rgb(var(--color-secondary-900));
  border: none;
  min-height: 37px;
  font-family: "Onest";
  background: transparent;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}
.InputField__input:hover {
  scrollbar-color: #808080 transparent;
}
.InputField__input::-webkit-scrollbar {
  background-color: transparent;
  width: 7px;
}
.InputField__input::-webkit-scrollbar-thumb {
  background-color: #ccc;
  outline: 2px solid transparent;
  border-radius: 5px;
}
.InputField__input::-webkit-scrollbar-button {
  display: none;
}
.InputField__input::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgb(var(--color-gray-500));
}
.InputField__input:focus {
  outline: none;
}
.InputField__input--loading {
  padding-left: 35px;
}
.InputField__input--warning {
  color: rgb(var(--color-warning-500));
}
.InputField__input--warning:focus::placeholder {
  color: rgb(var(--color-warning-200));
}
.InputField__input--error {
  color: rgb(var(--color-error-600));
}
.InputField__input--error:focus::placeholder {
  color: rgb(var(--color-error-200));
}
.InputField__input--valid {
  color: rgb(var(--color-success-600));
}
.InputField__input--visualOnly {
  font-weight: 500;
  color: rgb(var(--color-gray-700));
}
.InputField__input--disabled {
  cursor: not-allowed;
  color: rgb(var(--color-gray-500));
}
.InputField__input--noBorder {
  padding: 0;
}
.InputField .LoadingContainer {
  height: 100%;
  padding-left: 25px;
}
.InputField__infoContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.2rem;
  padding-right: 0.5rem;
  flex-shrink: 0;
}
.InputField__infoContainer--error {
  color: rgb(var(--color-error-600));
}
.InputField__infoContainer--valid {
  color: rgb(var(--color-success-600));
}
.InputField__infoContainer--warning {
  color: rgb(var(--color-warning-600));
}
.InputField__infoContainer--disabled {
  color: rgb(var(--color-gray-500));
  cursor: not-allowed;
}
.InputField__searchIcon {
  color: rgb(var(--color-title-dash3));
}
.InputField__clearTextButton {
  cursor: pointer;
  font-size: 15px;
  color: rgb(var(--color-title-dash3));
}
.InputField__clearTextButton:hover {
  color: rgb(var(--color-primary-500));
}
.InputField__validationIcon {
  display: inline-block;
  color: inherit;
  font-size: 12px;
}
.InputField__instructions {
  display: inline-block;
  font-size: 10pt;
  color: inherit;
}
.InputField__validationMessage {
  position: absolute;
  font-size: 12px;
  margin-top: 2px;
  left: 2px;
}
.InputField__validationMessage--warning {
  color: rgb(var(--color-warning-600));
}
.InputField__validationMessage--error {
  color: rgb(var(--color-error-600));
}
.InputField__validationMessage--valid {
  color: rgb(var(--color-success-600));
}
.InputField__validationMessage--disabled {
  color: rgb(var(--color-gray-500));
  cursor: not-allowed;
}
.InputField.bottom-margin {
  margin-bottom: 25px;
}
.ColorInputField {
  position: relative;
}
.ColorInputField__inlineColorBox {
  position: absolute;
  right: 8px;
  bottom: 8px;
  top: 8px;
  width: 22px;
  height: 22px;
  border-radius: 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.ColorInputField__inlineColorBox--hasLabel {
  top: 24px;
}
.ColorInputField__popup {
  position: absolute;
  z-index: 1000;
  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.3), 0 15px 30px 0 rgba(0, 0, 0, 0.11);
}
.ColorInputField__popup .chrome-picker {
  box-shadow: none !important;
}
.ColorInputField__popup .chrome-picker span {
  font-family: "Lato", sans-serif;
}
.FileInputField__inputWrapper {
  position: relative;
  cursor: pointer;
}
.FileInputField:hover .FileInputField__button {
  background-color: rgb(var(--color-primary-600));
}
.FileInputField:active .FileInputField__button {
  background-color: rgb(var(--color-primary-700));
}
.FileInputField__button {
  z-index: 2;
  transition: 0.2s all;
  position: absolute;
  right: 8px;
  bottom: 7px;
  top: 7px;
  align-items: center;
  display: flex;
  padding: 0 6px;
  border-radius: 3px;
  color: rgb(var(--color-white));
  background: rgb(var(--color-primary-500));
  font-size: 12px;
  cursor: pointer;
}
.FileInputField__button--valid {
  background-color: rgb(var(--color-success-500));
}
.FileInputField__button--hasLabel {
  top: 32px;
}
.FileInputField input[type=file] {
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  width: 100%;
  cursor: pointer;
}
.dark-mode .InputField__label {
  color: rgb(var(--color-gray-300));
}
.dark-mode .InputField__label__required {
  color: rgb(var(--color-gray-300));
}
.dark-mode .InputField__wrapper {
  background-color: rgba(var(--color-white), 0.05);
  border-color: rgb(var(--color-gray-400));
}
.dark-mode .InputField__wrapper:focus-within {
  border-color: rgb(var(--color-primary-500));
}
.dark-mode .InputField__wrapper--disabled {
  background-color: rgba(var(--color-white), 0.1);
  border-color: rgb(var(--color-gray-700));
}
.dark-mode .InputField__wrapper--error {
  border-color: rgb(var(--color-error-dash3-500)) !important;
}
.dark-mode .InputField__wrapper--noBorder {
  border: none;
  background-color: transparent;
}
.dark-mode .InputField__input {
  color: rgb(var(--color-gray-400));
}
.dark-mode .InputField__input--disabled {
  color: rgb(var(--color-gray-600));
}
.dark-mode .InputField__searchIcon {
  color: rgb(var(--color-gray-400));
}
.dark-mode .InputField__clearTextButton {
  color: rgb(var(--color-gray-400));
}
.dark-mode .InputField__clearTextButton:hover {
  color: rgb(var(--color-primary-500));
}
.dark-mode .InputField__validationMessage--error {
  color: rgb(var(--color-error-dash3-400));
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.CopyToClipboardButton {
  position: absolute;
  bottom: 0;
  top: 0;
  right: 0;
  cursor: pointer;
  width: 38px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: visible;
}
.CopyToClipboardButton:hover {
  color: rgb(var(--color-gray-600));
}
.CopyToClipboardButton--success {
  animation: copyToClipboardSuccess 0.5s;
}
@keyframes copyToClipboardSuccess {
  0% {
    color: rgb(var(--color-success-800));
  }
  100% {
    color: rgb(var(--color-gray-600));
  }
}
@keyframes copyToClipboardSuccessGhost {
  0% {
    transform: translateY(-50%) translateX(-50%);
    opacity: 1;
  }
  100% {
    transform: translateY(-150%) translateX(-50%) scale(1.5);
    opacity: 0;
  }
}
.CopyToClipboardButton__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.CopyToClipboardButton__iconGhost {
  transition: 0.1s all;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.CopyToClipboardButton__iconGhost--success {
  animation: copyToClipboardSuccessGhost 0.5s;
}
.dark-mode .CopyToClipboardButton {
  color: rgb(var(--color-gray-200));
}
.dark-mode .CopyToClipboardButton:hover {
  color: rgb(var(--color-gray-400));
}
@keyframes copyToClipboardSuccess {
  0% {
    color: rgb(var(--color-success-800));
  }
  100% {
    color: rgb(var(--color-gray-200));
  }
}.logoDash3--left-edge {
  padding-left: 0;
}
.logoDash3--left-edge img {
  padding-left: 0;
}
.logoDash3__img {
  margin-top: 0.3rem;
  height: 3.5rem;
}
.logoDash3__img--padded {
  padding: 16px 0 15px 0;
}
.logoDash3__img--fluid {
  height: auto;
  min-width: 150px;
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.NiceModal {
  position: fixed;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: 100vh;
  font-family: "Onest" !important;
}
.NiceModal__item {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.3rem;
}
.NiceModal__item--end {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}
.NiceModal__container {
  position: relative;
  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);
  z-index: 1000;
  background: rgb(var(--color-white));
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}
.NiceModal__contents {
  padding: 45px 45px 30px 45px;
  position: relative;
}
.NiceModal__contents.overflow-visible {
  overflow-y: visible;
}
.NiceModal__contents.overflow-scroll {
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}
.NiceModal__contents.overflow-scroll:hover {
  scrollbar-color: #808080 transparent;
}
.NiceModal__contents.overflow-scroll::-webkit-scrollbar {
  background-color: transparent;
  width: 7px;
}
.NiceModal__contents.overflow-scroll::-webkit-scrollbar-thumb {
  background-color: #ccc;
  outline: 2px solid transparent;
  border-radius: 5px;
}
.NiceModal__contents.overflow-scroll::-webkit-scrollbar-button {
  display: none;
}
.NiceModal__contents.overflow-scroll {
  overflow-x: auto;
}
.NiceModal__progress {
  z-index: 1001;
  position: absolute;
  display: flex;
  flex-direction: column;
  background: rgb(var(--color-white));
  opacity: 0.7;
  top: 0;
  bottom: 0;
  left: 0px;
  right: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.NiceModal__progress__text {
  color: rgb(var(--color-gray-600));
  font-size: 14px;
}
.NiceModal__title {
  color: rgb(var(--color-title-dash3));
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 30px;
}
.NiceModal__label {
  font-size: 16px;
  font-weight: 600;
  color: rgb(var(--color-title-dash3));
  margin-bottom: 12px;
}
.NiceModal__message {
  color: rgb(var(--color-gray-800));
  line-height: 22px;
  margin-bottom: 10px;
}
.NiceModal__gutter {
  display: flex;
  justify-content: space-between;
  padding: 25px 45px 45px 45px;
  background: rgb(var(--color-white));
  border-radius: 5px;
}
.NiceModal__gutter--left {
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
}
.NiceModal__gutter--right {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}
.NiceModal__background {
  z-index: 999;
  position: fixed;
  top: -9999px;
  left: -9999px;
  right: -9999px;
  bottom: -9999px;
  background-color: rgba(var(--color-white), 0.7);
  backdrop-filter: blur(2px);
}
/* Dark mode */
.dark-mode .NiceModal__background {
  background-color: rgba(var(--color-white), 0.08);
}
.dark-mode .NiceModal__container {
  background-color: rgb(var(--color-extra-midnight-dash3-900));
}
.dark-mode .NiceModal__item {
  color: rgb(var(--color-gray-200));
}
.dark-mode .NiceModal__title {
  color: rgb(var(--color-gray-200));
}
.dark-mode .NiceModal__label {
  color: rgb(var(--color-gray-300));
}
.dark-mode .NiceModal__message {
  color: rgb(var(--color-gray-400));
}
.dark-mode .NiceModal__gutter {
  background-color: rgb(var(--color-extra-midnight-dash3-900));
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.InlineAlert {
  padding: 15px;
  border-radius: 5px;
  position: relative;
  margin-bottom: 1.5rem;
  background: rgb(var(--color-gray-200));
  color: rgb(var(--color-gray-700));
}
.InlineAlert--info {
  background: rgba(var(--color-soft-purple-600), 0.1);
  color: rgba(var(--color-soft-purple-600), 0.8);
}
.InlineAlert--success {
  background: rgb(var(--color-success-100));
  color: rgb(var(--color-success-500));
}
.InlineAlert--warning {
  background: rgb(var(--color-warning-100));
  color: rgb(var(--color-warning-500));
}
.InlineAlert--error {
  background: rgb(var(--color-error-100));
  color: rgb(var(--color-error-500));
}
.InlineAlert--hidden {
  display: none;
}
.InlineAlert--noMargin {
  margin-bottom: 0;
}
.InlineAlert__title {
  margin-bottom: 10px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
}
.InlineAlert__title--info {
  color: rgb(var(--color-extra-indigo-dash3-700));
}
.InlineAlert__title--success {
  color: rgb(var(--color-success-600));
}
.InlineAlert__title--warning {
  color: rgb(var(--color-warning-400));
}
.InlineAlert__title--error {
  color: rgb(var(--color-error-400));
}
.InlineAlert__subtitle {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
  color: rgb(var(--color-gray-800));
}
.InlineAlert__subtitle--info {
  color: rgb(var(--color-extra-indigo-dash3-700));
}
.InlineAlert__subtitle--success {
  color: rgb(var(--color-success-600));
}
.InlineAlert__subtitle--warning {
  color: rgb(var(--color-warning-600));
}
.InlineAlert__subtitle--error {
  color: rgb(var(--color-error-500));
}
.InlineAlert__text {
  line-height: 1.35em;
}
.InlineAlert__text--info {
  color: rgb(var(--color-extra-indigo-dash3-600));
}
.InlineAlert__text--success {
  color: rgb(var(--color-success-600));
}
.InlineAlert__text--warning {
  color: rgb(var(--color-warning-600));
}
.InlineAlert__text--error {
  color: rgb(var(--color-error-500));
}
.InlineAlert__dismissButton {
  cursor: pointer;
  padding: 5px;
  position: absolute;
  top: 5px;
  right: 5px;
}
.InlineAlert .code {
  margin: 0 -16px;
}
.InlineAlert .code .code__block {
  border-radius: 0;
  padding-left: 16px;
  padding-right: 16px;
}
.dark-mode .InlineAlert {
  background-color: rgba(var(--color-white), 0.1);
  color: rgb(var(--color-gray-300));
}
.dark-mode .InlineAlert--info {
  color: rgb(var(--color-extra-indigo-dash3-300));
}
.dark-mode .InlineAlert--success {
  color: rgb(var(--color-success-300));
}
.dark-mode .InlineAlert--warning {
  color: rgb(var(--color-warning-300));
}
.dark-mode .InlineAlert--error {
  color: rgb(var(--color-error-300));
}
.dark-mode .InlineAlert__title {
  color: rgb(var(--color-gray-300));
}
.dark-mode .InlineAlert__title--info {
  color: rgb(var(--color-extra-indigo-dash3-400));
}
.dark-mode .InlineAlert__title--success {
  color: rgb(var(--color-success-400));
}
.dark-mode .InlineAlert__title--warning {
  color: rgb(var(--color-warning-300));
}
.dark-mode .InlineAlert__title--error {
  color: rgb(var(--color-error-300));
}
.dark-mode .InlineAlert__subtitle {
  color: rgb(var(--color-gray-300));
}
.dark-mode .InlineAlert__subtitle--info {
  color: rgb(var(--color-extra-indigo-dash3-300));
}
.dark-mode .InlineAlert__subtitle--success {
  color: rgb(var(--color-success-300));
}
.dark-mode .InlineAlert__subtitle--warning {
  color: rgb(var(--color-warning-300));
}
.dark-mode .InlineAlert__subtitle--error {
  color: rgb(var(--color-error-300));
}
.dark-mode .InlineAlert__text {
  color: rgb(var(--color-gray-300));
}
.dark-mode .InlineAlert__text--info {
  color: rgb(var(--color-extra-indigo-dash3-200));
}
.dark-mode .InlineAlert__text--success {
  color: rgb(var(--color-success-200));
}
.dark-mode .InlineAlert__text--warning {
  color: rgb(var(--color-warning-300));
}
.dark-mode .InlineAlert__text--error {
  color: rgb(var(--color-error-300));
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.ConfirmDeleteModal__message {
  color: rgb(var(--color-gray-800));
  line-height: 18px;
  margin-bottom: 10px;
}
.ConfirmDeleteModal__message__wrapper {
  margin-bottom: 1.5rem;
}
.dark-mode .ConfirmDeleteModal__message {
  color: rgb(var(--color-gray-400));
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
.ToggleButton__label, .ToggleButton__slider {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version */
}
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.ToggleButton {
  display: flex;
  align-items: center;
  max-width: 350px;
}
.ToggleButton--loading {
  pointer-events: none;
}
.ToggleButton--disabled {
  opacity: 0.5;
}
.ToggleButton__label {
  padding-left: 0;
  font-weight: 700;
  font-size: 15px;
  color: rgb(var(--color-extra-navy-dash3-900));
}
.ToggleButton__sliderContainer {
  display: inline-block;
  box-sizing: border-box;
  width: 39px;
  height: 22px;
  border-radius: 30px;
  position: relative;
  overflow: hidden;
  background: transparent;
  border: 1px solid rgb(var(--color-extra-violet-dash3-900));
  transition: 0.2s all;
  cursor: pointer;
  margin-left: 10px;
}
.ToggleButton__sliderContainer--noMargin {
  margin-left: 0;
}
.ToggleButton__sliderContainer--active {
  background-position-x: right;
  background: rgb(var(--color-extra-violet-dash3-900));
}
.ToggleButton__sliderContainer--loading {
  position: relative;
  overflow: hidden;
}
.ToggleButton__sliderContainer--loading:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) 10px, rgba(255, 255, 255, 0.3) 10px, rgba(255, 255, 255, 0.3) 20px);
  background-size: 800%;
  animation: buttonIsLoading 30s infinite;
  animation-timing-function: linear;
}
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
.ToggleButton__sliderContainer--disabled {
  cursor: not-allowed;
}
.ToggleButton__slider {
  border-radius: 20px;
  position: absolute;
  top: 3px;
  bottom: 3px;
  background: rgb(var(--color-extra-violet-dash3-900));
  transition: 0.2s all;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid transparent;
}
.ToggleButton__slider--right {
  left: 50%;
  right: 3px;
  background: rgb(var(--color-white));
}
.ToggleButton__slider--left {
  left: 3px;
  right: 50%;
}
.dark-mode .ToggleButton__label {
  color: rgb(var(--color-gray-300));
}
.dark-mode .ToggleButton__sliderContainer {
  border: 1px solid rgb(var(--color-extra-lilac-dash3-800));
}
.dark-mode .ToggleButton__sliderContainer--active {
  background-color: rgb(var(--color-extra-violet-dash3-900));
}
.dark-mode .ToggleButton__slider {
  background: rgb(var(--color-extra-lilac-dash3-800));
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.InviteMemberModal__item {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.3rem;
}
.InviteMemberModal__item--end {
  margin-bottom: 0;
}
.InviteMemberModal__role {
  display: flex;
  flex-direction: column;
}
.InviteMemberModal__role__name {
  font-weight: 600;
}
.InviteMemberModal__role__description {
  font-weight: 500;
  line-height: 20px;
  white-space: normal;
}
.InviteMemberModal__project {
  cursor: pointer;
  font-size: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 0;
  padding-left: 10px;
  border-radius: 5px;
}
.InviteMemberModal__project:hover {
  background: rgba(var(--color-soft-purple-600), 0.1);
  color: rgba(var(--color-soft-purple-600), 1);
}
.InviteMemberModal__project__name {
  margin-left: 15px;
  line-height: 18px;
}
.InviteMemberModal__piiAccess {
  display: flex;
  flex-direction: row;
  padding-top: 5px;
}
.InviteMemberModal__piiAccess--textBox {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  font-family: "Onest";
  color: rgb(var(--color-title-dash3));
}
.InviteMemberModal__piiAccess--label {
  margin-top: 2px;
  font-weight: 600;
}
.InviteMemberModal__piiAccess--description {
  margin-top: 10px;
  font-size: 14px;
  white-space: normal;
}
.dark-mode .InviteMemberModal__project:hover {
  color: rgb(var(--color-gray-300));
  background-color: rgba(var(--color-white), 0.1);
}
.dark-mode .InviteMemberModal__piiAccess--textBox {
  color: rgb(var(--color-gray-200));
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
.ButtonGroup__button {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version */
}
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.ButtonGroup {
  display: inline-flex;
  align-items: center;
  border-radius: 0.5rem;
  overflow: hidden;
}
.ButtonGroup--disabled {
  opacity: 0.5;
  pointer-events: none;
}
.ButtonGroup__button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--color-gray-400));
  background: transparent;
  color: rgb(var(--color-gray-800));
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  margin: 0;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  line-height: 1rem;
  border-radius: 0;
  position: relative;
}
.ButtonGroup__button--first {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.ButtonGroup__button--last {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.ButtonGroup__button--active {
  color: rgb(var(--color-extra-violet-500));
  border-color: rgb(var(--color-primary-500));
  box-shadow: inset 0 0 0 0.5px rgb(var(--color-primary-500));
  z-index: 1;
}
.ButtonGroup__button--active:hover {
  background: rgb(var(--color-primary-200));
  border-color: rgb(var(--color-primary-100));
  box-shadow: inset 0 0 0 0.5px rgb(var(--color-primary-600));
}
.ButtonGroup__button--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.ButtonGroup__button--disabled:hover {
  background: transparent;
  color: rgb(var(--color-gray-600));
  border-color: rgb(var(--color-gray-300));
}
.ButtonGroup__button:not(:first-child):not(.ButtonGroup__button--active) {
  border-left: none;
  margin-left: -1px;
}
.ButtonGroup__button {
  /* Hover state for inactive buttons */
}
.ButtonGroup__button:not(.ButtonGroup__button--active):hover {
  background: rgba(var(--color-gray-500), 0.1);
  border-color: rgb(var(--color-gray-400));
  color: rgb(var(--color-gray-700));
}
.ButtonGroup__button:focus-visible {
  outline: 2px solid rgb(var(--color-extra-violet-500));
  outline-offset: 2px;
  z-index: 2;
}
.ButtonGroup__button[aria-pressed=true] {
  color: rgb(var(--color-extra-violet-600));
  border-color: rgb(var(--color-extra-violet-600));
}
.ButtonGroup--sm .ButtonGroup__button {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1.2;
}
.ButtonGroup--md .ButtonGroup__button {
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  line-height: 1.4;
}
.ButtonGroup--lg .ButtonGroup__button {
  padding: 0.75rem 20px;
  font-size: 1rem;
  line-height: 1.5;
}
.dark-mode .ButtonGroup__button {
  color: rgb(var(--color-gray-400));
}
.dark-mode .ButtonGroup__button:not(.dark-mode .ButtonGroup__button--active):hover {
  background: rgba(var(--color-gray-500), 0.1);
  border-color: rgb(var(--color-gray-400));
  color: rgb(var(--color-gray-500));
}
.dark-mode .ButtonGroup__button--active:hover {
  background: rgb(var(--color-extra-violet-700));
  color: rgb(var(--color-extra-violet-200));
}
.dark-mode .ButtonGroup__button:focus-visible {
  outline-color: rgb(var(--color-extra-violet-500));
}
.dark-mode .ButtonGroup__button--disabled:hover {
  background: transparent;
  color: rgb(var(--color-gray-500));
  border-color: rgb(var(--color-gray-500));
}
.dark-mode .ButtonGroup__button[aria-pressed=true] {
  color: rgb(var(--color-extra-violet-500));
  border-color: rgb(var(--color-extra-violet-500));
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.ThemeSelector {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 5px;
  padding: 5px 8px;
}
.ThemeSelector__buttonGroup {
  width: 100%;
  box-shadow: none;
}
.dark-mode .ThemeSelector__label {
  color: rgb(var(--color-extra-lilac-dash3-800));
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.Well {
  border-radius: 5px;
  padding: 0.6rem 2.2rem 0.6rem 0.8rem;
  font-size: 16px;
  background: rgb(var(--color-gray-900));
  color: rgb(var(--color-white));
  position: relative;
}
.Well--code {
  font-family: "Source Code Pro", Courier New, Courier, monospace;
  letter-spacing: 1px;
  line-height: 20px;
  color: rgb(var(--color-extra-green-400));
  margin-bottom: 8px;
}
.Well--isLoading:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) 10px, rgba(255, 255, 255, 0.3) 10px, rgba(255, 255, 255, 0.3) 20px);
  background-size: 800%;
  animation: buttonIsLoading 60s infinite;
  animation-timing-function: linear;
}
.Well--isLoading {
  color: rgba(255, 255, 255, 0.7);
}
.Well--danger {
  background: rgb(var(--color-error-800));
  color: rgb(var(--color-error-200));
}
.Well--danger .CopyToClipboardButton {
  background: rgb(var(--color-error-700));
}
.dark-mode .Well {
  background-color: rgba(var(--color-white), 0.1);
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.ApiKeyField__field {
  margin-bottom: 2rem;
}
.ApiKeyField__field__title {
  font-size: 16px;
  font-weight: 600;
  color: rgb(var(--color-title-dash3));
  margin-bottom: 12px;
}
.ApiKeyField__gutter {
  padding: 0 2px;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
}
.ApiKeyField__gutter__expiry {
  font-style: italic;
  color: rgb(var(--color-gray-600));
}
.ApiKeyField__gutter__expiry--isExpired {
  color: rgb(var(--color-error-800));
}
.ApiKeyField__gutter__button {
  color: rgb(var(--color-primary-600));
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.ApiKeyField__gutter__button:hover {
  color: rgb(var(--color-primary-700));
}
.ApiKeyField__gutter__deleteButton {
  font-weight: 600;
  margin-left: 15px;
  color: rgb(var(--color-error-600));
  text-decoration: underline;
  cursor: pointer;
}
.ApiKeyField__gutter__deleteButton--confirm {
  font-weight: 600;
  margin-left: 15px;
  color: rgb(var(--color-error-600));
  text-decoration: none;
  cursor: default;
}
.ApiKeyField__gutter__deleteButton__sub {
  font-weight: 600;
  cursor: pointer;
  margin: 0 4px;
}
.ApiKeyField__gutter__deleteButton__sub:hover {
  color: rgb(var(--color-error-700));
  text-decoration: underline;
}
.ApiKeyField__gutter__deleteButton:hover {
  color: rgb(var(--color-error-700));
}
.dark-mode .ApiKeyField__field__title {
  color: rgb(var(--color-gray-300));
}
.dark-mode .ApiKeyField__gutter__expiry {
  color: rgb(var(--color-gray-400));
}
.dark-mode .ApiKeyField__gutter__expiry--isExpired {
  color: rgb(var(--color-error-500));
}
.dark-mode .ApiKeyField__gutter__button {
  color: rgb(var(--color-extra-indigo-dash3-500));
}
.dark-mode .ApiKeyField__gutter__button:hover {
  color: rgb(var(--color-extra-indigo-dash3-700));
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.avatar-circle {
  background-color: rgb(var(--color-primary-500));
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  color: rgb(var(--color-white));
}
.avatar-circle--large {
  width: 120px;
  height: 120px;
  line-height: 120px;
  font-size: 30px;
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.navbarDash3 {
  z-index: 95;
  margin: 0;
  height: 65px;
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 1537px) {
  .navbarDash3 {
    padding: 0 1rem;
  }
}
.navbarDash3__container {
  width: 100%;
}
.navbarDash3__bg {
  background-color: rgb(var(--color-deep-navy-500));
}
@media screen and (max-width: 769px) {
  .navbarDash3__logo {
    display: none;
  }
}
.navbarDash3__logo--clickable {
  cursor: pointer;
}
.navbarDash3__leftContainer {
  display: flex;
  align-items: center;
}
.navbarDash3__leftContainer__barMenu {
  display: none;
}
@media screen and (max-width: 1201px) {
  .navbarDash3__leftContainer__barMenu {
    display: flex;
  }
}
.navbarDash3__leftContainer__barMenu .Icon {
  color: rgb(var(--color-white));
  margin-left: 1rem;
}
.navbarDash3__leftContainer__barMenu .NiceDropdownDash3__dropdown__content__groupList {
  padding: 0;
  overflow-y: hidden;
}
.navbarDash3__leftContainer__menu__tabs {
  display: flex;
  margin-left: 50px;
}
@media screen and (max-width: 1537px) {
  .navbarDash3__leftContainer__menu__tabs {
    margin-left: 1rem;
    font-size: 14px;
  }
}
@media screen and (max-width: 1201px) {
  .navbarDash3__leftContainer__menu__tabs {
    display: none;
  }
}
.navbarDash3__leftContainer__menu__tabs__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60px;
  margin: 0 1em;
  margin-bottom: -5px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.5px;
  list-style-type: none;
  border-bottom: 4px solid transparent;
  min-width: 75px;
  color: rgb(var(--color-white));
  text-decoration: none;
}
.navbarDash3__leftContainer__menu__tabs__tab:hover {
  color: rgb(var(--color-extra-indigo-dash3-100));
}
@media screen and (max-width: 1537px) {
  .navbarDash3__leftContainer__menu__tabs__tab {
    margin: 0 0.2rem -5px 0.2rem;
  }
}
.navbarDash3__leftContainer__menu__tabs__tab--active {
  border-bottom: 4px solid rgb(var(--color-white));
}
.navbarDash3-right {
  display: flex;
  padding-right: 10px;
  align-items: center;
}
.navbarDash3-right__left {
  padding: 10px;
}
.navbarDash3-right__username {
  padding-left: 10px;
}
.navbarDash3-right__item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.6rem;
  color: rgb(var(--color-white));
}
@media screen and (max-width: 1537px) {
  .navbarDash3-right__item {
    margin: 0 0.35rem;
  }
}
.navbarDash3-right__button {
  background-color: rgba(255, 255, 255, 0.2);
}
.navbarDash3-right__button:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
@media screen and (max-width: 1627px) {
  .navbarDash3-right__button {
    min-height: 2rem;
    min-width: 4.6rem;
    padding: 0.5rem 0.78rem;
    font-size: 0.85rem;
    line-height: 0.85rem;
    letter-spacing: 0.05em;
  }
}
.NavSidebar {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-color: rgb(var(--color-extra-silver-dash3-900));
  width: 20vw;
  max-width: 350px;
  min-width: 250px;
  height: 100%;
  color: rgb(var(--color-extra-navy-dash3-900));
}
.NavSidebar__sections {
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}
.NavSidebar__sections:hover {
  scrollbar-color: #808080 transparent;
}
.NavSidebar__sections::-webkit-scrollbar {
  background-color: transparent;
  width: 7px;
}
.NavSidebar__sections::-webkit-scrollbar-thumb {
  background-color: #ccc;
  outline: 2px solid transparent;
  border-radius: 5px;
}
.NavSidebar__sections::-webkit-scrollbar-button {
  display: none;
}
.NavSidebar__sections {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-top: 10px;
}
.NavSidebar__section {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 10px;
}
.NavSidebar__section::before {
  content: "";
  display: block;
  height: 2px;
}
.NavSidebar__section:first-of-type {
  margin-top: 0;
  flex: 0 0 auto;
}
.NavSidebar__section:first-of-type::before {
  display: none;
}
.NavSidebar__section:last-of-type {
  flex: 1;
}
.NavSidebar__section--fade-enter {
  opacity: 0.01;
  height: 0;
}
.NavSidebar__section--fade-enter-active {
  opacity: 1;
  height: 45px;
  transition: all 500ms ease-in;
}
.NavSidebar__section--fade-exit {
  opacity: 1;
  height: 45px;
}
.NavSidebar__section--fade-exit-active {
  opacity: 0.01;
  height: 0;
  transition: all 500ms ease-in;
}
.NavSidebar__footer {
  margin: 10px;
  padding-top: 5px;
  border-top: 1px solid rgb(var(--color-gray-600));
}
.NavSidebar__footer--temp {
  margin: 10px;
  padding-top: 1rem;
  border-top: 1px solid rgb(var(--color-gray-600));
}
.NavSidebar__searchbar {
  margin-left: 35px;
  padding-right: 4px;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}
.NavSidebar__searchbar .InputField__input {
  font-size: 14px !important;
  border-color: rgb(var(--color-gray-500)) !important;
  min-height: 32px;
  padding: 0px 12px;
}
.NavSidebar__searchbar .InputField__input::placeholder {
  font-size: 14px !important;
}
.NavSidebar__testMode {
  width: 240px;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  margin-bottom: 15px;
}
.NavSidebar__testMode__toggle {
  padding-right: 30px;
  width: 70%;
}
.NavSidebar__testMode .Icon {
  margin-top: 2px;
}
.NavSidebar__testMode .help-icon {
  font-size: 18px;
}
.NavSidebar__sortIcon {
  margin-top: 3px;
  margin-right: 5px;
}
.NavSidebar__sortIcon:hover {
  color: rgba(var(--color-extra-indigo-dash3-500));
}
.NavSidebar__searchIcon {
  margin-top: 3px;
  margin-left: 5px;
  margin-right: 5px;
  width: 16px !important;
}
.NavSidebar__searchIcon:hover {
  color: rgba(var(--color-extra-indigo-dash3-500));
}
.NavSidebar__sectionHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 5px;
  cursor: pointer;
}
.NavSidebar__sectionHeader--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.NavSidebar__sectionTitle {
  display: flex;
  align-items: center;
  padding: 10px 7px;
  font-size: 15px;
  font-weight: 700;
}
.NavSidebar__sectionTitle:hover {
  color: rgba(var(--color-soft-purple-600));
}
.NavSidebar__sectionTitle__icons {
  display: flex;
  align-items: center;
}
.NavSidebar__sectionTitle__icon {
  margin-right: 12px;
  font-size: 16px;
}
.NavSidebar__groupList--collapsed {
  display: none;
  max-height: 0px;
}
.NavSidebar__item {
  position: relative;
  padding: 8px 7px 8px 40px;
  font-size: 14px;
  font-weight: 400;
  border-radius: 3px;
  margin: 3px 2px 3px 2px;
  cursor: pointer;
  display: flex;
  word-wrap: anywhere;
  line-height: 16px;
}
.NavSidebar__item:hover {
  background: rgba(var(--color-soft-purple-600), 0.07);
  border-radius: 5px;
  color: rgba(var(--color-soft-purple-600));
}
.NavSidebar__item__defaultIcon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;
}
.NavSidebar__item__defaultIcon svg {
  margin: 0;
}
.NavSidebar__item__icon {
  margin-right: 8px;
  display: inline-block;
  width: 18px;
  height: 1em;
  align-items: center;
}
.NavSidebar__item--active {
  background: rgba(var(--color-soft-purple-600), 0.2);
  border-radius: 5px;
  color: rgba(var(--color-soft-purple-600));
  font-weight: 550;
}
.NavSidebar__item--active:hover {
  background: rgba(var(--color-soft-purple-600), 0.2);
  border-radius: 5px;
  color: rgba(var(--color-soft-purple-600));
  font-weight: 550;
}
.NavSidebar__item--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.NavSidebar__item__iconButton svg {
  margin: 0;
}
.NavSidebar__item__newIcon {
  margin-left: auto;
  font-size: 10px;
  display: inline-block;
  margin-top: 2px;
}
.NavSidebar__child:first-of-type {
  margin-top: 10px;
}
.NavSidebar__child {
  padding: 7px 0 7px;
  color: rgb(var(--color-secondary-300));
  font-weight: 400;
}
.NavSidebar__child--active {
  font-weight: 700;
  color: rgb(var(--color-secondary-600));
}
.NavSidebar__child--active:hover {
  color: rgb(var(--color-secondary-600));
}
.NavSidebar__child:hover {
  color: rgb(var(--color-secondary-300));
}
.settingsMenu .ToggleButton {
  margin: 10px 10px 10px 0;
}
.settingsMenu .ToggleButton__label {
  font-size: 16px;
  line-height: 1.5em;
  font-weight: 500;
  margin-left: 12px;
  display: flex;
  align-items: center;
}
.settingsMenu__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10px 0;
  gap: 0.5rem;
}
.settingsMenu__header__user {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 80%;
}
.settingsMenu__header__user--name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgb(var(--color-soft-purple-600));
  margin-bottom: 5px;
}
.settingsMenu__header__user--role {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: rgb(var(--color-gray-500));
}
.projectsMenu__label {
  background: transparent !important;
  border: none;
  font-size: 15px;
  font-weight: 700;
  color: rgb(var(--color-white)) !important;
}
.projectsMenu__label:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}
.projectsMenu__header {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  line-height: 1.5em;
  display: flex;
  justify-content: center;
  color: rgb(var(--color-black));
  text-align: center;
}
.projectsMenu__item {
  width: 100%;
  font-size: 14px;
}
.projectsMenu__empty {
  font-size: 15px;
  font-weight: 500;
  padding: 10px 7px;
  margin: 3px 5px;
  color: rgb(var(--color-gray-500));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.projectsMenu__empty__add {
  font-size: 18px;
  color: rgb(var(--color-soft-purple-600));
}
.projectsMenu__empty__add:hover {
  color: rgb(var(--color-primary-dash3-500));
}
.projectsMenu .createProject__container {
  display: flex;
  justify-content: flex-start;
  color: rgb(var(--color-soft-purple-600));
  width: 80%;
  padding: 10px 0;
  cursor: pointer;
}
.projectsMenu .createProject__container:hover {
  color: rgb(var(--color-primary-dash3-500));
}
.projectsMenu .createProject__icon {
  width: 30px;
  font-size: 18px;
}
.projectsMenu .createProject__icon .createProjectIcon .svg-inline--fa.fa-w-16 {
  width: 2em;
}
.projectsMenu .createProject__text {
  font-weight: 600;
  font-size: 14px;
}
.dark-mode .settingsMenu__header__user--name {
  color: rgb(var(--color-gray-300));
}
.dark-mode .projectsMenu__header span {
  color: rgb(var(--color-white));
}
.dark-mode .projectsMenu__empty__add {
  color: rgb(var(--color-primary-300));
}
.dark-mode .projectsMenu__empty__add:hover {
  color: rgb(var(--color-primary-500));
}
.dark-mode .NavSidebar {
  background-color: rgba(var(--color-white), 0.05);
  color: rgb(var(--color-white));
}
.dark-mode .NavSidebar__footer {
  border-top: 1px solid rgb(var(--color-gray-500));
}
.dark-mode .NavSidebar__item--active {
  color: rgb(var(--color-extra-violet-dash3-900));
}
.dark-mode .NavSidebar__item:hover {
  color: rgb(var(--color-extra-violet-dash3-800));
}
.dark-mode .NavSidebar__sectionTitle:hover {
  color: rgba(var(--color-extra-indigo-dash3-300));
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.footer {
  margin-top: 150px;
  height: 100%;
  font-family: "Onest";
  text-align: center;
}
.footer--login {
  height: unset;
  text-align: center;
  margin-top: 40px;
}
.footer--login__link {
  font-size: 14px;
  padding: 5px;
  margin: 0 5px;
  color: rgb(var(--color-white));
  font-weight: bold;
  cursor: pointer;
  display: inline-block;
}
.footer--login__link:hover {
  color: rgb(var(--color-teal-500));
}
.footer--login__copyright {
  color: rgb(var(--color-gray-200));
}
.footer__link {
  font-size: 14px;
  padding: 5px;
  margin: 0 5px;
  color: rgb(var(--color-gray-600));
  font-weight: bold;
  cursor: pointer;
  display: inline-block;
}
.footer__link:hover {
  color: rgb(var(--color-primary-500));
}
.dark-mode .footer__link {
  color: rgb(var(--color-gray-300));
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.MissingPageGraphics {
  padding-top: 80px;
  padding-bottom: 80px;
  font-family: "Onest";
}
.MissingPageGraphics__TextBox {
  z-index: 2;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  margin-top: 100px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.MissingPageGraphics__Title {
  font-size: 1.8em;
  font-weight: 400;
  margin-bottom: 40px;
}
.MissingPageGraphics__SubTitle {
  font-size: 1.2em;
  font-weight: 400;
  margin-bottom: 70px;
}
.MissingPageGraphics__Description {
  font-size: 1.2em;
  font-weight: 400;
  margin-bottom: 40px;
}
.MissingPageGraphics__BackLink {
  font-size: 1em;
  font-weight: 300;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.MissingPageGraphics__SVG > div,
.MissingPageGraphics__SVG > div > div {
  margin: 0 auto;
  width: 100%;
}
.MissingPageGraphics__SVG svg {
  width: 100%;
  height: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}
.MissingPageGraphics__SVG {
  position: relative;
  z-index: 1;
}
.dark-mode .MissingPageGraphics__Title {
  color: rgb(var(--color-gray-300));
}
.dark-mode .MissingPageGraphics__SubTitle {
  color: rgb(var(--color-gray-200));
}
.dark-mode .MissingPageGraphics__Description {
  color: rgb(var(--color-gray-300));
}.maintenance-mode-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 80vh;
}
.maintenance-mode-page h1 {
  font-size: 3em;
  font-weight: bold;
  margin: 20px;
}
.maintenance-mode-page h2 {
  font-size: 1.5em;
  font-weight: bold;
  margin: 5px;
}:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: hsl(6, 78%, 57%);
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);

  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);

  --toastify-container-width: fit-content;
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-padding: 14px;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;

  /* Used only for colored theme */
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;

  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  /* used to control the opacity of the progress trail */
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  width: var(--toastify-container-width);
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.Toastify__toast-container--top-left {
  top: var(--toastify-toast-top);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--top-right {
  top: var(--toastify-toast-top);
  right: var(--toastify-toast-right);
  align-items: end;
}
.Toastify__toast-container--bottom-left {
  bottom: var(--toastify-toast-bottom);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--bottom-right {
  bottom: var(--toastify-toast-bottom);
  right: var(--toastify-toast-right);
  align-items: end;
}

.Toastify__toast {
  --y: 0px;
  position: relative;
  touch-action: none;
  width: var(--toastify-toast-width);
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: var(--toastify-toast-padding);
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: var(--toastify-toast-shadow);
  max-height: var(--toastify-toast-max-height);
  font-family: var(--toastify-font-family);
  /* webkit only issue #791 */
  z-index: 0;
  /* inner swag */
  display: flex;
  flex: 1 auto;
  align-items: center;
  word-break: break-word;
}

@media only screen and (max-width: 480px) {
  .Toastify__toast-container {
    width: 100vw;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left,
  .Toastify__toast-container--top-center,
  .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left,
  .Toastify__toast-container--bottom-center,
  .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: initial;
  }
  .Toastify__toast {
    --toastify-toast-width: 100%;
    margin-bottom: 0;
    border-radius: 0;
  }
}

.Toastify__toast-container[data-stacked='true'] {
  width: var(--toastify-toast-width);
}

@media only screen and (max-width: 480px) {
  .Toastify__toast-container[data-stacked='true'] {
    width: 100vw;
  }
}

.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}

.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body,
.Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}

.Toastify__toast--stacked[data-collapsed='false'] {
  overflow: visible;
}

.Toastify__toast--stacked[data-collapsed='true']:not(:last-child) > * {
  opacity: 0;
}

.Toastify__toast--stacked:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}

.Toastify__toast--stacked[data-pos='top'] {
  top: 0;
}

.Toastify__toast--stacked[data-pos='bot'] {
  bottom: 0;
}

.Toastify__toast--stacked[data-pos='bot'].Toastify__toast--stacked:before {
  transform-origin: top;
}

.Toastify__toast--stacked[data-pos='top'].Toastify__toast--stacked:before {
  transform-origin: bottom;
}

.Toastify__toast--stacked:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}

.Toastify__toast--rtl {
  direction: rtl;
}

.Toastify__toast--close-on-click {
  cursor: pointer;
}

.Toastify__toast-icon {
  margin-inline-end: 10px;
  width: 22px;
  flex-shrink: 0;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

.Toastify__toast-theme--dark {
  background: var(--toastify-color-dark);
  color: var(--toastify-text-color-dark);
}

.Toastify__toast-theme--light {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--default {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--info {
  color: var(--toastify-text-color-info);
  background: var(--toastify-color-info);
}

.Toastify__toast-theme--colored.Toastify__toast--success {
  color: var(--toastify-text-color-success);
  background: var(--toastify-color-success);
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: var(--toastify-text-color-warning);
  background: var(--toastify-color-warning);
}

.Toastify__toast-theme--colored.Toastify__toast--error {
  color: var(--toastify-text-color-error);
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: var(--toastify-color-progress-light);
}

.Toastify__progress-bar-theme--dark {
  background: var(--toastify-color-progress-dark);
}

.Toastify__progress-bar--info {
  background: var(--toastify-color-progress-info);
}

.Toastify__progress-bar--success {
  background: var(--toastify-color-progress-success);
}

.Toastify__progress-bar--warning {
  background: var(--toastify-color-progress-warning);
}

.Toastify__progress-bar--error {
  background: var(--toastify-color-progress-error);
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  z-index: 1;
}

.Toastify__toast--rtl .Toastify__close-button {
  left: 6px;
  right: unset;
}

.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}

.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}

.Toastify__close-button:hover,
.Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.7;
  transform-origin: left;
}

.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}

.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}

.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: initial;
}

.Toastify__progress-bar--wrp {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}

.Toastify__progress-bar--wrp[data-hidden='true'] {
  opacity: 0;
}

.Toastify__progress-bar--bg {
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes Toastify__bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

.Toastify__bounce-enter--top-left,
.Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}

.Toastify__bounce-enter--top-right,
.Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}

.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}

.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left,
.Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}

.Toastify__bounce-exit--top-right,
.Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}

.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}

.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}

.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}

@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}

@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}

.Toastify__slide-enter--top-left,
.Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}

.Toastify__slide-enter--top-right,
.Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}

.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}

.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left,
.Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-right,
.Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
.list-pagination li a, .list-pagination-dash3 li a {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version */
}
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
::-webkit-scrollbar-button {
  display: none;
}
.pointer {
  cursor: pointer;
}
.pointer-bold-on-hover:hover {
  cursor: pointer;
  font-weight: bolder;
}
.pad-5 {
  padding: 5px;
}
.pad-10 {
  padding: 10px;
}
.pad-20 {
  padding: 20px;
}
.pad-5-top-bottom {
  padding-top: 5px;
  padding-bottom: 5px;
}
.pad-10-top-bottom {
  padding-top: 10px;
  padding-bottom: 10px;
}
.pad-10-top {
  padding-top: 10px;
}
.pad-0-top {
  padding-top: 0px;
}
.pad-5-right {
  padding-right: 5px;
}
.pad-20-top-bottom {
  padding-top: 20px;
  padding-bottom: 20px;
}
.pad-20-top {
  padding-top: 20px;
}
.margin-5 {
  margin: 5px;
}
.margin-10 {
  margin: 10px;
}
.margin-10-top {
  margin-top: 10px;
}
.margin-20-top {
  margin-top: 20px;
}
.margin-10-bottom {
  margin-bottom: 10px;
}
.margin-15-bottom {
  margin-bottom: 15px;
}
.margin-20-bottom {
  margin-bottom: 20px;
}
.margin-30-bottom {
  margin-bottom: 30px;
}
.margin-40-bottom {
  margin-bottom: 40px;
}
.margin-50-bottom {
  margin-bottom: 50px;
}
.margin-5-right {
  margin-right: 5px;
}
.margin-10-right {
  margin-right: 10px;
}
.margin-15-right {
  margin-right: 15px;
}
.margin-20-right {
  margin-right: 20px;
}
.margin-30-right {
  margin-right: 30px;
}
.margin-5-left {
  margin-left: 5px;
}
.margin-10-left {
  margin-left: 10px;
}
.margin-15-left {
  margin-left: 15px;
}
.margin-20-left {
  margin-left: 20px;
}
.margin-25-left {
  margin-left: 25px;
}
.margin-30-left {
  margin-left: 30px;
}
.no-margin {
  margin: 0;
}
.no-padding {
  padding: 0;
}
.max-width-none {
  max-width: none;
}
.inline {
  display: inline-block;
}
.border-gray {
  border: 1px solid rgb(var(--color-gray-500));
}
.border-bottom-gray {
  border-bottom: 1px solid rgb(var(--color-gray-500));
}
.border-bottom-gray-400 {
  border-bottom: 1px solid rgb(var(--color-gray-400));
}
.border-bottom-gray-300 {
  border-bottom: 1px solid rgb(var(--color-gray-400));
}
.border-bottom-gray-600 {
  border-bottom: 1px solid rgb(var(--color-gray-600));
}
.border-top-gray-600 {
  border-top: 1px solid rgb(var(--color-gray-600));
}
.border-top-gray {
  border-top: 1px solid rgb(var(--color-gray-500));
}
.nomargin {
  margin: 0;
}
.margin-8-left-right {
  margin-left: 8px;
  margin-right: 8px;
}
.nopadding {
  padding: 0;
}
.background {
  margin: 0px 5px 0px 5px;
}
.square-height {
  height: 275px;
}
.square-height-2 {
  height: 133px;
}
.full-height {
  height: 100%;
}
.full-width {
  width: 100%;
}
.color-white {
  color: rgb(var(--color-white));
}
.list-pagination {
  margin: 0px;
  display: flex;
  justify-content: center;
  text-decoration: none;
}
.list-pagination li a {
  color: rgb(var(--color-gray-500));
  padding: 10px;
  letter-spacing: 0.03em;
  font-size: 10pt;
}
.list-pagination li {
  list-style-type: none;
}
.list-pagination li:hover {
  text-decoration: underline;
  cursor: pointer;
}
.list-pagination .active a {
  border-bottom: 3px solid rgb(var(--color-secondary-500));
}
.hidden {
  visibility: hidden;
}
.active-tab {
  font-weight: bold;
}
.list-pagination-dash3 {
  margin: 0px;
  display: flex;
  justify-content: center;
  text-decoration: none;
}
.list-pagination-dash3 li {
  margin: 0 3px;
  list-style-type: none;
}
.list-pagination-dash3 li a {
  color: rgb(var(--color-gray-800));
  padding: 8px 11px;
  letter-spacing: 0.03em;
  font-size: 10pt;
}
.list-pagination-dash3 li:hover {
  cursor: pointer;
}
.list-pagination-dash3 .active a {
  background: rgba(var(--color-soft-purple-600), 0.12);
  border-radius: 5px;
  color: rgba(var(--color-soft-purple-600), 0.7) !important;
  font-weight: 550;
}
.dark-mode .list-pagination-dash3 li a {
  color: rgb(var(--color-white));
}
.dark-mode .list-pagination-dash3 .active a {
  background: rgba(var(--color-white), 0.15);
  color: rgb(var(--color-primary-400)) !important;
}
.hidden-dash3 {
  visibility: hidden;
}
.active-tab-dash3 {
  font-weight: bold;
}
.bg-primary-100 {
  background-color: rgb(var(--color-primary-100));
}
.color-primary-100 {
  color: rgb(var(--color-primary-100));
}
.fill-color-primary-100 {
  fill: rgb(var(--color-primary-100));
}
.fill-color-primary-100--hoverable {
  fill: rgb(var(--color-primary-100));
}
.fill-color-primary-100--hoverable:hover {
  fill: rgb(var(--color-primary-200));
}
.stroke-color-primary-100 {
  stroke: rgb(var(--color-primary-100));
}
.stroke-color-primary-100--hoverable {
  stroke: rgb(var(--color-primary-100));
}
.stroke-color-primary-100--hoverable:hover {
  stroke: rgb(var(--color-primary-200));
}
.border-color--primary-100 {
  border-color: rgb(var(--color-primary-100)) !important;
}
.bg-primary-200 {
  background-color: rgb(var(--color-primary-200));
}
.color-primary-200 {
  color: rgb(var(--color-primary-200));
}
.fill-color-primary-200 {
  fill: rgb(var(--color-primary-200));
}
.fill-color-primary-200--hoverable {
  fill: rgb(var(--color-primary-200));
}
.fill-color-primary-200--hoverable:hover {
  fill: rgb(var(--color-primary-300));
}
.stroke-color-primary-200 {
  stroke: rgb(var(--color-primary-200));
}
.stroke-color-primary-200--hoverable {
  stroke: rgb(var(--color-primary-200));
}
.stroke-color-primary-200--hoverable:hover {
  stroke: rgb(var(--color-primary-300));
}
.border-color--primary-200 {
  border-color: rgb(var(--color-primary-200)) !important;
}
.bg-primary-300 {
  background-color: rgb(var(--color-primary-300));
}
.color-primary-300 {
  color: rgb(var(--color-primary-300));
}
.fill-color-primary-300 {
  fill: rgb(var(--color-primary-300));
}
.fill-color-primary-300--hoverable {
  fill: rgb(var(--color-primary-300));
}
.fill-color-primary-300--hoverable:hover {
  fill: rgb(var(--color-primary-400));
}
.stroke-color-primary-300 {
  stroke: rgb(var(--color-primary-300));
}
.stroke-color-primary-300--hoverable {
  stroke: rgb(var(--color-primary-300));
}
.stroke-color-primary-300--hoverable:hover {
  stroke: rgb(var(--color-primary-400));
}
.border-color--primary-300 {
  border-color: rgb(var(--color-primary-300)) !important;
}
.bg-primary-400 {
  background-color: rgb(var(--color-primary-400));
}
.color-primary-400 {
  color: rgb(var(--color-primary-400));
}
.fill-color-primary-400 {
  fill: rgb(var(--color-primary-400));
}
.fill-color-primary-400--hoverable {
  fill: rgb(var(--color-primary-400));
}
.fill-color-primary-400--hoverable:hover {
  fill: rgb(var(--color-primary-500));
}
.stroke-color-primary-400 {
  stroke: rgb(var(--color-primary-400));
}
.stroke-color-primary-400--hoverable {
  stroke: rgb(var(--color-primary-400));
}
.stroke-color-primary-400--hoverable:hover {
  stroke: rgb(var(--color-primary-500));
}
.border-color--primary-400 {
  border-color: rgb(var(--color-primary-400)) !important;
}
.bg-primary-500 {
  background-color: rgb(var(--color-primary-500));
}
.color-primary-500 {
  color: rgb(var(--color-primary-500));
}
.fill-color-primary-500 {
  fill: rgb(var(--color-primary-500));
}
.fill-color-primary-500--hoverable {
  fill: rgb(var(--color-primary-500));
}
.fill-color-primary-500--hoverable:hover {
  fill: rgb(var(--color-primary-600));
}
.stroke-color-primary-500 {
  stroke: rgb(var(--color-primary-500));
}
.stroke-color-primary-500--hoverable {
  stroke: rgb(var(--color-primary-500));
}
.stroke-color-primary-500--hoverable:hover {
  stroke: rgb(var(--color-primary-600));
}
.border-color--primary-500 {
  border-color: rgb(var(--color-primary-500)) !important;
}
.bg-primary-600 {
  background-color: rgb(var(--color-primary-600));
}
.color-primary-600 {
  color: rgb(var(--color-primary-600));
}
.fill-color-primary-600 {
  fill: rgb(var(--color-primary-600));
}
.fill-color-primary-600--hoverable {
  fill: rgb(var(--color-primary-600));
}
.fill-color-primary-600--hoverable:hover {
  fill: rgb(var(--color-primary-700));
}
.stroke-color-primary-600 {
  stroke: rgb(var(--color-primary-600));
}
.stroke-color-primary-600--hoverable {
  stroke: rgb(var(--color-primary-600));
}
.stroke-color-primary-600--hoverable:hover {
  stroke: rgb(var(--color-primary-700));
}
.border-color--primary-600 {
  border-color: rgb(var(--color-primary-600)) !important;
}
.bg-primary-700 {
  background-color: rgb(var(--color-primary-700));
}
.color-primary-700 {
  color: rgb(var(--color-primary-700));
}
.fill-color-primary-700 {
  fill: rgb(var(--color-primary-700));
}
.fill-color-primary-700--hoverable {
  fill: rgb(var(--color-primary-700));
}
.fill-color-primary-700--hoverable:hover {
  fill: rgb(var(--color-primary-800));
}
.stroke-color-primary-700 {
  stroke: rgb(var(--color-primary-700));
}
.stroke-color-primary-700--hoverable {
  stroke: rgb(var(--color-primary-700));
}
.stroke-color-primary-700--hoverable:hover {
  stroke: rgb(var(--color-primary-800));
}
.border-color--primary-700 {
  border-color: rgb(var(--color-primary-700)) !important;
}
.bg-primary-800 {
  background-color: rgb(var(--color-primary-800));
}
.color-primary-800 {
  color: rgb(var(--color-primary-800));
}
.fill-color-primary-800 {
  fill: rgb(var(--color-primary-800));
}
.fill-color-primary-800--hoverable {
  fill: rgb(var(--color-primary-800));
}
.fill-color-primary-800--hoverable:hover {
  fill: rgb(var(--color-primary-900));
}
.stroke-color-primary-800 {
  stroke: rgb(var(--color-primary-800));
}
.stroke-color-primary-800--hoverable {
  stroke: rgb(var(--color-primary-800));
}
.stroke-color-primary-800--hoverable:hover {
  stroke: rgb(var(--color-primary-900));
}
.border-color--primary-800 {
  border-color: rgb(var(--color-primary-800)) !important;
}
.bg-secondary-100 {
  background-color: rgb(var(--color-secondary-100));
}
.color-secondary-100 {
  color: rgb(var(--color-secondary-100));
}
.fill-color-secondary-100 {
  fill: rgb(var(--color-secondary-100));
}
.fill-color-secondary-100--hoverable {
  fill: rgb(var(--color-secondary-100));
}
.fill-color-secondary-100--hoverable:hover {
  fill: rgb(var(--color-secondary-200));
}
.stroke-color-secondary-100 {
  stroke: rgb(var(--color-secondary-100));
}
.stroke-color-secondary-100--hoverable {
  stroke: rgb(var(--color-secondary-100));
}
.stroke-color-secondary-100--hoverable:hover {
  stroke: rgb(var(--color-secondary-200));
}
.border-color--secondary-100 {
  border-color: rgb(var(--color-secondary-100)) !important;
}
.bg-secondary-200 {
  background-color: rgb(var(--color-secondary-200));
}
.color-secondary-200 {
  color: rgb(var(--color-secondary-200));
}
.fill-color-secondary-200 {
  fill: rgb(var(--color-secondary-200));
}
.fill-color-secondary-200--hoverable {
  fill: rgb(var(--color-secondary-200));
}
.fill-color-secondary-200--hoverable:hover {
  fill: rgb(var(--color-secondary-300));
}
.stroke-color-secondary-200 {
  stroke: rgb(var(--color-secondary-200));
}
.stroke-color-secondary-200--hoverable {
  stroke: rgb(var(--color-secondary-200));
}
.stroke-color-secondary-200--hoverable:hover {
  stroke: rgb(var(--color-secondary-300));
}
.border-color--secondary-200 {
  border-color: rgb(var(--color-secondary-200)) !important;
}
.bg-secondary-300 {
  background-color: rgb(var(--color-secondary-300));
}
.color-secondary-300 {
  color: rgb(var(--color-secondary-300));
}
.fill-color-secondary-300 {
  fill: rgb(var(--color-secondary-300));
}
.fill-color-secondary-300--hoverable {
  fill: rgb(var(--color-secondary-300));
}
.fill-color-secondary-300--hoverable:hover {
  fill: rgb(var(--color-secondary-400));
}
.stroke-color-secondary-300 {
  stroke: rgb(var(--color-secondary-300));
}
.stroke-color-secondary-300--hoverable {
  stroke: rgb(var(--color-secondary-300));
}
.stroke-color-secondary-300--hoverable:hover {
  stroke: rgb(var(--color-secondary-400));
}
.border-color--secondary-300 {
  border-color: rgb(var(--color-secondary-300)) !important;
}
.bg-secondary-400 {
  background-color: rgb(var(--color-secondary-400));
}
.color-secondary-400 {
  color: rgb(var(--color-secondary-400));
}
.fill-color-secondary-400 {
  fill: rgb(var(--color-secondary-400));
}
.fill-color-secondary-400--hoverable {
  fill: rgb(var(--color-secondary-400));
}
.fill-color-secondary-400--hoverable:hover {
  fill: rgb(var(--color-secondary-500));
}
.stroke-color-secondary-400 {
  stroke: rgb(var(--color-secondary-400));
}
.stroke-color-secondary-400--hoverable {
  stroke: rgb(var(--color-secondary-400));
}
.stroke-color-secondary-400--hoverable:hover {
  stroke: rgb(var(--color-secondary-500));
}
.border-color--secondary-400 {
  border-color: rgb(var(--color-secondary-400)) !important;
}
.bg-secondary-500 {
  background-color: rgb(var(--color-secondary-500));
}
.color-secondary-500 {
  color: rgb(var(--color-secondary-500));
}
.fill-color-secondary-500 {
  fill: rgb(var(--color-secondary-500));
}
.fill-color-secondary-500--hoverable {
  fill: rgb(var(--color-secondary-500));
}
.fill-color-secondary-500--hoverable:hover {
  fill: rgb(var(--color-secondary-600));
}
.stroke-color-secondary-500 {
  stroke: rgb(var(--color-secondary-500));
}
.stroke-color-secondary-500--hoverable {
  stroke: rgb(var(--color-secondary-500));
}
.stroke-color-secondary-500--hoverable:hover {
  stroke: rgb(var(--color-secondary-600));
}
.border-color--secondary-500 {
  border-color: rgb(var(--color-secondary-500)) !important;
}
.bg-secondary-600 {
  background-color: rgb(var(--color-secondary-600));
}
.color-secondary-600 {
  color: rgb(var(--color-secondary-600));
}
.fill-color-secondary-600 {
  fill: rgb(var(--color-secondary-600));
}
.fill-color-secondary-600--hoverable {
  fill: rgb(var(--color-secondary-600));
}
.fill-color-secondary-600--hoverable:hover {
  fill: rgb(var(--color-secondary-700));
}
.stroke-color-secondary-600 {
  stroke: rgb(var(--color-secondary-600));
}
.stroke-color-secondary-600--hoverable {
  stroke: rgb(var(--color-secondary-600));
}
.stroke-color-secondary-600--hoverable:hover {
  stroke: rgb(var(--color-secondary-700));
}
.border-color--secondary-600 {
  border-color: rgb(var(--color-secondary-600)) !important;
}
.bg-secondary-700 {
  background-color: rgb(var(--color-secondary-700));
}
.color-secondary-700 {
  color: rgb(var(--color-secondary-700));
}
.fill-color-secondary-700 {
  fill: rgb(var(--color-secondary-700));
}
.fill-color-secondary-700--hoverable {
  fill: rgb(var(--color-secondary-700));
}
.fill-color-secondary-700--hoverable:hover {
  fill: rgb(var(--color-secondary-800));
}
.stroke-color-secondary-700 {
  stroke: rgb(var(--color-secondary-700));
}
.stroke-color-secondary-700--hoverable {
  stroke: rgb(var(--color-secondary-700));
}
.stroke-color-secondary-700--hoverable:hover {
  stroke: rgb(var(--color-secondary-800));
}
.border-color--secondary-700 {
  border-color: rgb(var(--color-secondary-700)) !important;
}
.bg-secondary-800 {
  background-color: rgb(var(--color-secondary-800));
}
.color-secondary-800 {
  color: rgb(var(--color-secondary-800));
}
.fill-color-secondary-800 {
  fill: rgb(var(--color-secondary-800));
}
.fill-color-secondary-800--hoverable {
  fill: rgb(var(--color-secondary-800));
}
.fill-color-secondary-800--hoverable:hover {
  fill: rgb(var(--color-secondary-900));
}
.stroke-color-secondary-800 {
  stroke: rgb(var(--color-secondary-800));
}
.stroke-color-secondary-800--hoverable {
  stroke: rgb(var(--color-secondary-800));
}
.stroke-color-secondary-800--hoverable:hover {
  stroke: rgb(var(--color-secondary-900));
}
.border-color--secondary-800 {
  border-color: rgb(var(--color-secondary-800)) !important;
}
.bg-gray-100 {
  background-color: rgb(var(--color-gray-100));
}
.color-gray-100 {
  color: rgb(var(--color-gray-100));
}
.fill-color-gray-100 {
  fill: rgb(var(--color-gray-100));
}
.fill-color-gray-100--hoverable {
  fill: rgb(var(--color-gray-100));
}
.fill-color-gray-100--hoverable:hover {
  fill: rgb(var(--color-gray-200));
}
.stroke-color-gray-100 {
  stroke: rgb(var(--color-gray-100));
}
.stroke-color-gray-100--hoverable {
  stroke: rgb(var(--color-gray-100));
}
.stroke-color-gray-100--hoverable:hover {
  stroke: rgb(var(--color-gray-200));
}
.border-color--gray-100 {
  border-color: rgb(var(--color-gray-100)) !important;
}
.bg-gray-200 {
  background-color: rgb(var(--color-gray-200));
}
.color-gray-200 {
  color: rgb(var(--color-gray-200));
}
.fill-color-gray-200 {
  fill: rgb(var(--color-gray-200));
}
.fill-color-gray-200--hoverable {
  fill: rgb(var(--color-gray-200));
}
.fill-color-gray-200--hoverable:hover {
  fill: rgb(var(--color-gray-300));
}
.stroke-color-gray-200 {
  stroke: rgb(var(--color-gray-200));
}
.stroke-color-gray-200--hoverable {
  stroke: rgb(var(--color-gray-200));
}
.stroke-color-gray-200--hoverable:hover {
  stroke: rgb(var(--color-gray-300));
}
.border-color--gray-200 {
  border-color: rgb(var(--color-gray-200)) !important;
}
.bg-gray-300 {
  background-color: rgb(var(--color-gray-300));
}
.color-gray-300 {
  color: rgb(var(--color-gray-300));
}
.fill-color-gray-300 {
  fill: rgb(var(--color-gray-300));
}
.fill-color-gray-300--hoverable {
  fill: rgb(var(--color-gray-300));
}
.fill-color-gray-300--hoverable:hover {
  fill: rgb(var(--color-gray-400));
}
.stroke-color-gray-300 {
  stroke: rgb(var(--color-gray-300));
}
.stroke-color-gray-300--hoverable {
  stroke: rgb(var(--color-gray-300));
}
.stroke-color-gray-300--hoverable:hover {
  stroke: rgb(var(--color-gray-400));
}
.border-color--gray-300 {
  border-color: rgb(var(--color-gray-300)) !important;
}
.bg-gray-400 {
  background-color: rgb(var(--color-gray-400));
}
.color-gray-400 {
  color: rgb(var(--color-gray-400));
}
.fill-color-gray-400 {
  fill: rgb(var(--color-gray-400));
}
.fill-color-gray-400--hoverable {
  fill: rgb(var(--color-gray-400));
}
.fill-color-gray-400--hoverable:hover {
  fill: rgb(var(--color-gray-500));
}
.stroke-color-gray-400 {
  stroke: rgb(var(--color-gray-400));
}
.stroke-color-gray-400--hoverable {
  stroke: rgb(var(--color-gray-400));
}
.stroke-color-gray-400--hoverable:hover {
  stroke: rgb(var(--color-gray-500));
}
.border-color--gray-400 {
  border-color: rgb(var(--color-gray-400)) !important;
}
.bg-gray-500 {
  background-color: rgb(var(--color-gray-500));
}
.color-gray-500 {
  color: rgb(var(--color-gray-500));
}
.fill-color-gray-500 {
  fill: rgb(var(--color-gray-500));
}
.fill-color-gray-500--hoverable {
  fill: rgb(var(--color-gray-500));
}
.fill-color-gray-500--hoverable:hover {
  fill: rgb(var(--color-gray-600));
}
.stroke-color-gray-500 {
  stroke: rgb(var(--color-gray-500));
}
.stroke-color-gray-500--hoverable {
  stroke: rgb(var(--color-gray-500));
}
.stroke-color-gray-500--hoverable:hover {
  stroke: rgb(var(--color-gray-600));
}
.border-color--gray-500 {
  border-color: rgb(var(--color-gray-500)) !important;
}
.bg-gray-600 {
  background-color: rgb(var(--color-gray-600));
}
.color-gray-600 {
  color: rgb(var(--color-gray-600));
}
.fill-color-gray-600 {
  fill: rgb(var(--color-gray-600));
}
.fill-color-gray-600--hoverable {
  fill: rgb(var(--color-gray-600));
}
.fill-color-gray-600--hoverable:hover {
  fill: rgb(var(--color-gray-700));
}
.stroke-color-gray-600 {
  stroke: rgb(var(--color-gray-600));
}
.stroke-color-gray-600--hoverable {
  stroke: rgb(var(--color-gray-600));
}
.stroke-color-gray-600--hoverable:hover {
  stroke: rgb(var(--color-gray-700));
}
.border-color--gray-600 {
  border-color: rgb(var(--color-gray-600)) !important;
}
.bg-gray-700 {
  background-color: rgb(var(--color-gray-700));
}
.color-gray-700 {
  color: rgb(var(--color-gray-700));
}
.fill-color-gray-700 {
  fill: rgb(var(--color-gray-700));
}
.fill-color-gray-700--hoverable {
  fill: rgb(var(--color-gray-700));
}
.fill-color-gray-700--hoverable:hover {
  fill: rgb(var(--color-gray-800));
}
.stroke-color-gray-700 {
  stroke: rgb(var(--color-gray-700));
}
.stroke-color-gray-700--hoverable {
  stroke: rgb(var(--color-gray-700));
}
.stroke-color-gray-700--hoverable:hover {
  stroke: rgb(var(--color-gray-800));
}
.border-color--gray-700 {
  border-color: rgb(var(--color-gray-700)) !important;
}
.bg-gray-800 {
  background-color: rgb(var(--color-gray-800));
}
.color-gray-800 {
  color: rgb(var(--color-gray-800));
}
.fill-color-gray-800 {
  fill: rgb(var(--color-gray-800));
}
.fill-color-gray-800--hoverable {
  fill: rgb(var(--color-gray-800));
}
.fill-color-gray-800--hoverable:hover {
  fill: rgb(var(--color-gray-900));
}
.stroke-color-gray-800 {
  stroke: rgb(var(--color-gray-800));
}
.stroke-color-gray-800--hoverable {
  stroke: rgb(var(--color-gray-800));
}
.stroke-color-gray-800--hoverable:hover {
  stroke: rgb(var(--color-gray-900));
}
.border-color--gray-800 {
  border-color: rgb(var(--color-gray-800)) !important;
}
.bg-white-100 {
  background-color: rgb(var(--color-white-100));
}
.color-white-100 {
  color: rgb(var(--color-white-100));
}
.fill-color-white-100 {
  fill: rgb(var(--color-white-100));
}
.fill-color-white-100--hoverable {
  fill: rgb(var(--color-white-100));
}
.fill-color-white-100--hoverable:hover {
  fill: rgb(var(--color-white-200));
}
.stroke-color-white-100 {
  stroke: rgb(var(--color-white-100));
}
.stroke-color-white-100--hoverable {
  stroke: rgb(var(--color-white-100));
}
.stroke-color-white-100--hoverable:hover {
  stroke: rgb(var(--color-white-200));
}
.border-color--white-100 {
  border-color: rgb(var(--color-white-100)) !important;
}
.bg-white-200 {
  background-color: rgb(var(--color-white-200));
}
.color-white-200 {
  color: rgb(var(--color-white-200));
}
.fill-color-white-200 {
  fill: rgb(var(--color-white-200));
}
.fill-color-white-200--hoverable {
  fill: rgb(var(--color-white-200));
}
.fill-color-white-200--hoverable:hover {
  fill: rgb(var(--color-white-300));
}
.stroke-color-white-200 {
  stroke: rgb(var(--color-white-200));
}
.stroke-color-white-200--hoverable {
  stroke: rgb(var(--color-white-200));
}
.stroke-color-white-200--hoverable:hover {
  stroke: rgb(var(--color-white-300));
}
.border-color--white-200 {
  border-color: rgb(var(--color-white-200)) !important;
}
.bg-white-300 {
  background-color: rgb(var(--color-white-300));
}
.color-white-300 {
  color: rgb(var(--color-white-300));
}
.fill-color-white-300 {
  fill: rgb(var(--color-white-300));
}
.fill-color-white-300--hoverable {
  fill: rgb(var(--color-white-300));
}
.fill-color-white-300--hoverable:hover {
  fill: rgb(var(--color-white-400));
}
.stroke-color-white-300 {
  stroke: rgb(var(--color-white-300));
}
.stroke-color-white-300--hoverable {
  stroke: rgb(var(--color-white-300));
}
.stroke-color-white-300--hoverable:hover {
  stroke: rgb(var(--color-white-400));
}
.border-color--white-300 {
  border-color: rgb(var(--color-white-300)) !important;
}
.bg-white-400 {
  background-color: rgb(var(--color-white-400));
}
.color-white-400 {
  color: rgb(var(--color-white-400));
}
.fill-color-white-400 {
  fill: rgb(var(--color-white-400));
}
.fill-color-white-400--hoverable {
  fill: rgb(var(--color-white-400));
}
.fill-color-white-400--hoverable:hover {
  fill: rgb(var(--color-white-500));
}
.stroke-color-white-400 {
  stroke: rgb(var(--color-white-400));
}
.stroke-color-white-400--hoverable {
  stroke: rgb(var(--color-white-400));
}
.stroke-color-white-400--hoverable:hover {
  stroke: rgb(var(--color-white-500));
}
.border-color--white-400 {
  border-color: rgb(var(--color-white-400)) !important;
}
.bg-white-500 {
  background-color: rgb(var(--color-white-500));
}
.color-white-500 {
  color: rgb(var(--color-white-500));
}
.fill-color-white-500 {
  fill: rgb(var(--color-white-500));
}
.fill-color-white-500--hoverable {
  fill: rgb(var(--color-white-500));
}
.fill-color-white-500--hoverable:hover {
  fill: rgb(var(--color-white-600));
}
.stroke-color-white-500 {
  stroke: rgb(var(--color-white-500));
}
.stroke-color-white-500--hoverable {
  stroke: rgb(var(--color-white-500));
}
.stroke-color-white-500--hoverable:hover {
  stroke: rgb(var(--color-white-600));
}
.border-color--white-500 {
  border-color: rgb(var(--color-white-500)) !important;
}
.bg-white-600 {
  background-color: rgb(var(--color-white-600));
}
.color-white-600 {
  color: rgb(var(--color-white-600));
}
.fill-color-white-600 {
  fill: rgb(var(--color-white-600));
}
.fill-color-white-600--hoverable {
  fill: rgb(var(--color-white-600));
}
.fill-color-white-600--hoverable:hover {
  fill: rgb(var(--color-white-700));
}
.stroke-color-white-600 {
  stroke: rgb(var(--color-white-600));
}
.stroke-color-white-600--hoverable {
  stroke: rgb(var(--color-white-600));
}
.stroke-color-white-600--hoverable:hover {
  stroke: rgb(var(--color-white-700));
}
.border-color--white-600 {
  border-color: rgb(var(--color-white-600)) !important;
}
.bg-white-700 {
  background-color: rgb(var(--color-white-700));
}
.color-white-700 {
  color: rgb(var(--color-white-700));
}
.fill-color-white-700 {
  fill: rgb(var(--color-white-700));
}
.fill-color-white-700--hoverable {
  fill: rgb(var(--color-white-700));
}
.fill-color-white-700--hoverable:hover {
  fill: rgb(var(--color-white-800));
}
.stroke-color-white-700 {
  stroke: rgb(var(--color-white-700));
}
.stroke-color-white-700--hoverable {
  stroke: rgb(var(--color-white-700));
}
.stroke-color-white-700--hoverable:hover {
  stroke: rgb(var(--color-white-800));
}
.border-color--white-700 {
  border-color: rgb(var(--color-white-700)) !important;
}
.bg-white-800 {
  background-color: rgb(var(--color-white-800));
}
.color-white-800 {
  color: rgb(var(--color-white-800));
}
.fill-color-white-800 {
  fill: rgb(var(--color-white-800));
}
.fill-color-white-800--hoverable {
  fill: rgb(var(--color-white-800));
}
.fill-color-white-800--hoverable:hover {
  fill: rgb(var(--color-white-900));
}
.stroke-color-white-800 {
  stroke: rgb(var(--color-white-800));
}
.stroke-color-white-800--hoverable {
  stroke: rgb(var(--color-white-800));
}
.stroke-color-white-800--hoverable:hover {
  stroke: rgb(var(--color-white-900));
}
.border-color--white-800 {
  border-color: rgb(var(--color-white-800)) !important;
}
.bg-black-100 {
  background-color: rgb(var(--color-black-100));
}
.color-black-100 {
  color: rgb(var(--color-black-100));
}
.fill-color-black-100 {
  fill: rgb(var(--color-black-100));
}
.fill-color-black-100--hoverable {
  fill: rgb(var(--color-black-100));
}
.fill-color-black-100--hoverable:hover {
  fill: rgb(var(--color-black-200));
}
.stroke-color-black-100 {
  stroke: rgb(var(--color-black-100));
}
.stroke-color-black-100--hoverable {
  stroke: rgb(var(--color-black-100));
}
.stroke-color-black-100--hoverable:hover {
  stroke: rgb(var(--color-black-200));
}
.border-color--black-100 {
  border-color: rgb(var(--color-black-100)) !important;
}
.bg-black-200 {
  background-color: rgb(var(--color-black-200));
}
.color-black-200 {
  color: rgb(var(--color-black-200));
}
.fill-color-black-200 {
  fill: rgb(var(--color-black-200));
}
.fill-color-black-200--hoverable {
  fill: rgb(var(--color-black-200));
}
.fill-color-black-200--hoverable:hover {
  fill: rgb(var(--color-black-300));
}
.stroke-color-black-200 {
  stroke: rgb(var(--color-black-200));
}
.stroke-color-black-200--hoverable {
  stroke: rgb(var(--color-black-200));
}
.stroke-color-black-200--hoverable:hover {
  stroke: rgb(var(--color-black-300));
}
.border-color--black-200 {
  border-color: rgb(var(--color-black-200)) !important;
}
.bg-black-300 {
  background-color: rgb(var(--color-black-300));
}
.color-black-300 {
  color: rgb(var(--color-black-300));
}
.fill-color-black-300 {
  fill: rgb(var(--color-black-300));
}
.fill-color-black-300--hoverable {
  fill: rgb(var(--color-black-300));
}
.fill-color-black-300--hoverable:hover {
  fill: rgb(var(--color-black-400));
}
.stroke-color-black-300 {
  stroke: rgb(var(--color-black-300));
}
.stroke-color-black-300--hoverable {
  stroke: rgb(var(--color-black-300));
}
.stroke-color-black-300--hoverable:hover {
  stroke: rgb(var(--color-black-400));
}
.border-color--black-300 {
  border-color: rgb(var(--color-black-300)) !important;
}
.bg-black-400 {
  background-color: rgb(var(--color-black-400));
}
.color-black-400 {
  color: rgb(var(--color-black-400));
}
.fill-color-black-400 {
  fill: rgb(var(--color-black-400));
}
.fill-color-black-400--hoverable {
  fill: rgb(var(--color-black-400));
}
.fill-color-black-400--hoverable:hover {
  fill: rgb(var(--color-black-500));
}
.stroke-color-black-400 {
  stroke: rgb(var(--color-black-400));
}
.stroke-color-black-400--hoverable {
  stroke: rgb(var(--color-black-400));
}
.stroke-color-black-400--hoverable:hover {
  stroke: rgb(var(--color-black-500));
}
.border-color--black-400 {
  border-color: rgb(var(--color-black-400)) !important;
}
.bg-black-500 {
  background-color: rgb(var(--color-black-500));
}
.color-black-500 {
  color: rgb(var(--color-black-500));
}
.fill-color-black-500 {
  fill: rgb(var(--color-black-500));
}
.fill-color-black-500--hoverable {
  fill: rgb(var(--color-black-500));
}
.fill-color-black-500--hoverable:hover {
  fill: rgb(var(--color-black-600));
}
.stroke-color-black-500 {
  stroke: rgb(var(--color-black-500));
}
.stroke-color-black-500--hoverable {
  stroke: rgb(var(--color-black-500));
}
.stroke-color-black-500--hoverable:hover {
  stroke: rgb(var(--color-black-600));
}
.border-color--black-500 {
  border-color: rgb(var(--color-black-500)) !important;
}
.bg-black-600 {
  background-color: rgb(var(--color-black-600));
}
.color-black-600 {
  color: rgb(var(--color-black-600));
}
.fill-color-black-600 {
  fill: rgb(var(--color-black-600));
}
.fill-color-black-600--hoverable {
  fill: rgb(var(--color-black-600));
}
.fill-color-black-600--hoverable:hover {
  fill: rgb(var(--color-black-700));
}
.stroke-color-black-600 {
  stroke: rgb(var(--color-black-600));
}
.stroke-color-black-600--hoverable {
  stroke: rgb(var(--color-black-600));
}
.stroke-color-black-600--hoverable:hover {
  stroke: rgb(var(--color-black-700));
}
.border-color--black-600 {
  border-color: rgb(var(--color-black-600)) !important;
}
.bg-black-700 {
  background-color: rgb(var(--color-black-700));
}
.color-black-700 {
  color: rgb(var(--color-black-700));
}
.fill-color-black-700 {
  fill: rgb(var(--color-black-700));
}
.fill-color-black-700--hoverable {
  fill: rgb(var(--color-black-700));
}
.fill-color-black-700--hoverable:hover {
  fill: rgb(var(--color-black-800));
}
.stroke-color-black-700 {
  stroke: rgb(var(--color-black-700));
}
.stroke-color-black-700--hoverable {
  stroke: rgb(var(--color-black-700));
}
.stroke-color-black-700--hoverable:hover {
  stroke: rgb(var(--color-black-800));
}
.border-color--black-700 {
  border-color: rgb(var(--color-black-700)) !important;
}
.bg-black-800 {
  background-color: rgb(var(--color-black-800));
}
.color-black-800 {
  color: rgb(var(--color-black-800));
}
.fill-color-black-800 {
  fill: rgb(var(--color-black-800));
}
.fill-color-black-800--hoverable {
  fill: rgb(var(--color-black-800));
}
.fill-color-black-800--hoverable:hover {
  fill: rgb(var(--color-black-900));
}
.stroke-color-black-800 {
  stroke: rgb(var(--color-black-800));
}
.stroke-color-black-800--hoverable {
  stroke: rgb(var(--color-black-800));
}
.stroke-color-black-800--hoverable:hover {
  stroke: rgb(var(--color-black-900));
}
.border-color--black-800 {
  border-color: rgb(var(--color-black-800)) !important;
}
.bg-error-100 {
  background-color: rgb(var(--color-error-100));
}
.color-error-100 {
  color: rgb(var(--color-error-100));
}
.fill-color-error-100 {
  fill: rgb(var(--color-error-100));
}
.fill-color-error-100--hoverable {
  fill: rgb(var(--color-error-100));
}
.fill-color-error-100--hoverable:hover {
  fill: rgb(var(--color-error-200));
}
.stroke-color-error-100 {
  stroke: rgb(var(--color-error-100));
}
.stroke-color-error-100--hoverable {
  stroke: rgb(var(--color-error-100));
}
.stroke-color-error-100--hoverable:hover {
  stroke: rgb(var(--color-error-200));
}
.border-color--error-100 {
  border-color: rgb(var(--color-error-100)) !important;
}
.bg-error-200 {
  background-color: rgb(var(--color-error-200));
}
.color-error-200 {
  color: rgb(var(--color-error-200));
}
.fill-color-error-200 {
  fill: rgb(var(--color-error-200));
}
.fill-color-error-200--hoverable {
  fill: rgb(var(--color-error-200));
}
.fill-color-error-200--hoverable:hover {
  fill: rgb(var(--color-error-300));
}
.stroke-color-error-200 {
  stroke: rgb(var(--color-error-200));
}
.stroke-color-error-200--hoverable {
  stroke: rgb(var(--color-error-200));
}
.stroke-color-error-200--hoverable:hover {
  stroke: rgb(var(--color-error-300));
}
.border-color--error-200 {
  border-color: rgb(var(--color-error-200)) !important;
}
.bg-error-300 {
  background-color: rgb(var(--color-error-300));
}
.color-error-300 {
  color: rgb(var(--color-error-300));
}
.fill-color-error-300 {
  fill: rgb(var(--color-error-300));
}
.fill-color-error-300--hoverable {
  fill: rgb(var(--color-error-300));
}
.fill-color-error-300--hoverable:hover {
  fill: rgb(var(--color-error-400));
}
.stroke-color-error-300 {
  stroke: rgb(var(--color-error-300));
}
.stroke-color-error-300--hoverable {
  stroke: rgb(var(--color-error-300));
}
.stroke-color-error-300--hoverable:hover {
  stroke: rgb(var(--color-error-400));
}
.border-color--error-300 {
  border-color: rgb(var(--color-error-300)) !important;
}
.bg-error-400 {
  background-color: rgb(var(--color-error-400));
}
.color-error-400 {
  color: rgb(var(--color-error-400));
}
.fill-color-error-400 {
  fill: rgb(var(--color-error-400));
}
.fill-color-error-400--hoverable {
  fill: rgb(var(--color-error-400));
}
.fill-color-error-400--hoverable:hover {
  fill: rgb(var(--color-error-500));
}
.stroke-color-error-400 {
  stroke: rgb(var(--color-error-400));
}
.stroke-color-error-400--hoverable {
  stroke: rgb(var(--color-error-400));
}
.stroke-color-error-400--hoverable:hover {
  stroke: rgb(var(--color-error-500));
}
.border-color--error-400 {
  border-color: rgb(var(--color-error-400)) !important;
}
.bg-error-500 {
  background-color: rgb(var(--color-error-500));
}
.color-error-500 {
  color: rgb(var(--color-error-500));
}
.fill-color-error-500 {
  fill: rgb(var(--color-error-500));
}
.fill-color-error-500--hoverable {
  fill: rgb(var(--color-error-500));
}
.fill-color-error-500--hoverable:hover {
  fill: rgb(var(--color-error-600));
}
.stroke-color-error-500 {
  stroke: rgb(var(--color-error-500));
}
.stroke-color-error-500--hoverable {
  stroke: rgb(var(--color-error-500));
}
.stroke-color-error-500--hoverable:hover {
  stroke: rgb(var(--color-error-600));
}
.border-color--error-500 {
  border-color: rgb(var(--color-error-500)) !important;
}
.bg-error-600 {
  background-color: rgb(var(--color-error-600));
}
.color-error-600 {
  color: rgb(var(--color-error-600));
}
.fill-color-error-600 {
  fill: rgb(var(--color-error-600));
}
.fill-color-error-600--hoverable {
  fill: rgb(var(--color-error-600));
}
.fill-color-error-600--hoverable:hover {
  fill: rgb(var(--color-error-700));
}
.stroke-color-error-600 {
  stroke: rgb(var(--color-error-600));
}
.stroke-color-error-600--hoverable {
  stroke: rgb(var(--color-error-600));
}
.stroke-color-error-600--hoverable:hover {
  stroke: rgb(var(--color-error-700));
}
.border-color--error-600 {
  border-color: rgb(var(--color-error-600)) !important;
}
.bg-error-700 {
  background-color: rgb(var(--color-error-700));
}
.color-error-700 {
  color: rgb(var(--color-error-700));
}
.fill-color-error-700 {
  fill: rgb(var(--color-error-700));
}
.fill-color-error-700--hoverable {
  fill: rgb(var(--color-error-700));
}
.fill-color-error-700--hoverable:hover {
  fill: rgb(var(--color-error-800));
}
.stroke-color-error-700 {
  stroke: rgb(var(--color-error-700));
}
.stroke-color-error-700--hoverable {
  stroke: rgb(var(--color-error-700));
}
.stroke-color-error-700--hoverable:hover {
  stroke: rgb(var(--color-error-800));
}
.border-color--error-700 {
  border-color: rgb(var(--color-error-700)) !important;
}
.bg-error-800 {
  background-color: rgb(var(--color-error-800));
}
.color-error-800 {
  color: rgb(var(--color-error-800));
}
.fill-color-error-800 {
  fill: rgb(var(--color-error-800));
}
.fill-color-error-800--hoverable {
  fill: rgb(var(--color-error-800));
}
.fill-color-error-800--hoverable:hover {
  fill: rgb(var(--color-error-900));
}
.stroke-color-error-800 {
  stroke: rgb(var(--color-error-800));
}
.stroke-color-error-800--hoverable {
  stroke: rgb(var(--color-error-800));
}
.stroke-color-error-800--hoverable:hover {
  stroke: rgb(var(--color-error-900));
}
.border-color--error-800 {
  border-color: rgb(var(--color-error-800)) !important;
}
.bg-success-100 {
  background-color: rgb(var(--color-success-100));
}
.color-success-100 {
  color: rgb(var(--color-success-100));
}
.fill-color-success-100 {
  fill: rgb(var(--color-success-100));
}
.fill-color-success-100--hoverable {
  fill: rgb(var(--color-success-100));
}
.fill-color-success-100--hoverable:hover {
  fill: rgb(var(--color-success-200));
}
.stroke-color-success-100 {
  stroke: rgb(var(--color-success-100));
}
.stroke-color-success-100--hoverable {
  stroke: rgb(var(--color-success-100));
}
.stroke-color-success-100--hoverable:hover {
  stroke: rgb(var(--color-success-200));
}
.border-color--success-100 {
  border-color: rgb(var(--color-success-100)) !important;
}
.bg-success-200 {
  background-color: rgb(var(--color-success-200));
}
.color-success-200 {
  color: rgb(var(--color-success-200));
}
.fill-color-success-200 {
  fill: rgb(var(--color-success-200));
}
.fill-color-success-200--hoverable {
  fill: rgb(var(--color-success-200));
}
.fill-color-success-200--hoverable:hover {
  fill: rgb(var(--color-success-300));
}
.stroke-color-success-200 {
  stroke: rgb(var(--color-success-200));
}
.stroke-color-success-200--hoverable {
  stroke: rgb(var(--color-success-200));
}
.stroke-color-success-200--hoverable:hover {
  stroke: rgb(var(--color-success-300));
}
.border-color--success-200 {
  border-color: rgb(var(--color-success-200)) !important;
}
.bg-success-300 {
  background-color: rgb(var(--color-success-300));
}
.color-success-300 {
  color: rgb(var(--color-success-300));
}
.fill-color-success-300 {
  fill: rgb(var(--color-success-300));
}
.fill-color-success-300--hoverable {
  fill: rgb(var(--color-success-300));
}
.fill-color-success-300--hoverable:hover {
  fill: rgb(var(--color-success-400));
}
.stroke-color-success-300 {
  stroke: rgb(var(--color-success-300));
}
.stroke-color-success-300--hoverable {
  stroke: rgb(var(--color-success-300));
}
.stroke-color-success-300--hoverable:hover {
  stroke: rgb(var(--color-success-400));
}
.border-color--success-300 {
  border-color: rgb(var(--color-success-300)) !important;
}
.bg-success-400 {
  background-color: rgb(var(--color-success-400));
}
.color-success-400 {
  color: rgb(var(--color-success-400));
}
.fill-color-success-400 {
  fill: rgb(var(--color-success-400));
}
.fill-color-success-400--hoverable {
  fill: rgb(var(--color-success-400));
}
.fill-color-success-400--hoverable:hover {
  fill: rgb(var(--color-success-500));
}
.stroke-color-success-400 {
  stroke: rgb(var(--color-success-400));
}
.stroke-color-success-400--hoverable {
  stroke: rgb(var(--color-success-400));
}
.stroke-color-success-400--hoverable:hover {
  stroke: rgb(var(--color-success-500));
}
.border-color--success-400 {
  border-color: rgb(var(--color-success-400)) !important;
}
.bg-success-500 {
  background-color: rgb(var(--color-success-500));
}
.color-success-500 {
  color: rgb(var(--color-success-500));
}
.fill-color-success-500 {
  fill: rgb(var(--color-success-500));
}
.fill-color-success-500--hoverable {
  fill: rgb(var(--color-success-500));
}
.fill-color-success-500--hoverable:hover {
  fill: rgb(var(--color-success-600));
}
.stroke-color-success-500 {
  stroke: rgb(var(--color-success-500));
}
.stroke-color-success-500--hoverable {
  stroke: rgb(var(--color-success-500));
}
.stroke-color-success-500--hoverable:hover {
  stroke: rgb(var(--color-success-600));
}
.border-color--success-500 {
  border-color: rgb(var(--color-success-500)) !important;
}
.bg-success-600 {
  background-color: rgb(var(--color-success-600));
}
.color-success-600 {
  color: rgb(var(--color-success-600));
}
.fill-color-success-600 {
  fill: rgb(var(--color-success-600));
}
.fill-color-success-600--hoverable {
  fill: rgb(var(--color-success-600));
}
.fill-color-success-600--hoverable:hover {
  fill: rgb(var(--color-success-700));
}
.stroke-color-success-600 {
  stroke: rgb(var(--color-success-600));
}
.stroke-color-success-600--hoverable {
  stroke: rgb(var(--color-success-600));
}
.stroke-color-success-600--hoverable:hover {
  stroke: rgb(var(--color-success-700));
}
.border-color--success-600 {
  border-color: rgb(var(--color-success-600)) !important;
}
.bg-success-700 {
  background-color: rgb(var(--color-success-700));
}
.color-success-700 {
  color: rgb(var(--color-success-700));
}
.fill-color-success-700 {
  fill: rgb(var(--color-success-700));
}
.fill-color-success-700--hoverable {
  fill: rgb(var(--color-success-700));
}
.fill-color-success-700--hoverable:hover {
  fill: rgb(var(--color-success-800));
}
.stroke-color-success-700 {
  stroke: rgb(var(--color-success-700));
}
.stroke-color-success-700--hoverable {
  stroke: rgb(var(--color-success-700));
}
.stroke-color-success-700--hoverable:hover {
  stroke: rgb(var(--color-success-800));
}
.border-color--success-700 {
  border-color: rgb(var(--color-success-700)) !important;
}
.bg-success-800 {
  background-color: rgb(var(--color-success-800));
}
.color-success-800 {
  color: rgb(var(--color-success-800));
}
.fill-color-success-800 {
  fill: rgb(var(--color-success-800));
}
.fill-color-success-800--hoverable {
  fill: rgb(var(--color-success-800));
}
.fill-color-success-800--hoverable:hover {
  fill: rgb(var(--color-success-900));
}
.stroke-color-success-800 {
  stroke: rgb(var(--color-success-800));
}
.stroke-color-success-800--hoverable {
  stroke: rgb(var(--color-success-800));
}
.stroke-color-success-800--hoverable:hover {
  stroke: rgb(var(--color-success-900));
}
.border-color--success-800 {
  border-color: rgb(var(--color-success-800)) !important;
}
.bg-warning-100 {
  background-color: rgb(var(--color-warning-100));
}
.color-warning-100 {
  color: rgb(var(--color-warning-100));
}
.fill-color-warning-100 {
  fill: rgb(var(--color-warning-100));
}
.fill-color-warning-100--hoverable {
  fill: rgb(var(--color-warning-100));
}
.fill-color-warning-100--hoverable:hover {
  fill: rgb(var(--color-warning-200));
}
.stroke-color-warning-100 {
  stroke: rgb(var(--color-warning-100));
}
.stroke-color-warning-100--hoverable {
  stroke: rgb(var(--color-warning-100));
}
.stroke-color-warning-100--hoverable:hover {
  stroke: rgb(var(--color-warning-200));
}
.border-color--warning-100 {
  border-color: rgb(var(--color-warning-100)) !important;
}
.bg-warning-200 {
  background-color: rgb(var(--color-warning-200));
}
.color-warning-200 {
  color: rgb(var(--color-warning-200));
}
.fill-color-warning-200 {
  fill: rgb(var(--color-warning-200));
}
.fill-color-warning-200--hoverable {
  fill: rgb(var(--color-warning-200));
}
.fill-color-warning-200--hoverable:hover {
  fill: rgb(var(--color-warning-300));
}
.stroke-color-warning-200 {
  stroke: rgb(var(--color-warning-200));
}
.stroke-color-warning-200--hoverable {
  stroke: rgb(var(--color-warning-200));
}
.stroke-color-warning-200--hoverable:hover {
  stroke: rgb(var(--color-warning-300));
}
.border-color--warning-200 {
  border-color: rgb(var(--color-warning-200)) !important;
}
.bg-warning-300 {
  background-color: rgb(var(--color-warning-300));
}
.color-warning-300 {
  color: rgb(var(--color-warning-300));
}
.fill-color-warning-300 {
  fill: rgb(var(--color-warning-300));
}
.fill-color-warning-300--hoverable {
  fill: rgb(var(--color-warning-300));
}
.fill-color-warning-300--hoverable:hover {
  fill: rgb(var(--color-warning-400));
}
.stroke-color-warning-300 {
  stroke: rgb(var(--color-warning-300));
}
.stroke-color-warning-300--hoverable {
  stroke: rgb(var(--color-warning-300));
}
.stroke-color-warning-300--hoverable:hover {
  stroke: rgb(var(--color-warning-400));
}
.border-color--warning-300 {
  border-color: rgb(var(--color-warning-300)) !important;
}
.bg-warning-400 {
  background-color: rgb(var(--color-warning-400));
}
.color-warning-400 {
  color: rgb(var(--color-warning-400));
}
.fill-color-warning-400 {
  fill: rgb(var(--color-warning-400));
}
.fill-color-warning-400--hoverable {
  fill: rgb(var(--color-warning-400));
}
.fill-color-warning-400--hoverable:hover {
  fill: rgb(var(--color-warning-500));
}
.stroke-color-warning-400 {
  stroke: rgb(var(--color-warning-400));
}
.stroke-color-warning-400--hoverable {
  stroke: rgb(var(--color-warning-400));
}
.stroke-color-warning-400--hoverable:hover {
  stroke: rgb(var(--color-warning-500));
}
.border-color--warning-400 {
  border-color: rgb(var(--color-warning-400)) !important;
}
.bg-warning-500 {
  background-color: rgb(var(--color-warning-500));
}
.color-warning-500 {
  color: rgb(var(--color-warning-500));
}
.fill-color-warning-500 {
  fill: rgb(var(--color-warning-500));
}
.fill-color-warning-500--hoverable {
  fill: rgb(var(--color-warning-500));
}
.fill-color-warning-500--hoverable:hover {
  fill: rgb(var(--color-warning-600));
}
.stroke-color-warning-500 {
  stroke: rgb(var(--color-warning-500));
}
.stroke-color-warning-500--hoverable {
  stroke: rgb(var(--color-warning-500));
}
.stroke-color-warning-500--hoverable:hover {
  stroke: rgb(var(--color-warning-600));
}
.border-color--warning-500 {
  border-color: rgb(var(--color-warning-500)) !important;
}
.bg-warning-600 {
  background-color: rgb(var(--color-warning-600));
}
.color-warning-600 {
  color: rgb(var(--color-warning-600));
}
.fill-color-warning-600 {
  fill: rgb(var(--color-warning-600));
}
.fill-color-warning-600--hoverable {
  fill: rgb(var(--color-warning-600));
}
.fill-color-warning-600--hoverable:hover {
  fill: rgb(var(--color-warning-700));
}
.stroke-color-warning-600 {
  stroke: rgb(var(--color-warning-600));
}
.stroke-color-warning-600--hoverable {
  stroke: rgb(var(--color-warning-600));
}
.stroke-color-warning-600--hoverable:hover {
  stroke: rgb(var(--color-warning-700));
}
.border-color--warning-600 {
  border-color: rgb(var(--color-warning-600)) !important;
}
.bg-warning-700 {
  background-color: rgb(var(--color-warning-700));
}
.color-warning-700 {
  color: rgb(var(--color-warning-700));
}
.fill-color-warning-700 {
  fill: rgb(var(--color-warning-700));
}
.fill-color-warning-700--hoverable {
  fill: rgb(var(--color-warning-700));
}
.fill-color-warning-700--hoverable:hover {
  fill: rgb(var(--color-warning-800));
}
.stroke-color-warning-700 {
  stroke: rgb(var(--color-warning-700));
}
.stroke-color-warning-700--hoverable {
  stroke: rgb(var(--color-warning-700));
}
.stroke-color-warning-700--hoverable:hover {
  stroke: rgb(var(--color-warning-800));
}
.border-color--warning-700 {
  border-color: rgb(var(--color-warning-700)) !important;
}
.bg-warning-800 {
  background-color: rgb(var(--color-warning-800));
}
.color-warning-800 {
  color: rgb(var(--color-warning-800));
}
.fill-color-warning-800 {
  fill: rgb(var(--color-warning-800));
}
.fill-color-warning-800--hoverable {
  fill: rgb(var(--color-warning-800));
}
.fill-color-warning-800--hoverable:hover {
  fill: rgb(var(--color-warning-900));
}
.stroke-color-warning-800 {
  stroke: rgb(var(--color-warning-800));
}
.stroke-color-warning-800--hoverable {
  stroke: rgb(var(--color-warning-800));
}
.stroke-color-warning-800--hoverable:hover {
  stroke: rgb(var(--color-warning-900));
}
.border-color--warning-800 {
  border-color: rgb(var(--color-warning-800)) !important;
}
.bg-teal-100 {
  background-color: rgb(var(--color-teal-100));
}
.color-teal-100 {
  color: rgb(var(--color-teal-100));
}
.fill-color-teal-100 {
  fill: rgb(var(--color-teal-100));
}
.fill-color-teal-100--hoverable {
  fill: rgb(var(--color-teal-100));
}
.fill-color-teal-100--hoverable:hover {
  fill: rgb(var(--color-teal-200));
}
.stroke-color-teal-100 {
  stroke: rgb(var(--color-teal-100));
}
.stroke-color-teal-100--hoverable {
  stroke: rgb(var(--color-teal-100));
}
.stroke-color-teal-100--hoverable:hover {
  stroke: rgb(var(--color-teal-200));
}
.border-color--teal-100 {
  border-color: rgb(var(--color-teal-100)) !important;
}
.bg-teal-200 {
  background-color: rgb(var(--color-teal-200));
}
.color-teal-200 {
  color: rgb(var(--color-teal-200));
}
.fill-color-teal-200 {
  fill: rgb(var(--color-teal-200));
}
.fill-color-teal-200--hoverable {
  fill: rgb(var(--color-teal-200));
}
.fill-color-teal-200--hoverable:hover {
  fill: rgb(var(--color-teal-300));
}
.stroke-color-teal-200 {
  stroke: rgb(var(--color-teal-200));
}
.stroke-color-teal-200--hoverable {
  stroke: rgb(var(--color-teal-200));
}
.stroke-color-teal-200--hoverable:hover {
  stroke: rgb(var(--color-teal-300));
}
.border-color--teal-200 {
  border-color: rgb(var(--color-teal-200)) !important;
}
.bg-teal-300 {
  background-color: rgb(var(--color-teal-300));
}
.color-teal-300 {
  color: rgb(var(--color-teal-300));
}
.fill-color-teal-300 {
  fill: rgb(var(--color-teal-300));
}
.fill-color-teal-300--hoverable {
  fill: rgb(var(--color-teal-300));
}
.fill-color-teal-300--hoverable:hover {
  fill: rgb(var(--color-teal-400));
}
.stroke-color-teal-300 {
  stroke: rgb(var(--color-teal-300));
}
.stroke-color-teal-300--hoverable {
  stroke: rgb(var(--color-teal-300));
}
.stroke-color-teal-300--hoverable:hover {
  stroke: rgb(var(--color-teal-400));
}
.border-color--teal-300 {
  border-color: rgb(var(--color-teal-300)) !important;
}
.bg-teal-400 {
  background-color: rgb(var(--color-teal-400));
}
.color-teal-400 {
  color: rgb(var(--color-teal-400));
}
.fill-color-teal-400 {
  fill: rgb(var(--color-teal-400));
}
.fill-color-teal-400--hoverable {
  fill: rgb(var(--color-teal-400));
}
.fill-color-teal-400--hoverable:hover {
  fill: rgb(var(--color-teal-500));
}
.stroke-color-teal-400 {
  stroke: rgb(var(--color-teal-400));
}
.stroke-color-teal-400--hoverable {
  stroke: rgb(var(--color-teal-400));
}
.stroke-color-teal-400--hoverable:hover {
  stroke: rgb(var(--color-teal-500));
}
.border-color--teal-400 {
  border-color: rgb(var(--color-teal-400)) !important;
}
.bg-teal-500 {
  background-color: rgb(var(--color-teal-500));
}
.color-teal-500 {
  color: rgb(var(--color-teal-500));
}
.fill-color-teal-500 {
  fill: rgb(var(--color-teal-500));
}
.fill-color-teal-500--hoverable {
  fill: rgb(var(--color-teal-500));
}
.fill-color-teal-500--hoverable:hover {
  fill: rgb(var(--color-teal-600));
}
.stroke-color-teal-500 {
  stroke: rgb(var(--color-teal-500));
}
.stroke-color-teal-500--hoverable {
  stroke: rgb(var(--color-teal-500));
}
.stroke-color-teal-500--hoverable:hover {
  stroke: rgb(var(--color-teal-600));
}
.border-color--teal-500 {
  border-color: rgb(var(--color-teal-500)) !important;
}
.bg-teal-600 {
  background-color: rgb(var(--color-teal-600));
}
.color-teal-600 {
  color: rgb(var(--color-teal-600));
}
.fill-color-teal-600 {
  fill: rgb(var(--color-teal-600));
}
.fill-color-teal-600--hoverable {
  fill: rgb(var(--color-teal-600));
}
.fill-color-teal-600--hoverable:hover {
  fill: rgb(var(--color-teal-700));
}
.stroke-color-teal-600 {
  stroke: rgb(var(--color-teal-600));
}
.stroke-color-teal-600--hoverable {
  stroke: rgb(var(--color-teal-600));
}
.stroke-color-teal-600--hoverable:hover {
  stroke: rgb(var(--color-teal-700));
}
.border-color--teal-600 {
  border-color: rgb(var(--color-teal-600)) !important;
}
.bg-teal-700 {
  background-color: rgb(var(--color-teal-700));
}
.color-teal-700 {
  color: rgb(var(--color-teal-700));
}
.fill-color-teal-700 {
  fill: rgb(var(--color-teal-700));
}
.fill-color-teal-700--hoverable {
  fill: rgb(var(--color-teal-700));
}
.fill-color-teal-700--hoverable:hover {
  fill: rgb(var(--color-teal-800));
}
.stroke-color-teal-700 {
  stroke: rgb(var(--color-teal-700));
}
.stroke-color-teal-700--hoverable {
  stroke: rgb(var(--color-teal-700));
}
.stroke-color-teal-700--hoverable:hover {
  stroke: rgb(var(--color-teal-800));
}
.border-color--teal-700 {
  border-color: rgb(var(--color-teal-700)) !important;
}
.bg-teal-800 {
  background-color: rgb(var(--color-teal-800));
}
.color-teal-800 {
  color: rgb(var(--color-teal-800));
}
.fill-color-teal-800 {
  fill: rgb(var(--color-teal-800));
}
.fill-color-teal-800--hoverable {
  fill: rgb(var(--color-teal-800));
}
.fill-color-teal-800--hoverable:hover {
  fill: rgb(var(--color-teal-900));
}
.stroke-color-teal-800 {
  stroke: rgb(var(--color-teal-800));
}
.stroke-color-teal-800--hoverable {
  stroke: rgb(var(--color-teal-800));
}
.stroke-color-teal-800--hoverable:hover {
  stroke: rgb(var(--color-teal-900));
}
.border-color--teal-800 {
  border-color: rgb(var(--color-teal-800)) !important;
}
.bg-extra-red-100 {
  background-color: rgb(var(--color-extra-red-100));
}
.color-extra-red-100 {
  color: rgb(var(--color-extra-red-100));
}
.fill-color-extra-red-100 {
  fill: rgb(var(--color-extra-red-100));
}
.fill-color-extra-red-100--hoverable {
  fill: rgb(var(--color-extra-red-100));
}
.fill-color-extra-red-100--hoverable:hover {
  fill: rgb(var(--color-extra-red-200));
}
.stroke-color-extra-red-100 {
  stroke: rgb(var(--color-extra-red-100));
}
.stroke-color-extra-red-100--hoverable {
  stroke: rgb(var(--color-extra-red-100));
}
.stroke-color-extra-red-100--hoverable:hover {
  stroke: rgb(var(--color-extra-red-200));
}
.border-color--extra-red-100 {
  border-color: rgb(var(--color-extra-red-100)) !important;
}
.bg-extra-red-200 {
  background-color: rgb(var(--color-extra-red-200));
}
.color-extra-red-200 {
  color: rgb(var(--color-extra-red-200));
}
.fill-color-extra-red-200 {
  fill: rgb(var(--color-extra-red-200));
}
.fill-color-extra-red-200--hoverable {
  fill: rgb(var(--color-extra-red-200));
}
.fill-color-extra-red-200--hoverable:hover {
  fill: rgb(var(--color-extra-red-300));
}
.stroke-color-extra-red-200 {
  stroke: rgb(var(--color-extra-red-200));
}
.stroke-color-extra-red-200--hoverable {
  stroke: rgb(var(--color-extra-red-200));
}
.stroke-color-extra-red-200--hoverable:hover {
  stroke: rgb(var(--color-extra-red-300));
}
.border-color--extra-red-200 {
  border-color: rgb(var(--color-extra-red-200)) !important;
}
.bg-extra-red-300 {
  background-color: rgb(var(--color-extra-red-300));
}
.color-extra-red-300 {
  color: rgb(var(--color-extra-red-300));
}
.fill-color-extra-red-300 {
  fill: rgb(var(--color-extra-red-300));
}
.fill-color-extra-red-300--hoverable {
  fill: rgb(var(--color-extra-red-300));
}
.fill-color-extra-red-300--hoverable:hover {
  fill: rgb(var(--color-extra-red-400));
}
.stroke-color-extra-red-300 {
  stroke: rgb(var(--color-extra-red-300));
}
.stroke-color-extra-red-300--hoverable {
  stroke: rgb(var(--color-extra-red-300));
}
.stroke-color-extra-red-300--hoverable:hover {
  stroke: rgb(var(--color-extra-red-400));
}
.border-color--extra-red-300 {
  border-color: rgb(var(--color-extra-red-300)) !important;
}
.bg-extra-red-400 {
  background-color: rgb(var(--color-extra-red-400));
}
.color-extra-red-400 {
  color: rgb(var(--color-extra-red-400));
}
.fill-color-extra-red-400 {
  fill: rgb(var(--color-extra-red-400));
}
.fill-color-extra-red-400--hoverable {
  fill: rgb(var(--color-extra-red-400));
}
.fill-color-extra-red-400--hoverable:hover {
  fill: rgb(var(--color-extra-red-500));
}
.stroke-color-extra-red-400 {
  stroke: rgb(var(--color-extra-red-400));
}
.stroke-color-extra-red-400--hoverable {
  stroke: rgb(var(--color-extra-red-400));
}
.stroke-color-extra-red-400--hoverable:hover {
  stroke: rgb(var(--color-extra-red-500));
}
.border-color--extra-red-400 {
  border-color: rgb(var(--color-extra-red-400)) !important;
}
.bg-extra-red-500 {
  background-color: rgb(var(--color-extra-red-500));
}
.color-extra-red-500 {
  color: rgb(var(--color-extra-red-500));
}
.fill-color-extra-red-500 {
  fill: rgb(var(--color-extra-red-500));
}
.fill-color-extra-red-500--hoverable {
  fill: rgb(var(--color-extra-red-500));
}
.fill-color-extra-red-500--hoverable:hover {
  fill: rgb(var(--color-extra-red-600));
}
.stroke-color-extra-red-500 {
  stroke: rgb(var(--color-extra-red-500));
}
.stroke-color-extra-red-500--hoverable {
  stroke: rgb(var(--color-extra-red-500));
}
.stroke-color-extra-red-500--hoverable:hover {
  stroke: rgb(var(--color-extra-red-600));
}
.border-color--extra-red-500 {
  border-color: rgb(var(--color-extra-red-500)) !important;
}
.bg-extra-red-600 {
  background-color: rgb(var(--color-extra-red-600));
}
.color-extra-red-600 {
  color: rgb(var(--color-extra-red-600));
}
.fill-color-extra-red-600 {
  fill: rgb(var(--color-extra-red-600));
}
.fill-color-extra-red-600--hoverable {
  fill: rgb(var(--color-extra-red-600));
}
.fill-color-extra-red-600--hoverable:hover {
  fill: rgb(var(--color-extra-red-700));
}
.stroke-color-extra-red-600 {
  stroke: rgb(var(--color-extra-red-600));
}
.stroke-color-extra-red-600--hoverable {
  stroke: rgb(var(--color-extra-red-600));
}
.stroke-color-extra-red-600--hoverable:hover {
  stroke: rgb(var(--color-extra-red-700));
}
.border-color--extra-red-600 {
  border-color: rgb(var(--color-extra-red-600)) !important;
}
.bg-extra-red-700 {
  background-color: rgb(var(--color-extra-red-700));
}
.color-extra-red-700 {
  color: rgb(var(--color-extra-red-700));
}
.fill-color-extra-red-700 {
  fill: rgb(var(--color-extra-red-700));
}
.fill-color-extra-red-700--hoverable {
  fill: rgb(var(--color-extra-red-700));
}
.fill-color-extra-red-700--hoverable:hover {
  fill: rgb(var(--color-extra-red-800));
}
.stroke-color-extra-red-700 {
  stroke: rgb(var(--color-extra-red-700));
}
.stroke-color-extra-red-700--hoverable {
  stroke: rgb(var(--color-extra-red-700));
}
.stroke-color-extra-red-700--hoverable:hover {
  stroke: rgb(var(--color-extra-red-800));
}
.border-color--extra-red-700 {
  border-color: rgb(var(--color-extra-red-700)) !important;
}
.bg-extra-red-800 {
  background-color: rgb(var(--color-extra-red-800));
}
.color-extra-red-800 {
  color: rgb(var(--color-extra-red-800));
}
.fill-color-extra-red-800 {
  fill: rgb(var(--color-extra-red-800));
}
.fill-color-extra-red-800--hoverable {
  fill: rgb(var(--color-extra-red-800));
}
.fill-color-extra-red-800--hoverable:hover {
  fill: rgb(var(--color-extra-red-900));
}
.stroke-color-extra-red-800 {
  stroke: rgb(var(--color-extra-red-800));
}
.stroke-color-extra-red-800--hoverable {
  stroke: rgb(var(--color-extra-red-800));
}
.stroke-color-extra-red-800--hoverable:hover {
  stroke: rgb(var(--color-extra-red-900));
}
.border-color--extra-red-800 {
  border-color: rgb(var(--color-extra-red-800)) !important;
}
.bg-extra-orange-100 {
  background-color: rgb(var(--color-extra-orange-100));
}
.color-extra-orange-100 {
  color: rgb(var(--color-extra-orange-100));
}
.fill-color-extra-orange-100 {
  fill: rgb(var(--color-extra-orange-100));
}
.fill-color-extra-orange-100--hoverable {
  fill: rgb(var(--color-extra-orange-100));
}
.fill-color-extra-orange-100--hoverable:hover {
  fill: rgb(var(--color-extra-orange-200));
}
.stroke-color-extra-orange-100 {
  stroke: rgb(var(--color-extra-orange-100));
}
.stroke-color-extra-orange-100--hoverable {
  stroke: rgb(var(--color-extra-orange-100));
}
.stroke-color-extra-orange-100--hoverable:hover {
  stroke: rgb(var(--color-extra-orange-200));
}
.border-color--extra-orange-100 {
  border-color: rgb(var(--color-extra-orange-100)) !important;
}
.bg-extra-orange-200 {
  background-color: rgb(var(--color-extra-orange-200));
}
.color-extra-orange-200 {
  color: rgb(var(--color-extra-orange-200));
}
.fill-color-extra-orange-200 {
  fill: rgb(var(--color-extra-orange-200));
}
.fill-color-extra-orange-200--hoverable {
  fill: rgb(var(--color-extra-orange-200));
}
.fill-color-extra-orange-200--hoverable:hover {
  fill: rgb(var(--color-extra-orange-300));
}
.stroke-color-extra-orange-200 {
  stroke: rgb(var(--color-extra-orange-200));
}
.stroke-color-extra-orange-200--hoverable {
  stroke: rgb(var(--color-extra-orange-200));
}
.stroke-color-extra-orange-200--hoverable:hover {
  stroke: rgb(var(--color-extra-orange-300));
}
.border-color--extra-orange-200 {
  border-color: rgb(var(--color-extra-orange-200)) !important;
}
.bg-extra-orange-300 {
  background-color: rgb(var(--color-extra-orange-300));
}
.color-extra-orange-300 {
  color: rgb(var(--color-extra-orange-300));
}
.fill-color-extra-orange-300 {
  fill: rgb(var(--color-extra-orange-300));
}
.fill-color-extra-orange-300--hoverable {
  fill: rgb(var(--color-extra-orange-300));
}
.fill-color-extra-orange-300--hoverable:hover {
  fill: rgb(var(--color-extra-orange-400));
}
.stroke-color-extra-orange-300 {
  stroke: rgb(var(--color-extra-orange-300));
}
.stroke-color-extra-orange-300--hoverable {
  stroke: rgb(var(--color-extra-orange-300));
}
.stroke-color-extra-orange-300--hoverable:hover {
  stroke: rgb(var(--color-extra-orange-400));
}
.border-color--extra-orange-300 {
  border-color: rgb(var(--color-extra-orange-300)) !important;
}
.bg-extra-orange-400 {
  background-color: rgb(var(--color-extra-orange-400));
}
.color-extra-orange-400 {
  color: rgb(var(--color-extra-orange-400));
}
.fill-color-extra-orange-400 {
  fill: rgb(var(--color-extra-orange-400));
}
.fill-color-extra-orange-400--hoverable {
  fill: rgb(var(--color-extra-orange-400));
}
.fill-color-extra-orange-400--hoverable:hover {
  fill: rgb(var(--color-extra-orange-500));
}
.stroke-color-extra-orange-400 {
  stroke: rgb(var(--color-extra-orange-400));
}
.stroke-color-extra-orange-400--hoverable {
  stroke: rgb(var(--color-extra-orange-400));
}
.stroke-color-extra-orange-400--hoverable:hover {
  stroke: rgb(var(--color-extra-orange-500));
}
.border-color--extra-orange-400 {
  border-color: rgb(var(--color-extra-orange-400)) !important;
}
.bg-extra-orange-500 {
  background-color: rgb(var(--color-extra-orange-500));
}
.color-extra-orange-500 {
  color: rgb(var(--color-extra-orange-500));
}
.fill-color-extra-orange-500 {
  fill: rgb(var(--color-extra-orange-500));
}
.fill-color-extra-orange-500--hoverable {
  fill: rgb(var(--color-extra-orange-500));
}
.fill-color-extra-orange-500--hoverable:hover {
  fill: rgb(var(--color-extra-orange-600));
}
.stroke-color-extra-orange-500 {
  stroke: rgb(var(--color-extra-orange-500));
}
.stroke-color-extra-orange-500--hoverable {
  stroke: rgb(var(--color-extra-orange-500));
}
.stroke-color-extra-orange-500--hoverable:hover {
  stroke: rgb(var(--color-extra-orange-600));
}
.border-color--extra-orange-500 {
  border-color: rgb(var(--color-extra-orange-500)) !important;
}
.bg-extra-orange-600 {
  background-color: rgb(var(--color-extra-orange-600));
}
.color-extra-orange-600 {
  color: rgb(var(--color-extra-orange-600));
}
.fill-color-extra-orange-600 {
  fill: rgb(var(--color-extra-orange-600));
}
.fill-color-extra-orange-600--hoverable {
  fill: rgb(var(--color-extra-orange-600));
}
.fill-color-extra-orange-600--hoverable:hover {
  fill: rgb(var(--color-extra-orange-700));
}
.stroke-color-extra-orange-600 {
  stroke: rgb(var(--color-extra-orange-600));
}
.stroke-color-extra-orange-600--hoverable {
  stroke: rgb(var(--color-extra-orange-600));
}
.stroke-color-extra-orange-600--hoverable:hover {
  stroke: rgb(var(--color-extra-orange-700));
}
.border-color--extra-orange-600 {
  border-color: rgb(var(--color-extra-orange-600)) !important;
}
.bg-extra-orange-700 {
  background-color: rgb(var(--color-extra-orange-700));
}
.color-extra-orange-700 {
  color: rgb(var(--color-extra-orange-700));
}
.fill-color-extra-orange-700 {
  fill: rgb(var(--color-extra-orange-700));
}
.fill-color-extra-orange-700--hoverable {
  fill: rgb(var(--color-extra-orange-700));
}
.fill-color-extra-orange-700--hoverable:hover {
  fill: rgb(var(--color-extra-orange-800));
}
.stroke-color-extra-orange-700 {
  stroke: rgb(var(--color-extra-orange-700));
}
.stroke-color-extra-orange-700--hoverable {
  stroke: rgb(var(--color-extra-orange-700));
}
.stroke-color-extra-orange-700--hoverable:hover {
  stroke: rgb(var(--color-extra-orange-800));
}
.border-color--extra-orange-700 {
  border-color: rgb(var(--color-extra-orange-700)) !important;
}
.bg-extra-orange-800 {
  background-color: rgb(var(--color-extra-orange-800));
}
.color-extra-orange-800 {
  color: rgb(var(--color-extra-orange-800));
}
.fill-color-extra-orange-800 {
  fill: rgb(var(--color-extra-orange-800));
}
.fill-color-extra-orange-800--hoverable {
  fill: rgb(var(--color-extra-orange-800));
}
.fill-color-extra-orange-800--hoverable:hover {
  fill: rgb(var(--color-extra-orange-900));
}
.stroke-color-extra-orange-800 {
  stroke: rgb(var(--color-extra-orange-800));
}
.stroke-color-extra-orange-800--hoverable {
  stroke: rgb(var(--color-extra-orange-800));
}
.stroke-color-extra-orange-800--hoverable:hover {
  stroke: rgb(var(--color-extra-orange-900));
}
.border-color--extra-orange-800 {
  border-color: rgb(var(--color-extra-orange-800)) !important;
}
.bg-extra-yellow-100 {
  background-color: rgb(var(--color-extra-yellow-100));
}
.color-extra-yellow-100 {
  color: rgb(var(--color-extra-yellow-100));
}
.fill-color-extra-yellow-100 {
  fill: rgb(var(--color-extra-yellow-100));
}
.fill-color-extra-yellow-100--hoverable {
  fill: rgb(var(--color-extra-yellow-100));
}
.fill-color-extra-yellow-100--hoverable:hover {
  fill: rgb(var(--color-extra-yellow-200));
}
.stroke-color-extra-yellow-100 {
  stroke: rgb(var(--color-extra-yellow-100));
}
.stroke-color-extra-yellow-100--hoverable {
  stroke: rgb(var(--color-extra-yellow-100));
}
.stroke-color-extra-yellow-100--hoverable:hover {
  stroke: rgb(var(--color-extra-yellow-200));
}
.border-color--extra-yellow-100 {
  border-color: rgb(var(--color-extra-yellow-100)) !important;
}
.bg-extra-yellow-200 {
  background-color: rgb(var(--color-extra-yellow-200));
}
.color-extra-yellow-200 {
  color: rgb(var(--color-extra-yellow-200));
}
.fill-color-extra-yellow-200 {
  fill: rgb(var(--color-extra-yellow-200));
}
.fill-color-extra-yellow-200--hoverable {
  fill: rgb(var(--color-extra-yellow-200));
}
.fill-color-extra-yellow-200--hoverable:hover {
  fill: rgb(var(--color-extra-yellow-300));
}
.stroke-color-extra-yellow-200 {
  stroke: rgb(var(--color-extra-yellow-200));
}
.stroke-color-extra-yellow-200--hoverable {
  stroke: rgb(var(--color-extra-yellow-200));
}
.stroke-color-extra-yellow-200--hoverable:hover {
  stroke: rgb(var(--color-extra-yellow-300));
}
.border-color--extra-yellow-200 {
  border-color: rgb(var(--color-extra-yellow-200)) !important;
}
.bg-extra-yellow-300 {
  background-color: rgb(var(--color-extra-yellow-300));
}
.color-extra-yellow-300 {
  color: rgb(var(--color-extra-yellow-300));
}
.fill-color-extra-yellow-300 {
  fill: rgb(var(--color-extra-yellow-300));
}
.fill-color-extra-yellow-300--hoverable {
  fill: rgb(var(--color-extra-yellow-300));
}
.fill-color-extra-yellow-300--hoverable:hover {
  fill: rgb(var(--color-extra-yellow-400));
}
.stroke-color-extra-yellow-300 {
  stroke: rgb(var(--color-extra-yellow-300));
}
.stroke-color-extra-yellow-300--hoverable {
  stroke: rgb(var(--color-extra-yellow-300));
}
.stroke-color-extra-yellow-300--hoverable:hover {
  stroke: rgb(var(--color-extra-yellow-400));
}
.border-color--extra-yellow-300 {
  border-color: rgb(var(--color-extra-yellow-300)) !important;
}
.bg-extra-yellow-400 {
  background-color: rgb(var(--color-extra-yellow-400));
}
.color-extra-yellow-400 {
  color: rgb(var(--color-extra-yellow-400));
}
.fill-color-extra-yellow-400 {
  fill: rgb(var(--color-extra-yellow-400));
}
.fill-color-extra-yellow-400--hoverable {
  fill: rgb(var(--color-extra-yellow-400));
}
.fill-color-extra-yellow-400--hoverable:hover {
  fill: rgb(var(--color-extra-yellow-500));
}
.stroke-color-extra-yellow-400 {
  stroke: rgb(var(--color-extra-yellow-400));
}
.stroke-color-extra-yellow-400--hoverable {
  stroke: rgb(var(--color-extra-yellow-400));
}
.stroke-color-extra-yellow-400--hoverable:hover {
  stroke: rgb(var(--color-extra-yellow-500));
}
.border-color--extra-yellow-400 {
  border-color: rgb(var(--color-extra-yellow-400)) !important;
}
.bg-extra-yellow-500 {
  background-color: rgb(var(--color-extra-yellow-500));
}
.color-extra-yellow-500 {
  color: rgb(var(--color-extra-yellow-500));
}
.fill-color-extra-yellow-500 {
  fill: rgb(var(--color-extra-yellow-500));
}
.fill-color-extra-yellow-500--hoverable {
  fill: rgb(var(--color-extra-yellow-500));
}
.fill-color-extra-yellow-500--hoverable:hover {
  fill: rgb(var(--color-extra-yellow-600));
}
.stroke-color-extra-yellow-500 {
  stroke: rgb(var(--color-extra-yellow-500));
}
.stroke-color-extra-yellow-500--hoverable {
  stroke: rgb(var(--color-extra-yellow-500));
}
.stroke-color-extra-yellow-500--hoverable:hover {
  stroke: rgb(var(--color-extra-yellow-600));
}
.border-color--extra-yellow-500 {
  border-color: rgb(var(--color-extra-yellow-500)) !important;
}
.bg-extra-yellow-600 {
  background-color: rgb(var(--color-extra-yellow-600));
}
.color-extra-yellow-600 {
  color: rgb(var(--color-extra-yellow-600));
}
.fill-color-extra-yellow-600 {
  fill: rgb(var(--color-extra-yellow-600));
}
.fill-color-extra-yellow-600--hoverable {
  fill: rgb(var(--color-extra-yellow-600));
}
.fill-color-extra-yellow-600--hoverable:hover {
  fill: rgb(var(--color-extra-yellow-700));
}
.stroke-color-extra-yellow-600 {
  stroke: rgb(var(--color-extra-yellow-600));
}
.stroke-color-extra-yellow-600--hoverable {
  stroke: rgb(var(--color-extra-yellow-600));
}
.stroke-color-extra-yellow-600--hoverable:hover {
  stroke: rgb(var(--color-extra-yellow-700));
}
.border-color--extra-yellow-600 {
  border-color: rgb(var(--color-extra-yellow-600)) !important;
}
.bg-extra-yellow-700 {
  background-color: rgb(var(--color-extra-yellow-700));
}
.color-extra-yellow-700 {
  color: rgb(var(--color-extra-yellow-700));
}
.fill-color-extra-yellow-700 {
  fill: rgb(var(--color-extra-yellow-700));
}
.fill-color-extra-yellow-700--hoverable {
  fill: rgb(var(--color-extra-yellow-700));
}
.fill-color-extra-yellow-700--hoverable:hover {
  fill: rgb(var(--color-extra-yellow-800));
}
.stroke-color-extra-yellow-700 {
  stroke: rgb(var(--color-extra-yellow-700));
}
.stroke-color-extra-yellow-700--hoverable {
  stroke: rgb(var(--color-extra-yellow-700));
}
.stroke-color-extra-yellow-700--hoverable:hover {
  stroke: rgb(var(--color-extra-yellow-800));
}
.border-color--extra-yellow-700 {
  border-color: rgb(var(--color-extra-yellow-700)) !important;
}
.bg-extra-yellow-800 {
  background-color: rgb(var(--color-extra-yellow-800));
}
.color-extra-yellow-800 {
  color: rgb(var(--color-extra-yellow-800));
}
.fill-color-extra-yellow-800 {
  fill: rgb(var(--color-extra-yellow-800));
}
.fill-color-extra-yellow-800--hoverable {
  fill: rgb(var(--color-extra-yellow-800));
}
.fill-color-extra-yellow-800--hoverable:hover {
  fill: rgb(var(--color-extra-yellow-900));
}
.stroke-color-extra-yellow-800 {
  stroke: rgb(var(--color-extra-yellow-800));
}
.stroke-color-extra-yellow-800--hoverable {
  stroke: rgb(var(--color-extra-yellow-800));
}
.stroke-color-extra-yellow-800--hoverable:hover {
  stroke: rgb(var(--color-extra-yellow-900));
}
.border-color--extra-yellow-800 {
  border-color: rgb(var(--color-extra-yellow-800)) !important;
}
.bg-extra-green-100 {
  background-color: rgb(var(--color-extra-green-100));
}
.color-extra-green-100 {
  color: rgb(var(--color-extra-green-100));
}
.fill-color-extra-green-100 {
  fill: rgb(var(--color-extra-green-100));
}
.fill-color-extra-green-100--hoverable {
  fill: rgb(var(--color-extra-green-100));
}
.fill-color-extra-green-100--hoverable:hover {
  fill: rgb(var(--color-extra-green-200));
}
.stroke-color-extra-green-100 {
  stroke: rgb(var(--color-extra-green-100));
}
.stroke-color-extra-green-100--hoverable {
  stroke: rgb(var(--color-extra-green-100));
}
.stroke-color-extra-green-100--hoverable:hover {
  stroke: rgb(var(--color-extra-green-200));
}
.border-color--extra-green-100 {
  border-color: rgb(var(--color-extra-green-100)) !important;
}
.bg-extra-green-200 {
  background-color: rgb(var(--color-extra-green-200));
}
.color-extra-green-200 {
  color: rgb(var(--color-extra-green-200));
}
.fill-color-extra-green-200 {
  fill: rgb(var(--color-extra-green-200));
}
.fill-color-extra-green-200--hoverable {
  fill: rgb(var(--color-extra-green-200));
}
.fill-color-extra-green-200--hoverable:hover {
  fill: rgb(var(--color-extra-green-300));
}
.stroke-color-extra-green-200 {
  stroke: rgb(var(--color-extra-green-200));
}
.stroke-color-extra-green-200--hoverable {
  stroke: rgb(var(--color-extra-green-200));
}
.stroke-color-extra-green-200--hoverable:hover {
  stroke: rgb(var(--color-extra-green-300));
}
.border-color--extra-green-200 {
  border-color: rgb(var(--color-extra-green-200)) !important;
}
.bg-extra-green-300 {
  background-color: rgb(var(--color-extra-green-300));
}
.color-extra-green-300 {
  color: rgb(var(--color-extra-green-300));
}
.fill-color-extra-green-300 {
  fill: rgb(var(--color-extra-green-300));
}
.fill-color-extra-green-300--hoverable {
  fill: rgb(var(--color-extra-green-300));
}
.fill-color-extra-green-300--hoverable:hover {
  fill: rgb(var(--color-extra-green-400));
}
.stroke-color-extra-green-300 {
  stroke: rgb(var(--color-extra-green-300));
}
.stroke-color-extra-green-300--hoverable {
  stroke: rgb(var(--color-extra-green-300));
}
.stroke-color-extra-green-300--hoverable:hover {
  stroke: rgb(var(--color-extra-green-400));
}
.border-color--extra-green-300 {
  border-color: rgb(var(--color-extra-green-300)) !important;
}
.bg-extra-green-400 {
  background-color: rgb(var(--color-extra-green-400));
}
.color-extra-green-400 {
  color: rgb(var(--color-extra-green-400));
}
.fill-color-extra-green-400 {
  fill: rgb(var(--color-extra-green-400));
}
.fill-color-extra-green-400--hoverable {
  fill: rgb(var(--color-extra-green-400));
}
.fill-color-extra-green-400--hoverable:hover {
  fill: rgb(var(--color-extra-green-500));
}
.stroke-color-extra-green-400 {
  stroke: rgb(var(--color-extra-green-400));
}
.stroke-color-extra-green-400--hoverable {
  stroke: rgb(var(--color-extra-green-400));
}
.stroke-color-extra-green-400--hoverable:hover {
  stroke: rgb(var(--color-extra-green-500));
}
.border-color--extra-green-400 {
  border-color: rgb(var(--color-extra-green-400)) !important;
}
.bg-extra-green-500 {
  background-color: rgb(var(--color-extra-green-500));
}
.color-extra-green-500 {
  color: rgb(var(--color-extra-green-500));
}
.fill-color-extra-green-500 {
  fill: rgb(var(--color-extra-green-500));
}
.fill-color-extra-green-500--hoverable {
  fill: rgb(var(--color-extra-green-500));
}
.fill-color-extra-green-500--hoverable:hover {
  fill: rgb(var(--color-extra-green-600));
}
.stroke-color-extra-green-500 {
  stroke: rgb(var(--color-extra-green-500));
}
.stroke-color-extra-green-500--hoverable {
  stroke: rgb(var(--color-extra-green-500));
}
.stroke-color-extra-green-500--hoverable:hover {
  stroke: rgb(var(--color-extra-green-600));
}
.border-color--extra-green-500 {
  border-color: rgb(var(--color-extra-green-500)) !important;
}
.bg-extra-green-600 {
  background-color: rgb(var(--color-extra-green-600));
}
.color-extra-green-600 {
  color: rgb(var(--color-extra-green-600));
}
.fill-color-extra-green-600 {
  fill: rgb(var(--color-extra-green-600));
}
.fill-color-extra-green-600--hoverable {
  fill: rgb(var(--color-extra-green-600));
}
.fill-color-extra-green-600--hoverable:hover {
  fill: rgb(var(--color-extra-green-700));
}
.stroke-color-extra-green-600 {
  stroke: rgb(var(--color-extra-green-600));
}
.stroke-color-extra-green-600--hoverable {
  stroke: rgb(var(--color-extra-green-600));
}
.stroke-color-extra-green-600--hoverable:hover {
  stroke: rgb(var(--color-extra-green-700));
}
.border-color--extra-green-600 {
  border-color: rgb(var(--color-extra-green-600)) !important;
}
.bg-extra-green-700 {
  background-color: rgb(var(--color-extra-green-700));
}
.color-extra-green-700 {
  color: rgb(var(--color-extra-green-700));
}
.fill-color-extra-green-700 {
  fill: rgb(var(--color-extra-green-700));
}
.fill-color-extra-green-700--hoverable {
  fill: rgb(var(--color-extra-green-700));
}
.fill-color-extra-green-700--hoverable:hover {
  fill: rgb(var(--color-extra-green-800));
}
.stroke-color-extra-green-700 {
  stroke: rgb(var(--color-extra-green-700));
}
.stroke-color-extra-green-700--hoverable {
  stroke: rgb(var(--color-extra-green-700));
}
.stroke-color-extra-green-700--hoverable:hover {
  stroke: rgb(var(--color-extra-green-800));
}
.border-color--extra-green-700 {
  border-color: rgb(var(--color-extra-green-700)) !important;
}
.bg-extra-green-800 {
  background-color: rgb(var(--color-extra-green-800));
}
.color-extra-green-800 {
  color: rgb(var(--color-extra-green-800));
}
.fill-color-extra-green-800 {
  fill: rgb(var(--color-extra-green-800));
}
.fill-color-extra-green-800--hoverable {
  fill: rgb(var(--color-extra-green-800));
}
.fill-color-extra-green-800--hoverable:hover {
  fill: rgb(var(--color-extra-green-900));
}
.stroke-color-extra-green-800 {
  stroke: rgb(var(--color-extra-green-800));
}
.stroke-color-extra-green-800--hoverable {
  stroke: rgb(var(--color-extra-green-800));
}
.stroke-color-extra-green-800--hoverable:hover {
  stroke: rgb(var(--color-extra-green-900));
}
.border-color--extra-green-800 {
  border-color: rgb(var(--color-extra-green-800)) !important;
}
.bg-extra-blue-100 {
  background-color: rgb(var(--color-extra-blue-100));
}
.color-extra-blue-100 {
  color: rgb(var(--color-extra-blue-100));
}
.fill-color-extra-blue-100 {
  fill: rgb(var(--color-extra-blue-100));
}
.fill-color-extra-blue-100--hoverable {
  fill: rgb(var(--color-extra-blue-100));
}
.fill-color-extra-blue-100--hoverable:hover {
  fill: rgb(var(--color-extra-blue-200));
}
.stroke-color-extra-blue-100 {
  stroke: rgb(var(--color-extra-blue-100));
}
.stroke-color-extra-blue-100--hoverable {
  stroke: rgb(var(--color-extra-blue-100));
}
.stroke-color-extra-blue-100--hoverable:hover {
  stroke: rgb(var(--color-extra-blue-200));
}
.border-color--extra-blue-100 {
  border-color: rgb(var(--color-extra-blue-100)) !important;
}
.bg-extra-blue-200 {
  background-color: rgb(var(--color-extra-blue-200));
}
.color-extra-blue-200 {
  color: rgb(var(--color-extra-blue-200));
}
.fill-color-extra-blue-200 {
  fill: rgb(var(--color-extra-blue-200));
}
.fill-color-extra-blue-200--hoverable {
  fill: rgb(var(--color-extra-blue-200));
}
.fill-color-extra-blue-200--hoverable:hover {
  fill: rgb(var(--color-extra-blue-300));
}
.stroke-color-extra-blue-200 {
  stroke: rgb(var(--color-extra-blue-200));
}
.stroke-color-extra-blue-200--hoverable {
  stroke: rgb(var(--color-extra-blue-200));
}
.stroke-color-extra-blue-200--hoverable:hover {
  stroke: rgb(var(--color-extra-blue-300));
}
.border-color--extra-blue-200 {
  border-color: rgb(var(--color-extra-blue-200)) !important;
}
.bg-extra-blue-300 {
  background-color: rgb(var(--color-extra-blue-300));
}
.color-extra-blue-300 {
  color: rgb(var(--color-extra-blue-300));
}
.fill-color-extra-blue-300 {
  fill: rgb(var(--color-extra-blue-300));
}
.fill-color-extra-blue-300--hoverable {
  fill: rgb(var(--color-extra-blue-300));
}
.fill-color-extra-blue-300--hoverable:hover {
  fill: rgb(var(--color-extra-blue-400));
}
.stroke-color-extra-blue-300 {
  stroke: rgb(var(--color-extra-blue-300));
}
.stroke-color-extra-blue-300--hoverable {
  stroke: rgb(var(--color-extra-blue-300));
}
.stroke-color-extra-blue-300--hoverable:hover {
  stroke: rgb(var(--color-extra-blue-400));
}
.border-color--extra-blue-300 {
  border-color: rgb(var(--color-extra-blue-300)) !important;
}
.bg-extra-blue-400 {
  background-color: rgb(var(--color-extra-blue-400));
}
.color-extra-blue-400 {
  color: rgb(var(--color-extra-blue-400));
}
.fill-color-extra-blue-400 {
  fill: rgb(var(--color-extra-blue-400));
}
.fill-color-extra-blue-400--hoverable {
  fill: rgb(var(--color-extra-blue-400));
}
.fill-color-extra-blue-400--hoverable:hover {
  fill: rgb(var(--color-extra-blue-500));
}
.stroke-color-extra-blue-400 {
  stroke: rgb(var(--color-extra-blue-400));
}
.stroke-color-extra-blue-400--hoverable {
  stroke: rgb(var(--color-extra-blue-400));
}
.stroke-color-extra-blue-400--hoverable:hover {
  stroke: rgb(var(--color-extra-blue-500));
}
.border-color--extra-blue-400 {
  border-color: rgb(var(--color-extra-blue-400)) !important;
}
.bg-extra-blue-500 {
  background-color: rgb(var(--color-extra-blue-500));
}
.color-extra-blue-500 {
  color: rgb(var(--color-extra-blue-500));
}
.fill-color-extra-blue-500 {
  fill: rgb(var(--color-extra-blue-500));
}
.fill-color-extra-blue-500--hoverable {
  fill: rgb(var(--color-extra-blue-500));
}
.fill-color-extra-blue-500--hoverable:hover {
  fill: rgb(var(--color-extra-blue-600));
}
.stroke-color-extra-blue-500 {
  stroke: rgb(var(--color-extra-blue-500));
}
.stroke-color-extra-blue-500--hoverable {
  stroke: rgb(var(--color-extra-blue-500));
}
.stroke-color-extra-blue-500--hoverable:hover {
  stroke: rgb(var(--color-extra-blue-600));
}
.border-color--extra-blue-500 {
  border-color: rgb(var(--color-extra-blue-500)) !important;
}
.bg-extra-blue-600 {
  background-color: rgb(var(--color-extra-blue-600));
}
.color-extra-blue-600 {
  color: rgb(var(--color-extra-blue-600));
}
.fill-color-extra-blue-600 {
  fill: rgb(var(--color-extra-blue-600));
}
.fill-color-extra-blue-600--hoverable {
  fill: rgb(var(--color-extra-blue-600));
}
.fill-color-extra-blue-600--hoverable:hover {
  fill: rgb(var(--color-extra-blue-700));
}
.stroke-color-extra-blue-600 {
  stroke: rgb(var(--color-extra-blue-600));
}
.stroke-color-extra-blue-600--hoverable {
  stroke: rgb(var(--color-extra-blue-600));
}
.stroke-color-extra-blue-600--hoverable:hover {
  stroke: rgb(var(--color-extra-blue-700));
}
.border-color--extra-blue-600 {
  border-color: rgb(var(--color-extra-blue-600)) !important;
}
.bg-extra-blue-700 {
  background-color: rgb(var(--color-extra-blue-700));
}
.color-extra-blue-700 {
  color: rgb(var(--color-extra-blue-700));
}
.fill-color-extra-blue-700 {
  fill: rgb(var(--color-extra-blue-700));
}
.fill-color-extra-blue-700--hoverable {
  fill: rgb(var(--color-extra-blue-700));
}
.fill-color-extra-blue-700--hoverable:hover {
  fill: rgb(var(--color-extra-blue-800));
}
.stroke-color-extra-blue-700 {
  stroke: rgb(var(--color-extra-blue-700));
}
.stroke-color-extra-blue-700--hoverable {
  stroke: rgb(var(--color-extra-blue-700));
}
.stroke-color-extra-blue-700--hoverable:hover {
  stroke: rgb(var(--color-extra-blue-800));
}
.border-color--extra-blue-700 {
  border-color: rgb(var(--color-extra-blue-700)) !important;
}
.bg-extra-blue-800 {
  background-color: rgb(var(--color-extra-blue-800));
}
.color-extra-blue-800 {
  color: rgb(var(--color-extra-blue-800));
}
.fill-color-extra-blue-800 {
  fill: rgb(var(--color-extra-blue-800));
}
.fill-color-extra-blue-800--hoverable {
  fill: rgb(var(--color-extra-blue-800));
}
.fill-color-extra-blue-800--hoverable:hover {
  fill: rgb(var(--color-extra-blue-900));
}
.stroke-color-extra-blue-800 {
  stroke: rgb(var(--color-extra-blue-800));
}
.stroke-color-extra-blue-800--hoverable {
  stroke: rgb(var(--color-extra-blue-800));
}
.stroke-color-extra-blue-800--hoverable:hover {
  stroke: rgb(var(--color-extra-blue-900));
}
.border-color--extra-blue-800 {
  border-color: rgb(var(--color-extra-blue-800)) !important;
}
.bg-extra-indigo-100 {
  background-color: rgb(var(--color-extra-indigo-100));
}
.color-extra-indigo-100 {
  color: rgb(var(--color-extra-indigo-100));
}
.fill-color-extra-indigo-100 {
  fill: rgb(var(--color-extra-indigo-100));
}
.fill-color-extra-indigo-100--hoverable {
  fill: rgb(var(--color-extra-indigo-100));
}
.fill-color-extra-indigo-100--hoverable:hover {
  fill: rgb(var(--color-extra-indigo-200));
}
.stroke-color-extra-indigo-100 {
  stroke: rgb(var(--color-extra-indigo-100));
}
.stroke-color-extra-indigo-100--hoverable {
  stroke: rgb(var(--color-extra-indigo-100));
}
.stroke-color-extra-indigo-100--hoverable:hover {
  stroke: rgb(var(--color-extra-indigo-200));
}
.border-color--extra-indigo-100 {
  border-color: rgb(var(--color-extra-indigo-100)) !important;
}
.bg-extra-indigo-200 {
  background-color: rgb(var(--color-extra-indigo-200));
}
.color-extra-indigo-200 {
  color: rgb(var(--color-extra-indigo-200));
}
.fill-color-extra-indigo-200 {
  fill: rgb(var(--color-extra-indigo-200));
}
.fill-color-extra-indigo-200--hoverable {
  fill: rgb(var(--color-extra-indigo-200));
}
.fill-color-extra-indigo-200--hoverable:hover {
  fill: rgb(var(--color-extra-indigo-300));
}
.stroke-color-extra-indigo-200 {
  stroke: rgb(var(--color-extra-indigo-200));
}
.stroke-color-extra-indigo-200--hoverable {
  stroke: rgb(var(--color-extra-indigo-200));
}
.stroke-color-extra-indigo-200--hoverable:hover {
  stroke: rgb(var(--color-extra-indigo-300));
}
.border-color--extra-indigo-200 {
  border-color: rgb(var(--color-extra-indigo-200)) !important;
}
.bg-extra-indigo-300 {
  background-color: rgb(var(--color-extra-indigo-300));
}
.color-extra-indigo-300 {
  color: rgb(var(--color-extra-indigo-300));
}
.fill-color-extra-indigo-300 {
  fill: rgb(var(--color-extra-indigo-300));
}
.fill-color-extra-indigo-300--hoverable {
  fill: rgb(var(--color-extra-indigo-300));
}
.fill-color-extra-indigo-300--hoverable:hover {
  fill: rgb(var(--color-extra-indigo-400));
}
.stroke-color-extra-indigo-300 {
  stroke: rgb(var(--color-extra-indigo-300));
}
.stroke-color-extra-indigo-300--hoverable {
  stroke: rgb(var(--color-extra-indigo-300));
}
.stroke-color-extra-indigo-300--hoverable:hover {
  stroke: rgb(var(--color-extra-indigo-400));
}
.border-color--extra-indigo-300 {
  border-color: rgb(var(--color-extra-indigo-300)) !important;
}
.bg-extra-indigo-400 {
  background-color: rgb(var(--color-extra-indigo-400));
}
.color-extra-indigo-400 {
  color: rgb(var(--color-extra-indigo-400));
}
.fill-color-extra-indigo-400 {
  fill: rgb(var(--color-extra-indigo-400));
}
.fill-color-extra-indigo-400--hoverable {
  fill: rgb(var(--color-extra-indigo-400));
}
.fill-color-extra-indigo-400--hoverable:hover {
  fill: rgb(var(--color-extra-indigo-500));
}
.stroke-color-extra-indigo-400 {
  stroke: rgb(var(--color-extra-indigo-400));
}
.stroke-color-extra-indigo-400--hoverable {
  stroke: rgb(var(--color-extra-indigo-400));
}
.stroke-color-extra-indigo-400--hoverable:hover {
  stroke: rgb(var(--color-extra-indigo-500));
}
.border-color--extra-indigo-400 {
  border-color: rgb(var(--color-extra-indigo-400)) !important;
}
.bg-extra-indigo-500 {
  background-color: rgb(var(--color-extra-indigo-500));
}
.color-extra-indigo-500 {
  color: rgb(var(--color-extra-indigo-500));
}
.fill-color-extra-indigo-500 {
  fill: rgb(var(--color-extra-indigo-500));
}
.fill-color-extra-indigo-500--hoverable {
  fill: rgb(var(--color-extra-indigo-500));
}
.fill-color-extra-indigo-500--hoverable:hover {
  fill: rgb(var(--color-extra-indigo-600));
}
.stroke-color-extra-indigo-500 {
  stroke: rgb(var(--color-extra-indigo-500));
}
.stroke-color-extra-indigo-500--hoverable {
  stroke: rgb(var(--color-extra-indigo-500));
}
.stroke-color-extra-indigo-500--hoverable:hover {
  stroke: rgb(var(--color-extra-indigo-600));
}
.border-color--extra-indigo-500 {
  border-color: rgb(var(--color-extra-indigo-500)) !important;
}
.bg-extra-indigo-600 {
  background-color: rgb(var(--color-extra-indigo-600));
}
.color-extra-indigo-600 {
  color: rgb(var(--color-extra-indigo-600));
}
.fill-color-extra-indigo-600 {
  fill: rgb(var(--color-extra-indigo-600));
}
.fill-color-extra-indigo-600--hoverable {
  fill: rgb(var(--color-extra-indigo-600));
}
.fill-color-extra-indigo-600--hoverable:hover {
  fill: rgb(var(--color-extra-indigo-700));
}
.stroke-color-extra-indigo-600 {
  stroke: rgb(var(--color-extra-indigo-600));
}
.stroke-color-extra-indigo-600--hoverable {
  stroke: rgb(var(--color-extra-indigo-600));
}
.stroke-color-extra-indigo-600--hoverable:hover {
  stroke: rgb(var(--color-extra-indigo-700));
}
.border-color--extra-indigo-600 {
  border-color: rgb(var(--color-extra-indigo-600)) !important;
}
.bg-extra-indigo-700 {
  background-color: rgb(var(--color-extra-indigo-700));
}
.color-extra-indigo-700 {
  color: rgb(var(--color-extra-indigo-700));
}
.fill-color-extra-indigo-700 {
  fill: rgb(var(--color-extra-indigo-700));
}
.fill-color-extra-indigo-700--hoverable {
  fill: rgb(var(--color-extra-indigo-700));
}
.fill-color-extra-indigo-700--hoverable:hover {
  fill: rgb(var(--color-extra-indigo-800));
}
.stroke-color-extra-indigo-700 {
  stroke: rgb(var(--color-extra-indigo-700));
}
.stroke-color-extra-indigo-700--hoverable {
  stroke: rgb(var(--color-extra-indigo-700));
}
.stroke-color-extra-indigo-700--hoverable:hover {
  stroke: rgb(var(--color-extra-indigo-800));
}
.border-color--extra-indigo-700 {
  border-color: rgb(var(--color-extra-indigo-700)) !important;
}
.bg-extra-indigo-800 {
  background-color: rgb(var(--color-extra-indigo-800));
}
.color-extra-indigo-800 {
  color: rgb(var(--color-extra-indigo-800));
}
.fill-color-extra-indigo-800 {
  fill: rgb(var(--color-extra-indigo-800));
}
.fill-color-extra-indigo-800--hoverable {
  fill: rgb(var(--color-extra-indigo-800));
}
.fill-color-extra-indigo-800--hoverable:hover {
  fill: rgb(var(--color-extra-indigo-900));
}
.stroke-color-extra-indigo-800 {
  stroke: rgb(var(--color-extra-indigo-800));
}
.stroke-color-extra-indigo-800--hoverable {
  stroke: rgb(var(--color-extra-indigo-800));
}
.stroke-color-extra-indigo-800--hoverable:hover {
  stroke: rgb(var(--color-extra-indigo-900));
}
.border-color--extra-indigo-800 {
  border-color: rgb(var(--color-extra-indigo-800)) !important;
}
.bg-extra-violet-100 {
  background-color: rgb(var(--color-extra-violet-100));
}
.color-extra-violet-100 {
  color: rgb(var(--color-extra-violet-100));
}
.fill-color-extra-violet-100 {
  fill: rgb(var(--color-extra-violet-100));
}
.fill-color-extra-violet-100--hoverable {
  fill: rgb(var(--color-extra-violet-100));
}
.fill-color-extra-violet-100--hoverable:hover {
  fill: rgb(var(--color-extra-violet-200));
}
.stroke-color-extra-violet-100 {
  stroke: rgb(var(--color-extra-violet-100));
}
.stroke-color-extra-violet-100--hoverable {
  stroke: rgb(var(--color-extra-violet-100));
}
.stroke-color-extra-violet-100--hoverable:hover {
  stroke: rgb(var(--color-extra-violet-200));
}
.border-color--extra-violet-100 {
  border-color: rgb(var(--color-extra-violet-100)) !important;
}
.bg-extra-violet-200 {
  background-color: rgb(var(--color-extra-violet-200));
}
.color-extra-violet-200 {
  color: rgb(var(--color-extra-violet-200));
}
.fill-color-extra-violet-200 {
  fill: rgb(var(--color-extra-violet-200));
}
.fill-color-extra-violet-200--hoverable {
  fill: rgb(var(--color-extra-violet-200));
}
.fill-color-extra-violet-200--hoverable:hover {
  fill: rgb(var(--color-extra-violet-300));
}
.stroke-color-extra-violet-200 {
  stroke: rgb(var(--color-extra-violet-200));
}
.stroke-color-extra-violet-200--hoverable {
  stroke: rgb(var(--color-extra-violet-200));
}
.stroke-color-extra-violet-200--hoverable:hover {
  stroke: rgb(var(--color-extra-violet-300));
}
.border-color--extra-violet-200 {
  border-color: rgb(var(--color-extra-violet-200)) !important;
}
.bg-extra-violet-300 {
  background-color: rgb(var(--color-extra-violet-300));
}
.color-extra-violet-300 {
  color: rgb(var(--color-extra-violet-300));
}
.fill-color-extra-violet-300 {
  fill: rgb(var(--color-extra-violet-300));
}
.fill-color-extra-violet-300--hoverable {
  fill: rgb(var(--color-extra-violet-300));
}
.fill-color-extra-violet-300--hoverable:hover {
  fill: rgb(var(--color-extra-violet-400));
}
.stroke-color-extra-violet-300 {
  stroke: rgb(var(--color-extra-violet-300));
}
.stroke-color-extra-violet-300--hoverable {
  stroke: rgb(var(--color-extra-violet-300));
}
.stroke-color-extra-violet-300--hoverable:hover {
  stroke: rgb(var(--color-extra-violet-400));
}
.border-color--extra-violet-300 {
  border-color: rgb(var(--color-extra-violet-300)) !important;
}
.bg-extra-violet-400 {
  background-color: rgb(var(--color-extra-violet-400));
}
.color-extra-violet-400 {
  color: rgb(var(--color-extra-violet-400));
}
.fill-color-extra-violet-400 {
  fill: rgb(var(--color-extra-violet-400));
}
.fill-color-extra-violet-400--hoverable {
  fill: rgb(var(--color-extra-violet-400));
}
.fill-color-extra-violet-400--hoverable:hover {
  fill: rgb(var(--color-extra-violet-500));
}
.stroke-color-extra-violet-400 {
  stroke: rgb(var(--color-extra-violet-400));
}
.stroke-color-extra-violet-400--hoverable {
  stroke: rgb(var(--color-extra-violet-400));
}
.stroke-color-extra-violet-400--hoverable:hover {
  stroke: rgb(var(--color-extra-violet-500));
}
.border-color--extra-violet-400 {
  border-color: rgb(var(--color-extra-violet-400)) !important;
}
.bg-extra-violet-500 {
  background-color: rgb(var(--color-extra-violet-500));
}
.color-extra-violet-500 {
  color: rgb(var(--color-extra-violet-500));
}
.fill-color-extra-violet-500 {
  fill: rgb(var(--color-extra-violet-500));
}
.fill-color-extra-violet-500--hoverable {
  fill: rgb(var(--color-extra-violet-500));
}
.fill-color-extra-violet-500--hoverable:hover {
  fill: rgb(var(--color-extra-violet-600));
}
.stroke-color-extra-violet-500 {
  stroke: rgb(var(--color-extra-violet-500));
}
.stroke-color-extra-violet-500--hoverable {
  stroke: rgb(var(--color-extra-violet-500));
}
.stroke-color-extra-violet-500--hoverable:hover {
  stroke: rgb(var(--color-extra-violet-600));
}
.border-color--extra-violet-500 {
  border-color: rgb(var(--color-extra-violet-500)) !important;
}
.bg-extra-violet-600 {
  background-color: rgb(var(--color-extra-violet-600));
}
.color-extra-violet-600 {
  color: rgb(var(--color-extra-violet-600));
}
.fill-color-extra-violet-600 {
  fill: rgb(var(--color-extra-violet-600));
}
.fill-color-extra-violet-600--hoverable {
  fill: rgb(var(--color-extra-violet-600));
}
.fill-color-extra-violet-600--hoverable:hover {
  fill: rgb(var(--color-extra-violet-700));
}
.stroke-color-extra-violet-600 {
  stroke: rgb(var(--color-extra-violet-600));
}
.stroke-color-extra-violet-600--hoverable {
  stroke: rgb(var(--color-extra-violet-600));
}
.stroke-color-extra-violet-600--hoverable:hover {
  stroke: rgb(var(--color-extra-violet-700));
}
.border-color--extra-violet-600 {
  border-color: rgb(var(--color-extra-violet-600)) !important;
}
.bg-extra-violet-700 {
  background-color: rgb(var(--color-extra-violet-700));
}
.color-extra-violet-700 {
  color: rgb(var(--color-extra-violet-700));
}
.fill-color-extra-violet-700 {
  fill: rgb(var(--color-extra-violet-700));
}
.fill-color-extra-violet-700--hoverable {
  fill: rgb(var(--color-extra-violet-700));
}
.fill-color-extra-violet-700--hoverable:hover {
  fill: rgb(var(--color-extra-violet-800));
}
.stroke-color-extra-violet-700 {
  stroke: rgb(var(--color-extra-violet-700));
}
.stroke-color-extra-violet-700--hoverable {
  stroke: rgb(var(--color-extra-violet-700));
}
.stroke-color-extra-violet-700--hoverable:hover {
  stroke: rgb(var(--color-extra-violet-800));
}
.border-color--extra-violet-700 {
  border-color: rgb(var(--color-extra-violet-700)) !important;
}
.bg-extra-violet-800 {
  background-color: rgb(var(--color-extra-violet-800));
}
.color-extra-violet-800 {
  color: rgb(var(--color-extra-violet-800));
}
.fill-color-extra-violet-800 {
  fill: rgb(var(--color-extra-violet-800));
}
.fill-color-extra-violet-800--hoverable {
  fill: rgb(var(--color-extra-violet-800));
}
.fill-color-extra-violet-800--hoverable:hover {
  fill: rgb(var(--color-extra-violet-900));
}
.stroke-color-extra-violet-800 {
  stroke: rgb(var(--color-extra-violet-800));
}
.stroke-color-extra-violet-800--hoverable {
  stroke: rgb(var(--color-extra-violet-800));
}
.stroke-color-extra-violet-800--hoverable:hover {
  stroke: rgb(var(--color-extra-violet-900));
}
.border-color--extra-violet-800 {
  border-color: rgb(var(--color-extra-violet-800)) !important;
}
.bg-extra-pink-100 {
  background-color: rgb(var(--color-extra-pink-100));
}
.color-extra-pink-100 {
  color: rgb(var(--color-extra-pink-100));
}
.fill-color-extra-pink-100 {
  fill: rgb(var(--color-extra-pink-100));
}
.fill-color-extra-pink-100--hoverable {
  fill: rgb(var(--color-extra-pink-100));
}
.fill-color-extra-pink-100--hoverable:hover {
  fill: rgb(var(--color-extra-pink-200));
}
.stroke-color-extra-pink-100 {
  stroke: rgb(var(--color-extra-pink-100));
}
.stroke-color-extra-pink-100--hoverable {
  stroke: rgb(var(--color-extra-pink-100));
}
.stroke-color-extra-pink-100--hoverable:hover {
  stroke: rgb(var(--color-extra-pink-200));
}
.border-color--extra-pink-100 {
  border-color: rgb(var(--color-extra-pink-100)) !important;
}
.bg-extra-pink-200 {
  background-color: rgb(var(--color-extra-pink-200));
}
.color-extra-pink-200 {
  color: rgb(var(--color-extra-pink-200));
}
.fill-color-extra-pink-200 {
  fill: rgb(var(--color-extra-pink-200));
}
.fill-color-extra-pink-200--hoverable {
  fill: rgb(var(--color-extra-pink-200));
}
.fill-color-extra-pink-200--hoverable:hover {
  fill: rgb(var(--color-extra-pink-300));
}
.stroke-color-extra-pink-200 {
  stroke: rgb(var(--color-extra-pink-200));
}
.stroke-color-extra-pink-200--hoverable {
  stroke: rgb(var(--color-extra-pink-200));
}
.stroke-color-extra-pink-200--hoverable:hover {
  stroke: rgb(var(--color-extra-pink-300));
}
.border-color--extra-pink-200 {
  border-color: rgb(var(--color-extra-pink-200)) !important;
}
.bg-extra-pink-300 {
  background-color: rgb(var(--color-extra-pink-300));
}
.color-extra-pink-300 {
  color: rgb(var(--color-extra-pink-300));
}
.fill-color-extra-pink-300 {
  fill: rgb(var(--color-extra-pink-300));
}
.fill-color-extra-pink-300--hoverable {
  fill: rgb(var(--color-extra-pink-300));
}
.fill-color-extra-pink-300--hoverable:hover {
  fill: rgb(var(--color-extra-pink-400));
}
.stroke-color-extra-pink-300 {
  stroke: rgb(var(--color-extra-pink-300));
}
.stroke-color-extra-pink-300--hoverable {
  stroke: rgb(var(--color-extra-pink-300));
}
.stroke-color-extra-pink-300--hoverable:hover {
  stroke: rgb(var(--color-extra-pink-400));
}
.border-color--extra-pink-300 {
  border-color: rgb(var(--color-extra-pink-300)) !important;
}
.bg-extra-pink-400 {
  background-color: rgb(var(--color-extra-pink-400));
}
.color-extra-pink-400 {
  color: rgb(var(--color-extra-pink-400));
}
.fill-color-extra-pink-400 {
  fill: rgb(var(--color-extra-pink-400));
}
.fill-color-extra-pink-400--hoverable {
  fill: rgb(var(--color-extra-pink-400));
}
.fill-color-extra-pink-400--hoverable:hover {
  fill: rgb(var(--color-extra-pink-500));
}
.stroke-color-extra-pink-400 {
  stroke: rgb(var(--color-extra-pink-400));
}
.stroke-color-extra-pink-400--hoverable {
  stroke: rgb(var(--color-extra-pink-400));
}
.stroke-color-extra-pink-400--hoverable:hover {
  stroke: rgb(var(--color-extra-pink-500));
}
.border-color--extra-pink-400 {
  border-color: rgb(var(--color-extra-pink-400)) !important;
}
.bg-extra-pink-500 {
  background-color: rgb(var(--color-extra-pink-500));
}
.color-extra-pink-500 {
  color: rgb(var(--color-extra-pink-500));
}
.fill-color-extra-pink-500 {
  fill: rgb(var(--color-extra-pink-500));
}
.fill-color-extra-pink-500--hoverable {
  fill: rgb(var(--color-extra-pink-500));
}
.fill-color-extra-pink-500--hoverable:hover {
  fill: rgb(var(--color-extra-pink-600));
}
.stroke-color-extra-pink-500 {
  stroke: rgb(var(--color-extra-pink-500));
}
.stroke-color-extra-pink-500--hoverable {
  stroke: rgb(var(--color-extra-pink-500));
}
.stroke-color-extra-pink-500--hoverable:hover {
  stroke: rgb(var(--color-extra-pink-600));
}
.border-color--extra-pink-500 {
  border-color: rgb(var(--color-extra-pink-500)) !important;
}
.bg-extra-pink-600 {
  background-color: rgb(var(--color-extra-pink-600));
}
.color-extra-pink-600 {
  color: rgb(var(--color-extra-pink-600));
}
.fill-color-extra-pink-600 {
  fill: rgb(var(--color-extra-pink-600));
}
.fill-color-extra-pink-600--hoverable {
  fill: rgb(var(--color-extra-pink-600));
}
.fill-color-extra-pink-600--hoverable:hover {
  fill: rgb(var(--color-extra-pink-700));
}
.stroke-color-extra-pink-600 {
  stroke: rgb(var(--color-extra-pink-600));
}
.stroke-color-extra-pink-600--hoverable {
  stroke: rgb(var(--color-extra-pink-600));
}
.stroke-color-extra-pink-600--hoverable:hover {
  stroke: rgb(var(--color-extra-pink-700));
}
.border-color--extra-pink-600 {
  border-color: rgb(var(--color-extra-pink-600)) !important;
}
.bg-extra-pink-700 {
  background-color: rgb(var(--color-extra-pink-700));
}
.color-extra-pink-700 {
  color: rgb(var(--color-extra-pink-700));
}
.fill-color-extra-pink-700 {
  fill: rgb(var(--color-extra-pink-700));
}
.fill-color-extra-pink-700--hoverable {
  fill: rgb(var(--color-extra-pink-700));
}
.fill-color-extra-pink-700--hoverable:hover {
  fill: rgb(var(--color-extra-pink-800));
}
.stroke-color-extra-pink-700 {
  stroke: rgb(var(--color-extra-pink-700));
}
.stroke-color-extra-pink-700--hoverable {
  stroke: rgb(var(--color-extra-pink-700));
}
.stroke-color-extra-pink-700--hoverable:hover {
  stroke: rgb(var(--color-extra-pink-800));
}
.border-color--extra-pink-700 {
  border-color: rgb(var(--color-extra-pink-700)) !important;
}
.bg-extra-pink-800 {
  background-color: rgb(var(--color-extra-pink-800));
}
.color-extra-pink-800 {
  color: rgb(var(--color-extra-pink-800));
}
.fill-color-extra-pink-800 {
  fill: rgb(var(--color-extra-pink-800));
}
.fill-color-extra-pink-800--hoverable {
  fill: rgb(var(--color-extra-pink-800));
}
.fill-color-extra-pink-800--hoverable:hover {
  fill: rgb(var(--color-extra-pink-900));
}
.stroke-color-extra-pink-800 {
  stroke: rgb(var(--color-extra-pink-800));
}
.stroke-color-extra-pink-800--hoverable {
  stroke: rgb(var(--color-extra-pink-800));
}
.stroke-color-extra-pink-800--hoverable:hover {
  stroke: rgb(var(--color-extra-pink-900));
}
.border-color--extra-pink-800 {
  border-color: rgb(var(--color-extra-pink-800)) !important;
}
.stoke-thick {
  stroke-width: 4px;
}

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Reset basic CSS styles across many browsers.                                            *
* Based on: https://meyerweb.com/eric/tools/css/reset/                                    *
*******************************************************************************************

*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
img {
  max-width: 100%;
}
/*
    This file is used to create a default color palette consisting of a spectrum of neutral colors.
    None of these colors are specifically branded.
    The Primary and Secondary colors are retrieved from the backend, from a theme configuration based on the domain.
    - Robert Merki, August 2019
*/
:root {
  --color-black: 0, 0, 0;
  --color-white: 255, 255, 255;
  --color-gray-900: 26, 32, 44;
  --color-gray-800: 45, 55, 72;
  --color-gray-700: 74, 85, 104;
  --color-gray-600: 113, 128, 150;
  --color-gray-500: 160, 174, 192;
  --color-gray-400: 203, 213, 224;
  --color-gray-300: 226, 232, 240;
  --color-gray-200: 237, 242, 247;
  --color-gray-100: 247, 250, 252;
  --color-error-900: 77, 4, 21;
  --color-error-800: 111, 7, 32;
  --color-error-700: 145, 11, 44;
  --color-error-600: 180, 17, 56;
  --color-error-500: 214, 23, 69;
  --color-error-400: 224, 70, 107;
  --color-error-300: 235, 122, 149;
  --color-error-200: 245, 177, 194;
  --color-error-100: 255, 237, 241;
  --color-success-900: 4, 77, 35;
  --color-success-800: 7, 109, 50;
  --color-success-700: 10, 142, 66;
  --color-success-600: 14, 175, 82;
  --color-success-500: 19, 208, 99;
  --color-success-400: 66, 220, 131;
  --color-success-300: 118, 232, 166;
  --color-success-200: 175, 243, 204;
  --color-success-100: 237, 255, 245;
  --color-warning-900: 77, 66, 4;
  --color-warning-800: 97, 84, 5;
  --color-warning-700: 118, 103, 7;
  --color-warning-600: 139, 121, 8;
  --color-warning-500: 160, 139, 10;
  --color-warning-400: 184, 165, 51;
  --color-warning-300: 208, 193, 103;
  --color-warning-200: 231, 222, 165;
  --color-warning-100: 255, 253, 237;
  --color-extra-red-900: 77, 6, 4;
  --color-extra-red-800: 114, 13, 10;
  --color-extra-red-700: 152, 23, 20;
  --color-extra-red-600: 189, 36, 32;
  --color-extra-red-500: 227, 52, 47;
  --color-extra-red-400: 234, 95, 91;
  --color-extra-red-300: 241, 140, 137;
  --color-extra-red-200: 248, 188, 186;
  --color-extra-red-100: 255, 238, 237;
  --color-extra-orange-900: 77, 40, 4;
  --color-extra-orange-800: 119, 65, 12;
  --color-extra-orange-700: 161, 92, 25;
  --color-extra-orange-600: 204, 121, 42;
  --color-extra-orange-500: 246, 153, 63;
  --color-extra-orange-400: 248, 176, 105;
  --color-extra-orange-300: 251, 199, 149;
  --color-extra-orange-200: 253, 222, 192;
  --color-extra-orange-100: 255, 246, 237;
  --color-extra-yellow-900: 77, 69, 4;
  --color-extra-yellow-800: 121, 110, 13;
  --color-extra-yellow-700: 166, 152, 28;
  --color-extra-yellow-600: 210, 194, 48;
  --color-extra-yellow-500: 255, 237, 74;
  --color-extra-yellow-400: 255, 241, 115;
  --color-extra-yellow-300: 255, 245, 156;
  --color-extra-yellow-200: 255, 249, 196;
  --color-extra-yellow-100: 255, 253, 237;
  --color-extra-green-900: 4, 77, 35;
  --color-extra-green-800: 12, 106, 51;
  --color-extra-green-700: 23, 135, 70;
  --color-extra-green-600: 38, 164, 91;
  --color-extra-green-500: 56, 193, 114;
  --color-extra-green-400: 94, 209, 142;
  --color-extra-green-300: 137, 224, 174;
  --color-extra-green-200: 184, 240, 208;
  --color-extra-green-100: 237, 255, 245;
  --color-extra-blue-900: 4, 44, 77;
  --color-extra-blue-800: 11, 66, 112;
  --color-extra-blue-700: 21, 91, 148;
  --color-extra-blue-600: 35, 117, 184;
  --color-extra-blue-500: 52, 144, 220;
  --color-extra-blue-400: 94, 168, 229;
  --color-extra-blue-300: 139, 193, 238;
  --color-extra-blue-200: 186, 219, 246;
  --color-extra-blue-100: 237, 247, 255;
  --color-extra-indigo-900: 4, 14, 77;
  --color-extra-indigo-800: 17, 31, 109;
  --color-extra-indigo-700: 38, 53, 141;
  --color-extra-indigo-600: 66, 81, 173;
  --color-extra-indigo-500: 101, 116, 205;
  --color-extra-indigo-400: 131, 143, 218;
  --color-extra-indigo-300: 164, 173, 230;
  --color-extra-indigo-200: 199, 205, 243;
  --color-extra-indigo-100: 237, 240, 255;
  --color-extra-violet-900: 33, 4, 77;
  --color-extra-violet-800: 56, 16, 114;
  --color-extra-violet-700: 83, 36, 151;
  --color-extra-violet-600: 114, 63, 189;
  --color-extra-violet-500: 149, 97, 226;
  --color-extra-violet-400: 171, 129, 233;
  --color-extra-violet-300: 195, 163, 241;
  --color-extra-violet-200: 219, 199, 248;
  --color-extra-violet-100: 244, 237, 255;
  --color-extra-pink-900: 77, 4, 28;
  --color-extra-pink-800: 119, 18, 52;
  --color-extra-pink-700: 161, 40, 81;
  --color-extra-pink-600: 204, 70, 115;
  --color-extra-pink-500: 246, 109, 155;
  --color-extra-pink-400: 248, 140, 176;
  --color-extra-pink-300: 251, 172, 198;
  --color-extra-pink-200: 253, 204, 221;
  --color-extra-pink-100: 255, 237, 243;
  --color-primary-dash3-900: 29, 4, 77;
  --color-primary-dash3-800: 49, 13, 119;
  --color-primary-dash3-700: 73, 27, 161;
  --color-primary-dash3-600: 115, 56, 176;
  --color-primary-dash3-500: 131, 71, 245;
  --color-primary-dash3-500: 153, 74, 232;
  --color-primary-dash3-400: 158, 111, 248;
  --color-primary-dash3-300: 186, 152, 250;
  --color-primary-dash3-200: 214, 194, 252;
  --color-primary-dash3-100: 243, 237, 255;
  --color-secondary-dash3-900: 4, 50, 77;
  --color-secondary-dash3-800: 8, 77, 118;
  --color-secondary-dash3-700: 14, 106, 159;
  --color-secondary-dash3-600: 22, 135, 201;
  --color-secondary-dash3-500: 31, 164, 242;
  --color-secondary-dash3-400: 81, 184, 245;
  --color-secondary-dash3-300: 131, 205, 248;
  --color-secondary-dash3-200: 184, 227, 252;
  --color-secondary-dash3-100: 237, 248, 255;
  --color-gray-dash3-900: 26, 32, 44;
  --color-gray-dash3-800: 45, 55, 72;
  --color-gray-dash3-700: 74, 85, 104;
  --color-gray-dash3-600: 113, 128, 150;
  --color-gray-dash3-500: 160, 174, 192;
  --color-gray-dash3-400: 203, 213, 224;
  --color-gray-dash3-300: 226, 232, 240;
  --color-gray-dash3-200: 237, 242, 247;
  --color-gray-dash3-100: 247, 250, 252;
  --color-error-dash3-900: 77, 4, 21;
  --color-error-dash3-800: 111, 7, 32;
  --color-error-dash3-700: 145, 11, 44;
  --color-error-dash3-600: 180, 17, 56;
  --color-error-dash3-500: 214, 23, 69;
  --color-error-dash3-400: 224, 70, 107;
  --color-error-dash3-300: 235, 122, 149;
  --color-error-dash3-200: 245, 177, 194;
  --color-error-dash3-100: 255, 237, 241;
  --color-success-dash3-900: 4, 77, 35;
  --color-success-dash3-800: 7, 109, 50;
  --color-success-dash3-700: 10, 142, 66;
  --color-success-dash3-600: 14, 175, 82;
  --color-success-dash3-500: 19, 208, 99;
  --color-success-dash3-400: 66, 220, 131;
  --color-success-dash3-300: 118, 232, 166;
  --color-success-dash3-200: 175, 243, 204;
  --color-success-dash3-100: 237, 255, 245;
  --color-teal-dash3-900: 4, 77, 70;
  --color-teal-dash3-800: 15, 105, 97;
  --color-teal-dash3-700: 30, 134, 124;
  --color-teal-dash3-600: 51, 163, 152;
  --color-teal-dash3-500: 77, 192, 181;
  --color-teal-dash3-400: 111, 208, 198;
  --color-teal-dash3-300: 149, 224, 216;
  --color-teal-dash3-200: 191, 239, 235;
  --color-teal-dash3-100: 237, 255, 253;
  --color-extra-midnight-dash3-900: 13, 11, 40;
  --color-extra-midnight-dash3-800: 18, 15, 56;
  --color-extra-midnight-dash3-700: 23, 20, 72;
  --color-extra-midnight-dash3-600: 28, 24, 88;
  --color-extra-midnight-dash3-500: 33, 29, 104;
  --color-extra-midnight-dash3-400: 38, 33, 120;
  --color-extra-midnight-dash3-300: 43, 38, 136;
  --color-extra-midnight-dash3-200: 54, 46, 168;
  --color-extra-midnight-dash3-100: 60, 51, 184;
  --color-soft-purple-600: 64, 58, 177;
  --color-extra-indigo-dash3-800: 70, 63, 192;
  --color-extra-indigo-dash3-700: 84, 78, 197;
  --color-extra-indigo-dash3-600: 99, 94, 202;
  --color-extra-indigo-dash3-500: 114, 109, 207;
  --color-extra-indigo-dash3-400: 129, 124, 212;
  --color-extra-indigo-dash3-300: 144, 140, 217;
  --color-extra-indigo-dash3-200: 159, 155, 222;
  --color-extra-indigo-dash3-100: 173, 170, 227;
  --color-extra-plum-dash3-900: 182, 22, 200;
  --color-extra-violet-dash3-900: 131, 71, 245;
  --color-extra-violet-dash3-800: 123, 108, 245;
  --color-extra-navy-dash3-900: 19, 41, 75;
  --color-extra-blue-dash3-900: 0, 139, 230;
  --color-extra-lilac-dash3-900: 148, 147, 203;
  --color-extra-lilac-dash3-800: 243, 237, 255;
  --color-extra-silver-dash3-900: 239, 238, 238;
  --color-extra-silver-dash3-800: 252, 252, 252;
  --color-title-dash3: 19, 41, 75;
  --color-electric-purple-900: 38, 18, 58;
  --color-electric-purple-800: 77, 37, 117;
  --color-electric-purple-700: 115, 56, 176;
  --color-electric-purple-600: 115, 55, 175;
  --color-electric-purple-500: 153, 74, 232;
  --color-electric-purple-400: 194, 146, 242;
  --color-electric-purple-300: 215, 194, 254;
  --color-electric-purple-200: 235, 219, 251;
  --color-electric-purple-100: 247, 237, 254;
  --color-sky-blue-900: 14, 32, 56;
  --color-sky-blue-800: 28, 63, 112;
  --color-sky-blue-700: 41, 95, 167;
  --color-sky-blue-600: 55, 126, 223;
  --color-sky-blue-400: 135, 178, 236;
  --color-sky-blue-300: 175, 203, 242;
  --color-sky-blue-200: 215, 229, 249;
  --color-sky-blue-100: 237, 247, 255;
  --color-teal-900: 10, 49, 49;
  --color-teal-800: 21, 99, 99;
  --color-teal-700: 32, 149, 149;
  --color-teal-600: 42, 198, 198;
  --color-teal-500: 85, 209, 209;
  --color-teal-400: 127, 221, 221;
  --color-teal-300: 170, 232, 232;
  --color-teal-200: 212, 244, 244;
  --color-teal-100: 237, 252, 252;
  --color-soft-purple-900: 23, 20, 49;
  --color-soft-purple-800: 46, 41, 99;
  --color-soft-purple-700: 69, 62, 149;
  --color-soft-purple-600: 92, 82, 198;
  --color-soft-purple-500: 125, 117, 209;
  --color-soft-purple-400: 157, 151, 221;
  --color-soft-purple-300: 190, 186, 232;
  --color-soft-purple-200: 222, 220, 244;
  --color-soft-purple-100: 240, 238, 252;
  --color-deep-navy-500: 38, 18, 107;
}
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
.pill--query, .pill--operator {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version */
}
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.modal {
  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.3), 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 0 1px rgba(0, 0, 0, 0.21);
  z-index: 1000;
  width: 450px;
}
.modal__body {
  padding: 10px;
  background: #fff;
  color: rgb(var(--color-gray-600));
}
.modal__header {
  font-size: 0.75em;
  letter-spacing: 0.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgb(var(--color-gray-600));
  margin: 0.65em 0 1.67em;
}
.modal__smaller-header {
  font-size: 0.5em;
  letter-spacing: 0.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgb(var(--color-gray-600));
  margin: 0.65em 0 1.67em;
}
.modal__p {
  font-size: 0.9em;
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 1.25em;
}
.modal__p--danger {
  color: rgb(var(--color-error-500));
}
.modal__p__link {
  text-decoration: underline;
  cursor: pointer;
}
.modal textarea {
  height: 100px;
}
.modal__radio-buttons {
  margin: 1em 0;
}
.modal__radio-buttons input {
  visibility: hidden;
  display: none;
}
.modal__radio-buttons label {
  display: block;
  margin-bottom: 5px;
}
.modal__radio-buttons__button span {
  font-size: 1em;
  line-height: 1.3em;
}
.modal__radio-buttons__button {
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -ms-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  border-radius: 5px;
  border: 1px solid rgb(var(--color-gray-600));
  padding: 0.5em;
}
.modal__radio-buttons__button i {
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -ms-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  height: 1em;
  padding: 4px;
  font-size: 0.85em;
  border-radius: 4px;
  background-color: rgb(var(--color-gray-100));
  border: 1px solid rgb(var(--color-gray-600));
  color: rgb(var(--color-gray-600));
}
.modal__radio-buttons__button {
  background-color: rgb(var(--color-gray-100));
  color: rgb(var(--color-gray-600));
}
.modal__radio-buttons__button:hover {
  cursor: pointer;
  background-color: rgb(var(--color-secondary-100));
}
.modal__radio-buttons__button.selected i {
  background-color: rgb(var(--color-success-300));
  border: 1px solid rgb(var(--color-success-700));
  color: white;
}
.modal__radio-buttons__button.selected {
  background-color: rgb(var(--color-secondary-100));
  color: rgb(var(--color-secondary-500));
  border-color: rgb(var(--color-secondary-500));
}
.modal__gutter {
  background-color: rgb(var(--color-gray-100));
  padding: 10px;
}
.modal__gutter .button {
  margin-left: 10px;
}
.modal-page-overlay {
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(226, 234, 255, 0.671);
}
body {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  background: rgb(var(--color-gray-100));
}
*:focus {
  outline: 0;
}
.dash3 {
  overflow: hidden !important;
}
.shadow-sm {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.shadow-md {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
}
.shadow-lg {
  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);
}
.fullHeight--centered {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.horizontal-divider {
  transition: 0.2s all;
  height: 1px;
  background: rgb(var(--color-primary-500));
  margin-top: 3px;
  margin-bottom: 5px;
}
.horizontal-divider--2x {
  height: 1px;
  background: rgb(var(--color-primary-500));
}
.horizontal-divider--gray {
  background: rgb(var(--color-gray-300));
}
.transparent {
  opacity: 0;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
               supported by Chrome and Opera */
}
.disable-hover {
  position: relative;
}
.disable-hover:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.not-relative {
  position: static !important;
}
.fadeBecauseLoading {
  opacity: 0.2;
}
.disabled {
  opacity: 0.4;
  color: rgb(var(--color-gray-600));
  cursor: not-allowed;
}
.disabled:hover {
  color: rgb(var(--color-gray-600));
}
.clickable {
  cursor: pointer;
}
.uppercase {
  text-transform: uppercase;
}
.h-spacing-5 {
  margin-left: 5px;
  margin-right: 5px;
}
.h-spacing-10 {
  margin-left: 10px;
  margin-right: 10px;
}
.hasTooltip {
  text-decoration: underline;
  cursor: help;
}
.tippy-touch {
  cursor: pointer !important;
}
.tippy-notransition {
  transition: none !important;
}
.tippy-popper {
  max-width: 500px;
  perspective: 800px;
  z-index: 9999;
  outline: 0;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  pointer-events: none;
}
.tippy-popper.html-template {
  max-width: 96%;
  max-width: calc(100% - 20px);
}
.tippy-popper .tippy-tooltip.transparent-theme {
  background-color: rgba(0, 0, 0, 0.7);
}
.tippy-popper .tippy-tooltip.transparent-theme[data-animatefill] {
  background-color: transparent;
}
.tippy-popper .tippy-tooltip.light-theme {
  color: #26323d;
  box-shadow: 0 4px 20px 4px rgba(0, 20, 60, 0.1), 0 4px 80px -8px rgba(0, 20, 60, 0.2);
  background-color: rgb(var(--color-secondary-900));
}
.tippy-popper .tippy-tooltip.light-theme[data-animatefill] {
  background-color: transparent;
}
.tippy-popper[x-placement^=top] [x-arrow] {
  border-top: 5px solid rgb(var(--color-white));
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  bottom: -5px;
  margin: 0 9px;
}
.tippy-popper[x-placement^=top] [x-arrow].arrow-small {
  border-top: 5px solid rgb(var(--color-white));
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  bottom: -5px;
}
.tippy-popper[x-placement^=top] [x-arrow].arrow-big {
  border-top: 10px solid rgb(var(--color-white));
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  bottom: -10px;
}
.tippy-popper[x-placement^=top] [x-circle] {
  transform-origin: 0 33%;
}
.tippy-popper[x-placement^=top] [x-circle].enter {
  transform: scale(1) translate(-50%, -55%);
  opacity: 1;
}
.tippy-popper[x-placement^=top] [x-circle].leave {
  transform: scale(0.15) translate(-50%, -50%);
  opacity: 0;
}
.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-circle] {
  background-color: rgb(var(--color-secondary-900));
}
.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow] {
  border-top: 5px solid rgb(var(--color-secondary-900));
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}
.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-small {
  border-top: 5px solid rgb(var(--color-secondary-900));
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}
.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-big {
  border-top: 10px solid rgb(var(--color-secondary-900));
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}
.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-circle] {
  background-color: rgba(0, 0, 0, 0.7);
}
.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow] {
  border-top: 5px solid rgba(0, 0, 0, 0.7);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}
.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-small {
  border-top: 5px solid rgba(0, 0, 0, 0.7);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}
.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
  border-top: 10px solid rgba(0, 0, 0, 0.7);
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}
.tippy-popper[x-placement^=top] [data-animation=perspective] {
  transform-origin: bottom;
}
.tippy-popper[x-placement^=top] [data-animation=perspective].enter {
  opacity: 1;
  transform: translateY(-10px) rotateX(0);
}
.tippy-popper[x-placement^=top] [data-animation=perspective].leave {
  opacity: 0;
  transform: translateY(0) rotateX(90deg);
}
.tippy-popper[x-placement^=top] [data-animation=fade].enter {
  opacity: 1;
  transform: translateY(-10px);
}
.tippy-popper[x-placement^=top] [data-animation=fade].leave {
  opacity: 0;
  transform: translateY(-10px);
}
.tippy-popper[x-placement^=top] [data-animation=shift].enter {
  opacity: 1;
  transform: translateY(-10px);
}
.tippy-popper[x-placement^=top] [data-animation=shift].leave {
  opacity: 0;
  transform: translateY(0);
}
.tippy-popper[x-placement^=top] [data-animation=scale].enter {
  opacity: 1;
  transform: translateY(-10px) scale(1);
}
.tippy-popper[x-placement^=top] [data-animation=scale].leave {
  opacity: 0;
  transform: translateY(0) scale(0);
}
.tippy-popper[x-placement^=bottom] [x-arrow] {
  border-bottom: 5px solid rgb(var(--color-white));
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  top: -5px;
  margin: 0 9px;
}
.tippy-popper[x-placement^=bottom] [x-arrow].arrow-small {
  border-bottom: 5px solid rgb(var(--color-white));
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  top: -5px;
}
.tippy-popper[x-placement^=bottom] [x-arrow].arrow-big {
  border-bottom: 10px solid rgb(var(--color-white));
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  top: -10px;
}
.tippy-popper[x-placement^=bottom] [x-circle] {
  transform-origin: 0 -50%;
}
.tippy-popper[x-placement^=bottom] [x-circle].enter {
  transform: scale(1) translate(-50%, -45%);
  opacity: 1;
}
.tippy-popper[x-placement^=bottom] [x-circle].leave {
  transform: scale(0.15) translate(-50%, -5%);
  opacity: 0;
}
.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-circle] {
  background-color: rgb(var(--color-secondary-900));
}
.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow] {
  border-bottom: 5px solid rgb(var(--color-secondary-900));
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}
.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-small {
  border-bottom: 5px solid rgb(var(--color-secondary-900));
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}
.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-big {
  border-bottom: 10px solid rgb(var(--color-secondary-900));
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}
.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-circle] {
  background-color: rgba(0, 0, 0, 0.7);
}
.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow] {
  border-bottom: 5px solid rgba(0, 0, 0, 0.7);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}
.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-small {
  border-bottom: 5px solid rgba(0, 0, 0, 0.7);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}
.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
  border-bottom: 10px solid rgba(0, 0, 0, 0.7);
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}
.tippy-popper[x-placement^=bottom] [data-animation=perspective] {
  transform-origin: top;
}
.tippy-popper[x-placement^=bottom] [data-animation=perspective].enter {
  opacity: 1;
  transform: translateY(10px) rotateX(0);
}
.tippy-popper[x-placement^=bottom] [data-animation=perspective].leave {
  opacity: 0;
  transform: translateY(0) rotateX(-90deg);
}
.tippy-popper[x-placement^=bottom] [data-animation=fade].enter {
  opacity: 1;
  transform: translateY(10px);
}
.tippy-popper[x-placement^=bottom] [data-animation=fade].leave {
  opacity: 0;
  transform: translateY(10px);
}
.tippy-popper[x-placement^=bottom] [data-animation=shift].enter {
  opacity: 1;
  transform: translateY(10px);
}
.tippy-popper[x-placement^=bottom] [data-animation=shift].leave {
  opacity: 0;
  transform: translateY(0);
}
.tippy-popper[x-placement^=bottom] [data-animation=scale].enter {
  opacity: 1;
  transform: translateY(10px) scale(1);
}
.tippy-popper[x-placement^=bottom] [data-animation=scale].leave {
  opacity: 0;
  transform: translateY(0) scale(0);
}
.tippy-popper[x-placement^=left] [x-arrow] {
  border-left: 5px solid rgb(var(--color-white));
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  right: -5px;
  margin: 6px 0;
}
.tippy-popper[x-placement^=left] [x-arrow].arrow-small {
  border-left: 5px solid rgb(var(--color-white));
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  right: -5px;
}
.tippy-popper[x-placement^=left] [x-arrow].arrow-big {
  border-left: 10px solid rgb(var(--color-white));
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  right: -10px;
}
.tippy-popper[x-placement^=left] [x-circle] {
  transform-origin: 50% 0;
}
.tippy-popper[x-placement^=left] [x-circle].enter {
  transform: scale(1) translate(-50%, -50%);
  opacity: 1;
}
.tippy-popper[x-placement^=left] [x-circle].leave {
  transform: scale(0.15) translate(-50%, -50%);
  opacity: 0;
}
.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-circle] {
  background-color: rgb(var(--color-secondary-900));
}
.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow] {
  border-left: 5px solid rgb(var(--color-secondary-900));
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-small {
  border-left: 5px solid rgb(var(--color-secondary-900));
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-big {
  border-left: 10px solid rgb(var(--color-secondary-900));
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-circle] {
  background-color: rgba(0, 0, 0, 0.7);
}
.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow] {
  border-left: 5px solid rgba(0, 0, 0, 0.7);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-small {
  border-left: 5px solid rgba(0, 0, 0, 0.7);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
  border-left: 10px solid rgba(0, 0, 0, 0.7);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.tippy-popper[x-placement^=left] [data-animation=perspective] {
  transform-origin: right;
}
.tippy-popper[x-placement^=left] [data-animation=perspective].enter {
  opacity: 1;
  transform: translateX(-10px) rotateY(0);
}
.tippy-popper[x-placement^=left] [data-animation=perspective].leave {
  opacity: 0;
  transform: translateX(0) rotateY(-90deg);
}
.tippy-popper[x-placement^=left] [data-animation=fade].enter {
  opacity: 1;
  transform: translateX(-10px);
}
.tippy-popper[x-placement^=left] [data-animation=fade].leave {
  opacity: 0;
  transform: translateX(-10px);
}
.tippy-popper[x-placement^=left] [data-animation=shift].enter {
  opacity: 1;
  transform: translateX(-10px);
}
.tippy-popper[x-placement^=left] [data-animation=shift].leave {
  opacity: 0;
  transform: translateX(0);
}
.tippy-popper[x-placement^=left] [data-animation=scale].enter {
  opacity: 1;
  transform: translateX(-10px) scale(1);
}
.tippy-popper[x-placement^=left] [data-animation=scale].leave {
  opacity: 0;
  transform: translateX(0) scale(0);
}
.tippy-popper[x-placement^=right] [x-arrow] {
  border-right: 5px solid rgb(var(--color-white));
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  left: -5px;
  margin: 6px 0;
}
.tippy-popper[x-placement^=right] [x-arrow].arrow-small {
  border-right: 5px solid rgb(var(--color-white));
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  left: -5px;
}
.tippy-popper[x-placement^=right] [x-arrow].arrow-big {
  border-right: 10px solid rgb(var(--color-white));
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  left: -10px;
}
.tippy-popper[x-placement^=right] [x-circle] {
  transform-origin: -50% 0;
}
.tippy-popper[x-placement^=right] [x-circle].enter {
  transform: scale(1) translate(-50%, -50%);
  opacity: 1;
}
.tippy-popper[x-placement^=right] [x-circle].leave {
  transform: scale(0.15) translate(-50%, -50%);
  opacity: 0;
}
.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-circle] {
  background-color: rgb(var(--color-secondary-900));
}
.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow] {
  border-right: 5px solid rgb(var(--color-secondary-900));
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-small {
  border-right: 5px solid rgb(var(--color-secondary-900));
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-big {
  border-right: 10px solid rgb(var(--color-secondary-900));
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-circle] {
  background-color: rgba(0, 0, 0, 0.7);
}
.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow] {
  border-right: 5px solid rgba(0, 0, 0, 0.7);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-small {
  border-right: 5px solid rgba(0, 0, 0, 0.7);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
  border-right: 10px solid rgba(0, 0, 0, 0.7);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.tippy-popper[x-placement^=right] [data-animation=perspective] {
  transform-origin: left;
}
.tippy-popper[x-placement^=right] [data-animation=perspective].enter {
  opacity: 1;
  transform: translateX(10px) rotateY(0);
}
.tippy-popper[x-placement^=right] [data-animation=perspective].leave {
  opacity: 0;
  transform: translateX(0) rotateY(90deg);
}
.tippy-popper[x-placement^=right] [data-animation=fade].enter {
  opacity: 1;
  transform: translateX(10px);
}
.tippy-popper[x-placement^=right] [data-animation=fade].leave {
  opacity: 0;
  transform: translateX(10px);
}
.tippy-popper[x-placement^=right] [data-animation=shift].enter {
  opacity: 1;
  transform: translateX(10px);
}
.tippy-popper[x-placement^=right] [data-animation=shift].leave {
  opacity: 0;
  transform: translateX(0);
}
.tippy-popper[x-placement^=right] [data-animation=scale].enter {
  opacity: 1;
  transform: translateX(10px) scale(1);
}
.tippy-popper[x-placement^=right] [data-animation=scale].leave {
  opacity: 0;
  transform: translateX(0) scale(0);
}
.tippy-tooltip {
  position: relative;
  color: rgb(var(--color-secondary-900));
  border-radius: 5px;
  font-size: 0.95rem;
  padding: 0.9rem 1.2rem;
  text-align: left;
  line-height: 1.24em;
  will-change: transform;
  background-color: rgb(var(--color-white));
  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.3), 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 0 1px rgba(0, 0, 0, 0.21);
}
.tippy-tooltip p {
  line-height: 1.1;
}
.tippy-tooltip p:last-of-type {
  margin-bottom: 0;
}
.tippy-tooltip [x-arrow] {
  position: absolute;
  width: 0;
  height: 0;
}
.tippy-tooltip [x-circle] {
  position: absolute;
  will-change: transform;
  background-color: rgb(var(--color-white));
  border-radius: 50%;
  width: 130%;
  width: calc(110% + 2rem);
  left: 50%;
  top: 50%;
  z-index: -1;
  overflow: hidden;
  transition: all ease;
}
.tippy-tooltip [x-circle]:before {
  content: "";
  padding-top: 90%;
  float: left;
}
.tippy-tooltip--small {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
}
.tippy-tooltip--big {
  padding: 0.6rem 1.2rem;
  font-size: 1.2rem;
}
.tippy-tooltip[data-animatefill] {
  overflow: hidden;
  background-color: transparent;
}
.tippy-tooltip[data-interactive] {
  pointer-events: auto;
}
.tippy-tooltip[data-inertia] {
  transition-timing-function: cubic-bezier(0.53, 2, 0.36, 0.85);
}
@media (max-width: 450px) {
  .tippy-popper {
    max-width: 96%;
    max-width: calc(100% - 20px);
  }
}
.pill {
  font-size: 85%;
  font-weight: 700;
  padding: 3px 6px;
  display: inline-block;
  margin: 0 6px;
  border-radius: 12px;
  text-align: center;
}
.pill--small {
  padding: 1px 2px;
  line-height: 1em;
}
.pill .fa {
  margin: 0;
}
.pill--noround {
  border-radius: 0px;
}
.pill--smallMargin {
  margin: 0 2px;
}
.pill {
  /* For Slicer properties select */
}
.pill--hide {
  display: none;
}
.pill--query {
  margin-left: 0;
  width: 47px;
  border-radius: 5px;
  padding: 5px 2px;
  font-size: 75%;
}
.pill--query .Icon {
  margin: 0;
}
.pill--sessionProperties {
  width: 70px !important;
}
.pill--ABTest {
  background-color: rgb(var(--color-extra-violet-500));
  color: rgb(var(--color-white));
}
.pill--App {
  background-color: rgb(var(--color-success-300));
  color: rgb(var(--color-success-700));
}
.pill--Common {
  background-color: rgb(var(--color-extra-indigo-300));
  color: rgb(var(--color-extra-indigo-700));
}
.pill--Device {
  background-color: rgb(var(--color-gray-300));
  color: rgb(var(--color-gray-700));
}
.pill--Geo {
  background-color: rgb(var(--color-teal-300));
  color: rgb(var(--color-teal-700));
}
.pill--User {
  background-color: rgb(var(--color-secondary-300));
  color: rgb(var(--color-secondary-700));
}
.pill--Participant {
  background-color: rgb(var(--color-secondary-800));
  color: rgb(var(--color-secondary-100));
  font-size: 10px;
}
.pill--Sensor {
  background-color: rgb(var(--color-extra-orange-300));
  color: rgb(var(--color-extra-orange-700));
}
.pill--HMD {
  background-color: rgb(var(--color-primary-300));
  color: rgb(var(--color-primary-700));
}
.pill--Custom {
  background-color: rgb(var(--color-secondary-500));
  color: rgb(var(--color-white));
}
.pill--Warning {
  background-color: rgb(var(--color-error-300));
  color: rgb(var(--color-error-700));
}
.pill--Tag {
  background-color: rgb(var(--color-extra-pink-500));
  color: rgb(var(--color-extra-pink-900));
}
.pill--ExitPoll {
  background-color: rgb(var(--color-extra-violet-300));
  color: rgb(var(--color-extra-violet-700));
}
.pill--Event {
  background-color: rgb(var(--color-extra-violet-300));
  color: rgb(var(--color-extra-violet-700));
}
.pill--Metrics {
  background-color: rgb(var(--color-extra-green-300));
  color: rgb(var(--color-extra-green-700));
}
.pill--XRPF {
  background-color: rgb(var(--color-extra-orange-500));
  color: rgb(var(--color-white));
}
.pill {
  /* For Slicer operators select */
}
.pill--operator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  margin-right: 10px;
  width: 40px;
  min-width: 40px;
  min-height: 20px;
  border-radius: 5px;
  padding: 3px 2px;
  font-size: 11px;
}
.pill__symbol {
  font-size: 10pt;
  line-height: 10px;
  text-align: center;
}
.pill .fa {
  padding-top: 1px;
  padding-bottom: 1px;
}
.pill--primary {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-primary-500));
  border: 1px solid rgb(var(--color-primary-500));
}
.pill--o-primary {
  color: rgb(var(--color-primary-500));
  border: 1px solid rgb(var(--color-primary-500));
}
.pill--secondary {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-secondary-500));
  border: 1px solid rgb(var(--color-secondary-500));
}
.pill--o-secondary {
  color: rgb(var(--color-secondary-500));
  border: 1px solid rgb(var(--color-secondary-500));
}
.pill--gray {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-gray-500));
  border: 1px solid rgb(var(--color-gray-500));
}
.pill--o-gray {
  color: rgb(var(--color-gray-500));
  border: 1px solid rgb(var(--color-gray-500));
}
.pill--white {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-white));
  border: 1px solid rgb(var(--color-white));
}
.pill--o-white {
  color: rgb(var(--color-white));
  border: 1px solid rgb(var(--color-white));
}
.pill--black {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-black));
  border: 1px solid rgb(var(--color-black));
}
.pill--o-black {
  color: rgb(var(--color-black));
  border: 1px solid rgb(var(--color-black));
}
.pill--error {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-error-500));
  border: 1px solid rgb(var(--color-error-500));
}
.pill--o-error {
  color: rgb(var(--color-error-500));
  border: 1px solid rgb(var(--color-error-500));
}
.pill--success {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-success-500));
  border: 1px solid rgb(var(--color-success-500));
}
.pill--o-success {
  color: rgb(var(--color-success-500));
  border: 1px solid rgb(var(--color-success-500));
}
.pill--warning {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-warning-500));
  border: 1px solid rgb(var(--color-warning-500));
}
.pill--o-warning {
  color: rgb(var(--color-warning-500));
  border: 1px solid rgb(var(--color-warning-500));
}
.pill--teal {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-teal-500));
  border: 1px solid rgb(var(--color-teal-500));
}
.pill--o-teal {
  color: rgb(var(--color-teal-500));
  border: 1px solid rgb(var(--color-teal-500));
}
.pill--extra-red {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-extra-red-500));
  border: 1px solid rgb(var(--color-extra-red-500));
}
.pill--o-extra-red {
  color: rgb(var(--color-extra-red-500));
  border: 1px solid rgb(var(--color-extra-red-500));
}
.pill--extra-orange {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-extra-orange-500));
  border: 1px solid rgb(var(--color-extra-orange-500));
}
.pill--o-extra-orange {
  color: rgb(var(--color-extra-orange-500));
  border: 1px solid rgb(var(--color-extra-orange-500));
}
.pill--extra-yellow {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-extra-yellow-500));
  border: 1px solid rgb(var(--color-extra-yellow-500));
}
.pill--o-extra-yellow {
  color: rgb(var(--color-extra-yellow-500));
  border: 1px solid rgb(var(--color-extra-yellow-500));
}
.pill--extra-green {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-extra-green-500));
  border: 1px solid rgb(var(--color-extra-green-500));
}
.pill--o-extra-green {
  color: rgb(var(--color-extra-green-500));
  border: 1px solid rgb(var(--color-extra-green-500));
}
.pill--extra-blue {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-extra-blue-500));
  border: 1px solid rgb(var(--color-extra-blue-500));
}
.pill--o-extra-blue {
  color: rgb(var(--color-extra-blue-500));
  border: 1px solid rgb(var(--color-extra-blue-500));
}
.pill--extra-indigo {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-extra-indigo-500));
  border: 1px solid rgb(var(--color-extra-indigo-500));
}
.pill--o-extra-indigo {
  color: rgb(var(--color-extra-indigo-500));
  border: 1px solid rgb(var(--color-extra-indigo-500));
}
.pill--extra-violet {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-extra-violet-500));
  border: 1px solid rgb(var(--color-extra-violet-500));
}
.pill--o-extra-violet {
  color: rgb(var(--color-extra-violet-500));
  border: 1px solid rgb(var(--color-extra-violet-500));
}
.pill--extra-pink {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-extra-pink-500));
  border: 1px solid rgb(var(--color-extra-pink-500));
}
.pill--o-extra-pink {
  color: rgb(var(--color-extra-pink-500));
  border: 1px solid rgb(var(--color-extra-pink-500));
}
.pill {
  padding: 0px 2px;
  width: 58px;
  min-width: 58px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*
*******************************************************************************************
* This is the typography file. Themeing fonts is not supported, but can be built out      *
* if truly necessary.                                                                     *
*******************************************************************************************

Note:   Fonts are imported using webfontloader ("WebFont.load") within Javascript.
		Check index.js for more info.

        – Rob
*/
/*------------------------------------*\
    # Type Default Settings
\*------------------------------------*/
*,
html,
body {
  font-family: "Onest";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
h4,
h5,
h6 {
  margin: 36px 0 24px 0;
  color: #000000;
  line-height: 1.25em;
  font-weight: 400;
}
h3 {
  font-size: 16px;
  font-weight: 700;
  color: rgb(var(--color-secondary-700));
}
h4 {
  font-size: 0.9558823529rem;
}
h5 {
  font-size: 0.9027777778rem;
}
h6 {
  font-size: 0.8125rem;
}
.title-1 {
  color: rgb(var(--color-white));
  font-size: 2.731092437rem;
  font-weight: 400;
  line-height: 1.25em;
}
.title-1-no-color {
  font-size: 2.731092437rem;
  font-weight: 400;
  line-height: 1.25em;
}
.title-2 {
  color: rgb(var(--color-primary-500));
  font-size: 2.731092437rem;
  font-weight: 400;
  line-height: 1.25em;
}
.H1 {
  color: rgb(var(--color-primary-500));
  line-height: 1.25em;
  font-weight: 400;
}
.H1-nocolor {
  line-height: 1.25em;
  font-weight: 400;
}
.H2 {
  font-size: 0.8812364425rem;
  line-height: 0.9170946442em;
  font-weight: 400;
  color: rgb(var(--color-gray-600));
}
.H3 {
  line-height: 1.0869565217em;
  font-weight: 400;
  color: rgb(var(--color-primary-500));
}
.fig-1 {
  font-size: 2.6209677419rem;
  font-weight: 400;
  line-height: 1.25em;
}
.fig-2 {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.25em;
}
.fig-3 {
  font-size: 1.3750095193rem;
  font-weight: 400;
  line-height: 1.25em;
}
.insight-1 {
  font-size: 1.3750211542rem;
  line-height: 1.25em;
  font-weight: 400;
}
.insight-2 {
  font-size: 0.8783783784rem 7;
  line-height: 0.8333333333em;
  font-weight: 400;
}
.body-copy {
  font-size: 1.0030864198rem 5;
  line-height: 0.9191176471em;
  font-weight: 400;
  color: rgb(var(--color-secondary-900));
}
.body-copy--highlight {
  color: rgb(var(--color-secondary-500));
}
.body-copy-small {
  font-size: 0.8750673129rem;
  line-height: 0.8333333333em;
  font-weight: 400;
}
.digits {
  /* 4th: */
  font-weight: 400;
  display: block;
  font-size: 32px;
  color: rgb(var(--color-secondary-900));
  letter-spacing: 0;
}
.descriptions {
  font-weight: 400;
  font-size: 14px;
  color: rgb(var(--color-secondary-900));
  letter-spacing: 0;
  line-height: 20px;
}
.descriptions--400 {
  color: rgb(var(--color-gray-600));
}
.disabled {
  opacity: 0.4;
  color: rgb(var(--color-gray-600));
  cursor: not-allowed;
}
.disabled:hover {
  color: rgb(var(--color-gray-600));
}
.link {
  font-size: 0.8750673129rem;
  line-height: 0.9166238909em;
  font-weight: 700;
  display: inline-block;
}
.link--disabled {
  opacity: 0.4;
  color: rgb(var(--color-gray-600));
  cursor: not-allowed;
}
.link--disabled:hover {
  color: rgb(var(--color-gray-600));
}
.link-400 {
  font-size: 0.7499884617rem;
  line-height: 1.25em;
  font-weight: 700;
}
.hover-underline:hover {
  text-decoration: underline;
}
.simple-text-link {
  cursor: pointer;
  color: rgb(var(--color-secondary-500));
}
.simple-text-link--disabled {
  cursor: not-allowed;
  color: rgb(var(--color-gray-500));
  font-weight: 400 !important;
  text-decoration: none !important;
}
.simple-text-link--small {
  font-size: 10pt;
}
.simple-text-link--active {
  font-weight: 700;
}
.simple-text-link--withSpacing {
  display: inline-block;
  margin: 0 5px;
}
.simple-text-link:hover {
  text-decoration: underline;
}
p {
  margin: 20px 0;
  font-size: 1rem;
  line-height: 1.5em;
  color: rgb(var(--color-gray-700));
}
p:first-of-type {
  margin-top: 0;
}
a {
  color: rgb(var(--color-secondary-500));
  text-decoration: none;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
a:hover {
  color: rgb(var(--color-secondary-700));
  cursor: pointer;
}
ul,
ol {
  margin: 0 0 0 20px;
}
ul li,
ol li {
  margin-top: 10px;
  line-height: 1.5em;
  color: inherit;
}
ul ul,
ul ol,
ol ul,
ol ol {
  margin-top: 0;
}
ul li {
  list-style: disc;
}
ul ul li {
  list-style: circle;
}
ol li {
  list-style: decimal;
}
hr {
  height: 1px;
  margin: 0px -20px;
  border: none;
  background-color: rgb(var(--color-gray-300));
}
sub {
  vertical-align: sub;
  font-size: smaller;
}
blockquote {
  margin: 30px 0;
  font-size: 1.4375rem;
  line-height: 1.5em;
  color: #505050;
  text-align: center;
  font-style: italic;
}
table {
  width: 100%;
  border-collapse: collapse;
}
table,
td,
th {
  text-align: left;
}
th {
  font-weight: 800;
}
th,
td {
  padding: 15px;
}
figure {
  margin: 30px 0;
}
figure img {
  margin: 0;
}
figcaption {
  margin-top: 10px;
  color: rgb(var(--color-gray-500));
  font-size: 16px;
}
pre {
  display: block;
  margin: 0 0 40px 0;
  padding: 20px;
  background-color: rgb(var(--color-gray-500));
  border: 1px solid #dadada;
  overflow: auto;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
pre code {
  position: static;
  padding: 0;
  border: none;
  line-height: 1.5em;
}
code {
  background-color: rgb(var(--color-gray-800));
  border: 1px solid rgb(var(--color-gray-900));
  border-radius: 3px;
  padding: 1px 2px;
  color: rgb(var(--color-white));
  font-weight: 700;
  font-size: 10pt;
  font-family: "Source Code Pro", Courier New, Courier, monospace;
}
code em {
  font-style: normal;
  font-weight: 400;
  color: rgb(var(--color-gray-500));
}
code strong {
  font-weight: 700;
  color: rgb(var(--color-extra-green-500));
}
em,
i,
.italic {
  font-style: italic;
}
strong,
b {
  font-weight: 800;
}
.bold {
  font-weight: 800;
}
.underline {
  text-decoration: underline;
}
.cta {
  font-size: 0.857em;
  font-weight: 800;
  color: rgb(var(--color-gray-600));
  letter-spacing: 0.98px;
  text-transform: uppercase;
}
.regular {
  font-weight: 400;
}
.light {
  font-weight: 300;
}
.text-sm {
  font-size: 0.75em;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-with-hint {
  border-bottom: 1px dashed;
  border-bottom-color: rgb(var(--color-gray-600));
  border-bottom-color: inherit;
  cursor: help;
}
/* Some Metrics Page Elements*/
.Metrics__dividerTitle {
  color: rgb(var(--color-gray-600));
  padding-top: 30px;
  padding-bottom: 5px;
  margin-bottom: 15px;
  font-size: 1em;
  position: relative;
}
.Metrics__dividerTitle:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 8px;
  left: 8px;
  height: 1px;
  background: rgba(var(--color-gray-600), 0.2);
}
@media only screen and (min-width: 48em) {
  .hide-sm {
    display: none;
  }
}
.show-sm {
  visibility: hidden;
}
@media only screen and (min-width: 48em) {
  .show-sm {
    visibility: visible;
  }
}
@media only screen and (min-width: 62em) {
  .hide-md {
    display: none;
  }
}
.show-md {
  visibility: hidden;
}
@media only screen and (min-width: 62em) {
  .show-md {
    visibility: visible;
  }
}
@media only screen and (min-width: 75em) {
  .hide-lg {
    display: none;
  }
}
.show-lg {
  visibility: hidden;
}
@media only screen and (min-width: 75em) {
  .show-lg {
    visibility: visible;
  }
}
@media only screen and (max-width: 48em) {
  .hide-xs {
    display: none;
  }
}
.show-xs {
  visibility: hidden;
}
@media only screen and (max-width: 48em) {
  .show-xs {
    visibility: visible;
  }
}
.row-column {
  flex-direction: column;
}
.children-bottom-right {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.grow {
  flex: 1;
}
.self-bottom {
  align-self: flex-bottom;
}
.self-top {
  align-self: flex-top;
}
.self-center {
  align-self: center;
}
.justify-self-end {
  justify-self: flex-end;
}
.justify-center {
  justify-content: center;
}
.place-center {
  place-self: center;
}
.self-end {
  margin-left: auto;
  justify-content: flex-end;
}
.space-around {
  justify-content: space-around;
}
.space-between {
  justify-content: space-between;
}
.rowBlock {
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}
.row-nomargin {
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.5rem;
  margin-left: -0.5rem;
  margin: 0;
}
.col-xs-6-nopadding {
  flex: 0 0 auto;
  max-width: 100%;
  box-sizing: border-box;
  flex-basis: 50%;
  max-width: 50%;
  padding-left: 0;
  padding-right: 0;
}
.col-xs-half {
  flex: 0 0 auto;
  max-width: 100%;
  box-sizing: border-box;
  flex-basis: 8.33333333%;
  max-width: 8.33333333%;
  max-width: 4.1666666667%;
  flex-basis: 4.1666666667%;
}
.col-xs-12-nopadding {
  flex: 0 0 auto;
  max-width: 100%;
  box-sizing: border-box;
  flex-basis: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.dash3-col-xs-12 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.items-stretch {
  align-items: stretch;
}
.items-center {
  align-items: center;
}
.h-100 {
  height: 100%;
}
.w-100 {
  width: 100%;
}
.panel-header {
  align-self: flex-start;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  width: 100%;
}
.panel-footer {
  align-self: flex-end;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  width: 100%;
}
.wrapper {
  position: relative;
}
.wrapper--phantomHeight {
  height: 200px;
}
.flex {
  display: flex;
}
.relative {
  position: relative;
}
.legends-container {
  padding: 10px 0 10px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.legends-container-dash3 {
  font-family: "Onest";
}
.legends-container-dash3 .legend {
  border-radius: 5px;
  padding-left: 12px !important;
}
.legends-container-dash3 .legend__label {
  margin-right: 8px !important;
}
.legends-container .legend {
  display: flex;
  position: relative;
  flex-basis: 120px;
  max-width: 33%;
  align-items: center;
  margin-left: 10px;
  margin-bottom: 5px;
  padding: 10px 8px;
  border: 1px solid rgb(var(--color-gray-300));
  border-radius: 3px;
}
.legends-container .legend.nocursor {
  cursor: default !important;
}
.legends-container .legend {
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
}
.legends-container .legend--clickable {
  flex-grow: 1;
  background: rgb(var(--color-gray-100));
}
.legends-container .legend--clickable.active {
  background: rgb(var(--color-white));
}
.legends-container .legend--clickable.active .legend__label {
  opacity: 1;
  color: transparent;
}
.legends-container .legend--clickable.active .legend__bgcolor {
  opacity: 0.3;
}
.legends-container .legend--clickable:hover .legend__label {
  opacity: 1;
}
.legends-container .legend--clickable:hover {
  cursor: pointer;
}
.legends-container .legend--clickable .legend__text-container {
  flex-direction: column;
}
.legends-container .legend--clickable .legend__text {
  font-family: "Onest";
  color: rgb(var(--color-title-dash3));
  width: 100%;
}
.legends-container .legend--unselected {
  background: rgb(var(--color-gray-300));
  opacity: 0.5;
}
.legends-container .legend__bgcolor {
  position: absolute;
  opacity: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}
.legends-container .legend__label {
  width: 10px;
  height: 10px;
  opacity: 0.6;
  margin-right: 5px;
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
}
.legends-container .legend__label--hasborder {
  margin-right: 0px;
  border-left-width: 10px;
  border-left-style: solid;
  height: 100%;
}
.legends-container .legend__text-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.legends-container .legend__text {
  padding: 3px 0;
  font-weight: bold;
  overflow: hidden;
}
.legends-container .legend__ratio {
  display: block;
  width: 100%;
}
.dark-mode .legends-container-dash3 .legend {
  background: rgba(var(--color-white), 0.05);
}
.dark-mode .legends-container-dash3 .legend__text {
  color: rgb(var(--color-gray-300));
}
.dark-mode .legend--clickable {
  background: rgb(var(--color-gray-200));
}
.piechart {
  height: auto;
  margin-top: 50px;
}
.piechart > svg {
  overflow: visible;
  display: block;
  height: 500px;
}
.piechart__slice {
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.piechart__slice:hover {
  cursor: pointer;
}
.piechart__labelgroup {
  overflow: visible;
}
.piechart__labelbg {
  fill: rgb(var(--color-white));
  stroke-width: 1px;
  transform: translateY(5px);
  shape-rendering: auto;
}
.piechart__linesAndlabels {
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: 0.2s opacity;
}
.piechart__linesAndlabels--active {
  opacity: 1;
}
.piechart__textLine {
  stroke: rgba(0, 0, 0, 0.2);
  stroke-width: 1px;
}
.piechart__lineDot {
  fill: rgba(0, 0, 0, 0.4);
}
.piechart__titletext {
  font-family: "Onest";
  fill: rgb(var(--color-gray-900));
  font-weight: 600;
}
.piechart__valueText {
  fill: rgb(var(--color-gray-900));
  font-weight: 600;
  font-size: 14px;
  transform: translateY(-5px);
}
.dark-mode .piechart__labelbg {
  fill: rgb(var(--color-gray-200));
}
.mapchart__region {
  fill: rgb(var(--color-secondary-400));
  stroke: rgb(var(--color-white));
  stroke-width: 0.5;
}
.apexcharts-tooltip {
  z-index: 9999 !important;
  pointer-events: none !important;
}
.apexcharts-tooltip.apexcharts-theme-light, .apexcharts-tooltip.apexcharts-theme-dark {
  z-index: 9999 !important;
}
.apexcharts-canvas {
  overflow: visible !important;
}
.math__description {
  font-size: 14px;
  font-family: "Onest";
  color: rgb(var(--color-gray-700));
}
.math__value {
  font-family: "Onest";
  font-size: 14px;
  font-weight: 600;
}
.dark-mode__copyButton {
  color: rgb(var(--color-white));
}
.dark-mode .AnimatedCheckbox__box {
  background: transparent;
}
.dark-mode {
  /* dash3 */
}
.dark-mode .PageContainerDash3 {
  background: rgb(var(--color-extra-midnight-dash3-900));
}
.dark-mode .ComparisonFigure-dash3__beforeTitle, .dark-mode .ComparisonFigure-dash3__afterTitle {
  color: rgb(var(--color-white));
}
.dark-mode .ComparisonFigure-dash3--navy {
  color: rgba(var(--color-white), 0.5);
}
.dark-mode .IllustrationFigure-dash3__illustration__text {
  color: rgb(var(--color-white));
}
.dark-mode .Table-dash3 th {
  color: rgb(var(--color-white));
}
.dark-mode .Table-dash3 td {
  color: rgb(var(--color-white));
}
.dark-mode .RetentionTable-dash3 th {
  color: rgb(var(--color-white));
}
.dark-mode {
  /* Dashboard card */
}
.dark-mode .DashboardCard-dash3 {
  background: rgba(var(--color-white), 0.1);
  border: 1px solid rgba(242, 240, 240, 0.15);
}
.dark-mode .DashboardCard-dash3--placeholder {
  background: transparent !important;
  border: none;
}
.dark-mode .DashboardCard-dash3--alt {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-soft-purple-600));
  border: none;
}
.dark-mode .DashboardCard-dash3__header--border {
  border-bottom: 1px solid rgba(242, 240, 240, 0.15);
}
.dark-mode .DashboardCard-dash3__header__icon {
  color: rgba(var(--color-white), 0.5);
}
.dark-mode .DashboardCard-dash3__header__icon--alt {
  color: rgba(var(--color-white), 1);
}
.dark-mode .DashboardCard-dash3__header__icon--active {
  color: rgba(var(--color-white), 1);
}
.dark-mode .DashboardCard-dash3__header h3 {
  color: rgb(var(--color-white));
  font-weight: 500;
}
.dark-mode .DashboardCard-dash3__content__title {
  color: rgb(var(--color-white));
}
.dark-mode .DashboardCard-dash3__content__description__text h4,
.dark-mode .DashboardCard-dash3__content__description__text p {
  color: rgb(var(--color-extra-lilac-dash3-800));
}
.dark-mode .DashboardCard-dash3__infoTooltip p {
  color: rgb(var(--color-white));
}
.dark-mode .DashboardCard-dash3__infoTooltip .help-icon {
  color: rgb(var(--color-extra-violet-dash3-900));
}
.dark-mode .DashboardCard-dash3__emptyDataCard h3 {
  color: rgb(var(--color-white));
}
.dark-mode .DashboardCard-dash3__emptyDataCard p {
  color: rgb(var(--color-extra-lilac-dash3-800));
}
.dark-mode .ExitPollResults-dash3__questionChart__npsText {
  color: rgb(var(--color-extra-violet-dash3-800));
}
.dark-mode .LineChart__noData {
  color: rgb(var(--color-extra-lilac-dash3-800));
}
.dark-mode .LineChart__noData__text {
  background-color: rgba(var(--color-soft-purple-600), 0.15);
  color: rgb(var(--color-gray-300));
}
.dark-mode .LineChart .apexcharts-xaxis-texts-g text {
  fill: rgb(var(--color-extra-lilac-dash3-800));
}
.dark-mode .LineChart .apexcharts-yaxis text,
.dark-mode .LineChart .apexcharts-xaxis text {
  fill: rgb(var(--color-extra-lilac-dash3-800));
}
.dark-mode .LineChart .apexcharts-legend-text {
  color: rgb(var(--color-extra-lilac-dash3-800)) !important;
}
.dark-mode .LineChart .apexcharts-tooltip {
  background-color: rgb(var(--color-extra-navy-dash3-900));
  border: solid 0.1px rgba(var(--color-gray-700), 0.5);
  color: rgb(var(--color-extra-lilac-dash3-800));
}
.dark-mode .LineChart .apexcharts-tooltip-title {
  color: rgb(var(--color-extra-lilac-dash3-800));
  background-color: rgba(var(--color-gray-700), 0.5) !important;
  border-bottom: solid 0.1px rgba(var(--color-gray-700), 0.5) !important;
}
.dark-mode .LineChart__zoomHint {
  color: rgba(var(--color-gray-300), 0.8);
  background: rgba(var(--color-gray-800), 0.9);
}
.dark-mode .FunnelChart__noData {
  color: rgb(var(--color-extra-lilac-dash3-800));
}
.dark-mode .FunnelChart__noData__text {
  background-color: rgba(var(--color-soft-purple-600), 0.15);
  color: rgb(var(--color-gray-300));
}
.dark-mode .FunnelChart .apexcharts-xaxis-texts-g text {
  fill: rgb(var(--color-extra-lilac-dash3-800));
}
.dark-mode .FunnelChart .apexcharts-yaxis text,
.dark-mode .FunnelChart .apexcharts-xaxis text {
  fill: rgb(var(--color-extra-lilac-dash3-800));
}
.dark-mode .FunnelChart .apexcharts-legend-text {
  color: rgb(var(--color-extra-lilac-dash3-800)) !important;
}
.dark-mode .FunnelChart .apexcharts-tooltip {
  background-color: rgb(var(--color-extra-navy-dash3-900));
  border: solid 0.1px rgba(var(--color-gray-700), 0.5);
  color: rgb(var(--color-extra-lilac-dash3-800));
}
.dark-mode .FunnelChart .apexcharts-tooltip-title {
  color: rgb(var(--color-extra-lilac-dash3-800));
  background-color: rgba(var(--color-gray-700), 0.5) !important;
  border-bottom: solid 0.1px rgba(var(--color-gray-700), 0.5) !important;
}
.dark-mode .ScatterChart__noData {
  color: rgb(var(--color-extra-lilac-dash3-800));
}
.dark-mode .ScatterChart__noData__text {
  background-color: rgba(var(--color-soft-purple-600), 0.15);
  color: rgb(var(--color-gray-300));
}
.dark-mode .ScatterChart .apexcharts-xaxis-texts-g text {
  fill: rgb(var(--color-extra-lilac-dash3-800));
}
.dark-mode .ScatterChart .apexcharts-yaxis text,
.dark-mode .ScatterChart .apexcharts-xaxis text {
  fill: rgb(var(--color-extra-lilac-dash3-800));
}
.dark-mode .ScatterChart .apexcharts-legend-text {
  color: rgb(var(--color-extra-lilac-dash3-800)) !important;
}
.dark-mode .ScatterChart .apexcharts-tooltip {
  background-color: rgb(var(--color-extra-navy-dash3-900));
  border: solid 0.1px rgba(var(--color-gray-700), 0.5);
  color: rgb(var(--color-extra-lilac-dash3-800));
}
.dark-mode .ScatterChart .apexcharts-tooltip-title {
  color: rgb(var(--color-extra-lilac-dash3-800));
  background-color: rgba(var(--color-gray-700), 0.5) !important;
  border-bottom: solid 0.1px rgba(var(--color-gray-700), 0.5) !important;
}
.dark-mode .ScatterChart__zoomHint {
  color: rgba(var(--color-gray-300), 0.8);
  background: rgba(var(--color-gray-800), 0.9);
}
.dark-mode .BubbleChart .apexcharts-xaxis-texts-g text {
  fill: rgb(var(--color-extra-lilac-dash3-800));
}
.dark-mode .BubbleChart .apexcharts-yaxis text {
  fill: rgb(var(--color-extra-lilac-dash3-800));
}
.dark-mode .RadarChart .apexcharts-datalabel {
  fill: rgb(var(--color-extra-lilac-dash3-800));
}
.dark-mode .RadarChart .apexcharts-text {
  fill: rgb(var(--color-extra-lilac-dash3-900));
}
.dark-mode .RadarChart .apexcharts-legend-text {
  color: rgb(var(--color-extra-lilac-dash3-800)) !important;
}
.dark-mode .RadarChart .apexcharts-tooltip {
  background-color: rgb(var(--color-extra-navy-dash3-900));
  border: 1px solid rgba(var(--color-gray-700), 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.dark-mode .RadarChart .apexcharts-tooltip .radar-tooltip__title {
  color: rgb(var(--color-extra-lilac-dash3-800));
}
.dark-mode .RadarChart .apexcharts-tooltip .radar-tooltip__value {
  color: rgb(var(--color-extra-violet-dash3-800));
}
.dark-mode .RadarChart .apexcharts-tooltip .radar-tooltip__body {
  color: rgba(255, 255, 255, 0.7);
}
.dark-mode .ColumnChart-dash3 .apexcharts-xaxis-texts-g text {
  fill: rgb(var(--color-extra-lilac-dash3-800));
}
.dark-mode .DonutChart .apexcharts-legend-text,
.dark-mode .PieChart .apexcharts-legend-text,
.dark-mode .SVGChart .apexcharts-legend-text {
  color: rgb(var(--color-extra-lilac-dash3-800)) !important;
}
.dark-mode .DashboardRow__headerText {
  color: rgb(var(--color-white));
}
.dark-mode .auditLog-dash3__table {
  border: 1px solid rgba(242, 240, 240, 0.15);
}
.dark-mode {
  /* date picker */
}
.dark-mode .DayPicker_transitionContainer {
  background: rgb(var(--color-extra-midnight-dash3-900));
}
.dark-mode .DayPickerNavigation_button {
  background-color: transparent;
  border: 1px solid rgba(242, 240, 240, 0.15);
}
.dark-mode .DayPickerKeyboardShortcuts_panel {
  background: rgb(var(--color-extra-midnight-dash3-900));
}
.dark-mode .CalendarMonth {
  background: rgb(var(--color-extra-midnight-dash3-900));
}
.dark-mode .CalendarMonth_caption {
  color: rgb(var(--color-white));
}
.dark-mode .CalendarDay__default {
  background-color: transparent;
  color: rgba(var(--color-white), 0.9);
  border: 1px solid rgba(242, 240, 240, 0.15);
}
.dark-mode .CalendarDay__default:hover {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-soft-purple-600));
}
.dark-mode .CalendarDay__selected {
  background: rgb(var(--color-extra-midnight-dash3-600));
  border: 1px solid rgb(var(--color-extra-midnight-dash3-500));
  color: #fff;
}
.dark-mode .CalendarDay__selected_span {
  background: rgb(var(--color-extra-midnight-dash3-400));
  border: 1px solid rgb(var(--color-extra-midnight-dash3-300));
  color: #fff;
}
.dark-mode .CalendarDay__blocked_calendar {
  color: rgb(var(--color-gray-800));
  background: transparent;
  border-color: transparent;
}
.dark-mode .CalendarDay__blocked_calendar:hover {
  background: transparent;
  color: rgb(var(--color-gray-800));
}
.dark-mode .count--success h4 {
  color: rgb(var(--color-success-400));
}
.dark-mode .count--failed h4 {
  color: rgb(var(--color-error-400));
}
.dark-mode .SceneViewerCanvas__viewSelectButton--active {
  background-color: rgb(var(--color-extra-violet-dash3-900));
}
.dark-mode .SlicerQueryWidget__headerRightComponent span {
  color: rgb(var(--color-white)) !important;
}
.dark-mode .TextWidget-dash3__content p {
  color: rgb(var(--color-white));
}
.mantine-DatePicker-weekday {
  padding: 0;
  width: 36px;
  height: 36px;
  text-align: center;
  vertical-align: middle;
}
.mantine-DatePicker-day {
  font-weight: 600;
  border-radius: 0;
}
.mantine-DatePicker-day:where([data-in-range]) {
  background-color: rgb(var(--color-extra-indigo-dash3-400));
  color: white;
}
.mantine-DatePicker-day:where([data-in-range]):hover {
  background-color: rgb(var(--color-extra-indigo-dash3-400));
}
.mantine-DatePicker-day:where([data-selected]) {
  background-color: rgb(var(--color-extra-indigo-dash3-800)) !important;
  color: white;
}
.mantine-DatePicker-day:where([data-selected]):hover {
  background-color: rgb(var(--color-extra-indigo-dash3-800)) !important;
}
.mantine-DatePicker-day:not([data-static], [data-disabled], [data-selected], [data-in-range]):hover {
  background-color: rgb(var(--color-gray-300));
  color: rgb(var(--color-soft-purple-600));
}
/* Header controls styling */
.mantine-DatePicker-calendarHeaderLevel:hover,
.mantine-DatePicker-calendarHeaderControl:hover,
.mantine-DatePicker-monthsListControl:hover,
.mantine-DatePicker-yearsListControl:hover {
  background-color: rgb(var(--color-gray-200));
  color: rgb(var(--color-extra-indigo-dash3-800));
}
.mantine-Popover-dropdown {
  display: flex;
}
.dark-mode .mantine-DatePicker-weekday {
  color: rgb(var(--color-gray-200));
}
.dark-mode .mantine-DatePicker-day {
  color: rgb(var(--color-gray-100));
}
.dark-mode .mantine-DatePicker-day:where([data-in-range]) {
  background-color: rgb(var(--color-extra-indigo-dash3-500));
}
.dark-mode .mantine-DatePicker-day:where([data-in-range]):hover {
  background-color: rgb(var(--color-extra-indigo-dash3-500));
}
.dark-mode .mantine-DatePicker-day:not([data-static], [data-disabled], [data-selected], [data-in-range]):hover {
  background-color: rgba(var(--color-white), 0.1);
  color: rgb(var(--color-extra-indigo-dash3-100));
}
.dark-mode {
  /* Calendar control styles */
}
.dark-mode .mantine-DatePicker-calendarHeaderLevel:hover,
.dark-mode .mantine-DatePicker-calendarHeaderControl:hover {
  background-color: rgba(var(--color-white), 0.05);
  color: rgb(var(--color-extra-indigo-dash3-100));
}
.dark-mode .mantine-DatePicker-monthsListControl,
.dark-mode .mantine-DatePicker-yearsListControl {
  color: rgb(var(--color-white));
}
.dark-mode .mantine-DatePicker-monthsListControl:hover,
.dark-mode .mantine-DatePicker-yearsListControl:hover {
  background-color: rgba(var(--color-white), 0.05);
  color: rgb(var(--color-extra-indigo-dash3-100));
}