@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
/* #C32929 al 40% di opacità per pallini servizio negato
#C39929 per pallini spesa o viaggio in attesa di autorizzazione
#C39929 al 40% di opacità per pallini servizio in attesa
#60A930 per pallini spesa o viaggio autorizzato, trattino tab scelto
#60A930 al 40% di opacità per pallini servizio in attesa
#FFFFFF bordo trattini, icona servizio dentro i cerchi

#BEBEBE tutti i testi primari, bordi text fields
#BEBEBE al 55% di opacità per tutti i testi secondari
#32373E sfondo, sfondo modal, riga separatrice
#474D57 pulsanti
#232A31 sfondo contenitori, sfondo cards trasferte, riga separatrice */
.primaryTextSvg {
  fill: var(--textPrimaryColor) !important;
}

.defaultImageCar_st0 {
  fill: #3D3D3D;
}

.defaultImageCar_st1 {
  fill: none;
}

.defaultImageCar_st2 {
  font-family: "Montserrat-Bold";
}

.defaultImageCar_st3 {
  font-size: 4rem;
}

.defaultImageCar_st4 {
  letter-spacing: 3;
}

.defaultImageCar_st5 {
  font-size: 2.5rem;
}

.defaultImageCar_st6 {
  letter-spacing: 2;
}

:root {
  --previewTextPrimaryColor: #bebebe;
  --previewTextSecondaryColor: #848484;
  --previewPrimaryColor: #232a31;
  --previewSecondaryColor: #32373e;
  --previewButtonColor: #474d57;
  --previewLeftBarColor: #232a31;
  --previewIconMenuColor: #bebebe;
  --previewIconMenuHoverSelectedColor: #60a930;
  --previewTopBarColor: #232a31;
  --previewBorderBottomTopBarColor: #232a31;
  --previewShadowCard: -1px 5px 7px -6px #000000;
  --previewInputBorderColor: white;
  --previewInputTextColor: #bebebe;
  --previewBgColorTariffaCorporateAgenziaColor: #45458c;
  --previewTextColorTariffaCorporateAgenziaColor: #ffffff;
  --previewBgColorTariffaCorporateClienteColor: #45458c;
  --previewTextColorTariffaCorporateClienteColor: #ffffff;
  --textPrimaryColor: #bebebe;
  --textSecondaryColor: #848484;
  --primaryColor: #232a31;
  --secondaryColor: #32373e;
  --buttonColor: #474d57;
  --buttonSecondaryColor: #474d57;
  --leftBarColor: #232a31;
  --iconMenuColor: #bebebe;
  --iconMenuHoverSelectedColor: #60a930;
  --topBarColor: #232a31;
  --borderBottomTopBarColor: #232a31;
  --shadowCard: 0px 0px 18px -14px #000000; /*-1px 5px 7px -6px #000000;*/
  --inputBorderColor: white;
  --inputTextColor: #bebebe;
  --linkColor: #60a930;
  --badgeStatusDashboard: #60a930;
  --badgeColorYellow: #c39929;
  --hoverButtonColor: #007bff;
  --linkTextColor: #60a930;
  --hoverLinkTextColor: #007bff;
  --textButtonColor: #bebebe;
  --hoverTextButtonColor: #ffffff;
  --labelTextColor: #ffffff;
  --noEditInputColor: #ffffff;
  --bgColorTariffaCorporateAgenziaColor: #c39929;
  --textColorTariffaCorporateAgenziaColor: #ffffff;
  --bgColorTariffaCorporateClienteColor: #45458c;
  --textColorTariffaCorporateClienteColor: #ffffff;
  --transition:transform 200ms cubic-bezier(.23,.99,.72,1.03);
  --retro--bg--0: transparent;
  --retro--bg--1: #b13526;
  --retro--bg--2: #6a6b04;
  --retro--bg--3: #e39d25;
  --retro--bg--4: #9c4a01;
  --retro--bg--5: #000;
  --retro--bg--6: #fff;
  --retro--bg--7: #ffc8b8;
  --book--hue: 223;
  --book--primary: hsl(var(--book--hue),90%,55%);
  --book--primary-l: hsl(var(--book--hue),90%,65%);
  --book--primary-d: hsl(var(--book--hue),90%,45%);
  --book--white: hsl(var(--book--hue),10%,100%);
  --book--white-d: hsl(var(--book--hue),10%,45%);
  --spinnerDots-spinnerDots-w: #fafafa;
  --spinnerDots-spinnerDots-b: #141414;
  --spinnerDots-s: 1s;
  --spinnerDots-d: calc(var(--spinnerDots-s) / 6);
}

/*
	THEME COLOR TEST MODAL CSS 
*/
.baseHomeModalTheme {
  color: var(--previewTextPrimaryColor);
  font-family: "Montserrat", sans-serif;
  background-color: var(--previewSecondaryColor);
  height: 100vh;
  overflow: hidden;
}

.baseHomeModalTheme .card-body-custom {
  padding: 15px;
  width: 100%;
  border-radius: 20px;
  background-color: var(--previewPrimaryColor);
  box-shadow: var(--previewShadowCard);
}

.baseHomeModalTheme .modifiedInput {
  font-size: 0.9375rem;
  color: var(--previewInputTextColor);
  background: transparent;
  outline: none;
  border-radius: 8px;
  border: 1px solid var(--previewInputBorderColor);
}

/* oppure vedere con il > tra i card-body-custom ma da valutare*/
.baseHomeModalTheme .card-body-custom .card-body-custom {
  box-shadow: none !important;
}

.baseHomeModalTheme .b4b-form-group .group label {
  /*font-weight: 300;*/
  pointer-events: none;
  position: absolute;
  left: 28px;
  top: 10px;
  background-color: var(--previewPrimaryColor);
  z-index: 10;
  transition: transform 180ms ease-out, font-size 180ms ease-out;
}

.baseHomeModalTheme .roundedButton {
  font-size: 0.875rem;
  font-weight: lighter;
  color: var(--previewTextPrimaryColor);
  background-color: var(--previewButtonColor);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.baseHomeModalTheme .blackTheme1 {
  background-color: var(--previewPrimaryColor);
}

.baseHomeModalTheme .blackTheme2 {
  background-color: var(--previewSecondaryColor) !important;
}

.baseHomeModalTheme hr.solid {
  background-color: var(--previewTextSecondaryColor) !important;
}

.baseHomeModalTheme .dashed {
  border: 2px dashed;
  border-color: var(--previewTextPrimaryColor);
  color: var(--previewTextPrimaryColor);
}

.baseHomeModalTheme .left-bar-custom {
  background-color: var(--previewLeftBarColor) !important;
}

.baseHomeModalTheme .modifiedLink {
  color: var(--previewIconMenuColor) !important;
}

.baseHomeModalTheme .modifiedLink:hover {
  color: var(--previewIconMenuHoverSelectedColor) !important;
}

.baseHomeModalTheme .top-bar-custom {
  border-bottom: 3px solid var(--previewBorderBottomTopBarColor) !important;
  background-color: var(--previewTopBarColor) !important;
}

.baseHomeModalTheme .modified-nav-link {
  background-color: transparent !important;
  border-radius: 0px !important;
  color: var(--previewTextSecondaryColor);
  border: none !important;
}

.baseHomeModalTheme .modified-nav-link.active,
.modified-nav-link:hover,
.modified-nav-link:focus {
  color: #bebebe !important;
  border: none !important;
  border-bottom: 1px var(--previewIconMenuHoverSelectedColor) solid !important;
}

.baseHomeModalTheme .form-control:focus {
  background-color: var(--previewPrimaryColor);
  color: var(--previewTextPrimaryColor);
}

.ribbon {
  height: 25px;
  background: var(--badgeStatusDashboard);
  width: 100px;
  text-align: center;
  font-size: 0.625rem;
  line-height: 25px;
  color: #fff;
  transform: rotate(45deg);
  position: relative;
  top: 5px;
  left: -52px;
  box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 0.34);
  z-index: 1;
}

.cancelledErrReservedRibbon,
.deniedReservedRibbon,
.deletedReservedRibbon,
.countryRiskRefusedRibbon,
.lateBookingDeniedRibbon {
  background-color: red;
}

.lateBookingRibbon {
  background-color: #e5be01;
  color: #000000;
}

.lateBookingRibbon,
.lateBookingDeniedRibbon {
  font-size: 0.5rem;
}

.pendingReservedRibbon {
  background-color: #f7cb73;
}

.countryRiskInfoRibbon {
  background-color: #ff6b16;
}

/* .ribbon:after { */
/* 	position: absolute; */
/* 	content: ''; */
/* 	display: block; */
/* 	height: 100px; */
/* 	width: 100px; */
/* 	background: #EDF1EE; */
/* 	top: -55px; */
/* 	left: 130px; */
/*  transform: rotate(-45deg); */
/* 	box-shadow: -115px -121px 0px 0px #EDF1EE; */
/* } */
.ribbon .left {
  position: absolute;
  content: "";
  display: block;
  top: 50px;
  left: 25px;
  height: 8px;
  width: 8px;
}

.ribbon .right {
  position: absolute;
  content: "";
  display: block;
  top: 50px;
  left: 157px;
  height: 8px;
  width: 8px;
  transform: rotate(90deg);
}

.ribbonClassRevalueServices {
  font-size: 0.5rem;
  top: -6px;
  left: -23px;
}

.reservedRibbonClassStyleRevalue {
  height: 20px;
  width: 90px;
  font-size: 0.5rem;
  line-height: 16px;
  top: -3px;
  left: -23px;
}

.ribbonRevalueCartStyle {
  top: 10px;
  left: auto;
  right: -27px;
  position: absolute;
}

.containerRibbonRevalueCartStyle {
  width: 100% !important;
  position: absolute;
}

.containerRibbonUploadDocumentStyle {
  width: 100% !important;
  position: absolute;
}

.ribbonUploadDocumentStyle {
  height: 20px;
  width: 90px;
  font-size: 0.5rem;
  line-height: 16px;
  top: 8px;
  left: calc(100% - 78px);
}

.clockbox .clock {
  height: 45px;
}
.clockbox .circle {
  fill: var(--buttonColor);
  stroke: var(--buttonColor);
  stroke-width: 9;
  stroke-miterlimit: 10;
}
.clockbox .mid-circle {
  fill: var(--textButtonColor);
}
.clockbox .hour-marks {
  fill: none;
  stroke: var(--textButtonColor);
  stroke-width: 9;
  stroke-miterlimit: 10;
}
.clockbox .hour-arm {
  fill: none;
  stroke: var(--textButtonColor);
  stroke-width: 17;
  stroke-miterlimit: 10;
}
.clockbox .minute-arm {
  fill: none;
  stroke: var(--textButtonColor);
  stroke-width: 11;
  stroke-miterlimit: 10;
}
.clockbox .second-arm {
  fill: none;
  stroke: var(--textButtonColor);
  stroke-width: 4;
  stroke-miterlimit: 10;
}
.clockbox .sizing-box {
  fill: none;
}
.clockbox .hour,
.clockbox .minute,
.clockbox .second {
  transform-origin: 300px 300px;
}

/* WHEATHER BOX */
.weatherBox {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.weatherBox .elements {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.weatherBox .elements .element {
  height: 50px;
  width: 50px;
}
.weatherBox .white {
  fill: #FFFFFF;
}
.weatherBox .gray {
  fill: #E0E0E0;
}
.weatherBox .yellow {
  fill: #FFEB3B;
}

/* WHEATHER CARD */
.weatherCard {
  margin: 0px !important;
  padding: 0px !important;
}
.weatherCard .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  position: relative;
  background: #eee;
  background: linear-gradient(240deg, rgba(150, 50, 50, 0.3), rgba(0, 0, 200, 0));
}
.weatherCard .container #sunburst_weatherCard {
  opacity: 0;
}
.weatherCard .container.night #sunburst_weatherCard {
  opacity: 0 !important;
}
.weatherCard .card-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  position: relative;
}
.weatherCard #card_weatherCard {
  box-shadow: 9px 7px 40px -6px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  width: 300px;
  padding: 0;
  height: 400px;
  min-height: 300px;
  max-height: 100%;
  border-radius: 5px;
  position: relative;
}
.weatherCard #card_weatherCard.noBorder {
  border-radius: 0;
}
.weatherCard #card_weatherCard.maxW {
  width: 100%;
}
.weatherCard #card_weatherCard .details {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 16px 20px;
  color: #888;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  transition: color 2s ease;
}
.night .weatherCard #card_weatherCard .details, .smoke .weatherCard #card_weatherCard .details, .hail .weatherCard #card_weatherCard .details, .severe .weatherCard #card_weatherCard .details, .thunder .weatherCard #card_weatherCard .details {
  color: #ddd;
}
.weatherCard #card_weatherCard .details .right {
  text-align: right;
}
.weatherCard #card_weatherCard .details #date_weatherCard {
  margin: 4px 0;
}
.weatherCard #card_weatherCard .details #summary_weatherCard {
  font-weight: 600;
  font-size: 1.375rem;
}
.weatherCard #card_weatherCard .details .temp {
  font-size: 1.5625rem;
  line-height: 25px;
}
.weatherCard #card_weatherCard .details .temp .super {
  font-size: 1.125rem;
  line-height: 30px;
  vertical-align: top;
  margin-left: 5px;
}
.weatherCard .weather {
  background-color: #DAE3FD;
  transition: background-color 2s ease;
}
.hail .weatherCard .weather, .severe .weatherCard .weather, .thunder .weatherCard .weather {
  background-color: #9FA4AD;
}
.rain .weatherCard .weather {
  background-color: #D8D8D8;
}
.haze .weatherCard .weather {
  background-color: #efefef;
}
.sun .weatherCard .weather {
  background-color: #ccccff;
}
.hot .weatherCard .weather, .smoke .weatherCard .weather {
  background-color: rgba(230, 179, 179, 0.8);
}
.weatherCard .weather #inner_weatherCard {
  background-color: rgb(255, 255, 255);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
}
.weatherCard .weather .cloud {
  transition: fill 2s ease;
}
.weatherCard .weather .fog {
  opacity: 0;
  transition: opacity 2s ease, fill 2s ease;
}
.smoke .weatherCard .weather .fog, .haze .weatherCard .weather .fog {
  opacity: 1;
}
.weatherCard .weather #sun_weatherCard {
  fill: #F7ED47;
}
.cold .weatherCard .weather {
  background-color: #ccdffb;
}
.night .weatherCard .weather {
  background-color: #060638;
}
.night .weatherCard .weather #sun_weatherCard {
  fill: #ccdbef;
}
.weatherCard .weather #fog1_weatherCard {
  fill: #f5f5f5;
}
.night .weatherCard .weather #fog1_weatherCard, .smoke .weatherCard .weather #fog1_weatherCard, .hail .weatherCard .weather #fog1_weatherCard, .severe .weatherCard .weather #fog1_weatherCard, .thunder .weatherCard .weather #fog1_weatherCard {
  fill: #aFb4bD;
}
.weatherCard .weather #fog2_weatherCard,
.weatherCard .weather #cloud1_weatherCard {
  fill: #efefef;
}
.night .weatherCard .weather #fog2_weatherCard, .smoke .weatherCard .weather #fog2_weatherCard, .hail .weatherCard .weather #fog2_weatherCard, .severe .weatherCard .weather #fog2_weatherCard, .thunder .weatherCard .weather #fog2_weatherCard,
.night .weatherCard .weather #cloud1_weatherCard,
.smoke .weatherCard .weather #cloud1_weatherCard,
.hail .weatherCard .weather #cloud1_weatherCard,
.severe .weatherCard .weather #cloud1_weatherCard,
.thunder .weatherCard .weather #cloud1_weatherCard {
  fill: #9FA4AD;
}
.weatherCard .weather #fog3_weatherCard,
.weatherCard .weather #cloud2_weatherCard {
  fill: #E6E6E6;
}
.night .weatherCard .weather #fog3_weatherCard, .smoke .weatherCard .weather #fog3_weatherCard, .hail .weatherCard .weather #fog3_weatherCard, .severe .weatherCard .weather #fog3_weatherCard, .thunder .weatherCard .weather #fog3_weatherCard,
.night .weatherCard .weather #cloud2_weatherCard,
.smoke .weatherCard .weather #cloud2_weatherCard,
.hail .weatherCard .weather #cloud2_weatherCard,
.severe .weatherCard .weather #cloud2_weatherCard,
.thunder .weatherCard .weather #cloud2_weatherCard {
  fill: #8B8E98;
}
.weatherCard .weather #cloud3_weatherCard {
  fill: #D5D5D5;
}
.night .weatherCard .weather #cloud3_weatherCard, .smoke .weatherCard .weather #cloud3_weatherCard, .hail .weatherCard .weather #cloud3_weatherCard, .severe .weatherCard .weather #cloud3_weatherCard, .thunder .weatherCard .weather #cloud3_weatherCard {
  fill: #7B7988;
}
.weatherCard #outer_weatherCard, .weatherCard #back_weatherCard {
  position: fixed;
  pointer-events: none;
}

/* WHEATHER SMALL CARD */
.weatherSmallCard .temp {
  font-size: 1.5625rem;
  font-weight: bold;
}
.weatherSmallCard .icon {
  width: 100%;
  height: 100%;
}
.weatherSmallCard .sunny-body path {
  fill: #EDC951;
}
.weatherSmallCard .sunny-long-ray {
  transform-origin: 50% 50%;
  animation: spin 9s linear infinite;
}
.weatherSmallCard .sunny-long-ray path {
  fill: #EDC951;
}
.weatherSmallCard .sunny-short-ray {
  transform-origin: 50% 50%;
  animation: spin 9s linear infinite;
}
.weatherSmallCard .sunny-short-ray path {
  fill: #EDC951;
}
.weatherSmallCard .cloud-offset path {
  fill: #222;
}
.weatherSmallCard .main-cloud path {
  fill: #00A0B0;
}
.weatherSmallCard .small-cloud path {
  fill: #00A0B0;
  animation: flyby 6s linear infinite;
}
.weatherSmallCard .rain-cloud path {
  fill: #00A0B0;
  animation: rain-cloud-color 6s ease infinite;
}
.weatherSmallCard .rain-drops path {
  fill: #00A0B0;
  opacity: 0;
}
.weatherSmallCard .rain-drops path:nth-child(1) {
  animation: rain-drop 1.2s linear infinite;
}
.weatherSmallCard .rain-drops path:nth-child(2) {
  animation: rain-drop 1.2s linear infinite 0.4s;
}
.weatherSmallCard .rain-drops path:nth-child(3) {
  animation: rain-drop 1.2s linear infinite 0.8s;
}
.weatherSmallCard .snow-cloud path {
  fill: #CCC;
}
.weatherSmallCard .snowflakes path {
  transform-origin: 50% 50%;
  fill: #CCC;
  opacity: 0;
}
.weatherSmallCard .snowflakes path:nth-child(1) {
  animation: snow-drop 1.2s linear infinite;
}
.weatherSmallCard .snowflakes path:nth-child(2) {
  animation: snow-drop 1.2s linear infinite 0.4s;
}
.weatherSmallCard .snowflakes path:nth-child(3) {
  animation: snow-drop 1.2s linear infinite 0.8s;
}
.weatherSmallCard .wind-string path {
  stroke: #CCC;
  stroke-linecap: round;
  stroke-width: 7px;
  animation: wind-blow 3s linear infinite;
}
.weatherSmallCard .rainbows path {
  stroke-linecap: round;
  animation: rainbow 4.5s linear infinite;
}
.weatherSmallCard .rainbows path:nth-child(1) {
  stroke: #BD1E52;
  stroke-width: 6px;
}
.weatherSmallCard .rainbows path:nth-child(2) {
  stroke: #E88024;
  stroke-width: 8px;
}
.weatherSmallCard .rainbows path:nth-child(3) {
  stroke: #F8CB10;
  stroke-width: 6px;
}
.weatherSmallCard .rainbows path:nth-child(4) {
  stroke: #899C3B;
  stroke-width: 14px;
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes flyby {
  0% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    opacity: 0;
  }
  30% {
    -webkit-transform: translate(39px, 0px);
    transform: translate(39px, 0px);
    opacity: 1;
  }
  70% {
    -webkit-transform: translate(91px, 0px);
    transform: translate(91px, 0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(130px, 0px);
    transform: translate(130px, 0px);
    opacity: 0;
  }
}
@keyframes rain-cloud-color {
  100%, 0% {
    fill: #666;
  }
  20% {
    fill: #555;
  }
  21.5% {
    fill: #999;
  }
  25% {
    fill: #555;
  }
  27.5% {
    fill: #999;
  }
  30% {
    fill: #555;
  }
  40% {
    fill: #999;
  }
  90% {
    fill: #555;
  }
}
@keyframes rain-drop {
  0% {
    -webkit-transform: translate(0px, -60px);
    transform: translate(0px, -60px);
    opacity: 0;
  }
  30% {
    -webkit-transform: translate(0px, -36px);
    transform: translate(0px, -36px);
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0px, 4px);
    transform: translate(0px, 4px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0px, 20px);
    transform: translate(0px, 20px);
    opacity: 0;
  }
}
@keyframes snow-drop {
  0% {
    -webkit-transform: translate(0px, -60px) rotate(0deg);
    opacity: 0;
  }
  30% {
    -webkit-transform: translate(0px, -36px) rotate(108deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0px, 4px) rotate(288deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0px, 20px) rotate(360deg);
    opacity: 0;
  }
}
@keyframes wind-blow {
  0% {
    stroke-dasharray: 5 300;
    stroke-dashoffset: -200;
    opacity: 1;
  }
  50% {
    stroke-dasharray: 300 300;
    stroke-dashoffset: -100;
    opacity: 1;
  }
  90% {
    stroke-dasharray: 50 300;
    stroke-dashoffset: -20;
    opacity: 0.7;
  }
  100% {
    stroke-dasharray: 20 300;
    stroke-dashoffset: 0;
    opacity: 0.2;
  }
}
@keyframes rainbow {
  0% {
    stroke-dasharray: 10 210;
    stroke-dashoffset: 0;
    opacity: 0;
  }
  30% {
    stroke-dasharray: 210 210;
    stroke-dashoffset: 0;
    opacity: 1;
  }
  70% {
    stroke-dasharray: 210 210;
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dasharray: 0 210;
    stroke-dashoffset: -210;
    opacity: 0;
  }
}
#weatherBox_sunnyWithWind .st1 {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

@-webkit-keyframes fa-spin-one {
  0% {
    -webkit-transform: translateY(-2rem) rotate(0deg);
    transform: translateY(-2rem) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(-2rem) rotate(-359deg);
    transform: translateY(-2rem) rotate(-359deg);
  }
}
@keyframes fa-spin-one {
  0% {
    -webkit-transform: translateY(-2rem) rotate(0deg);
    transform: translateY(-2rem) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(-2rem) rotate(-359deg);
    transform: translateY(-2rem) rotate(-359deg);
  }
}
.fa-spin-one, .offlinePage .spinny-cogs .fa:nth-of-type(1) {
  -webkit-animation: fa-spin-one 1s infinite linear;
  animation: fa-spin-one 1s infinite linear;
}

@-webkit-keyframes fa-spin-two {
  0% {
    -webkit-transform: translateY(-0.5rem) translateY(1rem) rotate(0deg);
    transform: translateY(-0.5rem) translateY(1rem) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(-0.5rem) translateY(1rem) rotate(-359deg);
    transform: translateY(-0.5rem) translateY(1rem) rotate(-359deg);
  }
}
@keyframes fa-spin-two {
  0% {
    -webkit-transform: translateY(-0.5rem) translateY(1rem) rotate(0deg);
    transform: translateY(-0.5rem) translateY(1rem) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(-0.5rem) translateY(1rem) rotate(-359deg);
    transform: translateY(-0.5rem) translateY(1rem) rotate(-359deg);
  }
}
.fa-spin-two, .offlinePage .spinny-cogs .fa:nth-of-type(3) {
  -webkit-animation: fa-spin-two 2s infinite linear;
  animation: fa-spin-two 2s infinite linear;
}

.group {
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  /*   & > :not(label):last-child(input){
      display: flex;
      align-items: end;
    } */
}

.modifiedColorText {
  color: var(--textSecondaryColor);
  font-weight: lighter;
}

label, .modifiedLabel {
  color: var(--labelTextColor);
  margin-bottom: 0px;
  font-size: 0.75rem;
  font-weight: lighter;
}
label.hiddenLabel, .modifiedLabel.hiddenLabel {
  visibility: hidden;
}

.modifiedInput,
.timePickerCustom,
.modalInput {
  color: var(--inputTextColor);
  font-weight: 500;
  width: 100%;
  outline: none;
  box-sizing: border-box;
  letter-spacing: 1px;
  border: 0px;
  padding: 0px;
  background: transparent no-repeat;
  background-image: linear-gradient(to bottom, var(--primary), var(--primary)), linear-gradient(to bottom, var(--inputBorderColor), var(--inputBorderColor));
  background-size: 0 1px, 100% 1px;
  background-position: 50% 100%, 50% 100%;
  transition: background-size 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  background-color: rgba(var(--inputBorderRGBColor), 0.02);
  font-size: 0.875rem;
}
.modifiedInput[value=""]:not(.disabledInput):not(.disabledCircleRequired):not(.errorInput):not(.error):not(.valid):not(:focus).validationRequiredField, .modifiedInput[value=""]:not(.disabledInput):not(.disabledCircleRequired):not(.errorInput):not(.error):not(.valid):not(:focus):required,
.timePickerCustom[value=""]:not(.disabledInput):not(.disabledCircleRequired):not(.errorInput):not(.error):not(.valid):not(:focus).validationRequiredField,
.timePickerCustom[value=""]:not(.disabledInput):not(.disabledCircleRequired):not(.errorInput):not(.error):not(.valid):not(:focus):required,
.modalInput[value=""]:not(.disabledInput):not(.disabledCircleRequired):not(.errorInput):not(.error):not(.valid):not(:focus).validationRequiredField,
.modalInput[value=""]:not(.disabledInput):not(.disabledCircleRequired):not(.errorInput):not(.error):not(.valid):not(:focus):required {
  background-image: linear-gradient(to bottom, var(--primary), var(--primary)), linear-gradient(to bottom, var(--inputBorderColor), var(--inputBorderColor)), radial-gradient(circle at center, red 4px, transparent 5px);
  background-size: 0 1px, 100% 1px, 20px 100%;
  background-position: 50% 100%, 50% 100%, 100% 100%;
}
.modifiedInput.bootstrap-select,
.timePickerCustom.bootstrap-select,
.modalInput.bootstrap-select {
  border: none;
  padding: 0px;
  width: 100% !important;
}
.modifiedInput.customSelect,
.timePickerCustom.customSelect,
.modalInput.customSelect {
  font-size: 0.875rem;
}
.modifiedInput,
.timePickerCustom,
.modalInput {
  /*&.error{
    @include errorStyle()
  }*/
}
.modifiedInput.inputWithIcon,
.timePickerCustom.inputWithIcon,
.modalInput.inputWithIcon {
  border-right: none;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}
.modifiedInput.inputWithIconLeft,
.timePickerCustom.inputWithIconLeft,
.modalInput.inputWithIconLeft {
  border-left: none;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}
.modifiedInput:focus, .modifiedInput.errorInput, .modifiedInput.error, .modifiedInput.valid,
.timePickerCustom:focus,
.timePickerCustom.errorInput,
.timePickerCustom.error,
.timePickerCustom.valid,
.modalInput:focus,
.modalInput.errorInput,
.modalInput.error,
.modalInput.valid {
  box-shadow: none;
  background-size: 100% 1px, 100% 1px;
  background-position: 50% 100%, 50% 100%;
}
.modifiedInput.errorInput:not(.valid), .modifiedInput.error,
.timePickerCustom.errorInput:not(.valid),
.timePickerCustom.error,
.modalInput.errorInput:not(.valid),
.modalInput.error {
  color: #b24747;
  background-image: linear-gradient(to bottom, red, red), linear-gradient(to bottom, var(--linkColor), var(--linkColor));
}
.modifiedInput.valid,
.timePickerCustom.valid,
.modalInput.valid {
  background-image: linear-gradient(to bottom, var(--green), var(--green)), linear-gradient(to bottom, var(--inputBorderColor), var(--inputBorderColor));
}
.modifiedInput:-webkit-autofill, .modifiedInput:-webkit-autofill:hover, .modifiedInput:-webkit-autofill:focus, .modifiedInput:-webkit-autofill:active,
.timePickerCustom:-webkit-autofill,
.timePickerCustom:-webkit-autofill:hover,
.timePickerCustom:-webkit-autofill:focus,
.timePickerCustom:-webkit-autofill:active,
.modalInput:-webkit-autofill,
.modalInput:-webkit-autofill:hover,
.modalInput:-webkit-autofill:focus,
.modalInput:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 12px var(--primaryColor) inset !important;
  -webkit-text-fill-color: var(--textPrimaryColor) !important;
  border-bottom: 1px solid var(--green);
}

.disabled.modifiedInput,
.disabledInput,
input:disabled,
input:read-only {
  background-image: none;
  background-color: transparent !important;
  border: none;
  color: var(--noEditInputColor) !important;
  cursor: not-allowed;
  font-weight: lighter;
  text-transform: uppercase;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.disabled.modifiedInput.valid,
.disabledInput.valid,
input:disabled.valid,
input:read-only.valid {
  background-image: linear-gradient(to bottom, var(--secondary), var(--secondary)), linear-gradient(to bottom, var(--inputBorderColor), var(--inputBorderColor));
}

.formNotUpperDisable .disabled.modifiedInput,
.formNotUpperDisable .disabledInput,
.formNotUpperDisable input:disabled,
.formNotUpperDisable input:read-only {
  text-transform: initial;
}

.modifiedInput:focus {
  background-color: var(--secondaryColor);
  color: var(--textSecondaryColor);
}

.blackTheme2 .modifiedInput:focus, .wizard .modifiedInput:focus {
  background-color: var(--primaryColor);
  color: var(--textPrimaryColor);
}

input:read-only:not(.dateRangePickerInput) {
  cursor: not-allowed;
}

.scrollbar {
  overflow-y: scroll;
  overflow-x: hidden;
}

.force-overflow {
  min-height: 450px;
}

.scrollbar-primary::-webkit-scrollbar {
  width: 12px;
  background-color: #232a31;
}

.scrollbar-primary::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #32373e;
}

.scrollbar-primary {
  scrollbar-color: #32373e #232a31;
}

.scrollbar-danger::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  border-radius: 10px;
}

.scrollbar-danger::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

.scrollbar-danger::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #ff3547;
}

.scrollbar-danger {
  scrollbar-color: #ff3547 #f5f5f5;
}

.scrollbar-warning::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  border-radius: 10px;
}

.scrollbar-warning::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

.scrollbar-warning::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #ff8800;
}

.scrollbar-warning {
  scrollbar-color: #ff8800 #f5f5f5;
}

.scrollbar-success::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  border-radius: 10px;
}

.scrollbar-success::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

.scrollbar-success::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #00c851;
}

.scrollbar-success {
  scrollbar-color: #00c851 #f5f5f5;
}

.scrollbar-info::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  border-radius: 10px;
}

.scrollbar-info::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

.scrollbar-info::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #33b5e5;
}

.scrollbar-info {
  scrollbar-color: #33b5e5 #f5f5f5;
}

.scrollbar-default::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  border-radius: 10px;
}

.scrollbar-default::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

.scrollbar-default::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #2bbbad;
}

.scrollbar-default {
  scrollbar-color: #2bbbad #f5f5f5;
}

.scrollbar-secondary::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  border-radius: 10px;
}

.scrollbar-secondary::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

.scrollbar-secondary::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #aa66cc;
}

.scrollbar-secondary {
  scrollbar-color: #aa66cc #f5f5f5;
}

#spinnerLoading,
#spinnerSearch,
#spinnerHamster,
#spinnerServiceCircle,
#spinnerPacman,
#spinnerMagic,
#spinnerBook,
#spinnerDeadline,
#spinnerPokemon,
#spinnerDot {
  width: 100vw;
  height: 100vh;
  z-index: 10000000000000;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  overflow: hidden;
}
#spinnerLoading .spinner-border,
#spinnerSearch .spinner-border,
#spinnerHamster .spinner-border,
#spinnerServiceCircle .spinner-border,
#spinnerPacman .spinner-border,
#spinnerMagic .spinner-border,
#spinnerBook .spinner-border,
#spinnerDeadline .spinner-border,
#spinnerPokemon .spinner-border,
#spinnerDot .spinner-border {
  color: var(--iconMenuHoverSelectedColor) !important;
}

/* AJAX LOADER */
.ajax-loader {
  -moz-transition: ease-out 750ms;
  -o-transition: ease-out 750ms;
  -webkit-transition: ease-out 750ms;
  transition: ease-out 750ms;
  z-index: 50;
}

.ajax-loader .ajax-loader-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
}

.ajax-loader .ajax-loader-circle {
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -moz-animation: ajaxLoaderSpin 1.4s linear infinite;
  -webkit-animation: ajaxLoaderSpin 1.4s linear infinite;
  animation: ajaxLoaderSpin 1.4s linear infinite;
}

.ajax-loader .ajax-loader-circle .ajax-loader-circle-spinner {
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -moz-animation: ajaxLoaderDashSpin 1.4s ease-in-out infinite;
  -webkit-animation: ajaxLoaderDashSpin 1.4s ease-in-out infinite;
  animation: ajaxLoaderDashSpin 1.4s ease-in-out infinite;
}

.ajax-loader .ajax-loader-circle circle {
  -moz-animation: ajaxLoaderColors 5.6s ease-in-out infinite, ajaxLoaderDash 1.4s ease-in-out infinite;
  -webkit-animation: ajaxLoaderColors 5.6s ease-in-out infinite, ajaxLoaderDash 1.4s ease-in-out infinite;
  animation: ajaxLoaderColors 5.6s ease-in-out infinite, ajaxLoaderDash 1.4s ease-in-out infinite;
  stroke-dasharray: 1570;
  stroke-dashoffset: 392.5;
  stroke: #fff;
  stroke-width: 19;
  fill: none;
}

.ajax-loader .ajax-loader-letters path {
  fill: #fff;
}

.ajax-loader .progress,
.ajax-loader .progress-label {
  top: calc(50% + 60px);
  position: relative;
}

.ajax-loader .progress {
  width: 200px;
  left: calc(50% - 100px);
}

.ajax-loader .progress-label {
  text-align: center;
  color: #ffffff;
}

