/* изменение фона у кнопки 1*/
#rec1488511181 .my-custom-button-1 {
  background-image: url('https://static.tildacdn.com/tild6565-3666-4034-b765-393837613066/def.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* или по желанию */
  color: transparent; /* если хотите скрыть текст, иначе оставьте */
  cursor: pointer;
  transition: background-image 0.3s ease;
  /* Добавьте размер кнопки, если нужно */
  width: 250px; 
  height: 50px;
}

#rec1488511181 .my-custom-button-1:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3536-3331-4332-b839-643330323432/hov.svg');
}

#rec1488511181 .my-custom-button-1:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6264-6262-4439-a564-666538313937/pres.svg');
}

#rec1488511181 .my-custom-button-1:disabled {
  background-image: url('https://static.tildacdn.com/tild6565-3666-4034-b765-393837613066/def.svg');
  cursor: not-allowed;
  opacity: 0.5; /* Опционально, чтобы показать, что кнопка отключена */
}

/* изменение фона у кнопки 2*/
#rec1488511181 .my-custom-button-2 {
  background-image: url('https://static.tildacdn.com/tild3832-6638-4038-a638-353663313437/default.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  cursor: pointer;
  transition: background-image 0.3s ease;
  width: 205px; 
  height: 50px;
}

/* При наведении */
#rec1488511181 .my-custom-button-2:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3531-3432-4365-b462-336239386265/hover.svg');
}

/* При нажатии */
#rec1488511181 .my-custom-button-2:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6132-6164-4933-a431-633438653130/pressed.svg');
}

/* Отключённое состояние */
#rec1488511181 .my-custom-button-2:disabled {
  background-image: url('https://static.tildacdn.com/tild3832-6638-4038-a638-353663313437/default.svg');
  cursor: not-allowed;
  opacity: 0.5; /* можно добавить полупрозрачность */
}

/* изменение иконки у кнопки 1*/
#rec1488511181 .my-custom-button-1 {
  position: relative;
  padding-left: 15px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1488511181 .my-custom-button-1::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1488511181 .my-custom-button-1:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1488511181 .my-custom-button-1:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1488511181 .my-custom-button-1:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1488511181 .my-custom-button-1:disabled,
#rec1488511181 .my-custom-button-1[disabled] {
  background-color: #cccccc;
  cursor: not-allowed;
}

#rec1488511181 .my-custom-button-1:disabled::before,
#rec1488511181 .my-custom-button-1[disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}

/* Пример анимации иконки при наведении */
@keyframes icon-hover-animation {
  0% {
    transform: translateY(-50%) scale(1);
    opacity: 0;
  }
  100% {
    transform: translateY(-50%) scale(1.1);
    opacity: 1;
  }
}

/* Пример анимации при нажатии */
@keyframes icon-active-animation {
  0% {
    transform: translateY(-50%) scale(1.1);
    opacity: 1;
  }
  50% {
    transform: translateY(-50%) scale(0.95);
    opacity: 0.7;
  }
  100% {
    transform: translateY(-50%) scale(1);
    opacity: 1;
  }
}

/* изменение иконки у кнопки 2*/
#rec1488511181 .my-custom-button-2 {
  padding-left: 25px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1488511181 .my-custom-button-2::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1488511181 .my-custom-button-2:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1488511181 .my-custom-button-2:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1488511181 .my-custom-button-2:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1488511181 .my-custom-button-2:disabled::before,
#rec1488511181 .my-custom-button-2[disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}

/* изменение фона у кнопки 3*/
#rec1489748081 .my-custom-button-3 {
  background-image: url('https://static.tildacdn.com/tild6565-3666-4034-b765-393837613066/def.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* или по желанию */
  color: transparent; /* если хотите скрыть текст, иначе оставьте */
  cursor: pointer;
  transition: background-image 0.3s ease;
  /* Добавьте размер кнопки, если нужно */
  width: 250px; 
  height: 50px;
}

#rec1489748081 .my-custom-button-3:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3536-3331-4332-b839-643330323432/hov.svg');
}

#rec1489748081 .my-custom-button-3:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6264-6262-4439-a564-666538313937/pres.svg');
}

#rec1489748081 .my-custom-button-3:disabled {
  background-image: url('https://static.tildacdn.com/tild6565-3666-4034-b765-393837613066/def.svg');
  cursor: not-allowed;
  opacity: 0.5; /* Опционально, чтобы показать, что кнопка отключена */
}

/* изменение иконки у кнопки 3*/
#rec1489748081 .my-custom-button-3 {
  padding-left: 15px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1489748081 .my-custom-button-3::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1489748081 .my-custom-button-3:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1489748081 .my-custom-button-3:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1489748081 .my-custom-button-3:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1489748081 .my-custom-button-3:disabled::before,
#rec1489748081 .my-custom-button-3[disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}

