:root {
  --primary-color: #3498db;
  --primary-dark: #2980b9;
  --text-color: #2c3e50;
  --text-light: #7f8c8d;
  --bg-color: #fff;
  --border-color: #bdc3c7;
  --panel-bg: #f8f9fa;
  --panel-text: #2c3e50;
  --panel-border: #3498db;
  --hover-bg: #ecf0f1;
  --active-bg: #e1f0fa;
}
* {
  box-sizing: border-box;
}
.accessibility-panel {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background: rgba(248, 249, 250, 0.95) !important;
  border-bottom: 2px solid var(--panel-border) !important;
  padding: 5px 0 !important;
  z-index: 999999 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
  transform: translateY(-100%) !important;
  transition: transform 0.3s ease !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;
  color: var(--panel-text) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  backdrop-filter: blur(2px) !important;
}
.accessibility-panel.show {
  transform: translateY(0) !important;
}
.panel-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 12px !important;
}
.panel-header {
  display: none !important;
}
.panel-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 15px !important;
  flex-wrap: nowrap !important;
}
.control-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 150px !important;
  flex: 1 !important;
}
.control-group.speech-group {
  min-width: 180px !important;
}
.control-group.management-group {
  min-width: 250px !important;
}
.control-group.management-group .control-buttons {
  display: flex !important;
  flex-direction: row !important;
  gap: 5px !important;
  flex-wrap: nowrap !important;
}
.control-label {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text-color) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.control-label svg {
  width: 16px !important;
  height: 16px !important;
  fill: var(--primary-color) !important;
}
.control-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}
.speech-group .control-btn.management-btn {
  min-width: 110px !important;
  height: 32px !important;
  padding: 5px 10px !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.management-group .control-btn.management-btn {
  min-width: 72px !important;
  height: 32px !important;
  padding: 5px 10px !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
.control-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  color: var(--text-color) !important;
  position: relative !important;
  box-sizing: border-box !important;
  width: 42px !important;
  height: 32px !important;
  min-width: 42px !important;
  min-height: 32px !important;
}
.control-btn:hover {
  border: 2px solid var(--primary-color) !important;
  background: var(--hover-bg) !important;
}
.control-btn.active {
  border: 2px solid var(--primary-color) !important;
  background-color: var(--active-bg) !important;
}
.control-btn#increaseFont,
.control-btn#decreaseFont {
  width: 90px !important;
  height: 32px !important;
  min-width: 42px !important;
  min-height: 32px !important;
}
.control-btn#increaseFont svg,
.control-btn#decreaseFont svg {
  width: 24px !important;
  height: 24px !important;
}
.control-btn.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}
.control-btn.disabled:hover {
  border: 1px solid var(--border-color) !important;
  background: #fff !important;
  transform: none !important;
}
.control-btn[data-scheme] {
  width: 50px !important;
  height: 32px !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}
