/*Кнопки*/

/*СТА акцентная для выделения важного Зайти в систему*/

.button-cta-red {
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  background-color: rgba(181, 0, 66, 1);
  background-size: auto;
  background-image: none;
  background-repeat: repeat;
  background-position: left 0px top 0px;
  background-attachment: scroll;
  color: rgba(252, 252, 252, 1);
  transition-property: all;
  transition-duration: 300ms;
  transition-delay: 0ms;
  transition-timing-function: ease
}

.button-cta-red:hover,
.button-cta-red.is-css-hover {
  background-color: rgba(212, 218, 222, 1);
  color: rgba(28, 31, 38, 1)
}

.button-cta-red:active,
.button-cta-red.is-css-active {
  background-color: rgba(252, 252, 252, 1);
  color: rgba(28, 31, 38, 1)
}

/*Погружение на другую страницу из слайдера*/
.button-cta-red {
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  background-color: rgba(181, 0, 66, 1);
  background-size: auto;
  background-image: none;
  background-repeat: repeat;
  background-position: left 0px top 0px;
  background-attachment: scroll;
  color: rgba(252, 252, 252, 1);
  transition-property: all;
  transition-duration: 300ms;
  transition-delay: 0ms;
  transition-timing-function: ease
}

.button-cta-red:hover,
.button-cta-red.is-css-hover {
  background-color: rgba(212, 218, 222, 1);
  color: rgba(28, 31, 38, 1)
}

.button-cta-red:active,
.button-cta-red.is-css-active {
  background-color: rgba(252, 252, 252, 1);
  color: rgba(28, 31, 38, 1)
}

/*Погружение на конкретную услугу 
из карточки собранных услуг*/
.button-dive-white {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  background-color: rgb(244, 246, 247);
  color: rgba(119, 121, 125, 1);
  transition-property: all;
  transition-duration: 300ms;
  transition-delay: 0ms;
  transition-timing-function: ease
}

.button-dive-white:hover,
.button-dive-white.is-css-hover {
  background-color: rgb(252, 252, 252);
  color: rgba(28, 31, 38, 1)
}

.button-dive-white:active,
.button-dive-white.is-css-active {
  color: rgba(28, 31, 38, 1);
  background-color: rgba(201, 208, 214, 1)
}
/*Только хедер меню*/
.button-dive-yellow {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  background-color: rgb(235, 183, 56);
  color: rgba(28, 31, 38, 1);
  transition-property: all;
  transition-duration: 300ms;
  transition-delay: 0ms;
  transition-timing-function: ease
}

.button-dive-yellow:hover,
.button-dive-yellow.is-css-hover {
  background-color: rgb(212, 218, 222);
  color: rgba(28, 31, 38, 1)
}

.button-dive-yellow:active,
.button-dive-yellow.is-css-active {
  background-color: rgba(168, 180, 190, 1)
}
/*Только футер страница или PDF*/
.button-header {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-size: auto;
  background-image: none;
  background-repeat: repeat;
  background-position: left 0px top 0px;
  background-attachment: scroll;
  color: rgba(164, 165, 168, 1);
  transition-property: all;
  transition-duration: 300ms;
  transition-delay: 0ms;
  transition-timing-function: ease
}

.button-header:hover,
.button-header.is-css-hover {
  color: rgba(28, 31, 38, 1)
}

.button-header:active,
.button-header.is-css-active {
  background-color: rgba(235, 183, 56, 1);
  color: rgba(28, 31, 38, 1)
}
/*Только хедер
выбор города*/
.button-footer {
  background-image: none;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  padding-top: 4px;
  padding-bottom: 4px;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  background-size: auto;
  padding-left: 0px;
  padding-right: 0px;
  color: rgba(119, 121, 125, 1);
  transition-property: all;
  transition-duration: 300ms;
  transition-delay: 0ms;
  transition-timing-function: ease
}

.button-footer:hover,
.button-footer.is-css-hover {
  color: rgba(28, 31, 38, 1)
}

.button-footer:active,
.button-footer.is-css-active {
  color: rgba(164, 165, 168, 1)
}
/*Внутри карточки препарата
Открывает поп-ап окно с наличием в аптеках*/
.button-city {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  width: auto;
  align-items: center;
  justify-content: center;
  column-gap: 12px;
  color: rgba(28, 31, 38, 1);
  background-color: rgb(244, 246, 247);
  transition-property: all;
  transition-duration: 300ms;
  transition-delay: 0ms;
  transition-timing-function: ease
}

.button-city:hover,
.button-city.is-css-hover {
  background-color: rgb(212, 218, 222)
}