/* изменение фона у кнопки 4*/
#rec1489868891 .my-custom-button-4 {
  background-image: url('https://static.tildacdn.com/tild6431-6634-4336-b136-653736306337/D.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* или по желанию */
  color: transparent; /* если хотите скрыть текст, иначе оставьте */
  cursor: pointer;
  transition: background-image 0.3s ease;
  /* Добавьте размер кнопки, если нужно */
  width: 250px; 
  height: 50px;
}

#rec1489868891 .my-custom-button-4:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3265-6639-4633-a434-346332363239/H.svg');
}

#rec1489868891 .my-custom-button-4:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6630-3561-4037-b935-623464623939/P.svg');
}

#rec1489868891 .my-custom-button-4:disabled {
  background-image: url('https://static.tildacdn.com/tild6431-6634-4336-b136-653736306337/D.svg');
  cursor: not-allowed;
  opacity: 0.5; /* Опционально, чтобы показать, что кнопка отключена */
}

/* изменение иконки у кнопки 4*/
#rec1489868891 .my-custom-button-4 {
  padding-left: 15px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1489868891 .my-custom-button-4::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1489868891 .my-custom-button-4:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1489868891 .my-custom-button-4:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1489868891 .my-custom-button-4:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1489868891 .my-custom-button-4:disabled::before,
#rec1489868891 .my-custom-button-4[disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}

/* изменение фона у кнопки 5*/
#rec1489969491 .my-custom-button-5 {
  background-image: url('https://static.tildacdn.com/tild3663-3333-4430-a366-323634653062/typedefault.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* или по желанию */
  color: transparent; /* если хотите скрыть текст, иначе оставьте */
  cursor: pointer;
  transition: background-image 0.3s ease;
  /* Добавьте размер кнопки, если нужно */
  width: 250px; 
  height: 50px;
}

#rec1489969491 .my-custom-button-5:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6566-3331-4763-b635-323863383462/typehover.svg');
}

#rec1489969491 .my-custom-button-5:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3438-3839-4234-a130-643035333230/typepressed.svg');
}

#rec1489969491 .my-custom-button-5:disabled {
  background-image: url('https://static.tildacdn.com/tild3663-3333-4430-a366-323634653062/typedefault.svg');
  cursor: not-allowed;
  opacity: 0.5; /* Опционально, чтобы показать, что кнопка отключена */
}

/* изменение иконки у кнопки 5*/
#rec1489969491 .my-custom-button-5 {
  padding-left: 15px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1489969491 .my-custom-button-5::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1489969491 .my-custom-button-5:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1489969491 .my-custom-button-5:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1489969491 .my-custom-button-5:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1489969491 .my-custom-button-5:disabled::before,
#rec1489969491 .my-custom-button-5[disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}

/* изменение фона у кнопки 6*/
#rec1490314061 .my-custom-button-6 {
  background-image: url('https://static.tildacdn.com/tild6565-3666-4034-b765-393837613066/def.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* или по желанию */
  color: transparent; /* если хотите скрыть текст, иначе оставьте */
  cursor: pointer;
  transition: background-image 0.3s ease;
  /* Добавьте размер кнопки, если нужно */
  width: 250px; 
  height: 50px;
}

#rec1490314061 .my-custom-button-6:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3536-3331-4332-b839-643330323432/hov.svg');
}

#rec1490314061 .my-custom-button-6:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6264-6262-4439-a564-666538313937/pres.svg');
}

#rec1490314061 .my-custom-button-6:disabled {
  background-image: url('https://static.tildacdn.com/tild6565-3666-4034-b765-393837613066/def.svg');
  cursor: not-allowed;
  opacity: 0.5; /* Опционально, чтобы показать, что кнопка отключена */
}

/* изменение иконки у кнопки 6*/
#rec1490314061 .my-custom-button-6 {
  padding-left: 15px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1490314061 .my-custom-button-6::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1490314061 .my-custom-button-6:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1490314061 .my-custom-button-6:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1490314061 .my-custom-button-6:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1490314061 .my-custom-button-6:disabled::before,
#rec1490314061 .my-custom-button-6[disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}

/* изменение фона у кнопки 1моб*/
#rec1488511181 .my-custom-button-1-mob {
  background-image: url('https://static.tildacdn.com/tild3665-3861-4062-a661-656264656665/def_300.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* или по желанию */
  color: transparent; /* если хотите скрыть текст, иначе оставьте */
  cursor: pointer;
  transition: background-image 0.3s ease;
  /* Добавьте размер кнопки, если нужно */
  width: 250px; 
  height: 50px;
}

#rec1488511181 .my-custom-button-1-mob:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6630-3930-4639-b336-336465623938/hov_300.svg');
}

#rec1488511181 .my-custom-button-1-mob:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6138-6233-4036-b834-633538656535/pres_300.svg');
}