@-moz-keyframes ajaxLoaderSpin {
  0% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
@-webkit-keyframes ajaxLoaderSpin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
@keyframes ajaxLoaderSpin {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
@-moz-keyframes ajaxLoaderColors {
  0% {
    stroke: #35ad0e;
  }
  25% {
    stroke: #d8ad44;
  }
  50% {
    stroke: #d00324;
  }
  75% {
    stroke: #dc00b8;
  }
  100% {
    stroke: #017efc;
  }
}
@-webkit-keyframes ajaxLoaderColors {
  0% {
    stroke: #35ad0e;
  }
  25% {
    stroke: #d8ad44;
  }
  50% {
    stroke: #d00324;
  }
  75% {
    stroke: #dc00b8;
  }
  100% {
    stroke: #017efc;
  }
}
@keyframes ajaxLoaderColors {
  0% {
    stroke: #35ad0e;
  }
  25% {
    stroke: #d8ad44;
  }
  50% {
    stroke: #d00324;
  }
  75% {
    stroke: #dc00b8;
  }
  100% {
    stroke: #017efc;
  }
}
@-moz-keyframes ajaxLoaderDash {
  0% {
    stroke-dashoffset: 1413;
  }
  50% {
    stroke-dashoffset: 392.5;
  }
  100% {
    stroke-dashoffset: 1413;
  }
}
@-webkit-keyframes ajaxLoaderDash {
  0% {
    stroke-dashoffset: 1413;
  }
  50% {
    stroke-dashoffset: 392.5;
  }
  100% {
    stroke-dashoffset: 1413;
  }
}
@keyframes ajaxLoaderDash {
  0% {
    stroke-dashoffset: 1413;
  }
  50% {
    stroke-dashoffset: 392.5;
  }
  100% {
    stroke-dashoffset: 1413;
  }
}
@-moz-keyframes ajaxLoaderDashSpin {
  50% {
    -moz-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  100% {
    -moz-transform: rotate(450deg);
    transform: rotate(450deg);
  }
}
@-webkit-keyframes ajaxLoaderDashSpin {
  50% {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  100% {
    -webkit-transform: rotate(450deg);
    transform: rotate(450deg);
  }
}
@keyframes ajaxLoaderDashSpin {
  50% {
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  100% {
    -moz-transform: rotate(450deg);
    -ms-transform: rotate(450deg);
    -webkit-transform: rotate(450deg);
    transform: rotate(450deg);
  }
}
.ajax-loader, .ajax-loader .ajax-loader-circle, .ajax-loader .ajax-loader-circle .ajax-loader-circle-spinner, .ajax-loader .ajax-loader-circle circle, .ajax-loader .ajax-loader-letters {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.spinner {
  width: 4rem;
  height: 4rem;
}
.spinner.spinner1 {
  /*border: 3px solid rgba($white, .25);
  border-top-color: rgba($black, .5);*/
  border: 3px solid;
  border-color: var(--secondaryColor);
  border-top-color: var(--iconMenuHoverSelectedColor);
  border-radius: 50%;
  animation: rotation 0.8s ease infinite;
}
.spinner.spinner2 {
  /*border: 3px solid transparent;
  border-top-color: rgba($black, .5);
  border-bottom-color: rgba($black, .5);*/
  border: 3px solid;
  border-color: var(--secondaryColor);
  border-top-color: var(--iconMenuHoverSelectedColor);
  border-bottom-color: var(--iconMenuHoverSelectedColor);
  border-radius: 50%;
  animation: rotation 0.8s ease infinite;
}
.spinner.spinner3 {
  border-top: 3px solid rgba(0, 0, 0, 0.5);
  border-right: 3px solid transparent;
  border-radius: 50%;
  animation: rotation 0.8s linear infinite;
}
.spinner.spinner4 {
  background: rgba(0, 0, 0, 0.5);
  animation: flip 1.2s ease infinite;
}
.spinner.spinner5 {
  margin-top: 2rem;
  overflow: hidden;
  position: relative;
  height: 0.5rem;
  background: rgba(255, 255, 255, 0.25);
}
.spinner.spinner5::before {
  content: "";
  position: absolute;
  left: -130%;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  animation: progress 4s linear infinite;
}
.spinner.spinner6 {
  position: absolute;
  top: 45%;
  left: 50%;
  background: #fff;
  border-radius: 50%;
  animation: pulse 1s ease-in-out infinite;
  transform: translate(-50%, -50%) scale(0);
}
.spinner.spinner7 {
  position: relative;
}
.spinner.spinner7::before, .spinner.spinner7::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
}
.spinner.spinner7::before {
  background: #fff;
  animation: pulse2 2s ease-in-out infinite;
}
.spinner.spinner7::after {
  background: #fff;
  animation: pulse2 2s 1s ease-in-out infinite;
}
.spinner.spinner8 {
  position: relative;
  perspective: 200px;
}
.spinner.spinner8::before {
  display: block;
  content: "";
  width: 50%;
  height: 50%;
  background: rgba(0, 0, 0, 0.5);
  animation: 2s flipWalker ease infinite;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes flip {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
  }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
  }
}
@keyframes progress {
  0% {
    left: -130%;
    background: rgba(0, 0, 0, 0.5);
  }
  50% {
    left: 130%;
    background: rgba(0, 0, 0, 0.5);
  }
  51% {
    background: rgba(255, 255, 255, 0.5);
  }
  100% {
    background: rgba(255, 255, 255, 0.5);
  }
}
@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
@keyframes pulse2 {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
@keyframes flipWalker {
  0% {
    transform: translate(0, 0) rotateX(0) rotateY(0);
  }
  25% {
    transform: translate(100%, 0) rotateX(0) rotateY(180deg);
  }
  50% {
    transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
  }
  75% {
    transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
  }
  100% {
    transform: translate(0, 0) rotateX(0) rotateY(360deg);
  }
}
/* AJAX LOADER SEARCH */
.ajax-loader-search-container {
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 105px);
  height: 120px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.ajax-loader-search-container::before {
  content: "";
  position: absolute;
  top: 210px;
  left: 26px;
  width: 100px;
  height: 32px;
  border-radius: 100%;
  background-color: rgba(100, 100, 100, 0.4);
  -webkit-animation-name: shadow-loop;
  animation-name: shadow-loop;
  -webkit-animation-duration: 0.7s;
  animation-duration: 0.7s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
.ajax-loader-search-container i {
  font-size: 3.4375rem;
  margin: 16px;
  color: #FFF;
  opacity: 0.5;
}
.ajax-loader-search-container .center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 140px;
  height: 140px;
  border-radius: 100%;
  background-color: transparent;
  border: 9px solid #ffffff;
  overflow: hidden;
  -webkit-animation-name: cloud-loop;
  animation-name: cloud-loop;
  -webkit-animation-duration: 0.7s;
  animation-duration: 0.7s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
.ajax-loader-search-container .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}
.ajax-loader-search-container span {
  position: relative;
  left: 112px;
  top: 60px;
  -webkit-animation-name: cloud-loop;
  animation-name: cloud-loop;
  -webkit-animation-duration: 0.7s;
  animation-duration: 0.7s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
.ajax-loader-search-container span::before {
  content: "";
  position: absolute;
  width: 50px;
  height: 6px;
  background-color: #ffffff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.ajax-loader-search-container span::after {
  content: "";
  position: absolute;
  left: 30px;
  top: 20px;
  width: 36px;
  height: 12px;
  background-color: #ffffff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-radius: 0 4px 4px 0;
}
.ajax-loader-search-container .box-ico {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.ajax-loader-search-container .box-1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-animation: 1s rowup-1 linear infinite normal;
  animation: 1s rowup-1 linear infinite normal;
}
.ajax-loader-search-container .box-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-animation: 1s rowup-2 linear infinite normal;
  animation: 1s rowup-2 linear infinite normal;
}
.ajax-loader-search-container .fa-plane {
  transform: rotate(0deg);
}

@-webkit-keyframes rowup-1 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
  }
}
@keyframes rowup-1 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
  }
}
@-webkit-keyframes rowup-2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
  }
}
@keyframes rowup-2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
  }
}
@-webkit-keyframes cloud-loop {
  0% {
    -webkit-transform: translate(0, 15px);
    transform: translate(0, 15px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-webkit-keyframes shadow-loop {
  0% {
    -webkit-transform: translate(0, -35px) scale(1.15, 0.25);
    transform: translate(0, -35px) scale(1.15, 0.25);
  }
  100% {
    -webkit-transform: translate(0, -35px) scale(1, 0.25);
    transform: translate(0, -35px) scale(1, 0.25);
  }
}
@keyframes shadow-loop {
  0% {
    -webkit-transform: translate(0, -35px) scale(1.15, 0.25);
    transform: translate(0, -35px) scale(1.15, 0.25);
  }
  100% {
    -webkit-transform: translate(0, -35px) scale(1, 0.25);
    transform: translate(0, -35px) scale(1, 0.25);
  }
}
/* WHEEL AND HAMSTER */
.wheel-and-hamster {
  --dur: 1s;
  width: 12em;
  height: 12em;
  position: relative;
  top: 40%;
  left: 45%;
}
.wheel-and-hamster .wheel,
.wheel-and-hamster .hamster,
.wheel-and-hamster .hamster div,
.wheel-and-hamster .spoke {
  position: absolute;
}
.wheel-and-hamster .wheel,
.wheel-and-hamster .spoke {
  border-radius: 50%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.wheel-and-hamster .wheel {
  background: radial-gradient(100% 100% at center, hsla(0, 0%, 60%, 0) 47.8%, hsl(0, 0%, 60%) 48%);
  z-index: 2;
}
.wheel-and-hamster .hamster {
  animation: hamster var(--dur) ease-in-out infinite;
  top: 50%;
  left: calc(50% - 3.5em);
  width: 7em;
  height: 3.75em;
  transform: rotate(4deg) translate(-0.8em, 1.85em);
  transform-origin: 50% 0;
  z-index: 1;
}
.wheel-and-hamster .hamster__head {
  animation: hamsterHead var(--dur) ease-in-out infinite;
  background: hsl(30, 90%, 55%);
  border-radius: 70% 30% 0 100%/40% 25% 25% 60%;
  box-shadow: 0 -0.25em 0 hsl(30, 90%, 80%) inset, 0.75em -1.55em 0 hsl(30, 90%, 90%) inset;
  top: 0;
  left: -2em;
  width: 2.75em;
  height: 2.5em;
  transform-origin: 100% 50%;
}
.wheel-and-hamster .hamster__ear {
  animation: hamsterEar var(--dur) ease-in-out infinite;
  background: hsl(0, 90%, 85%);
  border-radius: 50%;
  box-shadow: -0.25em 0 hsl(30, 90%, 55%) inset;
  top: -0.25em;
  right: -0.25em;
  width: 0.75em;
  height: 0.75em;
  transform-origin: 50% 75%;
}
.wheel-and-hamster .hamster__eye {
  animation: hamsterEye var(--dur) linear infinite;
  background-color: hsl(0, 0%, 0%);
  border-radius: 50%;
  top: 0.375em;
  left: 1.25em;
  width: 0.5em;
  height: 0.5em;
}
.wheel-and-hamster .hamster__nose {
  background: hsl(0, 90%, 75%);
  border-radius: 35% 65% 85% 15%/70% 50% 50% 30%;
  top: 0.75em;
  left: 0;
  width: 0.2em;
  height: 0.25em;
}
.wheel-and-hamster .hamster__body {
  animation: hamsterBody var(--dur) ease-in-out infinite;
  background: hsl(30, 90%, 90%);
  border-radius: 50% 30% 50% 30%/15% 60% 40% 40%;
  box-shadow: 0.1em 0.75em 0 hsl(30, 90%, 55%) inset, 0.15em -0.5em 0 hsl(30, 90%, 80%) inset;
  top: 0.25em;
  left: 2em;
  width: 4.5em;
  height: 3em;
  transform-origin: 17% 50%;
  transform-style: preserve-3d;
}
.wheel-and-hamster .hamster__limb--fr,
.wheel-and-hamster .hamster__limb--fl {
  clip-path: polygon(0 0, 100% 0, 70% 80%, 60% 100%, 0% 100%, 40% 80%);
  top: 2em;
  left: 0.5em;
  width: 1em;
  height: 1.5em;
  transform-origin: 50% 0;
}
.wheel-and-hamster .hamster__limb--fr {
  animation: hamsterFRLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30, 90%, 80%) 80%, hsl(0, 90%, 75%) 80%);
  transform: rotate(15deg) translateZ(-1px);
}
.wheel-and-hamster .hamster__limb--fl {
  animation: hamsterFLLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30, 90%, 90%) 80%, hsl(0, 90%, 85%) 80%);
  transform: rotate(15deg);
}
.wheel-and-hamster .hamster__limb--br,
.wheel-and-hamster .hamster__limb--bl {
  border-radius: 0.75em 0.75em 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 30%, 70% 90%, 70% 100%, 30% 100%, 40% 90%, 0% 30%);
  top: 1em;
  left: 2.8em;
  width: 1.5em;
  height: 2.5em;
  transform-origin: 50% 30%;
}
.wheel-and-hamster .hamster__limb--br {
  animation: hamsterBRLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30, 90%, 80%) 90%, hsl(0, 90%, 75%) 90%);
  transform: rotate(-25deg) translateZ(-1px);
}
.wheel-and-hamster .hamster__limb--bl {
  animation: hamsterBLLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30, 90%, 90%) 90%, hsl(0, 90%, 85%) 90%);
  transform: rotate(-25deg);
}
.wheel-and-hamster .hamster__tail {
  animation: hamsterTail var(--dur) linear infinite;
  background: hsl(0, 90%, 85%);
  border-radius: 0.25em 50% 50% 0.25em;
  box-shadow: 0 -0.2em 0 hsl(0, 90%, 75%) inset;
  top: 1.5em;
  right: -0.5em;
  width: 1em;
  height: 0.5em;
  transform: rotate(30deg) translateZ(-1px);
  transform-origin: 0.25em 0.25em;
}
.wheel-and-hamster .spoke {
  animation: spoke var(--dur) linear infinite;
  background: radial-gradient(100% 100% at center, hsl(0, 0%, 60%) 4.8%, hsla(0, 0%, 60%, 0) 5%), linear-gradient(hsla(0, 0%, 55%, 0) 46.9%, hsl(0, 0%, 65%) 47% 52.9%, hsla(0, 0%, 65%, 0) 53%) 50% 50%/99% 99% no-repeat;
}

/* Animations */
@keyframes hamster {
  from, to {
    transform: rotate(4deg) translate(-0.8em, 1.85em);
  }
  50% {
    transform: rotate(0) translate(-0.8em, 1.85em);
  }
}
@keyframes hamsterHead {
  from, 25%, 50%, 75%, to {
    transform: rotate(0);
  }
  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(8deg);
  }
}
@keyframes hamsterEye {
  from, 90%, to {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0);
  }
}
@keyframes hamsterEar {
  from, 25%, 50%, 75%, to {
    transform: rotate(0);
  }
  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(12deg);
  }
}
@keyframes hamsterBody {
  from, 25%, 50%, 75%, to {
    transform: rotate(0);
  }
  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-2deg);
  }
}
@keyframes hamsterFRLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(50deg) translateZ(-1px);
  }
  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-30deg) translateZ(-1px);
  }
}
@keyframes hamsterFLLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(-30deg);
  }
  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(50deg);
  }
}
@keyframes hamsterBRLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(-60deg) translateZ(-1px);
  }
  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(20deg) translateZ(-1px);
  }
}
@keyframes hamsterBLLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(20deg);
  }
  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-60deg);
  }
}
@keyframes hamsterTail {
  from, 25%, 50%, 75%, to {
    transform: rotate(30deg) translateZ(-1px);
  }
  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(10deg) translateZ(-1px);
  }
}
@keyframes spoke {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(-1turn);
  }
}
/* SPINNER SERVICE CIRCLE */
#spinnerServiceCircle .box-ico {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#spinnerServiceCircle .loaderSpinner {
  position: relative;
  width: 120px;
  height: 120px;
  top: 40%;
  padding: 30px 0;
  border: 1px solid rgba(100, 100, 100, 0.15);
  border-radius: 100%;
  margin: 0 auto;
}
#spinnerServiceCircle .loaderSpinner span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(calc(18deg * var(--i)));
}
#spinnerServiceCircle .loaderSpinner span:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  background: #5cb85c;
  border-radius: 50%;
  transform: scale(0);
  animation: animateSpinnerSearch 2s linear infinite;
  animation-delay: calc(0.1s * var(--i));
}
#spinnerServiceCircle .loaderSpinner .loaderSpinner-circle .iconSpinner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: rotatingSpinnerSearch 2s linear infinite;
  animation-delay: -1s;
}
#spinnerServiceCircle .loaderSpinner .loaderSpinner-circle .iconSpinner:before {
  position: absolute;
  top: 80px;
  left: 85px;
  color: #5cb85c;
  font-size: 2.5rem;
  transform: rotate(130deg);
}
#spinnerServiceCircle .loaderSpinner-horizontal .container-spinner {
  display: flex;
  position: fixed;
  border: solid;
  border-radius: 2.5em;
  border-width: 0.2em;
  border-color: #5cb85c;
  margin-top: 120px;
  margin-left: -50px;
}
#spinnerServiceCircle .loaderSpinner-horizontal .container-spinner .ball {
  background: rgba(36.1, 72.2, 36.1, 0.5);
  border-radius: 1em;
  text-align: center;
  font-size: 1em;
  padding: 1.2em;
  width: 1.5em;
  height: 1.5em;
  border-style: none;
  margin: 1em;
}
#spinnerServiceCircle .loaderSpinner-horizontal .container-spinner .ball.child1 {
  animation: ani1 1.25s infinite;
}
#spinnerServiceCircle .loaderSpinner-horizontal .container-spinner .ball.child2 {
  animation: ani2 1.25s infinite;
}
#spinnerServiceCircle .loaderSpinner-horizontal .container-spinner .ball.child3 {
  animation: ani3 1.25s infinite;
}

@keyframes animateSpinnerSearch {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  80%, 100% {
    transform: scale(0);
  }
}
@keyframes rotatingSpinnerSearch {
  0% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(370deg);
  }
}
@keyframes ani1 {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.5);
    background: rgba(36.1, 72.2, 36.1, 0.8);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(1);
  }
  80% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes ani2 {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.5) translate(0%, -25%);
    background: rgba(36.1, 72.2, 36.1, 0.8);
  }
  60% {
    transform: scale(1);
  }
  80% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes ani3 {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.5);
    background: rgba(36.1, 72.2, 36.1, 0.8);
  }
  80% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
/* SPINNER PACMAN */
.pac-man-content {
  position: relative;
  top: 45%;
}
.pac-man-content .pac-man {
  border-radius: 100em 100em 0 0;
  margin: 0 auto;
  margin-top: 5em;
  background: #f00;
  transform-origin: bottom;
  animation: eating-top 0.5s infinite;
}
.pac-man-content .pac-man, .pac-man-content .pac-man::before {
  width: 70px;
  height: 35px;
  background: #fed75a;
}
.pac-man-content .pac-man::before {
  content: "";
  display: block;
  margin-top: 35px;
  position: absolute;
  transform-origin: top;
  border-radius: 0 0 100em 100em;
  transform: rotate(80deg);
  animation: eating-bottom 0.5s infinite;
}
.pac-man-content .pac-man::after {
  position: absolute;
  border-radius: 100em;
  content: "";
  display: block;
  height: 20px;
  width: 20px;
  margin-top: 25px;
  margin-left: 25px;
  transform-origin: center;
  animation: center 0.5s infinite, ball 0.5s -0.33s infinite linear;
}

@keyframes eating-top {
  0% {
    transform: rotate(-40deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-40deg);
  }
}
@keyframes eating-bottom {
  0% {
    transform: rotate(80deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(80deg);
  }
}
@keyframes center {
  0% {
    transform: rotate(40deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(40deg);
  }
}
@keyframes ball {
  0% {
    opacity: 0.7;
    box-shadow: 70px 0 0 0 #fed75a, 120px 0 0 0 #fed75a, 170px 0 0 0 #fed75a, 220px 0 0 0 #fed75a;
  }
  100% {
    box-shadow: 20px 0 0 0 #fed75a, 70px 0 0 0 #fed75a, 120px 0 0 0 #fed75a, 170px 0 0 0 #fed75a;
  }
}
/* MAGIC */
#spinnerMagic .spinnerMagic-content-logo {
  position: relative;
  width: 120px;
  height: 120px;
  top: calc(50% - 120px);
  margin: 0 auto;
}
#spinnerMagic .spinnerMagic-content-logo .box-ico {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#spinnerMagic .spinnerMagic-content {
  position: relative;
  top: calc(50% - 240px);
  left: calc(50% - 95px);
}
#spinnerMagic .spinnerMagic-content .scene {
  display: flex;
}
#spinnerMagic .spinnerMagic-content .wizard {
  position: relative;
  width: 190px;
  height: 240px;
}
#spinnerMagic .spinnerMagic-content .body {
  position: absolute;
  bottom: 0;
  left: 68px;
  height: 100px;
  width: 60px;
  background: #3f64ce;
}
#spinnerMagic .spinnerMagic-content .body::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20px;
  height: 100px;
  width: 60px;
  background: #3f64ce;
  transform: skewX(14deg);
}
#spinnerMagic .spinnerMagic-content .right-arm {
  position: absolute;
  bottom: 74px;
  left: 110px;
  height: 44px;
  width: 90px;
  background: #3f64ce;
  border-radius: 22px;
  /** animation */
  transform-origin: 16px 22px;
  transform: rotate(70deg);
  animation: right_arm 10s ease-in-out infinite;
}
#spinnerMagic .spinnerMagic-content .right-arm .right-hand {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f1c5b4;
  /** animation */
  transform-origin: center center;
  transform: rotate(-40deg);
  animation: right_hand 10s ease-in-out infinite;
}
#spinnerMagic .spinnerMagic-content .right-arm .right-hand::after {
  content: "";
  position: absolute;
  right: 0px;
  top: -8px;
  width: 15px;
  height: 30px;
  border-radius: 10px;
  background: #f1c5b4;
  /** Animation */
  transform: translateY(16px);
  animation: right_finger 10s ease-in-out infinite;
}
#spinnerMagic .spinnerMagic-content .left-arm {
  position: absolute;
  bottom: 74px;
  left: 26px;
  height: 44px;
  width: 70px;
  background: #3f64ce;
  border-bottom-left-radius: 8px;
  /** animation */
  transform-origin: 60px 26px;
  transform: rotate(-70deg);
  animation: left_arm 10s ease-in-out infinite;
}
#spinnerMagic .spinnerMagic-content .left-arm .left-hand {
  position: absolute;
  left: -18px;
  top: 0;
  width: 18px;
  height: 30px;
  border-top-left-radius: 35px;
  border-bottom-left-radius: 35px;
  background: #f1c5b4;
}
#spinnerMagic .spinnerMagic-content .left-arm .left-hand::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 15px;
  border-radius: 20px;
  background: #f1c5b4;
  /** Animation */
  transform-origin: right bottom;
  transform: scaleX(0);
  animation: left_finger 10s ease-in-out infinite;
}
#spinnerMagic .spinnerMagic-content .head {
  position: absolute;
  top: 0;
  left: 14px;
  width: 160px;
  height: 210px;
  /** Animation */
  transform-origin: center center;
  transform: rotate(-3deg);
  animation: head 10s ease-in-out infinite;
}
#spinnerMagic .spinnerMagic-content .head .beard {
  position: absolute;
  bottom: 0;
  left: 38px;
  height: 106px;
  width: 80px;
  border-bottom-right-radius: 55%;
  background: #ffffff;
}
#spinnerMagic .spinnerMagic-content .head .beard::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  width: 40px;
  height: 20px;
  border-radius: 20px;
  background: #ffffff;
}
#spinnerMagic .spinnerMagic-content .head .face {
  position: absolute;
  bottom: 76px;
  left: 38px;
  height: 30px;
  width: 60px;
  background: #f1c5b4;
}
#spinnerMagic .spinnerMagic-content .head .face::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 40px;
  width: 20px;
  height: 40px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  background: #f1c5b4;
}
#spinnerMagic .spinnerMagic-content .head .face::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  width: 50px;
  height: 20px;
  border-radius: 20px;
  border-bottom-right-radius: 0px;
  background: #ffffff;
}
#spinnerMagic .spinnerMagic-content .head .face .adds {
  /** Nose */
  position: absolute;
  top: 0px;
  left: -10px;
  width: 40px;
  height: 20px;
  border-radius: 20px;
  background: #f1c5b4;
}
#spinnerMagic .spinnerMagic-content .head .face .adds::after {
  /** Ear */
  content: "";
  position: absolute;
  top: 5px;
  left: 80px;
  width: 15px;
  height: 20px;
  border-bottom-right-radius: 20px;
  border-top-right-radius: 20px;
  background: #f1c5b4;
}
#spinnerMagic .spinnerMagic-content .head .hat {
  position: absolute;
  bottom: 106px;
  left: 0;
  width: 160px;
  height: 20px;
  border-radius: 20px;
  background: #3f64ce;
}
#spinnerMagic .spinnerMagic-content .head .hat::before {
  content: "";
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translatex(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 34px 70px 50px;
  border-color: transparent transparent #3f64ce transparent;
}
#spinnerMagic .spinnerMagic-content .head .hat::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  height: 20px;
  background: #3f64ce;
  border-radius: 20px;
}
#spinnerMagic .spinnerMagic-content .head .hat .hat-of-the-hat {
  position: absolute;
  bottom: 78px;
  left: 79px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 25px 25px 19px;
  border-color: transparent transparent #3f64ce transparent;
}
#spinnerMagic .spinnerMagic-content .head .hat .hat-of-the-hat::after {
  content: "";
  position: absolute;
  top: 6px;
  left: -4px;
  width: 35px;
  height: 10px;
  border-radius: 10px;
  border-bottom-left-radius: 0px;
  background: #3f64ce;
  transform: rotate(40deg);
}
#spinnerMagic .spinnerMagic-content .head .hat .four-point-star {
  position: absolute;
  width: 12px;
  height: 12px;
}
#spinnerMagic .spinnerMagic-content .head .hat .four-point-star::after, #spinnerMagic .spinnerMagic-content .head .hat .four-point-star::before {
  content: "";
  position: absolute;
  background: #ffffff;
  display: block;
  left: 0;
  width: 141.4213%; /* 100% * √2 */
  top: 0;
  bottom: 0;
  border-radius: 10%;
  transform: rotate(66.66deg) skewX(45deg);
}
#spinnerMagic .spinnerMagic-content .head .hat .four-point-star::after {
  transform: rotate(156.66deg) skew(45deg);
}
#spinnerMagic .spinnerMagic-content .head .hat .four-point-star.--first {
  bottom: 28px;
  left: 46px;
}
#spinnerMagic .spinnerMagic-content .head .hat .four-point-star.--second {
  bottom: 40px;
  left: 80px;
}
#spinnerMagic .spinnerMagic-content .head .hat .four-point-star.--third {
  bottom: 15px;
  left: 108px;
}
#spinnerMagic .spinnerMagic-content {
  /** 10s animation - 10% = 1s */
}
@keyframes right_arm {
  0% {
    transform: rotate(70deg);
  }
  10% {
    transform: rotate(8deg);
  }
  15% {
    transform: rotate(20deg);
  }
  20% {
    transform: rotate(10deg);
  }
  25% {
    transform: rotate(26deg);
  }
  30% {
    transform: rotate(10deg);
  }
  35% {
    transform: rotate(28deg);
  }
  40% {
    transform: rotate(9deg);
  }
  45% {
    transform: rotate(28deg);
  }
  50% {
    transform: rotate(8deg);
  }
  58% {
    transform: rotate(74deg);
  }
  62% {
    transform: rotate(70deg);
  }
}
@keyframes left_arm {
  0% {
    transform: rotate(-70deg);
  }
  10% {
    transform: rotate(6deg);
  }
  15% {
    transform: rotate(-18deg);
  }
  20% {
    transform: rotate(5deg);
  }
  25% {
    transform: rotate(-18deg);
  }
  30% {
    transform: rotate(5deg);
  }
  35% {
    transform: rotate(-17deg);
  }
  40% {
    transform: rotate(5deg);
  }
  45% {
    transform: rotate(-18deg);
  }
  50% {
    transform: rotate(6deg);
  }
  58% {
    transform: rotate(-74deg);
  }
  62% {
    transform: rotate(-70deg);
  }
}
@keyframes right_hand {
  0% {
    transform: rotate(-40deg);
  }
  10% {
    transform: rotate(-20deg);
  }
  15% {
    transform: rotate(-5deg);
  }
  20% {
    transform: rotate(-60deg);
  }
  25% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(-60deg);
  }
  35% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(-40deg);
  }
  45% {
    transform: rotate(-60deg);
  }
  50% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(-40deg);
  }
}
@keyframes right_finger {
  0% {
    transform: translateY(16px);
  }
  10% {
    transform: none;
  }
  50% {
    transform: none;
  }
  60% {
    transform: translateY(16px);
  }
}
@keyframes left_finger {
  0% {
    transform: scaleX(0);
  }
  10% {
    transform: scaleX(1) rotate(6deg);
  }
  15% {
    transform: scaleX(1) rotate(0deg);
  }
  20% {
    transform: scaleX(1) rotate(8deg);
  }
  25% {
    transform: scaleX(1) rotate(0deg);
  }
  30% {
    transform: scaleX(1) rotate(7deg);
  }
  35% {
    transform: scaleX(1) rotate(0deg);
  }
  40% {
    transform: scaleX(1) rotate(5deg);
  }
  45% {
    transform: scaleX(1) rotate(0deg);
  }
  50% {
    transform: scaleX(1) rotate(6deg);
  }
  58% {
    transform: scaleX(0);
  }
}
@keyframes head {
  0% {
    transform: rotate(-3deg);
  }
  10% {
    transform: translatex(10px) rotate(7deg);
  }
  50% {
    transform: translatex(0px) rotate(0deg);
  }
  56% {
    transform: rotate(-3deg);
  }
}
#spinnerMagic .spinnerMagic-content {
  /** Objects CSS & Animations */
}
#spinnerMagic .spinnerMagic-content .objects {
  position: relative;
  width: 200px;
  height: 240px;
}
#spinnerMagic .spinnerMagic-content .square {
  position: absolute;
  bottom: -60px;
  left: -5px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  /** Animation */
  transform: rotate(-360deg);
  animation: path_square 10s ease-in-out infinite;
}
#spinnerMagic .spinnerMagic-content .square .contentIco {
  position: absolute;
  top: 10px;
  left: 0;
  width: 50px;
  height: 50px;
  background: #9ab3f5;
}
#spinnerMagic .spinnerMagic-content .square .contentIco .iconSpinner {
  position: relative;
  top: 30%;
  left: 30%;
  color: #fff;
}
#spinnerMagic .spinnerMagic-content .circle {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  /** Animation */
  transform: rotate(-360deg);
  animation: path_circle 10s ease-in-out infinite;
}
#spinnerMagic .spinnerMagic-content .circle .contentIco {
  position: absolute;
  bottom: -10px;
  left: 25px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #c56183;
}
#spinnerMagic .spinnerMagic-content .circle .contentIco .iconSpinner {
  position: relative;
  top: 30%;
  left: 30%;
  color: #fff;
}
#spinnerMagic .spinnerMagic-content .triangle {
  position: absolute;
  bottom: -62px;
  left: -10px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  /** Animation */
  transform: rotate(-360deg);
  animation: path_triangle 10s ease-in-out infinite;
}
#spinnerMagic .spinnerMagic-content .triangle .contentIco {
  position: absolute;
  top: 0;
  right: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 28px 48px 28px;
  border-color: transparent transparent #89beb3 transparent;
}
#spinnerMagic .spinnerMagic-content .triangle .contentIco .iconSpinner {
  position: relative;
  top: 20px;
  left: -10px;
  color: #fff;
}
#spinnerMagic .spinnerMagic-content {
  /** 10s animation - 10% = 1s */
}
@keyframes path_circle {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-100px) rotate(-5deg);
  }
  55% {
    transform: translateY(-100px) rotate(-360deg);
  }
  58% {
    transform: translateY(-100px) rotate(-360deg);
  }
  63% {
    transform: rotate(-360deg);
  }
}
@keyframes path_square {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-155px) translatex(-15px) rotate(10deg);
  }
  55% {
    transform: translateY(-155px) translatex(-15px) rotate(-350deg);
  }
  57% {
    transform: translateY(-155px) translatex(-15px) rotate(-350deg);
  }
  63% {
    transform: rotate(-360deg);
  }
}
@keyframes path_triangle {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-172px) translatex(10px) rotate(-10deg);
  }
  55% {
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
  }
  58% {
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
  }
  63% {
    transform: rotate(-360deg);
  }
}

/* BOOK */
.spinnerBook-content {
  position: relative;
  width: 120px;
  height: 240px;
  top: calc(50% - 120px);
  margin: 0 auto;
}
.spinnerBook-content .content-book {
  padding-top: 180px;
}
.spinnerBook-content .content-book .book,
.spinnerBook-content .content-book .book__pg-shadow,
.spinnerBook-content .content-book .book__pg {
  animation: book_cover 7s ease-in-out infinite;
}
.spinnerBook-content .content-book .book {
  background-color: var(--book--primary-l);
  border-radius: 0.25em;
  box-shadow: 0 0.25em 0.5em hsla(0, 0%, 0%, 0.3), 0 0 0 0.25em var(--book--primary) inset;
  padding: 0.25em;
  perspective: 37.5em;
  position: relative;
  width: 8em;
  height: 6em;
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
}
.spinnerBook-content .content-book .book__pg-shadow,
.spinnerBook-content .content-book .book__pg {
  position: absolute;
  left: 0.25em;
  width: calc(50% - 0.25em);
}
.spinnerBook-content .content-book .book__pg-shadow {
  animation-name: book_shadow;
  background-image: linear-gradient(-45deg, hsla(0, 0%, 0%, 0) 50%, hsla(0, 0%, 0%, 0.3) 50%);
  filter: blur(0.25em);
  top: calc(100% - 0.25em);
  height: 3.75em;
  transform: scaleY(0);
  transform-origin: 100% 0%;
}
.spinnerBook-content .content-book .book__pg {
  animation-name: book_pg1;
  background-color: var(--book--white);
  height: calc(100% - 0.5em);
  transform-origin: 100% 50%;
}
.spinnerBook-content .content-book .book__pg--2 {
  animation-name: book_pg2;
}
.spinnerBook-content .content-book .book__pg--3 {
  animation-name: book_pg3;
}
.spinnerBook-content .content-book .book__pg--4 {
  animation-name: book_pg4;
}
.spinnerBook-content .content-book .book__pg--5 {
  animation-name: book_pg5;
}
.spinnerBook-content .content-book .iconSpinner {
  color: #000;
  font-size: 3.125rem;
}

/* Animations */
@keyframes book_cover {
  from, 5%, 45%, 55%, 95%, to {
    animation-timing-function: ease-out;
    background-color: var(--book--primary-l);
  }
  10%, 40%, 60%, 90% {
    animation-timing-function: ease-in;
    background-color: var(--book--primary-d);
  }
}
@keyframes book_shadow {
  from, 10.01%, 20.01%, 30.01%, 40.01% {
    animation-timing-function: ease-in;
    transform: translate3d(0, 0, 1px) scaleY(0) rotateY(0);
  }
  5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
    animation-timing-function: ease-out;
    transform: translate3d(0, 0, 1px) scaleY(0.2) rotateY(90deg);
  }
  10%, 20%, 30%, 40%, 50%, to {
    animation-timing-function: ease-out;
    transform: translate3d(0, 0, 1px) scaleY(0) rotateY(180deg);
  }
  50.01%, 60.01%, 70.01%, 80.01%, 90.01% {
    animation-timing-function: ease-in;
    transform: translate3d(0, 0, 1px) scaleY(0) rotateY(180deg);
  }
  60%, 70%, 80%, 90%, to {
    animation-timing-function: ease-out;
    transform: translate3d(0, 0, 1px) scaleY(0) rotateY(0);
  }
}
@keyframes book_pg1 {
  from, to {
    animation-timing-function: ease-in-out;
    background-color: var(--book--white);
    transform: translate3d(0, 0, 1px) rotateY(0.4deg);
  }
  10%, 15% {
    animation-timing-function: ease-out;
    background-color: var(--book--white);
    transform: translate3d(0, 0, 1px) rotateY(180deg);
  }
  20%, 80% {
    animation-timing-function: ease-in;
    background-color: var(--book--white-d);
    transform: translate3d(0, 0, 1px) rotateY(180deg);
  }
  85%, 90% {
    animation-timing-function: ease-in-out;
    background-color: var(--book--white);
    transform: translate3d(0, 0, 1px) rotateY(180deg);
  }
}
@keyframes book_pg2 {
  from, to {
    animation-timing-function: ease-in;
    background-color: var(--book--white-d);
    transform: translate3d(0, 0, 1px) rotateY(0.3deg);
  }
  5%, 10% {
    animation-timing-function: ease-in-out;
    background-color: var(--book--white);
    transform: translate3d(0, 0, 1px) rotateY(0.3deg);
  }
  20%, 25% {
    animation-timing-function: ease-out;
    background-color: var(--book--white);
    transform: translate3d(0, 0, 1px) rotateY(179.9deg);
  }
  30%, 70% {
    animation-timing-function: ease-in;
    background-color: var(--book--white-d);
    transform: translate3d(0, 0, 1px) rotateY(179.9deg);
  }
  75%, 80% {
    animation-timing-function: ease-in-out;
    background-color: var(--book--white);
    transform: translate3d(0, 0, 1px) rotateY(179.9deg);
  }
  90%, 95% {
    animation-timing-function: ease-out;
    background-color: var(--book--white);
    transform: translate3d(0, 0, 1px) rotateY(0.3deg);
  }
}
@keyframes book_pg3 {
  from, 10%, 90%, to {
    animation-timing-function: ease-in;
    background-color: var(--book--white-d);
    transform: translate3d(0, 0, 1px) rotateY(0.2deg);
  }
  15%, 20% {
    animation-timing-function: ease-in-out;
    background-color: var(--book--white);
    transform: translate3d(0, 0, 1px) rotateY(0.2deg);
  }
  30%, 35% {
    animation-timing-function: ease-out;
    background-color: var(--book--white);
    transform: translate3d(0, 0, 1px) rotateY(179.8deg);
  }
  40%, 60% {
    animation-timing-function: ease-in;
    background-color: var(--book--white-d);
    transform: translate3d(0, 0, 1px) rotateY(179.8deg);
  }
  65%, 70% {
    animation-timing-function: ease-in-out;
    background-color: var(--book--white);
    transform: translate3d(0, 0, 1px) rotateY(179.8deg);
  }
  80%, 85% {
    animation-timing-function: ease-out;
    background-color: var(--book--white);
    transform: translate3d(0, 0, 1px) rotateY(0.2deg);
  }
}
@keyframes book_pg4 {
  from, 20%, 80%, to {
    animation-timing-function: ease-in;
    background-color: var(--book--white-d);
    transform: translate3d(0, 0, 1px) rotateY(0.1deg);
  }
  25%, 30% {
    animation-timing-function: ease-in-out;
    background-color: var(--book--white);
    transform: translate3d(0, 0, 1px) rotateY(0.1deg);
  }
  40%, 45% {
    animation-timing-function: ease-out;
    background-color: var(--book--white);
    transform: translate3d(0, 0, 1px) rotateY(179.7deg);
  }
  50% {
    animation-timing-function: ease-in;
    background-color: var(--book--white-d);
    transform: translate3d(0, 0, 1px) rotateY(179.7deg);
  }
  55%, 60% {
    animation-timing-function: ease-in-out;
    background-color: var(--book--white);
    transform: translate3d(0, 0, 1px) rotateY(179.7deg);
  }
  70%, 75% {
    animation-timing-function: ease-out;
    background-color: var(--book--white);
    transform: translate3d(0, 0, 1px) rotateY(0.1deg);
  }
}
@keyframes book_pg5 {
  from, 30%, 70%, to {
    animation-timing-function: ease-in;
    background-color: var(--book--white-d);
    transform: translate3d(0, 0, 1px) rotateY(0);
  }
  35%, 40% {
    animation-timing-function: ease-in-out;
    background-color: var(--book--white);
    transform: translate3d(0, 0, 1px) rotateY(0deg);
  }
  50% {
    animation-timing-function: ease-in-out;
    background-color: var(--book--white);
    transform: translate3d(0, 0, 1px) rotateY(179.6deg);
  }
  60%, 65% {
    animation-timing-function: ease-out;
    background-color: var(--book--white);
    transform: translate3d(0, 0, 1px) rotateY(0);
  }
}
/* DEADLINE */
#deadline {
  width: 581px;
  max-width: 100%;
  height: 158px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#deadline svg {
  width: 100%;
}
#deadline #progress-time-fill {
  animation-name: deadline-progress-fill;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
#deadline #death-group {
  animation-name: deadline-walk;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  transform: translateX(0);
}
#deadline #death-arm {
  animation: deadline-move-arm 3s ease infinite;
  transform-origin: -60px 74px;
}
#deadline #death-tool {
  animation: deadline-move-tool 3s ease infinite;
  transform-origin: -48px center;
}
#deadline #designer-arm-grop {
  animation: deadline-write 1.5s ease infinite;
  transform: translate(0, 0) rotate(0deg) scale(1, 1);
  transform-origin: 90% top;
}
#deadline .deadline-days {
  color: #fff;
  text-align: center;
  width: 100px;
  margin: 0 auto;
  position: relative;
  height: 20px;
  font-family: "Oswald", sans-serif;
}
#deadline .deadline-days .inner {
  width: 100px;
  position: relative;
  top: 0;
  left: 0;
}
#deadline .mask-red,
#deadline .mask-white {
  position: absolute;
  top: 0;
  width: 100%;
  overflow: hidden;
  height: 100%;
}
#deadline .mask-red {
  left: 0;
  width: 0;
  color: #BE002A;
  animation: deadline-text-red 20s ease infinite;
  z-index: 2;
  background: #000;
}
#deadline .mask-white {
  right: 0;
}
#deadline #red-flame {
  opacity: 0;
  animation: deadline-show-flames 20s ease infinite, deadline-red-flame 120ms ease infinite;
  transform-origin: center bottom;
}
#deadline #yellow-flame {
  opacity: 0;
  animation: deadline-show-flames 20s ease infinite, deadline-yellow-flame 120ms ease infinite;
  transform-origin: center bottom;
}
#deadline #white-flame {
  opacity: 0;
  animation: deadline-show-flames 20s ease infinite, deadline-red-flame 100ms ease infinite;
  transform-origin: center bottom;
}