.control-btn[data-scheme] span {
  position: absolute !important;
  left: 3px !important;
  top: 3px !important;
  right: 3px !important;
  bottom: 3px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.control-btn.active[data-scheme] span,
.control-btn:hover[data-scheme] span {
  left: 1px !important;
  top: 1px !important;
  right: 1px !important;
  bottom: 1px !important;
}
.control-btn[data-scheme] svg {
  width: 12px !important;
  height: 18px !important;
}
.control-btn[data-scheme="default"] svg path,
.control-btn[data-scheme="black"] svg path {
  fill: #000 !important;
}
.control-btn[data-scheme="yellow"] {
  background: #000 !important;
}
.control-btn[data-scheme="yellow"] span {
  background: #000 !important;
}
.control-btn[data-scheme="yellow"] svg path {
  fill: #ffff00 !important;
}
.control-btn[data-scheme="blue"] svg path {
  fill: #133c58 !important;
}
.control-btn[data-images] {
  width: 90px !important;
  height: 32px !important;
}
.control-btn[data-images] svg {
  width: 23px !important;
  height: 16px !important;
}
.control-btn.management-btn svg {
  width: 20px !important;
  height: 20px !important;
}
.accessibility-toggle {
  position: fixed !important;
  top: 12px !important;
  right: 12px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 1000000 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s ease !important;
}
.accessibility-toggle:hover {
  opacity: 1 !important;
}
.accessibility-toggle svg {
  width: 24px !important;
  height: 20px !important;
  fill: var(--text-light) !important;
}
.accessibility-toggle .icon-open {
  display: block !important;
}
.accessibility-toggle .icon-close {
  display: none !important;
}
.accessibility-toggle.panel-open .icon-open {
  display: none !important;
}
.accessibility-toggle.panel-open .icon-close {
  display: block !important;
}
.accessibility-panel,
.accessibility-panel * {
  background: rgba(248, 249, 250, 0.95) !important;
  color: var(--panel-text) !important;
  border-color: var(--border-color) !important;
}
html body.scheme-black,
html body.scheme-black .container,
html body.scheme-black .row,
html body.scheme-black [class*="col-"],
html body.scheme-black .card,
html body.scheme-black .card-body,
html body.scheme-black .btn,
html body.scheme-black p,
html body.scheme-black h1,
html body.scheme-black h2,
html body.scheme-black h3,
html body.scheme-black h4,
html body.scheme-black h5,
html body.scheme-black h6,
html body.scheme-black span,
html body.scheme-black a,
html body.scheme-black li,
html body.scheme-black .navbar,
html body.scheme-black .navbar-nav,
html body.scheme-black .nav-link,
html body.scheme-black .dropdown-menu,
html body.scheme-black .modal-content,
html body.scheme-black .form-control {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}
html body.scheme-yellow,
html body.scheme-yellow .container,
html body.scheme-yellow .row,
html body.scheme-yellow [class*="col-"],
html body.scheme-yellow .card,
html body.scheme-yellow .card-body,
html body.scheme-yellow .btn,
html body.scheme-yellow p,
html body.scheme-yellow h1,
html body.scheme-yellow h2,
html body.scheme-yellow h3,
html body.scheme-yellow h4,
html body.scheme-yellow h5,
html body.scheme-yellow h6,
html body.scheme-yellow span,
html body.scheme-yellow a,
html body.scheme-yellow li,
html body.scheme-yellow .navbar,
html body.scheme-yellow .navbar-nav,
html body.scheme-yellow .nav-link,
html body.scheme-yellow .dropdown-menu,
html body.scheme-yellow .modal-content,
html body.scheme-yellow .form-control {
  background: #000000 !important;
  color: #ffff00 !important;
  border-color: #ffff00 !important;
}
html body.scheme-blue,
html body.scheme-blue .container,
html body.scheme-blue .row,
html body.scheme-blue [class*="col-"],
html body.scheme-blue .card,
html body.scheme-blue .card-body,
html body.scheme-blue .btn,
html body.scheme-blue p,
html body.scheme-blue h1,
html body.scheme-blue h2,
html body.scheme-blue h3,
html body.scheme-blue h4,
html body.scheme-blue h5,
html body.scheme-blue h6,
html body.scheme-blue span,
html body.scheme-blue a,
html body.scheme-blue li,
html body.scheme-blue .navbar,
html body.scheme-blue .navbar-nav,
html body.scheme-blue .nav-link,
html body.scheme-blue .dropdown-menu,
html body.scheme-blue .modal-content,
html body.scheme-blue .form-control {
  background: #9fd7ff !important;
  color: #133c58 !important;
  border-color: #133c58 !important;
}
body.hide-images img,
body.hide-images picture,
body.hide-images figure,
body.hide-images video,
body.hide-images iframe,
body.hide-images .image,
body.hide-images [class*="image"],
body.hide-images [class*="img"],
body.hide-images [class*="photo"],
body.hide-images [class*="picture"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}
body.hide-images .card-img-top,
body.hide-images .carousel-item,
body.hide-images [style*="background-image"] {
  background-image: none !important;
}
/* Для схемы "чёрный на белом" */
html body.scheme-black .organization-dropdown-menu,
html body.scheme-black .contact,
html body.scheme-black .team,
html body.scheme-black .carousel-section,
html body.scheme-black .appointment,
html body.scheme-black .organization,
html body.scheme-black .about,
html body.scheme-black .latest-news,
html body.scheme-black .services,
html body.scheme-black .testimonials,
html body.scheme-black .privacy-content,
html body.scheme-black .blog-content,
html body.scheme-black .features,
html body.scheme-black .single-post-content,
html body.scheme-black .sidebar-widget,
html body.scheme-black .post-share,
html body.scheme-black .contact *,
html body.scheme-black .team *,
html body.scheme-black .carousel-section *,
html body.scheme-black .appointment *,
html body.scheme-black .organization *,
html body.scheme-black .about *,
html body.scheme-black .latest-news *,
html body.scheme-black .services *,
html body.scheme-black .testimonials *,
html body.scheme-black .blog-hero *,
html body.scheme-black .blog-content *,
html body.scheme-black .post-share *,
html body.scheme-black .sidebar-widget *,
html body.scheme-black .blog-post-card *,
html body.scheme-black .privacy-content *,
html body.scheme-black .privacy-widget *,
html body.scheme-black .privacy-article *,
html body.scheme-black .privacy-hero *,
html body.scheme-black .features * {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

/* Для схемы "жёлтый на чёрном" */
html body.scheme-yellow .organization-dropdown-menu,
html body.scheme-yellow .contact,
html body.scheme-yellow .team,
html body.scheme-yellow .carousel-section,
html body.scheme-yellow .appointment,
html body.scheme-yellow .organization,
html body.scheme-yellow .about,
html body.scheme-yellow .latest-news,
html body.scheme-yellow .services,
html body.scheme-yellow .testimonials,
html body.scheme-yellow .privacy-content,
html body.scheme-yellow .blog-content,
html body.scheme-yellow .features,
html body.scheme-yellow .single-post-content,
html body.scheme-yellow .sidebar-widget,
html body.scheme-yellow .post-share,
html body.scheme-yellow .sidebar-widget *,
html body.scheme-yellow .contact *,
html body.scheme-yellow .team *,
html body.scheme-yellow .carousel-section *,
html body.scheme-yellow .appointment *,
html body.scheme-yellow .organization *,
html body.scheme-yellow .about *,
html body.scheme-yellow .latest-news *,
html body.scheme-yellow .services *,
html body.scheme-yellow .testimonials *,
html body.scheme-yellow .blog-hero *,
html body.scheme-yellow .blog-content *,
html body.scheme-yellow .sidebar-widget *,
html body.scheme-yellow .blog-post-card *,
html body.scheme-yellow .privacy-content *,
html body.scheme-yellow .privacy-widget *,
html body.scheme-yellow .privacy-article *,
html body.scheme-yellow .privacy-hero *,
html body.scheme-yellow .features * {
  background: #000000 !important;
  color: #ffff00 !important;
  border-color: #ffff00 !important;
}

/* Для схемы "синий на голубом" */
html body.scheme-blue .organization-dropdown-menu,
html body.scheme-blue .contact,
html body.scheme-blue .team,
html body.scheme-blue .carousel-section,
html body.scheme-blue .appointment,
html body.scheme-blue .organization,
html body.scheme-blue .about,
html body.scheme-blue .latest-news,
html body.scheme-blue .services,
html body.scheme-blue .testimonials,
html body.scheme-blue .privacy-content,
html body.scheme-blue .blog-content,
html body.scheme-blue .features,
html body.scheme-blue .single-post-content,
html body.scheme-blue .sidebar-widget,
html body.scheme-blue .post-share,
html body.scheme-blue .sidebar-widget *,
html body.scheme-blue .contact *,
html body.scheme-blue .team *,
html body.scheme-blue .carousel-section *,
html body.scheme-blue .appointment *,
html body.scheme-blue .organization *,
html body.scheme-blue .about *,
html body.scheme-blue .latest-news *,
html body.scheme-blue .services *,
html body.scheme-blue .testimonials *,
html body.scheme-blue .blog-hero *,
html body.scheme-blue .blog-content *,
html body.scheme-blue .sidebar-widget *,
html body.scheme-blue .blog-post-card *,
html body.scheme-blue .privacy-content *,
html body.scheme-blue .privacy-widget *,
html body.scheme-blue .privacy-article *,
html body.scheme-blue .privacy-hero *,
html body.scheme-blue .features * {
  background: #9fd7ff !important;
  color: #133c58 !important;
  border-color: #133c58 !important;
}
html body.scheme-black .appointment-bg::after,
html body.scheme-yellow .appointment-bg::after,
html body.scheme-blue .appointment-bg::after {
  background: none !important;
  background-image: none !important;
  display: none !important;
  opacity: 0 !important;
  content: '' !important;
}
/* Убрать градиентные оверлеи для псевдоэлементов */
html body.scheme-black .service-card::after,
html body.scheme-yellow .service-card::after,
html body.scheme-blue .service-card::after {
  background: none !important;
  display: none !important;
}
html body.scheme-black .service-card::before {
  background: #ffffff !important;
  border-color: #000000 !important;
}

html body.scheme-yellow .service-card::before {
  background: #000000 !important;
  border-color: #ffff00 !important;
}

html body.scheme-blue .service-card::before {
  background: #9fd7ff !important;
  border-color: #133c58 !important;
}

/* Если у .service-card::before есть текст */
html body.scheme-black .service-card::before {
  color: #000000 !important;
}

html body.scheme-yellow .service-card::before {
  color: #ffff00 !important;
}

html body.scheme-blue .service-card::before {
  color: #133c58 !important;
}
@media (max-width: 1024px) {
  .accessibility-panel .control-label {
    display: none !important;
  }
  .panel-controls {
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  .control-buttons {
    justify-content: center !important;
  }
  .control-group {
    min-width: 45% !important;
  }
}
@media (max-width: 768px) {
  .panel-controls {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .accessibility-panel {
    padding: 4px 0 !important;
    font-size: 11px !important;
  }
  .accessibility-toggle {
    top: 8px !important;
    right: 8px !important;
    width: 30px !important;
    height: 30px !important;
    z-index: 1000000 !important;
  }
  .accessibility-toggle svg {
    width: 20px !important;
    height: 17px !important;
  }
  .control-group {
    min-width: 100% !important;
  }
  .control-group.management-group .control-buttons {
    justify-content: center !important;
  }
  .speech-group .control-btn.management-btn,
  .management-group .control-btn.management-btn {
    min-width: 100px !important;
    height: 28px !important;
    font-size: 10px !important;
  }
  .control-btn {
    width: 46px !important;
    height: 34px !important;
  }
  .control-btn#increaseFont,
  .control-btn#decreaseFont {
    width: 46px !important;
    height: 34px !important;
  }
  .control-btn#increaseFont svg,
  .control-btn#decreaseFont svg {
    width: 22px !important;
    height: 22px !important;
  }
  .control-btn[data-scheme] svg {
    width: 10px !important;
    height: 16px !important;
  }
  .control-btn[data-images] svg {
    width: 20px !important;
    height: 14px !important;
  }
  .control-btn.management-btn svg {
    width: 18px !important;
    height: 18px !important;
  }
}
@media (max-width: 480px) {
  .panel-controls {
    gap: 6px !important;
  }
  .control-buttons {
    justify-content: space-between !important;
  }
  .control-btn {
    width: 44px !important;
    height: 32px !important;
  }
  .control-btn#increaseFont,
  .control-btn#decreaseFont {
    width: 44px !important;
    height: 32px !important;
  }
  .control-btn#increaseFont svg,
  .control-btn#decreaseFont svg {
    width: 20px !important;
    height: 20px !important;
  }
  .speech-group .control-btn.management-btn,
  .management-group .control-btn.management-btn {
    min-width: 90px !important;
    height: 26px !important;
    font-size: 9px !important;
  }
  .accessibility-toggle svg {
    width: 20px !important;
    height: 17px !important;
  }
}
@media print {
  .accessibility-panel,
  .accessibility-toggle {
    display: none !important;
  }
}
.speech-group .control-buttons {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
}
.speech-group .control-btn.management-btn {
    min-width: 80px !important;
    width: 80px !important;
    height: 32px !important;
    padding: 5px !important;
    gap: 5px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.speech-group .control-btn.management-btn svg {
    width: 20px !important;
    height: 20px !important;
}
@media (max-width: 768px) {
    .speech-group .control-btn.management-btn {
        min-width: 50px !important;
        width: 50px !important;
        height: 28px !important;
        padding: 4px !important;
    }
    .speech-group .control-btn.management-btn svg {
        width: 18px !important;
        height: 18px !important;
    }
}
@media (max-width: 480px) {
    .speech-group .control-btn.management-btn {
        min-width: 45px !important;
        width: 45px !important;
        height: 26px !important;
        padding: 3px !important;
    }
    .speech-group .control-btn.management-btn svg {
        width: 16px !important;
        height: 16px !important;
    }
}
body.accessibility-mode .accessibility-panel,
body.accessibility-mode .accessibility-toggle,
.accessibility-panel *,
.accessibility-toggle * {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--panel-text) !important;
}
.panel-controls {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: nowrap !important;
    margin: 0 auto !important;
    width: 100% !important;
    padding: 5px 0 !important;
}
.control-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    min-width: 120px !important;
    max-width: 200px !important;
    gap: 5px !important;
}
.control-group.speech-group {
    flex: 1 !important;
    min-width: 160px !important;
    max-width: 200px !important;
}
.control-group.management-group {
    flex: 1 !important;
    min-width: 160px !important;
    max-width: 220px !important;
}
.control-label {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: 18px !important;
    gap: 6px !important;
}
.control-label svg {
    flex-shrink: 0 !important;
}
.control-buttons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    width: 100% !important;
}
.control-group.management-group .control-buttons {
    flex-direction: row !important;
    justify-content: center !important;
    gap: 4px !important;
}
.control-group.speech-group .control-buttons {
    flex-direction: row !important;
    justify-content: center !important;
    gap: 4px !important;
}
.control-group.speech-group .control-btn.management-btn {
    min-width: 90px !important;
    width: auto !important;
    padding: 5px 8px !important;
}
.control-group.management-group .control-btn.management-btn {
    min-width: 90px !important;
    width: auto !important;
    padding: 5px 10px !important;
}
@media (max-width: 1200px) {
    .panel-controls {
        gap: 15px !important;
    }
    .control-group {
        min-width: 110px !important;
        max-width: 180px !important;
    }
    .control-group.speech-group,
    .control-group.management-group {
        min-width: 140px !important;
        max-width: 180px !important;
    }
}
@media (max-width: 1024px) {
    .accessibility-panel .control-label {
        display: flex !important;
        font-size: 13px !important;
    }
    .panel-controls {
        gap: 12px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .control-group {
        flex: 0 0 auto !important;
        min-width: 48% !important;
        max-width: 48% !important;
        margin-bottom: 8px !important;
    }
    .control-group.speech-group,
    .control-group.management-group {
        min-width: 48% !important;
        max-width: 48% !important;
    }
}
@media (max-width: 768px) {
    .panel-controls {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: center !important;
    }
    .control-group {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        align-items: center !important;
    }
    .control-group.speech-group,
    .control-group.management-group {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }
    .control-label {
        justify-content: center !important;
        text-align: center !important;
        font-size: 15px !important;
        margin-bottom: 5px !important;
    }
    .control-buttons {
        justify-content: center !important;
    }
    .control-group.speech-group .control-btn.management-btn,
    .control-group.management-group .control-btn.management-btn {
        min-width: 120px !important;
        height: 36px !important;
        font-size: 13px !important;
    }
}
@media (max-width: 480px) {
    .panel-controls {
        gap: 8px !important;
    }
    .control-group {
        gap: 4px !important;
    }
    .control-label {
        font-size: 14px !important;
        gap: 5px !important;
    }
    .control-group.speech-group .control-btn.management-btn,
    .control-group.management-group .control-btn.management-btn {
        min-width: 100px !important;
        height: 32px !important;
        font-size: 12px !important;
        padding: 4px 6px !important;
    }
}
@media (min-width: 1025px) {
    .panel-controls {
        justify-content: space-around !important;
        gap: 25px !important;
    }
    .control-group {
        flex: 1 !important;
        min-width: 0 !important;
    }
}
.control-group:nth-child(2) .control-buttons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 200px !important;
  margin: 0 auto !important;
}
.control-group:nth-child(2) .control-btn[data-scheme] {
  width: 50px !important;
  flex-shrink: 0 !important;
}
@media (max-width: 768px) {
  .control-group:nth-child(2) .control-buttons {
    max-width: 220px !important;
  }
  .control-group:nth-child(2) .control-btn[data-scheme] {
    width: 48px !important;
  }
}
@media (max-width: 480px) {
  .control-group:nth-child(2) .control-buttons {
    max-width: 200px !important;
  }
  .control-group:nth-child(2) .control-btn[data-scheme] {
    width: 44px !important;
  }
}
/* ЖЁЛТАЯ КНОПКА В ПАНЕЛИ - всегда чёрный фон с жёлтой иконкой */
.control-btn[data-scheme="yellow"] {
  background: #ffffff !important;
}