#rec1488511181 .my-custom-button-1-mob:disabled {
  background-image: url('https://static.tildacdn.com/tild3665-3861-4062-a661-656264656665/def_300.svg');
  cursor: not-allowed;
  opacity: 0.5; /* Опционально, чтобы показать, что кнопка отключена */
}

/* изменение иконки у кнопки 1моб*/
#rec1488511181 .my-custom-button-1-mob {
  padding-left: 15px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1488511181 .my-custom-button-1-mob::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1488511181 .my-custom-button-1-mob:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1488511181 .my-custom-button-1-mob:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1488511181 .my-custom-button-1-mob:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1488511181 .my-custom-button-1-mob:disabled::before,
#rec1488511181 .my-custom-button-1-mob[disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}

/* изменение фона у кнопки 2моб*/
#rec1488511181 .my-custom-button-2-mob {
  background-image: url('https://static.tildacdn.com/tild6237-6635-4664-a633-353532653930/default_300.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* или по желанию */
  color: transparent; /* если хотите скрыть текст, иначе оставьте */
  cursor: pointer;
  transition: background-image 0.3s ease;
  /* Добавьте размер кнопки, если нужно */
  width: 250px; 
  height: 50px;
}

#rec1488511181 .my-custom-button-2-mob:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6134-6636-4363-b335-323166623163/hover_300.svg');
}

#rec1488511181 .my-custom-button-2-mob:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3636-6663-4034-a339-336462313365/pressed_300.svg');
}

#rec1488511181 .my-custom-button-2-mob:disabled {
  background-image: url('https://static.tildacdn.com/tild6237-6635-4664-a633-353532653930/default_300.svg');
  cursor: not-allowed;
  opacity: 0.5; /* Опционально, чтобы показать, что кнопка отключена */
}

/* изменение иконки у кнопки 2моб*/
#rec1488511181 .my-custom-button-2-mob {
  padding-left: 15px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1488511181 .my-custom-button-2-mob::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1488511181 .my-custom-button-2-mob:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1488511181 .my-custom-button-2-mob:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1488511181 .my-custom-button-2-mob:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1488511181 .my-custom-button-2-mob:disabled::before,
#rec1488511181 .my-custom-button-2-mob[disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}

/* изменение фона у кнопки 3моб*/
#rec1489748081 .my-custom-button-3-mob {
  background-image: url('https://static.tildacdn.com/tild6431-6332-4561-b761-313061323634/type_def_300.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* или по желанию */
  color: transparent; /* если хотите скрыть текст, иначе оставьте */
  cursor: pointer;
  transition: background-image 0.3s ease;
  /* Добавьте размер кнопки, если нужно */
  width: 250px; 
  height: 50px;
}

#rec1489748081 .my-custom-button-3-mob:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6564-6435-4437-a163-316263633234/type_hov_300.svg');
}

#rec1489748081 .my-custom-button-3-mob:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3738-6465-4764-a535-353038326661/type_press_300.svg');
}

#rec1489748081 .my-custom-button-3-mob:disabled {
  background-image: url('https://static.tildacdn.com/tild6431-6332-4561-b761-313061323634/type_def_300.svg');
  cursor: not-allowed;
  opacity: 0.5; /* Опционально, чтобы показать, что кнопка отключена */
}

/* изменение иконки у кнопки 3моб*/
#rec1489748081 .my-custom-button-3-mob {
  padding-left: 15px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1489748081 .my-custom-button-3-mob::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1489748081 .my-custom-button-3-mob:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1489748081 .my-custom-button-3-mob:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1489748081 .my-custom-button-3-mob:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1489748081 .my-custom-button-3-mob:disabled::before,
#rec1489748081 .my-custom-button-3-mob[disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}

/* изменение фона у кнопки 4моб*/
#rec1489868891 .my-custom-button-4-mob {
  background-image: url('https://static.tildacdn.com/tild6237-6635-4664-a633-353532653930/default_300.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* или по желанию */
  color: transparent; /* если хотите скрыть текст, иначе оставьте */
  cursor: pointer;
  transition: background-image 0.3s ease;
  /* Добавьте размер кнопки, если нужно */
  width: 250px; 
  height: 50px;
}

#rec1489868891 .my-custom-button-4-mob:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6134-6636-4363-b335-323166623163/hover_300.svg');
}

#rec1489868891 .my-custom-button-4-mob:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3636-6663-4034-a339-336462313365/pressed_300.svg');
}

#rec1489868891 .my-custom-button-4-mob:disabled {
  background-image: url('https://static.tildacdn.com/tild6237-6635-4664-a633-353532653930/default_300.svg');
  cursor: not-allowed;
  opacity: 0.5; /* Опционально, чтобы показать, что кнопка отключена */
}