/* Animations */
@keyframes deadline-progress-fill {
  0% {
    x: -100%;
  }
  100% {
    x: -3%;
  }
}
@keyframes deadline-walk {
  0% {
    transform: translateX(0);
  }
  6% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(100px);
  }
  15% {
    transform: translateX(140px);
  }
  25% {
    transform: translateX(170px);
  }
  35% {
    transform: translateX(220px);
  }
  45% {
    transform: translateX(280px);
  }
  55% {
    transform: translateX(340px);
  }
  65% {
    transform: translateX(370px);
  }
  75% {
    transform: translateX(430px);
  }
  85% {
    transform: translateX(460px);
  }
  100% {
    transform: translateX(520px);
  }
}
@keyframes deadline-move-arm {
  0% {
    transform: rotate(0);
  }
  5% {
    transform: rotate(0);
  }
  9% {
    transform: rotate(40deg);
  }
  80% {
    transform: rotate(0);
  }
}
@keyframes deadline-move-tool {
  0% {
    transform: rotate(0);
  }
  5% {
    transform: rotate(0);
  }
  9% {
    transform: rotate(50deg);
  }
  80% {
    transform: rotate(0);
  }
}
@keyframes deadline-write {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1, 1);
  }
  16% {
    transform: translate(0px, 0px) rotate(5deg) scale(0.8, 1);
  }
  32% {
    transform: translate(0px, 0px) rotate(0deg) scale(1, 1);
  }
  48% {
    transform: translate(0px, 0px) rotate(6deg) scale(0.8, 1);
  }
  65% {
    transform: translate(0px, 0px) rotate(0deg) scale(1, 1);
  }
  83% {
    transform: translate(0px, 0px) rotate(4deg) scale(0.8, 1);
  }
}
@keyframes deadline-text-red {
  0% {
    width: 0%;
  }
  100% {
    width: 98%;
  }
}
@keyframes deadline-show-flames {
  0% {
    opacity: 0;
  }
  74% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes deadline-red-flame {
  0% {
    transform: translateY(-30px) scale(1, 1);
  }
  25% {
    transform: translateY(-30px) scale(1.1, 1.1);
  }
  75% {
    transform: translateY(-30px) scale(0.8, 0.7);
  }
  100% {
    transform: translateY(-30px) scale(1, 1);
  }
}
@keyframes deadline-yellow-flame {
  0% {
    transform: translateY(-30px) scale(0.8, 0.7);
  }
  50% {
    transform: translateY(-30px) scale(1.1, 1.2);
  }
  100% {
    transform: translateY(-30px) scale(1, 1);
  }
}
/* POKEMON */
#spinnerPokemon .pokemon {
  position: relative;
  height: 100px;
  width: 100px;
  background: linear-gradient(to bottom, rgb(254, 0, 1) 50%, white 50%);
  border-radius: 50%;
  border: 8px solid black;
  animation: spinPokemon 1s linear infinite;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
}
#spinnerPokemon .pokemon::before {
  content: "";
  position: absolute;
  height: 8px;
  width: 90px;
  background: black;
  top: 42px;
  transform: translatey(-50%);
}
#spinnerPokemon .pokemon::after {
  content: "";
  position: absolute;
  height: 38px;
  width: 38px;
  border-radius: 50%;
  background: white;
  top: 42px;
  left: 42px;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 0 8px black, inset 0 0 0 10px white, inset 0 0 0 12px black;
}

@keyframes spinPokemon {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* DOT */
#spinnerDot {
  display: flex;
  align-items: center;
  justify-content: center;
}
#spinnerDot .spinnerDots {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50vmin;
  height: 50vmin;
  position: relative;
}
#spinnerDot .spinnerDots .ring {
  border: 1.5vmin solid var(--spinnerDots-spinnerDots-w);
  width: 64%;
  height: 64%;
  border-radius: 100%;
  z-index: 0;
  box-shadow: 0 0 0 1vmin var(--spinnerDots-spinnerDots-b), 0 0 0 1vmin var(--spinnerDots-spinnerDots-b) inset;
  display: flex;
  align-items: center;
  justify-content: center;
}
#spinnerDot .spinnerDots .dot {
  width: 50%;
  position: absolute;
  height: 7vmin;
  left: 0;
  transform-origin: 100% 50%;
  z-index: -1;
  animation: spinnerDots-over-ring calc(var(--spinnerDots-s) * 2) linear 0s infinite, spinnerDots-spin calc(var(--spinnerDots-s) * 8) linear 0s infinite;
}
#spinnerDot .spinnerDots .dot:before {
  content: "";
  width: 5.5vmin;
  height: 5.5vmin;
  left: 0;
  box-sizing: border-box;
  border: 1vmin solid var(--spinnerDots-spinnerDots-b);
  position: absolute;
  background: var(--spinnerDots-spinnerDots-w);
  border-radius: 100%;
  animation: spinnerDots-ball var(--spinnerDots-s) ease-in-out 0s infinite alternate;
}
#spinnerDot .spinnerDots .dot:nth-child(1) {
  animation-delay: calc(var(--spinnerDots-d) * 0), calc(var(--spinnerDots-d) * 0);
}
#spinnerDot .spinnerDots .dot:nth-child(1):before {
  animation-delay: calc(var(--spinnerDots-d) * 0);
}
#spinnerDot .spinnerDots .dot:nth-child(2) {
  animation-delay: calc(var(--spinnerDots-d) * -1), calc(var(--spinnerDots-d) * -4);
}
#spinnerDot .spinnerDots .dot:nth-child(2):before {
  animation-delay: calc(var(--spinnerDots-d) * -1);
}
#spinnerDot .spinnerDots .dot:nth-child(3) {
  animation-delay: calc(var(--spinnerDots-d) * -2), calc(var(--spinnerDots-d) * -8);
}
#spinnerDot .spinnerDots .dot:nth-child(3):before {
  animation-delay: calc(var(--spinnerDots-d) * -2);
}
#spinnerDot .spinnerDots .dot:nth-child(4) {
  animation-delay: calc(var(--spinnerDots-d) * -3), calc(var(--spinnerDots-d) * -12);
}
#spinnerDot .spinnerDots .dot:nth-child(4):before {
  animation-delay: calc(var(--spinnerDots-d) * -3);
}
#spinnerDot .spinnerDots .dot:nth-child(5) {
  animation-delay: calc(var(--spinnerDots-d) * -4), calc(var(--spinnerDots-d) * -16);
}
#spinnerDot .spinnerDots .dot:nth-child(5):before {
  animation-delay: calc(var(--spinnerDots-d) * -4);
}
#spinnerDot .spinnerDots .dot:nth-child(6) {
  animation-delay: calc(var(--spinnerDots-d) * -5), calc(var(--spinnerDots-d) * -20);
}
#spinnerDot .spinnerDots .dot:nth-child(6):before {
  animation-delay: calc(var(--spinnerDots-d) * -5);
}
#spinnerDot .spinnerDots .dot:nth-child(7) {
  animation-delay: calc(var(--spinnerDots-d) * -6), calc(var(--spinnerDots-d) * -24);
}
#spinnerDot .spinnerDots .dot:nth-child(7):before {
  animation-delay: calc(var(--spinnerDots-d) * -6);
}
#spinnerDot .spinnerDots .dot:nth-child(8) {
  animation-delay: calc(var(--spinnerDots-d) * -7), calc(var(--spinnerDots-d) * -28);
}
#spinnerDot .spinnerDots .dot:nth-child(8):before {
  animation-delay: calc(var(--spinnerDots-d) * -7);
}
#spinnerDot .spinnerDots .dot:nth-child(9) {
  animation-delay: calc(var(--spinnerDots-d) * -8), calc(var(--spinnerDots-d) * -32);
}
#spinnerDot .spinnerDots .dot:nth-child(9):before {
  animation-delay: calc(var(--spinnerDots-d) * -8);
}
#spinnerDot .spinnerDots .dot:nth-child(10) {
  animation-delay: calc(var(--spinnerDots-d) * -9), calc(var(--spinnerDots-d) * -36);
}
#spinnerDot .spinnerDots .dot:nth-child(10):before {
  animation-delay: calc(var(--spinnerDots-d) * -9);
}
#spinnerDot .spinnerDots .dot:nth-child(11) {
  animation-delay: calc(var(--spinnerDots-d) * -10), calc(var(--spinnerDots-d) * -40);
}
#spinnerDot .spinnerDots .dot:nth-child(11):before {
  animation-delay: calc(var(--spinnerDots-d) * -10);
}
#spinnerDot .spinnerDots .dot:nth-child(12) {
  animation-delay: calc(var(--spinnerDots-d) * -11), calc(var(--spinnerDots-d) * -44);
}
#spinnerDot .spinnerDots .dot:nth-child(12):before {
  animation-delay: calc(var(--spinnerDots-d) * -11);
}
@keyframes spinnerDots-spin {
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes spinnerDots-ball {
  100% {
    left: 12vmin;
    width: 4vmin;
    height: 4vmin;
  }
}
@keyframes spinnerDots-over-ring {
  0%, 50% {
    z-index: -1;
  }
  51%, 100% {
    z-index: 1;
  }
}

/* POSIZIONE LOGO */
.ajax-loader-letters.siap,
.box-ico.siap,
.box-ico2.siap,
.spinnerDots .ring.siap img {
  width: 70% !important;
  height: 70% !important;
  top: 28% !important;
  left: 17% !important;
}

.ajax-loader-letters.b4b,
.box-ico.b4b,
.box-ico2.b4b,
.spinnerDots .ring.b4b img {
  width: 75% !important;
  height: 75% !important;
  top: 22% !important;
  left: 10% !important;
}

.ajax-loader-letters.btexpert,
.box-ico.btexpert,
.box-ico2.btexpert,
.spinnerDots .ring.btexpert img {
  width: 80% !important;
  height: 80% !important;
  top: 10% !important;
  left: 10% !important;
}

.ajax-loader-letters.gattinoni,
.box-ico.gattinoni,
.box-ico2.gattinoni,
.spinnerDots .ring.gattinoni img {
  width: 60% !important;
  height: 60% !important;
  top: 20% !important;
  left: 20% !important;
}

.ajax-loader-letters.cisalpina,
.box-ico.cisalpina,
.box-ico2.cisalpina,
.spinnerDots .ring.cisalpina img {
  width: 75% !important;
  height: 75% !important;
  top: 10% !important;
  left: 12% !important;
}

.ajax-loader-letters.almatravel,
.box-ico.almatravel,
.box-ico2.almatravel,
.spinnerDots .ring.almatravel img {
  width: 75% !important;
  height: 75% !important;
  top: 12% !important;
  left: 13% !important;
}

.ajax-loader-letters.atpi,
.box-ico.atpi,
.box-ico2.atpi,
.spinnerDots .ring.atpi img {
  width: 75% !important;
  height: 75% !important;
  top: 21% !important;
  left: 17% !important;
}

.ajax-loader-letters.saipem,
.box-ico.saipem,
.box-ico2.saipem,
.spinnerDots .ring.saipem img {
  width: 75% !important;
  height: 75% !important;
  top: 25% !important;
  left: 25% !important;
}

.ajax-loader-letters.eni,
.box-ico.eni,
.box-ico2.eni,
.spinnerDots .ring.eni img {
  width: 80% !important;
  height: 80% !important;
  top: 4% !important;
  left: 10% !important;
}

.ajax-loader-letters.micoperi,
.box-ico.micoperi,
.box-ico2.micoperi,
.spinnerDots .ring.micoperi img {
  width: 55% !important;
  height: 55% !important;
  top: 18% !important;
  left: 23% !important;
}

.box-minmax {
  width: 82%;
  display: flex;
  justify-content: space-between;
  font-size: 1.25rem;
  margin-top: 5px;
  color: #ffffff;
  /* span:first-child {
        margin-left: 10px;
    } */
}

.rs-range {
  margin-top: 0px;
  width: 80%;
  -webkit-appearance: none;
}
.rs-range:focus {
  outline: none;
}
.rs-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  box-shadow: none;
  background: #ffffff;
  border-radius: 0px;
  border: 0px solid #010101;
}
.rs-range::-moz-range-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  box-shadow: none;
  background: #ffffff;
  border-radius: 0px;
  border: 0px solid #010101;
}
.rs-range::-webkit-slider-thumb {
  box-shadow: none;
  border: 0px solid #ffffff;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background: rgb(255, 255, 255);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -10px;
}
.rs-range.rangeNotAllowed::-webkit-slider-thumb {
  box-shadow: none;
  border: 0px solid #ffffff;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background: rgb(128, 126, 126);
  cursor: not-allowed;
  -webkit-appearance: none;
  margin-top: -10px;
}
.rs-range::-moz-range-thumb {
  box-shadow: none;
  border: 0px solid #ffffff;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
  height: 42px;
  width: 22px;
  border-radius: 22px;
  background: rgb(255, 255, 255);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -20px;
}
.rs-range::-moz-focus-outer {
  border: 0;
}

.scrtabs-tab-container * {
  box-sizing: border-box;
}

.scrtabs-tab-container {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.scrtabs-tab-container .tab-content {
  clear: left;
}

.scrtabs-tab-container.scrtabs-bootstrap4 .scrtabs-tabs-movable-container > .navbar-nav {
  -ms-flex-direction: row;
  flex-direction: row;
}

.scrtabs-tabs-fixed-container {
  float: left;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.scrtabs-tabs-movable-container {
  position: relative;
}
.scrtabs-tabs-movable-container .tab-content {
  display: none;
}
.scrtabs-tabs-movable-container .nav-tabs {
  border: none;
  margin-top: 7px;
}
.scrtabs-tabs-movable-container a:not(.active) {
  text-decoration: none;
  background-color: transparent !important;
  color: var(--textSecondaryColor);
  border: none !important;
}
.scrtabs-tabs-movable-container a:not(.active).active, .scrtabs-tabs-movable-container a:not(.active):hover, .scrtabs-tabs-movable-container a:not(.active):focus {
  color: var(--textPrimaryColor) !important;
  border: none !important;
}
.scrtabs-tabs-movable-container a:not(.active).forceHover:hover {
  color: var(--textPrimaryColor) !important;
  border-bottom: 1px var(--iconMenuHoverSelectedColor) solid !important;
}
.scrtabs-tabs-movable-container .containerBadge {
  width: 100%;
  position: relative;
}
.scrtabs-tabs-movable-container .badge {
  top: -34px;
  position: absolute;
  right: 7px;
  color: var(--linkTextColor);
}
.scrtabs-tabs-movable-container .badge.tot {
  right: -4px;
}

.scrtabs-tab-container.scrtabs-rtl .scrtabs-tabs-movable-container > ul.nav-tabs {
  padding-right: 0;
}

.scrtabs-tab-scroll-arrow {
  background-color: var(--buttonColor);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-top: none;
  color: var(--primaryColor);
  float: left;
}
.scrtabs-tab-scroll-arrow:hover {
  background-color: #007bff;
}

.scrtabs-tab-scroll-arrow,
.scrtabs-tab-scroll-arrow .scrtabs-click-target {
  cursor: pointer;
}

.scrtabs-tab-scroll-arrow.scrtabs-with-click-target {
  cursor: default;
}

.scrtabs-tab-scroll-arrow.scrtabs-disable,
.scrtabs-tab-scroll-arrow.scrtabs-disable .scrtabs-click-target {
  visibility: hidden;
}

.scrtabs-tabs-fixed-container ul.nav-tabs > li {
  white-space: nowrap;
}

.scrtabs-tab-scroll-arrow.scrtabs-disable:hover {
  background-color: initial;
}

.scrtabs-tabs-fixed-container ul.nav-tabs > li {
  white-space: nowrap;
}

.flatpickr-calendar {
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  -webkit-animation: none;
  animation: none;
  direction: ltr;
  border: 0;
  font-size: 0.875rem;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  background: var(--primaryColor);
  -webkit-box-shadow: 1px 0 0 #20222c, -1px 0 0 #20222c, 0 1px 0 #20222c, 0 -1px 0 #20222c, 0 3px 13px rgba(0, 0, 0, 0.08);
  box-shadow: 1px 0 0 #20222c, -1px 0 0 #20222c, 0 1px 0 #20222c, 0 -1px 0 #20222c, 0 3px 13px rgba(0, 0, 0, 0.08);
}

.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible;
}

.flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999;
}

.flatpickr-calendar.animate.open {
  -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
}

.flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
}

.flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
  box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}

.flatpickr-calendar .hasWeeks .dayContainer,
.flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
}

.flatpickr-calendar.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #20222c;
}

.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
}

.flatpickr-calendar:before,
.flatpickr-calendar:after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  left: 22px;
}

.flatpickr-calendar.rightMost:before,
.flatpickr-calendar.arrowRight:before,
.flatpickr-calendar.rightMost:after,
.flatpickr-calendar.arrowRight:after {
  left: auto;
  right: 22px;
}

.flatpickr-calendar.arrowCenter:before,
.flatpickr-calendar.arrowCenter:after {
  left: 50%;
  right: 50%;
}

.flatpickr-calendar:before {
  border-width: 5px;
  margin: 0 -5px;
}

.flatpickr-calendar:after {
  border-width: 4px;
  margin: 0 -4px;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  bottom: 100%;
}

.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #20222c;
}

.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #3f4458;
}

.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  top: 100%;
}

.flatpickr-calendar.arrowBottom:before {
  border-top-color: #20222c;
}

.flatpickr-calendar.arrowBottom:after {
  border-top-color: #3f4458;
}

.flatpickr-calendar:focus {
  outline: 0;
}

.flatpickr-wrapper {
  position: relative;
  display: inline-block;
}

.flatpickr-months {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flatpickr-months .flatpickr-month {
  color: var(--textPrimaryColor);
  fill: var(--textPrimaryColor);
  height: 34px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 34px;
  padding: 10px;
  z-index: 3;
  color: var(--textPrimaryColor);
  fill: var(--textPrimaryColor);
}

.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  display: none;
}

.flatpickr-months .flatpickr-prev-month i,
.flatpickr-months .flatpickr-next-month i {
  position: relative;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
  /*
        /*rtl:begin:ignore*/
  /*
        */
  left: 0;
  /*
        /*rtl:end:ignore*/
  /*
        */
}

/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
  /*
        /*rtl:begin:ignore*/
  /*
        */
  right: 0;
  /*
        /*rtl:end:ignore*/
  /*
        */
}

/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: #eee;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--hoverButtonColor);
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}

.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
  -webkit-transition: fill 0.1s;
  transition: fill 0.1s;
  fill: inherit;
}

.numInputWrapper {
  position: relative;
  height: auto;
}

.numInputWrapper input,
.numInputWrapper span {
  display: inline-block;
}

.numInputWrapper input {
  width: 100%;
}

.numInputWrapper input::-ms-clear {
  display: none;
}

.numInputWrapper input::-webkit-outer-spin-button,
.numInputWrapper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.15);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.numInputWrapper span:hover {
  background: rgba(192, 187, 167, 0.1);
}

.numInputWrapper span:active {
  background: rgba(192, 187, 167, 0.2);
}

.numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute;
}

.numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
}

.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(255, 255, 255, 0.6);
  top: 26%;
}

.numInputWrapper span.arrowDown {
  top: 50%;
}

.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(255, 255, 255, 0.6);
  top: 40%;
}

.numInputWrapper span svg {
  width: inherit;
  height: auto;
}

.numInputWrapper span svg path {
  fill: rgba(255, 255, 255, 0.5);
}

.numInputWrapper:hover {
  background: transparent;
}

.numInputWrapper:hover span {
  opacity: 1;
}

.flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 7.48px 0 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

.flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
}

.flatpickr-current-month span.cur-month:hover {
  background: transparent;
}

.flatpickr-current-month .numInputWrapper {
  width: 6ch;
  width: 7ch\0 ;
  display: inline-block;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--hoverButtonColor);
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: var(--hoverButtonColor);
}

.flatpickr-current-month input.cur-year {
  background: transparent;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.flatpickr-current-month input.cur-year:focus {
  outline: 0;
}

.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  pointer-events: none;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: menulist;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 0.5ch;
  position: relative;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
  background-color: transparent;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:active {
  outline: none;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: transparent;
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: #3f4458;
  outline: none;
  padding: 0;
}

.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 28px;
}

.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  color: var(--textSecondaryColor);
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-weight: bolder;
}

.dayContainer,
.flatpickr-weeks {
  padding: 1px 0 0 0;
}

.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  width: 307.875px;
}

.flatpickr-days:focus {
  outline: 0;
}

.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
  opacity: 1;
}

.dayContainer + .dayContainer {
  -webkit-box-shadow: -1px 0 0 var(--textSecondaryColor);
  box-shadow: -1px 0 0 var(--textSecondaryColor);
}

.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: var(--textSecondaryColor);
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  -webkit-flex-basis: 14.2857143%;
  -ms-flex-preferred-size: 14.2857143%;
  flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
}

.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: var(--buttonColor);
  border-color: var(--buttonColor);
  color: var(--textButtonColor);
}

.flatpickr-day.today {
  border-color: var(--buttonColor);
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  border-color: var(--secondaryColor);
  background: var(--secondaryColor);
  color: var(--textSecondaryColor);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: var(--hoverButtonColor);
  -webkit-box-shadow: none;
  box-shadow: none;
  color: var(--hoverTextButtonColor);
  border-color: var(--hoverButtonColor);
}

.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px;
}

.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  -webkit-box-shadow: -10px 0 0 var(--hoverButtonColor);
  box-shadow: -10px 0 0 var(--hoverButtonColor);
}

.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px;
}

.flatpickr-day.inRange {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 var(--buttonColor), 5px 0 0 var(--buttonColor);
  box-shadow: -5px 0 0 var(--buttonColor), 5px 0 0 var(--buttonColor);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: var(--textSecondaryColor);
  background: transparent;
  border-color: transparent;
  cursor: default;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.1);
}

.flatpickr-day.week.selected {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 var(--hoverButtonColor), 5px 0 0 var(--hoverButtonColor);
  box-shadow: -5px 0 0 var(--hoverButtonColor), 5px 0 0 var(--hoverButtonColor);
}

.flatpickr-day.hidden {
  visibility: hidden;
}

.rangeMode .flatpickr-day {
  margin-top: 1px;
}

.flatpickr-weekwrapper {
  float: left;
}

.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  -webkit-box-shadow: 1px 0 0 #20222c;
  box-shadow: 1px 0 0 #20222c;
}

.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px;
}

.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: var(--textSecondaryColor);
  background: transparent;
  cursor: default;
  border: none;
}

.flatpickr-innerContainer {
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
}

.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flatpickr-time:after {
  content: "";
  display: table;
  clear: both;
}

.flatpickr-time .numInputWrapper {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 40%;
  height: 40px;
  float: left;
}

.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--textSecondaryColor);
}

.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: var(--textSecondaryColor);
}

.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
}

.flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
}

.flatpickr-time input {
  background: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: var(--textSecondaryColor);
  font-size: 0.875rem;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.flatpickr-time input.flatpickr-hour {
  font-weight: bold;
}

.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
  font-weight: 400;
}

.flatpickr-time input:focus {
  outline: 0;
  border: 0;
}

.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  height: inherit;
  float: left;
  line-height: inherit;
  color: var(--textSecondaryColor);
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}

.flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: #6a7395;
}

.flatpickr-input[readonly] {
  cursor: pointer;
  background-image: linear-gradient(to bottom, var(--primary), var(--primary)), linear-gradient(to bottom, var(--inputBorderColor), var(--inputBorderColor)) !important;
}

@-webkit-keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.checkbox-custom,
.radio-custom {
  opacity: 0;
  position: absolute;
}

.checkbox-custom,
.checkbox-custom-label,
.radio-custom,
.radio-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}

.checkbox-custom-label,
.radio-custom-label {
  position: relative;
}

.checkbox-custom + .checkbox-custom-label:before,
.radio-custom + .radio-custom-label:before {
  content: "";
  background: var(--primaryColor);
  border: 1px solid var(--linkColor);
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}

.checkbox-custom:checked + .checkbox-custom-label:before {
  content: "\f00c";
  font-family: "Font Awesome 6 Pro";
  background: var(--linkColor);
  color: #fff;
}

.radio-custom + .radio-custom-label:before {
  border-radius: 50%;
}

.radio-custom:checked + .radio-custom-label:before {
  content: "\f00c";
  font-family: "Font Awesome 6 Pro";
  color: white;
  background-color: var(--linkColor);
}

.modalFlexOpenRightLeft {
  -ms-flex: 0 0 calc(100% - 460px);
  flex: 0 0 calc(100% - 460px);
  transition: all 1s;
}

.modalCustom {
  width: 100%;
  overflow: scroll !important;
  border-radius: 20px;
  backdrop-filter: blur(10px);
}
.modalCustom .modal-content {
  width: 100%;
  border-radius: 20px;
  background-color: var(--primaryColor);
  background-color: transparent;
  color: var(--textPrimaryColor);
  border: none;
  margin-top: 50px;
}
.modalCustom.disableBackdrop {
  backdrop-filter: initial;
}
.modalCustom.leftModal, .modalCustom.rightModal {
  padding: 0;
  border-radius: 0;
  border: none;
  backdrop-filter: initial;
  width: initial;
  height: initial;
}
.modalCustom.leftModal .modal-dialog, .modalCustom.rightModal .modal-dialog {
  position: fixed;
  margin: auto;
  width: 420px;
  height: 100%;
  -webkit-transform: translate3d(0%, 0, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}
.modalCustom.leftModal .modal-content, .modalCustom.rightModal .modal-content {
  height: 100%;
  overflow-y: auto;
  padding: 0;
  margin-top: 74px;
}
.modalCustom.leftModal .modal-body, .modalCustom.rightModal .modal-body {
  padding: 0 0 80px 0;
}
.modalCustom.leftModal.noScroll .modal-content, .modalCustom.rightModal.noScroll .modal-content {
  overflow: hidden;
}
.modalCustom.leftModal.noScroll .setOverflowScroll, .modalCustom.rightModal.noScroll .setOverflowScroll {
  height: calc(100% - 180px);
}
.modalCustom.leftModal.fade .modal-dialog {
  left: -420px;
  -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
  -o-transition: opacity 0.3s linear, left 0.3s ease-out;
  transition: opacity 0.3s linear, left 0.3s ease-out;
}
.modalCustom.leftModal.fade.show .modal-dialog {
  left: 0;
}
.modalCustom.rightModal.fade .modal-dialog {
  right: -420px;
  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
  -o-transition: opacity 0.3s linear, right 0.3s ease-out;
  transition: opacity 0.3s linear, right 0.3s ease-out;
}
.modalCustom.rightModal.fade.show .modal-dialog {
  right: 0;
}

.modalCartCustom {
  padding: 15px;
  width: 100%;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modalCartCustom .modalCart-content {
  position: relative;
  padding: 15px;
  flex-direction: row !important;
  width: 45%;
  border-radius: 20px;
  background-color: var(--primaryColor);
  background-color: transparent;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bigModal {
  max-width: 100vw !important;
}

.miniModal {
  max-width: 60vw !important;
}

.microModal {
  max-width: 30vw !important;
}

.mediumModal {
  max-width: 75vw !important;
}

.modalDashboard {
  padding: 15px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modalDashboard .modalDashboard-content {
  position: relative;
  padding: 15px;
  flex-direction: row !important;
  width: 90% !important;
  height: 90% !important;
  border-radius: 20px;
  background-color: var(--primaryColor);
  background-color: transparent;
  color: white;
  display: flex;
}

.modalNewTransfer {
  padding: 15px;
  width: 100%;
  height: 80% !important;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modalNewTransfer .modalNewTransfer-content {
  position: relative;
  padding: 15px;
  flex-direction: row !important;
  border-radius: 20px;
  background-color: var(--primaryColor);
  background-color: transparent;
  color: var(--textPrimaryColor);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modalHr {
  border-top: 1px solid var(--textPrimaryColor) !important;
}

.modalPaddingLine {
  padding-right: 0px !important;
  padding-left: 0px !important;
}

.bigModalCustomScroll {
  overflow: scroll;
  max-height: 400px !important;
  border-radius: 20px;
  scrollbar-color: var(--linkColor) transparent;
  scrollbar-width: thin;
}

.bigModalCustomScroll::-webkit-scrollbar-button {
  display: none !important;
}

.bigModalCustomScroll::-webkit-scrollbar-track {
  display: none !important;
}

.bigModalCustomScroll::-webkit-scrollbar-track-piece {
  display: none !important;
}

.bigModalCustomScroll::-webkit-scrollbar-thumb {
  border-radius: 20px;
  border: 3px solid var(--linkColor);
}

.bigModalCustomScroll::-webkit-scrollbar-corner {
  display: none !important;
}

.bigModalCustomScroll::-webkit-resizer {
  display: none !important;
}

.noMarginModal {
  margin: 0% !important;
}

.modalBorder {
  border: 1px solid var(--primaryColor);
}

.bigZindexModal {
  z-index: 10000;
}

.modalContentMobile {
  width: 100% !important;
  height: auto;
}

/* Estilo iOS */
.switch__container {
  margin: 10px auto;
  width: 30px;
  min-width: 130px;
}

.switch {
  visibility: hidden;
  position: absolute;
  margin-left: -9999px;
}

.switch + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}

.switch--shadow + label {
  padding: 2px;
  width: 50px;
  height: 25px;
  /*background-color: var(--buttonColor);*/
  border-radius: 60px;
}

.switch--shadow + label:before,
.switch--shadow + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}

.switch--shadow + label:before {
  right: 1px;
  background-color: var(--buttonColor);
  border-radius: 60px;
  transition: background 0.4s;
}

.switch--shadow + label:after {
  width: 22px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: all 0.4s;
}

.switch--shadow:checked + label:before {
  background-color: var(--linkColor);
}

.switch--shadow:checked + label:after {
  transform: translateX(25px);
}

/* Estilo Flat */
.switch--flat + label {
  padding: 2px;
  width: 120px;
  height: 60px;
  background-color: #dddddd;
  border-radius: 60px;
  transition: background 0.4s;
}

.switch--flat + label:before,
.switch--flat + label:after {
  display: block;
  position: absolute;
  content: "";
}

.switch--flat + label:before {
  top: 2px;
  left: 2px;
  bottom: 2px;
  right: 2px;
  background-color: #fff;
  border-radius: 60px;
  transition: background 0.4s;
}

.switch--flat + label:after {
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 56px;
  background-color: #dddddd;
  border-radius: 52px;
  transition: margin 0.4s, background 0.4s;
}

.switch--flat:checked + label {
  background-color: #8ce196;
}

.switch--flat:checked + label:after {
  margin-left: 60px;
  background-color: #8ce196;
}

.top-bar-shadow {
  /*-webkit-box-shadow: 7px 7px 7px 0px rgba(16, 16, 16, 0.5) !important;
  -moz-box-shadow: 7px 7px 7px 0px rgba(16, 16, 16, 0.5) !important;
  box-shadow: 7px 7px 7px 0px rgba(16, 16, 16, 0.5) !important;*/
  position: relative;
  z-index: 10;
}

.left-bar-shadow {
  /*-webkit-box-shadow: 10px 0px 7px 0px rgba(16, 16, 16, 0.5) !important;
  -moz-box-shadow: 10px 0px 7px 0px rgba(16, 16, 16, 0.5) !important;
  box-shadow: 10px 0px 7px 0px rgba(16, 16, 16, 0.5) !important;*/
  position: relative;
  z-index: 9;
}

.tabs-shadow {
  -webkit-box-shadow: 15px 3px 15px 0px rgba(16, 16, 16, 0.5) !important;
  -moz-box-shadow: 15px 3px 15px 0px rgba(16, 16, 16, 0.5) !important;
  box-shadow: 15px 3px 15px 0px rgba(16, 16, 16, 0.5) !important;
  position: relative;
  z-index: 8;
}

.filter-shadow {
  -webkit-box-shadow: -5px 0px 5px 0px rgba(16, 16, 16, 0.5) !important;
  -moz-box-shadow: -5px 0px 5px 0px rgba(16, 16, 16, 0.5) !important;
  box-shadow: -5px 0px 5px 0px rgba(16, 16, 16, 0.5) !important;
  position: relative;
  z-index: 7;
}

.bootstrap-select button.disabled {
  border: none;
}
.bootstrap-select button.disabled::after {
  display: none;
}
.bootstrap-select.error > button {
  background: transparent;
  outline: none;
  color: #b24747;
  border: 1px solid #b24747;
  border: none;
}
.bootstrap-select .dropdown-menu {
  background-color: var(--primaryColor);
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}
.bootstrap-select .dropdown-menu li {
  min-height: 40px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  justify-items: center;
}
.bootstrap-select .dropdown-menu li.disabled {
  cursor: not-allowed;
}
.bootstrap-select .dropdown-menu li.disabled a {
  color: var(--textSecondaryColor) !important;
}
.bootstrap-select .dropdown-menu li a {
  padding: 10px;
}
.bootstrap-select .dropdown-menu li a.selected {
  background-color: var(--secondaryColor) !important;
  color: var(--textPrimaryColor);
}
.bootstrap-select .dropdown-menu li a.selected:hover {
  color: var(--textSecondaryColor);
  text-decoration: none;
  cursor: pointer;
}
.bootstrap-select .dropdown-menu li a {
  color: #bebebe;
  font-size: 12pt;
  width: 100%;
}
.bootstrap-select .dropdown-menu li a:hover {
  color: #00a0c6;
  text-decoration: none;
  cursor: pointer;
}
.bootstrap-select .dropdown-menu li a:focus {
  outline: none;
}

.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select > select.mobile-device:focus + .dropdown-toggle,
.bootstrap-select > button:focus {
  outline: none !important;
}

.customSelect:hover {
  background-color: transparent !important;
  color: var(--textPrimaryColor);
}

input.es-input {
  padding-right: 20px !important;
}

input.es-input.open {
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius-bottomleft: 0;
  border-bottom-left-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -moz-border-radius-bottomright: 0;
  border-bottom-right-radius: 0;
}

.es-list {
  position: absolute;
  padding: 0;
  margin: 0;
  display: none;
  z-index: 1000;
  background: var(--primaryColor);
  box-shadow: none;
  border: none;
  max-height: 160px;
  overflow-y: auto;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}
.es-list li {
  display: block;
  padding: 5px 10px !important;
  margin: 5px;
}
.es-list li.selected {
  background: var(--secondaryColor);
  color: var(--textPrimaryColor);
}
.es-list li[disabled] {
  opacity: 0.5;
}
.es-list li:hover {
  background-color: #f8f9fa;
  color: #00a0c6;
  text-decoration: none;
  cursor: pointer;
}

.sidebarRightContainer {
  width: 25vw;
  max-width: 380px;
  position: fixed;
  z-index: 20;
  height: 100%;
  overflow: auto;
  right: 0;
  padding: 10px 20px;
  box-shadow: -6px 0px 18px -5px rgba(0, 0, 0, 0.15);
  border-left: 3px solid var(--linkColor);
  transition: opacity 0.5s ease-out, width 0.6s ease-out;
  /*     .labelCart {
      font-size: 18pt;
      font-weight: 600;
    } */
}

/* CHECKBOX */
.customCheckbox label {
  margin-top: -10px !important;
}

input[type=checkbox].customCheckbox:not(:checked), input[type=checkbox].customCheckbox:checked {
  position: absolute;
  left: -9999px;
}
input[type=checkbox].customCheckbox:not(:checked) + label, input[type=checkbox].customCheckbox:checked + label {
  position: relative;
  padding-left: 1.95em;
  cursor: pointer;
}
input[type=checkbox].customCheckbox {
  /* checkbox aspect */
}
input[type=checkbox].customCheckbox:not(:checked) + label:before, input[type=checkbox].customCheckbox:checked + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.4em;
  height: 1.4em;
  border: none;
  background: green;
  border-radius: 4px;
  /* box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);*/
}
input[type=checkbox].customCheckbox:not(:checked) + label:before {
  background: transparent;
  border: 2px solid #a4a4a4;
}
input[type=checkbox].customCheckbox {
  /* checked mark aspect */
}
input[type=checkbox].customCheckbox:not(:checked) + label:after, input[type=checkbox].customCheckbox:checked + label:after {
  content: "✓ ";
  position: absolute;
  top: 0.15em;
  left: 0.2em;
  font-size: 1.1em;
  line-height: 0.8;
  color: white;
  transition: all 0.38s;
  font-family: "Lucida Sans Unicode", "Arial Unicode MS", Arial;
}
input[type=checkbox].customCheckbox {
  /* checked mark aspect changes */
}
input[type=checkbox].customCheckbox:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
input[type=checkbox].customCheckbox:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
input[type=checkbox].customCheckbox {
  /* disabled checkbox */
}
input[type=checkbox].customCheckbox:disabled:not(:checked) + label:before, input[type=checkbox].customCheckbox:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
input[type=checkbox].customCheckbox:disabled:checked + label:after {
  color: #999;
}
input[type=checkbox].customCheckbox:disabled + label {
  color: #aaa;
}
input[type=checkbox].customCheckbox {
  /* accessibility */
}
input[type=checkbox].customCheckbox:checked:focus + label:before, input[type=checkbox].customCheckbox:not(:checked):focus + label:before {
  box-shadow: 0px 0px 6px -2px red !important;
}
input[type=checkbox].customCheckbox .rtl input[type=checkbox]:not(:checked) + label, input[type=checkbox].customCheckbox .rtl input[type=checkbox]:checked + label {
  padding-left: 0 !important;
}
input[type=checkbox].customCheckbox .rtl input[type=checkbox]:not(:checked) + label:after, input[type=checkbox].customCheckbox .rtl input[type=checkbox]:checked + label:after {
  right: -1.7em !important;
  left: unset !important;
}
input[type=checkbox].customCheckbox .rtl input[type=checkbox]:not(:checked) + label:before, input[type=checkbox].customCheckbox .rtl input[type=checkbox]:checked + label:before {
  left: unset !important;
  right: -2.1em !important;
}

.card-counter {
  margin: 5px;
  padding: 20px 10px;
}
.card-counter .count-numbers {
  position: absolute;
  right: 35px;
  top: 20px;
  display: block;
}
.card-counter .count-name {
  position: absolute;
  right: 35px;
  top: 85px;
  font-style: italic;
  text-transform: capitalize;
  opacity: 0.5;
  display: block;
  font-size: 1.125rem;
}

.tabulator {
  border: none;
  background-color: transparent;
  color: var(--textPrimaryColor);
}
.tabulator .tabulator-header {
  background-color: transparent;
}
.tabulator .tabulator-header .tabulator-headers {
  background-color: transparent;
  color: var(--textPrimaryColor);
}
.tabulator .tabulator-tableHolder {
  padding-left: 1rem;
  padding-right: 1rem;
  overflow-x: hidden;
}
.tabulator .tabulator-tableHolder .tabulator-table {
  width: 100%;
}
.tabulator .tabulator-tableHolder .tabulator-placeholder span {
  color: var(--textPrimaryColor) !important;
}
.tabulator .tabulator-col {
  border-right: none !important;
  background-color: transparent !important;
}
.tabulator .tabulator-row .tabulator-cell {
  border-right: none !important;
}
.tabulator .tabulator-table {
  background-color: transparent !important;
  color: var(--textPrimaryColor) !important;
}
.tabulator .tabulator-table .tabulator-row-even,
.tabulator .tabulator-table .tabulator-row-odd {
  background-color: transparent;
}
.tabulator .tabulator-table .tabulator-row.tabulator-selectable:hover,
.tabulator .tabulator-table .tabulator-row.tabulator-row-even:hover {
  background-color: var(--buttonColor) !important;
  color: var(--textButtonColor) !important;
}
.tabulator .tabulator-selected {
  background-color: var(--hoverButtonColor) !important;
  color: var(--hoverTextButtonColor) !important;
}
.tabulator .tabulator-selected .tabulator-editing input {
  width: 70% !important;
  padding: 0px !important;
  color: var(--hoverTextButtonColor) !important;
}
.tabulator .tabulator-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem !important;
  border-top: none;
  flex-direction: row;
  background-color: transparent;
}
.tabulator .tabulator-footer .tabulator-paginator {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.tabulator .tabulator-footer .tabulator-paginator .tabulator-page {
  font-size: 0.875rem;
  font-weight: bold;
  color: var(--textPrimaryColor);
  background-color: var(--buttonColor);
  border: none;
  border-radius: 16px;
  cursor: pointer;
  color: var(--textButtonColor) !important;
  margin-left: 5px;
  margin-right: 5px;
}
.tabulator .tabulator-footer .tabulator-paginator .tabulator-page:hover {
  background-color: var(--hoverButtonColor);
  color: var(--hoverTextButtonColor);
}
.tabulator .tabulator-footer .tabulator-paginator .tabulator-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.tabulator .tabulator-footer .tabulator-paginator .tabulator-pages button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  margin-right: 2px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: bold;
  color: var(--textButtonColor) !important;
  background-color: var(--buttonColor) !important;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.tabulator .tabulator-footer .tabulator-paginator .tabulator-pages button:hover {
  background-color: var(--hoverButtonColor) !important;
  color: var(--hoverTextButtonColor) !important;
}
.tabulator .tabulator-footer .tabulator-paginator .tabulator-pages button.active {
  color: var(--hoverTextButtonColor) !important;
  background-color: var(--hoverButtonColor) !important;
}

.switchChoose {
  --duration: .3s;
  cursor: pointer;
}
.switchChoose.disabledInput {
  cursor: not-allowed;
}
.switchChoose input {
  display: none;
}
.switchChoose input + div {
  position: relative;
}
.switchChoose input + div:before, .switchChoose input + div:after {
  --s: 1;
  content: "";
  position: absolute;
  height: 4px;
  top: 10px;
  width: 24px;
  background: var(--textSecondaryColor);
  transform: scaleX(var(--s));
  transition: transform var(--duration) ease;
}
.switchChoose input + div:before {
  --s: 0;
  left: 0;
  transform-origin: 0 50%;
  border-radius: 2px 0 0 2px;
}
.switchChoose input + div:after {
  left: 28px;
  transform-origin: 100% 50%;
  border-radius: 0 2px 2px 0;
}
.switchChoose input + div span {
  padding-left: 56px;
  line-height: 24px;
  color: var(--textSecondaryColor);
}
.switchChoose input + div span:before {
  --x: 0;
  --b: var(--textSecondaryColor);
  --s: 4px;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 var(--s) var(--b);
  transform: translateX(var(--x));
  transition: box-shadow var(--duration) ease, transform var(--duration) ease;
}
.switchChoose input + div span:not(:empty) {
  padding-left: 64px;
}
.switchChoose input:checked + div:before {
  --s: 1;
}
.switchChoose input:checked + div:after {
  --s: 0;
}
.switchChoose input:checked + div span:before {
  --x: 28px;
  --s: 12px;
  --b: var(--textPrimaryColor);
}

.subLevel {
  margin-left: 50px;
  align-items: center;
  height: "100%";
  /* margin-top: 30px; */
}

.whiteRound {
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 20px;
}

.redRound {
  width: 10px;
  height: 10px;
  background-color: #b24747;
  border-radius: 20px;
}

.greenRound {
  width: 10px;
  height: 10px;
  background-color: #60a930;
  border-radius: 20px;
}

.bigRound {
  width: 20px;
  height: 20px;
}

.buttonDivCommunity {
  display: none !important;
}

.infoBookingCart {
  border: 1px solid var(--primaryColor) !important;
}
.infoBookingCart:hover {
  border: 1px solid var(--iconMenuHoverSelectedColor) !important;
  cursor: pointer;
}

.activeBookingCart {
  border: 1px solid var(--hoverButtonColor) !important;
}

.errorBookingCart {
  border: 1px solid red !important;
}

/*.htmlFrameContainerBookingFilter{
	margin-top: -38px;
}*/
#cardFooterBooking .contentPanelButton1Right {
  z-index: 2;
}

#cardButtonBooking .contentBlockIcon {
  z-index: 2;
}

.inputSearchCarPickUp {
  position: relative;
}
.inputSearchCarPickUp .roundedButton {
  position: absolute;
  right: -14px;
  z-index: 2;
}

@media only screen and (max-width: 1200px) {
  /*.htmlFrameContainerBookingFilter{
  	margin-top: 0;
  }*/
  .inputSearchCarPickUp .roundedButton {
    right: -10px;
    top: 45px;
  }
}
@media only screen and (max-width: 575px) {
  .inputSearchCarPickUp .roundedButton {
    top: 0;
    right: 0;
    transform: rotate(90deg);
  }
}
.dashboardContainer {
  font-size: 0.8rem;
}

.topGenericAdminClass {
  width: 20px !important;
  height: 20px !important;
  top: -5% !important;
  right: 14% !important;
}

.topGenericDashboardClass {
  width: 20px !important;
  height: 20px !important;
  top: -5% !important;
  right: 14% !important;
}

.iconType {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  width: 40px;
  height: 40px;
  color: var(--textPrimaryColor);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  background-color: transparent;
  color: var(--textPrimaryColor);
  border: 2px dashed var(--textPrimaryColor);
  min-width: 40px;
  min-height: 40px;
  margin: 2px 2px 0 2px;
  cursor: pointer;
  /* &.active {
    border: 1px solid $primary-color;
  } */
}
.iconType > i {
  font-size: 1.6em;
}
.iconType.disable {
  cursor: not-allowed !important;
}
.iconType.small {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  border-width: 1px;
}
.iconType.small.dashed {
  border-width: 1px;
}
.iconType.small .iconServiceActive {
  width: 30px;
  height: 30px;
  max-width: 15px;
  max-height: 15px;
  top: -6px;
  left: 17px;
}
.iconType.small .badgeSpan {
  background-color: transparent !important;
}
.iconType.small-extra {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border-width: 1px;
}
.iconType.small-extra.dashed {
  border-width: 1px;
}

.iconServiceActive {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  width: 40px;
  height: 40px;
  color: var(--textPrimaryColor);
  border-radius: 50%;
  cursor: pointer;
  /* background-color: var(--primary-color); */
  width: 40px;
  height: 40px;
  /*  color: var(--primary-text-color); */
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  color: var(--textPrimaryColor);
  max-width: 18px;
  max-height: 18px;
  top: -4px;
  left: 26px;
}
.iconServiceActive span {
  font-size: 0.75rem;
}

#monthScrollingTabs .tab-content {
  max-height: 50vh;
}