.button-city:active,
.button-city.is-css-active {
  background-color: rgba(168, 180, 190, 1)
}
/*Только хедер 
Авторизированный пользователь
Погружение в личный кабинет*/
.button-pharmacies {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
  width: auto;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  color: rgba(119, 121, 125, 1);
  background-color: rgb(227, 231, 234);
  transition-property: all;
  transition-duration: 300ms;
  transition-delay: 0ms;
  transition-timing-function: ease
}

.button-pharmacies:hover,
.button-pharmacies.is-css-hover {
  background-color: rgb(201, 208, 214)
}
/*Только хедер 
Корзина Избранное
Личный кабинет*/
.button-personal {
  width: auto;
  height: auto;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  align-items: center;
  justify-content: flex-start;
  column-gap: 8px;
  background-color: rgb(244, 246, 247);
  transition-property: all;
  transition-duration: 300ms;
  transition-delay: 0ms;
  transition-timing-function: ease
}

.button-personal:hover,
.button-personal.is-css-hover {
  background-color: rgb(212, 218, 222)
}

.button-personal:active,
.button-personal.is-css-active {
  background-color: rgba(168, 180, 190, 1)
}
/*Только карточки препарата*/
.button-icon-background {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 40px;
  height: 40px;
  background-color: rgb(244, 246, 247);
  transition-property: all;
  transition-duration: 300ms;
  transition-delay: 0ms;
  transition-timing-function: ease
}

.button-icon-background:hover,
.button-icon-background.is-css-hover {
  background-color: rgb(212, 218, 222)
}

.button-icon-background:active,
.button-icon-background.is-css-active {
  background-color: rgba(168, 180, 190, 1)
}
/*Блок выбора количества штук препарата*/
.button-comparison {
  width: 40px;
  height: 40px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  background-color: rgba(38, 68, 92, 1);
  transition-property: all;
  transition-duration: 300ms;
  transition-delay: 0ms;
  transition-timing-function: ease;
  background-size: auto;
  background-image: url("/d/vidsravnenie_zalivkadefault_razmerdefault_cvetdefault.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll
}

.button-comparison:hover,
.button-comparison.is-css-hover {
  background-color: rgba(81, 105, 125, 1)
}

.button-comparison:active,
.button-comparison.is-css-active {
  background-color: rgba(181, 0, 66, 1);
  background-image: url("/d/belyi.svg")
}
/*Блок выбора количества штук препарата*/
.button-minus {
  width: 40px;
  height: 40px;
  background-size: auto;
  background-image: url("/d/ikonki-1.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
  transition-property: all;
  transition-duration: 300ms;
  transition-delay: 0ms;
  transition-timing-function: ease
}

.button-minus:hover,
.button-minus.is-css-hover {
  background-image: url("/d/vid_zalivkadefault_razmerdefault_cvetdefault.svg")
}

.button-minus:active,
.button-minus.is-css-active {
  background-image: url("/d/ikonki-1_841281.svg")
}
/*Удаление препарата из корзины*/
.button-plus {
  width: 40px;
  height: 40px;
  background-size: auto;
  background-image: url("/d/ikonki-2.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
  transition-property: all;
  transition-duration: 300ms;
  transition-delay: 0ms;
  transition-timing-function: ease
}

.button-plus:hover,
.button-plus.is-css-hover {
  background-image: url("/d/vid_zalivkadefault_razmerdefault_cvetdefault_223445.svg")
}

.button-plus:active,
.button-plus.is-css-active {
  background-image: url("/d/ikonki-2_447796.svg")
}
/*Добавить в избранное*/
.button-delete {
  width: 40px;
  height: 40px;
  background-size: auto;
  background-image: url("/d/udalit_svetlaya.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
  transition-property: all;
  transition-duration: 300ms;
  transition-delay: 0ms;
  transition-timing-function: ease
}


.button-delete:hover,
.button-delete.is-css-hover {
  background-image: url("/d/udalit_temnyi.svg")
}

.button-delete:active,

.button-delete.is-css-active {
  background-image: url("/d/ikonki_766079.svg")
}
/*Блок выбора количества штук препарата*/
.button-like {
  width: 40px;
  height: 40px;
  background-position: center center;
  background-image: url("/d/vidserdce_zalivkadefault_razmerdefault_cvetdefault.svg");
  transition-property: all;
  transition-duration: 300ms;
  transition-delay: 0ms;
  transition-timing-function: ease
}

.button-like:hover,
.button-like.is-css-hover {
  background-image: url("/d/ikonki.svg")
}

.button-like:active,
.button-like.is-css-active {
  background-image: url("/d/vidserdce_zalivkazalito_razmerdefault_cvetdefault.svg")
}

/*---------*/
.button-quantity {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 16px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  background-color: rgba(227, 231, 234, 1)
}