/* изменение иконки у кнопки 4моб*/
#rec1489868891 .my-custom-button-4-mob {
  padding-left: 15px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1489868891 .my-custom-button-4-mob::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1489868891 .my-custom-button-4-mob:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1489868891 .my-custom-button-4-mob:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1489868891 .my-custom-button-4-mob:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1489868891 .my-custom-button-4-mob:disabled::before,
#rec1489868891 .my-custom-button-4-mob[disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}

/* изменение фона у кнопки 5моб*/
#rec1489969491 .my-custom-button-5-mob {
  background-image: url('https://static.tildacdn.com/tild3665-3861-4062-a661-656264656665/def_300.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* или по желанию */
  color: transparent; /* если хотите скрыть текст, иначе оставьте */
  cursor: pointer;
  transition: background-image 0.3s ease;
  /* Добавьте размер кнопки, если нужно */
  width: 250px; 
  height: 50px;
}

#rec1489969491 .my-custom-button-5-mob:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6630-3930-4639-b336-336465623938/hov_300.svg');
}

#rec1489969491 .my-custom-button-5-mob:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6138-6233-4036-b834-633538656535/pres_300.svg');
}

#rec1489969491 .my-custom-button-5-mob:disabled {
  background-image: url('https://static.tildacdn.com/tild3665-3861-4062-a661-656264656665/def_300.svg');
  cursor: not-allowed;
  opacity: 0.5; /* Опционально, чтобы показать, что кнопка отключена */
}

/* изменение иконки у кнопки 5моб*/
#rec1489969491 .my-custom-button-5-mob {
  padding-left: 15px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1489969491 .my-custom-button-5-mob::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1489969491 .my-custom-button-5-mob:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1489969491 .my-custom-button-5-mob:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1489969491 .my-custom-button-5-mob:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1489969491 .my-custom-button-5-mob:disabled::before,
#rec1489969491 .my-custom-button-5-mob[disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}

/* изменение фона у кнопки 6моб*/
#rec1490314061 .my-custom-button-6-mob {
  background-image: url('https://static.tildacdn.com/tild6431-6332-4561-b761-313061323634/type_def_300.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* или по желанию */
  color: transparent; /* если хотите скрыть текст, иначе оставьте */
  cursor: pointer;
  transition: background-image 0.3s ease;
  /* Добавьте размер кнопки, если нужно */
  width: 250px; 
  height: 50px;
}

#rec1490314061 .my-custom-button-6-mob:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6564-6435-4437-a163-316263633234/type_hov_300.svg');
}

#rec1490314061 .my-custom-button-6-mob:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3738-6465-4764-a535-353038326661/type_press_300.svg');
}

#rec1490314061 .my-custom-button-6-mob:disabled {
  background-image: url('https://static.tildacdn.com/tild6431-6332-4561-b761-313061323634/type_def_300.svg');
  cursor: not-allowed;
  opacity: 0.5; /* Опционально, чтобы показать, что кнопка отключена */
}

/* изменение иконки у кнопки 6моб*/
#rec1490314061 .my-custom-button-6-mob {
  padding-left: 15px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1490314061 .my-custom-button-6-mob::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1490314061 .my-custom-button-6-mob:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1490314061 .my-custom-button-6-mob:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1490314061 .my-custom-button-6-mob:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1490314061 .my-custom-button-6-mob:disabled::before,
#rec1490314061 .my-custom-button-6-mob[disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}

/* Стили для кнопки внутри вашей формы */
#rec1525574051 .my-custom-form button[type="submit"] {
  background-image: url('https://static.tildacdn.com/tild6333-6136-4339-a338-663463313832/def_form.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* или по желанию */
  cursor: pointer;
  transition: background-image 0.3s ease;
  /* Добавьте размер кнопки, если нужно */
  width: 265px; 
  height: 50px;
}

#rec1525574051 .my-custom-form button[type="submit"]:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6531-3433-4233-a635-363330393761/hov_form.svg');
}

#rec1525574051 .my-custom-form button[type="submit"]:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3665-3737-4162-b564-356432336235/pres_form.svg');
}

#rec1525574051 .my-custom-form button[type="submit"]:disabled {
  background-image: url('https://static.tildacdn.com/tild6333-6136-4339-a338-663463313832/def_form.svg');
  cursor: not-allowed;
  opacity: 0.5; /* Опционально, чтобы показать, что кнопка отключена */
}

/* изменение иконки у кнопки нашей формы*/
#rec1525574051 .my-custom-form button[type="submit"] {
  padding-left: 15px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1525574051 .my-custom-form button[type="submit"]::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1525574051 .my-custom-form button[type="submit"]:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1525574051 .my-custom-form button[type="submit"]:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1525574051 .my-custom-form button[type="submit"]:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1525574051 .my-custom-form button[type="submit"]:disabled::before,
#rec1525574051 .my-custom-form button[type="submit"][disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}