.showDetailsViaggiatori {
  height: 40px;
  cursor: pointer;
  border-top: 3px solid var(--primaryColor);
}

.containerMobileSlider {
  background-color: rgba(0, 0, 0, 0.3803921569) !important;
}

.mobileMenuSidebar {
  height: 100%;
  width: 50%;
}
.mobileMenuSidebar a {
  text-transform: uppercase;
  color: var(--textPrimaryColor);
}
.mobileMenuSidebar .block-elem-menu a.activeLink {
  border: none;
}

.styleContainerSidebarMenu {
  width: 100%;
  height: 100%;
  z-index: 1000000;
  position: absolute;
}

.extraMenuMobile {
  color: var(--textPrimaryColor);
}

.mobileFilterElement {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 20;
}

#contentTrip .fontSize40 {
  font-size: 2.1875rem;
}
#contentTrip .fontSize18 {
  font-size: 0.9375rem;
}

.cross-icon-container {
  position: relative;
  display: inline-block;
}
.cross-icon-container .cross {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5em;
  height: 1.5em;
  transform: translate(-50%, -50%);
}
.cross-icon-container .cross::before, .cross-icon-container .cross::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  background-color: red;
  transform: translate(-50%, -50%) rotate(45deg);
}
.cross-icon-container .cross::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.slideInLeftAnimation {
  -webkit-animation: slideInLeftAnimation 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slideInLeftAnimation 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.slideOutLeftAnimation {
  -webkit-animation: slideOutLeftAnimation 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
  animation: slideOutLeftAnimation 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

.slideInRight {
  -webkit-animation: slideInRight 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slideInRight 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.slideOutRight {
  -webkit-animation: slideOutRight 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
  animation: slideOutRight 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0;
  }
}
@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0;
  }
}
@-webkit-keyframes slideInLeftAnimation {
  0% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideInLeftAnimation {
  0% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@-webkit-keyframes slideOutLeftAnimation {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
}
@keyframes slideOutLeftAnimation {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
}
@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideInRight {
  0% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
.baseHome {
  color: var(--textPrimaryColor);
  background-color: var(--secondaryColor);
  height: 100vh;
  overflow: hidden;
  font-size: 0.9rem;
}
.baseHome .cardModifiedButton {
  padding: 0;
  border: none;
  background: none;
  font-size: 0.9375rem;
  min-width: 150px;
  font-weight: 500;
  color: var(--buttonColor);
}
.baseHome .cardModifiedButton:focus {
  outline: none;
  color: var(--textPrimaryColor);
}
.baseHome .solid {
  border-top: 2px solid var(--secondaryColor);
}
.baseHome .bigSolid {
  border-top: 5px solid var(--textPrimaryColor);
}
.baseHome .margin-left-card {
  margin-left: -25px !important;
}
.baseHome .margin-top-card {
  margin-top: -8px !important;
}
.baseHome .margin-hr-div {
  margin-left: -40px !important;
  margin-right: 10px !important;
}
.baseHome .solidBorder {
  border-radius: 20px;
  border: 1px solid;
  border-color: var(--textPrimaryColor);
}

.customScroll {
  overflow: scroll;
}
@media (min-width: 1200px) {
  .customScroll {
    max-height: calc(100vh - 260px) !important;
  }
}
.customScroll {
  border-radius: 20px;
  scrollbar-color: var(--iconMenuHoverSelectedColor) transparent;
  scrollbar-width: thin;
}
.customScroll.noHorizontal {
  overflow-x: hidden;
}

.customScroll::-webkit-scrollbar-button {
  display: none !important;
}

.customScroll::-webkit-scrollbar-track {
  display: none !important;
}

.customScroll::-webkit-scrollbar-track-piece {
  display: none !important;
}

.customScroll::-webkit-scrollbar-thumb {
  border-radius: 20px;
  border: 3px solid var(--iconMenuHoverSelectedColor);
}

.customScroll::-webkit-scrollbar-corner {
  display: none !important;
}

.customScroll::-webkit-resizer {
  display: none !important;
}

.dashboardHr {
  margin-bottom: 0;
  border-top: 2px solid var(--secondaryColor) !important;
}

.customWidthInput {
  width: -moz-available !important;
  width: -webkit-fill-available !important;
}

.tree ul {
  padding-top: 20px;
  position: relative;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.treeClose {
  clear: both;
}

.tree li {
  float: left;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li::before, .tree li::after {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid var(--inputBorderColor);
  width: 50%;
  height: 20px;
}

.tree li::after {
  right: auto;
  left: 50%;
  border-left: 1px solid var(--inputBorderColor);
}

.tree li:only-child::after, .tree li:only-child::before {
  display: none;
}

.tree li:only-child {
  padding-top: 0;
}

.tree li:first-child::before, .tree li:last-child::after {
  border: 0 none;
}

.tree li:last-child::before {
  border-right: 1px solid var(--inputBorderColor);
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}

.tree ul ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px solid var(--inputBorderColor);
  width: 0;
  height: 20px;
}

.tree li a {
  border: 1px solid var(--inputBorderColor);
  padding: 5px 10px;
  text-decoration: none;
  font-family: arial, verdana, tahoma;
  font-size: 0.6875rem;
  display: inline-block;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li a:hover, .tree li a:hover + ul li a {
  border: 1px solid var(--hoverLinkTextColor);
  color: var(--hoverLinkTextColor) !important;
}

.tree li a:hover + ul li::after,
.tree li a:hover + ul li::before,
.tree li a:hover + ul::before,
.tree li a:hover + ul ul::before {
  border-color: var(--hoverLinkTextColor);
}

/* TREE VERTICAL */
.treeVertical, .treeVertical ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.treeVertical ul {
  margin-left: 1em;
  position: relative;
}

.treeVertical ul ul {
  margin-left: 0.5em;
}

.treeVertical ul:before {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  top: -8px;
  bottom: 0;
  left: -4px;
  border-left: 1px solid;
}

.treeVertical ul:first-child:before {
  top: 0px;
}

.treeVertical li {
  margin: 0;
  padding: 0 0 0 1em;
  line-height: 2em;
  position: relative;
  font-weight: bold;
}

.treeVertical li.disabled {
  opacity: 0.1;
}

.containerRowCommunityFlex.disabled {
  opacity: 0.1;
}
.containerRowCommunityFlex:hover:not(.disabled) {
  background-color: var(--hoverButtonColor);
  color: var(--hoverTextButtonColor);
}
.containerRowCommunityFlex:hover:not(.disabled) .buttonDivCommunity {
  display: flex !important;
}
.containerRowCommunityFlex:hover:not(.disabled) .dashed {
  border-color: var(--hoverTextButtonColor);
  color: var(--hoverTextButtonColor);
}
.containerRowCommunityFlex .table {
  color: var(--textPrimaryColor);
}

.treeVertical li.disabled .disable {
  opacity: 1;
}

.treeVertical li,
.treeVertical li a.modifiedLink {
  font-size: 0.9375rem;
}

.treeVertical li a.modifiedLink:hover {
  text-decoration: none;
}

.treeVertical li:after {
  clear: both;
}

.treeVertical ul li:before {
  content: "";
  display: block;
  width: 15px;
  height: 0;
  border-top: 1px solid;
  margin-top: -7px;
  position: absolute;
  top: 1.5em;
  left: -4px;
}

.treeVertical li .lineElement {
  display: none;
}

.treeVertical li:last-child .lineElement {
  display: block;
}

.treeVertical ul li:last-child:before {
  background-color: var(--primaryColor);
  height: auto;
  top: 1.5em;
  bottom: 0;
}

.treeVertical li .label {
  font-size: 0.875rem;
}

body.robintur .titleCard {
  font-weight: bold;
}
body.robintur .modified-nav-link {
  font-weight: bold;
}
body.robintur .modifiedButton,
body.robintur .modifiedButtonSecondary {
  font-weight: bold;
}

/*body {
	&.siap {
		.top-bar-icon, .sidebar-bar-icon, .ajax-loader-letters img {
  			@include recolor(#76B251, 0.8);
		}
		.poweredBySiapLogin{
			img.applySvgColor{
				@include recolor(#bebebe, 0.8);
			}
		}

		.poweredBySiapTopBar{

			img.applySvgColor{
				@include recolor(#bebebe, 0.8);
			}

		}

		.poweredBySiapSidebar{
			img.applySvgColor{
				@include recolor(#bebebe, 0.8);
			}
		}
	}
}*/
.applySvgColor {
  fill: var(--iconMenuColor);
}

.applySvgColor.loginTitle {
  fill: var(--textPrimaryColor);
}

.poweredBySiapLogin {
  margin-right: 10px;
}
.poweredBySiapLogin img {
  width: 45px;
}

.poweredBySiapSidebar {
  max-width: 65px !important;
  position: absolute;
  bottom: 20px;
  left: 0;
  z-index: 9;
}
.poweredBySiapSidebar .label {
  font-size: 0.5rem;
  font-weight: bold;
  color: var(--iconMenuColor);
}

.versionSidebar {
  max-width: 65px !important;
  min-width: 65px !important;
  position: absolute;
  bottom: 5px;
  left: 0;
  z-index: 9;
  font-size: 0.5rem;
  text-align: center;
  color: var(--iconMenuColor);
}

.circlesAnimation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
  background-color: var(--secondaryColor);
}

.circlesAnimation li {
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background-color: var(--textPrimaryColor);
  animation: animate 25s linear infinite;
  bottom: -150px;
}

.circlesAnimation li:nth-child(1) {
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}

.circlesAnimation li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}

.circlesAnimation li:nth-child(3) {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}

.circlesAnimation li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}

.circlesAnimation li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}

.circlesAnimation li:nth-child(6) {
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}

.circlesAnimation li:nth-child(7) {
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
}

.circlesAnimation li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
}

.circlesAnimation li:nth-child(9) {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}

.circlesAnimation li:nth-child(10) {
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
}

@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0;
  }
  100% {
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  }
}
.animateSiap.animate {
  animation-duration: 0.75s;
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-name: animate-fade;
  animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
  animation-fill-mode: backwards;
}
.animateSiap.animate.fade {
  animation-name: animate-fade;
  animation-timing-function: ease;
}
.animateSiap.animate.pop {
  animation-name: animate-pop;
}
.animateSiap.animate.blur {
  animation-name: animate-blur;
  animation-timing-function: ease;
}
.animateSiap.animate.glow {
  animation-name: animate-glow;
  animation-timing-function: ease;
}
.animateSiap.animate.grow {
  animation-name: animate-grow;
}
.animateSiap.animate.splat {
  animation-name: animate-splat;
}
.animateSiap.animate.roll {
  animation-name: animate-roll;
}
.animateSiap.animate.flip {
  animation-name: animate-flip;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.animateSiap.animate.spin {
  animation-name: animate-spin;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.animateSiap.animate.slide {
  animation-name: animate-slide;
}
.animateSiap.animate.drop {
  animation-name: animate-drop;
  animation-timing-function: cubic-bezier(0.77, 0.14, 0.91, 1.25);
}
.animateSiap.delay-1 {
  animation-delay: 0.6s;
}
.animateSiap.delay-2 {
  animation-delay: 0.7s;
}
.animateSiap.delay-3 {
  animation-delay: 0.8s;
}
.animateSiap.delay-4 {
  animation-delay: 0.9s;
}
.animateSiap.delay-5 {
  animation-delay: 1s;
}
.animateSiap.delay-6 {
  animation-delay: 1.1s;
}
.animateSiap.delay-7 {
  animation-delay: 1.2s;
}
.animateSiap.delay-8 {
  animation-delay: 1.3s;
}
.animateSiap.delay-9 {
  animation-delay: 1.4s;
}
.animateSiap.delay-10 {
  animation-delay: 1.5s;
}
.animateSiap.delay-11 {
  animation-delay: 1.6s;
}
.animateSiap.delay-12 {
  animation-delay: 1.7s;
}
.animateSiap.delay-13 {
  animation-delay: 1.8s;
}
.animateSiap.delay-14 {
  animation-delay: 1.9s;
}
.animateSiap.delay-15 {
  animation-delay: 2s;
}

@keyframes animate-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes animate-pop {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes animate-blur {
  0% {
    opacity: 0;
    filter: blur(15px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}
@keyframes animate-glow {
  0% {
    opacity: 0;
    filter: brightness(3) saturate(3);
    transform: scale(0.8, 0.8);
  }
  100% {
    opacity: 1;
    filter: brightness(1) saturate(1);
    transform: scale(1, 1);
  }
}
@keyframes animate-grow {
  0% {
    opacity: 0;
    transform: scale(1, 0);
    visibility: hidden;
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes animate-splat {
  0% {
    opacity: 0;
    transform: scale(0, 0) rotate(20deg) translate(0, -30px);
  }
  70% {
    opacity: 1;
    transform: scale(1.1, 1.1) rotate(15deg);
  }
  85% {
    opacity: 1;
    transform: scale(1.1, 1.1) rotate(15deg) translate(0, -10px);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1) rotate(0) translate(0, 0);
  }
}
@keyframes animate-roll {
  0% {
    opacity: 0;
    transform: scale(0, 0) rotate(360deg);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1) rotate(0deg);
  }
}
@keyframes animate-flip {
  0% {
    opacity: 0;
    transform: rotateX(-120deg) scale(0.9, 0.9);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg) scale(1, 1);
  }
}
@keyframes animate-spin {
  0% {
    opacity: 0;
    transform: rotateY(-120deg) scale(0.9, 0.9);
  }
  100% {
    opacity: 1;
    transform: rotateY(0deg) scale(1, 1);
  }
}
@keyframes animate-slide {
  0% {
    opacity: 0;
    transform: translate(0, 20px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes animate-drop {
  0% {
    opacity: 0;
    transform: translate(0, -300px) scale(0.9, 1.1);
  }
  95% {
    opacity: 1;
    transform: translate(0, 0) scale(0.9, 1.1);
  }
  96% {
    opacity: 1;
    transform: translate(10px, 0) scale(1.2, 0.9);
  }
  97% {
    opacity: 1;
    transform: translate(-10px, 0) scale(1.2, 0.9);
  }
  98% {
    opacity: 1;
    transform: translate(5px, 0) scale(1.1, 0.9);
  }
  99% {
    opacity: 1;
    transform: translate(-5px, 0) scale(1.1, 0.9);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1, 1);
  }
}
@media screen and (prefers-reduced-motion: reduce) {
  .animate {
    animation: none !important;
  }
}
.pulsate.single {
  position: relative;
}
.pulsate::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  animation: pulse 1s ease infinite;
  border-radius: 50%;
  border: 4px double #ff6666;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  60% {
    transform: scale(1.3);
    opacity: 0.4;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}
snowfall {
  position: fixed;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50000000;
  display: block;
  font-size: 2.5rem;
  overflow: hidden;
  pointer-events: none;
}

snowfall snowflake {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  width: 100px;
  height: 100px;
}

snowfall snowflake span {
  align-self: center;
}

snowfall snowflake img {
  align-self: center;
  width: 20px;
}

snowfall snowflake:nth-child(50) {
  animation: animation-snowflake-50 linear infinite;
  animation-duration: 15.9s;
  animation-delay: -9.4s;
}

@keyframes animation-snowflake-50 {
  0% {
    left: 75%;
    top: calc(0% - 100px);
    transform: scale(0.755) rotate3d(0.27, 0.57, 0.69, 0deg);
  }
  100% {
    left: 82.6%;
    top: calc(100% + 100px);
    transform: scale(0.755) rotate3d(0.55, 0.76, 0.65, -1039deg);
  }
}
snowfall snowflake:nth-child(49) {
  animation: animation-snowflake-49 linear infinite;
  animation-duration: 13.7s;
  animation-delay: -15.2s;
}

@keyframes animation-snowflake-49 {
  0% {
    left: 65%;
    top: calc(0% - 100px);
    transform: scale(0.902) rotate3d(0.83, 0.95, 0.56, 0deg);
  }
  100% {
    left: 55.2%;
    top: calc(100% + 100px);
    transform: scale(0.902) rotate3d(0.34, 0.39, 0.65, 1334deg);
  }
}
snowfall snowflake:nth-child(48) {
  animation: animation-snowflake-48 linear infinite;
  animation-duration: 12.5s;
  animation-delay: -8.3s;
}

@keyframes animation-snowflake-48 {
  0% {
    left: 14%;
    top: calc(0% - 100px);
    transform: scale(0.845) rotate3d(0.94, 0.02, 0.15, 0deg);
  }
  100% {
    left: 18.5%;
    top: calc(100% + 100px);
    transform: scale(0.845) rotate3d(0.11, 0.68, 0.29, -860deg);
  }
}
snowfall snowflake:nth-child(47) {
  animation: animation-snowflake-47 linear infinite;
  animation-duration: 10.8s;
  animation-delay: -10.9s;
}

@keyframes animation-snowflake-47 {
  0% {
    left: 81%;
    top: calc(0% - 100px);
    transform: scale(0.607) rotate3d(0.57, 0.32, 0.64, 0deg);
  }
  100% {
    left: 94.5%;
    top: calc(100% + 100px);
    transform: scale(0.607) rotate3d(0.75, 0.51, 0.93, -756deg);
  }
}
snowfall snowflake:nth-child(46) {
  animation: animation-snowflake-46 linear infinite;
  animation-duration: 9.9s;
  animation-delay: -5.4s;
}

@keyframes animation-snowflake-46 {
  0% {
    left: 91%;
    top: calc(0% - 100px);
    transform: scale(0.966) rotate3d(0.68, 0.76, 0.64, 0deg);
  }
  100% {
    left: 121.5%;
    top: calc(100% + 100px);
    transform: scale(0.966) rotate3d(0.93, 0.55, 0.47, -1136deg);
  }
}
snowfall snowflake:nth-child(45) {
  animation: animation-snowflake-45 linear infinite;
  animation-duration: 12.8s;
  animation-delay: -1.3s;
}

@keyframes animation-snowflake-45 {
  0% {
    left: 91%;
    top: calc(0% - 100px);
    transform: scale(0.75) rotate3d(0.32, 0.58, 0.4, 0deg);
  }
  100% {
    left: 121.3%;
    top: calc(100% + 100px);
    transform: scale(0.75) rotate3d(0.46, 0.85, 0.5, 1186deg);
  }
}
snowfall snowflake:nth-child(44) {
  animation: animation-snowflake-44 linear infinite;
  animation-duration: 10.3s;
  animation-delay: -11.2s;
}

@keyframes animation-snowflake-44 {
  0% {
    left: 31%;
    top: calc(0% - 100px);
    transform: scale(0.924) rotate3d(0.83, 0.4, 0.17, 0deg);
  }
  100% {
    left: 19.3%;
    top: calc(100% + 100px);
    transform: scale(0.924) rotate3d(0.87, 0.09, 0.64, -1433deg);
  }
}
snowfall snowflake:nth-child(43) {
  animation: animation-snowflake-43 linear infinite;
  animation-duration: 12.2s;
  animation-delay: -0.9s;
}

@keyframes animation-snowflake-43 {
  0% {
    left: 18%;
    top: calc(0% - 100px);
    transform: scale(1.188) rotate3d(0.47, 0.21, 0.3, 0deg);
  }
  100% {
    left: 56%;
    top: calc(100% + 100px);
    transform: scale(1.188) rotate3d(0.4, 0.1, 0.85, -1135deg);
  }
}
snowfall snowflake:nth-child(42) {
  animation: animation-snowflake-42 linear infinite;
  animation-duration: 10s;
  animation-delay: -8.6s;
}

@keyframes animation-snowflake-42 {
  0% {
    left: 85%;
    top: calc(0% - 100px);
    transform: scale(1.076) rotate3d(0.45, 0.95, 0.27, 0deg);
  }
  100% {
    left: 104.2%;
    top: calc(100% + 100px);
    transform: scale(1.076) rotate3d(0.22, 0.16, 0.03, -962deg);
  }
}
snowfall snowflake:nth-child(41) {
  animation: animation-snowflake-41 linear infinite;
  animation-duration: 15s;
  animation-delay: -12.7s;
}

@keyframes animation-snowflake-41 {
  0% {
    left: 2%;
    top: calc(0% - 100px);
    transform: scale(1.012) rotate3d(0.46, 0.7, 0.91, 0deg);
  }
  100% {
    left: 30.9%;
    top: calc(100% + 100px);
    transform: scale(1.012) rotate3d(0.57, 0.64, 0.79, -1307deg);
  }
}
snowfall snowflake:nth-child(40) {
  animation: animation-snowflake-40 linear infinite;
  animation-duration: 12.7s;
  animation-delay: -0.7s;
}

@keyframes animation-snowflake-40 {
  0% {
    left: 10%;
    top: calc(0% - 100px);
    transform: scale(0.909) rotate3d(0.16, 0.96, 0.8, 0deg);
  }
  100% {
    left: 26.4%;
    top: calc(100% + 100px);
    transform: scale(0.909) rotate3d(0.61, 0.37, 0.7, -1287deg);
  }
}
snowfall snowflake:nth-child(39) {
  animation: animation-snowflake-39 linear infinite;
  animation-duration: 8.5s;
  animation-delay: -4.2s;
}

@keyframes animation-snowflake-39 {
  0% {
    left: 69%;
    top: calc(0% - 100px);
    transform: scale(0.844) rotate3d(0.5, 0.02, 0.53, 0deg);
  }
  100% {
    left: 72.6%;
    top: calc(100% + 100px);
    transform: scale(0.844) rotate3d(0.95, 0.48, 0.58, 1399deg);
  }
}
snowfall snowflake:nth-child(38) {
  animation: animation-snowflake-38 linear infinite;
  animation-duration: 13.7s;
  animation-delay: -14.3s;
}

@keyframes animation-snowflake-38 {
  0% {
    left: 88%;
    top: calc(0% - 100px);
    transform: scale(1.174) rotate3d(0.56, 0.69, 0.14, 0deg);
  }
  100% {
    left: 94.9%;
    top: calc(100% + 100px);
    transform: scale(1.174) rotate3d(0.62, 0.48, 0.02, -818deg);
  }
}
snowfall snowflake:nth-child(37) {
  animation: animation-snowflake-37 linear infinite;
  animation-duration: 12.3s;
  animation-delay: -2.9s;
}

@keyframes animation-snowflake-37 {
  0% {
    left: 67%;
    top: calc(0% - 100px);
    transform: scale(0.868) rotate3d(0.23, 0.9, 0.67, 0deg);
  }
  100% {
    left: 79.6%;
    top: calc(100% + 100px);
    transform: scale(0.868) rotate3d(0.98, 0.13, 0.2, 914deg);
  }
}
snowfall snowflake:nth-child(36) {
  animation: animation-snowflake-36 linear infinite;
  animation-duration: 12.8s;
  animation-delay: -13.8s;
}

@keyframes animation-snowflake-36 {
  0% {
    left: 15%;
    top: calc(0% - 100px);
    transform: scale(1.338) rotate3d(0.14, 0.34, 0.4, 0deg);
  }
  100% {
    left: 45.2%;
    top: calc(100% + 100px);
    transform: scale(1.338) rotate3d(0.74, 0.23, 0.82, 1227deg);
  }
}
snowfall snowflake:nth-child(35) {
  animation: animation-snowflake-35 linear infinite;
  animation-duration: 9.8s;
  animation-delay: -9.1s;
}

@keyframes animation-snowflake-35 {
  0% {
    left: 75%;
    top: calc(0% - 100px);
    transform: scale(1.317) rotate3d(0.7, 0.13, 0.26, 0deg);
  }
  100% {
    left: 57.3%;
    top: calc(100% + 100px);
    transform: scale(1.317) rotate3d(0.06, 0.67, 0.73, -769deg);
  }
}
snowfall snowflake:nth-child(34) {
  animation: animation-snowflake-34 linear infinite;
  animation-duration: 9.5s;
  animation-delay: 0s;
}

@keyframes animation-snowflake-34 {
  0% {
    left: 17%;
    top: calc(0% - 100px);
    transform: scale(0.826) rotate3d(0.07, 0.29, 0.46, 0deg);
  }
  100% {
    left: 36.9%;
    top: calc(100% + 100px);
    transform: scale(0.826) rotate3d(0.43, 0.77, 0.42, 1266deg);
  }
}
snowfall snowflake:nth-child(33) {
  animation: animation-snowflake-33 linear infinite;
  animation-duration: 11.2s;
  animation-delay: -3.5s;
}

@keyframes animation-snowflake-33 {
  0% {
    left: 41%;
    top: calc(0% - 100px);
    transform: scale(1.396) rotate3d(0.97, 0.96, 0.59, 0deg);
  }
  100% {
    left: 56.9%;
    top: calc(100% + 100px);
    transform: scale(1.396) rotate3d(0.43, 0.76, 0.71, 1015deg);
  }
}
snowfall snowflake:nth-child(32) {
  animation: animation-snowflake-32 linear infinite;
  animation-duration: 13.3s;
  animation-delay: -12.9s;
}

@keyframes animation-snowflake-32 {
  0% {
    left: 11%;
    top: calc(0% - 100px);
    transform: scale(1.374) rotate3d(0.06, 0.18, 0.83, 0deg);
  }
  100% {
    left: 49%;
    top: calc(100% + 100px);
    transform: scale(1.374) rotate3d(0.45, 0.08, 0.32, 867deg);
  }
}
snowfall snowflake:nth-child(31) {
  animation: animation-snowflake-31 linear infinite;
  animation-duration: 8.7s;
  animation-delay: -0.3s;
}

@keyframes animation-snowflake-31 {
  0% {
    left: 38%;
    top: calc(0% - 100px);
    transform: scale(0.963) rotate3d(0.84, 0.17, 0.03, 0deg);
  }
  100% {
    left: 61.4%;
    top: calc(100% + 100px);
    transform: scale(0.963) rotate3d(0.59, 0.83, 0.04, 1147deg);
  }
}
snowfall snowflake:nth-child(30) {
  animation: animation-snowflake-30 linear infinite;
  animation-duration: 14.4s;
  animation-delay: -8.3s;
}

@keyframes animation-snowflake-30 {
  0% {
    left: 65%;
    top: calc(0% - 100px);
    transform: scale(1.342) rotate3d(0.54, 1, 0.64, 0deg);
  }
  100% {
    left: 78.6%;
    top: calc(100% + 100px);
    transform: scale(1.342) rotate3d(0.47, 0.08, 0.05, 1255deg);
  }
}
snowfall snowflake:nth-child(29) {
  animation: animation-snowflake-29 linear infinite;
  animation-duration: 15.9s;
  animation-delay: -9.3s;
}

@keyframes animation-snowflake-29 {
  0% {
    left: 38%;
    top: calc(0% - 100px);
    transform: scale(0.993) rotate3d(0.5, 0.35, 0.95, 0deg);
  }
  100% {
    left: 35.3%;
    top: calc(100% + 100px);
    transform: scale(0.993) rotate3d(0.03, 0.55, 0.94, 794deg);
  }
}
snowfall snowflake:nth-child(28) {
  animation: animation-snowflake-28 linear infinite;
  animation-duration: 9.1s;
  animation-delay: -5s;
}

@keyframes animation-snowflake-28 {
  0% {
    left: 33%;
    top: calc(0% - 100px);
    transform: scale(1.087) rotate3d(0.48, 0.08, 0.38, 0deg);
  }
  100% {
    left: 38.6%;
    top: calc(100% + 100px);
    transform: scale(1.087) rotate3d(0.25, 0.57, 0.3, -1231deg);
  }
}
snowfall snowflake:nth-child(27) {
  animation: animation-snowflake-27 linear infinite;
  animation-duration: 11.5s;
  animation-delay: -6.4s;
}

@keyframes animation-snowflake-27 {
  0% {
    left: 67%;
    top: calc(0% - 100px);
    transform: scale(0.639) rotate3d(0.04, 0.03, 0.97, 0deg);
  }
  100% {
    left: 48.1%;
    top: calc(100% + 100px);
    transform: scale(0.639) rotate3d(0.89, 0.09, 0.77, -1190deg);
  }
}
snowfall snowflake:nth-child(26) {
  animation: animation-snowflake-26 linear infinite;
  animation-duration: 10.2s;
  animation-delay: -1.5s;
}

@keyframes animation-snowflake-26 {
  0% {
    left: 91%;
    top: calc(0% - 100px);
    transform: scale(0.991) rotate3d(0.06, 0.86, 0.46, 0deg);
  }
  100% {
    left: 87.4%;
    top: calc(100% + 100px);
    transform: scale(0.991) rotate3d(1, 0.33, 0.65, 1054deg);
  }
}
snowfall snowflake:nth-child(25) {
  animation: animation-snowflake-25 linear infinite;
  animation-duration: 9.2s;
  animation-delay: -12.4s;
}

@keyframes animation-snowflake-25 {
  0% {
    left: 64%;
    top: calc(0% - 100px);
    transform: scale(0.865) rotate3d(0.88, 0.55, 0.76, 0deg);
  }
  100% {
    left: 84.7%;
    top: calc(100% + 100px);
    transform: scale(0.865) rotate3d(0.59, 0.95, 0.72, -1221deg);
  }
}
snowfall snowflake:nth-child(24) {
  animation: animation-snowflake-24 linear infinite;
  animation-duration: 14.7s;
  animation-delay: -15.7s;
}

@keyframes animation-snowflake-24 {
  0% {
    left: 14%;
    top: calc(0% - 100px);
    transform: scale(1.08) rotate3d(0.98, 0.02, 0.68, 0deg);
  }
  100% {
    left: 4.2%;
    top: calc(100% + 100px);
    transform: scale(1.08) rotate3d(1, 0.82, 0.15, 817deg);
  }
}
snowfall snowflake:nth-child(23) {
  animation: animation-snowflake-23 linear infinite;
  animation-duration: 12.7s;
  animation-delay: -8.3s;
}

@keyframes animation-snowflake-23 {
  0% {
    left: 87%;
    top: calc(0% - 100px);
    transform: scale(1.294) rotate3d(0.03, 0.28, 0.7, 0deg);
  }
  100% {
    left: 125.6%;
    top: calc(100% + 100px);
    transform: scale(1.294) rotate3d(0.54, 0.22, 0.37, -1251deg);
  }
}
snowfall snowflake:nth-child(22) {
  animation: animation-snowflake-22 linear infinite;
  animation-duration: 11.5s;
  animation-delay: -8.7s;
}

@keyframes animation-snowflake-22 {
  0% {
    left: 95%;
    top: calc(0% - 100px);
    transform: scale(0.812) rotate3d(0.2, 0.82, 0.42, 0deg);
  }
  100% {
    left: 126.9%;
    top: calc(100% + 100px);
    transform: scale(0.812) rotate3d(0.04, 0.08, 0.38, 1402deg);
  }
}
snowfall snowflake:nth-child(21) {
  animation: animation-snowflake-21 linear infinite;
  animation-duration: 14.8s;
  animation-delay: -11.1s;
}

@keyframes animation-snowflake-21 {
  0% {
    left: 62%;
    top: calc(0% - 100px);
    transform: scale(1.343) rotate3d(0.69, 0.25, 0.69, 0deg);
  }
  100% {
    left: 63%;
    top: calc(100% + 100px);
    transform: scale(1.343) rotate3d(0.81, 0.28, 0.41, 728deg);
  }
}
snowfall snowflake:nth-child(20) {
  animation: animation-snowflake-20 linear infinite;
  animation-duration: 15.1s;
  animation-delay: -3.4s;
}

@keyframes animation-snowflake-20 {
  0% {
    left: 28%;
    top: calc(0% - 100px);
    transform: scale(1.319) rotate3d(0.66, 0.65, 0.05, 0deg);
  }
  100% {
    left: 15.7%;
    top: calc(100% + 100px);
    transform: scale(1.319) rotate3d(0.54, 0.08, 0.94, 1080deg);
  }
}
snowfall snowflake:nth-child(19) {
  animation: animation-snowflake-19 linear infinite;
  animation-duration: 8.4s;
  animation-delay: -0.5s;
}

@keyframes animation-snowflake-19 {
  0% {
    left: 54%;
    top: calc(0% - 100px);
    transform: scale(1.263) rotate3d(0.79, 0.71, 0.89, 0deg);
  }
  100% {
    left: 83.8%;
    top: calc(100% + 100px);
    transform: scale(1.263) rotate3d(0.71, 0.85, 0.1, 1155deg);
  }
}
snowfall snowflake:nth-child(18) {
  animation: animation-snowflake-18 linear infinite;
  animation-duration: 8.4s;
  animation-delay: -5.9s;
}

@keyframes animation-snowflake-18 {
  0% {
    left: 70%;
    top: calc(0% - 100px);
    transform: scale(0.684) rotate3d(0.42, 0.32, 0.34, 0deg);
  }
  100% {
    left: 94.2%;
    top: calc(100% + 100px);
    transform: scale(0.684) rotate3d(0.25, 0.17, 0.72, 1050deg);
  }
}
snowfall snowflake:nth-child(17) {
  animation: animation-snowflake-17 linear infinite;
  animation-duration: 11.7s;
  animation-delay: -0.2s;
}

@keyframes animation-snowflake-17 {
  0% {
    left: 17%;
    top: calc(0% - 100px);
    transform: scale(0.893) rotate3d(0.11, 0.45, 0.48, 0deg);
  }
  100% {
    left: 53.9%;
    top: calc(100% + 100px);
    transform: scale(0.893) rotate3d(0.37, 0.97, 0.39, -1406deg);
  }
}
snowfall snowflake:nth-child(16) {
  animation: animation-snowflake-16 linear infinite;
  animation-duration: 9.5s;
  animation-delay: -14.9s;
}

@keyframes animation-snowflake-16 {
  0% {
    left: 59%;
    top: calc(0% - 100px);
    transform: scale(0.682) rotate3d(0.15, 0.6, 0.03, 0deg);
  }
  100% {
    left: 75.4%;
    top: calc(100% + 100px);
    transform: scale(0.682) rotate3d(0.57, 0.09, 0.93, -1440deg);
  }
}
snowfall snowflake:nth-child(15) {
  animation: animation-snowflake-15 linear infinite;
  animation-duration: 14.8s;
  animation-delay: -13.2s;
}

@keyframes animation-snowflake-15 {
  0% {
    left: 21%;
    top: calc(0% - 100px);
    transform: scale(1.391) rotate3d(0.83, 0.33, 0.52, 0deg);
  }
  100% {
    left: 49.5%;
    top: calc(100% + 100px);
    transform: scale(1.391) rotate3d(0.47, 0.36, 0.57, -965deg);
  }
}
snowfall snowflake:nth-child(14) {
  animation: animation-snowflake-14 linear infinite;
  animation-duration: 12.8s;
  animation-delay: -0.4s;
}

@keyframes animation-snowflake-14 {
  0% {
    left: 84%;
    top: calc(0% - 100px);
    transform: scale(0.89) rotate3d(0.42, 0.82, 0.88, 0deg);
  }
  100% {
    left: 78.4%;
    top: calc(100% + 100px);
    transform: scale(0.89) rotate3d(0.44, 0.5, 0.77, -955deg);
  }
}
snowfall snowflake:nth-child(13) {
  animation: animation-snowflake-13 linear infinite;
  animation-duration: 12.8s;
  animation-delay: -7.5s;
}

@keyframes animation-snowflake-13 {
  0% {
    left: 91%;
    top: calc(0% - 100px);
    transform: scale(0.964) rotate3d(0.16, 0.06, 0.26, 0deg);
  }
  100% {
    left: 105.8%;
    top: calc(100% + 100px);
    transform: scale(0.964) rotate3d(0.9, 0.56, 0.03, 907deg);
  }
}
snowfall snowflake:nth-child(12) {
  animation: animation-snowflake-12 linear infinite;
  animation-duration: 12.4s;
  animation-delay: -4.5s;
}

@keyframes animation-snowflake-12 {
  0% {
    left: 98%;
    top: calc(0% - 100px);
    transform: scale(0.862) rotate3d(0.44, 0.69, 0.02, 0deg);
  }
  100% {
    left: 137.3%;
    top: calc(100% + 100px);
    transform: scale(0.862) rotate3d(0.65, 0.86, 0.88, 1401deg);
  }
}
snowfall snowflake:nth-child(11) {
  animation: animation-snowflake-11 linear infinite;
  animation-duration: 10.4s;
  animation-delay: -11.3s;
}

@keyframes animation-snowflake-11 {
  0% {
    left: 69%;
    top: calc(0% - 100px);
    transform: scale(0.754) rotate3d(0.72, 0.6, 0.66, 0deg);
  }
  100% {
    left: 72.8%;
    top: calc(100% + 100px);
    transform: scale(0.754) rotate3d(0.29, 0.71, 0.7, 1170deg);
  }
}
snowfall snowflake:nth-child(10) {
  animation: animation-snowflake-10 linear infinite;
  animation-duration: 12.2s;
  animation-delay: -9.6s;
}

@keyframes animation-snowflake-10 {
  0% {
    left: 26%;
    top: calc(0% - 100px);
    transform: scale(0.961) rotate3d(0.52, 0.35, 0.1, 0deg);
  }
  100% {
    left: 34%;
    top: calc(100% + 100px);
    transform: scale(0.961) rotate3d(0.38, 0.31, 0.74, -1256deg);
  }
}
snowfall snowflake:nth-child(9) {
  animation: animation-snowflake-9 linear infinite;
  animation-duration: 8.4s;
  animation-delay: -3.3s;
}

@keyframes animation-snowflake-9 {
  0% {
    left: 95%;
    top: calc(0% - 100px);
    transform: scale(1.186) rotate3d(0.88, 1, 0.08, 0deg);
  }
  100% {
    left: 90.8%;
    top: calc(100% + 100px);
    transform: scale(1.186) rotate3d(0.23, 0.3, 0.6, -1070deg);
  }
}
snowfall snowflake:nth-child(8) {
  animation: animation-snowflake-8 linear infinite;
  animation-duration: 8.6s;
  animation-delay: -12.8s;
}

@keyframes animation-snowflake-8 {
  0% {
    left: 13%;
    top: calc(0% - 100px);
    transform: scale(0.705) rotate3d(0.58, 0.53, 0.96, 0deg);
  }
  100% {
    left: 24.8%;
    top: calc(100% + 100px);
    transform: scale(0.705) rotate3d(0.21, 0.73, 0.93, 789deg);
  }
}
snowfall snowflake:nth-child(7) {
  animation: animation-snowflake-7 linear infinite;
  animation-duration: 9.5s;
  animation-delay: -9.8s;
}

@keyframes animation-snowflake-7 {
  0% {
    left: 69%;
    top: calc(0% - 100px);
    transform: scale(0.794) rotate3d(0.81, 0.26, 0.76, 0deg);
  }
  100% {
    left: 51%;
    top: calc(100% + 100px);
    transform: scale(0.794) rotate3d(0.12, 0.43, 0.01, 1180deg);
  }
}
snowfall snowflake:nth-child(6) {
  animation: animation-snowflake-6 linear infinite;
  animation-duration: 11.4s;
  animation-delay: -15.2s;
}

@keyframes animation-snowflake-6 {
  0% {
    left: 66%;
    top: calc(0% - 100px);
    transform: scale(0.691) rotate3d(0.3, 0.98, 0.8, 0deg);
  }
  100% {
    left: 74.4%;
    top: calc(100% + 100px);
    transform: scale(0.691) rotate3d(0.9, 0.82, 0.3, 849deg);
  }
}
snowfall snowflake:nth-child(5) {
  animation: animation-snowflake-5 linear infinite;
  animation-duration: 10.9s;
  animation-delay: -1.7s;
}

@keyframes animation-snowflake-5 {
  0% {
    left: 54%;
    top: calc(0% - 100px);
    transform: scale(1.102) rotate3d(0.62, 0.41, 0.21, 0deg);
  }
  100% {
    left: 70.9%;
    top: calc(100% + 100px);
    transform: scale(1.102) rotate3d(0.75, 0.73, 0.26, 1076deg);
  }
}
snowfall snowflake:nth-child(4) {
  animation: animation-snowflake-4 linear infinite;
  animation-duration: 8.7s;
  animation-delay: -0.7s;
}

@keyframes animation-snowflake-4 {
  0% {
    left: 20%;
    top: calc(0% - 100px);
    transform: scale(0.959) rotate3d(0.65, 0.85, 0.72, 0deg);
  }
  100% {
    left: 23.5%;
    top: calc(100% + 100px);
    transform: scale(0.959) rotate3d(0.01, 0.5, 0.93, -835deg);
  }
}
snowfall snowflake:nth-child(3) {
  animation: animation-snowflake-3 linear infinite;
  animation-duration: 15.1s;
  animation-delay: -15.3s;
}

@keyframes animation-snowflake-3 {
  0% {
    left: 96%;
    top: calc(0% - 100px);
    transform: scale(1.093) rotate3d(0.35, 0.47, 0.96, 0deg);
  }
  100% {
    left: 77.8%;
    top: calc(100% + 100px);
    transform: scale(1.093) rotate3d(0.04, 0.19, 0.11, 1271deg);
  }
}
snowfall snowflake:nth-child(2) {
  animation: animation-snowflake-2 linear infinite;
  animation-duration: 14.5s;
  animation-delay: -2.6s;
}

@keyframes animation-snowflake-2 {
  0% {
    left: 32%;
    top: calc(0% - 100px);
    transform: scale(1.28) rotate3d(0.32, 0.03, 0.89, 0deg);
  }
  100% {
    left: 14.5%;
    top: calc(100% + 100px);
    transform: scale(1.28) rotate3d(0.57, 0.96, 0.27, 1434deg);
  }
}
snowfall snowflake:nth-child(1) {
  animation: animation-snowflake-1 linear infinite;
  animation-duration: 8.4s;
  animation-delay: -13.2s;
}

@keyframes animation-snowflake-1 {
  0% {
    left: 21%;
    top: calc(0% - 100px);
    transform: scale(0.844) rotate3d(0.13, 0.68, 0.38, 0deg);
  }
  100% {
    left: 26.9%;
    top: calc(100% + 100px);
    transform: scale(0.844) rotate3d(0.32, 0.55, 0.41, 1305deg);
  }
}
.containerArrow {
  display: flex;
}
.containerArrow .arrow {
  padding: 10px;
  animation: bounceArrow 0.6s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
.containerArrow .arrow .arrow-head {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid var(--textPrimaryColor);
}
.containerArrow .arrow .down-arrow-head {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--textPrimaryColor);
}
.containerArrow .arrow .arrow-body {
  height: 10px;
  width: 2px;
  background-color: var(--textPrimaryColor);
  margin-left: 3px;
}

.scrolldown-container {
  position: relative;
}
.scrolldown-container .scrolldown-btn {
  width: 50px;
  height: 100px;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
}
.scrolldown-container .scrolldown-btn svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.scrolldown-container .scrolldown-btn svg path {
  fill: var(--textPrimaryColor);
}
.scrolldown-container .scrolldown-btn svg path.first-path {
  animation: scrollanimArrow 1s ease-in-out infinite;
  animation-delay: 0.8s;
}
.scrolldown-container .scrolldown-btn svg path.second-path {
  animation: scrollanimArrow2 1s ease-in-out infinite;
}
.scrolldown-container .scrolldown-btn.single {
  height: 50px;
  -webkit-transform: translateX(-50%) translateY(0%);
  -moz-transform: translateX(-50%) translateY(0%);
  -ms-transform: translateX(-50%) translateY(0%);
  -o-transform: translateX(-50%) translateY(0%);
  transform: translateX(-50%) translateY(0%);
}
.scrolldown-container .scrolldown-btn.h20 {
  height: 20px;
  -webkit-transform: translateX(-50%) translateY(200%);
  -moz-transform: translateX(-50%) translateY(200%);
  -ms-transform: translateX(-50%) translateY(200%);
  -o-transform: translateX(-50%) translateY(200%);
  transform: translateX(-50%) translateY(200%);
}
.scrolldown-container .scrolldown-btn.dynamic {
  bottom: 20px;
}
.scrolldown-container .scrolldown-btn i {
  animation: scrollanimArrow2 1s ease-in-out infinite;
  font-size: 1.25rem;
}

.scrolldown-container-font {
  position: relative;
}
.scrolldown-container-font .scrolldown-btn {
  position: absolute;
  left: calc(50% - 10px);
  -webkit-transform: translateY(-16px);
  -moz-transform: translateY(-16px);
  -ms-transform: translateY(-16px);
  -o-transform: translateY(-16px);
  transform: translateY(-16px);
  cursor: pointer;
}
.scrolldown-container-font .scrolldown-btn i {
  animation: scrollanimArrow2 1s ease-in-out;
  font-size: 1.25rem;
  animation-iteration-count: 4;
}

@-webkit-keyframes scrollanimArrow {
  0% {
    -webkit-transform: translate(0, -40px);
    opacity: 0;
  }
  60% {
    -webkit-transform: translate(0, 0);
    opacity: 0.8;
  }
}
@-moz-keyframes scrollanimArrow {
  0% {
    -moz-transform: translate(0, -40px);
    opacity: 0;
  }
  60% {
    -moz-transform: translate(0, 0);
    opacity: 0.8;
  }
}
@keyframes scrollanimArrow {
  0% {
    -webkit-transform: translate(0, -40px);
    -moz-transform: translate(0, -40px);
    -ms-transform: translate(0, -40px);
    -o-transform: translate(0, -40px);
    transform: translate(0, -40px);
    opacity: 0;
  }
  60% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 0.8;
  }
}
@-webkit-keyframes scrollanimArrow2 {
  0% {
    -webkit-transform: translate(0, -40px);
    opacity: 0;
  }
  60% {
    -webkit-transform: translate(0, 0px);
    opacity: 0.6;
  }
}
@-moz-keyframes scrollanimArrow2 {
  0% {
    -moz-transform: translate(0, -40px);
    opacity: 0;
  }
  60% {
    -moz-transform: translate(0, 0px);
    opacity: 0.6;
  }
}
@keyframes scrollanimArrow2 {
  0% {
    -webkit-transform: translate(0, -40px);
    -moz-transform: translate(0, -40px);
    -ms-transform: translate(0, -40px);
    -o-transform: translate(0, -40px);
    transform: translate(0, -40px);
    opacity: 0;
  }
  60% {
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
    transform: translate(0, 0px);
    opacity: 0.6;
  }
}
@keyframes bounceArrow {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 10px, 0);
  }
}
.fullscreen {
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  width: calc(100% - 80px);
  height: calc(100% - 80px);
  position: fixed;
  top: 75px;
  left: 70px;
  max-width: initial;
  min-width: initial;
  animation-name: animate-fullscreen;
  -webkit-animation-name: animate-fullscreen;
  animation-duration: 2s;
}

@keyframes animate-fullscreen {
  from {
    width: 0px;
    height: 0px;
  }
  to {
    width: calc(100% - 80px);
    height: calc(100% - 80px);
  }
}
@keyframes iconPulseAnimation {
  0% {
    transform: scale3d(1, 1, 1);
    opacity: 0.99;
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
    opacity: 0.66;
  }
  100% {
    transform: scale3d(1, 1, 1);
    opacity: 0.99;
  }
}
.icon-pulse {
  animation: iconPulseAnimation 1s ease-in-out infinite;
}
.icon-pulse:link, .icon-pulse:visited {
  transition: all ease-in-out;
}
.icon-pulse.enableHover:hover, .icon-pulse.enableHover:active {
  animation: iconPulseAnimation 1s ease-in-out infinite;
}

.markerPulse {
  z-index: 1;
}
.markerPulse .pin {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  background: var(--buttonColor);
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -20px 0 0 -20px;
  animation-name: markerPulse_bounce;
  animation-fill-mode: both;
  animation-duration: 1s;
}
.markerPulse .pin:after {
  content: "";
  width: 14px;
  height: 14px;
  margin: 8px 0 0 8px;
  background: var(--hoverButtonColor);
  position: absolute;
  border-radius: 50%;
}
.markerPulse .pulse {
  background: var(--hoverButtonColor);
  border-radius: 50%;
  height: 14px;
  width: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 11px 0px 0px -12px;
  transform: rotateX(55deg);
  z-index: -2;
}
.markerPulse .pulse:after {
  content: "";
  border-radius: 50%;
  height: 40px;
  width: 40px;
  position: absolute;
  margin: -13px 0 0 -13px;
  animation: markerPulse_pulsate 1s ease-out;
  animation-iteration-count: infinite;
  opacity: 0;
  box-shadow: 0 0 1px 2px var(--hoverButtonColor);
  animation-delay: 1.1s;
}

@keyframes markerPulse_pulsate {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
@keyframes markerPulse_bounce {
  0% {
    opacity: 0;
    transform: translateY(-2000px) rotate(-45deg);
  }
  60% {
    opacity: 1;
    transform: translateY(30px) rotate(-45deg);
  }
  80% {
    transform: translateY(-10px) rotate(-45deg);
  }
  100% {
    transform: translateY(0) rotate(-45deg);
  }
}
@keyframes animationMarker_draw {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -100;
  }
}
@keyframes animationMarker_drop {
  0% {
    transform: translateY(-300%) scale(0.3, 1.8);
    animation-timing-function: cubic-bezier(1, 0, 1, 1);
  }
  70% {
    transform: translateY(0%) scale(1, 1.2);
    animation-timing-function: ease;
  }
  80% {
    transform: translateY(0%) scaleY(0.8);
  }
  100% {
    transform: translateY(0%) scaleY(1);
  }
}
#animation-marker-wrapper {
  margin: 0 auto;
  width: 200px;
  overflow: hidden;
}
#animation-marker-wrapper #animation-marker {
  position: relative;
  width: 200px;
  height: 174px;
}
#animation-marker-wrapper #MarkerPathStroke {
  stroke: var(--hoverButtonColor);
  stroke-width: 3;
  stroke-dasharray: 2.5, 7, 3, 7;
}
#animation-marker-wrapper #MarkerPathStrokeOverlay {
  stroke: var(--buttonColor);
  stroke-width: 4;
}
#animation-marker-wrapper #MarkerPathStroke,
#animation-marker-wrapper #MarkerPathStrokeOverlay {
  fill: none;
  fill-rule: nonzero;
  stroke-linecap: square;
}
#animation-marker-wrapper #BigMarkerBorder,
#animation-marker-wrapper #SmallMarkerBorder {
  fill: var(--hoverButtonColor);
}
#animation-marker-wrapper #Shape,
#animation-marker-wrapper #ShapeSmall {
  fill: var(--buttonColor);
  transform: translate(-2px, -3px);
}
#animation-marker-wrapper #BigMarker,
#animation-marker-wrapper #SmallMarker {
  position: absolute;
  width: auto;
  transform: translateY(-300%) scale(0.3, 1.8);
  animation-duration: 1s;
  transform-origin: bottom center;
  animation-name: animationMarker_drop;
  animation-fill-mode: forwards;
}
#animation-marker-wrapper #BigMarker {
  height: 84%;
  left: 0;
  bottom: 0.1%;
}
#animation-marker-wrapper #SmallMarker {
  height: 56%;
  left: 59%;
  bottom: 31%;
  animation-delay: 1.8s;
}
#animation-marker-wrapper #MarkerPath,
#animation-marker-wrapper #MarkerPathOverlay {
  position: absolute;
  height: 35%;
  width: auto;
  bottom: 0;
  left: 30%;
}
#animation-marker-wrapper #MarkerPathOverlay path {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  animation-duration: 2s;
  animation-name: animationMarker_draw;
  animation-timing-function: linear;
  animation-delay: 0.9s;
  animation-fill-mode: forwards;
}