.control-btn[data-scheme="yellow"] span {
  background: #ffffff !important;
}

.control-btn[data-scheme="yellow"] svg {
  background: transparent !important;
}

.control-btn[data-scheme="yellow"] svg path {
  fill: #ffc002 !important;
}

/* СИНЯЯ КНОПКА В ПАНЕЛИ - всегда белый фон с синей иконкой */
.control-btn[data-scheme="blue"] {
  background: #ffffff !important;
}

.control-btn[data-scheme="blue"] span {
  background: #ffffff !important;
}

.control-btn[data-scheme="blue"] svg {
  background: transparent !important;
}

.control-btn[data-scheme="blue"] svg path {
  fill: #176da7 !important;
}

/* ЧЁРНАЯ КНОПКА В ПАНЕЛИ - всегда белый фон с чёрной иконкой */
.control-btn[data-scheme="black"] {
  background: #ffffff !important;
}

.control-btn[data-scheme="black"] span {
  background: #ffffff !important;
}

.control-btn[data-scheme="black"] svg {
  background: transparent !important;
}

.control-btn[data-scheme="black"] svg path {
  fill: #000000 !important;
}

/* СТАНДАРТНАЯ КНОПКА В ПАНЕЛИ - всегда белый фон с чёрной иконкой */
.control-btn[data-scheme="default"] {
  background: #ffffff !important;
}

.control-btn[data-scheme="default"] span {
  background: #ffffff !important;
}

.control-btn[data-scheme="default"] svg {
  background: transparent !important;
}

.control-btn[data-scheme="default"] svg path {
  fill: #000000 !important;
}

/* АКТИВНОЕ СОСТОЯНИЕ КНОПОК */
.control-btn[data-scheme].active {
  border: 2px solid #3498db !important;
}

.control-btn[data-scheme="yellow"].active {
  background-color: #333333 !important;
}

.control-btn[data-scheme="yellow"].active span {
  background-color: #333333 !important;
}

.control-btn[data-scheme="blue"].active {
  background-color: #9fd7ff !important;
	
}

.control-btn[data-scheme="blue"].active span {
  background-color: #9fd7ff !important;
}

.control-btn[data-scheme="black"].active,
.control-btn[data-scheme="default"].active {
  background-color: #e1f0fa !important;
}

.control-btn[data-scheme="black"].active span,
.control-btn[data-scheme="default"].active span {
  background-color: #e1f0fa !important;
}