/* изменение фона у кнопки 10 (тг)*/
#rec1543691921 .my-custom-button-10 {
  background-image: url('https://static.tildacdn.com/tild6565-3666-4034-b765-393837613066/def.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* или по желанию */
  color: transparent; /* если хотите скрыть текст, иначе оставьте */
  cursor: pointer;
  transition: background-image 0.3s ease;
  /* Добавьте размер кнопки, если нужно */
  width: 250px; 
  height: 50px;
}

#rec1543691921 .my-custom-button-10:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3536-3331-4332-b839-643330323432/hov.svg');
}

#rec1543691921 .my-custom-button-10:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6264-6262-4439-a564-666538313937/pres.svg');
}

#rec1543691921 .my-custom-button-10:disabled {
  background-image: url('https://static.tildacdn.com/tild6565-3666-4034-b765-393837613066/def.svg');
  cursor: not-allowed;
  opacity: 0.5; /* Опционально, чтобы показать, что кнопка отключена */
}

/* изменение иконки у кнопки 10 (тг)*/
#rec1543691921 .my-custom-button-10 {
  padding-left: 15px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1543691921 .my-custom-button-10::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1543691921 .my-custom-button-10:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1543691921 .my-custom-button-10:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1543691921 .my-custom-button-10:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1543691921 .my-custom-button-10:disabled::before,
#rec1543691921 .my-custom-button-10[disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}

/* изменение фона у кнопки 11 (тг)*/
#rec1543741991 .my-custom-button-11 {
  background-image: url('https://static.tildacdn.com/tild6565-3666-4034-b765-393837613066/def.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* или по желанию */
  color: transparent; /* если хотите скрыть текст, иначе оставьте */
  cursor: pointer;
  transition: background-image 0.3s ease;
  /* Добавьте размер кнопки, если нужно */
  width: 250px; 
  height: 50px;
}

#rec1543741991 .my-custom-button-11:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3536-3331-4332-b839-643330323432/hov.svg');
}

#rec1543741991 .my-custom-button-11:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6264-6262-4439-a564-666538313937/pres.svg');
}

#rec1543741991 .my-custom-button-11:disabled {
  background-image: url('https://static.tildacdn.com/tild6565-3666-4034-b765-393837613066/def.svg');
  cursor: not-allowed;
  opacity: 0.5; /* Опционально, чтобы показать, что кнопка отключена */
}

/* изменение иконки у кнопки 11 (тг)*/
#rec1543741991 .my-custom-button-11 {
  padding-left: 15px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1543741991 .my-custom-button-11::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1543741991 .my-custom-button-11:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1543741991 .my-custom-button-11:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1543741991 .my-custom-button-11:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1543741991 .my-custom-button-11:disabled::before,
#rec1543741991 .my-custom-button-11[disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}

/* изменение фона у кнопки 19*/
#rec1548382701 .my-custom-button-19 {
  background-image: url('https://static.tildacdn.com/tild6431-6634-4336-b136-653736306337/D.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* или по желанию */
  color: transparent; /* если хотите скрыть текст, иначе оставьте */
  cursor: pointer;
  transition: background-image 0.3s ease;
  /* Добавьте размер кнопки, если нужно */
  width: 250px; 
  height: 50px;
}

#rec1548382701 .my-custom-button-19:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3265-6639-4633-a434-346332363239/H.svg');
}

#rec1548382701 .my-custom-button-19:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6630-3561-4037-b935-623464623939/P.svg');
}

#rec1548382701 .my-custom-button-19:disabled {
  background-image: url('https://static.tildacdn.com/tild6431-6634-4336-b136-653736306337/D.svg');
  cursor: not-allowed;
  opacity: 0.5; /* Опционально, чтобы показать, что кнопка отключена */
}

/* изменение иконки у кнопки 19*/
#rec1548382701 .my-custom-button-19 {
  padding-left: 15px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1548382701 .my-custom-button-19::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1548382701 .my-custom-button-19:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1548382701 .my-custom-button-19:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1548382701 .my-custom-button-19:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1548382701 .my-custom-button-19:disabled::before,
#rec1548382701 .my-custom-button-19[disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}

/* изменение фона у кнопки 19моб*/
#rec1548382701 .my-custom-button-19-mob {
  background-image: url('https://static.tildacdn.com/tild6237-6635-4664-a633-353532653930/default_300.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* или по желанию */
  color: transparent; /* если хотите скрыть текст, иначе оставьте */
  cursor: pointer;
  transition: background-image 0.3s ease;
  /* Добавьте размер кнопки, если нужно */
  width: 250px; 
  height: 50px;
}

#rec1548382701 .my-custom-button-19-mob:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6134-6636-4363-b335-323166623163/hover_300.svg');
}

