/* --- Make highlight of the active element in structure more prominent --- */
#bricks-structure .element.active>.structure-item {
    background-color: var(--builder-color-accent) !important;
}

#bricks-structure .element.active>.structure-item input,
#bricks-structure .element.active>.structure-item>.title input,
#bricks-structure .element.active>.structure-item>.title i,
#bricks-structure .element.active .structure-item .more {
    color: #000 !important;
}

#bricks-structure .element.active>.structure-item input::-moz-selection { /* Code for Firefox */
  color: #fff !important;
  background: #1a99e0 !important;
}

#bricks-structure .element.active>.structure-item input::selection {
  color: #fff !important;
  background: #1a99e0 !important;
}

#bricks-structure .element.active > .structure-item:hover .actions .action .bricks-svg-wrapper path {
	fill: #111 !important;
}
#bricks-structure #bricks-panel-header {
  position: sticky !important;
  top: 0 !important;
  background-color: var(--builder-bg) !important;
}

#bricks-toolbar li.new-tab {
  display: flex !important;
}

/* --- Make + button more prominent */

#bricks-toolbar .logo {
  background-color: #818689 !important;
}
#bricks-toolbar .logo:hover {
  background-color: var(--builder-color-accent) !important;
}

#bricks-toolbar li.elements {
  background-color: var(--builder-color-accent) !important;
  opacity: 1 !important;
}
#bricks-toolbar li.elements:hover {
  background-color: #edca5b !important;
}

#bricks-toolbar li.elements .bricks-svg-wrapper .bricks-svg {
  color: var(--builder-border-color) !important;
}

/* --- Make active STYLE panel more prominent */

.bricks-panel-controls .control-group.open .control-group-title {
  background-color: var(--builder-color-accent) !important;
  color: #000 !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
}

.control-group.open {
  background-color: #161614 !important;
}
/* --- Make controls separators more prominent */

.bricks-panel-controls .control-groups .control-separator {
  background-color: var(--builder-bg-accent) !important;
  margin: 0 !important;
  padding: 10px 20px !important;
}

.bricks-panel-controls .control-separator label {
  letter-spacing: 2px !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  padding: 0 !important;
}

.bricks-panel-controls .control-separator .control-inner {
  gap: 0 !important;
}

.bricks-panel-controls .control {
  margin-bottom: 8px !important;
}

[data-control=separator]:before {
  display: none !important;
}

/* --- Make active class prominent */

#bricks-panel-element-classes .active-class.active input {
  background-color: var(--wp--preset--color--light-green-cyan) !important;
  color: #000 !important;
}
/* --- Move element actions under the element --- */

.brx-body.iframe .bricks-element-actions {
  top: 100% !important;
}
div[data-controlKey="_margin"] ul.dimensions,
div[data-controlKey="_padding"] ul.dimensions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
/* --- Prominent Has Setting Indicators --- */
.bricks-panel-controls .has-setting {
  left: -11px !important;
  width: 3px !important;
  background-color: var(--builder-color-accent) !important;
  transition: background-color 0.1s !important;
  transform: none !important;
}
.bricks-panel-controls .control-group-title .has-setting {
  left: 9px !important;
}
.bricks-panel-controls .has-setting:hover {
  background-color: transparent !important;
}
.bricks-panel-controls .has-setting .indicator {
  display: none !important;
}
/* --- Improve readability --- */
[data-builder-mode=custom] {
    --builder-placeholder-opacity: .75 !important;
    --builder-color-description: #ddd !important;
}
#bricks-panel-elements-categories .category-title {
    font-size: 16px !important;
    letter-spacing: 1px !important;
}
#bricks-panel-search {
    font-size: 16px !important;
}
/*.bricks-add-element .element-label,*/
.bricks-structure-list input[type="text"],
#panel-element-classes .bricks-control-popup ul li .name,
.bricks-panel,
.bricks-panel-controls .control-group-title,
.bricks-panel-controls .control .description {
    font-size: 15px !important;
}
#panel-element-classes .active-class input,
#panel-element-classes .active-class .symbol,
[data-balloon]:after {
    font-size: 14px !important;
}
[data-control=editor] .wp-editor-tools button {
    font-size: 13px !important;
}

/* custom elemnts order */
#bricks-panel-elements-categories .category.category-stories,
#bricks-panel-elements-categories .category.category-globalElements, 
#bricks-panel-elements-categories .category.category-interattive, 
#bricks-panel-elements-categories .category.category-custom{
  order: -1;
}