@import "./../../font.css";

.section-category p {
   color: #fff;
   margin: 0;
   padding: 0;
   font-family: 'Caros Soft';
   font-size: 13px;
   font-weight: 300;
   line-height: 13px;
   letter-spacing: 0.01em;
   text-align: left;
   text-transform: uppercase;
}

#exampleModalSend h2 {
	text-align: center;
}

#exampleModalSend .choice-block input
{
  width: 100%;
  padding: 0;
  margin-bottom: 15px;
  outline: none;
  border: none;
  color: var(--Black, #17191C);
  font-family: 'Caros Soft';
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0.16px;
  text-transform: uppercase;
}

#exampleModalSend textarea {
	resize: none;
	  overflow-y: hidden;
	  height: auto !important;
	  margin-bottom: 30px;
	  width: 100%;
	  padding: 0;
	  margin-bottom: 15px;
	  outline: none;
	  border: none;
	  color: var(--Black, #17191C);
	  font-family: 'Caros Soft';
	  font-size: 16px;
	  font-style: normal;
	  font-weight: 600;
	  line-height: 100%;
	  letter-spacing: 0.16px;
	  text-transform: uppercase;
}

#exampleModalSend .description-title {
		color: var(--black-60, rgba(20, 21, 23, 0.60));
	  font-family: 'Caros Soft';
	  font-size: 16px;
	  font-style: normal;
	  font-weight: 400;
	  line-height: 100%;
	  padding-bottom: 8px;
	padding-bottom: 12px;
}

#exampleModalSend .modal-body button {
	width: 100%;
  padding: 20px;
}

.ok {
  text-align: center;
  padding: 10px;
  margin-bottom: 5px !important;
  background: green;
  color: white;
  font-weight: bold;
}

.err {
  text-align: center;
  padding: 10px;
  margin-bottom: 5px !important;
  background: red;
  color: white;
  font-weight: bold;
}

.edit-btn {
  border: none;
  background: transparent;
  color: var(--black-60, rgba(20, 21, 23, 0.60));
  text-align: center;
  font-family: 'Caros Soft';
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 100%;
  text-decoration-line: underline;
}

.page-template-quiz-page .header {
	background: rgba(23, 25, 28, 1);

}

.step img {
	width: 100%;
}

.step-2 .dropdown {
   margin-top: 0;
}

.section-category {
   display: flex;
   align-items: center;
   justify-content: center;
   background: #17191C;
}

.section-category__block {
   padding: 16px;
   text-align: center;
   border-right: 1px solid #FFFFFF1A;
   min-height: 90px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
	color: white;
	text-transform: uppercase;
}

.section-category__block.active {
	color: #17191C;
}

.section-category__block svg {
   margin-bottom: 8px;
}

.section-category__block .check-button {
   margin-bottom: 8px;
}

.section-category__block:first-child {
   border-left: 1px solid #FFFFFF1A;
}

.section-choice {
   background: #fff;
   display: flex;
   align-items: flex-start;
   justify-content: space-around;
   padding: 32px 40px 80px 40px;
   
}

.success-info {
   display: none;
   align-items: center;
    justify-content: space-between;
}

.success-info p {
   padding: 0;
   margin: 0;
   font-family: 'Caros Soft';
   font-size: 24px;
   font-weight: 600;
   line-height: 33px;
   letter-spacing: 0.01em;
   text-align: left;
}

.color-block {
   display: flex;
}

.square {
   position: relative;
   width: 50px;
   height: 50px;
   margin: 5px;
   border: 1px solid #000; /* Добавим черную обводку для наглядности */
   cursor: pointer; /* Добавим курсор при наведении для понимания, что квадрат можно выбрать */
}

.underline {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 2px;
   background-color: blue; /* Цвет подчеркивания */
   display: none; /* Начнем с скрытия подчеркивания */
   padding-top: 5px; /* Добавим пространство между квадратом и подчеркиванием */
}