#rec1548382701 .my-custom-button-19-mob:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3636-6663-4034-a339-336462313365/pressed_300.svg');
}

#rec1548382701 .my-custom-button-19-mob:disabled {
  background-image: url('https://static.tildacdn.com/tild6237-6635-4664-a633-353532653930/default_300.svg');
  cursor: not-allowed;
  opacity: 0.5; /* Опционально, чтобы показать, что кнопка отключена */
}

/* изменение иконки у кнопки 19моб*/
#rec1548382701 .my-custom-button-19-mob {
  padding-left: 15px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1548382701 .my-custom-button-19-mob::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1548382701 .my-custom-button-19-mob:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1548382701 .my-custom-button-19-mob:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1548382701 .my-custom-button-19-mob:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1548382701 .my-custom-button-19-mob:disabled::before,
#rec1548382701 .my-custom-button-19-mob[disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}

/* изменение фона у кнопки 13*/
#rec1546868181 .my-custom-button-13 {
  background-image: url('https://static.tildacdn.com/tild6565-3666-4034-b765-393837613066/def.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* или по желанию */
  color: transparent; /* если хотите скрыть текст, иначе оставьте */
  cursor: pointer;
  transition: background-image 0.3s ease;
  /* Добавьте размер кнопки, если нужно */
  width: 250px; 
  height: 50px;
}

#rec1546868181 .my-custom-button-13:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3536-3331-4332-b839-643330323432/hov.svg');
}

#rec1546868181 .my-custom-button-13:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6264-6262-4439-a564-666538313937/pres.svg');
}

#rec1546868181 .my-custom-button-13:disabled {
  background-image: url('https://static.tildacdn.com/tild6565-3666-4034-b765-393837613066/def.svg');
  cursor: not-allowed;
  opacity: 0.5; /* Опционально, чтобы показать, что кнопка отключена */
}

/* изменение иконки у кнопки 13*/
#rec1546868181 .my-custom-button-13 {
  padding-left: 15px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1546868181 .my-custom-button-13::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1546868181 .my-custom-button-13:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1546868181 .my-custom-button-13:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1546868181 .my-custom-button-13:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1546868181 .my-custom-button-13:disabled::before,
#rec1546868181 .my-custom-button-13[disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}

/* изменение фона у кнопки 15*/
#rec1547189501 .my-custom-button-15 {
  background-image: url('https://static.tildacdn.com/tild3130-3734-4464-b939-633865643964/D_510.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* или по желанию */
  color: transparent; /* если хотите скрыть текст, иначе оставьте */
  cursor: pointer;
  transition: background-image 0.3s ease;
  /* Добавьте размер кнопки, если нужно */
  width: 250px; 
  height: 50px;
}

#rec1547189501 .my-custom-button-15:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3362-6338-4437-a639-386438346533/H_510.svg');
}

#rec1547189501 .my-custom-button-15:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3566-3862-4333-a630-613034636633/P_510.svg');
}

#rec1547189501 .my-custom-button-15:disabled {
  background-image: url('https://static.tildacdn.com/tild3130-3734-4464-b939-633865643964/D_510.svg');
  cursor: not-allowed;
  opacity: 0.5; /* Опционально, чтобы показать, что кнопка отключена */
}

/* изменение иконки у кнопки 15*/
#rec1547189501 .my-custom-button-15 {
  padding-left: 15px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1547189501 .my-custom-button-15::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1547189501 .my-custom-button-15:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1547189501 .my-custom-button-15:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1547189501 .my-custom-button-15:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1547189501 .my-custom-button-15:disabled::before,
#rec1547189501 .my-custom-button-15[disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}

/* изменение фона у кнопки 16*/
#rec1547189501 .my-custom-button-16 {
  background-image: url('https://static.tildacdn.com/tild3130-3734-4464-b939-633865643964/D_510.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* или по желанию */
  color: transparent; /* если хотите скрыть текст, иначе оставьте */
  cursor: pointer;
  transition: background-image 0.3s ease;
  /* Добавьте размер кнопки, если нужно */
  width: 250px; 
  height: 50px;
}

#rec1547189501 .my-custom-button-16:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3362-6338-4437-a639-386438346533/H_510.svg');
}

#rec1547189501 .my-custom-button-16:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3566-3862-4333-a630-613034636633/P_510.svg');
}

#rec1547189501 .my-custom-button-16:disabled {
  background-image: url('https://static.tildacdn.com/tild3130-3734-4464-b939-633865643964/D_510.svg');
  cursor: not-allowed;
  opacity: 0.5; /* Опционально, чтобы показать, что кнопка отключена */
}

/* изменение иконки у кнопки 16*/
#rec1547189501 .my-custom-button-16 {
  padding-left: 15px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1547189501 .my-custom-button-16::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1547189501 .my-custom-button-16:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1547189501 .my-custom-button-16:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1547189501 .my-custom-button-16:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1547189501 .my-custom-button-16:disabled::before,