#svg_404 #planet_1,
#svg_404 #craterBig,
#svg_404 #craterSmall,
#svg_404 #ring,
#svg_404 #ringShadow,
#svg_404 #starsBig_1,
#svg_404 #starsBig_2,
#svg_404 #starsBig_3,
#svg_404 #starsBig_4,
#svg_404 #starsBig_5,
#svg_404 #starsBig_6,
#svg_404 #starsBig_7,
#svg_404 #starsBig_8,
#svg_404 #starsSmall_1,
#svg_404 #starsSmall_2,
#svg_404 #starsSmall_3,
#svg_404 #starsSmall_4,
#svg_404 #starsSmall_5,
#svg_404 #starsSmall_6,
#svg_404 #starsSmall_7,
#svg_404 #starsSmall_8,
#svg_404 #starsSmall_9,
#svg_404 #starsSmall_10,
#svg_404 #starsSmall_11,
#svg_404 #starsSmall_12,
#svg_404 #circlesBig_1,
#svg_404 #circlesBig_2,
#svg_404 #circlesBig_3,
#svg_404 #circlesBig_4,
#svg_404 #circlesBig_5,
#svg_404 #circlesBig_6,
#svg_404 #circlesBig_7,
#svg_404 #circlesBig_8,
#svg_404 #cord,
#svg_404 #body_2,
#svg_404 #legR_2,
#svg_404 #legL_2,
#svg_404 #headStripe,
#svg_404 #glassShine {
  stroke: var(--textPrimaryColor);
}
#svg_404 #circlesSmall_1,
#svg_404 #circlesSmall_2,
#svg_404 #circlesSmall_3,
#svg_404 #circlesSmall_4,
#svg_404 #circlesSmall_5,
#svg_404 #circlesSmall_6,
#svg_404 #circlesSmall_7 {
  fill: var(--textPrimaryColor);
}
#svg_404 #backpack,
#svg_404 #antenna_1,
#svg_404 #antenna_2,
#svg_404 #armR_1,
#svg_404 #armR_2,
#svg_404 #armL_1,
#svg_404 #armL_2,
#svg_404 #body_1,
#svg_404 #legR_1,
#svg_404 #legL_1,
#svg_404 #head_1,
#svg_404 #head_2 {
  fill: var(--hoverButtonColor);
  stroke: var(--hoverTextButtonColor);
}

.singleServiceLineTransfer .infoDataService,
.singleServiceLineTransfer .dataOfflineMulti {
  overflow: hidden;
}
.singleServiceLineTransfer .contentHiddenSingleDetails.legame {
  width: 99%;
}

.detailsTransferCustomScroll,
.quotesTransferCustomScroll {
  overflow: scroll;
  max-height: calc(100vh - 420px) !important;
  border-radius: 20px;
  scrollbar-color: var(--iconMenuHoverSelectedColor) transparent;
  scrollbar-width: thin;
}
.detailsTransferCustomScroll.noHorizontal,
.quotesTransferCustomScroll.noHorizontal {
  overflow-x: hidden;
}

.offlineContainerQuotes.quotesTransferCustomScroll {
  overflow: scroll;
  max-height: calc(100vh - 325px) !important;
  border-radius: 20px;
  scrollbar-color: var(--iconMenuHoverSelectedColor) transparent;
  scrollbar-width: thin;
}
.offlineContainerQuotes.quotesTransferCustomScroll.noHorizontal {
  overflow-x: hidden;
}

.detailsTransferCustomScroll::-webkit-scrollbar-button,
.quotesTransferCustomScroll::-webkit-scrollbar-button {
  display: none !important;
}

.detailsTransferCustomScroll::-webkit-scrollbar-track,
.quotesTransferCustomScroll::-webkit-scrollbar-track {
  display: none !important;
}

.detailsTransferCustomScroll::-webkit-scrollbar-track-piece,
.quotesTransferCustomScroll::-webkit-scrollbar-track-piece {
  display: none !important;
}

.detailsTransferCustomScroll::-webkit-scrollbar-thumb,
.quotesTransferCustomScroll::-webkit-scrollbar-thumb {
  border-radius: 20px;
  border: 3px solid var(--iconMenuHoverSelectedColor);
}

.detailsTransferCustomScroll::-webkit-scrollbar-corner,
.quotesTransferCustomScroll::-webkit-scrollbar-corner {
  display: none !important;
}

.detailsTransferCustomScroll::-webkit-resizer,
.quotesTransferCustomScroll::-webkit-resizer {
  display: none !important;
}

.infoDataService, .infoTrsService, .clickConteggiHover {
  border: 1px solid var(--primaryColor) !important;
}
.infoDataService:hover, .infoTrsService:hover, .clickConteggiHover:hover {
  border: 1px solid var(--iconMenuHoverSelectedColor) !important;
  cursor: pointer;
}

.clickConteggi .contentProgressItem:hover .label {
  color: var(--iconMenuHoverSelectedColor);
}
.clickConteggi .contentProgressItem:hover .progress-bar {
  background-color: var(--iconMenuHoverSelectedColor);
}

.infoDataService .bookingCardCol {
  height: 100%;
  border-left: 2px dashed var(--textPrimaryColor);
  position: absolute;
  left: 50%;
}
.infoDataService .bookingCardCol:before, .infoDataService .bookingCardCol:after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--primaryColor);
  position: relative;
  top: -9px;
  right: 26px;
  z-index: 1;
  border-radius: 50%;
}
.infoDataService .bookingCardCol:after {
  top: calc(100% - 10px);
  right: 46px;
}
@media only screen and (min-width: 1200px) {
  .infoDataService .bookingCard {
    border-right: 2px dashed var(--textPrimaryColor);
  }
  .infoDataService .bookingCard:before, .infoDataService .bookingCard:after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: var(--primaryColor);
    position: absolute;
    top: -18px;
    right: -11px;
    z-index: 1;
    border-radius: 50%;
  }
  .infoDataService .bookingCard:after {
    top: auto;
    bottom: -18px;
  }
}
.infoDataService {
  /*@media only screen and (max-width: 1200px) {
  	border-bottom: 2px dashed var(--textPrimaryColor);

  	&:before,
  	&:after {
  	  content: "";
  	  display: block;
  	  width: 20px;
  	  height: 20px;
  	  background-color: var(--primaryColor);
  	  position: absolute;
  	  top: calc(50% - 10px);
  	  right: 8px;
  	  z-index: 1;
  	  border-radius: 50%
  	}

  	&:after {
  	  left: 8px;
  	}
  }*/
}