#success-dialog {
   display: none;
}
.configuration {
   margin-bottom: 35px;
   margin-top: 40px;
}

.step.row.step-7.active {
  max-width: 1000px;
  margin: 0 auto;
}

#edit-btn-brand, #edit-btn-model, #edit-btn-colors, #edit-btn-moreinf, #edit-btn-packages, #edit-btn-engines {
  width: 100%;
  margin-top: 20px;
  padding: 8px;
  border: none;
  background: #DE2127;
  color: white;
  font-family: 'Caros Soft';
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0.16px;
  text-transform: uppercase;
	-webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
	text-decoration: none;
}

#edit-btn-brand:hover, #edit-btn-model:hover, #edit-btn-colors:hover, #edit-btn-moreinf:hover {
	opacity: 0.8;
}

.choice-block.brend {
   width: 100%;
   height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.step-6 .col-12 {
  max-width: 50%;
  margin: 0 auto;
}

.check-button {
   display: none;
}

.select-brand p {
   margin: 0;
   padding: 0;
   font-family: 'Caros Soft';
   font-size: 16px;
   font-weight: 600;
   line-height: 16px;
   letter-spacing: 0.01em;
   text-align: left;
   text-transform: uppercase;
}

.select-brand {
   display: flex;
   align-items: center;
   justify-content: space-between;
   border: 1px solid #1415171A;
   padding: 32px;
   cursor: pointer;
   width: 100%;
   background: transparent;
}

.quiz-btn {
   background: #DE2127;
   border: none;
   font-family: 'Caros Soft';
   font-size: 16px;
   font-weight: 600;
   line-height: 16px;
   letter-spacing: 0.01em;
   text-align: center;
   cursor: pointer;
   color: #fff;
   text-transform: uppercase;
   padding: 29px 117.5px 27px;

}

.section-category .active {
   background: #fff;
   border-top: 3px solid #E11D20;

border-image-source: linear-gradient(0deg, #E11D20, #E11D20),
linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));

cursor: pointer;
}

.active p {
   color: #17191C;
}

.active svg path {
   fill: #17191C;
}

.active svg circle {
   fill: #17191C;
}

.dropdown {
	position: relative;
}