#rec1547189501 .my-custom-button-16[disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}

/* изменение фона у кнопки 17*/
#rec1547189501 .my-custom-button-17 {
  background-image: url('https://static.tildacdn.com/tild3837-6633-4762-b938-363064383863/D_420.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* или по желанию */
  color: transparent; /* если хотите скрыть текст, иначе оставьте */
  cursor: pointer;
  transition: background-image 0.3s ease;
  /* Добавьте размер кнопки, если нужно */
  width: 250px; 
  height: 50px;
}

#rec1547189501 .my-custom-button-17:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6331-6339-4962-a465-353965613433/H_420.svg');
}

#rec1547189501 .my-custom-button-17:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3039-3666-4537-a564-393833396462/P_420.svg');
}

#rec1547189501 .my-custom-button-17:disabled {
  background-image: url('https://static.tildacdn.com/tild3837-6633-4762-b938-363064383863/D_420.svg');
  cursor: not-allowed;
  opacity: 0.5; /* Опционально, чтобы показать, что кнопка отключена */
}

/* изменение иконки у кнопки 17*/
#rec1547189501 .my-custom-button-17 {
  padding-left: 15px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1547189501 .my-custom-button-17::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1547189501 .my-custom-button-17:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1547189501 .my-custom-button-17:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1547189501 .my-custom-button-17:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1547189501 .my-custom-button-17:disabled::before,
#rec1547189501 .my-custom-button-17[disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}

/* изменение фона у кнопки 18*/
#rec1547189501 .my-custom-button-18 {
  background-image: url('https://static.tildacdn.com/tild3837-6633-4762-b938-363064383863/D_420.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* или по желанию */
  color: transparent; /* если хотите скрыть текст, иначе оставьте */
  cursor: pointer;
  transition: background-image 0.3s ease;
  /* Добавьте размер кнопки, если нужно */
  width: 250px; 
  height: 50px;
}

#rec1547189501 .my-custom-button-18:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6331-6339-4962-a465-353965613433/H_420.svg');
}

#rec1547189501 .my-custom-button-18:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3039-3666-4537-a564-393833396462/P_420.svg');
}

#rec1547189501 .my-custom-button-18:disabled {
  background-image: url('https://static.tildacdn.com/tild3837-6633-4762-b938-363064383863/D_420.svg');
  cursor: not-allowed;
  opacity: 0.5; /* Опционально, чтобы показать, что кнопка отключена */
}

/* изменение иконки у кнопки 18*/
#rec1547189501 .my-custom-button-18 {
  padding-left: 15px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1547189501 .my-custom-button-18::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1547189501 .my-custom-button-18:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1547189501 .my-custom-button-18:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1547189501 .my-custom-button-18:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1547189501 .my-custom-button-18:disabled::before,
#rec1547189501 .my-custom-button-18[disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}

/* изменение фона у кнопки 14*/
#rec1547669021 .my-custom-button-14 {
  background-image: url('https://static.tildacdn.com/tild6565-3666-4034-b765-393837613066/def.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* или по желанию */
  color: transparent; /* если хотите скрыть текст, иначе оставьте */
  cursor: pointer;
  transition: background-image 0.3s ease;
  /* Добавьте размер кнопки, если нужно */
  width: 250px; 
  height: 50px;
}

#rec1547669021 .my-custom-button-14:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3536-3331-4332-b839-643330323432/hov.svg');
}

#rec1547669021 .my-custom-button-14:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6264-6262-4439-a564-666538313937/pres.svg');
}

#rec1547669021 .my-custom-button-14:disabled {
  background-image: url('https://static.tildacdn.com/tild6565-3666-4034-b765-393837613066/def.svg');
  cursor: not-allowed;
  opacity: 0.5; /* Опционально, чтобы показать, что кнопка отключена */
}

/* изменение иконки у кнопки 14*/
#rec1547669021 .my-custom-button-14 {
  padding-left: 15px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1547669021 .my-custom-button-14::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1547669021 .my-custom-button-14:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1547669021 .my-custom-button-14:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1547669021 .my-custom-button-14:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1547669021 .my-custom-button-14:disabled::before,
#rec1547669021 .my-custom-button-14[disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}

/* изменение фона у кнопки 14моб*/
#rec1547669021 .my-custom-button-14-mob {
  background-image: url('https://static.tildacdn.com/tild6431-6332-4561-b761-313061323634/type_def_300.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* или по желанию */
  color: transparent; /* если хотите скрыть текст, иначе оставьте */
  cursor: pointer;
  transition: background-image 0.3s ease;
  /* Добавьте размер кнопки, если нужно */
  width: 250px; 
  height: 50px;
}

#rec1547669021 .my-custom-button-14-mob:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6564-6435-4437-a163-316263633234/type_hov_300.svg');
}