.skeleton-box {
  position: relative;
  overflow: hidden;
}
.skeleton-box::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg, var(--hoverButtonColor) 0, var(--hoverButtonColor) 20%, var(--hoverButtonColor) 60%, var(--hoverButtonColor));
  animation: shimmer 2s infinite;
  content: "";
}
@keyframes shimmer {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.2;
  }
  60% {
    opacity: 0.5;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

.errorPolygonAccordion {
  border: 1px solid red;
}

.bootstrap-autocomplete.dropdown-menu.show {
  max-height: 400px;
  overflow: scroll;
}

.ck-editor .ck-toolbar {
  border: 1px var(--inputBorderColor) !important;
}
.ck-editor .ck-toolbar.error {
  border: 1px solid #b24747 !important;
}
.ck-editor .ck-toolbar_grouping {
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
  background-color: transparent !important;
  padding: 5px;
}
.ck-editor .ck-toolbar_grouping .ck-disabled {
  cursor: not-allowed !important;
}
.ck-editor .ck-toolbar_grouping .ck-button {
  color: var(--textPrimaryColor) !important;
}
.ck-editor .ck-toolbar_grouping .ck-button:hover {
  background-color: var(--hoverButtonColor) !important;
  color: var(--hoverTextButtonColor) !important;
}
.ck-editor .ck-toolbar_grouping .ck-button.ck-on {
  background-color: var(--hoverButtonColor) !important;
  color: var(--hoverTextButtonColor) !important;
}
.ck-editor .ck-read-only {
  background-color: transparent !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  color: var(--noEditInputColor) !important;
  cursor: not-allowed !important;
}
.ck-editor .ck-editor__main > .ck-editor__editable {
  background-color: transparent !important;
  outline: none;
  border-color: var(--inputBorderColor);
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  max-height: 250px;
}
.ck-editor .ck-editor__main > .ck-editor__editable.error {
  color: #b24747 !important;
  border: 1px solid #b24747 !important;
}
.ck-editor .ck-sticky-panel__content {
  border: 0 !important;
}

.ck.ck-balloon-panel {
  z-index: 999999 !important;
}

.timeline_area {
  position: relative;
  z-index: 1;
}

.single-timeline-area {
  position: relative;
  z-index: 1;
  padding-left: 180px;
}

@media only screen and (max-width: 575px) {
  .single-timeline-area {
    padding-left: 100px;
  }
}
.single-timeline-area .timeline-date {
  position: absolute;
  width: 180px;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding-right: 60px;
}

@media only screen and (max-width: 575px) {
  .single-timeline-area .timeline-date {
    width: 100px;
  }
}
.single-timeline-area .timeline-date::after {
  position: absolute;
  width: 3px;
  height: 100%;
  content: "";
  background-color: var(--secondaryColor);
  top: 0;
  right: 30px;
  z-index: 1;
}

.single-timeline-area .timeline-date::before {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: var(--buttonColor);
  content: "";
  top: 50%;
  right: 26px;
  z-index: 5;
  margin-top: -5.5px;
}

.single-timeline-area .timeline-date p {
  margin-bottom: 0;
  color: var(--textPrimaryColor);
  font-size: 0.8125rem;
  text-transform: uppercase;
  font-weight: 500;
}

.single-timeline-area .single-timeline-content {
  position: relative;
  z-index: 1;
  padding: 30px 30px 25px;
  border-radius: 6px;
  margin-bottom: 15px;
  margin-top: 15px;
  border: 1px solid var(--secondaryColor);
  min-height: 105px;
}

@media only screen and (max-width: 575px) {
  .single-timeline-area .single-timeline-content {
    padding: 20px;
  }
}
.single-timeline-area .single-timeline-content .timeline-icon {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  width: 30px;
  height: 30px;
  background-color: var(--buttonColor);
  -webkit-box-flex: 0;
  -ms-flex: 0 0 30px;
  flex: 0 0 30px;
  text-align: center;
  max-width: 30px;
  border-radius: 50%;
  margin-right: 15px;
}

.single-timeline-area .single-timeline-content .timeline-icon i {
  color: var(--textButtonColor);
  line-height: 30px;
}

.single-timeline-area .single-timeline-content .timeline-text h6 {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
}

.single-timeline-area .single-timeline-content .timeline-text p {
  font-size: 0.8125rem;
  margin-bottom: 0;
}

/*.single-timeline-area .single-timeline-content:hover .timeline-icon,
.single-timeline-area .single-timeline-content:focus .timeline-icon {
    background-color: var(--hoverButtonColor);
}

.single-timeline-area .single-timeline-content:hover .timeline-text h6,
.single-timeline-area .single-timeline-content:focus .timeline-text h6 {
    color: var(--iconMenuHoverSelectedColor);
}*/
.progressStepbar {
  counter-reset: step;
}
.progressStepbar.s2 li {
  width: 50%;
}
.progressStepbar.s3 li {
  width: 33%;
}
.progressStepbar.s4 li {
  width: 25%;
}
.progressStepbar.s5 li {
  width: 20%;
}
.progressStepbar.s6 li {
  width: 16.66%;
}
.progressStepbar.s7 li {
  width: 14.28%;
}
.progressStepbar.s8 li {
  width: 12.5%;
}
.progressStepbar.s9 li {
  width: 10.25%;
}
.progressStepbar li {
  list-style-type: none;
  width: 25%;
  float: left;
  font-size: 0.625rem;
  position: relative;
  text-align: center;
  color: var(--textButtonColor);
  z-index: 1;
  cursor: pointer;
}
.progressStepbar li:before {
  width: 30px;
  height: 30px;
  content: counter(step);
  counter-increment: step;
  line-height: 30px;
  border: 2px solid;
  border-color: var(--buttonColor);
  display: block;
  text-align: center;
  margin: 0 auto 1px;
  border-radius: 50%;
  background-color: var(--buttonColor);
  font-weight: bold;
  -webkit-transition: background-color 0.6s ease-out;
  -moz-transition: background-color 0.6s ease-out;
  -o-transition: background-color 0.6s ease-out;
  transition: background-color 0.6s ease-out;
}
.progressStepbar li:after {
  width: 80%;
  height: 2px;
  content: "";
  position: absolute;
  background-color: var(--buttonColor);
  top: 15px;
  left: -39%;
  z-index: -1;
}
.progressStepbar li:first-child:after {
  content: none;
}
.progressStepbar li.active {
  color: var(--hoverTextButtonColor);
}
.progressStepbar li.active:before {
  border-color: var(--hoverButtonColor);
  background-color: var(--hoverButtonColor);
  color: var(--hoverTextButtonColor);
}
.progressStepbar li span {
  font-size: 0.625rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  display: inline-block;
}
.progressStepbar li span.info {
  cursor: pointer;
  color: var(--textSecondaryColor);
}
.progressStepbar li.hiddenElement:first-child + li:after {
  display: none;
}
.progressStepbar li.active + li:after {
  background-color: var(--hoverButtonColor);
  -webkit-transition: background-color 0.6s ease-out;
  -moz-transition: background-color 0.6s ease-out;
  -o-transition: background-color 0.6s ease-out;
  transition: background-color 0.6s ease-out;
}

.buttonShowNotification .pwaMessage {
  padding: 5px;
}
.buttonShowNotification .headerShowNotification {
  background-color: var(--hoverButtonColor);
  color: var(--hoverTextButtonColor);
}
.buttonShowNotification .headerShowNotification a {
  color: var(--hoverTextButtonColor);
}
.buttonShowNotification .containerShowNotification {
  text-align: left;
  list-style: none;
  max-height: 300px;
  overflow-y: scroll;
  margin: 0;
  padding: 0;
  background-color: var(--secondaryColor);
}
.buttonShowNotification .top-text-block {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  background: var(--primaryColor);
  color: var(--textPrimaryColor);
  white-space: inherit !important;
  position: relative;
  width: 300px;
  border-radius: 8px;
}
.buttonShowNotification .top-text-block:hover:before {
  content: "";
  width: 4px;
  background: var(--buttonColor);
  left: 0;
  top: 8px;
  bottom: 8px;
  position: absolute;
}
.buttonShowNotification .top-text-block.unread {
  /*
     .top-text-light{
  	border-bottom-color: var(--primaryColor);
  }*/
}
.buttonShowNotification .top-text-block.unread .top-notify {
  display: block;
}
.buttonShowNotification .top-text-block.unread .top-notify:before {
  color: var(--buttonColor);
}
.buttonShowNotification .top-text-block .top-text-light {
  color: var(--textSecondaryColor);
  font-size: 0.8em;
  border-bottom: 1px solid;
  border-bottom-color: var(--secondaryColor);
}
.buttonShowNotification .top-text-block .top-text-date {
  font-size: 0.625rem;
  text-align: right;
}
.buttonShowNotification .top-text-block .top-notify {
  display: none;
  color: var(--buttonColor);
}
.buttonShowNotification .top-head-dropdown .dropdown-menu {
  width: 350px;
  height: 300px;
  overflow: auto;
}
.buttonShowNotification .top-head-dropdown li:last-child .top-text-block {
  border-bottom: 0;
}
.buttonShowNotification .topbar-align-center {
  text-align: center;
}
.buttonShowNotification .loader-topbar {
  margin: 5px auto;
  border: 3px solid #ddd;
  border-color: var(--secondaryColor);
  border-radius: 50%;
  border-top: 3px solid;
  border-top-color: var(--buttonColor);
  width: 22px;
  height: 22px;
  -webkit-animation: spin-topbar 1s linear infinite;
  animation: spin-topbar 1s linear infinite;
}
.buttonShowNotification .dropdown-divider {
  border-top-color: var(--buttonColor);
}

@-webkit-keyframes spin-topbar {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin-topbar {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*
    Common 
*/
.wizard,
.tabcontrol {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.wizard a,
.tabcontrol a {
  outline: 0;
}

.wizard ul,
.tabcontrol ul {
  list-style: none !important;
  padding: 0;
  margin: 0;
}

.wizard ul > li,
.tabcontrol ul > li {
  display: block;
  padding: 0;
}

/* Accessibility */
.wizard > .steps .current-info,
.tabcontrol > .steps .current-info {
  position: absolute;
  left: -999em;
}

.wizard > .content > .title,
.tabcontrol > .content > .title {
  position: absolute;
  left: -999em;
}

.wizard > .steps > ul > li,
.wizard > .actions > ul > li {
  float: left;
}

/*
    Wizard
*/
.wizardCardContainer1 {
  height: calc(100% - 20px);
}

.wizardCardContainer2 {
  height: calc(100% - 60px);
}

.wizard .steps {
  position: relative;
  display: block;
  width: 100%;
}
.wizard .steps .number {
  font-size: 1.429em;
}
.wizard .steps ul li {
  width: 25%;
}
.wizard .steps a, .wizard .steps a:hover, .wizard .steps a:active {
  display: block;
  width: auto;
  margin: 0 0.5em 0.5em;
  padding: 1em 1em;
  text-decoration: none;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
.wizard .steps .disabled a, .wizard .steps .disabled a:hover, .wizard .steps .disabled a:active {
  background: var(--secondaryColor);
  color: var(--textSecondaryColor);
  cursor: default;
}
.wizard .steps .current a, .wizard .steps .current a:hover, .wizard .steps .current a:active {
  background: var(--info);
  color: var(--light);
  cursor: default;
}
.wizard .steps .done a, .wizard .steps .done a:hover, .wizard .steps .done a:active {
  background: var(--buttonColor);
  color: var(--textButtonColor);
}
.wizard .steps .error a, .wizard .steps .error a:hover, .wizard .steps .error a:active {
  background: var(--red);
  color: var(--light);
}
.wizard .content {
  background: var(--secondaryColor);
  display: block;
  margin-top: 0em !important;
  margin: 0.5em;
  height: calc(100% - 50px);
  overflow: hidden;
  overflow-y: auto;
  position: relative;
  width: auto;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
.wizard .content .body {
  float: left;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 1.5%;
}
.wizard .content .body ul {
  list-style: disc !important;
}
.wizard .content .body ul li {
  display: list-item;
}
.wizard .content .body iframe {
  border: 0 none;
  width: 100%;
  height: 100%;
}
.wizard .content .body label {
  display: inline-block;
}
.wizard .content .body label.error {
  color: var(--danger);
  display: inline-block;
  margin-left: 1.5em;
}
.wizard .content .bd-wizard-step-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--textSecondaryColor);
}
.wizard .content .section-heading {
  font-size: 2.1875rem;
  font-weight: bold;
  color: var(--textPrimaryColor);
  margin-bottom: 17px;
}
.wizard .content .purpose-radio {
  position: relative;
  display: inline-block;
}
.wizard .content .purpose-radio .purpose-radio-input {
  position: absolute;
  opacity: 0;
}
.wizard .content .purpose-radio .purpose-radio-input:checked + .purpose-radio-label {
  border-color: var(--hoverButtonColor);
}
.wizard .content .purpose-radio .purpose-radio-input:checked + .purpose-radio-label .label-icon {
  color: var(--hoverButtonColor);
}
.wizard .content .purpose-radio .purpose-radio-input:checked + .purpose-radio-label .label-icon .label-icon-default {
  display: none;
}
.wizard .content .purpose-radio .purpose-radio-input:checked + .purpose-radio-label .label-icon .label-icon-active {
  display: inline-block;
}
.wizard .content .purpose-radio .purpose-radio-input:checked + .purpose-radio-label .label-text {
  color: var(--textPrimaryColor);
  font-weight: bold;
}
.wizard .content .purpose-radio .purpose-radio-label {
  display: flex;
  width: 196px;
  height: 184px;
  max-width: 100%;
  border: 2px solid;
  border-color: var(--buttonColor);
  border-radius: 20px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
@media (max-width: 575px) {
  .wizard .content .purpose-radio .purpose-radio-label {
    width: 100%;
  }
}
.wizard .content .purpose-radio .purpose-radio-label .label-icon {
  font-size: 1.3125rem;
  color: var(--buttonColor);
  margin-bottom: 17px;
  transition: all 0.2s ease-in-out;
}
.wizard .content .purpose-radio .purpose-radio-label .label-icon .label-icon-active {
  display: none;
}
.wizard .content .purpose-radio .purpose-radio-label .label-text {
  font-size: 1rem;
  color: var(--textPrimaryColor);
  transition: all 0.2s ease-in-out;
}
.wizard .content .purpose-radios-wrapper .purpose-radio {
  margin-right: 18px;
  max-width: calc(33% - 18px);
}
@media (max-width: 575px) {
  .wizard .content .purpose-radios-wrapper .purpose-radio {
    margin-right: 0;
    margin-bottom: 18px;
    width: 100%;
    max-width: none;
  }
}
.wizard .content .purpose-radios-wrapper .purpose-radio:last-child {
  margin-right: 0;
}
.wizard .actions {
  position: relative;
  display: block;
  text-align: right;
  width: 100%;
}
.wizard .actions ul {
  display: inline-block;
  text-align: right;
}
.wizard .actions ul li {
  margin: 0 0.5em;
}
.wizard .actions a, .wizard .actions a:hover, .wizard .actions a:active {
  background: var(--buttonColor);
  color: var(--textButtonColor);
  display: block;
  padding: 0.5em 1em;
  text-decoration: none;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
.wizard .actions a:hover, .wizard .actions a:active {
  background: var(--hoverButtonColor);
  color: var(--hoverTextButtonColor);
}
.wizard .actions .disabled a, .wizard .actions .disabled a:hover, .wizard .actions .disabled a:active {
  background: #eee;
  color: #aaa;
}
.wizard.vertical .steps {
  display: inline;
  float: left;
  width: 200px;
}
.wizard.vertical .steps ul li {
  float: none;
  width: 100%;
}
.wizard.vertical .content {
  display: inline;
  float: left;
  width: calc(100% - 220px);
}
.wizard.vertical .actions {
  display: inline;
  float: right;
  margin: 0 1.5%;
  width: 95%;
}
.wizard.vertical .actions ul li {
  margin: 0 0 0 1em;
}
@media (max-width: 750px) {
  .wizard.vertical .steps {
    float: none;
  }
  .wizard.vertical .steps > ul {
    list-style: none;
    padding-left: 0;
    display: flex;
    justify-content: space-between;
  }
  .wizard.vertical .steps > ul li a {
    display: inline-block;
    width: 95%;
    height: 95%;
  }
}
@media (max-width: 750px) and (max-width: 450px) {
  .wizard.vertical .steps > ul li a {
    font-size: 0.625rem;
  }
}
@media (max-width: 750px) {
  .wizard.vertical .steps > ul li span.number {
    display: inline-block;
  }
  .wizard.vertical .content {
    width: 99%;
    height: calc(100% - 150px);
  }
}
@media (max-width: 750px) and (max-width: 450px) {
  .wizard.vertical .content {
    height: calc(100% - 130px);
  }
}
@media (max-width: 750px) {
  .wizard.vertical .actions {
    width: auto;
  }
  .wizard.vertical .actions > ul {
    list-style: none;
    padding-left: 0;
    display: flex;
  }
  .wizard.vertical .actions li a {
    display: inline-block;
    font-style: 15px;
    font-weight: bold;
  }
  .wizard.vertical .actions li.disabled {
    display: none;
  }
  .wizard.vertical .actions li:not(.disabled) + li, .wizard.vertical .actions li:not(:first-child):last-child {
    margin-left: 15px;
  }
}

#chat-circle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #BF2024;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: white;
  padding: 12px;
  cursor: pointer;
  box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.6), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  z-index: 99999999999;
}

.chatbot {
  display: none;
  position: fixed;
  top: 0;
  bottom: 50px;
  width: 100%;
  box-shadow: 0 -6px 99px -17px rgba(0, 0, 0, 0.68);
  z-index: 99999999999;
}
@media screen and (min-width: 640px) {
  .chatbot {
    max-width: 420px;
    right: 50px;
    top: auto;
  }
}
.chatbot.chatbot--closed {
  top: auto;
  width: 100%;
}

.chatbot__header {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #d20c11;
  height: 54px;
  padding: 0 20px;
  width: 100%;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.chatbot__header:hover {
  background-color: rgb(242.1891891892, 30.8108108108, 36.1486486486);
}
.chatbot__header p {
  margin-right: 20px;
}

.chatbot__close-button {
  fill: #fff;
}
.chatbot__close-button.icon-speech {
  width: 20px;
  display: none;
}
.chatbot--closed .chatbot__close-button.icon-speech {
  display: block;
}
.chatbot__close-button.icon-close {
  width: 14px;
}
.chatbot--closed .chatbot__close-button.icon-close {
  display: none;
}

.chatbot__message-window {
  height: calc(100% - (54px + 60px));
  padding: 40px 20px 20px;
  background-color: #fff;
  overflow-x: none;
  overflow-y: auto;
}
@media screen and (min-width: 640px) {
  .chatbot__message-window {
    height: 380px;
  }
}
.chatbot__message-window::-webkit-scrollbar {
  display: none;
}
.chatbot--closed .chatbot__message-window {
  display: none;
}

.chatbot__messages {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  width: auto;
}
.chatbot__messages li {
  margin-bottom: 20px;
}
.chatbot__messages li.is-ai {
  display: inline-flex;
  align-items: flex-start;
}
.chatbot__messages li.is-user {
  text-align: right;
  display: inline-flex;
  align-self: flex-end;
}
.chatbot__messages li .is-ai__profile-picture {
  margin-right: 8px;
}
.chatbot__messages li .is-ai__profile-picture .icon-avatar {
  width: 40px;
  height: 40px;
  padding-top: 6px;
}
.chatbot__messages li .is-ai__profile-picture .icon-avatar.siap {
  width: 50px;
  height: auto;
}

.chatbot__message {
  display: inline-block;
  padding: 12px 20px;
  word-break: break-word;
  margin: 0;
  border-radius: 6px;
  letter-spacing: -0.01em;
  line-height: 1.45;
  overflow: hidden;
}
.is-ai .chatbot__message {
  background-color: #f0f0f0;
  margin-right: 30px;
}
.is-user .chatbot__message {
  background-color: #d20c11;
  margin-left: 30px;
}
.chatbot__message a {
  color: #d20c11;
  word-break: break-all;
  display: inline-block;
}
.chatbot__message p:first-child {
  margin-top: 0;
}
.chatbot__message p:last-child {
  margin-bottom: 0;
}
.chatbot__message button {
  background-color: #fff;
  font-weight: 300;
  border: 2px solid #d20c11;
  border-radius: 50px;
  padding: 8px 20px;
  margin: -8px 10px 18px 0;
  transition: background-color 0.2s ease;
  cursor: pointer;
}
.chatbot__message button:hover {
  background-color: rgb(242.25, 242.25, 242.25);
}
.chatbot__message button:focus {
  outline: none;
}
.chatbot__message img {
  max-width: 100%;
}

.animation:last-child {
  animation: fadein 0.25s;
  animation-timing-function: all 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.chatbot__arrow {
  width: 0;
  height: 0;
  margin-top: 18px;
}

.chatbot__arrow--right {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #d20c11;
}

.chatbot__arrow--left {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #f0f0f0;
}

.chatbot__entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px;
  border-top: 1px solid #d20c11;
  background-color: #fff;
}
.chatbot--closed .chatbot__entry {
  display: none;
}

.chatbot__input {
  height: 100%;
  width: 80%;
  border: 0;
}
.chatbot__input:focus {
  outline: none;
}
.chatbot__input::-webkit-input-placeholder {
  color: #d20c11;
}
.chatbot__input::-moz-placeholder {
  color: #d20c11;
}
.chatbot__input::-ms-input-placeholder {
  color: #d20c11;
}
.chatbot__input::-moz-placeholder {
  color: #d20c11;
}

.chatbot__submit {
  fill: #d20c11;
  height: 22px;
  width: 22px;
  transition: fill 0.2s ease;
  cursor: pointer;
}
.chatbot__submit:hover {
  fill: rgb(113.5135135135, 6.4864864865, 9.1891891892);
}

.u-text-highlight {
  color: #d20c11;
}

.chatbot {
  display: none;
  position: fixed;
  top: 0;
  bottom: 50px;
  width: 100%;
  box-shadow: 0 -6px 99px -17px rgba(0, 0, 0, 0.68);
}
@media screen and (min-width: 640px) {
  .chatbot {
    max-width: 420px;
    right: 50px;
    top: auto;
  }
}
.chatbot.chatbot--closed {
  top: auto;
  width: 100%;
}

.chatbot__header {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #bf2024;
  height: 54px;
  padding: 0 20px;
  width: 100%;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.chatbot__header:hover {
  background-color: rgb(221.134529148, 52.865470852, 57.0986547085);
}
.chatbot__header p {
  margin-right: 20px;
}

.chatbot__close-button {
  fill: #fff;
}
.chatbot__close-button.icon-speech {
  width: 20px;
  display: none;
}
.chatbot--closed .chatbot__close-button.icon-speech {
  display: block;
}
.chatbot__close-button.icon-close {
  width: 14px;
}
.chatbot--closed .chatbot__close-button.icon-close {
  display: none;
}

.chatbot__message-window {
  height: calc(100% - (54px + 60px));
  padding: 40px 20px 20px;
  background-color: #fff;
  overflow-x: none;
  overflow-y: auto;
}
@media screen and (min-width: 640px) {
  .chatbot__message-window {
    height: 380px;
  }
}
.chatbot__message-window::-webkit-scrollbar {
  display: none;
}
.chatbot--closed .chatbot__message-window {
  display: none;
}

.chatbot__messages {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  width: auto;
}
.chatbot__messages li {
  margin-bottom: 20px;
}
.chatbot__messages li.is-ai {
  display: inline-flex;
  align-items: flex-start;
}
.chatbot__messages li.is-user {
  text-align: right;
  display: inline-flex;
  align-self: flex-end;
}
.chatbot__messages li .is-ai__profile-picture {
  margin-right: 8px;
}
.chatbot__messages li .is-ai__profile-picture .icon-avatar {
  width: 40px;
  height: 40px;
  padding-top: 6px;
}

.chatbot__message {
  display: inline-block;
  padding: 12px 20px;
  word-break: break-word;
  margin: 0;
  border-radius: 6px;
  letter-spacing: -0.01em;
  line-height: 1.45;
  overflow: hidden;
}
.is-ai .chatbot__message {
  background-color: #f0f0f0;
  margin-right: 30px;
}
.is-user .chatbot__message {
  background-color: #fde7e8;
  margin-left: 30px;
  color: #310001;
}
.chatbot__message a {
  color: #bf2024;
  word-break: break-all;
  display: inline-block;
}
.chatbot__message p:first-child {
  margin-top: 0;
}
.chatbot__message p:last-child {
  margin-bottom: 0;
}
.chatbot__message button {
  background-color: #fff;
  font-weight: 300;
  border: 2px solid #bf2024;
  border-radius: 50px;
  padding: 8px 20px;
  margin: -8px 10px 18px 0;
  transition: background-color 0.2s ease;
  cursor: pointer;
}
.chatbot__message button:hover {
  background-color: rgb(242.25, 242.25, 242.25);
}
.chatbot__message button:focus {
  outline: none;
}
.chatbot__message img {
  max-width: 100%;
}

.animation:last-child {
  animation: fadein 0.25s;
  animation-timing-function: all 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.chatbot__arrow {
  width: 0;
  height: 0;
  margin-top: 18px;
}

.chatbot__arrow--right {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #fde7e8;
}

.chatbot__arrow--left {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #f0f0f0;
}

.chatbot__entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px;
  border-top: 1px solid #e6eaee;
  background-color: #fff;
}
.chatbot--closed .chatbot__entry {
  display: none;
}

.chatbot__input {
  height: 100%;
  width: 80%;
  border: 0;
}
.chatbot__input:focus {
  outline: none;
}
.chatbot__input::-webkit-input-placeholder {
  color: #7f7f7f;
}
.chatbot__input::-moz-placeholder {
  color: #7f7f7f;
}
.chatbot__input::-ms-input-placeholder {
  color: #7f7f7f;
}
.chatbot__input::-moz-placeholder {
  color: #7f7f7f;
}

.chatbot__submit {
  fill: #bf2024;
  height: 22px;
  width: 22px;
  transition: fill 0.2s ease;
  cursor: pointer;
}
.chatbot__submit:hover {
  fill: rgb(103.6367713004, 17.3632286996, 19.533632287);
}

.u-text-highlight {
  color: #fde7e8;
}

.loader {
  margin-bottom: -2px;
  text-align: center;
  opacity: 0.3;
}

.loader__dot {
  display: inline-block;
  vertical-align: middle;
  width: 6px;
  height: 6px;
  margin: 0 1px;
  background: black;
  border-radius: 50px;
  animation: loader 0.45s infinite alternate;
}
.loader__dot:nth-of-type(2) {
  animation-delay: 0.15s;
}
.loader__dot:nth-of-type(3) {
  animation-delay: 0.35s;
}

@keyframes loader {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5px);
  }
}
@keyframes fadein {
  from {
    opacity: 0;
    margin-top: 10px;
    margin-bottom: 0;
  }
  to {
    opacity: 1;
    margin-top: 0;
    margin-bottom: 10px;
  }
}
.contentTimeLineBooking .scrtabs-tab-container {
  height: auto;
  width: 100%;
}

.booking-timeline {
  width: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}
.booking-timeline .menu {
  margin: 0;
  padding: 0;
  height: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.booking-timeline .menu .item {
  list-style-type: none;
  padding: 9px;
  box-sizing: border-box;
}
.booking-timeline .menu .item i {
  padding: 3px;
}
.booking-timeline .menu .item .text {
  width: 100px;
  display: inline-block;
}
.booking-timeline .menu .item:first-child {
  border-left: 0px;
}
.booking-timeline .menu .item.addBorder {
  border-left: 4px solid var(--secondaryColor);
}

.fc .fc-button-primary,
.fc .fc-button-primary:disabled {
  color: var(--textButtonColor);
  background-color: var(--buttonColor);
}

.fc .fc-button-primary:hover,
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background-color: var(--hoverButtonColor);
  color: var(--hoverTextButtonColor);
}

.fc .fc-list-sticky .fc-list-day > * {
  background-color: var(--hoverButtonColor);
  color: var(--hoverTextButtonColor);
}

.fc-icon.fa, .fc-icon.far, .fc-icon.fas {
  font: var(--fa-font-solid) !important;
}

.fc .fc-button {
  border-radius: 8px;
}

.calendario_date {
  visibility: hidden;
}

.calendarioWithdate {
  margin-top: -25px;
}

@media (max-width: 767.98px) {
  .fc .fc-toolbar.fc-header-toolbar {
    display: block;
    text-align: center;
  }
  .fc-header-toolbar .fc-toolbar-chunk {
    display: block;
  }
}
body.retro {
  font-family: "Press Start 2P", cursive;
}
body.retro .daterangepicker {
  font-family: "Press Start 2P", cursive !important;
}
body.retro .baseHome {
  font-size: 0.7rem;
}
body.retro .roundedButton {
  font-size: 0.625rem;
}
body.retro .btn {
  font-size: 0.8rem;
}
body.retro .modifiedButton,
body.retro .modifiedButtonSecondary,
body.retro .modifiedButtonIcon,
body.retro .dropdowns-menu,
body.retro .roundedButton,
body.retro .roundedBadge,
body.retro .daterangepicker,
body.retro .daterangepicker .calendar-table th,
body.retro .daterangepicker .calendar-table td {
  border-radius: 0px !important;
}
body.retro .daterangepicker .calendar-table th,
body.retro .daterangepicker .calendar-table td {
  font-size: 0.6875rem;
}
body.retro .badgeDebug::after,
body.retro .roundedButton::after {
  border-radius: 0px;
}
body.retro .card-body-custom:not(.noRadius) {
  border-radius: 0px;
  /*&:before,
     &:after {
     content: '';
         position: absolute;
         width: 100%;
         height: 100%;
         box-sizing: content-box;
     }

     &:before {
         top: -1px;
         left: 0;
         border-top: 1px var(--textPrimaryColor) solid;
         border-bottom: 1px var(--textPrimaryColor) solid;
     }

     &:after {
         left: -1px;
         top: 0;
         border-left: 1px var(--textPrimaryColor) solid;
         border-right: 1px var(--textPrimaryColor) solid;
     }*/
}
body.retro .fontSize10 {
  font-size: 0.375rem;
}
body.retro .fontSize11 {
  font-size: 0.4375rem;
}
body.retro .fontSize12 {
  font-size: 0.5rem;
}
body.retro .fontSize13 {
  font-size: 0.5625rem;
}
body.retro .fontSize14 {
  font-size: 0.625rem;
}
body.retro .fontSize16 {
  font-size: 0.6875rem;
}
body.retro .fontSize18 {
  font-size: 0.875rem;
}
body.retro .fontSize20 {
  font-size: 1rem;
}
body.retro .fontSize22 {
  font-size: 1.125rem;
}
body.retro .fontSize24 {
  font-size: 1.25rem;
}
body.retro .fontSize26 {
  font-size: 1.375rem;
}
body.retro .fontSize28 {
  font-size: 1.5rem;
}
body.retro .fontSize30 {
  font-size: 1.625rem;
}
body.retro .fontSize32 {
  font-size: 1.125rem;
}
body.retro .fontSize35 {
  font-size: 1.9375rem;
}
body.retro .fontSize40 {
  font-size: 2.25rem;
}
body.retro .fontSize50 {
  font-size: 2.875rem;
}

.top-bar-retro .positioner-retro {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.top-bar-retro .container-retro {
  width: 64px;
  height: 64px;
  display: grid;
  grid-template-columns: repeat(16, 4px);
  grid-template-rows: repeat(16, 4px);
  animation: 4s cubic-bezier(0.8, 0.06, 0.65, 0.78) infinite anim--contSpin;
}
.top-bar-retro .particle__inner {
  animation: 16s infinite anim--bgChange;
  width: 4px;
  height: 4px;
  background-color: var(--fr1);
}

@keyframes anim--contSpin {
  35% {
    transform: rotate(0);
  }
  75.5% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/** particle bg change (fade from one image to another) **/
@keyframes anim--bgChange {
  0% {
    background-color: var(--fr1);
  }
  13% {
    background-color: var(--fr1);
  }
  20% {
    background-color: var(--fr2);
  }
  38% {
    background-color: var(--fr2);
  }
  45% {
    background-color: var(--fr3);
  }
  63% {
    background-color: var(--fr3);
  }
  70% {
    background-color: var(--fr4);
  }
  88% {
    background-color: var(--fr4);
  }
  95% {
    background-color: var(--fr1);
  }
}
.particle--0-0 {
  animation: 2s ease-out infinite alternate anim--0-0;
}

@keyframes anim--0-0 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-750%, -750%);
  }
}
.particle--0-1 {
  animation: 2s ease-out infinite alternate anim--0-1;
}

@keyframes anim--0-1 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-650%, -750%);
  }
}
.particle--0-2 {
  animation: 2s ease-out infinite alternate anim--0-2;
}

@keyframes anim--0-2 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-550%, -750%);
  }
}
.particle--0-3 {
  animation: 2s ease-out infinite alternate anim--0-3;
}

@keyframes anim--0-3 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-450%, -750%);
  }
}
.particle--0-4 {
  animation: 2s ease-out infinite alternate anim--0-4;
}

@keyframes anim--0-4 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-350%, -750%);
  }
}
.particle--0-5 {
  animation: 2s ease-out infinite alternate anim--0-5;
}

@keyframes anim--0-5 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-250%, -750%);
  }
}
.particle--0-6 {
  animation: 2s ease-out infinite alternate anim--0-6;
}

@keyframes anim--0-6 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-150%, -750%);
  }
}
.particle--0-7 {
  animation: 2s ease-out infinite alternate anim--0-7;
}

@keyframes anim--0-7 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, -750%);
  }
}
.particle--0-8 {
  animation: 2s ease-out infinite alternate anim--0-8;
}

@keyframes anim--0-8 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50%, -750%);
  }
}
.particle--0-9 {
  animation: 2s ease-out infinite alternate anim--0-9;
}

@keyframes anim--0-9 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(150%, -750%);
  }
}
.particle--0-10 {
  animation: 2s ease-out infinite alternate anim--0-10;
}

@keyframes anim--0-10 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(250%, -750%);
  }
}
.particle--0-11 {
  animation: 2s ease-out infinite alternate anim--0-11;
}

@keyframes anim--0-11 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(350%, -750%);
  }
}
.particle--0-12 {
  animation: 2s ease-out infinite alternate anim--0-12;
}

@keyframes anim--0-12 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(450%, -750%);
  }
}
.particle--0-13 {
  animation: 2s ease-out infinite alternate anim--0-13;
}

@keyframes anim--0-13 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(550%, -750%);
  }
}
.particle--0-14 {
  animation: 2s ease-out infinite alternate anim--0-14;
}

@keyframes anim--0-14 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(650%, -750%);
  }
}
.particle--0-15 {
  animation: 2s ease-out infinite alternate anim--0-15;
}

@keyframes anim--0-15 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(750%, -750%);
  }
}
.particle--0-16 {
  animation: 2s ease-out infinite alternate anim--0-16;
}

@keyframes anim--0-16 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(850%, -750%);
  }
}
.particle--1-0 {
  animation: 2s ease-out infinite alternate anim--1-0;
}

@keyframes anim--1-0 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-750%, -650%);
  }
}
.particle--1-1 {
  animation: 2s ease-out infinite alternate anim--1-1;
}

@keyframes anim--1-1 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-650%, -650%);
  }
}
.particle--1-2 {
  animation: 2s ease-out infinite alternate anim--1-2;
}

@keyframes anim--1-2 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-550%, -650%);
  }
}
.particle--1-3 {
  animation: 2s ease-out infinite alternate anim--1-3;
}

@keyframes anim--1-3 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-450%, -650%);
  }
}
.particle--1-4 {
  animation: 2s ease-out infinite alternate anim--1-4;
}

@keyframes anim--1-4 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-350%, -650%);
  }
}
.particle--1-5 {
  animation: 2s ease-out infinite alternate anim--1-5;
}

@keyframes anim--1-5 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-250%, -650%);
  }
}
.particle--1-6 {
  animation: 2s ease-out infinite alternate anim--1-6;
}

@keyframes anim--1-6 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-150%, -650%);
  }
}
.particle--1-7 {
  animation: 2s ease-out infinite alternate anim--1-7;
}

@keyframes anim--1-7 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, -650%);
  }
}
.particle--1-8 {
  animation: 2s ease-out infinite alternate anim--1-8;
}

@keyframes anim--1-8 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50%, -650%);
  }
}
.particle--1-9 {
  animation: 2s ease-out infinite alternate anim--1-9;
}

@keyframes anim--1-9 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(150%, -650%);
  }
}
.particle--1-10 {
  animation: 2s ease-out infinite alternate anim--1-10;
}

@keyframes anim--1-10 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(250%, -650%);
  }
}
.particle--1-11 {
  animation: 2s ease-out infinite alternate anim--1-11;
}

@keyframes anim--1-11 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(350%, -650%);
  }
}
.particle--1-12 {
  animation: 2s ease-out infinite alternate anim--1-12;
}

@keyframes anim--1-12 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(450%, -650%);
  }
}
.particle--1-13 {
  animation: 2s ease-out infinite alternate anim--1-13;
}

@keyframes anim--1-13 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(550%, -650%);
  }
}
.particle--1-14 {
  animation: 2s ease-out infinite alternate anim--1-14;
}

@keyframes anim--1-14 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(650%, -650%);
  }
}
.particle--1-15 {
  animation: 2s ease-out infinite alternate anim--1-15;
}

@keyframes anim--1-15 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(750%, -650%);
  }
}
.particle--1-16 {
  animation: 2s ease-out infinite alternate anim--1-16;
}

@keyframes anim--1-16 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(850%, -650%);
  }
}
.particle--2-0 {
  animation: 2s ease-out infinite alternate anim--2-0;
}

@keyframes anim--2-0 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-750%, -550%);
  }
}
.particle--2-1 {
  animation: 2s ease-out infinite alternate anim--2-1;
}

@keyframes anim--2-1 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-650%, -550%);
  }
}
.particle--2-2 {
  animation: 2s ease-out infinite alternate anim--2-2;
}

@keyframes anim--2-2 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-550%, -550%);
  }
}
.particle--2-3 {
  animation: 2s ease-out infinite alternate anim--2-3;
}

@keyframes anim--2-3 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-450%, -550%);
  }
}
.particle--2-4 {
  animation: 2s ease-out infinite alternate anim--2-4;
}

@keyframes anim--2-4 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-350%, -550%);
  }
}
.particle--2-5 {
  animation: 2s ease-out infinite alternate anim--2-5;
}

@keyframes anim--2-5 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-250%, -550%);
  }
}
.particle--2-6 {
  animation: 2s ease-out infinite alternate anim--2-6;
}

@keyframes anim--2-6 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-150%, -550%);
  }
}
.particle--2-7 {
  animation: 2s ease-out infinite alternate anim--2-7;
}

@keyframes anim--2-7 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, -550%);
  }
}
.particle--2-8 {
  animation: 2s ease-out infinite alternate anim--2-8;
}

@keyframes anim--2-8 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50%, -550%);
  }
}
.particle--2-9 {
  animation: 2s ease-out infinite alternate anim--2-9;
}

@keyframes anim--2-9 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(150%, -550%);
  }
}
.particle--2-10 {
  animation: 2s ease-out infinite alternate anim--2-10;
}

@keyframes anim--2-10 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(250%, -550%);
  }
}
.particle--2-11 {
  animation: 2s ease-out infinite alternate anim--2-11;
}

@keyframes anim--2-11 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(350%, -550%);
  }
}
.particle--2-12 {
  animation: 2s ease-out infinite alternate anim--2-12;
}

@keyframes anim--2-12 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(450%, -550%);
  }
}
.particle--2-13 {
  animation: 2s ease-out infinite alternate anim--2-13;
}

@keyframes anim--2-13 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(550%, -550%);
  }
}
.particle--2-14 {
  animation: 2s ease-out infinite alternate anim--2-14;
}

@keyframes anim--2-14 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(650%, -550%);
  }
}
.particle--2-15 {
  animation: 2s ease-out infinite alternate anim--2-15;
}

@keyframes anim--2-15 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(750%, -550%);
  }
}
.particle--2-16 {
  animation: 2s ease-out infinite alternate anim--2-16;
}

@keyframes anim--2-16 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(850%, -550%);
  }
}
.particle--3-0 {
  animation: 2s ease-out infinite alternate anim--3-0;
}

@keyframes anim--3-0 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-750%, -450%);
  }
}
.particle--3-1 {
  animation: 2s ease-out infinite alternate anim--3-1;
}

@keyframes anim--3-1 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-650%, -450%);
  }
}
.particle--3-2 {
  animation: 2s ease-out infinite alternate anim--3-2;
}

@keyframes anim--3-2 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-550%, -450%);
  }
}
.particle--3-3 {
  animation: 2s ease-out infinite alternate anim--3-3;
}

@keyframes anim--3-3 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-450%, -450%);
  }
}
.particle--3-4 {
  animation: 2s ease-out infinite alternate anim--3-4;
}

@keyframes anim--3-4 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-350%, -450%);
  }
}
.particle--3-5 {
  animation: 2s ease-out infinite alternate anim--3-5;
}

@keyframes anim--3-5 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-250%, -450%);
  }
}
.particle--3-6 {
  animation: 2s ease-out infinite alternate anim--3-6;
}

@keyframes anim--3-6 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-150%, -450%);
  }
}
.particle--3-7 {
  animation: 2s ease-out infinite alternate anim--3-7;
}

@keyframes anim--3-7 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, -450%);
  }
}
.particle--3-8 {
  animation: 2s ease-out infinite alternate anim--3-8;
}

@keyframes anim--3-8 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50%, -450%);
  }
}
.particle--3-9 {
  animation: 2s ease-out infinite alternate anim--3-9;
}

@keyframes anim--3-9 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(150%, -450%);
  }
}
.particle--3-10 {
  animation: 2s ease-out infinite alternate anim--3-10;
}

@keyframes anim--3-10 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(250%, -450%);
  }
}
.particle--3-11 {
  animation: 2s ease-out infinite alternate anim--3-11;
}

@keyframes anim--3-11 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(350%, -450%);
  }
}
.particle--3-12 {
  animation: 2s ease-out infinite alternate anim--3-12;
}

@keyframes anim--3-12 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(450%, -450%);
  }
}
.particle--3-13 {
  animation: 2s ease-out infinite alternate anim--3-13;
}

@keyframes anim--3-13 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(550%, -450%);
  }
}
.particle--3-14 {
  animation: 2s ease-out infinite alternate anim--3-14;
}

@keyframes anim--3-14 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(650%, -450%);
  }
}
.particle--3-15 {
  animation: 2s ease-out infinite alternate anim--3-15;
}

@keyframes anim--3-15 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(750%, -450%);
  }
}
.particle--3-16 {
  animation: 2s ease-out infinite alternate anim--3-16;
}

@keyframes anim--3-16 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(850%, -450%);
  }
}
.particle--4-0 {
  animation: 2s ease-out infinite alternate anim--4-0;
}

@keyframes anim--4-0 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-750%, -350%);
  }
}
.particle--4-1 {
  animation: 2s ease-out infinite alternate anim--4-1;
}

@keyframes anim--4-1 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-650%, -350%);
  }
}
.particle--4-2 {
  animation: 2s ease-out infinite alternate anim--4-2;
}

@keyframes anim--4-2 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-550%, -350%);
  }
}
.particle--4-3 {
  animation: 2s ease-out infinite alternate anim--4-3;
}

@keyframes anim--4-3 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-450%, -350%);
  }
}
.particle--4-4 {
  animation: 2s ease-out infinite alternate anim--4-4;
}

@keyframes anim--4-4 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-350%, -350%);
  }
}
.particle--4-5 {
  animation: 2s ease-out infinite alternate anim--4-5;
}

@keyframes anim--4-5 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-250%, -350%);
  }
}
.particle--4-6 {
  animation: 2s ease-out infinite alternate anim--4-6;
}

@keyframes anim--4-6 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-150%, -350%);
  }
}
.particle--4-7 {
  animation: 2s ease-out infinite alternate anim--4-7;
}

@keyframes anim--4-7 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, -350%);
  }
}
.particle--4-8 {
  animation: 2s ease-out infinite alternate anim--4-8;
}

@keyframes anim--4-8 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50%, -350%);
  }
}
.particle--4-9 {
  animation: 2s ease-out infinite alternate anim--4-9;
}

@keyframes anim--4-9 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(150%, -350%);
  }
}
.particle--4-10 {
  animation: 2s ease-out infinite alternate anim--4-10;
}

@keyframes anim--4-10 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(250%, -350%);
  }
}
.particle--4-11 {
  animation: 2s ease-out infinite alternate anim--4-11;
}

@keyframes anim--4-11 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(350%, -350%);
  }
}
.particle--4-12 {
  animation: 2s ease-out infinite alternate anim--4-12;
}

@keyframes anim--4-12 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(450%, -350%);
  }
}
.particle--4-13 {
  animation: 2s ease-out infinite alternate anim--4-13;
}

@keyframes anim--4-13 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(550%, -350%);
  }
}
.particle--4-14 {
  animation: 2s ease-out infinite alternate anim--4-14;
}

@keyframes anim--4-14 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(650%, -350%);
  }
}
.particle--4-15 {
  animation: 2s ease-out infinite alternate anim--4-15;
}

@keyframes anim--4-15 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(750%, -350%);
  }
}
.particle--4-16 {
  animation: 2s ease-out infinite alternate anim--4-16;
}

@keyframes anim--4-16 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(850%, -350%);
  }
}
.particle--5-0 {
  animation: 2s ease-out infinite alternate anim--5-0;
}

@keyframes anim--5-0 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-750%, -250%);
  }
}
.particle--5-1 {
  animation: 2s ease-out infinite alternate anim--5-1;
}

@keyframes anim--5-1 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-650%, -250%);
  }
}
.particle--5-2 {
  animation: 2s ease-out infinite alternate anim--5-2;
}

@keyframes anim--5-2 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-550%, -250%);
  }
}
.particle--5-3 {
  animation: 2s ease-out infinite alternate anim--5-3;
}

@keyframes anim--5-3 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-450%, -250%);
  }
}
.particle--5-4 {
  animation: 2s ease-out infinite alternate anim--5-4;
}

@keyframes anim--5-4 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-350%, -250%);
  }
}
.particle--5-5 {
  animation: 2s ease-out infinite alternate anim--5-5;
}

@keyframes anim--5-5 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-250%, -250%);
  }
}
.particle--5-6 {
  animation: 2s ease-out infinite alternate anim--5-6;
}

@keyframes anim--5-6 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-150%, -250%);
  }
}
.particle--5-7 {
  animation: 2s ease-out infinite alternate anim--5-7;
}

@keyframes anim--5-7 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, -250%);
  }
}
.particle--5-8 {
  animation: 2s ease-out infinite alternate anim--5-8;
}

@keyframes anim--5-8 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50%, -250%);
  }
}
.particle--5-9 {
  animation: 2s ease-out infinite alternate anim--5-9;
}

@keyframes anim--5-9 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(150%, -250%);
  }
}
.particle--5-10 {
  animation: 2s ease-out infinite alternate anim--5-10;
}

@keyframes anim--5-10 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(250%, -250%);
  }
}
.particle--5-11 {
  animation: 2s ease-out infinite alternate anim--5-11;
}

@keyframes anim--5-11 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(350%, -250%);
  }
}
.particle--5-12 {
  animation: 2s ease-out infinite alternate anim--5-12;
}

@keyframes anim--5-12 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(450%, -250%);
  }
}
.particle--5-13 {
  animation: 2s ease-out infinite alternate anim--5-13;
}

@keyframes anim--5-13 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(550%, -250%);
  }
}
.particle--5-14 {
  animation: 2s ease-out infinite alternate anim--5-14;
}

@keyframes anim--5-14 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(650%, -250%);
  }
}
.particle--5-15 {
  animation: 2s ease-out infinite alternate anim--5-15;
}

@keyframes anim--5-15 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(750%, -250%);
  }
}
.particle--5-16 {
  animation: 2s ease-out infinite alternate anim--5-16;
}

@keyframes anim--5-16 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(850%, -250%);
  }
}
.particle--6-0 {
  animation: 2s ease-out infinite alternate anim--6-0;
}

@keyframes anim--6-0 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-750%, -150%);
  }
}
.particle--6-1 {
  animation: 2s ease-out infinite alternate anim--6-1;
}

@keyframes anim--6-1 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-650%, -150%);
  }
}
.particle--6-2 {
  animation: 2s ease-out infinite alternate anim--6-2;
}

@keyframes anim--6-2 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-550%, -150%);
  }
}
.particle--6-3 {
  animation: 2s ease-out infinite alternate anim--6-3;
}

@keyframes anim--6-3 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-450%, -150%);
  }
}
.particle--6-4 {
  animation: 2s ease-out infinite alternate anim--6-4;
}

@keyframes anim--6-4 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-350%, -150%);
  }
}
.particle--6-5 {
  animation: 2s ease-out infinite alternate anim--6-5;
}

@keyframes anim--6-5 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-250%, -150%);
  }
}
.particle--6-6 {
  animation: 2s ease-out infinite alternate anim--6-6;
}

@keyframes anim--6-6 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-150%, -150%);
  }
}
.particle--6-7 {
  animation: 2s ease-out infinite alternate anim--6-7;
}

@keyframes anim--6-7 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, -150%);
  }
}
.particle--6-8 {
  animation: 2s ease-out infinite alternate anim--6-8;
}

@keyframes anim--6-8 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50%, -150%);
  }
}
.particle--6-9 {
  animation: 2s ease-out infinite alternate anim--6-9;
}

@keyframes anim--6-9 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(150%, -150%);
  }
}
.particle--6-10 {
  animation: 2s ease-out infinite alternate anim--6-10;
}

@keyframes anim--6-10 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(250%, -150%);
  }
}
.particle--6-11 {
  animation: 2s ease-out infinite alternate anim--6-11;
}

@keyframes anim--6-11 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(350%, -150%);
  }
}
.particle--6-12 {
  animation: 2s ease-out infinite alternate anim--6-12;
}

@keyframes anim--6-12 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(450%, -150%);
  }
}
.particle--6-13 {
  animation: 2s ease-out infinite alternate anim--6-13;
}

@keyframes anim--6-13 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(550%, -150%);
  }
}
.particle--6-14 {
  animation: 2s ease-out infinite alternate anim--6-14;
}

@keyframes anim--6-14 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(650%, -150%);
  }
}
.particle--6-15 {
  animation: 2s ease-out infinite alternate anim--6-15;
}

@keyframes anim--6-15 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(750%, -150%);
  }
}
.particle--6-16 {
  animation: 2s ease-out infinite alternate anim--6-16;
}

@keyframes anim--6-16 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(850%, -150%);
  }
}
.particle--7-0 {
  animation: 2s ease-out infinite alternate anim--7-0;
}

@keyframes anim--7-0 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-750%, -50%);
  }
}
.particle--7-1 {
  animation: 2s ease-out infinite alternate anim--7-1;
}

@keyframes anim--7-1 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-650%, -50%);
  }
}
.particle--7-2 {
  animation: 2s ease-out infinite alternate anim--7-2;
}

@keyframes anim--7-2 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-550%, -50%);
  }
}
.particle--7-3 {
  animation: 2s ease-out infinite alternate anim--7-3;
}

@keyframes anim--7-3 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-450%, -50%);
  }
}
.particle--7-4 {
  animation: 2s ease-out infinite alternate anim--7-4;
}

@keyframes anim--7-4 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-350%, -50%);
  }
}
.particle--7-5 {
  animation: 2s ease-out infinite alternate anim--7-5;
}

@keyframes anim--7-5 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-250%, -50%);
  }
}
.particle--7-6 {
  animation: 2s ease-out infinite alternate anim--7-6;
}

@keyframes anim--7-6 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-150%, -50%);
  }
}
.particle--7-7 {
  animation: 2s ease-out infinite alternate anim--7-7;
}

@keyframes anim--7-7 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}
.particle--7-8 {
  animation: 2s ease-out infinite alternate anim--7-8;
}

@keyframes anim--7-8 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50%, -50%);
  }
}
.particle--7-9 {
  animation: 2s ease-out infinite alternate anim--7-9;
}

@keyframes anim--7-9 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(150%, -50%);
  }
}
.particle--7-10 {
  animation: 2s ease-out infinite alternate anim--7-10;
}

@keyframes anim--7-10 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(250%, -50%);
  }
}
.particle--7-11 {
  animation: 2s ease-out infinite alternate anim--7-11;
}

@keyframes anim--7-11 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(350%, -50%);
  }
}
.particle--7-12 {
  animation: 2s ease-out infinite alternate anim--7-12;
}

@keyframes anim--7-12 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(450%, -50%);
  }
}
.particle--7-13 {
  animation: 2s ease-out infinite alternate anim--7-13;
}

@keyframes anim--7-13 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(550%, -50%);
  }
}
.particle--7-14 {
  animation: 2s ease-out infinite alternate anim--7-14;
}

@keyframes anim--7-14 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(650%, -50%);
  }
}
.particle--7-15 {
  animation: 2s ease-out infinite alternate anim--7-15;
}

