/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/ChatBubble.vue?vue&type=style&index=0&id=54ac6b98&scoped=true&lang=css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

#container[data-v-54ac6b98] {
  --icon: #E8F1F8;
  --background: #3B3B3B;
  --loop-animation-duration: 600ms;
  --click-1-fade-elements-duration:150ms;
  --click-1-animation-duration: 150ms;
  --click-2-animation-duration: 300ms;
  background-color: var(--background);
  display: flex;
  width: 3.125rem;
  height: 3.125rem;
  min-width: 3.125rem;
  min-height: 3.125rem;
  /*padding: 0.625rem;*/
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  overflow: hidden; 
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
}
@keyframes screen-kf-54ac6b98 {
0% {y:3.125rem; opacity:1;}
100% {y:1.9rem; opacity:1;}
}
.screen-animate[data-v-54ac6b98] {
  animation: screen-kf-54ac6b98 var(--loop-animation-duration) ease-in-out infinite;
}
@keyframes screen-stop-kf-54ac6b98 {
0% {opacity:1;}
33% {opacity:0;}
66% {opacity:0;}
100% {opacity:0;}
}
.screen-stop-animate[data-v-54ac6b98] {
  animation: screen-stop-kf-54ac6b98 var(--click-1-fade-elements-duration) ease-in-out forwards
}
@keyframes l-strip-kf-54ac6b98 {
0% {opacity:1;}
33% {opacity:0;}
66% {opacity:0;}
100% {opacity:0;}
}
.l-strip-animate[data-v-54ac6b98] {
  animation: l-strip-kf-54ac6b98 var(--click-1-fade-elements-duration) ease-in-out forwards
}
@keyframes l-strip-reverse-kf-54ac6b98 {
0% {opacity:0;}
33% {opacity:0;}
66% {opacity:0;}
100% {opacity:1;}
}
.l-strip-animate-reverse[data-v-54ac6b98] {
  animation: l-strip-reverse-kf-54ac6b98 var(--click-1-fade-elements-duration) ease-in-out forwards
}
@keyframes r-strip-kf-54ac6b98 {
0% {opacity:1;}
33% {opacity:0;}
66% {opacity:0;}
100% {opacity:0;}
}
.r-strip-animate[data-v-54ac6b98] {
  animation: r-strip-kf-54ac6b98 var(--click-1-fade-elements-duration) ease-in-out forwards
}
@keyframes r-strip-reverse-kf-54ac6b98 {
0% {opacity:0;}
33% {opacity:0;}
66% {opacity:0;}
100% {opacity:1;}
}
.r-strip-animate-reverse[data-v-54ac6b98] {
  animation: r-strip-reverse-kf-54ac6b98 var(--click-1-fade-elements-duration) ease-in-out forwards;
}
@keyframes r-mirror-kf-54ac6b98 {
0% {transform: translate(0rem,0rem); fill: var(--icon);}
33% {transform: translate(-0.0625rem, 1.625rem); fill: var(--background);}
66% {transform: translate(-0.0625rem,1.125rem); fill: var(--background);}
100% {transform: translate(-1.05625rem,-0.25rem); fill: var(--background);}
}
.r-mirror-animate[data-v-54ac6b98] {
  animation: r-mirror-kf-54ac6b98 var(--click-1-animation-duration) ease-in-out forwards
}
@keyframes r-mirror-reverse-kf-54ac6b98 {
100% {transform: translate(0rem,0rem); fill: var(--icon);}
0% {transform: translate(-1.05625rem,-0.25rem); fill: var(--background);}
}
.r-mirror-animate-reverse[data-v-54ac6b98] {
  animation: r-mirror-reverse-kf-54ac6b98 var(--click-2-animation-duration) ease-in-out forwards
}
@keyframes l-mirror-kf-54ac6b98 {
0% {transform: translate(0rem, 0rem); fill: var(--icon);}
33% {transform: translate(0.0625rem, 1.625rem); fill: var(--background);}
66% {transform: translate(0.0625rem, 1.125rem); fill: var(--background);}
100% {transform: translate(1.05625rem, -0.25rem); fill: var(--background);}
}
.l-mirror-animate[data-v-54ac6b98] {
  animation: l-mirror-kf-54ac6b98 var(--click-1-animation-duration) ease-in-out forwards
}
@keyframes l-mirror-reverse-kf-54ac6b98 {
100% {transform: translate(0rem,0rem); fill: var(--icon);}
0% {transform: translate(1.05625rem,-0.25rem); fill: var(--background);}
}
.l-mirror-animate-reverse[data-v-54ac6b98] {
  animation: l-mirror-reverse-kf-54ac6b98 var(--click-2-animation-duration) ease-in-out forwards;
}
@keyframes r-blinker-kf-54ac6b98 {
0% {cx:3.03125rem; cy:1.75rem; fill:var(--icon);}
33% {cx:3.15625rem; cy:2.9375rem; fill:var(--background);}
66% {cx:3.15625rem; cy:2.375rem; fill:var(--background);}
100% {cx:2.5625rem; cy:1.75rem; fill:var(--background);}
}
.r-blinker-animate[data-v-54ac6b98] {
  animation: r-blinker-kf-54ac6b98 var(--click-1-animation-duration) ease-in-out forwards
}
@keyframes r-blinker-reverse-kf-54ac6b98 {
100% {cx:3.03125rem; cy:1.75rem; fill:var(--icon);}
0% {cx:2.5625rem; cy:1.75rem; fill:var(--background);}
}
.r-blinker-animate-reverse[data-v-54ac6b98] {
  animation: r-blinker-reverse-kf-54ac6b98 var(--click-2-animation-duration) ease-in-out forwards;
}
@keyframes l-blinker-kf-54ac6b98 {
0% {cx:1.34375rem; cy:1.75rem; fill:var(--icon);}
33% {cx:1.21875rem; cy:2.9375rem; fill:var(--background);}
66% {cx:1.21875rem; cy:2.375rem; fill:var(--background);}
100% {cx:1.8125rem; cy:1.75rem; fill:var(--background);}
}
.l-blinker-animate[data-v-54ac6b98] {
  animation: l-blinker-kf-54ac6b98 var(--click-1-animation-duration) ease-in-out forwards
}
@keyframes l-blinker-reverse-kf-54ac6b98 {
100% {cx:1.34375rem; cy:1.75rem; fill:var(--icon);}
0% {cx:1.8125rem; cy:1.75rem; fill:var(--background);}
}
.l-blinker-animate-reverse[data-v-54ac6b98] {
  animation: l-blinker-reverse-kf-54ac6b98 var(--click-2-animation-duration) ease-in-out forwards;
}
@keyframes r-headlight-kf-54ac6b98 {
0% {cx:3.15625rem; cy:1.6875rem; rx:0.09375rem; ry:0.125rem; fill:var(--icon); stroke:var(--icon); stroke-width:0;}
33% {cx:3.15625rem; cy:2.9375rem; rx:0.09375rem; ry:0.125rem; fill:var(--icon); stroke:var(--icon); stroke-width:0;}
66% {cx:3.03125rem; cy:2.375rem; rx:0.5rem; ry:0.09375rem; fill:var(--icon); stroke:var(--icon); stroke-width:0.1875rem;}
100% {cx:3rem; cy:1.75rem; rx:0.375rem; ry:0.375rem; fill:none; stroke:var(--icon); stroke-width:0.1875rem;}
}
.r-headlight-animate[data-v-54ac6b98] {
  animation: r-headlight-kf-54ac6b98 var(--click-1-animation-duration) ease-in-out forwards
}
@keyframes r-headlight-reverse-kf-54ac6b98 {
100% {cx:3.15625rem; cy:1.6875rem; rx:0.09375rem; ry:0.125rem; fill:var(--icon); stroke:var(--icon); stroke-width:0;}
0% {cx:3rem; cy:1.75rem; rx:0.375rem; ry:0.375rem; fill:none; stroke:var(--icon); stroke-width:0.1875rem;}
}
.r-headlight-animate-reverse[data-v-54ac6b98] {
  animation: r-headlight-reverse-kf-54ac6b98 var(--click-2-animation-duration) ease-in-out forwards;
}
@keyframes l-headlight-kf-54ac6b98 {
0% {cx:1.21875rem; cy:1.6875rem; rx:0.09375rem; ry:0.125rem; fill:var(--icon); stroke:var(--icon); stroke-width:0;}
33% {cx:1.21875rem; cy:2.9375rem; rx:0.09375rem; ry:0.125rem; fill:var(--icon); stroke:var(--icon); stroke-width:0;}
66% {cx:1.34375rem; cy:2.375rem; rx:0.5rem; ry:0.09375rem; fill:var(--icon); stroke:var(--icon); stroke-width:0.1875rem;}
100% {cx:1.375rem; cy:1.75rem; rx:0.375rem; ry:0.375rem; fill:none; stroke:var(--icon); stroke-width:0.1875rem;}
}
.l-headlight-animate[data-v-54ac6b98] {
  animation: l-headlight-kf-54ac6b98 var(--click-1-animation-duration) ease-in-out forwards;
}
@keyframes l-headlight-reverse-kf-54ac6b98 {
100% {cx:1.21875rem; cy:1.6875rem; rx:0.09375rem; ry:0.125rem; fill:var(--icon); stroke:var(--icon); stroke-width:0;}
0% {cx:1.375rem; cy:1.75rem; rx:0.375rem; ry:0.375rem; fill:none; stroke:var(--icon); stroke-width:0.1875rem;}
}
.l-headlight-animate-reverse[data-v-54ac6b98] {
  animation: l-headlight-reverse-kf-54ac6b98 var(--click-2-animation-duration) ease-in-out forwards;
}
@keyframes grill-kf-54ac6b98 {
0% {x:1.4375rem; y:1.9375rem; width:1.5rem; height:0.125rem; rx:0.0625rem;}
33% {x:1.4375rem; y:2.5625rem; width:1.5rem; height:0.125rem; rx:0.0625rem;}
66% {x:0.8125rem; y:1.875rem; width:2.75rem; height:0.125rem; rx:0;}
100% {x:1.5625rem; y:0.9375rem; width:1.25rem; height:0.1875rem; rx:0;}
}
.grill-animate[data-v-54ac6b98] {
  animation: grill-kf-54ac6b98 var(--click-1-animation-duration) ease-in-out forwards
}
@keyframes grill-reverse-kf-54ac6b98 {
100% {x:1.4375rem; y:1.9375rem; width:1.5rem; height:0.125rem; rx:0.0625rem;}
0% {x:1.5625rem; y:0.9375rem; width:1.25rem; height:0.1875rem; rx:0;}
}
.grill-animate-reverse[data-v-54ac6b98] {
  animation: grill-reverse-kf-54ac6b98 var(--click-2-animation-duration) ease-in-out forwards;
}
@keyframes windshield-state-2-kf-54ac6b98 {
0% {x:2.09375rem; y:1rem; width:0.125rem; height:0.0625rem; fill:var(--background);}
33% {x:2.09375rem; y:2.625rem; width:0.125rem; height:0.375rem; fill:var(--icon);}
66% {x:2.09375rem; y:2rem; width:0.125rem; height:0.625rem; fill:var(--icon);}
100% {x:2.09375rem; y:1.0625rem; width:0.1875rem; height:1rem; fill:var(--icon);}
}
.windshield-state-2-animate[data-v-54ac6b98] {
  animation: windshield-state-2-kf-54ac6b98 var(--click-1-animation-duration) ease-in-out forwards
}
@keyframes windshield-state-2-reverse-kf-54ac6b98 {
100% {x:2.09375rem; y:1rem; width:0.125rem; height:0.0625rem; fill:var(--background);}
0% {x:2.09375rem; y:1.0625rem; width:0.1875rem; height:1rem; fill:var(--icon);}
}
.windshield-state-2-animate-reverse[data-v-54ac6b98] {
  animation: windshield-state-2-reverse-kf-54ac6b98 var(--click-2-animation-duration) ease-in-out forwards
}
@keyframes windshield-state-1-kf-54ac6b98 {
0% {transform:scale(1,1);}
33% {transform: scale(0.067,0.625) translate(0rem, 2.375rem);}
66% {transform: scale(0.067,0.625) translate(0rem, 1.375rem);}
100% {transform: scale(0.067,1) translate(0rem, 0.25rem);}
}
.windshield-state-1-animate[data-v-54ac6b98] {
  animation: windshield-state-1-kf-54ac6b98 var(--click-1-animation-duration) ease-in-out forwards;
  transform-origin: 49.5%;
}
@keyframes windshield-state-1-reverse-kf-54ac6b98 {
100% {transform:scale(1,1);}
0% {transform: scale(0.067,1) translate(0rem, 0.25rem);}
}
.windshield-state-1-animate-reverse[data-v-54ac6b98] {
  animation: windshield-state-1-reverse-kf-54ac6b98 var(--click-2-animation-duration) ease-in-out forwards;
  transform-origin: 49.5%;
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/filters/CityRangeFilter.vue?vue&type=style&index=0&id=fdc424d4&scoped=true&lang=css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.custom-slider-thumb[data-v-fdc424d4] {
  position: relative;
  width: 14px;
  height: 14px;
  cursor: pointer;
  justify-content: center;
  display: flex;
}
.city[data-v-fdc424d4] {
  height: 23px;
  width: 80px;
  position: relative;
  letter-spacing: 0.01em;
  line-height: 23px;
  display: inline-block;
  flex-shrink: 0;
}
.div4[data-v-fdc424d4] {
  align-self: stretch;
  position: relative;
  letter-spacing: 0.01em;
  line-height: 27px;
  font-weight: 600;
  display: inline-block;
}
.mpgmpge[data-v-fdc424d4] {
  height: 21px;
  position: relative;
  font-size: var(--paragraph-primary-medium-regular-size);
  line-height: 21px;
  display: flex;
  align-items: center;
}
.buttons7[data-v-fdc424d4] {
  flex: 1;
  border-radius: var(--br-9xs);
  background-color: var(--white-light);
  border: 0.5px solid var(--primary-accent-base);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 2px 15px;
  gap: var(--gap-4xs);
}
.buttons-wrapper[data-v-fdc424d4] {
  height: 33px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}
.city-parent[data-v-fdc424d4] {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  /* padding: 0px var(--padding-102xl) 0px 0px; */
  gap: var(--gap-3xs);
}
.graph-child[data-v-fdc424d4] {
  height: 12px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child1[data-v-fdc424d4],
.graph-child26[data-v-fdc424d4],
.graph-child51[data-v-fdc424d4],
.graph-child76[data-v-fdc424d4] {
  height: 25px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child2[data-v-fdc424d4],
.graph-child27[data-v-fdc424d4],
.graph-child52[data-v-fdc424d4],
.graph-child77[data-v-fdc424d4] {
  height: 10px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child3[data-v-fdc424d4],
.graph-child28[data-v-fdc424d4],
.graph-child53[data-v-fdc424d4],
.graph-child78[data-v-fdc424d4] {
  height: 12px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child4[data-v-fdc424d4],
.graph-child29[data-v-fdc424d4],
.graph-child54[data-v-fdc424d4],
.graph-child79[data-v-fdc424d4] {
  height: 16px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child5[data-v-fdc424d4],
.graph-child30[data-v-fdc424d4],
.graph-child55[data-v-fdc424d4],
.graph-child80[data-v-fdc424d4] {
  height: 12px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child6[data-v-fdc424d4],
.graph-child31[data-v-fdc424d4],
.graph-child56[data-v-fdc424d4],
.graph-child81[data-v-fdc424d4] {
  height: 16px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child7[data-v-fdc424d4],
.graph-child32[data-v-fdc424d4],
.graph-child57[data-v-fdc424d4],
.graph-child82[data-v-fdc424d4] {
  height: 4px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child8[data-v-fdc424d4],
.graph-child33[data-v-fdc424d4],
.graph-child58[data-v-fdc424d4],
.graph-child83[data-v-fdc424d4] {
  height: 6px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child9[data-v-fdc424d4],
.graph-child34[data-v-fdc424d4],
.graph-child59[data-v-fdc424d4],
.graph-child84[data-v-fdc424d4] {
  height: 6px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child10[data-v-fdc424d4],
.graph-child35[data-v-fdc424d4],
.graph-child60[data-v-fdc424d4],
.graph-child85[data-v-fdc424d4] {
  height: 4px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child11[data-v-fdc424d4],
.graph-child36[data-v-fdc424d4],
.graph-child61[data-v-fdc424d4],
.graph-child86[data-v-fdc424d4] {
  height: 25px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child12[data-v-fdc424d4],
.graph-child37[data-v-fdc424d4],
.graph-child62[data-v-fdc424d4],
.graph-child87[data-v-fdc424d4] {
  height: 21px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child13[data-v-fdc424d4],
.graph-child38[data-v-fdc424d4],
.graph-child63[data-v-fdc424d4],
.graph-child88[data-v-fdc424d4] {
  height: 10px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child14[data-v-fdc424d4],
.graph-child39[data-v-fdc424d4],
.graph-child64[data-v-fdc424d4],
.graph-child89[data-v-fdc424d4] {
  height: 30px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child15[data-v-fdc424d4],
.graph-child40[data-v-fdc424d4],
.graph-child65[data-v-fdc424d4],
.graph-child90[data-v-fdc424d4] {
  height: 4px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child16[data-v-fdc424d4],
.graph-child41[data-v-fdc424d4],
.graph-child66[data-v-fdc424d4],
.graph-child91[data-v-fdc424d4] {
  height: 6px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child17[data-v-fdc424d4],
.graph-child42[data-v-fdc424d4],
.graph-child67[data-v-fdc424d4],
.graph-child92[data-v-fdc424d4] {
  height: 8px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child18[data-v-fdc424d4],
.graph-child43[data-v-fdc424d4],
.graph-child68[data-v-fdc424d4],
.graph-child93[data-v-fdc424d4] {
  height: 6px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child19[data-v-fdc424d4],
.graph-child44[data-v-fdc424d4],
.graph-child69[data-v-fdc424d4],
.graph-child94[data-v-fdc424d4] {
  height: 4px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child20[data-v-fdc424d4],
.graph-child45[data-v-fdc424d4],
.graph-child70[data-v-fdc424d4],
.graph-child95[data-v-fdc424d4] {
  height: 8px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child21[data-v-fdc424d4],
.graph-child46[data-v-fdc424d4],
.graph-child71[data-v-fdc424d4],
.graph-child96[data-v-fdc424d4] {
  height: 26px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child22[data-v-fdc424d4],
.graph-child47[data-v-fdc424d4],
.graph-child72[data-v-fdc424d4],
.graph-child97[data-v-fdc424d4] {
  height: 26px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child23[data-v-fdc424d4],
.graph-child48[data-v-fdc424d4],
.graph-child73[data-v-fdc424d4],
.graph-child98[data-v-fdc424d4] {
  height: 4px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child24[data-v-fdc424d4],
.graph-child49[data-v-fdc424d4],
.graph-child74[data-v-fdc424d4],
.graph-child99[data-v-fdc424d4] {
  height: 8px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child25[data-v-fdc424d4],
.graph-child50[data-v-fdc424d4],
.graph-child75[data-v-fdc424d4],
.graph-child100[data-v-fdc424d4] {
  height: 26px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph[data-v-fdc424d4] {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--gap-11xs);
  width: 100%;
}
.range-selector[data-v-fdc424d4] {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-6xs);
  box-sizing: border-box;
  max-width: 100%;
  text-align: center;
}
.value-filter[data-v-fdc424d4] {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-21xl);
  flex-shrink: 0;
  max-width: 100%;
  text-align: left;
  font-size: var(--paragraph-secondary-large-semibold-size);
  color: var(--black-default);
  font-family: var(--paragraph-secondary-large-semibold);
}


/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/filters/HighwayRangeFilter.vue?vue&type=style&index=0&id=5bd8458c&scoped=true&lang=css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.custom-slider-thumb[data-v-5bd8458c] {
  position: relative;
  width: 14px;
  height: 14px;
  cursor: pointer;
  justify-content: center;
  display: flex;
}
.city[data-v-5bd8458c] {
  height: 23px;
  width: 80px;
  position: relative;
  letter-spacing: 0.01em;
  line-height: 23px;
  display: inline-block;
  flex-shrink: 0;
}
.div4[data-v-5bd8458c] {
  align-self: stretch;
  position: relative;
  letter-spacing: 0.01em;
  line-height: 27px;
  font-weight: 600;
  display: inline-block;
}
.mpgmpge[data-v-5bd8458c] {
  height: 21px;
  position: relative;
  font-size: var(--paragraph-primary-medium-regular-size);
  line-height: 21px;
  display: flex;
  align-items: center;
}
.buttons7[data-v-5bd8458c] {
  flex: 1;
  border-radius: var(--br-9xs);
  background-color: var(--white-light);
  border: 0.5px solid var(--primary-accent-base);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 2px 15px;
  gap: var(--gap-4xs);
}
.buttons-wrapper[data-v-5bd8458c] {
  height: 33px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}
.city-parent[data-v-5bd8458c] {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  /* padding: 0px var(--padding-102xl) 0px 0px; */
  gap: var(--gap-3xs);
}
.slider-icon[data-v-5bd8458c] {
  align-self: stretch;
  height: 24px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}
.graph-child-highway[data-v-5bd8458c] {
  height: 12px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-highway1[data-v-5bd8458c],
.graph-child-highway26[data-v-5bd8458c],
.graph-child-highway51[data-v-5bd8458c],
.graph-child-highway76[data-v-5bd8458c] {
  height: 25px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-highway2[data-v-5bd8458c],
.graph-child-highway27[data-v-5bd8458c],
.graph-child-highway52[data-v-5bd8458c],
.graph-child-highway77[data-v-5bd8458c] {
  height: 10px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-highway3[data-v-5bd8458c],
.graph-child-highway28[data-v-5bd8458c],
.graph-child-highway53[data-v-5bd8458c],
.graph-child-highway78[data-v-5bd8458c] {
  height: 12px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-highway4[data-v-5bd8458c],
.graph-child-highway29[data-v-5bd8458c],
.graph-child-highway54[data-v-5bd8458c],
.graph-child-highway79[data-v-5bd8458c] {
  height: 16px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-highway5[data-v-5bd8458c],
.graph-child-highway30[data-v-5bd8458c],
.graph-child-highway55[data-v-5bd8458c],
.graph-child-highway80[data-v-5bd8458c] {
  height: 12px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-highway6[data-v-5bd8458c],
.graph-child-highway31[data-v-5bd8458c],
.graph-child-highway56[data-v-5bd8458c],
.graph-child-highway81[data-v-5bd8458c] {
  height: 16px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-highway7[data-v-5bd8458c],
.graph-child-highway32[data-v-5bd8458c],
.graph-child-highway57[data-v-5bd8458c],
.graph-child-highway82[data-v-5bd8458c] {
  height: 4px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-highway8[data-v-5bd8458c],
.graph-child-highway33[data-v-5bd8458c],
.graph-child-highway58[data-v-5bd8458c],
.graph-child-highway83[data-v-5bd8458c] {
  height: 6px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-highway9[data-v-5bd8458c],
.graph-child-highway34[data-v-5bd8458c],
.graph-child-highway59[data-v-5bd8458c],
.graph-child-highway84[data-v-5bd8458c] {
  height: 6px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-highway10[data-v-5bd8458c],
.graph-child-highway35[data-v-5bd8458c],
.graph-child-highway60[data-v-5bd8458c],
.graph-child-highway85[data-v-5bd8458c] {
  height: 4px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-highway11[data-v-5bd8458c],
.graph-child-highway36[data-v-5bd8458c],
.graph-child-highway61[data-v-5bd8458c],
.graph-child-highway86[data-v-5bd8458c] {
  height: 25px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-highway12[data-v-5bd8458c],
.graph-child-highway37[data-v-5bd8458c],
.graph-child-highway62[data-v-5bd8458c],
.graph-child-highway87[data-v-5bd8458c] {
  height: 21px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-highway13[data-v-5bd8458c],
.graph-child-highway38[data-v-5bd8458c],
.graph-child-highway63[data-v-5bd8458c],
.graph-child-highway88[data-v-5bd8458c] {
  height: 10px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-highway14[data-v-5bd8458c],
.graph-child-highway39[data-v-5bd8458c],
.graph-child-highway64[data-v-5bd8458c],
.graph-child-highway89[data-v-5bd8458c] {
  height: 30px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-highway15[data-v-5bd8458c],
.graph-child-highway40[data-v-5bd8458c],
.graph-child-highway65[data-v-5bd8458c],
.graph-child-highway90[data-v-5bd8458c] {
  height: 4px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-highway16[data-v-5bd8458c],
.graph-child-highway41[data-v-5bd8458c],
.graph-child-highway66[data-v-5bd8458c],
.graph-child-highway91[data-v-5bd8458c] {
  height: 6px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-highway17[data-v-5bd8458c],
.graph-child-highway42[data-v-5bd8458c],
.graph-child-highway67[data-v-5bd8458c],
.graph-child-highway92[data-v-5bd8458c] {
  height: 8px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-highway18[data-v-5bd8458c],
.graph-child-highway43[data-v-5bd8458c],
.graph-child-highway68[data-v-5bd8458c],
.graph-child-highway93[data-v-5bd8458c] {
  height: 6px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-highway19[data-v-5bd8458c],
.graph-child-highway44[data-v-5bd8458c],
.graph-child-highway69[data-v-5bd8458c],
.graph-child-highway94[data-v-5bd8458c] {
  height: 4px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-highway20[data-v-5bd8458c],
.graph-child-highway45[data-v-5bd8458c],
.graph-child-highway70[data-v-5bd8458c],
.graph-child-highway95[data-v-5bd8458c] {
  height: 8px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-highway21[data-v-5bd8458c],
.graph-child-highway46[data-v-5bd8458c],
.graph-child-highway71[data-v-5bd8458c],
.graph-child-highway96[data-v-5bd8458c] {
  height: 26px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-highway22[data-v-5bd8458c],
.graph-child-highway47[data-v-5bd8458c],
.graph-child-highway72[data-v-5bd8458c],
.graph-child-highway97[data-v-5bd8458c] {
  height: 26px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-highway23[data-v-5bd8458c],
.graph-child-highway48[data-v-5bd8458c],
.graph-child-highway73[data-v-5bd8458c],
.graph-child-highway98[data-v-5bd8458c] {
  height: 4px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-highway24[data-v-5bd8458c],
.graph-child-highway49[data-v-5bd8458c],
.graph-child-highway74[data-v-5bd8458c],
.graph-child-highway99[data-v-5bd8458c] {
  height: 8px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-highway25[data-v-5bd8458c],
.graph-child-highway50[data-v-5bd8458c],
.graph-child-highway75[data-v-5bd8458c],
.graph-child-highway100[data-v-5bd8458c] {
  height: 26px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.table-layout[data-v-5bd8458c] {
  height: 25px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph[data-v-5bd8458c] {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--gap-11xs);
  width: 100%;
}
.range-selector[data-v-5bd8458c] {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-6xs);
  box-sizing: border-box;
  max-width: 100%;
  text-align: center;
}
.value-filter[data-v-5bd8458c] {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-21xl);
  flex-shrink: 0;
  max-width: 100%;
  text-align: left;
  font-size: var(--paragraph-secondary-large-semibold-size);
  color: var(--black-default);
  font-family: var(--paragraph-secondary-large-semibold);
}


/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/filters/CommonFilterSection.vue?vue&type=style&index=0&id=6e017b0e&scoped=true&lang=css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.condition-container[data-v-6e017b0e] {
  align-self: stretch;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  gap: 10px;
.condition[data-v-6e017b0e] {
    position: relative;
    letter-spacing: 0.02em;
    line-height: 24px;
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    min-width: 80px;
}
.condition-items-container[data-v-6e017b0e] {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-3xs);
.condition-item[data-v-6e017b0e] {
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: var(--gap-3xs);
      flex-wrap: wrap;
.button-container[data-v-6e017b0e] {
        height: 33px;
        border-radius: var(--br-9xs);
        background-color: var(--white-default);
        border: 0.5px solid var(--primary-accent-base);
        box-sizing: border-box;
        overflow: hidden;
        flex-shrink: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: var(--padding-10xs) var(--padding-sm) var(--padding-10xs)
          var(--padding-4xs);
        gap: var(--gap-3xs);
        cursor: pointer;
.check-icon[data-v-6e017b0e] {
          height: 16px;
          width: 16px;
          position: relative;
}
.button-text[data-v-6e017b0e] {
          position: relative;
          letter-spacing: 0.01em;
          line-height: 27px;
          font-weight: 600;
          display: inline-block;
          font-size: 16px;
          text-align: left;
}
}
}
}
}
.filters-text-container[data-v-6e017b0e] {
  align-self: stretch;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  gap: var(--gap-xl);
.filters[data-v-6e017b0e] {
    position: relative;
    letter-spacing: 0.02em;
    line-height: 27px;
    display: inline-block;
    min-width: 54px;
    font-weight: 700;
    text-align: left;
    color: #3b3b3b;
    font-size: 18px;
}
.separator-icon[data-v-6e017b0e] {
    align-self: stretch;
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    flex-shrink: 0;
}
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/filters/PriceRangeFilter.vue?vue&type=style&index=0&id=f93d7c60&scoped=true&lang=css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.filters-text-container[data-v-f93d7c60] {
  align-self: stretch;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  gap: var(--gap-xl);
.filters[data-v-f93d7c60] {
    position: relative;
    letter-spacing: 0.02em;
    line-height: 27px;
    display: inline-block;
    min-width: 54px;
    font-weight: 700;
    text-align: left;
    color: #3b3b3b;
    font-size: 18px;
}
.separator-icon[data-v-f93d7c60] {
    align-self: stretch;
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    flex-shrink: 0;
}
}
.custom-slider-thumb[data-v-f93d7c60] {
  position: relative;
  width: 14px;
  height: 14px;
  cursor: pointer;
  justify-content: center;
  display: flex;
}
.price-range[data-v-f93d7c60] {
  width: 80px;
  position: relative;
  letter-spacing: 0.02em;
  line-height: 24px;
  display: inline-block;
  flex-shrink: 0;
  font-weight: 700;
}
.range-slider-set[data-v-f93d7c60] {
  position: relative;
  letter-spacing: 0.01em;
  line-height: 27px;
  font-weight: 600;
}
.buttons12[data-v-f93d7c60] {
  border-radius: var(--br-9xs);
  background-color: var(--white-light);
  border: 0.5px solid var(--primary-accent-base);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-10xs) var(--padding-4xs);
  white-space: nowrap;
}
.modal-dialogue[data-v-f93d7c60] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.card-stack[data-v-f93d7c60] {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0px var(--padding-105xl) 0px 0px;
  gap: var(--gap-3xs);
}
.city[data-v-f93d7c60] {
  height: 23px;
  width: 80px;
  position: relative;
  letter-spacing: 0.01em;
  line-height: 23px;
  display: inline-block;
  flex-shrink: 0;
  font-weight: 700;
}
.div4[data-v-f93d7c60] {
  align-self: stretch;
  width: auto;
  position: relative;
  letter-spacing: 0.01em;
  line-height: 27px;
  font-weight: 600;
  display: inline-block;
}
.mpgmpge[data-v-f93d7c60] {
  height: 21px;
  width: 75px;
  position: relative;
  font-size: var(--paragraph-primary-medium-regular-size);
  line-height: 21px;
  display: flex;
  align-items: center;
}
.buttons7[data-v-f93d7c60] {
  flex: 1;
  border-radius: var(--br-9xs);
  background-color: var(--white-light);
  border: 0.5px solid var(--primary-accent-base);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 2px 15px;
  gap: var(--gap-4xs);
}
.buttons-wrapper[data-v-f93d7c60] {
  height: 33px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}
.city-parent[data-v-f93d7c60] {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  /* padding: 0px var(--padding-105xl) 0px 0px; */
  gap: var(--gap-3xs);
}
.graph-child-price[data-v-f93d7c60] {
  height: 12px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-price1[data-v-f93d7c60],
.graph-child-price26[data-v-f93d7c60],
.graph-child-price51[data-v-f93d7c60],
.graph-child-price76[data-v-f93d7c60] {
  height: 25px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-price2[data-v-f93d7c60],
.graph-child-price27[data-v-f93d7c60],
.graph-child-price52[data-v-f93d7c60],
.graph-child-price77[data-v-f93d7c60] {
  height: 10px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-price3[data-v-f93d7c60],
.graph-child-price28[data-v-f93d7c60],
.graph-child-price53[data-v-f93d7c60],
.graph-child-price78[data-v-f93d7c60] {
  height: 12px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-price4[data-v-f93d7c60],
.graph-child-price29[data-v-f93d7c60],
.graph-child-price54[data-v-f93d7c60],
.graph-child-price79[data-v-f93d7c60] {
  height: 16px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-price5[data-v-f93d7c60],
.graph-child-price30[data-v-f93d7c60],
.graph-child-price55[data-v-f93d7c60],
.graph-child-price80[data-v-f93d7c60] {
  height: 12px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-price6[data-v-f93d7c60],
.graph-child-price31[data-v-f93d7c60],
.graph-child-price56[data-v-f93d7c60],
.graph-child-price81[data-v-f93d7c60] {
  height: 16px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-price7[data-v-f93d7c60],
.graph-child-price32[data-v-f93d7c60],
.graph-child-price57[data-v-f93d7c60],
.graph-child-price82[data-v-f93d7c60] {
  height: 4px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-price8[data-v-f93d7c60],
.graph-child-price33[data-v-f93d7c60],
.graph-child-price58[data-v-f93d7c60],
.graph-child-price83[data-v-f93d7c60] {
  height: 6px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-price9[data-v-f93d7c60],
.graph-child-price34[data-v-f93d7c60],
.graph-child-price59[data-v-f93d7c60],
.graph-child-price84[data-v-f93d7c60] {
  height: 6px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-price10[data-v-f93d7c60],
.graph-child-price35[data-v-f93d7c60],
.graph-child-price60[data-v-f93d7c60],
.graph-child-price85[data-v-f93d7c60] {
  height: 4px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-price11[data-v-f93d7c60],
.graph-child-price36[data-v-f93d7c60],
.graph-child-price61[data-v-f93d7c60],
.graph-child-price86[data-v-f93d7c60] {
  height: 25px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-price12[data-v-f93d7c60],
.graph-child-price37[data-v-f93d7c60],
.graph-child-price62[data-v-f93d7c60],
.graph-child-price87[data-v-f93d7c60] {
  height: 21px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-price13[data-v-f93d7c60],
.graph-child-price38[data-v-f93d7c60],
.graph-child-price63[data-v-f93d7c60],
.graph-child-price88[data-v-f93d7c60] {
  height: 10px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-price14[data-v-f93d7c60],
.graph-child-price39[data-v-f93d7c60],
.graph-child-price64[data-v-f93d7c60],
.graph-child-price89[data-v-f93d7c60] {
  height: 30px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-price15[data-v-f93d7c60],
.graph-child-price40[data-v-f93d7c60],
.graph-child-price65[data-v-f93d7c60],
.graph-child-price90[data-v-f93d7c60] {
  height: 4px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-price16[data-v-f93d7c60],
.graph-child-price41[data-v-f93d7c60],
.graph-child-price66[data-v-f93d7c60],
.graph-child-price91[data-v-f93d7c60] {
  height: 6px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-price17[data-v-f93d7c60],
.graph-child-price42[data-v-f93d7c60],
.graph-child-price67[data-v-f93d7c60],
.graph-child-price92[data-v-f93d7c60] {
  height: 8px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-price18[data-v-f93d7c60],
.graph-child-price43[data-v-f93d7c60],
.graph-child-price68[data-v-f93d7c60],
.graph-child-price93[data-v-f93d7c60] {
  height: 6px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-price19[data-v-f93d7c60],
.graph-child-price44[data-v-f93d7c60],
.graph-child-price69[data-v-f93d7c60],
.graph-child-price94[data-v-f93d7c60] {
  height: 4px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-price20[data-v-f93d7c60],
.graph-child-price45[data-v-f93d7c60],
.graph-child-price70[data-v-f93d7c60],
.graph-child-price95[data-v-f93d7c60] {
  height: 8px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-price21[data-v-f93d7c60],
.graph-child-price46[data-v-f93d7c60],
.graph-child-price71[data-v-f93d7c60],
.graph-child-price96[data-v-f93d7c60] {
  height: 26px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-price22[data-v-f93d7c60],
.graph-child-price47[data-v-f93d7c60],
.graph-child-price72[data-v-f93d7c60],
.graph-child-price97[data-v-f93d7c60] {
  height: 26px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-price23[data-v-f93d7c60],
.graph-child-price48[data-v-f93d7c60],
.graph-child-price73[data-v-f93d7c60],
.graph-child-price98[data-v-f93d7c60] {
  height: 4px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-price24[data-v-f93d7c60],
.graph-child-price49[data-v-f93d7c60],
.graph-child-price74[data-v-f93d7c60],
.graph-child-price99[data-v-f93d7c60] {
  height: 8px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-price25[data-v-f93d7c60],
.graph-child-price50[data-v-f93d7c60],
.graph-child-price75[data-v-f93d7c60],
.graph-child-price100[data-v-f93d7c60] {
  height: 26px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph[data-v-f93d7c60] {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--gap-11xs);
  width: 100%;
}
.range-selector[data-v-f93d7c60] {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-6xs);
  box-sizing: border-box;
  max-width: 100%;
  text-align: center;
}
.value-filter[data-v-f93d7c60] {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-21xl);
  flex-shrink: 0;
  max-width: 100%;
  text-align: left;
  font-size: var(--paragraph-secondary-large-semibold-size);
  color: var(--black-default);
  font-family: var(--paragraph-secondary-large-semibold);
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/filters/MileageRangeFilter.vue?vue&type=style&index=0&id=79ab652f&scoped=true&lang=css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.custom-slider-thumb[data-v-79ab652f] {
  position: relative;
  width: 14px;
  height: 14px;
  cursor: pointer;
  justify-content: center;
  display: flex;
}
.city[data-v-79ab652f] {
  height: 23px;
  width: 80px;
  position: relative;
  letter-spacing: 0.01em;
  line-height: 23px;
  display: inline-block;
  flex-shrink: 0;
  font-weight: 700;
}
.div4[data-v-79ab652f] {
  align-self: stretch;
  width: auto;
  position: relative;
  letter-spacing: 0.01em;
  line-height: 27px;
  font-weight: 600;
  display: inline-block;
}
.mpgmpge[data-v-79ab652f] {
  height: 21px;
  width: auto;
  position: relative;
  font-size: var(--paragraph-primary-medium-regular-size);
  line-height: 21px;
  display: flex;
  align-items: center;
}
.buttons7[data-v-79ab652f] {
  flex: 1;
  border-radius: var(--br-9xs);
  background-color: var(--white-light);
  border: 0.5px solid var(--primary-accent-base);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 2px 15px;
  gap: var(--gap-4xs);
}
.buttons-wrapper[data-v-79ab652f] {
  height: 33px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}
.city-parent[data-v-79ab652f] {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-3xs);
}
.graph-child-mileage[data-v-79ab652f] {
  height: 12px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-mileage1[data-v-79ab652f],
.graph-child-mileage26[data-v-79ab652f],
.graph-child-mileage51[data-v-79ab652f],
.graph-child-mileage76[data-v-79ab652f] {
  height: 25px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-mileage2[data-v-79ab652f],
.graph-child-mileage27[data-v-79ab652f],
.graph-child-mileage52[data-v-79ab652f],
.graph-child-mileage77[data-v-79ab652f] {
  height: 10px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-mileage3[data-v-79ab652f],
.graph-child-mileage28[data-v-79ab652f],
.graph-child-mileage53[data-v-79ab652f],
.graph-child-mileage78[data-v-79ab652f] {
  height: 12px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-mileage4[data-v-79ab652f],
.graph-child-mileage29[data-v-79ab652f],
.graph-child-mileage54[data-v-79ab652f],
.graph-child-mileage79[data-v-79ab652f] {
  height: 16px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-mileage5[data-v-79ab652f],
.graph-child-mileage30[data-v-79ab652f],
.graph-child-mileage55[data-v-79ab652f],
.graph-child-mileage80[data-v-79ab652f] {
  height: 12px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-mileage6[data-v-79ab652f],
.graph-child-mileage31[data-v-79ab652f],
.graph-child-mileage56[data-v-79ab652f],
.graph-child-mileage81[data-v-79ab652f] {
  height: 16px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-mileage7[data-v-79ab652f],
.graph-child-mileage32[data-v-79ab652f],
.graph-child-mileage57[data-v-79ab652f],
.graph-child-mileage82[data-v-79ab652f] {
  height: 4px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-mileage8[data-v-79ab652f],
.graph-child-mileage33[data-v-79ab652f],
.graph-child-mileage58[data-v-79ab652f],
.graph-child-mileage83[data-v-79ab652f] {
  height: 6px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-mileage9[data-v-79ab652f],
.graph-child-mileage34[data-v-79ab652f],
.graph-child-mileage59[data-v-79ab652f],
.graph-child-mileage84[data-v-79ab652f] {
  height: 6px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-mileage10[data-v-79ab652f],
.graph-child-mileage35[data-v-79ab652f],
.graph-child-mileage60[data-v-79ab652f],
.graph-child-mileage85[data-v-79ab652f] {
  height: 4px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-mileage11[data-v-79ab652f],
.graph-child-mileage36[data-v-79ab652f],
.graph-child-mileage61[data-v-79ab652f],
.graph-child-mileage86[data-v-79ab652f] {
  height: 25px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-mileage12[data-v-79ab652f],
.graph-child-mileage37[data-v-79ab652f],
.graph-child-mileage62[data-v-79ab652f],
.graph-child-mileage87[data-v-79ab652f] {
  height: 21px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-mileage13[data-v-79ab652f],
.graph-child-mileage38[data-v-79ab652f],
.graph-child-mileage63[data-v-79ab652f],
.graph-child-mileage88[data-v-79ab652f] {
  height: 10px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-mileage14[data-v-79ab652f],
.graph-child-mileage39[data-v-79ab652f],
.graph-child-mileage64[data-v-79ab652f],
.graph-child-mileage89[data-v-79ab652f] {
  height: 30px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-mileage15[data-v-79ab652f],
.graph-child-mileage40[data-v-79ab652f],
.graph-child-mileage65[data-v-79ab652f],
.graph-child-mileage90[data-v-79ab652f] {
  height: 4px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-mileage16[data-v-79ab652f],
.graph-child-mileage41[data-v-79ab652f],
.graph-child-mileage66[data-v-79ab652f],
.graph-child-mileage91[data-v-79ab652f] {
  height: 6px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-mileage17[data-v-79ab652f],
.graph-child-mileage42[data-v-79ab652f],
.graph-child-mileage67[data-v-79ab652f],
.graph-child-mileage92[data-v-79ab652f] {
  height: 8px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-mileage18[data-v-79ab652f],
.graph-child-mileage43[data-v-79ab652f],
.graph-child-mileage68[data-v-79ab652f],
.graph-child-mileage93[data-v-79ab652f] {
  height: 6px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-mileage19[data-v-79ab652f],
.graph-child-mileage44[data-v-79ab652f],
.graph-child-mileage69[data-v-79ab652f],
.graph-child-mileage94[data-v-79ab652f] {
  height: 4px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-mileage20[data-v-79ab652f],
.graph-child-mileage45[data-v-79ab652f],
.graph-child-mileage70[data-v-79ab652f],
.graph-child-mileage95[data-v-79ab652f] {
  height: 8px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-mileage21[data-v-79ab652f],
.graph-child-mileage46[data-v-79ab652f],
.graph-child-mileage71[data-v-79ab652f],
.graph-child-mileage96[data-v-79ab652f] {
  height: 26px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-mileage22[data-v-79ab652f],
.graph-child-mileage47[data-v-79ab652f],
.graph-child-mileage72[data-v-79ab652f],
.graph-child-mileage97[data-v-79ab652f] {
  height: 26px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-mileage23[data-v-79ab652f],
.graph-child-mileage48[data-v-79ab652f],
.graph-child-mileage73[data-v-79ab652f],
.graph-child-mileage98[data-v-79ab652f] {
  height: 4px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-mileage24[data-v-79ab652f],
.graph-child-mileage49[data-v-79ab652f],
.graph-child-mileage74[data-v-79ab652f],
.graph-child-mileage99[data-v-79ab652f] {
  height: 8px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph-child-mileage25[data-v-79ab652f],
.graph-child-mileage50[data-v-79ab652f],
.graph-child-mileage75[data-v-79ab652f],
.graph-child-mileage100[data-v-79ab652f] {
  height: 26px;
  width: 5px;
  position: relative;
  background-color: var(--gray-medium);
}
.graph[data-v-79ab652f] {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--gap-11xs);
  width: 100%;
}
.range-selector[data-v-79ab652f] {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-6xs);
  box-sizing: border-box;
  max-width: 100%;
  text-align: center;
}
.value-filter[data-v-79ab652f] {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-21xl);
  flex-shrink: 0;
  max-width: 100%;
  text-align: left;
  font-size: var(--paragraph-secondary-large-semibold-size);
  color: var(--black-default);
  font-family: var(--paragraph-secondary-large-semibold);
  padding-bottom: 3rem;
}


/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/filters/MainFilters.vue?vue&type=style&index=0&id=e06f1a24&scoped=true&lang=css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.apply-button[data-v-e06f1a24] {
  position: relative;
  letter-spacing: 0.01em;
  line-height: 24px;
  font-weight: 600;
  display: inline-block;
  min-width: 79px;
  white-space: nowrap;
}
.apply-button-container[data-v-e06f1a24] {
  border-radius: var(--br-9xs);
  background-color: var(--primary-accent-base);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--padding-7xs) var(--padding-11xl);
  white-space: nowrap;
  flex-shrink: 0;
  z-index: 1;
  color: var(--white-dark);
  /* width: 50%; */
  position: absolute;
  right: 24px;
  bottom: 30px;
  cursor: pointer;
}
.seatting-any-button[data-v-e06f1a24] {
  align-self: stretch;
  width: 28px;
  position: relative;
  letter-spacing: 0.01em;
  line-height: 23px;
  display: inline-block;
}
.seatting-2-button[data-v-e06f1a24] {
  align-self: stretch;
  width: 10px;
  position: relative;
  letter-spacing: 0.01em;
  line-height: 23px;
  display: inline-block;
}
.seatting-any-button-container[data-v-e06f1a24] {
  align-self: stretch;
  width: 58px;
  border-radius: var(--br-9xs);
  border: 1px solid var(--black-default);
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-4xs-5) var(--padding-sm);
}
.seatting-2-button-container[data-v-e06f1a24] {
  align-self: stretch;
  width: 58px;
  border-radius: var(--br-9xs);
  border: 1px solid var(--black-default);
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-4xs-5) var(--padding-4xl);
}
.seatting-4-button[data-v-e06f1a24] {
  align-self: stretch;
  flex: 1;
  position: relative;
  letter-spacing: 0.01em;
  line-height: 27px;
}
.seatting-4-button-container[data-v-e06f1a24] {
  align-self: stretch;
  width: 58px;
  border-radius: var(--br-9xs);
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-6xs-5) var(--padding-5xl);
  box-sizing: border-box;
  border: 1px solid var(--black-default);
}
.seating-selected[data-v-e06f1a24] {
  background-color: var(--primary-accent-base);
  color: var(--white-dark);
}
.seatting-5-button[data-v-e06f1a24] {
  align-self: stretch;
  width: 10px;
  position: relative;
  letter-spacing: 0.01em;
  line-height: 23px;
  display: inline-block;
}
.seatting-5-button-container[data-v-e06f1a24] {
  align-self: stretch;
  width: 58px;
  border-radius: var(--br-9xs);
  border: 1px solid var(--black-default);
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-4xs-5) var(--padding-4xl);
}
.seatting-6-button[data-v-e06f1a24] {
  align-self: stretch;
  width: 10px;
  position: relative;
  letter-spacing: 0.01em;
  line-height: 23px;
  display: inline-block;
}
.seatting-6-button-container[data-v-e06f1a24] {
  align-self: stretch;
  width: 58px;
  border-radius: var(--br-9xs);
  border: 1px solid var(--black-default);
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-4xs-5) var(--padding-4xl);
}
.seatting-8-button[data-v-e06f1a24] {
  align-self: stretch;
  width: 10px;
  position: relative;
  letter-spacing: 0.01em;
  line-height: 23px;
  display: inline-block;
}
.seatting-8-button-container[data-v-e06f1a24] {
  align-self: stretch;
  width: 58px;
  border-radius: var(--br-9xs);
  border: 1px solid var(--black-default);
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-4xs-5) var(--padding-4xl);
}
.filter-container[data-v-e06f1a24] {
  align-self: stretch;
  height: 200px;
  /* height: 358px; */
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
  margin-top: -1px;
  gap: 10px;
  background: #f1f0f2;
  /* padding: var(--padding-9xs) var(--padding-5xl); */
  padding: 24px 24px 30px 24px;
}
.data-synchronizer[data-v-e06f1a24] {
  align-self: stretch;
  /* height: 200px; */
  overflow-y: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  position: relative;
  gap: var(--gap-21xl);
  max-width: 100%;
  width: 100%;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none;
}
.data-synchronizer[data-v-e06f1a24]::-webkit-scrollbar {
  display: none;
}
.filters-text-container[data-v-e06f1a24] {
  align-self: stretch;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  gap: var(--gap-xl);
.filters[data-v-e06f1a24] {
    position: relative;
    letter-spacing: 0.02em;
    line-height: 27px;
    display: inline-block;
    min-width: 54px;
    font-weight: 700;
    text-align: left;
    color: #3b3b3b;
    font-size: 18px;
}
.separator-icon[data-v-e06f1a24] {
    align-self: stretch;
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    flex-shrink: 0;
}
}
.condition-container[data-v-e06f1a24] {
  align-self: stretch;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  gap: 10px;
.condition[data-v-e06f1a24] {
    position: relative;
    letter-spacing: 0.02em;
    line-height: 24px;
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    min-width: 80px;
}
.condition-items-container[data-v-e06f1a24] {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-3xs);
.condition-item[data-v-e06f1a24] {
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: var(--gap-3xs);
      flex-wrap: wrap;
.button-container[data-v-e06f1a24] {
        height: 33px;
        border-radius: var(--br-9xs);
        background-color: var(--white-default);
        border: 0.5px solid var(--primary-accent-base);
        box-sizing: border-box;
        overflow: hidden;
        flex-shrink: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: var(--padding-10xs) var(--padding-sm) var(--padding-10xs)
          var(--padding-4xs);
        gap: var(--gap-3xs);
        cursor: pointer;
.check-icon[data-v-e06f1a24] {
          height: 16px;
          width: 16px;
          position: relative;
}
.button-text[data-v-e06f1a24] {
          position: relative;
          letter-spacing: 0.01em;
          line-height: 27px;
          font-weight: 600;
          display: inline-block;
          font-size: 16px;
          text-align: left;
}
}
}
}
}
.graph-range-container[data-v-e06f1a24] {
  align-self: stretch;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  gap: 30px;
  flex: 1;
.range-label[data-v-e06f1a24] {
    position: relative;
    letter-spacing: 0.02em;
    line-height: 24px;
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
}
}
.seating-capacity-container[data-v-e06f1a24] {
  align-self: stretch;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  gap: 30px;
  flex: 1;
.seating-label[data-v-e06f1a24] {
    position: relative;
    letter-spacing: 0.02em;
    line-height: 24px;
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
}
.seating-items-container[data-v-e06f1a24] {
    align-self: stretch;
    flex: 1;
    overflow-x: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-9xs);
.button-container[data-v-e06f1a24] {
      height: 40px;
      min-width: 58px;
      border-radius: var(--br-9xs);
      background-color: var(--white-default);
      border: 1px solid var(--black-default);
      box-sizing: border-box;
      overflow: hidden;
      flex-shrink: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: var(--gap-3xs);

      padding: 5px 10px 5px 10px;
.button-text[data-v-e06f1a24] {
        position: relative;
        display: inline-block;
        font-size: 16px;
        font-weight: 400;
        line-height: 23px;
        letter-spacing: 0.01em;
        text-align: left;
        color: #3b3b3b;
}
}
}
}
@media screen and (max-width: 768px) {
.seating-items-container[data-v-e06f1a24]::-webkit-scrollbar {
    display: none; /* Hide the scrollbar */
}
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/ChatInput.vue?vue&type=style&index=0&id=2a312a52&scoped=true&lang=css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

#message-text[data-v-2a312a52] {
  width: 100%;
  overflow: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none;
  max-height: 100px;
}
#message-text[data-v-2a312a52]::-webkit-scrollbar {
  display: none;
}
#message-text[data-v-2a312a52]:focus {
  outline: none;
}
#message-text[data-v-2a312a52]:empty:before {
  content: attr(placeholder);
  color: var(--black-light);
}
#send-button[data-v-2a312a52] {
  cursor: pointer;
}
.keyboard-child[data-v-2a312a52] {
  position: absolute;
  top: calc(50% - 15px);
  left: calc(50% - 15px);
  border-radius: 4.25px;
  background-color: var(--primary-accent-base);
  width: 30px;
  height: 30px;
}
.string-manipulator-icon[data-v-2a312a52] {
  position: absolute;
  top: 16.5px;
  left: 13.5px;
  width: 21px;
  height: 15.5px;
  z-index: 1;
}
.keyboard[data-v-2a312a52] {
  height: 48px;
  width: 48px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.chat-input-container[data-v-2a312a52] {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
  text-align: left;
  color: var(--black-default);
}
.chat-seperator-line[data-v-2a312a52] {
  align-self: stretch;
  height: 1px;
  position: relative;
  border-top: 1px solid var(--gray-medium);
  box-sizing: border-box;
}
.message-input-section[data-v-2a312a52] {
  align-self: stretch;
  border-radius: var(--br-9xs);
  background-color: var(--white-default);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--padding-7xs);
  box-sizing: border-box;
  gap: var(--gap-7xs);
  max-width: 100%;
  margin-top: -0.5px;
}
.filter-icon-container[data-v-2a312a52] {
  height: 48px;
  width: 48px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
.filterplate[data-v-2a312a52] {
    position: absolute;
    top: calc(50% - 24px);
    left: calc(50% - 24px);
    width: 100%;
    height: 100%;
}
.filter-icon[data-v-2a312a52] {
    position: absolute;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
    border-radius: var(--br-5xl);
    background-color: var(--primary-accent-base);
    width: 30px;
    height: 30px;
}
.rectangle-div[data-v-2a312a52] {
    position: absolute;
    top: calc(50% - 4.3px);
    left: calc(50% - 8.5px);
    border: 1px solid var(--white-dark);
    box-sizing: border-box;
    width: 12px;
    height: 1.7px;
    z-index: 2;
}
.filter-child1[data-v-2a312a52] {
    position: absolute;
    top: calc(50% + 2.7px);
    left: calc(50% - 3.5px);
    border: 1px solid var(--white-dark);
    box-sizing: border-box;
    width: 12px;
    height: 1.7px;
    z-index: 2;
}
.filter-child2[data-v-2a312a52] {
    position: absolute;
    top: calc(50% + 0.5px);
    left: calc(50% - 8.5px);
    border-radius: var(--br-7xs);
    border: 1.7px solid var(--white-dark);
    box-sizing: border-box;
    width: 6px;
    height: 6px;
}
.filter-child3[data-v-2a312a52] {
    position: absolute;
    top: calc(50% - 6.5px);
    left: calc(50% + 2.5px);
    border-radius: var(--br-7xs);
    border: 1.7px solid var(--white-dark);
    box-sizing: border-box;
    width: 6px;
    height: 6px;
}
}
.keyboard-instance[data-v-2a312a52] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) 0px;
  box-sizing: border-box;
  min-width: 226px;
  max-width: 100%;
.text[data-v-2a312a52] {
    align-self: stretch;
    border-radius: var(--br-9xs);
    border: 1px solid var(--gray-medium);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 0px 0px 10px;
.input-wrapper[data-v-2a312a52] {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      padding: var(--padding-7xs) 0px 0px;
.input-field[data-v-2a312a52] {
        align-self: stretch;
        position: relative;
        line-height: 23px;
        font-weight: 400;
        padding: 4px 0px 0px 0px;
        overflow-wrap: anywhere;
}
}
.send-btn-container[data-v-2a312a52] {
      align-self: stretch;
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      justify-content: flex-end;
.send[data-v-2a312a52] {
        min-height: 44px;
        max-height: 100px;
        width: 48px;
        position: relative;
        overflow: hidden;
        flex-shrink: 0;
        display: flex;
        align-items: flex-end;
.sendicon[data-v-2a312a52] {
          position: absolute;
          bottom: 10px;
          left: calc(50% - 12px);
          width: 24px;
          height: 24px;
          z-index: 1;
}
}
}
}
}


/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/ChatMessage.vue?vue&type=style&index=0&id=7fb6f00f&scoped=true&lang=css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

#msg-container[data-v-7fb6f00f] {
    display: flex;
    width: 100%;
    margin-bottom: 40px;
}
.row-reverse[data-v-7fb6f00f] {
    flex-direction: row-reverse;
}
.msg-logo[data-v-7fb6f00f] {
    width: 34px;
    height: 34px;
    box-sizing: border-box;
    padding: 4px;
    margin-top: 5px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white-dark);
}
.msg-logo img[data-v-7fb6f00f] {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}
.logo-right[data-v-7fb6f00f] {
    margin-left: 12px;
    background-color: #0156FE;
}
.user-avatar[data-v-7fb6f00f] {
    background: transparent;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 2px solid var(--white-dark);
}
.logo-left[data-v-7fb6f00f] {
    margin-right: 12px;
}
#txt-container[data-v-7fb6f00f] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    min-width: 0; /* Keep this to ensure proper flex behavior */
}
.align-right[data-v-7fb6f00f] {
    align-items: flex-end;
}
.msg-info[data-v-7fb6f00f] {
    display: flex;
    align-items: center;
    color: var(--gray-dark);
}
.dot[data-v-7fb6f00f] {
    width: 3px;
    height: 3px;
    background-color: var(--gray-dark);
    border-radius: 1.5px;
    margin-right: 9px;
    margin-left: 9px;
}
.message-content[data-v-7fb6f00f] {
    line-height: 1.5;
    max-width: 90%;
    width: auto;
    margin-top: 1px;
    min-height: 45px;
    color: var(--black-default);
}
.message-content[data-v-7fb6f00f] > *:first-child {
    margin-top: 0;
}
.message-content[data-v-7fb6f00f] .table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin: 0.5em 0;
}
.message-content[data-v-7fb6f00f] table {
    border-collapse: collapse;
    margin: 0;
    min-width: 100%;
}
.message-content[data-v-7fb6f00f] table th,
  .message-content[data-v-7fb6f00f] table td {
    border: 1px solid var(--gray-light);
    padding: 8px 12px;
    text-align: left;
    white-space: nowrap;
}
.message-content[data-v-7fb6f00f] table th {
    background-color: var(--white-dark);
    font-weight: 600;
}
.message-content[data-v-7fb6f00f] table tr:nth-child(even) {
    background-color: var(--white-dark);
}
.message-content[data-v-7fb6f00f] code {
    background-color: var(--white-dark);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: monospace;
}
.message-content[data-v-7fb6f00f] pre {
    background-color: var(--white-dark);
    padding: 1em;
    border-radius: 5px;
    overflow-x: auto;
    margin: 0.5em 0;
}
.message-content[data-v-7fb6f00f] a {
    color: var(--blue-default);
    text-decoration: none;
}
.message-content[data-v-7fb6f00f] a:hover {
    text-decoration: underline;
}
.message-content[data-v-7fb6f00f] blockquote {
    border-left: 3px solid var(--gray-light);
    margin: 0.5em 0;
    padding-left: 1em;
    color: var(--gray-dark);
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/ContactForm.vue?vue&type=style&index=0&id=67929df8&lang=css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.form-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: -30px 0px 40px 46px;
}
.error-message {
    color: var(--negative-default);
    margin-top: -5px;
}
.button-group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.button-group > button {
    flex: 1
}
.button-group > button:not(:last-child) {
    margin-right: 10px;
}
.full-width {
    width: 100%;
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/DateTimeForm.vue?vue&type=style&index=0&id=2d7167af&lang=css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************/

#date-time-container {
    margin-left: 46px;
    margin-top: -30px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
select {
    text-align: left;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/TypingIndicator.vue?vue&type=style&index=0&id=78a7ac58&lang=css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************/

#msg-container {
  display: flex;
  width: 100%;
  margin-bottom: 40px;
}
.msg-logo {
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  padding: 4px;
  margin-top: 5px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white-dark);
}
.msg-logo img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}
.logo-left {
  margin-right: 12px;
}
.typing-col {
  height: 5px;
  width: 2px;
  background-color: var(--black-default);
}
@keyframes smallBig {
0%, 100% {
    transform: scaleY(1); /* Original size */
    animation-timing-function: ease-in;
}
50% {
    transform: scaleY(2.5); /* Double the height */
    animation-timing-function: ease-out;
}
}
@keyframes bigSmall {
0%, 100% {
    transform: scaleY(2.5); /* Original size */
    animation-timing-function: ease-in;
}
50% {
    transform: scaleY(1); /* Double the height */
    animation-timing-function: ease-out;
}
}
#loading-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 38px;
  height: 12.5px;
}
.typing-col:nth-child(odd) {
  animation: bigSmall 0.75s infinite;
  transform-origin: center;
}
.typing-col:nth-child(even) {
  animation: smallBig 0.75s infinite;
  transform-origin: center;
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/ChatWarning.vue?vue&type=style&index=0&id=d1d465b8&lang=css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************/

#warning-indicator {
    margin-bottom: 40px;
    padding: 15px 10px;
    border-radius: 4.25px;
    border: 0.5px;
    gap: 10px;
    background: var(--white-dark);
    border: 0.5px solid var(--primary-accent-light);
p {
      font-size: 14px;
      font-weight: 400;
      line-height: 21px;
      letter-spacing: 0em;
      text-align: center;
      margin: 0;
      color: var(--black-default);
}
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/ChatThread.vue?vue&type=style&index=0&id=f567969c&scoped=true&lang=css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

#thread-container[data-v-f567969c] {
  width: 100%;
  display: flex;
  padding-top: 20px;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
  background-color: white;
}
#thread-container[data-v-f567969c]::-webkit-scrollbar {
  display: none; /* Hide the scrollbar */
}
.small-reg[data-v-f567969c] {
  color: #6b5f86;
  text-align: center;
  margin-top: 0;
  margin-bottom: 18px;
}
.scroll-bottom-icon-wrapper[data-v-f567969c] {
  position: relative;
  bottom: 55px;
  left: calc(50% - 24px);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
.scroll-bottom-icon[data-v-f567969c] {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    position: absolute;
    left: 0px;
    top: 0px;
    transform: scale(1.417);
}
}
#thread-container *[data-v-f567969c] {
  overflow-anchor: none;
}
#anchor[data-v-f567969c] {
  overflow-anchor: auto;
  height: 1px;
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/car-card/CarPics.vue?vue&type=style&index=0&id=33381032&scoped=true&lang=css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.swiper-pagination[data-v-33381032] {
  --swiper-pagination-left: 7px;
  --swiper-pagination-color: var(--white-default);
  --swiper-pagination-bullet-inactive-color: var(--white-default);
  --swiper-pagination-bullet-inactive-opacity: 1;
  width: 13px !important;
  transform: none !important;
  top: auto !important;
}
.swiper-pagination-vertical[data-v-33381032] {
  bottom: 10px;
}
.car-img[data-v-33381032] {
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: white;
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/car-card/CarDetails.vue?vue&type=style&index=0&id=abdcef18&lang=css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.car-details {
  width: 186px;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 15px 10px 10px 15px;
  box-sizing: border-box;
  opacity: 1;
  transition: opacity 0.25s ease-out;
  z-index: 1;
  background-color: white;
}
.car-details::-webkit-scrollbar {
  display: none;
}
.car-details table {
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}
.car-details td {
  vertical-align: top;
}
.disappear {
  opacity: 0 !important;
}
.interest-btn {
  background-color: var(--black-default);
  border-radius: 4px;
  color: var(--white-dark);
  border: none;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 100%;
  box-sizing: border-box;
  border: 0.5px solid var(--black-default);
  display: flex;
  align-items: center;
  justify-content: center;
}
.interest-btn img {
  margin-right: 10px;
}
.interest-btn-clicked {
  color: var(--black-default);
  background-color: var(--white-dark);
  border: 0.5px solid var(--primary-accent-base);
}
.primary-reg {
  color: var(--black-default);
  text-align: left;
}
.car-param {
  color: var(--black-default);
  text-align: left;
}
button {
  font-family: "Roboto", sans-serif;
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/car-card/CarActions.vue?vue&type=style&index=0&id=faadeca2&lang=css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.car-actions {
  flex-direction: column;
  position: absolute;
  box-shadow: 0px 0px 30px 0 rgba(0, 0, 0, 0.5);
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 3;
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease-out;
}
.actions-visible {
  opacity: 1;
  display: flex;
}
.detail-btn {
  flex-grow: 1;
  width: 66px;
  text-align: center;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  background-color: white;
}
.detail-btn:active {
  background-color: var(--black-medium);
}
.detail-btn > div {
  width: 48px;
  height: 48px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
}
.detail-btn > div > img {
  margin-bottom: 7px;
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/CarResult.vue?vue&type=style&index=0&id=c46be6de&lang=css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.car {
  flex-grow: 1;
  min-width: 336px;
  width: 336px;
  max-width: 336px;
  height: 180px;
  border-radius: 6px;
  margin-left: 10px;
  overflow: hidden;
  position: relative;
}
.car-imgs {
  max-width: 270px;
  width: 150px;
  height: 100%;
  /* height: 180px; */
  box-shadow: 4px 0px 10px 0 rgba(0, 0, 0, 0.3);
  transition: width 0.15s ease-out;
  z-index: 2;
  position: relative;
  background-color: white
}
.imgs-expanded {
  width: 270px;
  box-shadow: none;
}
.not-expandable-car-image {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  box-shadow: none;
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/SmallCarResult.vue?vue&type=style&index=0&id=97223e0c&lang=css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.car-not-expanded {
  display: flex;
  padding: 5px 15px 5px 5px;
  border-radius: 8px;
  gap: 10px;
  background-color: white;
  margin-left: 10px;
}
.car-img {
  height: 50px;
  width: 50px;
  border-radius: 4px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: white;
}
.car-name-price-container {
  width: 100px;
  height: 46px;
  display: flex;
  flex-direction: column;
  position: unset;
  padding: unset;
  overflow: hidden;
  color: var(--black-default);
  text-align: left;
  align-items: start;
.car-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 23px;
    letter-spacing: 0.01em;
}
.car-price {
    font-size: 13px;
    font-weight: 400;
    line-height: 23px;
    letter-spacing: 0.01em;
}
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/CarResults.vue?vue&type=style&index=0&id=1f2326b2&scoped=true&lang=css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

#car-results[data-v-1f2326b2] {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  width: 100%;
  margin-top: 10px;
  padding-bottom: 10px;
}
#car-results[data-v-1f2326b2]::-webkit-scrollbar {
  height: 5px;
}
#car-results[data-v-1f2326b2]::-webkit-scrollbar-track {
  margin: 24px;
}
#car-results[data-v-1f2326b2]::-webkit-scrollbar-thumb {
  background: #dedddf;
  border-radius: 1px;
}
.car[data-v-1f2326b2]:last-child {
  margin-right: 10px;
}
@media (max-width: 768px) {
#car-results[data-v-1f2326b2] {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;
}
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/sidebar/SideBarItem.vue?vue&type=style&index=0&id=344d0b88&scoped=true&lang=css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.settings-container[data-v-344d0b88] {
  align-self: stretch;
  border-radius: var(--br-9xs) 0px 0px var(--br-9xs);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 25px;
.setting-logo-lavel[data-v-344d0b88] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xl);
.setting-label-container[data-v-344d0b88] {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      padding: var(--padding-12xs) 0px;
      gap: 5px;
.setting-label[data-v-344d0b88] {
        position: relative;
        letter-spacing: 0.01em;
        line-height: 27px;
        font-weight: 600;
        color: var(--black-default);
}
.setting-label-info[data-v-344d0b88] {
        position: relative;
        font-size: var(--paragraph-primary-regular-regular-size);
        line-height: 22px;
        color: var(--black-medium);
}
}
}
}
.settings-icon[data-v-344d0b88] {
  height: 30px;
  width: 30px;
  position: relative;
  border-radius: var(--br-9xs);
  overflow: hidden;
  flex-shrink: 0;
}
.toggle-child[data-v-344d0b88] {
  position: absolute;
  top: calc(50% - 2px);
  left: calc(50% - 4px);
  border-radius: 1px;
  border: 2px solid var(--gray-medium);
  box-sizing: border-box;
  width: 28px;
  height: 4px;
  overflow: hidden;
}
.toggle-item[data-v-344d0b88] {
  position: absolute;
  top: 18px;
  left: 20px;
  border-radius: 10px;
  background-color: var(--white-light);
  border: 4px solid var(--black-default);
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  overflow: hidden;
  z-index: 1;
}
.toggle[data-v-344d0b88] {
  height: 48px;
  width: 48px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
}
.toggle.active .toggle-child[data-v-344d0b88] {
  border: 2px solid var(--primary-accent-light);
}
.toggle.active .toggle-item[data-v-344d0b88] {
  left: 36px;
  border: 4px solid var(--primary-accent-base);
  background-color: var(--primary-accent-base);
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/sidebar/PrivacyDisclaimerAbout.vue?vue&type=style&index=0&id=23d95c66&scoped=true&lang=css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.privacy-policy-header-container[data-v-23d95c66] {
  align-self: stretch;
  background-color: var(--white-default);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--padding-11xl) 0px var(--padding-xl) 0px;
  gap: var(--gap-xl);
}
.privacy-policy-header[data-v-23d95c66] {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  gap: var(--gap-xl);
  max-width: 112%;
  flex-shrink: 0;
}
.privacy-policy-logo-container[data-v-23d95c66] {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}
.privacy-policy-header-logo-icon[data-v-23d95c66] {
  overflow: hidden;
  flex-shrink: 0;
  height: 30px;
  width: 30px;
  position: relative;
  min-height: 30px;
}
.header-text[data-v-23d95c66] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  position: relative;
  line-height: 27px; /* if 24px then it will look like sidebar */
  padding: var(--padding-12xs) 0px;
  gap: 5px; /* if remove then it will look like sidebar */
.header-label[data-v-23d95c66] {
    color: var(--black-default);
    font-size: 16px;
    letter-spacing: 0.01em;
    font-weight: 600;
    display: inline-block;
}
.header-description[data-v-23d95c66] {
    white-space: nowrap;
    margin-top: -4px;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0em;
    color: var(--black-medium);
}
}
.chevron-left-icon[data-v-23d95c66] {
  height: 48px;
  width: 48px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0rem -1.1rem 0rem 0rem;
}
.separator-icon[data-v-23d95c66] {
  /* align-self: stretch;
  width: 94%;
  border: 0.5px solid var(--gray-dark); */
  align-self: stretch;
  /* height: 1px; */
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}
.privacy-policy-container[data-v-23d95c66] {
  height: 100%;
  color: var(--black-default);
  overflow: hidden;
  padding-bottom: 40px;
.privacy-policy-info[data-v-23d95c66] {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    font-size: var(--paragraph-primary-regular-regular-size);
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-right: 40px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 45px */
    color: var(--black-default);
.message-input-frame[data-v-23d95c66] {
      height: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 0px 0px 0px;
      box-sizing: border-box;
.paragraph-container[data-v-23d95c66] {
        margin-bottom: -1253px;
        align-self: stretch;
        position: relative;
        line-height: 22px;
        letter-spacing: 0.01em;
        font-size: 16px;
        font-weight: 400;
        color: var(--black-default);
p[data-v-23d95c66] {
          margin-bottom: 2rem;
}
}
}
}
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/sidebar/MyContactInfo.vue?vue&type=style&index=0&id=079862a2&scoped=true&lang=css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.chevron-left-icon[data-v-079862a2] {
  height: 48px;
  width: 48px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0rem -1.1rem 0rem 0rem;
}
.separator-icon[data-v-079862a2] {
  align-self: stretch;
  /* height: 1px; */
  position: relative;
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}
.x-icon[data-v-079862a2] {
  height: 48px;
  width: 48px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.error-message[data-v-079862a2] {
  position: relative;
  font-size: var(--paragraph-primary-medium-regular-size);
  line-height: 21px;
  color: var(--negative-default);
}
.my-contact-info-container[data-v-079862a2] {
  width: 100%;
  background-color: var(--white-default);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* padding: 0px var(--padding-5xl); */
  box-sizing: border-box;
  gap: 1.25rem;
  /* min-height: 715px; */
  z-index: 3;
}
.header-container[data-v-079862a2] {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-11xl) 0px 0px;
  text-align: left;
  font-size: var(--paragraph-secondary-large-regular-size);
  color: var(--black-default);
  font-family: var(--paragraph-primary-medium-regular);
}
.header-text-icon-container[data-v-079862a2] {
  border-radius: var(--br-9xs) 0px 0px var(--br-9xs);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  /* padding: 0px var(--padding-9xs) 0px var(--padding-4xl-5); */
  width: 100%;
  padding: 0px 0px 0px 0px;
  box-sizing: border-box;
}
.text-container[data-v-079862a2] {
  width: 239px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-12xs) 0px;
  gap: 5px;
.header-text[data-v-079862a2] {
    position: relative;
    letter-spacing: 0.01em;
    line-height: 27px;
    font-weight: 600;
    font-size: 16px;
    text-align: left;
}
.header-des[data-v-079862a2] {
    align-self: stretch;
    position: relative;
    font-size: var(--font-size-mini);
    line-height: 22px;
    font-weight: 400;
    letter-spacing: 0em;
    text-align: left;
    color: #808080;
}
}
.input-field-container[data-v-079862a2] {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 30px;
  text-align: left;
  font-size: var(--paragraph-secondary-large-regular-size);
  color: var(--black-default);
  font-family: var(--paragraph-primary-medium-regular);
.text-input-field[data-v-079862a2] {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    cursor: pointer;
.label-frame[data-v-079862a2] {
      align-self: stretch;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 10px;
.input-label[data-v-079862a2] {
        align-self: stretch;
        position: relative;
        letter-spacing: 0.01em;
        line-height: 23px;
        font-weight: 500;
        font-size: 16px;
        text-align: left;
        color: var(--black-default);
}
.input-container[data-v-079862a2] {
        align-self: stretch;
        height: 58px;
        border-radius: var(--br-9xs);
        border: 1px solid var(--black-default);
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: var(--padding-8xs) var(--padding-11xs) var(--padding-8xs)
          var(--padding-smi);
        gap: 15px;
.user-input-field[data-v-079862a2] {
          width: 100%;
          border: none;
          outline: none;
          background-color: transparent;
          height: 23px;
          flex: 1;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-start;
          font-size: var(--paragraph-primary-large-medium-size);
          color: var(--black-default);
          min-width: 212px;

          font-weight: 400;
          line-height: 23px;
          letter-spacing: 0.01em;
          text-align: left;
}
}
}
}
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/sidebar/SideBar.vue?vue&type=style&index=0&id=7973fd09&scoped=true&lang=css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.overlay[data-v-7973fd09] {
  position: absolute;
  top: 0;
  right: 0;
  width: 13.46%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 3; /* Ensure the overlay is above the sidebar */
  transition: right 0.3s ease;
}
.sidebar[data-v-7973fd09] {
  position: absolute;
  top: 0;
  left: -86.54%; /* Initially hidden */
  width: 86.54%;
  height: 100%;
  background-color: white;
  transition: left 0.01s ease;
}
.sidebar.open[data-v-7973fd09] {
  left: 0; /* Slide in when open */
}
.sidebar-container[data-v-7973fd09] {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  background-color: var(--white-default);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  /* gap: 311px 0px; */
  z-index: 4;
}
.sidebar-group[data-v-7973fd09] {
  height: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-5xl);
  /* gap: var(--gap-xl); */
}
.sidebar-header-container[data-v-7973fd09] {
  align-self: stretch;
  background-color: var(--white-default);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--padding-11xl) 0px var(--padding-xl) 0px;
  gap: var(--gap-xl);
}
.sidebar-header[data-v-7973fd09] {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  gap: var(--gap-xl);
  max-width: 112%;
  flex-shrink: 0;
}
.sidebar-logo-container[data-v-7973fd09] {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
}
.sidebar-header-logo-icon[data-v-7973fd09] {
  height: 40px;
  width: 40px;
  position: relative;
  border-radius: 3.81px;
  overflow: hidden;
  flex-shrink: 0;
}
.text-display[data-v-7973fd09] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  font-size: 16px;
  text-align: left;
  color: var(--black-default);
  position: relative;
  letter-spacing: 0.01em;
  line-height: 24px;
.oto-ai[data-v-7973fd09] {
    width: 52px;
    font-weight: 600;
    display: inline-block;
}
.dealership-name[data-v-7973fd09] {
    white-space: nowrap;
    margin-top: -4px;
    font-weight: 400;
}
}
.x-icon[data-v-7973fd09] {
  height: 48px;
  width: 48px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0rem -1.1rem 0rem 0rem;
}
.separator-icon[data-v-7973fd09] {
  /* align-self: stretch;
  width: 94%;
  border: 0.03rem solid var(--gray-dark); */
  /* border: 0.5px solid #B0B0B0 */
  align-self: stretch;
  /* height: 1px; */
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}
.sidebar-settings[data-v-7973fd09] {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/ChatWindowHeader.vue?vue&type=style&index=0&id=40d48fc5&scoped=true&lang=css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

#container[data-v-40d48fc5] {
  width: 100%;
  background-color: var(--black-default);
  padding-top: 5px;
  padding-bottom: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.collapse-button-icon[data-v-40d48fc5] {
  width: 34px;
  height: 34px;
  position: absolute;
  margin: 0 !important;
  top: 266px;
  left: 24px;
  border-radius: 0px 4.25px 4.25px 0px;
  overflow: hidden;
  flex-shrink: 0;
  -o-object-fit: contain;
     object-fit: contain;
  z-index: 2;
}
.header-header[data-v-40d48fc5] {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 0px 5px 0px 5px;
  box-sizing: border-box;
  text-align: center;
}
.header-header > h3[data-v-40d48fc5] {
  flex-grow: 1;
}
.x-line[data-v-40d48fc5] {
  height: 20px;
  width: 2px;
  border-radius: 1px;
  background-color: var(--white-dark);
  position: absolute;
  top: 50%;
  left: 50%;
}
.r-right[data-v-40d48fc5] {
  transform: translate(-50%, -50%) rotate(45deg);
}
.r-left[data-v-40d48fc5] {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.burger-menu-icon[data-v-40d48fc5] {
  cursor: pointer;
}
#x-container[data-v-40d48fc5],
.menu-container[data-v-40d48fc5] {
  position: relative;
  width: 48px;
  height: 48px;
}
.logo-container[data-v-40d48fc5] {
  height: 80px;
}
#logo[data-v-40d48fc5] {
  width: 100%;
  height: 100%;
  background-color: var(--white-dark);
  border-radius: 8px;
}
#container > p[data-v-40d48fc5] {
  margin: 0;
  margin-top: 22px;
  text-align: center;
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/ChatWindow.vue?vue&type=style&index=0&id=3af19f98&scoped=true&lang=css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

#chat-container[data-v-3af19f98] {
  width: 100%;
  height: 100%;
  min-height: 300px;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
}
#chat-thread[data-v-3af19f98] {
  flex-grow: 1;
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none;
  background-color: white;
}
#chat-thread *[data-v-3af19f98] {
  overflow-anchor: none;
}
#anchor[data-v-3af19f98] {
  overflow-anchor: auto;
  height: 1px;
}
#chat-thread[data-v-3af19f98]::-webkit-scrollbar {
  display: none;
}
#special_messages[data-v-3af19f98] {
  padding-left: 24px;
  padding-right: 24px;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/ChatSuggestions.vue?vue&type=style&index=0&id=f6b48a12&scoped=true&lang=css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

#suggestions-container[data-v-f6b48a12] {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.chat-suggestion[data-v-f6b48a12] {
  padding: 10px 20px 10px 20px;
  background-color: var(--primary-accent-base);
  margin-bottom: 15px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  color: var(--white-default);
  box-shadow: 0 4px 10px 0 rgba(0,0,0,0.15);
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************/

body {
  margin: 0;
}
#app {
  display: flex;
  justify-content: flex-end;
}

/* The container for the entire app */
#app-container {
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  align-items: flex-end;
  z-index: 1;
  overflow: auto;
}
@media (min-width: 768px) {
#app-container {
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
    max-width: 500px; /* TODO: Random width for now, determine late */
}
#chat-window-container {
    max-height: 80vh;
    margin-bottom: 20px;
}
#chat-bubble {
    padding-bottom: 0px;
    padding-right: 0px;
}
#chat-suggestions {
    padding-right: 0px;
}
}

/* The container for the chat window */
#chat-window-container {
  flex-grow: 1;
  width: 100%;
  
  box-sizing: border-box;
  height: 100%;
}
.number-badge {
  position: relative;
  top: 10px;
  /* right: 0; */
  left: 36px;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 12px 0px #e6a643;
  background: #e88e00;

  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.02em;
}
@media screen and (max-width: 768px) {
.chat-bubble-hide-for-mobile {
    display: none !important;
}
#chat-bubble {
    padding-bottom: 20px;
    padding-right: 20px;
}
#chat-suggestions {
    padding-right: 20px;
}
}

/*!*********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./src/assets/global.css ***!
  \*********************************************************************************************************************************************************************/
:root {
    --white-dark: #E8F1F8;
    --white-default: #FCFCFC;
    --black-default: #3B3B3B;
    --black-light: #A7A7A7;
    --black-medium: #686767;
    --gray-dark: #B0B0B0;
    --primary-accent-base: #0156FE;
    --primary-accent-dark: #033FB5;
    --primary-accent-light: #A1C0FF;
    --gray-light: #F1F0F2;
    --gray-medium: #DEDDDF;
    --negative-default: #E21A21;

    /* padding */
    --padding-smi: 13px;
    --padding-4xl-5: 23.5px;
    --padding-12xs: 1px;
    --padding-9xs: 4px;
    --padding-5xl: 24px;
    --padding-7xs: 6px;
    --padding-11xl: 30px;
    --padding-6xs: 7px;
    --padding-xl: 20px;
    --padding-10xs: 3px;
    --padding-4xs: 9px;
    --padding-4xs-5: 8.5px;
    --padding-4xl: 23px;
    --padding-6xs-5: 6.5px;
    --padding-sm: 14px;
    --padding-102xl: 121px;
    --padding-105xl: 124px;
    --padding-11xs: 2px;
    --padding-8xs: 5px;

    /* gap */
    --gap-xl: 20px;
    --gap-3xs: 10px;
    --gap-21xl: 40px;
    --gap-11xs: 2px;
    --gap-4xs: 9px;
    --gap-9xs: 4px;
    --gap-7xs: 6px;

    /* font-size */
    --paragraph-primary-regular-regular-size: 15px;
    --paragraph-primary-large-medium-size: 16px;
    --font-size-mini: 15px;


    /* Border radiuses */
    --br-9xs: 4px;
    --br-7xs: 6px;
    --br-5xl: 24px;
}
body {
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.secondary {
    font-family: 'Roboto Condensed', sans-serif;
}

.primary-reg, .secondary-small{
    font-size: 13px;
    line-height: 23px;
    letter-spacing: .01em;
}

.secondary-small {
    font-weight: 600;
}

.large-reg {
    font-size: 16px;
    line-height: 23px;
    letter-spacing: .01em;
}

.medium-reg {
    font-size: 14px;
    line-height: 21px;
}

.small-reg {
    font-size: 13px;
    line-height: 20px;
    letter-spacing: .01em;
}

.tiny-reg {
    font-size: 10px;
    line-height: 15px;
    letter-spacing: 0;
}

.large-bold {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: .02em;
    font-weight: bold;
}

.semi-bold {
    font-size: 13px;
    line-height: 23px;
    letter-spacing: .01em;
    font-weight: 600;
}

.white-dark {
    color: var(--white-dark)
}

.black-default {
    color: var(--black-default)
}

.swiper-pagination-bullet {
    box-shadow: 0 0 4px 0 rgba(0,0,0,0.3);
}

/* componentized css. Use button and text classes below */

.p-large-reg {
    font-size: 16px;
    line-height: 23px;
    letter-spacing: .01em;
    font-weight: 400;
}

.p-large-semibold {
    font-size: 16px;
    line-height: 27px;
    letter-spacing: .01em;
    font-weight: 600;
}

.p-small-semibold {
    font-size: 13px;
    line-height: 23px;
    letter-spacing: .01em;
    font-weight: 600;
}

.p-med-semibold {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: .02em;
    font-weight: 600;
}

.solid-button {
    font-family: 'Roboto', sans-serif;
    background-color: var(--primary-accent-base);
    color: var(--white-dark);
    padding: 10px 30px 10px 30px;
    border-radius: 4px;
    border: none;
}

.solid-button:active {
    background-color: var(--primary-accent-dark);
}

.grayed-btn {
    background-color: var(--gray-medium);
    color: var(--black-default);
}

.grayed-btn:active {
    background-color: var(--gray-dark);
}

.pill-button {
    font-family: 'Roboto', sans-serif;
    background-color: white;
    color: var(--black-default);
    padding: 10px 30px 10px 30px;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1.5px solid var(--black-default);
}

.pill-button:active {
    background-color: var(--gray-light);
    border: 1.5px solid var(--black-medium);
}

.msg-input {
    font-family: 'Roboto', sans-serif;
    width: 100%;
    border: 1.5px solid var(--black-default);
    border-radius: 4px;
    padding: 12px 0 12px 30px;
    box-sizing: border-box;
}

.msg-input:focus-visible {
    outline: 1px solid var(--black-default);
}

.msg-table {
    margin-left: auto;
    margin-top: -45px;
    margin-bottom: 40px;
    border-spacing: 30px 15px;
  }