#rec1547669021 .my-custom-button-14-mob:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3738-6465-4764-a535-353038326661/type_press_300.svg');
}

#rec1547669021 .my-custom-button-14-mob:disabled {
  background-image: url('https://static.tildacdn.com/tild6431-6332-4561-b761-313061323634/type_def_300.svg');
  cursor: not-allowed;
  opacity: 0.5; /* Опционально, чтобы показать, что кнопка отключена */
}

/* изменение иконки у кнопки 14моб*/
#rec1547669021 .my-custom-button-14-mob {
  padding-left: 15px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1547669021 .my-custom-button-14-mob::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1547669021 .my-custom-button-14-mob:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1547669021 .my-custom-button-14-mob:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1547669021 .my-custom-button-14-mob:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1547669021 .my-custom-button-14-mob:disabled::before,
#rec1547669021 .my-custom-button-14-mob[disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}

/* изменение фона у кнопки 20*/
#rec1547189501 .my-custom-button-20 {
  background-image: url('https://static.tildacdn.com/tild6538-6435-4739-b735-613536316665/D_260.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* или по желанию */
  color: transparent; /* если хотите скрыть текст, иначе оставьте */
  cursor: pointer;
  transition: background-image 0.3s ease;
  /* Добавьте размер кнопки, если нужно */
  width: 250px; 
  height: 50px;
}

#rec1547189501 .my-custom-button-20:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3230-6266-4432-b964-343739623361/H_260.svg');
}

#rec1547189501 .my-custom-button-20:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6139-3265-4637-a533-623764353934/P_260.svg');
}

#rec1547189501 .my-custom-button-20:disabled {
  background-image: url('https://static.tildacdn.com/tild6538-6435-4739-b735-613536316665/D_260.svg');
  cursor: not-allowed;
  opacity: 0.5; /* Опционально, чтобы показать, что кнопка отключена */
}

/* изменение иконки у кнопки 20*/
#rec1547189501 .my-custom-button-20 {
  padding-left: 15px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1547189501 .my-custom-button-20::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1547189501 .my-custom-button-20:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1547189501 .my-custom-button-20:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1547189501 .my-custom-button-20:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1547189501 .my-custom-button-20:disabled::before,
#rec1547189501 .my-custom-button-20[disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}

/* изменение фона у кнопки 21*/
#rec1547189501 .my-custom-button-21 {
  background-image: url('https://static.tildacdn.com/tild6538-6435-4739-b735-613536316665/D_260.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* или по желанию */
  color: transparent; /* если хотите скрыть текст, иначе оставьте */
  cursor: pointer;
  transition: background-image 0.3s ease;
  /* Добавьте размер кнопки, если нужно */
  width: 250px; 
  height: 50px;
}

#rec1547189501 .my-custom-button-21:hover:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild3230-6266-4432-b964-343739623361/H_260.svg');
}

#rec1547189501 .my-custom-button-21:active:not(:disabled) {
  background-image: url('https://static.tildacdn.com/tild6139-3265-4637-a533-623764353934/P_260.svg');
}

#rec1547189501 .my-custom-button-21:disabled {
  background-image: url('https://static.tildacdn.com/tild6538-6435-4739-b735-613536316665/D_260.svg');
  cursor: not-allowed;
  opacity: 0.5; /* Опционально, чтобы показать, что кнопка отключена */
}

/* изменение иконки у кнопки 21*/
#rec1547189501 .my-custom-button-21 {
  padding-left: 15px; /* отступ слева под иконку */
  transition: background-color 0.3s ease;
  /* ваш уже существующий стиль для меняющегося фона, например: */
  background-color: #f0f0f0; /* пример */
}

#rec1547189501 .my-custom-button-21::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  /* под размер иконки */
  height: 20px;
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.3s ease;
  pointer-events: none; /* чтобы иконка не мешала клику */
}

/* При наведении меняем иконку и фон кнопки */
#rec1547189501 .my-custom-button-21:hover {
  background-color: #e0e0e0; /* пример цвета при ховере */
}

#rec1547189501 .my-custom-button-21:hover::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-hover-animation 0.5s forwards;
}

/* При нажатии (active) оставляем иконку hover */
#rec1547189501 .my-custom-button-21:active::before {
  background-image: url('https://static.tildacdn.com/tild6231-3262-4036-b538-663238663437/iconContainer_hover.svg');
  animation: icon-active-animation 0.3s forwards;
}

/* При отключенном состоянии (disabled) иконка default и фон серый */
#rec1547189501 .my-custom-button-21:disabled::before,
#rec1547189501 .my-custom-button-21[disabled]::before {
  background-image: url('https://static.tildacdn.com/tild6137-6661-4335-b765-623738363764/iconContainer_defaul.svg');
  opacity: 0.5;
}