@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 */
.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));
}