@keyframes anim--7-15 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(750%, -50%);
  }
}
.particle--7-16 {
  animation: 2s ease-out infinite alternate anim--7-16;
}

@keyframes anim--7-16 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(850%, -50%);
  }
}
.particle--8-0 {
  animation: 2s ease-out infinite alternate anim--8-0;
}

@keyframes anim--8-0 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-750%, 50%);
  }
}
.particle--8-1 {
  animation: 2s ease-out infinite alternate anim--8-1;
}

@keyframes anim--8-1 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-650%, 50%);
  }
}
.particle--8-2 {
  animation: 2s ease-out infinite alternate anim--8-2;
}

@keyframes anim--8-2 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-550%, 50%);
  }
}
.particle--8-3 {
  animation: 2s ease-out infinite alternate anim--8-3;
}

@keyframes anim--8-3 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-450%, 50%);
  }
}
.particle--8-4 {
  animation: 2s ease-out infinite alternate anim--8-4;
}

@keyframes anim--8-4 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-350%, 50%);
  }
}
.particle--8-5 {
  animation: 2s ease-out infinite alternate anim--8-5;
}

@keyframes anim--8-5 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-250%, 50%);
  }
}
.particle--8-6 {
  animation: 2s ease-out infinite alternate anim--8-6;
}

@keyframes anim--8-6 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-150%, 50%);
  }
}
.particle--8-7 {
  animation: 2s ease-out infinite alternate anim--8-7;
}

@keyframes anim--8-7 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, 50%);
  }
}
.particle--8-8 {
  animation: 2s ease-out infinite alternate anim--8-8;
}

@keyframes anim--8-8 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50%, 50%);
  }
}
.particle--8-9 {
  animation: 2s ease-out infinite alternate anim--8-9;
}

@keyframes anim--8-9 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(150%, 50%);
  }
}
.particle--8-10 {
  animation: 2s ease-out infinite alternate anim--8-10;
}

@keyframes anim--8-10 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(250%, 50%);
  }
}
.particle--8-11 {
  animation: 2s ease-out infinite alternate anim--8-11;
}

@keyframes anim--8-11 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(350%, 50%);
  }
}
.particle--8-12 {
  animation: 2s ease-out infinite alternate anim--8-12;
}

@keyframes anim--8-12 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(450%, 50%);
  }
}
.particle--8-13 {
  animation: 2s ease-out infinite alternate anim--8-13;
}

@keyframes anim--8-13 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(550%, 50%);
  }
}
.particle--8-14 {
  animation: 2s ease-out infinite alternate anim--8-14;
}

@keyframes anim--8-14 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(650%, 50%);
  }
}
.particle--8-15 {
  animation: 2s ease-out infinite alternate anim--8-15;
}

@keyframes anim--8-15 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(750%, 50%);
  }
}
.particle--8-16 {
  animation: 2s ease-out infinite alternate anim--8-16;
}

@keyframes anim--8-16 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(850%, 50%);
  }
}
.particle--9-0 {
  animation: 2s ease-out infinite alternate anim--9-0;
}

@keyframes anim--9-0 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-750%, 150%);
  }
}
.particle--9-1 {
  animation: 2s ease-out infinite alternate anim--9-1;
}

@keyframes anim--9-1 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-650%, 150%);
  }
}
.particle--9-2 {
  animation: 2s ease-out infinite alternate anim--9-2;
}

@keyframes anim--9-2 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-550%, 150%);
  }
}
.particle--9-3 {
  animation: 2s ease-out infinite alternate anim--9-3;
}

@keyframes anim--9-3 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-450%, 150%);
  }
}
.particle--9-4 {
  animation: 2s ease-out infinite alternate anim--9-4;
}

@keyframes anim--9-4 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-350%, 150%);
  }
}
.particle--9-5 {
  animation: 2s ease-out infinite alternate anim--9-5;
}

@keyframes anim--9-5 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-250%, 150%);
  }
}
.particle--9-6 {
  animation: 2s ease-out infinite alternate anim--9-6;
}

@keyframes anim--9-6 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-150%, 150%);
  }
}
.particle--9-7 {
  animation: 2s ease-out infinite alternate anim--9-7;
}

@keyframes anim--9-7 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, 150%);
  }
}
.particle--9-8 {
  animation: 2s ease-out infinite alternate anim--9-8;
}

@keyframes anim--9-8 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50%, 150%);
  }
}
.particle--9-9 {
  animation: 2s ease-out infinite alternate anim--9-9;
}

@keyframes anim--9-9 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(150%, 150%);
  }
}
.particle--9-10 {
  animation: 2s ease-out infinite alternate anim--9-10;
}

@keyframes anim--9-10 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(250%, 150%);
  }
}
.particle--9-11 {
  animation: 2s ease-out infinite alternate anim--9-11;
}

@keyframes anim--9-11 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(350%, 150%);
  }
}
.particle--9-12 {
  animation: 2s ease-out infinite alternate anim--9-12;
}

@keyframes anim--9-12 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(450%, 150%);
  }
}
.particle--9-13 {
  animation: 2s ease-out infinite alternate anim--9-13;
}

@keyframes anim--9-13 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(550%, 150%);
  }
}
.particle--9-14 {
  animation: 2s ease-out infinite alternate anim--9-14;
}

@keyframes anim--9-14 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(650%, 150%);
  }
}
.particle--9-15 {
  animation: 2s ease-out infinite alternate anim--9-15;
}

@keyframes anim--9-15 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(750%, 150%);
  }
}
.particle--9-16 {
  animation: 2s ease-out infinite alternate anim--9-16;
}

@keyframes anim--9-16 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(850%, 150%);
  }
}
.particle--10-0 {
  animation: 2s ease-out infinite alternate anim--10-0;
}

@keyframes anim--10-0 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-750%, 250%);
  }
}
.particle--10-1 {
  animation: 2s ease-out infinite alternate anim--10-1;
}

@keyframes anim--10-1 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-650%, 250%);
  }
}
.particle--10-2 {
  animation: 2s ease-out infinite alternate anim--10-2;
}

@keyframes anim--10-2 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-550%, 250%);
  }
}
.particle--10-3 {
  animation: 2s ease-out infinite alternate anim--10-3;
}

@keyframes anim--10-3 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-450%, 250%);
  }
}
.particle--10-4 {
  animation: 2s ease-out infinite alternate anim--10-4;
}

@keyframes anim--10-4 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-350%, 250%);
  }
}
.particle--10-5 {
  animation: 2s ease-out infinite alternate anim--10-5;
}

@keyframes anim--10-5 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-250%, 250%);
  }
}
.particle--10-6 {
  animation: 2s ease-out infinite alternate anim--10-6;
}

@keyframes anim--10-6 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-150%, 250%);
  }
}
.particle--10-7 {
  animation: 2s ease-out infinite alternate anim--10-7;
}

@keyframes anim--10-7 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, 250%);
  }
}
.particle--10-8 {
  animation: 2s ease-out infinite alternate anim--10-8;
}

@keyframes anim--10-8 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50%, 250%);
  }
}
.particle--10-9 {
  animation: 2s ease-out infinite alternate anim--10-9;
}

@keyframes anim--10-9 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(150%, 250%);
  }
}
.particle--10-10 {
  animation: 2s ease-out infinite alternate anim--10-10;
}

@keyframes anim--10-10 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(250%, 250%);
  }
}
.particle--10-11 {
  animation: 2s ease-out infinite alternate anim--10-11;
}

@keyframes anim--10-11 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(350%, 250%);
  }
}
.particle--10-12 {
  animation: 2s ease-out infinite alternate anim--10-12;
}

@keyframes anim--10-12 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(450%, 250%);
  }
}
.particle--10-13 {
  animation: 2s ease-out infinite alternate anim--10-13;
}

@keyframes anim--10-13 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(550%, 250%);
  }
}
.particle--10-14 {
  animation: 2s ease-out infinite alternate anim--10-14;
}

@keyframes anim--10-14 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(650%, 250%);
  }
}
.particle--10-15 {
  animation: 2s ease-out infinite alternate anim--10-15;
}

@keyframes anim--10-15 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(750%, 250%);
  }
}
.particle--10-16 {
  animation: 2s ease-out infinite alternate anim--10-16;
}

@keyframes anim--10-16 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(850%, 250%);
  }
}
.particle--11-0 {
  animation: 2s ease-out infinite alternate anim--11-0;
}

@keyframes anim--11-0 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-750%, 350%);
  }
}
.particle--11-1 {
  animation: 2s ease-out infinite alternate anim--11-1;
}

@keyframes anim--11-1 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-650%, 350%);
  }
}
.particle--11-2 {
  animation: 2s ease-out infinite alternate anim--11-2;
}

@keyframes anim--11-2 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-550%, 350%);
  }
}
.particle--11-3 {
  animation: 2s ease-out infinite alternate anim--11-3;
}

@keyframes anim--11-3 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-450%, 350%);
  }
}
.particle--11-4 {
  animation: 2s ease-out infinite alternate anim--11-4;
}

@keyframes anim--11-4 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-350%, 350%);
  }
}
.particle--11-5 {
  animation: 2s ease-out infinite alternate anim--11-5;
}

@keyframes anim--11-5 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-250%, 350%);
  }
}
.particle--11-6 {
  animation: 2s ease-out infinite alternate anim--11-6;
}

@keyframes anim--11-6 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-150%, 350%);
  }
}
.particle--11-7 {
  animation: 2s ease-out infinite alternate anim--11-7;
}

@keyframes anim--11-7 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, 350%);
  }
}
.particle--11-8 {
  animation: 2s ease-out infinite alternate anim--11-8;
}

@keyframes anim--11-8 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50%, 350%);
  }
}
.particle--11-9 {
  animation: 2s ease-out infinite alternate anim--11-9;
}

@keyframes anim--11-9 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(150%, 350%);
  }
}
.particle--11-10 {
  animation: 2s ease-out infinite alternate anim--11-10;
}

@keyframes anim--11-10 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(250%, 350%);
  }
}
.particle--11-11 {
  animation: 2s ease-out infinite alternate anim--11-11;
}

@keyframes anim--11-11 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(350%, 350%);
  }
}
.particle--11-12 {
  animation: 2s ease-out infinite alternate anim--11-12;
}

@keyframes anim--11-12 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(450%, 350%);
  }
}
.particle--11-13 {
  animation: 2s ease-out infinite alternate anim--11-13;
}

@keyframes anim--11-13 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(550%, 350%);
  }
}
.particle--11-14 {
  animation: 2s ease-out infinite alternate anim--11-14;
}

@keyframes anim--11-14 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(650%, 350%);
  }
}
.particle--11-15 {
  animation: 2s ease-out infinite alternate anim--11-15;
}

@keyframes anim--11-15 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(750%, 350%);
  }
}
.particle--11-16 {
  animation: 2s ease-out infinite alternate anim--11-16;
}

@keyframes anim--11-16 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(850%, 350%);
  }
}
.particle--12-0 {
  animation: 2s ease-out infinite alternate anim--12-0;
}

@keyframes anim--12-0 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-750%, 450%);
  }
}
.particle--12-1 {
  animation: 2s ease-out infinite alternate anim--12-1;
}

@keyframes anim--12-1 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-650%, 450%);
  }
}
.particle--12-2 {
  animation: 2s ease-out infinite alternate anim--12-2;
}

@keyframes anim--12-2 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-550%, 450%);
  }
}
.particle--12-3 {
  animation: 2s ease-out infinite alternate anim--12-3;
}

@keyframes anim--12-3 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-450%, 450%);
  }
}
.particle--12-4 {
  animation: 2s ease-out infinite alternate anim--12-4;
}

@keyframes anim--12-4 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-350%, 450%);
  }
}
.particle--12-5 {
  animation: 2s ease-out infinite alternate anim--12-5;
}

@keyframes anim--12-5 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-250%, 450%);
  }
}
.particle--12-6 {
  animation: 2s ease-out infinite alternate anim--12-6;
}

@keyframes anim--12-6 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-150%, 450%);
  }
}
.particle--12-7 {
  animation: 2s ease-out infinite alternate anim--12-7;
}

@keyframes anim--12-7 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, 450%);
  }
}
.particle--12-8 {
  animation: 2s ease-out infinite alternate anim--12-8;
}

@keyframes anim--12-8 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50%, 450%);
  }
}
.particle--12-9 {
  animation: 2s ease-out infinite alternate anim--12-9;
}

@keyframes anim--12-9 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(150%, 450%);
  }
}
.particle--12-10 {
  animation: 2s ease-out infinite alternate anim--12-10;
}

@keyframes anim--12-10 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(250%, 450%);
  }
}
.particle--12-11 {
  animation: 2s ease-out infinite alternate anim--12-11;
}

@keyframes anim--12-11 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(350%, 450%);
  }
}
.particle--12-12 {
  animation: 2s ease-out infinite alternate anim--12-12;
}

@keyframes anim--12-12 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(450%, 450%);
  }
}
.particle--12-13 {
  animation: 2s ease-out infinite alternate anim--12-13;
}

@keyframes anim--12-13 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(550%, 450%);
  }
}
.particle--12-14 {
  animation: 2s ease-out infinite alternate anim--12-14;
}

@keyframes anim--12-14 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(650%, 450%);
  }
}
.particle--12-15 {
  animation: 2s ease-out infinite alternate anim--12-15;
}

@keyframes anim--12-15 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(750%, 450%);
  }
}
.particle--12-16 {
  animation: 2s ease-out infinite alternate anim--12-16;
}

@keyframes anim--12-16 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(850%, 450%);
  }
}
.particle--13-0 {
  animation: 2s ease-out infinite alternate anim--13-0;
}

@keyframes anim--13-0 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-750%, 550%);
  }
}
.particle--13-1 {
  animation: 2s ease-out infinite alternate anim--13-1;
}

@keyframes anim--13-1 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-650%, 550%);
  }
}
.particle--13-2 {
  animation: 2s ease-out infinite alternate anim--13-2;
}

@keyframes anim--13-2 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-550%, 550%);
  }
}
.particle--13-3 {
  animation: 2s ease-out infinite alternate anim--13-3;
}

@keyframes anim--13-3 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-450%, 550%);
  }
}
.particle--13-4 {
  animation: 2s ease-out infinite alternate anim--13-4;
}

@keyframes anim--13-4 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-350%, 550%);
  }
}
.particle--13-5 {
  animation: 2s ease-out infinite alternate anim--13-5;
}

@keyframes anim--13-5 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-250%, 550%);
  }
}
.particle--13-6 {
  animation: 2s ease-out infinite alternate anim--13-6;
}

@keyframes anim--13-6 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-150%, 550%);
  }
}
.particle--13-7 {
  animation: 2s ease-out infinite alternate anim--13-7;
}

@keyframes anim--13-7 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, 550%);
  }
}
.particle--13-8 {
  animation: 2s ease-out infinite alternate anim--13-8;
}

@keyframes anim--13-8 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50%, 550%);
  }
}
.particle--13-9 {
  animation: 2s ease-out infinite alternate anim--13-9;
}

@keyframes anim--13-9 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(150%, 550%);
  }
}
.particle--13-10 {
  animation: 2s ease-out infinite alternate anim--13-10;
}

@keyframes anim--13-10 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(250%, 550%);
  }
}
.particle--13-11 {
  animation: 2s ease-out infinite alternate anim--13-11;
}

@keyframes anim--13-11 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(350%, 550%);
  }
}
.particle--13-12 {
  animation: 2s ease-out infinite alternate anim--13-12;
}

@keyframes anim--13-12 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(450%, 550%);
  }
}
.particle--13-13 {
  animation: 2s ease-out infinite alternate anim--13-13;
}

@keyframes anim--13-13 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(550%, 550%);
  }
}
.particle--13-14 {
  animation: 2s ease-out infinite alternate anim--13-14;
}

@keyframes anim--13-14 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(650%, 550%);
  }
}
.particle--13-15 {
  animation: 2s ease-out infinite alternate anim--13-15;
}

@keyframes anim--13-15 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(750%, 550%);
  }
}
.particle--13-16 {
  animation: 2s ease-out infinite alternate anim--13-16;
}

@keyframes anim--13-16 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(850%, 550%);
  }
}
.particle--14-0 {
  animation: 2s ease-out infinite alternate anim--14-0;
}

@keyframes anim--14-0 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-750%, 650%);
  }
}
.particle--14-1 {
  animation: 2s ease-out infinite alternate anim--14-1;
}

@keyframes anim--14-1 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-650%, 650%);
  }
}
.particle--14-2 {
  animation: 2s ease-out infinite alternate anim--14-2;
}

@keyframes anim--14-2 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-550%, 650%);
  }
}
.particle--14-3 {
  animation: 2s ease-out infinite alternate anim--14-3;
}

@keyframes anim--14-3 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-450%, 650%);
  }
}
.particle--14-4 {
  animation: 2s ease-out infinite alternate anim--14-4;
}

@keyframes anim--14-4 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-350%, 650%);
  }
}
.particle--14-5 {
  animation: 2s ease-out infinite alternate anim--14-5;
}

@keyframes anim--14-5 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-250%, 650%);
  }
}
.particle--14-6 {
  animation: 2s ease-out infinite alternate anim--14-6;
}

@keyframes anim--14-6 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-150%, 650%);
  }
}
.particle--14-7 {
  animation: 2s ease-out infinite alternate anim--14-7;
}

@keyframes anim--14-7 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, 650%);
  }
}
.particle--14-8 {
  animation: 2s ease-out infinite alternate anim--14-8;
}

@keyframes anim--14-8 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50%, 650%);
  }
}
.particle--14-9 {
  animation: 2s ease-out infinite alternate anim--14-9;
}

@keyframes anim--14-9 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(150%, 650%);
  }
}
.particle--14-10 {
  animation: 2s ease-out infinite alternate anim--14-10;
}

@keyframes anim--14-10 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(250%, 650%);
  }
}
.particle--14-11 {
  animation: 2s ease-out infinite alternate anim--14-11;
}

@keyframes anim--14-11 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(350%, 650%);
  }
}
.particle--14-12 {
  animation: 2s ease-out infinite alternate anim--14-12;
}

@keyframes anim--14-12 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(450%, 650%);
  }
}
.particle--14-13 {
  animation: 2s ease-out infinite alternate anim--14-13;
}

@keyframes anim--14-13 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(550%, 650%);
  }
}
.particle--14-14 {
  animation: 2s ease-out infinite alternate anim--14-14;
}

@keyframes anim--14-14 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(650%, 650%);
  }
}
.particle--14-15 {
  animation: 2s ease-out infinite alternate anim--14-15;
}

@keyframes anim--14-15 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(750%, 650%);
  }
}
.particle--14-16 {
  animation: 2s ease-out infinite alternate anim--14-16;
}

@keyframes anim--14-16 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(850%, 650%);
  }
}
.particle--15-0 {
  animation: 2s ease-out infinite alternate anim--15-0;
}

@keyframes anim--15-0 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-750%, 750%);
  }
}
.particle--15-1 {
  animation: 2s ease-out infinite alternate anim--15-1;
}

@keyframes anim--15-1 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-650%, 750%);
  }
}
.particle--15-2 {
  animation: 2s ease-out infinite alternate anim--15-2;
}

@keyframes anim--15-2 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-550%, 750%);
  }
}
.particle--15-3 {
  animation: 2s ease-out infinite alternate anim--15-3;
}

@keyframes anim--15-3 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-450%, 750%);
  }
}
.particle--15-4 {
  animation: 2s ease-out infinite alternate anim--15-4;
}

@keyframes anim--15-4 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-350%, 750%);
  }
}
.particle--15-5 {
  animation: 2s ease-out infinite alternate anim--15-5;
}

@keyframes anim--15-5 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-250%, 750%);
  }
}
.particle--15-6 {
  animation: 2s ease-out infinite alternate anim--15-6;
}

@keyframes anim--15-6 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-150%, 750%);
  }
}
.particle--15-7 {
  animation: 2s ease-out infinite alternate anim--15-7;
}

@keyframes anim--15-7 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, 750%);
  }
}
.particle--15-8 {
  animation: 2s ease-out infinite alternate anim--15-8;
}

@keyframes anim--15-8 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50%, 750%);
  }
}
.particle--15-9 {
  animation: 2s ease-out infinite alternate anim--15-9;
}

@keyframes anim--15-9 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(150%, 750%);
  }
}
.particle--15-10 {
  animation: 2s ease-out infinite alternate anim--15-10;
}

@keyframes anim--15-10 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(250%, 750%);
  }
}
.particle--15-11 {
  animation: 2s ease-out infinite alternate anim--15-11;
}

@keyframes anim--15-11 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(350%, 750%);
  }
}
.particle--15-12 {
  animation: 2s ease-out infinite alternate anim--15-12;
}

@keyframes anim--15-12 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(450%, 750%);
  }
}
.particle--15-13 {
  animation: 2s ease-out infinite alternate anim--15-13;
}

@keyframes anim--15-13 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(550%, 750%);
  }
}
.particle--15-14 {
  animation: 2s ease-out infinite alternate anim--15-14;
}

@keyframes anim--15-14 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(650%, 750%);
  }
}
.particle--15-15 {
  animation: 2s ease-out infinite alternate anim--15-15;
}

@keyframes anim--15-15 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(750%, 750%);
  }
}
.particle--15-16 {
  animation: 2s ease-out infinite alternate anim--15-16;
}

@keyframes anim--15-16 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(850%, 750%);
  }
}
.particle--16-0 {
  animation: 2s ease-out infinite alternate anim--16-0;
}

@keyframes anim--16-0 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-750%, 850%);
  }
}
.particle--16-1 {
  animation: 2s ease-out infinite alternate anim--16-1;
}

@keyframes anim--16-1 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-650%, 850%);
  }
}
.particle--16-2 {
  animation: 2s ease-out infinite alternate anim--16-2;
}

@keyframes anim--16-2 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-550%, 850%);
  }
}
.particle--16-3 {
  animation: 2s ease-out infinite alternate anim--16-3;
}

@keyframes anim--16-3 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-450%, 850%);
  }
}
.particle--16-4 {
  animation: 2s ease-out infinite alternate anim--16-4;
}

@keyframes anim--16-4 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-350%, 850%);
  }
}
.particle--16-5 {
  animation: 2s ease-out infinite alternate anim--16-5;
}

@keyframes anim--16-5 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-250%, 850%);
  }
}
.particle--16-6 {
  animation: 2s ease-out infinite alternate anim--16-6;
}

@keyframes anim--16-6 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-150%, 850%);
  }
}
.particle--16-7 {
  animation: 2s ease-out infinite alternate anim--16-7;
}

@keyframes anim--16-7 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, 850%);
  }
}
.particle--16-8 {
  animation: 2s ease-out infinite alternate anim--16-8;
}

@keyframes anim--16-8 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50%, 850%);
  }
}
.particle--16-9 {
  animation: 2s ease-out infinite alternate anim--16-9;
}

@keyframes anim--16-9 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(150%, 850%);
  }
}
.particle--16-10 {
  animation: 2s ease-out infinite alternate anim--16-10;
}

@keyframes anim--16-10 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(250%, 850%);
  }
}
.particle--16-11 {
  animation: 2s ease-out infinite alternate anim--16-11;
}

@keyframes anim--16-11 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(350%, 850%);
  }
}
.particle--16-12 {
  animation: 2s ease-out infinite alternate anim--16-12;
}

@keyframes anim--16-12 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(450%, 850%);
  }
}
.particle--16-13 {
  animation: 2s ease-out infinite alternate anim--16-13;
}

@keyframes anim--16-13 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(550%, 850%);
  }
}
.particle--16-14 {
  animation: 2s ease-out infinite alternate anim--16-14;
}

@keyframes anim--16-14 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(650%, 850%);
  }
}
.particle--16-15 {
  animation: 2s ease-out infinite alternate anim--16-15;
}

@keyframes anim--16-15 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(750%, 850%);
  }
}
.particle--16-16 {
  animation: 2s ease-out infinite alternate anim--16-16;
}

@keyframes anim--16-16 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(850%, 850%);
  }
}
.back-to-top {
  color: var(--textButtonColor);
  background-color: var(--buttonColor);
  text-decoration: none;
  cursor: pointer;
  width: 56px;
  height: 56px;
  z-index: 999;
  position: fixed;
  right: 32px;
  bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 100%;
}
.back-to-top:hover {
  background-color: var(--hoverButtonColor);
  color: var(--hoverTextButtonColor);
}
.back-to-top:active {
  background-color: var(--hoverButtonColor);
  color: var(--hoverTextButtonColor);
}
.back-to-top svg.icon__arrow-up {
  fill: var(--hoverTextButtonColor);
  width: 32px;
  height: 32px;
}

.siap-chat {
  width: 420px;
  float: left;
  background: #F2F5F8;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  color: #434651;
}
.siap-chat .chat-header {
  padding: 20px;
}
.siap-chat .chat-header img {
  float: left;
}
.siap-chat .chat-header .chat-about {
  float: left;
  padding-left: 10px;
  margin-top: 6px;
}
.siap-chat .chat-header .chat-with {
  font-weight: bold;
  font-size: 1rem;
}
.siap-chat .chat-header .chat-extra-title {
  color: #92959E;
}
.siap-chat .chat-header .fa-star {
  float: right;
  color: #D8DADF;
  font-size: 1.25rem;
  margin-top: 12px;
}
.siap-chat .chat-history {
  padding: 30px 30px 20px;
  border-bottom: 2px solid white;
  overflow-y: scroll;
  height: 400px;
}
.siap-chat .chat-history ul {
  list-style: none;
}
.siap-chat .chat-history .message-data {
  margin-bottom: 15px;
}
.siap-chat .chat-history .message-data-time {
  color: rgb(167.5883495146, 169.9941747573, 177.2116504854);
  padding-left: 6px;
}
.siap-chat .chat-history .message {
  color: white;
  padding: 18px 20px;
  line-height: 26px;
  font-size: 1rem;
  border-radius: 7px;
  margin-bottom: 30px;
  width: 90%;
  position: relative;
}
.siap-chat .chat-history .message:after {
  bottom: 100%;
  left: 7%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-bottom-color: #86BB71;
  border-width: 10px;
  margin-left: -10px;
}
.siap-chat .chat-history .my-message {
  background: #86BB71;
}
.siap-chat .chat-history .other-message {
  background: #94C2ED;
}
.siap-chat .chat-history .other-message:after {
  border-bottom-color: #94C2ED;
  left: 93%;
}
.siap-chat .chat-message {
  padding: 30px;
}
.siap-chat .chat-message textarea {
  width: 100%;
  border: none;
  padding: 10px 20px;
  font: 14px/22px "Lato", Arial, sans-serif;
  margin-bottom: 10px;
  border-radius: 5px;
  resize: none;
}
.siap-chat .chat-message .fa-file-o, .siap-chat .chat-message .fa-file-image-o {
  font-size: 1rem;
  color: gray;
  cursor: pointer;
}
.siap-chat .chat-message button {
  float: right;
  color: #94C2ED;
  font-size: 1rem;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  font-weight: bold;
  background: #F2F5F8;
}
.siap-chat .chat-message button:hover {
  color: rgb(117.4408, 176.5784, 231.8592);
}
.siap-chat .loader {
  margin-bottom: -2px;
  text-align: center;
  opacity: 0.3;
}
.siap-chat .loader__dot {
  display: inline-block;
  vertical-align: middle;
  width: 6px;
  height: 6px;
  margin: 0 1px;
  background: black;
  border-radius: 50px;
  animation: loaderSiapChat 0.45s infinite alternate;
}
.siap-chat .loader__dot:nth-of-type(2) {
  animation-delay: 0.15s;
}
.siap-chat .loader__dot:nth-of-type(3) {
  animation-delay: 0.35s;
}
@keyframes loaderSiapChat {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5px);
  }
}
.siap-chat .online, .siap-chat .offline, .siap-chat .me {
  margin-right: 3px;
  font-size: 0.625rem;
}
.siap-chat .online {
  color: #86BB71;
}
.siap-chat .offline {
  color: #E38968;
}
.siap-chat .me {
  color: #94C2ED;
}
.siap-chat .align-left {
  text-align: left;
}
.siap-chat .align-right {
  text-align: right;
}
.siap-chat .float-right {
  float: right;
}
.siap-chat .clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.card.card-custom {
  background-color: var(--secondaryColor);
  color: var(--secondaryColor);
  border: 2px solid var(--secondaryColor);
  border-radius: 0%;
}
.card.card-custom .card-header {
  color: var(--textButtonColor);
  background-color: var(--buttonColor);
  border: 2px solid var(--buttonColor);
  border-radius: 0%;
}
.card.card-custom .card-header a {
  cursor: pointer;
  color: var(--textButtonColor);
  font-size: 0.875rem;
}
.card.card-custom .card-header a:hover {
  color: var(--textButtonColor);
}
.card.card-custom .card-header:hover {
  background-color: var(--hoverButtonColor);
  color: var(--hoverTextButtonColor);
}
.card.card-custom .card-header:hover a {
  color: var(--hoverTextButtonColor);
}
.card.card-custom .card-header:hover a:hover {
  color: var(--hoverTextButtonColor);
}
.card.card-custom .collapse.show {
  background-color: var(--hoverButtonColor);
  color: var(--hoverTextButtonColor);
}

.buorg {
  background-color: #a94442 !important;
  color: #f2dede !important;
  border-color: #ebccd1 !important;
}

.waiting-room-container {
  text-align: center;
  max-width: 80%;
  margin: 0px auto;
}
.waiting-room-container .status-box {
  display: flex;
  justify-content: space-around;
  margin: 30px 0;
}
.waiting-room-container .status-item {
  display: flex;
  flex-direction: column;
}
.waiting-room-container .status-item .label {
  color: var(--textPrimaryColor);
  font-size: 0.9em;
}
.waiting-room-container .status-item .value {
  font-size: 2em;
  font-weight: bold;
  color: var(--linkTextColor);
}
.waiting-room-container .progress-bar-container {
  width: 100%;
  background-color: var(--buttonColor);
  border-radius: 5px;
  height: 20px;
  overflow: hidden;
  margin: 20px 0;
}
.waiting-room-container .progress-bar-inner {
  height: 100%;
  width: 0%;
  background-color: var(--hoverButtonColor);
  border-radius: 5px;
  transition: width 1.5s ease-in-out;
}
.waiting-room-container .spinner {
  border: 5px solid var(--buttonColor);
  border-top: 5px solid var(--hoverButtonColor);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.waiting-room-container .turn-message {
  color: var(--hoverButtonColor);
}
.waiting-room-container .value-update {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.blackTheme1 {
  background-color: var(--primaryColor) !important;
}

.blackTheme2 {
  background-color: var(--secondaryColor) !important;
}

html {
  font-size: 16px;
}

@media only screen and (max-width: 1300px) and (min-width: 1200px) {
  html {
    font-size: 14px;
  }
}
@media only screen and (max-width: 1500px) and (min-width: 1300px) {
  html {
    font-size: 15px;
  }
}
body {
  background: var(--primaryColor);
  color: var(--textPrimaryColor);
  font-family: "Montserrat", sans-serif;
  scrollbar-color: var(--iconMenuHoverSelectedColor) transparent;
  scrollbar-width: thin;
  -webkit-text-size-adjust: 100%;
}
body.dynamic {
  background: transparent;
}
body.dynamic .baseHome {
  background-color: transparent;
}

.baseBodyCustom {
  height: 100vh;
  overflow: hidden;
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  .baseBlur {
    background-color: rgba(35, 42, 49, 0.368627451);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
}
/* slightly transparent fallback for Firefox (not supporting backdrop-filter) */
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .baseBlur {
    background-color: rgba(35, 42, 39, 0.8);
  }
}
.containerInputIcon {
  border: 1px solid var(--inputBorderColor);
  border-radius: 8px;
  border-bottom-left-radius: 0px;
  cursor: pointer;
}
.containerInputIcon:hover {
  background-color: var(--hoverButtonColor);
  color: var(--hoverTextButtonColor);
}

.disableContainerInputIcon {
  cursor: not-allowed;
  border: none !important;
  pointer-events: none;
}
.disableContainerInputIcon:hover {
  background-color: var(--primaryColor);
}

.containerInputIconLeft {
  border: 1px solid var(--inputBorderColor);
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  cursor: pointer;
}
.containerInputIconLeft:hover {
  background-color: var(--hoverButtonColor);
  color: var(--hoverTextButtonColor);
}

.contentModifiedButtonInput {
  position: relative;
}
.contentModifiedButtonInput .modifiedInput {
  padding-right: 25px;
}
.contentModifiedButtonInput .modifiedButtonInput {
  background: none;
  border: none;
  color: var(--textButtonColor);
  font-weight: 600;
  position: absolute;
  right: 0;
  top: 0.9em;
  z-index: 9;
}

.modifiedButton,
.modifiedButtonSecondary,
.modifiedButtonIcon {
  font-size: 0.8125rem;
  min-width: 125px;
  min-height: 32px;
  color: var(--textButtonColor);
  background-color: var(--buttonColor);
  border: none;
  border-radius: 10rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all 0.3s;
  background-clip: content-box, padding-box;
}
.modifiedButton.autoHeight,
.modifiedButtonSecondary.autoHeight,
.modifiedButtonIcon.autoHeight {
  min-height: auto;
}
.modifiedButton.autoWidth,
.modifiedButtonSecondary.autoWidth,
.modifiedButtonIcon.autoWidth {
  min-width: auto;
}
.modifiedButton.bounce,
.modifiedButtonSecondary.bounce,
.modifiedButtonIcon.bounce {
  -moz-animation: modifiedButton_bounce 2s infinite;
  -webkit-animation: modifiedButton_bounce 2s infinite;
  animation: modifiedButton_bounce 2s infinite;
}
.modifiedButton.pulse,
.modifiedButtonSecondary.pulse,
.modifiedButtonIcon.pulse {
  animation: shadow-pulse 1.5s infinite;
}
@keyframes shadow-pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(255, 0, 0, 0.4);
  }
  100% {
    box-shadow: 0 0 7px 25px rgba(255, 0, 0, 0);
  }
}
.modifiedButton.pulse-border,
.modifiedButtonSecondary.pulse-border,
.modifiedButtonIcon.pulse-border {
  animation: borderPulse 1000ms infinite ease-out;
}
@keyframes borderPulse {
  0% {
    box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255, 0.4), 0px 0px 0px 0px rgb(255, 255, 255);
  }
  100% {
    box-shadow: inset 0px 0px 0px 3px rgba(117, 117, 255, 0.2), 0px 0px 0px 10px rgba(255, 255, 255, 0);
  }
}
.modifiedButton.btn-wave:hover,
.modifiedButtonSecondary.btn-wave:hover,
.modifiedButtonIcon.btn-wave:hover {
  background-color: var(--buttonColor);
  color: var(--hoverTextButtonColor);
}
.modifiedButton.btn-wave:hover:before,
.modifiedButtonSecondary.btn-wave:hover:before,
.modifiedButtonIcon.btn-wave:hover:before {
  top: 10px;
}
.modifiedButton.btn-wave:before,
.modifiedButtonSecondary.btn-wave:before,
.modifiedButtonIcon.btn-wave:before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 140px;
  background-color: var(--hoverButtonColor);
  top: 30px;
  left: 50%;
  animation: wave_button 5s infinite linear;
  transition: all 1s;
  z-index: -1;
}
@keyframes wave_button {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  100% {
    transform: translateX(-50%) rotate(360deg);
  }
}
.modifiedButton.borderAnimation,
.modifiedButtonSecondary.borderAnimation,
.modifiedButtonIcon.borderAnimation {
  position: relative;
  display: inline-block;
  text-decoration: none;
  transition: 0.5s;
  overflow: hidden;
}
.modifiedButton.borderAnimation span:nth-child(1),
.modifiedButtonSecondary.borderAnimation span:nth-child(1),
.modifiedButtonIcon.borderAnimation span:nth-child(1) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--buttonColor), var(--hoverButtonColor));
  animation: borderAnimation_animate1 2s linear infinite;
}
@keyframes borderAnimation_animate1 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.modifiedButton.borderAnimation span:nth-child(2),
.modifiedButtonSecondary.borderAnimation span:nth-child(2),
.modifiedButtonIcon.borderAnimation span:nth-child(2) {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to left, var(--buttonColor), var(--hoverButtonColor));
  animation: borderAnimation_animate2 2s linear infinite;
}
@keyframes borderAnimation_animate2 {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes modifiedButton_bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
.modifiedButton:not(.borderAnimation):not(.btn-wave):after,
.modifiedButtonSecondary:not(.borderAnimation):not(.btn-wave):after,
.modifiedButtonIcon:not(.borderAnimation):not(.btn-wave):after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--buttonColor);
  border-radius: 10rem;
  z-index: -2;
  background-clip: content-box, padding-box;
  padding: 1px;
}
.modifiedButton:not(.borderAnimation):not(.btn-wave):before,
.modifiedButtonSecondary:not(.borderAnimation):not(.btn-wave):before,
.modifiedButtonIcon:not(.borderAnimation):not(.btn-wave):before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: var(--hoverButtonColor);
  transition: all 0.3s;
  border-radius: 10rem;
  z-index: -1;
}
.modifiedButton:hover:not(.btn-wave), .modifiedButton.active:not(.btn-wave),
.modifiedButtonSecondary:hover:not(.btn-wave),
.modifiedButtonSecondary.active:not(.btn-wave),
.modifiedButtonIcon:hover:not(.btn-wave),
.modifiedButtonIcon.active:not(.btn-wave) {
  color: var(--hoverTextButtonColor);
}
.modifiedButton:hover:not(.btn-wave):before, .modifiedButton.active:not(.btn-wave):before,
.modifiedButtonSecondary:hover:not(.btn-wave):before,
.modifiedButtonSecondary.active:not(.btn-wave):before,
.modifiedButtonIcon:hover:not(.btn-wave):before,
.modifiedButtonIcon.active:not(.btn-wave):before {
  width: 100%;
}
.modifiedButton.infoButtonFixed:after, .modifiedButton.bg-info:after,
.modifiedButtonSecondary.infoButtonFixed:after,
.modifiedButtonSecondary.bg-info:after,
.modifiedButtonIcon.infoButtonFixed:after,
.modifiedButtonIcon.bg-info:after {
  background-color: #1783b8 !important;
  color: #fff !important;
}
.modifiedButton.infoButtonFixed:hover, .modifiedButton.infoButtonFixed:before, .modifiedButton.bg-info:hover, .modifiedButton.bg-info:before,
.modifiedButtonSecondary.infoButtonFixed:hover,
.modifiedButtonSecondary.infoButtonFixed:before,
.modifiedButtonSecondary.bg-info:hover,
.modifiedButtonSecondary.bg-info:before,
.modifiedButtonIcon.infoButtonFixed:hover,
.modifiedButtonIcon.infoButtonFixed:before,
.modifiedButtonIcon.bg-info:hover,
.modifiedButtonIcon.bg-info:before {
  background-color: #0d6271 !important;
  color: #f8f8f8 !important;
}
.modifiedButton.bg-primary:after,
.modifiedButtonSecondary.bg-primary:after,
.modifiedButtonIcon.bg-primary:after {
  background-color: #007bff !important;
  color: #fff !important;
}
.modifiedButton.bg-primary:hover, .modifiedButton.bg-primary:before,
.modifiedButtonSecondary.bg-primary:hover,
.modifiedButtonSecondary.bg-primary:before,
.modifiedButtonIcon.bg-primary:hover,
.modifiedButtonIcon.bg-primary:before {
  background-color: #0062cc !important;
  color: #f8f8f8 !important;
}
.modifiedButton.warningButtonFixed:after, .modifiedButton.bg-warning:after,
.modifiedButtonSecondary.warningButtonFixed:after,
.modifiedButtonSecondary.bg-warning:after,
.modifiedButtonIcon.warningButtonFixed:after,
.modifiedButtonIcon.bg-warning:after {
  background-color: #ffc107 !important;
  color: #fff !important;
}
.modifiedButton.warningButtonFixed:hover, .modifiedButton.warningButtonFixed:before, .modifiedButton.bg-warning:hover, .modifiedButton.bg-warning:before,
.modifiedButtonSecondary.warningButtonFixed:hover,
.modifiedButtonSecondary.warningButtonFixed:before,
.modifiedButtonSecondary.bg-warning:hover,
.modifiedButtonSecondary.bg-warning:before,
.modifiedButtonIcon.warningButtonFixed:hover,
.modifiedButtonIcon.warningButtonFixed:before,
.modifiedButtonIcon.bg-warning:hover,
.modifiedButtonIcon.bg-warning:before {
  background-color: #cf9d08 !important;
  color: #f8f8f8 !important;
}
.modifiedButton.errorOrDeleteButtonFixed:after, .modifiedButton.bg-danger:after,
.modifiedButtonSecondary.errorOrDeleteButtonFixed:after,
.modifiedButtonSecondary.bg-danger:after,
.modifiedButtonIcon.errorOrDeleteButtonFixed:after,
.modifiedButtonIcon.bg-danger:after {
  background-color: #dc3545 !important;
  color: #fff !important;
}
.modifiedButton.errorOrDeleteButtonFixed:hover, .modifiedButton.errorOrDeleteButtonFixed:before, .modifiedButton.bg-danger:hover, .modifiedButton.bg-danger:before,
.modifiedButtonSecondary.errorOrDeleteButtonFixed:hover,
.modifiedButtonSecondary.errorOrDeleteButtonFixed:before,
.modifiedButtonSecondary.bg-danger:hover,
.modifiedButtonSecondary.bg-danger:before,
.modifiedButtonIcon.errorOrDeleteButtonFixed:hover,
.modifiedButtonIcon.errorOrDeleteButtonFixed:before,
.modifiedButtonIcon.bg-danger:hover,
.modifiedButtonIcon.bg-danger:before {
  background-color: #dc0c45 !important;
  color: #fff !important;
}

