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

/* CSS specific added for the theme */

body {
    background-color: #efefef;
}
#separator {
    background-color: #efefef;
}
#helpModal_header {
    background-color: #efefef;
}
#keyboard_nav_header {
    background-color: #efefef;
}
#buttonsMenuPopupInside,
#buttonsToolsPopupInside,
#buttonsIotPopupInside{
    background-color: #006468;
    padding: 5px;
}
.config_content {
    background-color: #b4d647;
}
.modal-header, .modal-footer {
    background-color: #b4d647;
}
.accordion {
  background-color: #fff;
}
.accordion:hover {
  color: #006468;
}
#config_UI_title_span{
  color: black;
}
.active {
    color: black;
  background-color: #e2e2e1;
}
.collapsibleButton {
    background-color: #006468;
}
.active:after {
    color: #b4d647;
}
#lateral-panel-setup-label {
    color: black;
}
.closeModal:hover,
.closeModal:focus {
    color: #FFCC00;
}
/* 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: #e2e2e1;
}
#categories_title_span{
  color: black;
}
/* enhance sliders behavior */
input:checked + .slider {
  background-color: #b4d647;
}
input:focus + .slider {
  box-shadow: 0 0 1px #b4d647;
}
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: rgb(254, 254, 254);
  font-weight: bold;
  font-size: 14px;
  padding-left: 5px;
}
/* Adds padding around the group of categories and separators */
.blocklyToolboxContents {
  padding: .2em;
  /* padding: 20px; */
  /* margin-top: 1em;   */
  /* height: 40px;  */
}
/* Adds space between the categories, rounds the corners and adds space around the label */
.blocklyTreeRow {
  padding: 8px;
  border-radius: 10px;
  height: initial;
  margin-top: .5em;  
  text-align: start;
}
/* Changes color of the icon to white */
.customIcon {
  /* color: white; */
  margin-left: 7px;
  padding-left: 10px;
  vertical-align: middle;
  /* width: 25px; */
}