.dropdown__button {
   position: relative;
   display: block;
   width: 100%;
   padding: 25px 32px;
   border: 1px solid rgba(20, 21, 23, 0.10);
   background: var(--White, #FFF);
   color: var(--Black, #17191C);
   font-family: 'Caros Soft';
   font-size: 16px;
   font-style: normal;
   font-weight: 600;
   line-height: 100%;
   letter-spacing: 0.16px;
   text-transform: uppercase;
   text-align: left;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.dropdown__button img.active {
   transform: rotate(180deg);
}

.dropdown__button:focus, .dropdown__button--active {
	outline: none;
}


.page-template-quiz-page .dropdown__list {
	display: none;

	position: absolute;
	left: 0;
	top: 52px;

	margin: 0;
	padding: 0;
	list-style-type: none;

	background: #FFFFFF;
	overflow: hidden;

	width: 100%;

	z-index: 1;
   max-height: 270px;
   overflow-y: scroll;
}

.selected span {
   border: 6px solid #E11D20 !important;
}

.dropdown__list-item {
   display: flex;
   align-items: center;

}

.dropdown__list-item span {
   width: 24px;
   height: 24px;
   border: 2px solid rgba(20, 21, 23, 0.6);
   display: block;
   border-radius: 50%;
   margin-right: 8px;
}

/* Для WebKit браузеров (Chrome, Safari) */
.dropdown__list::-webkit-scrollbar {
   width: 10px; /* Ширина скроллбара */
 }
 
 .dropdown__list::-webkit-scrollbar-thumb {
   background-color: #9c9c9c; /* Цвет ползунка скроллбара */
   border-radius: 5px; /* Закругленные углы ползунка */
 }
 
 .dropdown__list::-webkit-scrollbar-track {
   background-color: #f1f1f1; /* Цвет трека (фона) скроллбара */
 }
 
 /* Для Firefox */
 .dropdown__list {
   scrollbar-width: thin;
   scrollbar-color: #6b6b6b #f1f1f1;
 }
 
 /* Общие стили для скроллбара */
 .dropdown__list {
   overflow-y: auto;
   /* Другие стили по вашему усмотрению */
 }

.dropdown__list--visible {
	display: block !important;
}

.dropdown__list-item {
	margin: 0;
	padding: 0;
	border-bottom: 0px;
	padding: 25px 32px;
	cursor: pointer;
   border: 1px solid rgba(20, 21, 23, 0.10);
   background: var(--White, #FFF);
   color: var(--Black, #17191C);

   /* Text */
   font-family: 'Caros Soft';
   font-size: 16px;
   font-style: normal;
   font-weight: 600;
   line-height: 100%; /* 16px */
   letter-spacing: 0.16px;
   text-transform: uppercase;
}

.dropdown__input-hidden, .dropdown__input-hidden-edit, .dropdown__input-hidden-engine, .dropdown__input-hidden-modifications {
	display: none;
}

.serviceBox{
	border: 1px solid #4e4e4e;
	text-align: center;
	padding: 40px 0;
	overflow: hidden;
	position: relative;
	z-index: 1;
	transition: all 0.5s ease 0s;
  }
  .serviceBox:before,
  .serviceBox:after{
	content: "";
	width: 200%;
	height: 200%;
	background: #eba133;
	position: absolute;
	top: 160px;
	left: 0;
	z-index: -1;
	transform: rotate(-18deg);
	transition: all 0.5s ease 0s;
  }
  .serviceBox:before{
	background: #4e4e4e;
	left: -120%;
	transform: rotate(24deg);
  }
  .serviceBox:hover:before{
	transform: rotate(16deg);
  }
  .serviceBox:hover:after{
	background: #684f8e;
	transform: rotate(-10deg);
  }
  .serviceBox .service-icon{
	font-size: 60px;
	color: #684f8e;
	line-height: 100px;
	margin-bottom: 100px;
  }
  .serviceBox .service-content{
	color: #fff;
	line-height: 25px;
	padding: 0 20px 20px;
  }
  
  .serviceBox .title{
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 10px;
  }
  .serviceBox .description{
	font-size: 14px;
  }
  .serviceBox .read{
	display: block;
	width: 100%;
	background: #fff;
	font-size: 15px;
	font-weight: 600;
	color: #eba133;
	padding: 10px;
	border-left: 1px solid #eba133;
	border-right: 1px solid #eba133;
  }
  .serviceBox:hover .read{
	border-color: #684f8e;
	color: #684f8e;
  }
  @media only screen and (max-width: 990px){
	.serviceBox{ margin-bottom: 30px; }
  }
  @media only screen and (max-width: 767px){
	.serviceBox:before,
	.serviceBox:after{
	top: 80px;
	}
  }
  @media only screen and (max-width: 480px){
	.serviceBox:before,
	.serviceBox:after{
	top: 140px;
	}
  }

  .slick-slide {
   margin: 0 20px; /* Измените отступы между слайдами на 20 пикселей */
 }

  .step2-items {
   padding: 24px 12px;
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-start;
   border: 1px solid rgba(20, 21, 23, 0.10);
   background: var(--Grey, #E3E5E8);
  }

  .step2-items h2 {
   color: var(--Black, #17191C);

   /* Text */
   font-family: 'Caros Soft';
   font-size: 16px;
   font-style: normal;
   font-weight: 600;
   line-height: 100%; /* 16px */
   letter-spacing: 0.16px;
   text-transform: uppercase;
  }
  
  .section-choice .step-2 .col-md-5 img, .section-choice .step-3 .col-md-5 img, .section-choice .step-4 .col-md-5 img, .section-choice .step-5 .col-md-5 img, .section-choice .step-6 .col-md-5 img {
   width: 100%;
  }

  .step2-items ul li {
   color: var(--Black, #17191C);
font-family: 'Caros Soft';
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 12px */
letter-spacing: 0.12px;
padding: 0;
margin: 0;
list-style-type: none;
display: flex;
align-items: center;
justify-content: flex-start;
padding-bottom: 12px;
  }

  .step2-items ul li img {
   padding-right: 4px;
  }

  .step2-items .price {
   color: var(--Black, #17191C);

/* Text */
font-family: 'Caros Soft';
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 100%; /* 16px */
letter-spacing: 0.16px;
text-transform: uppercase;
padding-top: 40px;
padding-bottom: 16px;
  }

  .step2-items ul li:last-child {
   padding-bottom: 0;
  }

  .step2-items ul{
   padding: 0;
   margin: 0;
  }

  ul.slick-dots {
   margin: 0;
   padding: 0 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 1px;
   margin: 24px 0;
}

ul.slick-dots li {
   list-style-type: none;
   width: 100%;
}

ul.slick-dots li button {
   width: 100%;
   border: none;
   font-size: 1px;

}

ul.slick-dots li.slick-active button {
   background: #000;
}

.btn-step__item.active {
   border: 2px solid red; /* Измените цвет и стиль бордера по вашему выбору */
}

  .step2-items .btn-step__item {
   display: flex;
   cursor: pointer;
   border: 1px solid var(--Black, #17191C);
   padding: 8px 16px;
   justify-content: center;
   align-items: center;
   gap: 8px;
   align-self: stretch;
   color: var(--Black, #17191C);
   
   /* Text */
   font-family: 'Caros Soft';
   font-size: 16px;
   font-style: normal;
   font-weight: 600;
   line-height: 100%; /* 16px */
   letter-spacing: 0.16px;
   text-transform: uppercase;
  }

  .button-step {
   display: flex;
width: 325px;
padding: 22px 70px 22px 70px;
margin: 0 0 0 20px;
justify-content: center;
align-items: center;
gap: 8px;
background: var(--Red, #DE2127);
color: var(--White, #FFF);
text-align: center;

/* Button 16 */
font-family: 'Caros Soft';
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 100%; /* 16px */
letter-spacing: 0.16px;
text-transform: uppercase;
  }

.section-choice .row {
   display: none;
}

.section-choice .row.active {
   display: flex;
}

.colors-item__wrapper .color-block {
   width: 70px;
   height: 70px;
   display: block;
}

.color-interior .colors-item__wrapper .color-block img {
   width: 70px;
   height: 70px;
   display: block;
}

.black-audi {
   display: none;
}

.main-photo {
   display: block;
}

.audi-white {
   display: none;
}

.audi-lightgray {
   display: none;
}

.audi-darkgray {
   display: none;
}

.audi-red {
   display: none;
}

.audi-blue {
   display: none;
}

.colors-item__wrapper:last-child {
   padding-right: 0;
}

.colors-item {
   display: flex;
   align-items: center;
   justify-content: flex-start;
}

.step-3 .button-step {
   margin-left: 0;
}

.color-exterior.interior img {
   width: 70px;
   height: 70px;
}

.step-3 .col-md-7 {
   display: flex;
   align-items: start;
   flex-direction: column;
   justify-content: space-between;
}

.step2-items.active {
   border-color: #DE2127;
}


.colors-item__wrapper:hover {
   transform: scale(1.1); /* Увеличиваем размер при наведении */
}

.colors-item__wrapper {
   transition: transform 0.3s ease; /* Анимация для свойства transform при наведении */
}

.colors-item__wrapper {
   display: inline-block;
   margin: 5px;
   position: relative;
}

.select-wrapper::before {
	content: "";

	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);

	display: block;

	/* Рисуем треугольник */
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10.4px 6px 0 6px;
	border-color: #7e9bbd transparent transparent transparent;

}

.page-template-quiz-page .dropdown__button::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 30px;
	transform: translateY(-50%);

	/* Рисуем треугольник */
    width: 0;
    height: 0;
    border-width: 18.4px 12px 0 12px;
    border-color: #000000 transparent transparent transparent;
	border-style: solid;

}

.checkmark {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: #00F; /* Цвет галочки */
   font-size: 24px;
   display: none;
}

.colors-item__wrapper.active {
   border: 3px solid #DE2127;
   position: relative;
}

.colors-item__wrapper.active::after {
   content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px; /* Укажите нужную ширину для иконки */
    height: 20px; /* Укажите нужную высоту для иконки */
   background: url('../img/png-clipart-round-green-check-mark-illustration-check-mark-bottle-material-green-tick-miscellaneous-angle.png');
   background-repeat: no-repeat;
   background-size: contain;
}

.step-6 h2 {
   color: #000;
   font-family: 'Caros Soft';
   font-size: 32px;
   font-style: normal;
   font-weight: 600;
   line-height: 120%; /* 38.4px */
   letter-spacing: -0.64px;
   text-transform: uppercase;
}

.step-6 p {
   color: #000;

/* Text */
font-family: 'Caros Soft';
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 100%; /* 16px */
letter-spacing: 0.16px;
text-transform: uppercase;
}

.configuration-block {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-bottom: 24px;
}

.configuration-block:last-child {
   padding-bottom: 0;
}

.configuration-block .description-title {
   color: var(--black-60, rgba(20, 21, 23, 0.60));

   /* Text */
   font-family: 'Caros Soft';
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 100%; /* 16px */
   padding-bottom: 8px;
}

.configuration-block .description-choice {
   color: var(--Black, #17191C);

   /* Text */
   font-family: 'Caros Soft';
   font-size: 16px;
   font-style: normal;
   font-weight: 600;
   line-height: 100%; /* 16px */
   letter-spacing: 0.16px;
   text-transform: uppercase;
}

.configuration-block a {
   color: var(--black-60, rgba(20, 21, 23, 0.60));
   text-align: center;
   font-family: 'Caros Soft';
   font-size: 14px;
   font-style: normal;
   font-weight: 300;
   line-height: 100%; /* 14px */
   text-decoration-line: underline;
}

#dropdown2 {
   display: none;
}

.dropdown {
   margin-top: 30px;
}

.dropdown__list {
   top: 67px !important;
}

.auto-slider__section {
   width: 100%;
   height: 100%;
   background-image: url('../img/new_footer_image.png');
   background-size: cover;
   background-repeat: no-repeat;

}

.exterior.main-photo {
   position: relative;
}

.exterior.main-photo .slider-container {
   /* Стили для вашего слайдера, например, ширина, высота и overflow */
}

.exterior.main-photo .slick-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   justify-content: space-between;
   z-index: 999;
   border: none;
   display: flex;
   width: 80px;
   height: 80px;
   padding: 28px;
   justify-content: center;
   align-items: center;
   border-radius: 80px;
   background: var(--black-60, rgba(20, 21, 23, 0.60));
   backdrop-filter: blur(20px);
}

.car_-preview p {
   color: var(--White, #000);
   text-align: center;

   /* H3 */
   font-family: 'Caros Soft';
   font-size: 56px;
   font-style: normal;
   font-weight: 600;
   line-height: 120%; /* 67.2px */
   letter-spacing: -1.12px;
   text-transform: uppercase;
}

.exterior.main-photo button.slick-prev {
   left: -75px;
}

.exterior.main-photo button.slick-next {
   right: -75px;
}

.exterior.main-photo .slick-next {
   right: 0;
}

.exterior.main-photo .prev-arrow,
.exterior.main-photo .next-arrow {
   font-size: 24px;
   cursor: pointer;
}

.step-current p {
   color: var(--Black, #17191C);
   font-family: 'Caros Soft';
   font-size: 14px;
   font-style: normal;
   font-weight: 300;
   line-height: 100%; /* 14px */
   letter-spacing: 0.14px;
   text-transform: uppercase;
	margin-bottom: 1rem !important;
}

.step-current p span {
   color: #828282;
}



.img-block img {
   width: 100%;
}

.img-block {
   height: 100%;
   width: 41%;
   text-align: center !important;
   position: relative;
   margin: 0 auto;
   padding-top: 30px;
}

.button-chenge {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-bottom: 30px;
}

.intterrior-btn, .exterrior-btn {
   padding: 8px 20px;
   background: var(--Red, #DE2127);
   color: var(--White, #FFF);
   text-align: center;

   /* Button 16 */
   font-family: 'Caros Soft';
   font-size: 16px;
   font-style: normal;
   font-weight: 600;
   line-height: 100%; /* 16px */
   letter-spacing: 0.16px;
   text-transform: uppercase;
   cursor: pointer;
}

#interrior {
   display: block;
}

#interrior {
   display: none;
}

.first-interrior {
   display: block;
}

.second-interrior {
   display: none;
}

.third-interrior {
   display: none;
}

.img-block {
   display: none;
   
}

.button-block {
   position: absolute;
   top: 0;
   transform: translate(-50%, 20px);
   left: 50%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   max-width: 190px;
}

.button-block p {
   color: var(--black-60, rgba(20, 21, 23, 0.60));
   text-align: center;
   font-family: 'Caros Soft';
   font-size: 14px;
   font-style: normal;
   font-weight: 300;
   line-height: 100%; /* 14px */
   text-decoration-line: underline;
   cursor: pointer;
   margin: 0;
   padding-right: 30px;
}
.button-block p:last-child {
   padding-right: 0;
}


.radio input[type="radio"] {
   position: absolute;
   opacity: 0; }
   .radio input[type="radio"] + .radio-label:before {
     content: '';
     background: white;
     border-radius: 100%;
     display: inline-block;
     width: 1.4em;
     height: 1.4em;
     position: relative;
     border: 2px solid #14151799;
     top: -0.2em;
     margin-right: 1em;
     vertical-align: top;
     cursor: pointer;
     text-align: center;
     transition: all 250ms ease; }
   .radio input[type="radio"]:checked + .radio-label:before {
     background-color: #fff;
     box-shadow: inset 0 0 0 6px red;
     border-color: transparent;
    }
   .radio input[type="radio"]:focus + .radio-label:before {
     outline: none;
     border-color: #fff; border-color: transparent;}
   .radio input[type="radio"]:disabled + .radio-label:before {
     box-shadow: inset 0 0 0 6px red;
     border-color: maroon;
     background: maroon; }
   .radio input[type="radio"] + .radio-label:empty:before {
     margin-right: 0; }


     .add-area__block textarea {
       width: 100%;
       box-sizing: border-box;
       resize: none;
       border: 1px solid #1415171A;
       padding: 32px;
       outline: none;
       max-height: 155px;
     }

     .add-area__block p {
       font-family: 'Caros Soft';
       font-size: 16px;
       font-weight: 400;
       line-height: 16px;
       letter-spacing: 0em;
       text-align: left;
       color: rgba(20, 21, 23, 0.6);
       margin: 0;
       padding: 0;
       margin-bottom: 15px;
     }


     .dropdown-list__item {
      margin: 0;
      padding: 0;
      list-style: none;
      background: #fff;
      padding: 30px 26px;
      border-top: 1px solid #1415171A;
      font-family: 'Caros Soft';
      font-size: 16px;
      font-weight: 600;
      line-height: 16px;
      letter-spacing: 0.01em;
      text-align: left;
      cursor: pointer;
      text-transform: uppercase;
      list-style: none;
      border-left: 1px solid #1415171A;
      border-right: 1px solid #1415171A;
   }
   ul {
      padding: 0;
      margin: 0;
      padding-left: 0 !important;
   }
   .dropdown-list__item:hover {
      background: #f7f6f6;
   }
   
   label.radio-label {
      width: 100%;
      display: block;
      cursor: pointer;
   }


.dropdown-list {
   margin: 0;
   padding: 0;
   border-left: 1px solid #1415171A;
   border-right: 1px solid #1415171A;
   overflow: hidden;
   position: absolute;
   left: 0;
   top: 86px;
   width: 100%;
   display: none;
   z-index: 1;
}

.dropdowna {
   position: relative;
}

.dropdown-list--visible {
   display: block;
}
   
   .dropdown-list__item:first-child {
      border-top: none;
   }
   
   .dropdown-list__item:last-child {
      border-bottom: 1px solid #1415171A;
   }

   .section-category__block {
      /* Добавьте стили для блока по вашему усмотрению */
      cursor: pointer;
  }

  .auto-slider__section ul.slick-dots {
      padding: 0;
  }



  @media screen and (min-width: 360px) and (max-width: 576px) {
   .img-block {
      width: 100%;
   }
   .car_-preview p {
      font-size: 34px;
   }
  }

  @media screen and (min-width: 577px) and (max-width: 767px) {
   .img-block {
      width: 100%;
   }

   .car_-preview p {
      font-size: 45px;
   }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
   .img-block {
      width: 100%;
   }
}

.form-group {
   height: 100%;
	width: 100%;
	margin-bottom: 0 !important;
}

.step-flex {
   height: 100%;
	width: 100%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: space-between;
 }

#dropdown1 {
   height: 100%;
   display: flex;
   align-items: flex-start;
   flex-direction: column;
   justify-content: space-between;
}

.choise-block {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: space-between;
}

p.step-title {
   color: var(--Black, #17191C);
font-family: 'Caros Soft';
font-size: 37px;
font-style: normal;
font-weight: 600;
line-height: 120%; /* 48px */
letter-spacing: -0.8px;
text-transform: uppercase;
/*width: 669px;*/
    width: 100%;
}

textarea {
   width: 100%;
  height: 150px;
  resize: none !important;
  outline: none;
  padding: 20px;
}

#step-6 {
   align-items: center;
   justify-content: center !important;
 }

#other_mark_5, #other_mark_6, #other_mark_8 {
  height: 60px;
  width: ;
  padding: 25px 32px;
  width: 100%;
  outline: none;
  border: 1px solid rgba(20, 21, 23, 0.10);
  background: var(--White, #FFF);
  color: var(--Black, #000);
  font-family: 'Caros Soft';
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0.16px;
  text-transform: uppercase;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
	margin-top: 20px;
}

#other_mark, #other_mark_3, #other_mark_4
{
  margin-top: 50px;
  margin-bottom: 20px;
  position: relative;
  height: 60px;
  padding: 25px 32px;
  width: 100%;
  outline: none;
  border: 1px solid rgba(20, 21, 23, 0.10);
  background: var(--White, #FFF);
  color: var(--Black, #000);
  font-family: 'Caros Soft';
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0.16px;
  text-transform: uppercase;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
	
}

.bio-block #name, .bio-block #phone {
  border: 1px solid lightgray !important;
  padding: 10px !important;
}

@media screen and (max-width: 1340px) {
    .quiz__blocks-wrapper {
        overflow-x: scroll;
    }

    .quiz__blocks-wrapper::-webkit-scrollbar {
        /*height: 4px;*/
    }

    .quiz__blocks-wrapper::-webkit-scrollbar-track {
        /*background-color: rgba(0, 0, 0, 0.3);*/
    }

    .quiz__blocks-wrapper::-webkit-scrollbar-thumb {
        /*background-color: white;*/
        /*height: 4px;*/
        /*background-clip: content-box;*/
    }

    .quiz__blocks-wrapper .quiz__blocks-scroll {
        display: flex;
        flex-wrap: nowrap;
    }

    .quiz__blocks-wrapper .quiz__blocks-scroll .section-category__block {
        width: 192px;
    }
}