.modifiedLinkGlowing {
  position: relative;
  display: inline-block;
  padding: 5px 30px;
  color: var(--textPrimaryColor);
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 4px;
  overflow: hidden;
}
.modifiedLinkGlowing:hover {
  background: var(--hoverButtonColor);
  color: var(--hoverTextButtonColor);
  box-shadow: 0 0 5px var(--hoverButtonColor), 0 0 10px var(--hoverButtonColor), 0 0 15px var(--hoverButtonColor), 0 0 20px var(--hoverButtonColor);
  -webkit-box-reflect: below 1px linear-gradient(transparent, var(--hoverTextButtonColor));
  text-decoration: none;
}
.modifiedLinkGlowing:hover .label {
  background: var(--hoverButtonColor);
  color: var(--hoverTextButtonColor);
}
.modifiedLinkGlowing span {
  position: absolute;
  display: block;
}
.modifiedLinkGlowing span.label {
  position: relative;
  color: var(--textButtonColor);
  background-color: var(--buttonColor);
  padding: 0 5px 0 5px;
}
.modifiedLinkGlowing span:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--hoverButtonColor));
  animation: glowing_animate1 1s linear infinite;
}
@keyframes glowing_animate1 {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}
.modifiedLinkGlowing span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--hoverButtonColor));
  animation: glowing_animate2 1s linear infinite;
  animation-delay: 0.25s;
}
@keyframes glowing_animate2 {
  0% {
    top: -100%;
  }
  50%, 100% {
    top: 100%;
  }
}
.modifiedLinkGlowing span:nth-child(3) {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, var(--hoverButtonColor));
  animation: glowing_animate3 1s linear infinite;
  animation-delay: 0.5s;
}
@keyframes glowing_animate3 {
  0% {
    right: -100%;
  }
  50%, 100% {
    right: 100%;
  }
}
.modifiedLinkGlowing span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, var(--hoverButtonColor));
  animation: glowing_animate4 1s linear infinite;
  animation-delay: 0.75s;
}
@keyframes glowing_animate4 {
  0% {
    bottom: -100%;
  }
  50%, 100% {
    bottom: 100%;
  }
}

.modifiedButtonIcon {
  font-weight: bold;
}
.modifiedButtonIcon.small {
  font-size: 0.75rem;
}
.modifiedButtonIcon.xs {
  font-size: 0.625rem;
}

.modifiedButtonSecondary {
  background-color: var(--buttonSecondaryColor);
}

.modifiedButtonBig {
  width: 40px !important;
  height: 40px !important;
}

.modifiedLink {
  cursor: pointer;
  color: var(--linkTextColor);
  font-size: 0.875rem;
}
.modifiedLink:not(.rootLevel) {
  display: inline-block;
  position: relative;
  text-decoration: none;
}
.modifiedLink:not(.rootLevel):hover {
  color: var(--hoverLinkTextColor) !important;
  text-decoration: none;
}
.modifiedLink:not(.rootLevel) u:before {
  background-color: var(--hoverLinkTextColor);
  bottom: 2px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: top left;
  transition: all 0.3s ease-in-out 0s;
  visibility: hidden;
  width: 100%;
}
.modifiedLink:not(.rootLevel) u:focus:before, .modifiedLink:not(.rootLevel) u:hover:before {
  transform: scaleX(1);
  visibility: visible;
}

.activeLink {
  color: var(--linkTextColor) !important;
}

.modifiedRadio {
  transform: scale(1.5);
  margin: auto;
  margin-right: 20px;
  border-radius: 10px;
  border: none;
}

.modifiedIcons {
  margin-right: 5px;
}

select:disabled {
  background-color: transparent !important;
  border: none !important;
  color: var(--textSecondaryColor);
}

input:read-only {
  background-color: transparent !important;
}

select::-ms-expand {
  display: none;
}

.arrowSelect {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url(../images/angle-down-solid.svg) no-repeat right;
}
.arrowSelect:before {
  content: "\f078"; /* this is your text. You can also use UTF-8 character codes as I do here */
  font-family: "Font Awesome 5 Free", "Montserrat", sans-serif;
  left: -5px;
  position: absolute;
  top: 0;
  color: red;
}

.customErrorTimepicker button {
  border: 1px solid #b24747 !important;
}

.errorTextColor {
  color: #b24747;
}

::-webkit-scrollbar {
  width: 4px;
  cursor: pointer;
}

::-webkit-scrollbar-button {
  display: none !important;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 2px rgba(50, 50, 78, 0.5);
  -webkit-box-shadow: inset 0 0 2px rgba(50, 50, 78, 0.5);
  border-radius: 8px;
}

::-webkit-scrollbar-track-piece {
  display: none !important;
}

::-webkit-scrollbar-thumb {
  border-radius: 8px;
  box-shadow: inset 1px 1px 6px rgba(50, 50, 78, 0.7);
  -webkit-box-shadow: inset 1px 1px 6px rgba(50, 50, 78, 0.7);
  background-color: var(--iconMenuHoverSelectedColor);
}

::-webkit-scrollbar-corner {
  display: none !important;
}

::-webkit-resizer {
  display: none !important;
}

.card-body-custom {
  padding: 5px 10px 5px 10px;
  width: 100%;
  border-radius: 20px;
  background-color: var(--primaryColor);
  color: var(--textPrimaryColor);
  border: 2px solid transparent;
}
.card-body-custom.noBorder {
  border: 0;
}
.card-body-custom.addShadow {
  box-shadow: var(--shadowCard);
}
.card-body-custom.noRadiusBottom {
  border-bottom-left-radius: 0%;
  border-bottom-right-radius: 0%;
}
.card-body-custom.noRadiusBottomRight {
  border-bottom-right-radius: 0%;
}
.card-body-custom.noRadiusBottomLeft {
  border-bottom-left-radius: 0%;
}
.card-body-custom.noRadiusTop {
  border-top-left-radius: 0%;
  border-top-right-radius: 0%;
}
.card-body-custom.noRadiusTopLeft {
  border-top-left-radius: 0%;
}
.card-body-custom.noRadiusLeft {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.card-body-custom.noRadiusRight {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.card-body-custom.noRadius {
  border-radius: 0%;
}
.card-body-custom.tripLarge {
  width: 300px;
}
.card-body-custom.tripSmall {
  width: 160px;
}
.card-body-custom.tripIco {
  width: 60px;
}
.card-body-custom.tripCodiceCliente {
  width: 340px;
}
.card-body-custom.frontBack {
  position: relative;
}
.card-body-custom.frontBack.animation {
  cursor: pointer;
}
.card-body-custom.frontBack.animation:hover .rank {
  transform: translate(165%, -60%);
}
.card-body-custom.frontBack.animation:hover .front {
  transform: translateY(-44%) scale(0.9);
  background-color: red;
}
.card-body-custom.frontBack.animation:hover .back {
  opacity: 1;
  background-color: white;
}
.card-body-custom.frontBack.animation:hover .background {
  transition: var(--transition), opacity 100ms linear;
  transform: scale(1.4, 1.2);
  opacity: 1;
  border: 0.25px solid white;
}
.card-body-custom.frontBack .rank {
  position: absolute;
  top: -4px;
  right: 1rem;
  font-weight: bold;
  font-size: 1.125rem;
  background-color: var(--primaryColor);
  color: var(--hoverButtonColor);
  padding: 0.5rem 0.5rem 0.75rem;
  clip-path: polygon(0% 0%, 100% 0, 100% 100%, 50% 85%, 0% 100%);
  transition: var(--transition);
}
.card-body-custom.frontBack .rank.rankInfo {
  background-color: var(--buttonColor);
  color: var(--textButtonColor);
}
.card-body-custom.frontBack .rank.rankInfo:hover {
  background-color: var(--hoverButtonColor);
  color: var(--hoverTextButtonColor);
}
.card-body-custom.frontBack .front {
  transition: 250ms;
}
.card-body-custom.frontBack .back {
  opacity: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.card-body-custom.frontBack .background {
  background-color: var(--primaryColor);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  transform: scale(0.2 0.9);
  border-radius: 0.5rem;
  opacity: 0;
}
.card-body-custom.contentBlockIcon.noBorder {
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  border: none;
}
.card-body-custom.contentBlockIcon .card-block-icon {
  min-width: 35px;
  min-height: 30px;
}
.card-body-custom.contentBlockIcon .card-block-icon.disableMin {
  min-width: auto;
  padding-left: 12px;
}
.card-body-custom.contentBlockIcon .card-block-icon:not(.noHover) {
  cursor: pointer;
}
.card-body-custom.contentBlockIcon .card-block-icon.right {
  border-right: 4px solid var(--secondaryColor);
}
.card-body-custom.contentBlockIcon .card-block-icon.left {
  border-left: 4px solid var(--secondaryColor);
}
.card-body-custom.contentBlockIcon .card-block-icon a, .card-body-custom.contentBlockIcon .card-block-icon:hover {
  color: var(--textPrimaryColor);
}
.card-body-custom.contentBlockIcon .card-block-icon:hover:not(.noHover) {
  background-color: var(--hoverButtonColor);
  color: var(--hoverTextButtonColor);
}

.close {
  color: var(--textPrimaryColor);
}

.card-body-custom-light {
  padding: 15px;
  width: 100%;
  border-radius: 20px;
  background-color: var(--primaryColor);
}

.top-bar-icon {
  background-attachment: fixed;
  background-size: cover;
  height: 70px;
  object-fit: contain;
  object-position: center;
}

.modal-dialog {
  max-width: 60vw;
  margin: 1.75rem auto;
}

.dropdowns-button {
  background-color: transparent !important;
  border: none;
  color: var(--textPrimaryColor);
}

.dropdowns-button:hover {
  color: var(--textPrimaryColor) !important;
}

.dropdowns-menu {
  background-color: var(--secondaryColor);
  border-radius: 14px;
  color: var(--textPrimaryColor);
  font-size: 0.875rem;
  text-align: center;
}
.dropdowns-menu.left {
  text-align: left;
}

.dropdowns-menu:hover,
.dropdowns-menu:focus {
  background-color: none !important;
}

.dropdown-divider {
  border-top-color: var(--primaryColor);
}

.dropdownBadge {
  position: absolute;
  top: -5px;
  right: 0px;
}

.containerToastCustom {
  position: absolute;
  top: 5rem;
  right: 30px;
  z-index: 10000;
}

.customToast {
  border-radius: 20px !important;
  background-color: var(--primaryColor) !important;
  min-width: 350px;
}
.customToast .toast-header {
  background-color: var(--primaryColor) !important;
}

.borderError {
  border: 2px solid red;
}

.borderDone {
  border: 2px solid rgb(97, 192, 9);
}

.borderInfo {
  border: 2px solid rgb(56, 139, 248);
}

.borderRightDashedLight {
  border-right-width: 2px;
  border-right-style: dashed;
  border-right-color: var(--textPrimaryColor);
}

/* 
select {
    -webkit-appearance: none;
    border-radius: 8px;
    padding-left: 19px;
    padding-top: 11px;
    &:focus {
        box-shadow: 0px 0px 6px -2px $primary-color;
    }
}
select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 50%;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
    padding: 0.5em;
    padding-right: 1.5em;
} */
.hiddenElement,
.hiddenElementDelete {
  display: none !important;
}

.forceHiddenElement {
  display: none !important;
}

.debugHiddenElement {
  border: 1px solid red !important;
  background-color: rgba(255, 0, 0, 0.1) !important;
}

.hiddenVisibilityElement {
  visibility: hidden;
}

.titleCard {
  font-size: 1.125rem;
  text-transform: uppercase;
  color: var(--textPrimaryColor);
}
.titleCard.align {
  padding-left: 25px;
}

.roundedButton {
  font-size: 0.875rem;
  font-weight: bold;
  color: var(--textButtonColor);
  background-color: var(--buttonColor);
  border: none;
  border-radius: 50%;
  min-width: 30px;
  min-height: 30px;
  max-width: 30px;
  max-height: 30px;
  cursor: pointer;
}
.roundedButton:hover {
  background-color: var(--hoverButtonColor);
  color: var(--hoverTextButtonColor);
}
.roundedButton:hover .roundedButtonIconText {
  color: var(--hoverButtonColor) !important;
}
.roundedButton[data-badge] {
  position: relative;
}
.roundedButton[data-badge]:after {
  content: attr(data-badge);
  position: absolute;
  top: -4px;
  right: 0px;
  font-size: 0.7em;
  background-color: #e5be01;
  color: #212529;
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 18px;
  border-radius: 50%;
  box-shadow: 0 0 1px #333;
}
.roundedButton.small {
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
}
.roundedButton.roundedButtonIcon {
  width: 40px;
  height: 40px;
}
.roundedButton.roundedButtonIcon .roundedButtonIconText {
  font-size: 0.6rem;
  font-weight: bold;
  bottom: 0px;
  position: absolute;
  color: var(--buttonColor);
}
.roundedButton.roundedButtonIcon .roundedButtonIconText.mobile {
  bottom: -14px;
}
.roundedButton.roundedButtonIcon.roundedButtonIcon20 {
  padding: 20px;
}
.roundedButton.roundedButtonIcon.roundedButtonIcon15 {
  padding: 15px;
}
.roundedButton.roundedButtonIcon.roundedButtonIcon15[data-badge]:after {
  top: -8px;
  right: -8px;
}

.roundedBadge {
  background-color: #e5be01;
  color: #212529;
  width: 22px;
  height: 22px;
  text-align: center;
  line-height: 22px;
  border-radius: 50%;
  font-weight: bold;
  box-shadow: 0 0 1px #333;
}
.roundedBadge.small {
  width: 15px;
  height: 15px;
  line-height: 15px;
  font-size: 0.625rem;
}
.roundedBadge.searchResult {
  padding-left: 5px;
  padding-right: 5px;
  font-size: 0.625rem;
  width: auto;
  height: auto;
}

.sizeText20 {
  font-size: 1.25rem;
}

.customTabs {
  height: 20%;
}

.buttonSwitch {
  color: white;
  background-color: var(--linkColor);
  cursor: pointer;
}

.borderNone {
  border: none;
  outline: none;
  padding-left: 75% !important;
}

.rotateDeparture {
  transform: rotate(315deg);
}

.rotateArrival {
  transform: rotate(225deg);
}

.rotate270Deg {
  transform: rotate(270deg);
}

.rotate90Deg {
  transform: rotate(90deg);
}

.cardBorder {
  border-right: 2px dashed var(--textPrimaryColor);
}

.bold {
  font-size: 1.375rem;
  font-weight: bold;
}

.semiBold {
  font-size: 0.875rem;
  font-weight: 500;
}

.thin {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--textSecondaryColor);
}

.solidHr {
  border-top: 2px solid var(--textPrimaryColor);
}

.dashedHr {
  border-top: 2px dashed var(--textPrimaryColor);
}

.thinSolidHr {
  border-top: 1px solid var(--textPrimaryColor);
}

.btnCollapse {
  outline: none;
  border: none;
  background-color: transparent;
  color: var(--textPrimaryColor);
  border-color: transparent !important;
}

.btnCollapse:hover,
.btnCollapse:active {
  outline: none !important;
  border: none !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

.transformHr {
  transform: rotate(90deg);
}

.flex-1 {
  flex: 1;
}

.fontSize10 {
  font-size: 0.625rem;
}

.fontSize11 {
  font-size: 0.6875rem;
}

.fontSize12 {
  font-size: 0.75rem;
}

.fontSize13 {
  font-size: 0.8125rem;
}

.fontSize14 {
  font-size: 0.875rem;
}

.fontSize16 {
  font-size: 1rem;
}

.fontSize18 {
  font-size: 1.125rem;
}

.fontSize20 {
  font-size: 1.25rem;
}

.fontSize22 {
  font-size: 1.375rem;
}

.fontSize24 {
  font-size: 1.5rem;
}

.fontSize26 {
  font-size: 1.625rem;
}

.fontSize28 {
  font-size: 1.75rem;
}

.fontSize30 {
  font-size: 1.875rem;
}

.fontSize32 {
  font-size: 2rem;
}

.fontSize35 {
  font-size: 2.1875rem;
}

.fontSize40 {
  font-size: 2.5rem;
}

.fontSize50 {
  font-size: 3.125rem;
}

.body-space-custom {
  height: 100vh;
  overflow: scroll;
  padding: 0px;
  padding-bottom: 3rem;
}

.vl {
  border-left: 1px solid var(--textPrimaryColor);
  height: 100%;
  position: relative;
  left: -1px;
}

.ol {
  border-top: 1px solid var(--textPrimaryColor);
  height: 100%;
  position: relative;
  /* margin-left: -50%; */
}

.cartButton {
  font-weight: lighter;
  color: var(--textPrimaryColor);
  background-color: var(--primaryColor);
  border: none;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  position: relative;
}

.contentCartButton {
  width: 100px;
  position: relative;
}

.cartButtonCheck {
  color: white;
  background-color: var(--linkColor);
  cursor: default !important;
  position: absolute;
  top: 0%;
  right: 4%;
}

.bigZIndex {
  z-index: 1000;
}

.modified-nav-link {
  background-color: transparent !important;
  border-radius: 0px !important;
  color: var(--textSecondaryColor);
  border: none !important;
  text-transform: uppercase;
}
.modified-nav-link.active, .modified-nav-link:hover, .modified-nav-link:focus {
  color: var(--textPrimaryColor) !important;
  border: none !important;
  border-bottom: 1px var(--iconMenuHoverSelectedColor) solid !important;
}
.modified-nav-link a.active {
  color: var(--textPrimaryColor) !important;
  border: none !important;
  border-bottom: none !important;
}
.modified-nav-link a.active:hover {
  text-decoration: none;
}

.sup {
  position: relative;
  bottom: 1ex;
  font-size: 80%;
}

.border-left-bar {
  border-right: 2px solid var(--linkColor);
}

.greenText {
  color: #60a930 !important;
}

.yellowText {
  color: #e5be01 !important;
}

.redText {
  color: red !important;
}

.input-group-append button {
  border: 1px solid var(--inputBorderColor);
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.input-group-append .gj-icon {
  color: var(--textPrimaryColor);
}

.timepicker {
  background-color: var(--primaryColor) !important;
}
.timepicker * {
  color: var(--textSecondaryColor);
}
.timepicker div:first-child {
  background-color: var(--primaryColor) !important;
}
.timepicker div[role=dial] {
  background-color: var(--secondaryColor) !important;
}
.timepicker div[role=footer] .btn.btn-default:hover {
  color: var(--textPrimaryColor) !important;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.setOverflowScroll {
  overflow: scroll !important;
  overflow-x: hidden !important;
}

.setOverflowHidden {
  overflow: hidden !important;
}

.transferBaseInformation {
  cursor: pointer;
}

.baseTextColor {
  color: var(--textPrimaryColor) !important;
}

.secondaryTextColor {
  color: var(--textSecondaryColor) !important;
}

.inputCenter {
  text-align: center !important;
}

.noColorButton {
  font-size: 0.875rem;
  min-width: 150px;
  font-weight: lighter;
  color: var(--textPrimaryColor);
  background-color: transparent;
  border: var(--textPrimaryColor);
  border-radius: 16px;
  cursor: pointer;
}

.title-text-left {
  overflow: hidden;
  text-align: left;
}

.title-text-left:after {
  background-color: var(--textPrimaryColor);
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 100%;
}

.borderRadiusZero {
  border-radius: 0% !important;
}

.borderTopRadiusZero {
  border-top-left-radius: 0% !important;
  border-top-right-radius: 0% !important;
}

.borderBottomRadiusZero {
  border-bottom-left-radius: 0% !important;
  border-bottom-right-radius: 0% !important;
}

.textareaResizeNone {
  resize: none !important;
}

.centerElement {
  display: flex;
  align-items: center;
  justify-content: center;
}

.solidDarkLine {
  border-top: 2px solid var(--primaryColor);
}

.colorTopLeftIconBase {
  background-color: white !important;
  color: var(--primaryColor);
}

.colorTopLeftIconAccepted {
  background-color: #60a930 !important;
}

.colorTopLeftIconDenied {
  background-color: #b24747 !important;
}

.colorTopLeftIconPending {
  background-color: #e5be01 !important;
}

.colorTopLeftIconAdd {
  background-color: transparent !important;
}

.defaultStateBadge {
  background-color: var(--secondaryColor);
  border: 1px solid var(--textPrimaryColor);
}
.defaultStateBadge .badgeSpan {
  color: var(--textPrimaryColor);
  font-weight: 600;
}

.dashed {
  color: var(--textPrimaryColor);
  border: 2px dashed;
  border-color: var(--textPrimaryColor);
}

.dashed.primary {
  background-color: #2469b3 !important;
  color: #f8f8f8;
  border: 2px dashed;
  border-color: #f8f8f8;
}
.dashed.primary .defaultStateBadge {
  border: none;
  background-color: #f8f8f8;
}
.dashed.primary .defaultStateBadge .badgeSpan {
  background-color: #0056b3;
  color: #f8f8f8;
}

.dashed.error {
  background-color: #c54b4e !important;
  color: #f8f8f8;
  border: 2px dashed;
  border-color: #f8f8f8;
}
.dashed.error .defaultStateBadge {
  border: none;
  background-color: #f8f8f8;
}
.dashed.error .defaultStateBadge .badgeSpan {
  background-color: #c32929;
  color: #f8f8f8;
}

.dashed.accepted {
  background-color: #8cbc7a !important;
  color: #f8f8f8;
  border: 2px dashed;
  border-color: #f8f8f8;
}
.dashed.accepted .defaultStateBadge {
  border: none;
  background-color: #f8f8f8;
}
.dashed.accepted .defaultStateBadge .badgeSpan {
  background-color: #60a930;
  color: #f8f8f8;
}

.dashed.outstanding {
  color: #f8f8f8;
  border: 2px dashed;
  border-color: #f8f8f8;
  background-color: #eecb53 !important;
}
.dashed.outstanding .defaultStateBadge {
  border: none;
  background-color: #f8f8f8;
}
.dashed.outstanding .defaultStateBadge .badgeSpan {
  background-color: #edb629;
  color: #f8f8f8;
}

.authorized {
  color: #60a930 !important;
}

.denied {
  color: #b24747 !important;
}

.managePolicy {
  font-weight: bold;
}

.pending {
  color: #e5be01 !important;
}

.pendingFor {
  color: #f7cb73 !important;
}

.statusLinkTextColor {
  color: var(--linkTextColor);
}

.defaultStatusPra {
  color: var(--textPrimaryColor) !important;
}

.transparentColor {
  color: transparent !important;
}

.iconCartNav .roundIconNav {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  width: 40px;
  height: 40px;
  color: var(--textPrimaryColor);
  border-radius: 50%;
  cursor: pointer;
  margin-left: 10px;
  padding-top: 3px;
}

.js {
  justify-content: start;
}

.jb {
  justify-content: space-between;
}

.ja {
  justify-content: space-around;
}

.je {
  justify-content: flex-end;
}

.ais {
  align-items: flex-start;
}

.aie {
  align-items: flex-end;
}

.acs {
  align-content: flex-start;
}

.acb {
  align-content: space-between;
}

.aca {
  align-content: space-around;
}

.ace {
  align-content: flex-end;
}

.top-bar-custom {
  background-color: var(--topBarColor);
  width: 100vw;
  /*height: 70px;*/
  position: relative;
}
.top-bar-custom.social-bar:after {
  content: "";
  display: block;
  width: 100px;
  height: 39px;
  background-color: var(--secondaryColor);
  position: absolute;
  top: 51px;
  left: 50%;
  z-index: 1;
  border-radius: 50% 50% 0 0;
  transform: translate(-50%, -50%);
}
.top-bar-custom .social-bar {
  width: 64px;
  height: 30px;
  position: absolute;
  z-index: 2;
  left: calc(50% - 32px);
  top: 38px;
}
.top-bar-custom .social-bar .social-bar-content {
  position: relative;
}
.top-bar-custom .social-bar .social-bar-content .social-bar-icon {
  width: 30px;
  height: 30px;
  background-color: var(--buttonColor);
  border-radius: 50%;
  cursor: pointer;
  padding: 5px;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-bar-custom .social-bar .social-bar-content .social-bar-icon:hover {
  background-color: var(--hoverButtonColor);
  color: var(--hoverTextButtonColor);
}
.top-bar-custom .social-bar .social-bar-content .social-bar-box {
  width: 420px;
  position: absolute;
  margin-left: -196px;
  margin-top: 12px;
  display: none;
}
.top-bar-custom .social-bar .social-bar-content .social-bar-box.active {
  display: block;
}
.top-bar-custom .social-bar .social-bar-content .social-bar-box:before, .top-bar-custom .social-bar .social-bar-content .social-bar-box:after {
  content: "";
  position: absolute;
  border-style: solid;
  border-color: transparent;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  border-top: 0;
}
.top-bar-custom .social-bar .social-bar-content .social-bar-box:before {
  border-width: 12px;
  top: -12px;
  border-bottom-color: var(--secondaryColor);
}
.top-bar-custom .social-bar .social-bar-content .social-bar-box:after {
  border-width: 9px;
  top: -9px;
  border-bottom-color: var(--hoverButtonColor);
}

.left-bar-custom {
  background-color: var(--leftBarColor);
}

.left-bar-custom-mobile {
  background-color: var(--primaryColor);
}

.block-elem-menu {
  color: var(--textPrimaryColor);
  cursor: pointer;
  border-right: 1px solid;
  border-color: var(--leftBarColor);
}
.block-elem-menu.menuIconActive {
  border-color: var(--iconMenuHoverSelectedColor);
}
.block-elem-menu:hover:not(.menuIconActive) {
  border-color: var(--iconMenuColor);
  color: var(--iconMenuColor);
}
.block-elem-menu a:hover {
  color: var(--iconMenuColor);
}

.containerBadge {
  width: 0;
}

.modalDialogMobile {
  margin: 5px !important;
  display: contents !important;
}

.menuIconActive {
  color: var(--iconMenuHoverSelectedColor) !important;
}

.menuIconBase {
  color: var(--iconMenuColor);
}

.buttonPositionFixedAction {
  position: fixed;
  bottom: 0;
  z-index: 1000;
}

.fixedButtonAction {
  color: #f8f8f8 !important;
}
.fixedButtonAction:hover {
  color: #f8f8f8 !important;
}

.backgroundLikeModal {
  background-color: rgba(0, 0, 0, 0.3803921569);
}

.divStyleFilterContainer {
  height: calc(100% - 70px);
}

.verticalLine {
  height: 75%;
  border-left: 2px dashed var(--textPrimaryColor);
  position: absolute;
  left: 50%;
}

.verticalLineServicesSettings {
  border-left: 2px dashed var(--textPrimaryColor);
}
.verticalLineServicesSettings.baseHeight {
  height: 20px;
}
.verticalLineServicesSettings.midHeight {
  height: 40px;
}
.verticalLineServicesSettings.bigHeight {
  height: 80px;
}

.verticalLineSolid {
  border-left: 2px solid var(--textPrimaryColor);
}
.verticalLineSolid.baseHeight {
  height: 20px;
}

.horizontalLine {
  width: 100%;
  border-bottom: 1px dashed var(--textPrimaryColor);
}
.horizontalLine.forceSolid {
  border-bottom: 1px solid var(--textPrimaryColor);
}

.horizontalLineTop {
  width: 100%;
  border-top: 1px dashed var(--textPrimaryColor);
}

#menuMapsDrawer {
  position: absolute;
  z-index: 2;
  bottom: 120px;
}

.cursorDefault {
  cursor: default;
}

.cursorPointer {
  cursor: pointer;
}

.cursorNone {
  cursor: none;
}

.cursorNotAllowed {
  cursor: not-allowed;
}

.containerTabulator {
  padding: 0px;
}

.containerModalNoteService {
  z-index: 10;
}

.singleLineTravelPolicyPriority {
  cursor: pointer;
}

#containerShapeInfoGmaps {
  height: 400px;
  overflow: scroll;
  overflow-x: hidden;
}

.limitCh100 {
  max-width: 100ch;
}

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

.textWrapWithDots3Line {
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.iconSizeElencoTrasferte {
  width: 20px;
  height: 20px;
  padding: 4px;
  line-height: 1 !important;
}

.textSizeElencoTrasferte {
  position: relative;
  width: 100%;
}

.errorDescriptionService {
  color: red;
}

.importantInfoText {
  color: red;
  font-weight: bold;
}

iframe.modificaCartaCredito {
  border: none;
  width: 100%;
  height: 80px;
  overflow: hidden;
}

.pointerElement {
  cursor: pointer;
  width: 10px;
  height: 10px;
  border-radius: 20px;
}
.pointerElement.active {
  background-color: #60a930;
}
.pointerElement.disable {
  background-color: #b24747;
}
.pointerElement.pending {
  background-color: #e5be01;
}
.pointerElement.cursorHelp {
  cursor: help;
}

.blockCard {
  cursor: pointer;
  min-height: 130px;
  min-width: 130px;
  border: 1px solid var(--secondaryColor);
}

.hoverBlockCard {
  border: 1px solid var(--primaryColor);
}
.hoverBlockCard:hover {
  border: 1px solid var(--hoverButtonColor);
}

.selectedCardDashboard {
  border: 1px solid var(--hoverButtonColor);
}

.linkUnlinkButton {
  color: white;
}

.binLineService {
  color: white;
}

.kv-file-content {
  width: auto !important;
  height: auto !important;
}

.customCheckboxBootstrap {
  width: 20px;
  height: 20px;
  cursor: pointer !important;
}
.customCheckboxBootstrap.error {
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  border: 1px solid;
  border-color: red;
}
.customCheckboxBootstrap {
  /*&.error + label {
  	color: $error-color;
  }*/
}

.containerIconDragAndDrop {
  cursor: move;
}

ul.listColumn {
  -moz-column-count: 4;
  -moz-column-gap: 20px;
  -webkit-column-count: 4;
  -webkit-column-gap: 20px;
  column-count: 4;
  column-gap: 20px;
}

.singleLineRevalue .arrowPrice {
  font-size: 1.5em;
}

.capRatePositive {
  color: #8cbc7a !important;
}

.capRateNegative {
  color: #c54b4e !important;
}

.selectedItemRecover {
  border: 2px solid var(--buttonColor) !important;
}

.polygonCustomScroll {
  overflow: scroll;
  max-height: 40vh !important;
  display: block;
  overflow-x: hidden !important;
  border-radius: 20px;
  scrollbar-color: var(--iconMenuHoverSelectedColor) transparent;
  scrollbar-width: thin;
}

.borderSelectedCard {
  border: 2px solid var(--buttonColor) !important;
}

.borderSelectedCardNoBottom {
  border-top: 2px solid var(--buttonColor) !important;
  border-left: 2px solid var(--buttonColor) !important;
  border-right: 2px solid var(--buttonColor) !important;
}

.borderSelectedCardNoTop {
  border-bottom: 2px solid var(--buttonColor) !important;
  border-left: 2px solid var(--buttonColor) !important;
  border-right: 2px solid var(--buttonColor) !important;
}

.buttonAccordion {
  color: var(--textPrimaryColor);
}

.fakeTabs {
  border-bottom: 1px solid transparent;
}
.fakeTabs.active {
  border-bottom: 1px solid var(--buttonColor);
}

.whiteColorText {
  color: #ffffff;
}

.iconLanguage {
  border: none;
  border-radius: 20%;
  width: 30px;
  height: 30px;
}

.baseIframe {
  border: none;
  border-radius: 20px;
  background-color: transparent;
}
.baseIframe.show {
  background-color: white;
}
.baseIframe.noRadius {
  border-radius: 0px;
}

.containerScrollDocuments {
  overflow: scroll;
  overflow-x: hidden;
  max-height: 500px;
}

.borderErrorButton {
  border: 1px solid red;
}

.primaryText {
  color: var(--textPrimaryColor) !important;
}

.secondaryText {
  color: var(--textSecondaryColor) !important;
}

.customScrollModal {
  overflow: scroll;
  overflow-x: hidden;
  max-height: 400px;
}

.maxHeight200 {
  max-height: 200px;
  overflow: hidden;
}

.containerImageFit {
  object-fit: cover;
  overflow: hidden;
}

.borderedRadius {
  border-radius: 20px;
}

.containerFloatLeft {
  float: left;
}

.containerFloatRight {
  float: right;
}

.containerImageMapHotel {
  width: 950px;
}

.firstImage, .secondImage {
  max-height: 320px;
}

#containerMobileMap, #containerDesktopMap {
  width: 100%;
  height: 300px;
  border-radius: 20px;
}

.containerLogoPlaneTrain,
.containerLogoPlaneTrainDetail,
.containerLogoPlaneTrainSquare {
  min-width: 60px;
  min-height: 60px;
  max-width: 60px;
  max-height: 60px;
  background-color: white;
  border-radius: 50px;
}
.containerLogoPlaneTrain > img,
.containerLogoPlaneTrainDetail > img,
.containerLogoPlaneTrainSquare > img {
  object-fit: contain;
  min-height: 60px;
  max-height: 60px;
  border-radius: 50px;
}

.containerLogoPlaneTrainBG {
  background-color: white;
  padding: 1px;
}

.containerButtonLinkIcon {
  width: 20px;
  height: 20px;
  display: inline-block;
}

.containerLogoPlaneTrainDetail {
  background-color: transparent;
}

.onlineMinHeightTratta {
  min-height: 190px;
}

.footer {
  padding: 0.9375rem 0;
  text-align: center;
  /* Safari */
  /* Safari 6.1+ */
  display: flex;
}

.moreMarginBottom {
  margin-bottom: 100px;
}

.centralPartFilter {
  height: 78vh;
}

.openFilterSlider {
  position: fixed;
  z-index: 10;
  left: 41vw;
  width: 42vw;
  height: inherit;
}

.openFilterSliderMobile {
  width: 100%;
  z-index: 10;
  overflow: scroll;
  overflow-x: hidden;
}

.wrapFilterSliderMobile {
  width: 100vw;
  height: 100vh;
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
}

.filterColumn {
  z-index: 11;
}

.list-group.custom .list-group-item {
  background-color: var(--buttonColor);
  color: var(--textButtonColor);
  border-color: var(--buttonColor);
}
.list-group.custom .list-group-item:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.list-group.custom .list-group-item:last-child {
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
.list-group.custom .list-group-item.active {
  background-color: var(--hoverButtonColor);
  color: var(--hoverTextButtonColor);
  border-color: var(--hoverButtonColor);
}

.frame-container {
  position: relative;
  height: 0;
  overflow: hidden;
}

.frame-container iframe, .frame-container object, .frame-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.autocompleteSiapIcon {
  text-align: center;
  margin-right: 10px;
}

.offlinePage {
  margin: 0 auto;
  width: 190px;
}
.offlinePage .spinny-cogs {
  display: block;
  margin-bottom: 2rem;
}
.vantaUp {
  opacity: 0.9;
}

.modal-open .vantaUp {
  opacity: 1;
}

.vantaDown {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
}

.dropdown-menu {
  padding: 5px;
  font-size: 0.875rem;
}
.dropdown-menu .dropdown-item {
  padding: 0.15rem 0.15rem;
}

.chart-legend {
  list-style: none;
}

.ui-droppable.ui-droppable-hover.activeHoverDrop,
.ui-droppable.ui-droppable-hover .activeHoverDrop {
  background-color: rgba(9, 63.5, 72.2, 0.5) !important;
}

.heightScrollCardFullPage {
  height: calc(100% - 50px);
}

#contentComunicazione .card-text p:last-child,
#modalHelpComunicazioni .card-text p:last-child {
  margin-bottom: 0;
}

/* eventi passati */
.fc-siap-event-past.fc-h-event {
  background-color: #E0F4FF;
  border: 1px solid #E0F4FF;
}
.fc-siap-event-past .fc-event-title {
  color: #003366 !important;
}

/* eventi in corso – blu medio */
.fc-siap-event-current.fc-h-event {
  background-color: #66B2FF;
  border: 1px solid #66B2FF;
}

/* eventi futuri – blu scuro */
.fc-siap-event-future.fc-h-event {
  background-color: #004C99;
  border: 1px solid #004C99;
}

.authorizeSingleService.selected::after {
  content: "";
  background-color: var(--hoverButtonColor) !important;
}

.forced-checked {
  display: none !important;
}

.singleServizioAuto.selected::after {
  content: "";
  background-color: var(--hoverButtonColor) !important;
}