/**
* @license
* Copyright 2020 Sébastien CANET
* SPDX-License-Identifier: BSD-3-Clause
*/

/* CSS specific added for the theme */

body {
    background-color: var(--main-color);
}
#separator {
    background-color: var(--main-color);
}
#helpModal_header {
    background-color: var(--main-color);
}
#keyboard_nav_header {
    background-color: var(--main-color);
}
#buttonsMenuPopupInside,
#buttonsToolsPopupInside,
#buttonsIotPopupInside{
    background-color: var(--main-color);
    padding: 5px;
}
.config_content {
    background-color: var(--main-color);
}
.modal-header, .modal-footer {
    background-color: var(--main-color);
}
.accordion {
  background-color: var(--main-color);
}
.accordion:hover {
  color: var(--main-color);
}
.active {
    color: var(--main-color);
  background-color: var(--active-color);
}
.collapsibleButton {
    background-color: var(--main-color);
}
.active:after {
    color: var(--main-color);
}
#lateral-panel-setup-label {
    color: var(--main-color);
}
.closeModal:hover,
.closeModal:focus {
    color: var(--active-color);
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsibleButton:hover {
    background-color: var(--active-color);
}

/* enhance sliders behavior */
input:checked + .slider {
  background-color: var(--main-color);
}
input:focus + .slider {
  box-shadow: 0 0 1px var(--main-color);
}
input:checked + .slider:before {
  -webkit-transform: translateY(27px);
  -ms-transform: translateY(27px);
  transform: translateY(27px);
}

/**
 * @fileoverview Toolbox modification, override css style
 * @source https://blocklycodelabs.dev/codelabs/custom-toolbox
 */
/* Makes label white */
.blocklyTreeLabel {
  color: white;
  font-weight: bold;
  font-size: 20px;
  max-width: 290px;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word;
  display: inline-block;
  padding-left: 24px; /* Добавим пространство под иконку */
  text-indent: -4px;  /* Чуть подвинем первую строку, чтобы выровнять со второй */
}
/* Adds padding around the group of categories and separators */
.blocklyToolboxContents {
  padding: .2em;
  overflow-x: hidden;
}
/* Adds space between the categories, rounds the corners and adds space around the label */
.blocklyTreeRow {
  padding: 2px;
  border-radius: 4px;
  height: initial;
}
/* Changes color of the icon to white */
.customIcon {
  color: white;
  margin-left: 5px;
  vertical-align: middle;
  width: 25px;
}