/** Root Variables **/
:root {
   --at-builder-custom-margin-padding-height: 30px;
   --at-builder-custom-margin-padding-inline-width: calc(50% - 2px);
   --at-builder-custom-margin-padding-offset: 5px;
   --at-builder-custom-margin-padding-top: calc(var(--at-builder-custom-margin-padding-height) + var(--at-builder-custom-margin-padding-offset));
   --at-builder-custom-at-variable-icon-width: 2.8rem;
   --at-builder-custom-border-width-top: 39px;
   --at-builder-custom-border-width-inline-width: 45%;
   --at-structure-elevation: 9999;
   --at-remote-template-margin: min(800px, 35vw);
   --at-topbar-height: 40px;
}

/* --- Show WP admin bar in Bricks editor */
body.admin-bar #bricks-toolbar {
   top: var(--wp-admin--admin-bar--height);
}

body #bricks-structure {
   top: var(--at-topbar-height);
}
body.admin-bar #bricks-structure {
   top: calc(40px + var(--wp-admin--admin-bar--height));
}

body #bricks-breakpoints {
   z-index: 1004;
}

body.admin-bar .bricks-panel,  body.admin-bar #bricks-preview,  body.admin-bar #bricks-structure {
   height: calc(100vh - 40px - var(--wp-admin--admin-bar--height));
}

#bricks-panel-element[data-filter="true"] .controls,
#bricks-panel-element[data-filter="true"] .control-groups,
#bricks-panel-element[data-filter="true"] .control-group{
   display: block !important;
   border: none !important;
}
#bricks-panel-element[data-filter="true"] #bricks-panel-tabs,
#bricks-panel-element[data-filter="true"] .control-group-title{
   display: none !important;
}
#bricks-panel-element[data-filter="true"] [data-controlkey],
#bricks-panel-element[data-filter="true"] [data-control] div.control{
   display: none;
}
#bricks-panel-element[data-filter="true"] .brxc-filter-active-elements{
   display: block !important;
}

#bricks-message {
   z-index: 99999;
}
 /*--------------------------------------
 General
 --------------------------------------*/

.flex {
    display: flex;
 }
 
 .space-between {
    justify-content: space-between;
 }
 
 .align-center {
    align-items: center;
 }
 .m-top-auto {
   margin-top: auto;
 }
 .m-top-16 {
    margin-top: 16px;
 }
 .m-top-24{
   margin-top: 24px;
 }
 .m-bottom-10 {
    margin-bottom: 10px;
 }
 .m-bottom-24 {
    margin-bottom: 24px;
 }
 .m-right-16{
    margin-right: 16px;
 }
 .p-top-0 {
    padding-top: 0px !important;
 }
 
 span.brxc__light {
    color: var(--builder-gray-6);
 }
 
 /*--------------------------------------
 Panel Structure
 --------------------------------------*/
 /* Tag Buttons*/
 #bricks-structure .structure-item .title>.icon {
   min-width: 32px;
}
#bricks-structure .structure-item {
   isolation: isolate;
   z-index: inherit;
}
 .brxc-tag-btn-wrapper ul.dropdown {
   position: absolute;
   top: 100%;
   width: 100%;
   left: 0;
   max-height: calc(var(--builder-input-height)*10);
   overflow: hidden;
   overflow-y: auto;
   background-color: var(--builder-bg-2);
   border-bottom-left-radius: var(--builder-border-radius);
   border-bottom-right-radius: var(--builder-border-radius);
   box-shadow: 0 6px 12px rgba(0,0,0,.25);
   z-index: 2;
}
#bricks-structure .element.tag-dropdown-active{
   z-index: 2;
}

#bricks-structure .element.tag-dropdown-active .structure-item .brxc-tag-btn-wrapper ul.dropdown input[type="text"]{
   background-color: var(--builder-bg) !important;
   padding: 8px;
   border-radius: var(--builder-border-radius);
}
#bricks-structure .element.tag-dropdown-active .structure-item .brxc-tag-btn-wrapper ul.dropdown input[type="text"]:hover{
   cursor: auto;
}
#bricks-structure .element.tag-dropdown-active .structure-item .brxc-tag-btn-wrapper ul.dropdown input[type="text"]::placeholder{
   opacity: .5;
}
.brxc-tag-btn-wrapper ul.dropdown li {
   box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
   cursor: pointer;
   display: block;
   line-height: 20px;
   overflow: hidden;
   padding: 6px 10px;
   position: relative;
   text-overflow: ellipsis;
   white-space: normal;
   color: var(--builder-color);
}
.brxc-tag-btn-wrapper ul.dropdown li:first-child {
   position: sticky;
   top: 0;
   z-index: 1;
   background-color: var(--builder-bg-2);
}
.brxc-tag-btn-wrapper ul.dropdown li:not(.no-hover):hover{
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
   cursor: pointer;
}
.brxc-tag-btn-wrapper button.brxc-tag-btn {
   font-size: 10px;
   font-weight: 700;
   padding: 0px 8px !important;
   width: fit-content;
   margin: 0;
   margin-right: 10px;
   line-height: 200%;
   background-color: var(--builder-gray-4);
   color: var(--builder-gray-f);
   pointer-events: none;
   user-select: none;
}
body.at-tag-btn-color .brxc-tag-btn-wrapper button.brxc-tag-btn {
   pointer-events: unset;
}
.element.active > .structure-item > .title .brxc-tag-btn-wrapper button.brxc-tag-btn {
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
}
.structure-item:hover > .title .brxc-tag-btn-wrapper button.brxc-tag-btn {
   background-color: var(--builder-gray-5);
}
button.brxc-tag-btn.red,
button.brxc-tag-btn.orange {
   color: var(--builder-gray-8);
}
body.at-tag-btn-color #bricks-structure .brxc-tag-btn-wrapper button.brxc-tag-btn {
   background-color: #11b76b20;
   color: var(--bricks-text-success);
}
body.at-tag-btn-color #bricks-structure .element.active > .structure-item .brxc-tag-btn-wrapper button.brxc-tag-btn {
   background-color: var(--builder-color-accent);
   color: var(--builder-color-accent-inverse);
}
body.at-tag-btn-color #bricks-structure .brxc-tag-btn-wrapper button.brxc-tag-btn.red {
  opacity: .5
}
body.at-tag-btn-color #bricks-structure .brxc-tag-btn-wrapper button.brxc-tag-btn.orange {
   background-color: #ffa10020;
   color: var(--bricks-text-warning);
 }
 #bricks-structure .element[data-nestable=true]:not(.active) > .structure-item .icon {
   opacity: 1;
 }
 #bricks-structure .element[data-nestable=true] > .structure-item i {
   color: var(--builder-color-highlight);
 }

 #bricks-builder-iframe-wrapper {
   user-select: none;
}
html.dragging-horiz{
   cursor: ew-resize;
}
html.dragging-vert{
   cursor: ns-resize;
}
 #brxcResizeBox {
   left: -12px;
   bottom: 0;
   height: calc(100% + 60px);
   min-height: calc(100vh - 60px);
   position: absolute;
   top: -60px;
   transition: all .1s;
   width: 10px;
   z-index: 1003;
}
#brxcResizeBoxBottom {
   left: -13px;
   top: calc(100% - 12px);
   height: 12px;
   min-height: 12px;
   position: sticky;
   transition: all .1s;
   width: 100%;
   z-index: 1004;
   grid-column: 1 / 3;
   display: none;
   margin-top: -12px;
}
body.filterable-structure #bricks-structure #bricks-panel-header{
   margin-bottom: 0;
}
#bricks-structure #bricks-panel-header .title, #bricks-panel-header .title input {
   user-select: none;
}
#bricks-structure #bricks-panel-header .title {
   pointer-events: auto;
}

#brxcResizeBox:hover,
#brxcResizeBoxBottom:hover,
#brxcResizeBox.dragging,
#brxcResizeBoxBottom.dragging {
   background-color: var(--builder-bg-3);
   opacity: .5;
   cursor: ew-resize;
}
#brxcResizeBoxBottom.dragging,
#brxcResizeBoxBottom:hover {
   cursor: ns-resize;
}

 .brxc-overlay__wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    isolation: isolate;
    opacity: 0 !important;
    pointer-events: none;
    display: grid;
    place-items: center;
    transition: 200ms transform ease-in-out;
    background: #121417f5;
 }
 .brxc-overlay__wrapper, .brxc-overlay__wrapper * {
   scrollbar-width: none !important;
 }
 .brxc-overlay__wrapper, .brxc-overlay__wrapper .CodeMirror,
 .brxc-overlay__wrapper, .brxc-overlay__wrapper .CodeMirror * {
   scrollbar-width: auto !important;
 }
 .brxc-overlay__wrapper::-webkit-scrollbar, .brxc-overlay__wrapper *::-webkit-scrollbar {
   width: 0 !important;
   height: 0 !important;
 }

 .brxc-overlay__wrapper[data-active="true"] {
    opacity: 1 !important;
    pointer-events: initial;
    cursor: pointer;
    z-index: 9999;
 }
 .brxc-overlay__wrapper[data-active="true"].at-selector-picker{
   pointer-events: none;
} 
 #brxcResourcesOverlay.brxc-overlay__wrapper[data-active="true"] {
   z-index: 10000;
 }

 /* Right side */
 .brxc-overlay__wrapper.sidebar{
   top: 40px;
   left: 0;
   background: unset;
 }
 body.admin-bar .brxc-overlay__wrapper.sidebar{
   top: calc(40px + 32px);
 }
 .brxc-overlay__wrapper.sidebar.right{
   place-items: end;
 }
 .brxc-overlay__wrapper.sidebar.left{
   place-items: start;
 }

 .brxc-overlay__wrapper.sidebar .brxc-overlay__inner{
   max-height: unset !important;
    height: calc(100vh - 40px);
    width: 300px;
    border-radius: 0;
    box-shadow: unset;
 }
 body.admin-bar .brxc-overlay__wrapper.sidebar .brxc-overlay__inner{
    height: calc(100vh - 72px);
 }
 .brxc-overlay__wrapper.sidebar.left .brxc-overlay__inner{
    width: 300px;
 }
 .brxc-overlay__wrapper.sidebar.left .brxc-overlay__close-btn{
   top: 6px;

 }
 .brxc-overlay__wrapper.sidebar.right .brxc-overlay__close-btn{
   top: 6px;
   right: 306px;
 }
 .brxc-overlay__wrapper.sidebar .brxc-overlay__header,
 .brxc-overlay__wrapper.sidebar .brxc-overlay__footer{
   border-radius: 0;
   padding: 10px 16px;
   font-size: 12px;
 }

 .brxc-overlay__wrapper.sidebar .brxc-overlay__pannel {
   padding: 16px 16px 10px 16px;
}
.brxc-overlay__wrapper .scrolling-cols{
   overflow: hidden;
}
.brxc-overlay__wrapper .scrolling-cols > *{
   overflow: auto;
}
.brxc-overlay__wrapper.sidebar .brxc-overlay__search-box {
   margin-bottom: 16px;
}
.brxc-overlay__wrapper.sidebar .brxc-overlay__search-box input[type="text"] {
    font-size: 12px;
}
.brxc-overlay__wrapper.sidebar .brxc-overlay__action-btn {
   padding: 4px 8px !important;
   font-size: 14px;
   flex: 1;
   text-align: center;
   justify-content: center;
   max-width: 100%;
   align-self: stretch;
}

.brxc-overlay__wrapper.sidebar .brxc-overlay__action-btn.icons-inside .first{
   margin-left: auto;
}
 
 .brxc-overlay__inner {
    position: relative;
    overflow: visible;
    cursor: initial;
    width: 90%;
    height: 90%;
    border-radius: 10px 10px 0 0;
    pointer-events: auto;
 }
 
 .brxc-overlay__resize-icons {
   color: var(--builder-gray-9);
   display: flex;
   align-items: center;
   gap: 8px;
   margin-left: auto;
}
.brxc-overlay__resize-icons i {
   display: flex;
   padding: 4px;
   border: 2px solid var(--builder-gray-5);
   border-radius: 3px;
   font-size: 12px;
   cursor: pointer;
}
.brxc-overlay__resize-icons i:hover {
   border-color: var(--builder-gray-9);
    color: var(--builder-gray-f);
}
.brxc-overlay__resize-icons i.active {
   background: var(--builder-color-accent);
    color: var(--builder-gray-1);
    border-color: var(--builder-color-accent);
}
.brxc-overlay__inner.brxc-small {
   max-width: 600px;
   max-height: 960px;
}
 .brxc-overlay__inner.brxc-medium {
    max-width: 980px;
    max-height: 690px;
 }
 
 .brxc-overlay__inner.brxc-large {
   max-width: 90vw !important;
   max-height: 90vh !important;
 }
 
 .brxc-overlay__close-btn {
    position: absolute;
    top: -16px;
    right: -16px;
    padding: 0.5rem;
    border-radius: 50%;
    aspect-ratio: 1;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    background: var(--builder-color-accent);
    fill: var(--builder-bg);
 }
 
 .brxc-overlay__close-btn i {
    font-weight: 900;
    pointer-events: none;
 }
 
 .brxc-overlay__inner-wrapper {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
 }
 
 .brxc-overlay__header,
 .brxc-overlay__footer {
    padding: 20px 32px;
    border-radius: 10px 10px 0 0;
    display: flex;
    gap: 8px;
    background: var(--builder-bg-2);
 }
 
 
 .brxc-overlay__header-title {
    font-size: 1.2em;
    color: var(--builder-gray-e);
 }
 
 .brxc-overlay__header-link {
    display: flex;
 }
 
 .brxc-overlay__header-link i {
    font-size: 14px;
    color: var(--builder-color-accent);
 }
 .brxc-overlay__footer {
   border-radius: 0 0 10px 10px;
 }

 .brxc-overlay__footer-wrapper{
   display: flex;
   gap: 8px;
   flex-grow: 1;
   flex-wrap: wrap;
    max-width: 100%;
 }
 .brxc-overlay__footer-input-wrapper {
   flex: 1;
   position: relative;
   padding-left: 22px;
   background-color: var(--builder-bg);
   border: 2px solid var(--builder-bg);
   border-radius: 0.5rem;
}
 input.brxc-overlay__footer-input{
   flex-grow: 1;
   background-color: unset;
   border: unset;
   border-radius: unset;
   color: var(--builder-gray-f);
 }
 input.brxc-overlay__footer-input::placeholder{
   opacity: var(--builder-placeholder-opacity);
   color: var(--builder-color);
 }
 
 .brxc-overlay__error-message-wrapper .error-message {
    padding: 12px 32px;
    border-radius: 2px;
    font-size: 14px;
    background: red;
    color: #fff;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 2rem;
    justify-content: space-between;
    word-break: break-word;
 }

 .brxc-overlay__error-message-wrapper .error-message i{
    cursor: pointer;
 }
 
 .brxc-overlay__container {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: scroll;
    padding: 0;
    border-radius: 0 0 10px 10px;
    overflow-x: hidden;
    background-color: var(--builder-bg);
 }
 .brxc-overlay__container.no-radius {
   border-radius: 0;
}
 
 .brxc-overlay__panel-switcher-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 32px 32px 0px 32px;
    overflow: scroll;
 }
 
 .brxc-overlay__pannels-wrapper {
    display: flex;
    flex-grow: 1;
    flex-wrap: nowrap;
    gap: 80px;
    transition: 300ms transform ease;
    height: calc(100% - 96px);
 }
 .brxc-overlay__panel-switcher-wrapper + .brxc-overlay__pannels-wrapper .brxc-overlay__pannel {
   padding: 0px 32px 20px 32px;
}
.sidebar .brxc-overlay__panel-switcher-wrapper + .brxc-overlay__pannels-wrapper .brxc-overlay__pannel {
   padding: 0px 16px 20px 16px;
}
 .brxc-overlay__pannel {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 100%;
    height: 100%;
    overflow: scroll;
    padding: 32px 32px 20px 32px;
 }
 
 
 .brxc-overlay__pannel-top--sticky {
    position: sticky;
    top: 0;
    background-color: var(--builder-bg);
    padding: 24px 0 16px;
 }

 #brxcResourcesOverlay .brxc-overlay__pannel.brxc-overlay__pannel-2 .brxc-overlay__img{
    padding: 1px;
 }
 #brxcResourcesOverlay .brxc-overlay__pannel.brxc-overlay__pannel-2 .brxc-overlay__img img{
   transform-origin: top;
}
 
 /* Buttons / Labels*/
 
 .brxc-overlay__action-btn-wrapper {
    display: flex;
    gap: 6px;
 }
 .sidebar .brxc-overlay__action-btn-wrapper {
   flex-wrap: wrap;
}
 
 .brxc-overlay__panel-inline-btns-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 8px;
 }
 .brxc-overlay__panel-inline-btns-wrapper.last-line-wrap::after {
   content: '';
   flex-grow: 999;
}
 
 .brxc-overlay__panel-inline-btns {
    flex-grow: 1;
    text-align: center;
    margin-bottom: 0 !important;
    justify-content: center;
 }
 
 .brxc-overlay__action-btn-wrapper.right {
    justify-content: flex-end;
 }
 
 .brxc-overlay__panel-switcher-wrapper label,
 .brxc-overlay__panel-inline-btns-wrapper label,
 .brxc-overlay__action-btn {
   display: flex;
   gap:8px;
   padding: 0.75rem 1.5rem;
   border-radius: 0.5rem;
   cursor: pointer;
   width: fit-content;
   align-self: flex-end;
   border: 2px solid var(--builder-bg-3);
   color: var(--builder-gray-8);
   white-space: nowrap;
   z-index: 2;
 }
 .brxc-overlay__action-btn.danger{
   border-color: var(--bricks-text-danger);
   color: var(--bricks-text-danger);
}
 .brxc-overlay__panel-inline-btns-wrapper.light label {
    background-color: var(--builder-bg-3);
 }

 .brxc-overlay__action-btn span{
   pointer-events: none;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   margin: auto 0;
 }
 
 .brxc-overlay__panel-switcher-wrapper label:hover,
 .brxc-overlay__panel-inline-btns-wrapper label:hover,
 .brxc-overlay__action-btn:hover {
    border: 2px solid var(--builder-gray-6);
 }

 .brxc-overlay__action-btn .buttons {
   cursor: pointer;
   display: flex;
   font-size: 14px;
   gap: 8px;
}
.brxc-overlay__action-btn .buttons .action {
   background-color: var(--builder-bg-2);
   border-radius: var(--builder-border-radius);
   text-align: center;
   width: 25px;
}
.brxc-overlay__action-btn .buttons:hover .action {
   background-color: var(--builder-color-accent);
   color: var(--bricks-text-dark);
}
.brxc-overlay__panel-switcher-wrapper input:disabled:not(:checked) + label,
 .brxc-overlay__panel-switcher-wrapper input:disabled:not(:checked) + label:hover,
 .brxc-overlay__panel-inline-btns-wrapper input:disabled:not(:checked) + label,
 .brxc-overlay__panel-inline-btns-wrapper input:disabled:not(:checked) + label:hover{
    border: 2px solid var(--builder-gray-3);
    color: var(--builder-gray-8);
    cursor: default;
 }
 
 .brxc-overlay__action-btn.primary {
    background: var(--builder-color-accent);
    color: var(--builder-gray-1);
    border-color: var(--builder-color-accent);
 }
 .brxc-overlay__action-btn.primary.toggle{
   background: var(--builder-bg-accent);
   color: var(--builder-color-accent);
   border-color: var(--builder-bg-accent);
 }
 .brxc-overlay__wrapper.sidebar .brxc-overlay__action-btn.primary,
 .brxc-overlay__wrapper.sidebar .brxc-overlay__action-btn.active {
   flex: 1;
   text-align: center;
   justify-content: center;
 }
 
 .brxc-overlay__panel-inline-btns-wrapper input:checked+label,
 .brxc-overlay__panel-switcher-wrapper input:checked+label,
 .brxc-overlay__action-btn.outline.primary,
 .brxc-overlay__action-btn.outline.active {
    border: 2px solid var(--builder-color-accent);
    color: var(--builder-gray-f);
 }
 
 /* Disable Button */
 
 .brxc-overlay__action-btn.disable {
    background-color: var(--builder-gray-3) !important;
    border-color: var(--builder-gray-3) !important;
    pointer-events: none;
    position: relative;
 }
 
 .brxc-overlay__action-btn.disable span {
    visibility: hidden;
    opacity: 0;
 }
 
 .brxc-overlay__action-btn.disable::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 4px solid transparent;
    border-top-color: var(--builder-color-accent);
    border-radius: 50%;
    animation: button-loading-spinner 1s ease infinite;
 }
 
 @keyframes button-loading-spinner {
    from {
       transform: rotate(0turn);
    }
 
    to {
       transform: rotate(1turn);
    }
 }

 .brxc-overlay__wrapper p.alert {
    display: none;
 }

 .brxc-overlay__wrapper p.alert.active {
    display: block;
    margin: -10px 0 20px;
    color: var(--builder-color-accent);
 }

 /*--------------------------------------
Contextual menu
--------------------------------------*/

#bricks-builder-context-menu span.action.disable{
   opacity: .3;
   pointer-events: none;
}
.brxc-context-menu ul li .action.builder.active,
#bricks-builder-context-menu ul li .action.builder.active {
   background-color: var(--builder-color-accent);
   color: var(--builder-color-accent-inverse);
}
.brxc-context-menu ul li:hover .action.frontend:hover,
.brxc-context-menu ul li .action.frontend.active,
#bricks-builder-context-menu ul li:hover .action.frontend:hover,
#bricks-builder-context-menu ul li .action.frontend.active {
   background-color: var(--bricks-text-danger);
   color: var(--builder-color-accent-inverse);
}

.brxc-context-menu ul li:hover .action.settings:hover,
.brxc-context-menu ul li .action.settings.active,
#bricks-builder-context-menu ul li:hover .action.settings:hover,
#bricks-builder-context-menu ul li .action.settings.active {
   background-color: var(--bricks-text-success);
   color: var(--builder-color-accent-inverse);
}
/*--------------------------------------
BricksLabs Panel
--------------------------------------*/

#brxcBricksLabsOverlay .brxc-overlay__container{
   border-radius: 0;
}
#brxcBricksLabsOverlay .brxc-article__container{
   display:flex;
   flex-direction: column;
   gap: 48px;
}
#brxcBricksLabsOverlay .brxc-article__wrapper {
   display: flex;
   gap: 32px;
}
#brxcBricksLabsOverlay.sidebar .brxc-article__wrapper {
   flex-direction: column;
}
#brxcBricksLabsOverlay .brxc-article__wrapper .brxc-article__col-left{
   flex-basis: 250px;
}
#brxcBricksLabsOverlay .brxc-article__wrapper img {
   aspect-ratio: 1;
    min-width: 250px;
    max-width: 250px;
    object-fit: cover;
}
#brxcBricksLabsOverlay.sidebar .brxc-article__wrapper img {
   min-width: 100%;
}
#brxcBricksLabsOverlay .brxc-article__wrapper .brxc-article__col-right{
   display: flex;
   flex-direction: column;
}
#brxcBricksLabsOverlay .brxc-article__wrapper h3{
   color: var(--builder-color-accent);
   font-size: 18px;
   font-weight: 500;
}
#brxcBricksLabsOverlay .brxc-article__wrapper .brxc-article__author-wrapper{
   color: var(--builder-gray-7);
   margin-bottom: 12px;
}
#brxcBricksLabsOverlay .brxc-article__wrapper .brxc-article__author-icon{
   margin-right: 8px;
}
#brxcBricksLabsOverlay .brxc-article__wrapper .brxc-article__author{
   margin: 0 0 0 4px;
}
#brxcBricksLabsOverlay .brxc-article__wrapper .brxc-article__excerpt {
   color: var(--builder-gray-d);
   margin-bottom: 24px;
}
#brxcBricksLabsOverlay .brxc-article__wrapper .brxc-article__readmore{
   align-self: flex-start;
}
 /*--------------------------------------
 Indicators
 --------------------------------------*/

li.breakpoint[data-styles="true"] {
   box-shadow: inset 0 -3px 0px 0px var(--builder-color-accent);
}
#bricks-panel-element [data-controlkey][data-has-class-style="true"],
#bricks-panel-element [data-controlkey][data-has-id-style="true"]{
   position: relative;
}
.bricks-panel-controls .has-setting{
   z-index: 1;
}
#bricks-panel-element [data-controlkey][data-has-class-style="true"] label span:before,
#bricks-panel-element [data-controlkey][data-has-id-style="true"] label span:before{
   content: '';
   background-color: var(--builder-color-highlight);
   border-radius: 50%;
   height: 4px;
   width: 4px;
   position: absolute;
   left: -12px;
   top: 8px;
}
#bricks-panel-element [data-controlkey][data-has-id-style="true"] label span:before{
   background-color: var(--bricks-color-secondary);
}

.bricks-panel-controls .control-group-title.has-class-styles::before,.bricks-panel-controls .control-group-title.has-id-styles::before {
   content: '';
   position: absolute;
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background-color: var(--builder-color-highlight);
   z-index: 1;
   left: 8px;
}
.bricks-panel-controls .control-group-title.has-id-styles::before{
   background-color: var(--bricks-color-secondary);
}

#bricks-panel-element [data-controlkey="_margin"][data-has-class-style="true"]:before,
#bricks-panel-element [data-controlkey="_padding"][data-has-class-style="true"]:before,
#bricks-panel-element [data-controlkey="_innerContainerMargin"][data-has-class-style="true"]:before,
#bricks-panel-element [data-controlkey="_innerContainerPadding"][data-has-class-style="true"]:before,
#bricks-panel-element [data-controlkey="_cssTransition"][data-has-class-style="true"]:before,
#bricks-panel-element [data-controlkey="_cssCustom"][data-has-class-style="true"]:before,
#bricks-panel-element [data-controlkey="_margin"][data-has-id-style="true"]:before,
#bricks-panel-element [data-controlkey="_padding"][data-has-id-style="true"]:before,
#bricks-panel-element [data-controlkey="_innerContainerMargin"][data-has-id-style="true"]:before,
#bricks-panel-element [data-controlkey="_innerContainerPadding"][data-has-id-style="true"]:before,
#bricks-panel-element [data-controlkey="_cssTransition"][data-has-id-style="true"]:before,
#bricks-panel-element [data-controlkey="_cssCustom"][data-has-id-style="true"]:before
{
   top: 8px;
}
#bricks-panel-element [data-controlkey="_cssFilters"][data-has-class-style="true"]:before{
   top: 11px;
}
.bricks-panel-controls .control-group-title {
   justify-content: flex-start;
}
.bricks-panel-controls .control-group-title > span:not(.has-setting, .arrow) {
   margin-right: 6px;
}
.bricks-panel-controls .control-group-title .brxc-group-icon,
#brxcClassManagerOverlay .brxc-group-icon,
#brxcGridUIOverlay .brxc-group-icon
{
   padding: 10px;
   background-color: #424d57;
   border-radius: 50%;
   font-size: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 15px;
   height: 15px;
   margin-left: 4px;
   cursor: pointer;
}
#brxcGridUIOverlay .brxc-group-icon
{
   padding: 12px;
   font-size: 12px;
}
#brxcClassManagerOverlay .brxc-group-icon,
#brxcGridUIOverlay .brxc-group-icon
{
   color: var(--builder-color);
   fill: var(--builder-color);
   background-color: var(--builder-bg-2);
}
#brxcClassManagerOverlay .breakpoint-wrapper .brxc-group-icon,
#brxcGridUIOverlay .brxc-group-icon{
   opacity: .5;
}

#brxcClassManagerOverlay .breakpoint-wrapper .brxc-group-icon.has-styles,
#brxcClassManagerOverlay .breakpoint-wrapper .brxc-group-icon:hover,
#brxcGridUIOverlay .brxc-group-icon.has-styles,
#brxcGridUIOverlay .brxc-group-icon:hover{
   opacity: 1;
}
.bricks-panel-controls .control-group-title .brxc-group-icon:hover,
.bricks-panel-controls .control-group-title .brxc-group-icon.active,
#brxcClassManagerOverlay .brxc-group-icon.active,
#brxcGridUIOverlay .brxc-group-icon.active {
    color: var(--builder-color-accent);
}
.bricks-panel-controls .control-group-title .brxc-group-icon.active,
#brxcClassManagerOverlay .brxc-group-icon.active,
#brxcGridUIOverlay .brxc-group-icon.active {
   background-color: var(--builder-bg-accent);
}
.bricks-panel-controls .control-group-title .brxc-group-icon .bricks-svg-wrapper,
#brxcClassManagerOverlay .brxc-group-icon .bricks-svg-wrapper,
#brxcGridUIOverlay .brxc-group-icon .bricks-svg-wrapper{
   pointer-events: none;
}
span.bricks-svg-wrapper.arrow {
   margin-left: auto;
   order: 1;
}

#bricks-structure .bricks-structure-list .element[data-active-class="true"] > .structure-item{
   box-shadow: 0px 0px 0px 1px var(--builder-color-highlight);
}
#bricks-structure .bricks-structure-list .element[data-active-class="true"] > .structure-item .toggle{
   left: -21px;
}

body.at-locked-classes #bricks-panel-element #bricks-panel-element-classes .element-classes li{
   background-color: #11b76b4d;
}
body.at-locked-classes #bricks-panel-element #bricks-panel-element-classes .element-classes li[data-locked="true"]{
   background-color: #fa43625c;
}
body.at-locked-classes #bricks-panel-element #bricks-panel-element-classes .element-classes li .name{
   color: var(--builder-color);
}
 /*--------------------------------------
 Resources Panel
 --------------------------------------*/

 .brxc-gallery__container {
    height: 100%;
 }
 
 .brxc-gallery__container>div {
    cursor: pointer;
 }
 
 .brxc-gallery__container a img {
    width: 100%;
    height: 100%;
 }
 
 .brxc-gallery__title {
    padding: 10px 20px;
    background: var(--builder-gray-3);
    color: var(--builder-gray-c);
 }
 
 .brxc-overlay__inner .brxc-overlay__header-title,
 .brxc-overlay__inner2 .brxc-overlay__header-title {
    color: var(--builder-gray-e);
    font-size: 1.2em;
 }
 
 .brxc-overlay__img img {
    width: 100%;
 }
 #brxcResourcesOverlay .brxc-overlay__pannel-2{
   padding: 0px;
 }
 #brxcResourcesOverlay .brxc-overlay__pannel-2 .brxc-overlay__pannel-top--sticky{
   z-index: 1;
   padding: 16px 32px 16px;
   margin: 0;
 }
 /*--------------------------------------
 CSS Variables
 --------------------------------------*/
 #brxcVariableOverlay .brxc-overlay__pannel{
   padding: 0px 0px 20px 0px;
 }
 #brxcVariableOverlay #brxcVariablePickrAT,
 #brxcVariableOverlay .brxc-overlay__pannel--content{
   padding: 0px 16px 20px 16px;
 }
 #brxcVariableOverlay .brxc-overlay__search-box {
   margin-bottom: 16px;
}
 #brxcVariableOverlay #brxcVariablePickrAT{
   display: flex;
   flex-direction: column;
   gap: 8px;
 }

 #brxcVariablePickrAT #sortableWrapper,
 #plainClassesSearchResultsCanvas #sortableWrapper,
 #brxcVariableOverlay .brxc-overlay__pannel--content {
   display: flex;
   flex-direction: column;
   gap: 8px;
}
#plainClassesSearchResultsCanvas #sortableWrapper {
   gap: 8px;
}
.brxc-variable-picker__category-empty,
.brxc-variable__category-empty{
   margin: 0;
   display: flex;
   font-size: 12px;
   font-family: 'Inter';
}
.brxc-variable__category-empty{
   margin: 0 16px;
}
.brxc-variable-picker__category {
   background-color: var(--builder-bg-2);
   padding: 10px;
   border-radius: var(--builder-border-radius);
   cursor: pointer;
}
.brxc-variable-picker__category.contextual {
   background-color: var(--builder-bg-3);
}
.brxc-variable-picker__category.contextual label.brxc-input__label {
   --builder-bg-3: var(--builder-bg-2);
}
.brxc-variable-picker__category.contextual label.brxc-input__label .title{
   color: var(--builder-color-accent);
}
.brxc-variable-picker__category.color {
   padding: 10px 0;
}
.brxc-variable-picker__category *{
   cursor: pointer;
}
.brxc-variable-picker__category span.color-variable-preview {
   --size: 22px;
   width: var(--size);
   height: var(--size);
   border-radius: 99vw;
   border: 1px solid var(--builder-bg-3);
}
.brxc-variable-picker__category .title {
   margin: 0 4px;
   text-overflow: ellipsis;
   overflow: hidden;
}
.brxc-variable-picker__category .brxc-variable-count {
   opacity: .5;
}
.brxc-variable-picker__category .brxc-input__label{
   margin-bottom: 0px;
}
.brxc-variable-picker__category.color .brxc-input__label {
   padding: 0 10px;
}
#brxcVariableOverlay .brxc-overlay__pannel:not(.brxc-overlay__pannel-1) .brxc-input__label,
.brxc-variable-picker__category .brxc-input__label.expanded{
   margin-bottom: 22px;
    position: relative;
}
#brxcVariableOverlay .brxc-overlay__pannel:not(.brxc-overlay__pannel-1) .brxc-input__label:before,
.brxc-variable-picker__category .brxc-input__label.expanded:before {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   height: 1px;
   background-color: var(--builder-bg-3);
   bottom: -12px;
   opacity: .5;
}
.brxc-variable-picker__category:not(.no-handle) .handle{
   cursor: pointer;
}
#bricks-structure .structure-item .actions .action:not(.notes) {
   display: none;
}
#bricks-structure .structure-item:hover .actions .action {
   display: block;
}
#bricks-structure .actions .action.expand {order:-4;}
#bricks-structure .actions .action.collapse {order: -3;}
#bricks-structure .actions .action.link {order: -2;}
#bricks-structure .actions .action.notes {order: 999;}
.brxc-collapse-icon {
   background-color: var(--builder-bg-3);
   opacity: 1;
   color: var(--builder-color);
   width: 20px;
   aspect-ratio: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 10px;
   border-radius: 50%;
   margin-left: auto;
   cursor: pointer;
   pointer-events: none;
}
.brxc-collapse-icon * {
   pointer-events: none;
   color: var(--builder-color) !important;
}
.brxc-overlay__pannel label .brxc-collapse-icon[data-balloon]:after{
   padding: 4px;
   line-height: 1;
}
 #brxcVariableOverlay.sidebar .brxc-overlay__pannel--content{
   padding: 0px 16px 20px 16px;
 }
 #brxcVariableOverlay .brxc-overlay__panel-switcher-wrapper{
   padding: 16px 16px 4px 16px;
 }

 #brxcVariableOverlay .brxc-overlay__search-box input[type="text"] {
   border-radius: unset;
}

#brxcVariableOverlay #brxcVariablePickrAT .brxc-scale-label,
#brxcVariableOverlay #brxcVariablePickrAT .brxc-other-label{
   color: var(--builder-color);
   margin-bottom: 6px;
   font-size: 12px;
   text-transform: uppercase;
   font-weight: 800;
   opacity: .5;
   letter-spacing: .3px;
}
#brxcVariableOverlay .brxc-overlay__pannel.brxc-overlay__pannel p[data-control]{
   margin-bottom: 0;
}
 #brxcVariableOverlay .brxc-overlay__action-btn-wrapper,
 #brxcCSSOverlay .isotope-wrapper .brxc-overlay__action-btn-wrapper,
 #brxcPlainClassesOverlay .isotope-wrapper .brxc-overlay__action-btn-wrapper{
    flex-wrap: wrap;
    height: auto !important;
    gap: 6px;
 }
 #brxcVariableOverlay .brxc-overlay__action-btn-wrapper.scale{
   gap: 1px;
   margin-bottom: 16px;
   display: flex;
 }
 #brxcVariableOverlay .brxc-overlay__action-btn-wrapper.scale > .brxc-overlay__action-btn.isotope-selector{
   flex-grow: 1;
 }
 #brxcVariableOverlay .show-in-manager i,
 #brxcVariableOverlay .default-expand i, 
 #brxcPlainClassesOverlay .show-in-manager i,
 #brxcPlainClassesOverlay .default-expand i,
 #brxcVariableOverlay .view i{
   color: var(--builder-color);
   opacity: .5;
}
#brxcVariableOverlay .show-in-manager:hover i,
#brxcVariableOverlay .default-expand:hover i,
#brxcPlainClassesOverlay .show-in-manager:hover i,
#brxcPlainClassesOverlay .default-expand:hover i,
#brxcVariableOverlay .view:hover i{
   opacity: 1;
}
#brxcVariableOverlay .default-expand.expanded,
#brxcVariableOverlay .view.active,
#brxcPlainClassesOverlay .default-expand.expanded{
   background-color: var(--builder-bg-accent);
}
#brxcVariableOverlay .default-expand.expanded i,
#brxcVariableOverlay .view.active i,
#brxcPlainClassesOverlay .default-expand.expanded i{
   opacity: 1;
   color: var(--builder-color-accent);
}
#brxcVariableOverlay .show-in-manager,
#brxcVariableOverlay .default-expand,
#brxcVariableOverlay .view,
#brxcPlainClassesOverlay .show-in-manager,
#brxcPlainClassesOverlay .default-expand {
   display: flex;
   font-size: 9px;
   cursor: pointer;
   background: var(--builder-bg-3);
   color: var(--builder-color);
   width: 20px;
   align-items: center;
   justify-content: center;
   aspect-ratio: 1;
   border-radius: var(--builder-border-radius);
}
 #brxcVariableOverlay .show-in-manager::after,
 #brxcVariableOverlay .default-expand::after,
 #brxcVariableOverlay .view::after,
 #brxcPlainClassesOverlay .show-in-manager:after,
#brxcPlainClassesOverlay .default-expand:after{
   padding: 5px 7px;
   line-height: 1.2;
 }
 #brxcVariableOverlay .add-new-variable {
   display: flex;
   padding: 8px;
   border: unset;
   color: var(--builder-color);
   background-color: var(--builder-bg);
   border-radius: 3px;
   opacity: .15;
   flex: unset;
   align-self: auto;
   align-items: center;
   border-style: dashed;
   font-size: 10px;
   cursor: pointer;
   margin: 1px 0;
}
#brxcVariableOverlay .add-new-variable *{
   pointer-events: none;
}
#brxcVariableOverlay input.add-new-variable-input {
   background-color: var(--builder-bg);
   outline: none;
   border: none;
   border-radius: 3px;
   color: var(--builder-color);
   font-size: 14px;
   line-height: unset;
   padding: 4px 8px;
   max-width: 150px;
}
#brxcVariableOverlay .add-new-variable:hover {
   opacity: 1;
}

.isotope-wrapper .brxc-input__label{
   color: var(--builder-color);
   font-weight: 500;
   font-size: 14px;
 }
 
 #brxcVariableOverlay .brxc-overlay__action-btn,
 #brxcCSSOverlay .isotope-wrapper .brxc-overlay__action-btn,
 #brxcPlainClassesOverlay #plainClassesMostUsedCanvas .brxc-overlay__action-btn,
 #brxcPlainClassesOverlay #plainClassesSearchResultsCanvas .brxc-overlay__action-btn{
    position: relative !important;
    left: unset !important;
    top: unset !important;
    display: flex;
    align-items: center;
 }
 #brxcVariableOverlay .brxc-overlay__action-btn.isotope-selector,
 #brxcPlainClassesOverlay .brxc-overlay__pannel .brxc-overlay__action-btn,
 #brxcDynamicDataModalOverlay .brxc-overlay__action-btn,
 #brxcGenerateAIStructureOverlay #brxcAIGeneratedStructureCanvas .brxc-overlay__action-btn{
   border: unset;
   color: var(--builder-color);
   background-color: var(--builder-bg-2);
   border-radius: 3px;
   opacity: .7;
   flex: unset;
 }
 #brxcVariableOverlay .brxc-overlay__action-btn.isotope-selector,
 #brxcPlainClassesOverlay .brxc-overlay__pannel .brxc-overlay__action-btn{
   background-color: var(--builder-bg);
 }
 #brxcVariableOverlay .brxc-overlay__action-btn.isotope-selector.base {
   box-shadow: inset 0px 0px 0px 1px var(--builder-color-component);
}
#brxcVariableOverlay .brxc-overlay__action-btn.isotope-selector.theme{
   padding-right: 22px !important;
 }
 #brxcVariableOverlay.sidebar .brxc-overlay__action-btn.isotope-selector.theme{
   padding-right: 16px !important;
 }
.brxc-overlay__action-btn.isotope-selector .type-indicator {
   --size: 4px;
   width: var(--size);
   height: var(--size);
   background-color: var(--bricks-text-info);
   border-radius: 50%;
   position: absolute;
   right: 12px;
   pointer-events: none;
}
#brxcVariableOverlay.sidebar .brxc-overlay__action-btn.isotope-selector .type-indicator {
   right: 6px;
}
.brxc-overlay__action-btn.isotope-selector.theme .type-indicator {
   background-color: var(--bricks-text-success);
}
 #brxcVariableOverlay .brxc-overlay__action-btn.isotope-selector:hover,
 #brxcVariableOverlay .brxc-overlay__action-btn.isotope-selector:focus,
 #brxcVariableOverlay .brxc-overlay__action-btn.isotope-selector.active,
 #brxcPlainClassesOverlay #plainClassesMostUsedCanvas .brxc-overlay__action-btn:hover,
 #brxcPlainClassesOverlay #plainClassesSearchResultsCanvas .brxc-overlay__action-btn:hover,
 #brxcPlainClassesOverlay #plainClassesSearchResultsCanvas .brxc-overlay__action-btn:focus,
 #brxcDynamicDataModalOverlay .brxc-overlay__action-btn:hover,
 #brxcDynamicDataModalOverlay .brxc-overlay__action-btn.active, 
 #brxcGenerateAIStructureOverlay #brxcAIGeneratedStructureCanvas .brxc-overlay__action-btn:hover,
 #brxcGenerateAIStructureOverlay #brxcAIGeneratedStructureCanvas .brxc-overlay__action-btn.active{
   opacity: 1;
 }
 #brxcVariableOverlay .brxc-overlay__action-btn.isotope-selector.active,
 #brxcPlainClassesOverlay #plainClassesMostUsedCanvas .brxc-overlay__action-btn.active,
 #brxcPlainClassesOverlay #plainClassesSearchResultsCanvas .brxc-overlay__action-btn.active,
 #brxcDynamicDataModalOverlay .brxc-overlay__action-btn.active,
 #brxcGenerateAIStructureOverlay #brxcAIGeneratedStructureCanvas .brxc-overlay__action-btn.active{
   border: unset;
   color: var(--builder-color-accent);
   background-color: var(--builder-bg-accent);
 }
 #brxcVariableOverlay .isotope-wrapper .brxc-overlay__action-btn.active{
   flex: unset;
 }
 .brxc-color-preview {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   margin-right: 5px;
}

 
 #brxcVariableOverlay .brxc-overlay__action-btn.active,
 #brxcCSSOverlay .isotope-wrapper .brxc-overlay__action-btn:hover{
    background: unset;
    border: 2px solid var(--builder-color-accent);
    color: var(--builder-gray-f);
 }

 .brxc-overlay-css__wrapper{
    display: none;
    flex-direction: column;
    flex-grow: 1;
 }
 .brxc-overlay-css__wrapper.active,
 #brxcCSSOverlay .brxc-overlay__pannel > #brxcCSSColRight,
 #brxcCSSOverlay .brxc-overlay__pannel .CodeMirror{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
 }

 #brxcCSSOverlay .brxc-overlay__panel-switcher-wrapper {
    padding: 32px 32px 16px 32px;
}
#brxcCSSOverlay.sidebar .brxc-overlay__panel-switcher-wrapper {
   padding: 32px 16px 16px 16px;
}
#brxcCSSOverlay .brxc-overlay__action-btn-wrapper .brxc-overlay__action-btn[data-balloon]:after,
#brxcVariableOverlay .brxc-overlay__action-btn-wrapper .brxc-overlay__action-btn[data-balloon]:after {
   background-color: var(--builder-gray-1);
    color: var(--builder-gray-9);
    padding: 8px;
    top: -8px;
}
#brxcCSSOverlay .brxc-overlay__action-btn-wrapper .brxc-overlay__action-btn[data-balloon]:before,
#brxcVariableOverlay .brxc-overlay__action-btn-wrapper .brxc-overlay__action-btn[data-balloon]:before {
   border-top-color: var(--builder-gray-1);
   top: -8px;
}
#brxcVariableOverlay .brxc-color-views .view {
   border-radius: 0;
}
#brxcVariableOverlay .brxc-color-views .view:first-child{
   border-top-left-radius: var(--builder-border-radius);
   border-bottom-left-radius: var(--builder-border-radius);
}

#brxcVariableOverlay .brxc-color-views .view:last-child{
   border-top-right-radius: var(--builder-border-radius);
   border-bottom-right-radius: var(--builder-border-radius);
}

.brxc-color-views{
   display: flex;
   gap: 1px;
}
.brxc-color-container{
   display: flex;
   flex-direction: column;
}

.brxc-variable-picker__category.color.variable .isotope-container.brxc-color-container.list {
   gap: 0px;
}
.brxc-color-container > div{
   display: flex;
   flex-direction: column;
   gap: 12px;
}
.brxc-color-other.column,
.brxc-parent-color-container.column{
   display: grid;
   grid-template-columns: 40% repeat(var(--column-number), 1fr);
   gap: 5px;
   min-height: 180px;
   padding: 0 10px;
}

.brxc-color-container.grid .brxc-parent-color-container, 
.brxc-color-container.grid .brxc-nested-color-container {
   display: flex;
   flex-direction: column;
   gap: 12px;
}
.brxc-color-container.list .brxc-parent-color-container,
.brxc-color-container.list .brxc-nested-color-container,
.brxc-color-container.list > div {
   display: flex;
   flex-direction: column;
   gap: 16px;
}
.brxc-parent-color-container.column .brxc-color-wrapper:first-child{
   border-radius: var(--builder-border-radius) !important;
}
.brxc-parent-color-container.column .brxc-color-wrapper {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   border-radius: var(--builder-border-radius);
   background-size: auto 70%;
}
.brxc-parent-color-container .brxc-color-category-wrapper:hover,
.brxc-nested-color-container .brxc-color-category-wrapper:hover{
   z-index: 3;
}

.brxc-color-container.grid .brxc-color-others .brxc-color-wrapper,
.brxc-color-container.grid .brxc-parent-color-container .brxc-color-wrapper,
.brxc-color-container.grid .brxc-nested-color-container .brxc-color-wrapper {
   width: 100%;
   height: 100%;
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 5px;
   padding: 0 10px;
}

.brxc-color-others.grid .brxc-color-wrapper > .brxc-color-item,
.brxc-color-container.grid .brxc-parent-color-container .brxc-color-wrapper > .brxc-color-item,
.brxc-color-container.grid .brxc-nested-color-container .brxc-color-wrapper > .brxc-color-item{
   background-image: var(--bg);
   border-radius: 50%;
   background-size: 200%;
}

/* Nested Colors*/
#brxcVariableOverlay {
   & .brxc-nested-color-container:not(:has( > *)){
      display: none !important;
   }
   & .brxc-color-label{
      color: var(--builder-color);
      opacity: 0.5;
      font-weight: 800;
      text-transform: uppercase;
      font-size: 12px;
      display: block;
      margin-bottom: 8px;
      padding: 0 10px;
   }
   & .brxc-overlay__action-btn{
      opacity: 1 !important;
   }

   & .brxc-color-container.grid,
   & .brxc-color-container.list {
      > div > .brxc-color-label{
         display: none;
      }
   }
   /* Grid*/
   & .brxc-color-container.grid{
      gap: 12px;

      & .brxc-overlay__action-btn{
         height: 100%;
         width: 100%;
         aspect-ratio: 1;
         border-radius: 99vw;
         background-color: var(--color);
      }
   }

   /* List */ 
   & .brxc-variable-picker__category.color.variable .brxc-color-container.list {
      gap: 0px;
   }
   & .brxc-color-container.list {
      gap: 16px;
      & .brxc-color-wrapper  {
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
      }

      & .brxc-color-others {
         & .brxc-color-list-label{
            color: var(--builder-color);
            font: 12px Inter, sans-serif;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
         }
         & .brxc-color-item{
            display: flex;
            align-items: center;
            gap: 8px;
            height: 32px;
            padding: 0 10px;
            &:hover {
               background-color: var(--builder-bg-3);
            }
         }
         
         & .brxc-overlay__action-btn{
               width: 25px;
               height: 25px;
               border-radius: 50%;
               aspect-ratio: 1;
               align-self: center;
               background-image: var(--bg);
               position: relative;
         }
         & .brxc-overlay__action-btn::before{
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            z-index: 1;
            border-radius: 50%;
            background-color: var(--color);
         }
      }
      & .brxc-color-list-label{
         color: var(--builder-color);
         font: 12px Inter, sans-serif;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
      }
      & .brxc-color-item {
         display: flex;
         align-items: center;
         gap: 8px;
         height: 32px;
         padding: 0 10px;
         
         &:hover {
            background-color: var(--builder-bg-3);
         }

         & *{
            pointer-events: none;
         }
      }

      & .brxc-overlay__action-btn{
         width: 25px;
         height: 25px;
         border-radius: 50%;
         aspect-ratio: 1;
         align-self: center;
         background-image: var(--bg);
         position: relative;
         background-size: 300%;
      }
      & .brxc-overlay__action-btn::before{
         content: '';
         position: absolute;
         top: 0;
         right: 0;
         left: 0;
         bottom: 0;
         z-index: 1;
         border-radius: 50%;
         background-color: var(--color);
      }
   }

   /* Column*/
   & .brxc-color-container.column{
      gap: 20px;
      
      & > div {
         gap: 0px;
      }
      & .brxc-color-category-wrapper .brxc-color-label{
         display: none;
      }
      & .brxc-color-wrapper {
         .brxc-color-item{
            & .brxc-overlay__action-btn {
               flex: 1 !important;
               width: 100%;
               border-radius: 0;
               background-color: var(--color);
            } 
         }     
      }
      & .brxc-parent-color-container{
         & .brxc-color-item {
            display: flex;
            align-items: center;
            flex-direction: column;
            height: 100%;
            &:first-child .brxc-overlay__action-btn {
               border-top-left-radius: var(--builder-border-radius);
               border-top-right-radius: var(--builder-border-radius);
            }
            &:last-child .brxc-overlay__action-btn {
               border-bottom-left-radius: var(--builder-border-radius);
               border-bottom-right-radius: var(--builder-border-radius);
            }
         }
      }
      & .brxc-color-others{
         & .brxc-color-wrapper{
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
            gap: 4px;
            padding: 0 10px;
            & > div {
               width: 100%;
               aspect-ratio: 1;
               background-image: var(--bg);
               border-radius: 99vw;
               & .brxc-overlay__action-btn{
                  height: 100%;
                  width: 100%;
                  aspect-ratio: 1;
                  border-radius: 99vw;
                  background-color: var(--color);
               }
            }
         }
      }
      & .brxc-nested-color-container {
         display: flex;
         flex-direction: column;
         gap: 5px;
         padding: 5px 10px;

         & .brxc-color-wrapper, .brxc-color-category-wrapper {
            display: flex;
            width: 100%;
            border-radius: var(--builder-border-radius);
            background-size: 35%;
         }
         & .brxc-color-item {
            width: 100%;
         }
         & .brxc-overlay__action-btn.isotope-selector {
            background-color: var(--color);
            width: 100%;
            min-height: 34px;
            border-radius: 0;
            opacity: 1;
         }
         & .brxc-color-item:first-child .brxc-overlay__action-btn.isotope-selector{
            border-top-left-radius: var(--builder-border-radius);
            border-bottom-left-radius: var(--builder-border-radius);
         }
         & .brxc-color-item:last-child .brxc-overlay__action-btn.isotope-selector{
            border-top-right-radius: var(--builder-border-radius);
            border-bottom-right-radius: var(--builder-border-radius);
         }
      }
   }
}

 /*--------------------------------------
 Advanced CSS Manager
 --------------------------------------*/

 .brxc-overlay__wrapper .brxc-overlay-variables__title {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 10px;
    color: var(--builder-color-knob);
 }
 
 .brxc-overlay__wrapper .brxc-overlay-css__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--builder-gray-d);
 }
 
 .brxc-overlay__wrapper .brxc-overlay-css__desc {
   margin-bottom: 12px;
   font: 12px Inter,sans-serif;
   min-height: auto;
 }
 
 /*--------------------------------------
 OpenAI
 --------------------------------------*/

 .brxc-field__wrapper {
    position: relative;
 }
 label.brxc-no-reset{
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    color: var(--builder-gray-6);
 }

 input[type="checkbox"]:checked + label.brxc-no-reset{
    color: var(--builder-color-accent);
 }
 
 #brxcGlobalOpenAIOverlay .brxc-overlay__pannels-wrapper .brxc-overlay__pannel {
    padding: 20px 32px 40px 32px;
 }
 
 #brxcGlobalOpenAIOverlay .brxc-overlay__pannel-3 .brxc-prompt-options-wrapper {
    --gap: 8rem;
    --col: 2;
 }
 
 .brxc-overlay__action-btn-wrapper.generate-content {
    display: none;
 }
 
 .brxc-overlay__action-btn-wrapper.generate-content.active,
 .brxc-overlay__action-btn-wrapper.action-wrapper {
    display: flex;
 }
 
 .brxc-overlay__action-btn-wrapper.generate-content.active+.brxc-overlay__action-btn-wrapper.action-wrapper,
 .brxc-canvas.empty+.brxc-overlay__action-btn-wrapper.action-wrapper {
    display: none;
 }
 
 .brxc-overlay__wrapper textarea.message.assistant {
    pointer-events: none;
 }
 
 /* Promp options*/
 
 .brxc-prompt-options-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    margin: 3rem 0;
 }

 .brxc-accordion-panel .brxc-prompt-options-wrapper:first-child {
    margin-top: 0;
}
 
 .brxc-prompt-options-wrapper.six-col {
    --gap: 4rem;
    --col: 6;
 }
 .brxc-prompt-options-wrapper.three-col {
    --gap: 4rem;
    --col: 3;
 }
 
 .brxc-prompt-options-wrapper.two-col {
    --gap: 10rem;
    --col: 2;
 }
 
 .brxc-prompt-options-wrapper .brxc-prompt-option {
    flex-basis: calc((100% - (var(--gap) * (var(--col) - 1))) / var(--col));
    min-width: 175px;
    flex-grow: 1;
 }
 
 .brxc-overlay__wrapper label {
    margin-bottom: 1.2rem;
    font-size: 14px;
    color: var(--builder-color);
    font-weight: 400;
    letter-spacing: .2px;
    line-height: 20px;
    white-space: nowrap;
 }
 .brxc-overlay__pannel label.has-tooltip,
 .brxc-prompt-option label.has-tooltip {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

 
 .brxc-overlay__pannel label i,
 .brxc-prompt-option label i {
    color: var(--builder-gray-4);
 }
 .brxc-overlay__pannel label i.fas.fa-grip-vertical {
    color: var(--builder-color);
    opacity: .3;
 }
 
 .brxc-overlay__pannel label i:hover,
 .brxc-prompt-option label i:hover {
    color: var(--builder-gray-f);
 }
 .brxc-overlay__pannel label i.fas.fa-grip-vertical:hover {
   opacity: 1;
}
 
 .brxc-overlay__pannel label [data-balloon]:after,
 .brxc-prompt-option label [data-balloon]:after {
    padding: 12px;
    line-height: 1.4em;
 }
 
 .brxc-overlay__wrapper label p {
    margin-bottom: 1rem;
 }
 
 /* History*/
 
 .brxc-history__header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 8px;
 }
 
 .brxc-history__header-wrapper .brxc-history__header-wrapper--left i {
    margin-right: 4px;
    font-size: 12px;
    background-color: var(--builder-gray-3);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--builder-gray-a);
 }
 
 .brxc-history__header-wrapper .brxc-history__header-wrapper--left>span {
    display: flex;
    align-items: center;
    gap: 4px;
 }
 
 .brxc__no-record {
    color: var(--builder-gray-f);
 }
 
 .brxc-history__header-wrapper--right {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
 }
 
 .brxc-history__header-wrapper--right .brxc-history__header-block {
    display: flex;
    align-items: center;
    gap: 6px;
 }
 
 .brxc-history__header-wrapper--right .brxc-history__header-block i {
    font-size: 14px;
    color: var(--builder-gray-7);
 }
 #brxcGlobalOpenAIHistory .message.assistant,
 #brxcGlobalOpenAIHistory label {
    margin-bottom: 4px;

 }

 /* Image AI */
 
 .brxc-overlay__wrapper input[type=radio]:checked+label .message.assistant,
 .brxc-overlay__wrapper input[type=radio]:checked+label .brxc__image {
    outline: 2px solid var(--builder-color-accent) !important;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
 }
 
 .brxc-overlay__wrapper input[type=radio]:checked+label .brxc__image {
    outline: 5px solid var(--builder-color-accent) !important;
 }
 
 .brxc__img-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
 }
 
 .message.assistant,
 img.brxc__image {
   display: flex;
    background-color: var(--builder-gray-3);
    border: none;
    border-radius: 0.25rem;
    color: var(--builder-gray-f);
    height: auto;
    line-height: inherit !important;
    padding: 10px 12px;
    width: 100% !important;
    margin-bottom: 10px;
 }
 
 img.brxc__image {
    padding: 0;
 }

/*--------------------------------------
Speech to Text
--------------------------------------*/
 .brxc__file-input{
   color: var(--builder-color) !important;
    padding: 10px !important;
    border: 2px solid var(--builder-bg-3);
    border-radius: var(--builder-border-radius);
    background-color: var(--builder-bg-2);
 }
 /*--------------------------------------
 Autocomplete css variables
 --------------------------------------*/
 
 .autocomplete-items.bricks-control-popup.bottom {
    box-shadow: 0 6px 12px 0 rgb(0 0 0 / 50%);
    max-width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0;
    height: max-content !important;
    max-height: 400px;
    min-width: 200px;
    text-align: left;
 }
 .brxc-global-variable-list .autocomplete-items.bricks-control-popup.bottom,
 .brxc-theme-variable-list .autocomplete-items.bricks-control-popup.bottom {
   top: calc(100% - 4px);
   color: var(--builder-color);
 }
 .brxc-global-variable-list .autocomplete-items.bricks-control-popup.bottom ul,
 .brxc-theme-variable-list .autocomplete-items.bricks-control-popup.bottom ul{
   padding: 0;
 }
 #bricks-panel-element [data-control="spacing"] .autocomplete-items.bricks-control-popup{
   margin: 2px;
 }
 #bricks-panel-element [data-control="spacing"] .handle.right .autocomplete-items.bricks-control-popup {
    left: unset;
    right: 0;
    min-width: 200%;
 }
 #bricks-panel-element [data-control="spacing"] .handle.left .autocomplete-items.bricks-control-popup {
   left: 0;
   min-width: 200%;
}
#bricks-panel-element [data-control="spacing"] .handle.top .autocomplete-items.bricks-control-popup,
#bricks-panel-element [data-control="spacing"] .handle.bottom .autocomplete-items.bricks-control-popup{
   left: 0;
   right: 0;
}
 
#bricks-panel-element [data-control=border] [controlkey=radius] .handle .autocomplete-items.bricks-control-popup {
    position: absolute;
 }
 
 .autocomplete-items.bricks-control-popup ul li {
    cursor: pointer;
    display: flex;
    line-height: 20px;
    margin: 0;
    padding: 5px 10px;
    font-family: Consolas, monaco, Courier New, monospace;
    font-size: 11px;
    color: var(--builder-color);
 }
 
 .autocomplete-items.bricks-control-popup ul li:hover,
 .autocomplete-items.bricks-control-popup ul li.selected {
    background-color: var(--builder-bg-3);
 }
 
 /*--------------------------------------
 Custom Range
 --------------------------------------*/
 
 .brxc__range {
    --Cultured: red;
    --RaisinBlack01: var(--builder-bg-3);
    --RaisinBlack02: var(--builder-bg-3);
    --BabyBlue: var(--builder-gray-6);
    --Cinnabar: var(--builder-gray-0);
    --circle: var(--builder-gray-4);
    --focus-circle: var(--builder-color-accent);
    display: flex;
    align-items: center;
    gap: 2rem;
    color: var(--bricks-text-light);
 }
 
 .brxc__range .input span.value {
    font-size: 16px;
 }
 
 /* Styling the sliders*/
 .brxc__range input[type="range"] {
    -webkit-appearance: none;
    background: var(--atbrxc-color-transparent);
 }
 
 .brxc__range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
 }
 
 .brxc__range input[type="range"]:focus {
    outline: none;
 }
 
 /*New range styles*/
 .brxc__range input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    cursor: pointer;
    background-color: var(--RaisinBlack02);
    border-radius: 50px;
 }
 
 .brxc__range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 13px;
    width: 13px;
    margin-top: -3px;
    background-color: var(--BabyBlue);
    box-shadow: 0 0 0 6px var(--circle);
    border-radius: 10px;
    cursor: pointer;
    will-change: contents;
    transition: all 0.2s ease;
 }
 
 .brxc__range input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 8px var(--focus-circle);
    background-color: var(--atbrxc-color-white);
 }
 
 .brxc__range input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background-color: var(--RaisinBlack02);
    border-radius: 50px;
 }
 
 .brxc__range input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    height: 13px;
    width: 13px;
    margin-top: -3px;
    background-color: var(--BabyBlue);
    box-shadow: 0 0 0 6px var(--circle);
    border-radius: 20px;
    cursor: pointer;
    will-change: contents;
    transition: all 0.2s ease;
 }
 
 .brxc__range input[type="range"]::-moz-range-thumb:hover {
    box-shadow: 0 0 0 8px var(--circle);
 }
 
 /*--------------------------------------
 Inputs
 --------------------------------------*/
 input.brxc-input-text {
   background: var(--builder-bg-2);
   border: none;
   background-color: var(--builder-bg-2);
   border: none;
   border-radius: var(--builder-border-radius);
   box-shadow: none;
   color: var(--builder-color);
   display: block;
   font-family: inherit;
   font-size: inherit;
   outline: none;
   padding: 0 12px;
   transition: none;
   width: 100%;
}
input.brxc-input-text::placeholder{
   opacity: var(--builder-placeholder-opacity);
   color: var(--builder-color);
}
 .brxc-overlay__wrapper input[type="checkbox"],
 .brxc-overlay__wrapper input[type="radio"] {
    display: none;
    visibility: hidden;
 }
 
 .brxc-bulk-actions__wrapper .brxc__text{
   position: relative
 }
 .brxc__text input {
    outline: none;
    border: none;
    margin-bottom: 3rem;
    border-radius: 0.25rem;
    color: var(--builder-color);
    background-color: var(--builder-bg-2);
 }
 
 .brxc__text input::placeholder {
   opacity: var(--builder-placeholder-opacity);
   color: var(--builder-color);
 }
 
 .brxc-overlay__wrapper textarea {
    outline: 0px !important;
    border: none;
    border-radius: 0.25rem;
    padding: 10px 12px;
    margin-bottom: 16px;
    color: var(--builder-color);
    background-color: var(--builder-bg-2);
 }

  .brxc-plain-class-select {
   margin-bottom: unset;
 
 }

  .brxc-overlay__action-btn-wrapper.sticky-bottom{
   padding-top: 32px;
   margin-top: auto;
   position: sticky;
   bottom: 0;
   z-index: 10;
   background-image: linear-gradient(180deg, transparent, var(--builder-bg) 50%);
  }
 
 /*--------------------------------------
 Isotope
 --------------------------------------*/
 
 .isotope-selector.brxc-isotope__col {
    width: calc(calc(100% / var(--col)) - calc(calc(var(--gutter)* calc(var(--col) - 1))/var(--col)));
 }
 .isotope-selector.brxc-isotope__col img{
    width: 100%;
 }
 .isotope-wrapper {
    --col: 3;
    --gutter: 20px;
 }
 
 .brxc-overlay__inner-wrapper #brxcCSSColRight {
    flex-grow: 1;
    max-height: 100%;
    overflow: scroll;
 }
 
 @media screen and (max-width: 768px) {
    .isotope-wrapper {
       --col: 2;
    }
 }
 
 /* Search box */
 
 .brxc-overlay__search-box {
    margin-bottom: 30px;
    width: 100%;
    position: relative;
 }
 #brxcStyleOverviewOverlay .brxc-overlay__search-box {
   margin-bottom: 8px;
}
 
 .brxc-overlay__search-box input[type="text"] {
   background-color: var(--builder-bg-2);
   outline: 0px !important;
   border: none;
   border-radius: 0.25rem;
   color: var(--builder-color);
   padding-left: 43px;
   font-size: 14px;
   transition: none;
 }
 .brxc-overlay__search-box input[type="search"]:focus,
 .brxc-overlay__search-box input[type="text"]:focus,
 #bricks-structure .element.tag-dropdown-active .structure-item .brxc-tag-btn-wrapper ul.dropdown input[type="text"]:focus {
   box-shadow: inset 0px 0px 0px 2px var(--builder-color-accent) !important;
 }

 .brxc-class-manager__wrapper  .brxc-overlay__search-box input[type="text"] {
   background-color: var(--builder-bg-3);
 }
 
 .brxc-overlay__wrapper .brxc-overlay__search-box input[type="text"]::placeholder,
 .brxc-overlay__wrapper textarea::placeholder {
   opacity: var(--builder-placeholder-opacity);
   color: var(--builder-color);
 }

 /* Search Icon */

 .iso-search-icon {
   position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 0;
    color: var(--builder-color);
    opacity: .6;
    pointer-events: none;
    font-size: 12px;
}
 
 /* Reset button */
 
 .iso-reset,.iso-icon {
   position: absolute;
   border-radius: var(--builder-border-radius);
   aspect-ratio: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 9999;
   top: 9px;
   right: 9px;
   width: 22px;
   background: var(--builder-bg-3);
 }
 .iso-icon {
   position: relative;
   right: unset;
   top: unset;
}
 .iso-reset.light,.iso-icon.light {
   background: var(--builder-bg-2);
}
 
 .iso-reset i, .iso-icon i{
    font-size: 10px;
    font-weight: 900;
    pointer-events: none;
    color: var(--builder-color);
    pointer-events: none;
 }

 .brxc-overlay__search-box input:placeholder-shown ~ .iso-reset,
 .brxc-overlay__search-box input:placeholder-shown ~ .iso-icon.reset{
   display:none;
}
 
 /*--------------------------------------
 Grid Guide
 --------------------------------------*/
 #bricks-toolbar li.grid-guide {
   width: 30px;
   padding-left: 6px;
}
 #bricks-toolbar li.grid-guide-options {
   padding: 0 10px 0 0 !important;
   width: 15px;
}
#bricks-toolbar li.grid-guide-options.open {
   opacity: 1;
}
#bricks-toolbar li.grid-guide-options *{
   pointer-events: none;
}

#brxc-grid-guide-options__wrapper,
#brxc-framework-options__wrapper {
   background-color: var(--builder-bg);
   box-shadow: var(--builder-box-shadow);
   color: var(--builder-color);
   font-size: 13px;
   left: 50%;
   max-width: 80%;
   position: fixed;
   top: 100px;
   transform: translate(-50%);
   width: 600px;
   z-index: 3001;
   overflow: auto;
   max-height: 80vh;
   display: flex;
   flex-direction: column;
}
#brxc-framework-options__wrapper {
   max-width: unset;
   bottom: 5%;
   top: 5%;
   left: 5%;
   right: 5%;
   width: unset !important;
   height: fit-content;
   max-height: 90%;
   transform: unset;
}
#brxc-framework-options__wrapper {
   width: min(90%, 1600px)
}
#brxc-grid-guide-options__wrapper .header,
#brxc-framework-options__wrapper .header {
   display: flex;
   justify-content: space-between;
   gap: 1px;
   background-color: var(--builder-bg-2);
   position: sticky;
   top: 0px;
   z-index: 1;
   box-shadow: var(--builder-box-shadow);
}
#brxc-grid-guide-options__wrapper .header .title,
#brxc-framework-options__wrapper .header .title{
   flex: 1;
   font-size: 15px;
   font-weight: 700;
   letter-spacing: .4px;
   line-height: 60px;
   margin: 0;
   padding: 0 20px;
   position: relative;
   text-transform: uppercase;
}
#brxc-grid-guide-options__wrapper .header .close,
#brxc-framework-options__wrapper .header .close,
#brxc-grid-guide-options__wrapper .header .save,
#brxc-framework-options__wrapper .header .save,
#brxc-framework-options__wrapper .header .settings{
   align-items: center;
    background-color: var(--builder-bg-3);
    cursor: pointer;
    display: flex;
    height: 60px;
    justify-content: center;
    width: 60px;
}
#brxc-framework-options__wrapper .header .settings.active{
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent)
}
#brxc-grid-guide-options__wrapper .header .close > *,
#brxc-framework-options__wrapper .header .close > *,
#brxc-grid-guide-options__wrapper .header .save > *,
#brxc-framework-options__wrapper .header .save > *,
#brxc-framework-options__wrapper .header .settings > *{
   opacity: .5;
}
#brxc-grid-guide-options__wrapper .header .close:hover >*,
#brxc-framework-options__wrapper .header .close:hover > *,
#brxc-grid-guide-options__wrapper .header .save:hover > *,
#brxc-framework-options__wrapper .header .save:hover > *,
#brxc-framework-options__wrapper .header .settings:hover > *{
   opacity: 1;
}
#brxc-grid-guide-options__wrapper li > *:not(.empty) {
   flex-grow: 1;
   text-align: center;
}
#brxc-grid-guide-options__wrapper li.head > *:not(.empty),
#brxc-grid-guide-options__wrapper .input-grid-guide.color-wrapper {
   flex-grow: 1;
   padding: 0 16px;
   width: 100%;
   display: flex;
   justify-content: center;
}
#brxc-grid-guide-options__wrapper .input-grid-guide.color-wrapper{
   cursor: pointer;
}
#brxc-grid-guide-options__wrapper li > .empty {
   min-width: 13px;
}

.brxc-framework__settings-container{
   padding: 24px;
}
.brxc-framework__settings-container [data-control="info"]{
   margin-bottom: 10px;
}
.brxc-framework__settings-container .brxc-prefix-container {
   display: flex;
   flex-direction: column;
   gap: 8px;
   color: var(--builder-color);
}
.brxc-framework__settings-container .brxc-prefix-container .brxc-label{
   opacity: .5;
}
.brxc-framework__settings-container .brxc-prefix-container input{
   border: none;
   border-radius: var(--builder-border-radius);
   background-color: var(--builder-bg-2);

}

#brxc-grid-guide-options__wrapper ul,
#brxc-framework-options__wrapper ul{
   padding: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
}

#brxc-framework-options__wrapper ul {
   gap: 16px;
   padding: 24px;
   display: grid;
   grid-template-areas:
           "a"
           "b"
           "c"
           "d" 
           "e" 
           "f"
           "g";
   margin: auto;
}

@media screen and (min-width: 1100px){
   #brxc-framework-options__wrapper ul {
      grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
        "a a"
        "b b"
        "c c"
        "d d"
        "e e"
        "f g";
    }
}
#brxc-framework-options__wrapper ul > *:nth-child(1) {
   grid-area: a;
}
#brxc-framework-options__wrapper ul > *:nth-child(2) {
   grid-area: b;
}
#brxc-framework-options__wrapper ul > *:nth-child(3) {
   grid-area: c;
}
#brxc-framework-options__wrapper ul > *:nth-child(4) {
   grid-area: d;
}
#brxc-framework-options__wrapper ul > *:nth-child(5) {
   grid-area: e;
}
#brxc-framework-options__wrapper ul > *:nth-child(6) {
   grid-area: f;
}
#brxc-framework-options__wrapper ul > *:nth-child(7) {
   grid-area: g;
}
#brxc-grid-guide-options__wrapper ul li,
#brxc-framework-options__wrapper ul li{
   width: 100%;
   display: flex;
   justify-content: stretch;
   align-items: center;
   padding: 0px 24px;
   min-height: 48px;
   font-weight: 700;
}
#brxc-framework-options__wrapper ul li{
   justify-content: space-between;
   gap: 80px;
   padding: 10px;
   background-color: var(--builder-bg-2);
   border-radius: var(--builder-border-radius);
   align-items: baseline;
}
#brxc-framework-options__wrapper ul li .brxc-property{
   display: flex;
   flex-direction: column;
   gap: 4px;
   flex: 1;
   height: 100%;
}
#brxc-framework-options__wrapper ul li .brxc-property .label-wrapper{
   display: flex;
   justify-content: flex-start;
   align-items: center;
   gap: 4px;
   position: relative;
   padding-bottom: 10px;
   margin-bottom: 4px;
}
#brxc-framework-options__wrapper ul li .brxc-property .label-wrapper::before{
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 1px;
   background-color: var(--builder-color);
   opacity: .1;
}
#brxc-framework-options__wrapper ul li .brxc-property .label-wrapper i.icon{
   --width: 26px;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 3px;
   color: var(--builder-color);
   background-color: var(--builder-bg-3);
   border-radius: 99vw;
   width: var(--width);
   height: var(--width);
   font-size: 12px;
   margin-right: 4px

}
#brxc-framework-options__wrapper ul li .brxc-property .label-wrapper i.link{
   color: var(--builder-color);
   cursor: pointer;
   margin-left: 6px;
   font-size: 12px;
   opacity: .5;
}
#brxc-framework-options__wrapper ul li .brxc-property .label-wrapper i.link:hover{
   color: var(--builder-color-accent);
   opacity: 1;
}
#brxc-framework-options__wrapper ul li .brxc-property span.label{
   font-size: 14px;
   text-transform: uppercase;
}
#brxc-framework-options__wrapper ul li .brxc-property span.count{
   opacity: .5
}
#brxc-framework-options__wrapper ul li .brxc-property span.info{
   font-weight: 400;
   opacity: .8;
}
#brxc-framework-options__wrapper ul li .brxc-property span.update-info,
#brxc-framework-options__wrapper ul li .brxc-property span.difference-info {
   background-color: var(--builder-bg-info);
   border-radius: var(--builder-border-radius);
   color: var(--builder-color-info);
   font-weight: 500;
   line-height: 1.3;
   min-height: var(--builder-input-height);
   padding: 8px 12px;
   margin-bottom: 14px;
}
#brxc-framework-options__wrapper ul li .brxc-property span.difference-info {
   color: var(--bricks-text-warning);
   background-color: #ffa00326;
}
#brxc-framework-options__wrapper ul li .brxc-property span.update-info strong,
#brxc-framework-options__wrapper ul li .brxc-property span.difference-info strong {
   border-bottom: 1px solid;
   color: currentcolor !important;
}
#brxc-framework-options__wrapper ul li .brxc-property span.info{
   margin-bottom: 10px;
}
#brxc-framework-options__wrapper ul li .brxc-categories{
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
   gap: 10px 20px;
   padding: 10px;
   background-color: var(--builder-bg-3);
   border-radius: var(--builder-border-radius);
   margin-top: auto;
}
#brxc-framework-options__wrapper ul li .brxc-categories [data-id]{
   display: flex;
   align-items: center;
   gap: 8px;
}
#brxc-framework-options__wrapper ul li .brxc-categories .update-button[data-id]{
   background-color: var(--bricks-text-success);
   border: none;
   box-shadow: none;
   outline: none;
   color: #fff;
   padding: 1px 10px;
   border-radius: 99vw;
   font-size: 12px;
   font-weight: 500;
   text-transform: capitalize;
   opacity: .8;
   cursor: pointer;
}
#brxc-framework-options__wrapper ul li .brxc-categories .update-button[data-id]:hover{
   opacity: 1;
}
#brxc-framework-options__wrapper ul li .brxc-categories [data-id] > .bricks-svg{
   display: flex;
   margin-top: 2px;
}
#brxc-framework-options__wrapper ul li .brxc-categories [data-id] i{
   font-size: 18px;
   color: var(--builder-color-accent);
   cursor: pointer;
}
#brxc-framework-options__wrapper ul li .brxc-categories [data-id] i.fa-toggle-on{
   color: var(--builder-color-accent);
}
#brxc-framework-options__wrapper ul li .brxc-categories [data-id] i.fa-toggle-off{
   color: var(--bricks-color-secondary);
}
#brxc-framework-options__wrapper ul li .brxc-categories [data-id] span{
   font-weight: 500;
}
#brxc-framework-options__wrapper ul li .brxc-categories [data-id] span.orange{
   color: var(--bricks-text-warning);
}
#brxc-framework-options__wrapper ul li .brxc-categories [data-id] span.count{
   margin-left: 2px;
}
#brxc-framework-options__wrapper ul li .brxc-action-wrapper{
   display: flex;
   gap: 4px;
   align-items: center;
}
#brxc-framework-options__wrapper ul li span.brxc-action{
   padding: 4px 8px;
   background-color: var(--builder-bg-accent);
   border-radius: var(--builder-border-radius);
   color: var(--builder-color-accent);
   text-transform: uppercase;
   cursor: pointer;
   opacity: .8;
   white-space: nowrap;
}
#brxc-framework-options__wrapper ul li span.brxc-action.disabled{
   background-color: var(--builder-bg-2);
   color: var(--builder-color);
   opacity: .5;
   pointer-events: none;
}
#brxc-framework-options__wrapper ul li span.brxc-action.remove{
   color: var(--builder-color-danger);
   background: var(--builder-bg-unsigned);
}

#brxc-framework-options__wrapper ul li span.brxc-action:hover{
   opacity: 1;
}
#brxc-framework-options__wrapper .brxc-property [data-control]{
   margin-bottom: 10px;
   --builder-bg-info: var(--builder-bg-unsigned);
   color: var(--builder-color-danger);
}
#brxc-grid-guide-options__wrapper ul > *:nth-child(2n + 1) {
   background-color: var(--builder-bg-2);
}


.input-grid-guide{
   background-color: transparent;
   outline: none !important;
   border: none !important;
}
.input-grid-guide.color{
   width: 24px;
   height: 24px;
   border-radius: 50%;
}
.input-grid-guide-device{
   background-color: var(--builder-bg-3);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 6px;
   aspect-ratio: 1;
   border-radius: 50%;
}


 .brxc-grid-guide__wrapper {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
   z-index: 1000;
   padding-top: 0!important;
   padding-bottom: 0!important;
   border: none !important;
   outline: none !important;
   background: transparent !important;
 }
 
 .brxc-grid-guide__wrapper>.brxe-container {
    height: 100%;
    display: grid;
    grid-template-rows: 100%;
    pointer-events: none;
 }
 
 .brxc-grid-guide__wrapper>.brxe-container>div {
    height: 100%;
    pointer-events: none;
 }

  /*--------------------------------------
Main AT Menu
 --------------------------------------*/
 #bricks-toolbar .main-at-menu > * {
   pointer-events: none;
   user-select: none;
}
 #bricks-toolbar .main-at-menu.active{
   background-color: inherit;
   color: var(--builder-color-accent);
   cursor: pointer;
 }
 #bricks-toolbar .main-at-menu.active i{
   opacity: 1 !important;
 }
 #bricks-toolbar span.brxc-AT-menu-icon {
   font-weight: 900;
   font-size: 14px;
   font-style: normal;
}

#brxc-main-at-menu {
   background-color: var(--builder-bg);
    border-radius: var(--builder-border-radius);
    border-top-left-radius: unset;
    border-top-right-radius: unset;
    box-shadow: 0 4px 20px rgba(0,0,0,.45);
    opacity: 0;
    position: fixed;
    user-select: none;
    visibility: hidden;
    z-index: -1;
}

#brxc-main-at-menu.show {
   opacity: 1;
   visibility: visible;
   z-index: 3002!important;
   top: 40px;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 20px;
}

#brxc-main-at-menu ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   column-count: 1;
   padding: 12px 0;
}

#brxc-main-at-menu ul .brxc-main-menu__block {
   break-inside: avoid-column;
   margin-bottom: 1em;
}
#brxc-main-at-menu ul .brxc-main-menu__label-wrapper{
   display: flex;
   align-items: baseline;
   gap: 12px;
   text-overflow: ellipsis;
   overflow: hidden;
}
#brxc-main-at-menu ul .brxc-main-menu__label-wrapper .version{
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
   border-radius: var(--builder-border-radius);
   padding: 0px 8px;
   line-height: 2;
}
#brxc-main-at-menu ul .title {
   color: var(--builder-color);
   opacity: 0.3;
   font-weight: 800;
   text-transform: uppercase;
   font-size: 14px;
   margin-bottom: 4px;
   display: block;
   padding-left: 1em;
}

#brxc-main-at-menu ul li {
    color: var(--builder-color);
    opacity: .85;
    cursor: pointer;
    display: flex;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: 700;
    gap: 12px;
    letter-spacing: .2px;
    line-height: 32px;
    padding: 0 1em 0 1.5em;
}
#brxc-main-at-menu ul:nth-child(3) li {
   gap: 40px;
}

#brxc-main-at-menu ul li:hover:not(.convert) {
   background-color: var(--builder-bg-3);
   color: #fff
}

#brxc-main-at-menu ul li:hover:not(.convert).delete {
   background-color: var(--bricks-text-danger)
}

#brxc-main-at-menu ul li:hover:not(.convert).save {
   background-color: var(--bricks-text-success)
}

#brxc-main-at-menu ul li.sep {
   border-bottom: 1px solid var(--builder-bg-2)
}

#brxc-main-at-menu ul li.disabled {
   background-color: inherit;
   color: var(--bricks-text-light);
   cursor: default;
   pointer-events: none!important
}

#brxc-main-at-menu ul li.convert {
   cursor: default
}

#brxc-main-at-menu ul li a {
   width: 100%
}

#brxc-main-at-menu ul li span {
   color: inherit;
   display: inline-block;
   position: relative
}

#brxc-main-at-menu ul li .label {
   flex-grow: 1;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
}
#brxc-main-at-menu ul li .settings {
   background-color: var(--builder-bg-2);
   aspect-ratio: 1;
   width: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 11px;
   border-radius: 50%;
   cursor: pointer;
}
#brxc-main-at-menu ul li.no-pointer {
   cursor: default;
}
#brxc-main-at-menu ul li .action {
   display: flex;
   align-items: baseline;
   gap: 16px;
   flex-grow: 99;
   justify-content: end;
}

#brxc-main-at-menu ul li:hover .action {
   background-color: var(--builder-gray-4)
}

#brxc-main-at-menu ul li .shortcut,
#brxc-main-at-menu ul li .save {
   font-size: 11px;
   opacity: .5;
   text-transform: uppercase;
   white-space: nowrap;
}
#brxc-main-at-menu ul li .save:hover {
   opacity: 1;
}

#brxc-main-at-menu ul li .buttons {
   cursor: pointer;
   display: flex;
   font-size: 14px;
   gap: 8px
}
#brxc-main-at-menu ul li .toggle {
   font-size: 14px;
   cursor: pointer;
}
#brxc-main-at-menu ul li .toggle .fa-toggle-off{
   color: var(--bricks-color-secondary);
}
#brxc-main-at-menu ul li .toggle .fa-toggle-on{
   color: var(--builder-color-accent);
}
 
 /*--------------------------------------
 X-Mode
 --------------------------------------*/
 
 .x-mode-enabled {
    outline: 1px solid #000;
    filter: grayscale(1);
 }
 
 /*--------------------------------------
 Contrast
 --------------------------------------*/
 
 .brxc-contrast-failed {
    outline: 2px solid red;
 }
  /*--------------------------------------
    Highlight Classes
 --------------------------------------*/

 body [class*=brxe-].brxc-active-class{
   outline: 1px solid var(--builder-color-success);
   outline-offset: -1px;
 }
 /*--------------------------------------
 Custom Components
 --------------------------------------*/
 .brxc-custom-components__icon-container {
   max-height: 297px;
   overflow: scroll;
   border-radius: var(--builder-border-radius);
}
 .brxc-custom-components__icon-wrapper{
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 8px;
   padding: 10px;
   background-color: var(--builder-bg-2);
   border-radius: var(--builder-border-radius);
 }
 .brxc-custom-components__category-wrapper{
   position: relative;
 }
 .brxc-custom-components__category-wrapper .autocomplete-items.bricks-control-popup.bottom ul {
   padding: 0;
   margin: 3px;
}
 .brxc-overlay__wrapper.sidebar .brxc-custom-components__icon-wrapper label {
   padding: 20px 8px !important;
   background-color: var(--builder-bg);
   border: 1px solid var(--builder-bg);
   border-radius: var(--builder-border-radius);
   color: var(--builder-color);
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 0;
   cursor: pointer;
}
.brxc-overlay__wrapper.sidebar .brxc-custom-components__icon-wrapper input:checked + label {
   background-color: var(--builder-bg-accent);
   border: 1px solid var(--builder-color-accent);
}
.brxc-overlay__wrapper.sidebar .brxc-custom-components__icon-wrapper label i{
   color: var(--builder-color);
   font-size: 22px;
}
.brxc-overlay__wrapper.sidebar .brxc-custom-components__icon-wrapper input:checked + label i {
   color: var(--builder-color-accent);
}
 #brxcCustomComponentsCanvas,
 #brxcCustomComponentsContainer{
   height: 100%;
 }
 #brxcCustomComponentsCanvas {
   display: grid;
   grid-template-columns: 300px calc(100% - 300px);
   overflow: hidden;
}
#brxcCustomComponentsContainer,
#brxcCustomComponentsCats{
 overflow-y: scroll;
}

#brxcCustomComponentsCats > ul {
   margin-top: 40px;
}
#brxcCustomComponentsCanvas .brxc-overlay__search-box{
   margin-bottom: 0px;
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 20px 20px 20px 20px;
    background-color: var(--builder-bg-2);
}
#brxcCustomComponentsCanvas .brxc-overlay__search-box .iso-search-icon{
   left: 40px;
}

#brxcCustomComponentsCanvas .brxc-overlay__search-box .iso-reset{
   top: 30px;
   right: 31px;
}
#brxcCustomComponentsCanvas #brxcCustomComponentsContainer input[type="text"]{
   background-color: var(--builder-bg-3);
}
 #brxcCustomComponentsGrid{
   padding: 0px 20px 20px 20px;
   min-height: 100%;
   background-color: var(--builder-bg-2);
 }
 #brxcCustomComponentsElements {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: 20px;
}
.brxc-custom-components__item {
   position: relative;
   aspect-ratio: 1.7;
   width: 100%;
   background-color: var(--builder-bg-3);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px;
   color: var(--builder-color);
   padding: 12px;
   font-family: 'Inter';
   font-size: 12px;
   border: 1px solid var(--builder-bg-3);
   cursor: pointer;
   border-radius: var(--builder-border-radius);
   min-height: 120px;
}
.brxc-custom-components__item i {
   font-size: 22px;
}
.brxc-custom-components__item .brxc-overlay__close-btn{
   display: none;
   top: -12px;
   right: -12px;
   width: 24px;
   color: var(--builder-color-accent-inverse);
}
.brxc-custom-components__item .brxc-overlay__close-btn i{
   font-size: 12px;
   pointer-events: none;
}
.brxc-custom-components__item:hover .brxc-overlay__close-btn{
   display: flex;
}

.brxc-custom-components__item:hover {
   display: flex;
   color: var(--builder-color-accent);
   border: 2px solid var(--builder-color-accent);
}

.brxc-custom-components__convert {
   position: absolute;
   bottom: 7px;
   right: 7px;
   border-radius: var(--builder-border-radius);
   border: 1px solid var(--builder-color);
   width: 24px;
   height: 24px;
   display: none;
   align-items: center;
   justify-content: center;
}
.brxc-custom-components__item:hover .brxc-custom-components__convert {
   display: flex;

}

.brxc-custom-components__convert i{
   font-size: 12px;
   color: var(--builder-color);
}
.brxc-custom-components__convert i{
   font-size: 12px;
   color: var(--builder-color);
}
.brxc-custom-components__convert:hover{
   border: 1px solid var(--builder-color-accent);
}
.brxc-custom-components__convert:hover i{
   color: var(--builder-color-accent);
}
 /*--------------------------------------
Zoom Out
 --------------------------------------*/
#bricks-toolbar li.zoom-out {
   width: 25px;
   opacity: .5;
}
#bricks-toolbar li.preview-dimension:has(.unit.scale.off) + li.zoom-out {
   display: none;
}
#bricks-toolbar li.zoom-out.enabled span{
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
}
#bricks-toolbar li.zoom-out:hover {
   opacity: 1;
   color: inherit !important;
}
#bricks-toolbar li.zoom-out span {
   background-color: var(--builder-bg-3);
   border: none;
   border-radius: var(--builder-border-radius);
   border-bottom-left-radius: 0px;
   border-top-left-radius: 0px;
   color: inherit;
   letter-spacing: .2px;
   line-height: 24px;
   padding: 5px;
   text-align: center;
   transition: none;
   font-size: 14px;
}
#bricks-toolbar:has(li.zoom-out) #preview-scale{
   border-radius: 0px;
}
body.at-zoom-out main > *{
   pointer-events: auto;
}
body.at-zoom-out main > * *{
   pointer-events: none;
}



 /*--------------------------------------
 Plain Classes
 --------------------------------------*/
 #bricks-panel-element-classes .active-class > * .symbol,
 #bricks-panel-element-classes .active-class > .symbol.counter,
 #bricks-panel-element-classes .active-selector > * .symbol,
 #bricks-panel-element-classes .active-selector > .symbol.counter{
   position: relative;
   z-index: 1;
 }
 #bricks-panel-element-classes .active-class .actions,
#bricks-panel-element-classes .active-selector .actions,
#bricks-panel-element-classes .active-selector .actions-wrapper .clear {
   z-index: 1;
}
#bricks-panel-element-classes .active-selector .at-icon{
   border-radius: var(--builder-border-radius);
   opacity: .5;
   width: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 800;
}
#bricks-panel-element-classes .active-selector .at-icon{
   font-size: 14px;
}
#bricks-panel-element-classes .active-selector .at-icon:hover{
   background-color: var(--builder-color-accent) !important;
   color: var(--builder-bg-accent) !important;
   opacity: 1;
}
#bricks-panel-element-classes .plain-classes-icon::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    cursor: pointer;
 }

 #plainClassesSearchResultsCanvas {
   display: flex;
   flex-direction: column;
   gap: 8px;
   user-select: none;
}
#plainClassesSearchResultsCanvas .brxc-overlay__action-btn{
   gap: 8px;
}
#plainClassesSearchResultsCanvas .brxc-overlay__action-btn i{
   font-size: 10px;
   color: var(--bricks-text-danger);
   transform: translateY(1px);
}
 #bricks-panel-element-classes .active-class~.brxc-copy-id-to-class-wrapper .autocomplete-items.bricks-control-popup,
 #bricks-panel-element-classes .active-class~.brxc-clone-class-wrapper .autocomplete-items.bricks-control-popup,
 #bricks-panel-element-classes .active-selector~.brxc-copy-id-to-class-wrapper .autocomplete-items.bricks-control-popup,
 #bricks-panel-element-classes .active-selector~.brxc-clone-class-wrapper .autocomplete-items.bricks-control-popup {
    left: 0;
    right: 0;
}
#brxc-copy-id-to-class-input-catautocomplete-list{
   top: unset;
}
 span.symbol.counter i{
    font-size: 12px;
}
span.symbol.counter svg {
    fill: var(--builder-color);
    height: 12px;
}
span.symbol.counter:hover svg {
    fill: var(--builder-color-accent);
}
#bricks-panel-element-classes .active-class + .brxc-copy-id-to-class-wrapper,
#bricks-panel-element-classes .active-class + .brxc-clone-class-wrapper,
#bricks-panel-element-classes .active-selector + .brxc-copy-id-to-class-wrapper,
#bricks-panel-element-classes .active-selector + .brxc-clone-class-wrapper{
    position: relative;
}
#bricks-panel-element-classes .active-selector + .brxc-copy-id-to-class-wrapper input[type="text"],
#bricks-panel-element-classes .active-selector + .brxc-clone-class-wrapper input[type="text"],
#bricks-panel-element-classes .active-class + .brxc-copy-id-to-class-wrapper input[type="text"],
#bricks-panel-element-classes .active-class + .brxc-clone-class-wrapper input[type="text"]{
    font-family: Consolas,monaco,Courier New,monospace;
    font-size: 11px;
    margin: 4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.brxc-copy-id-to-class-wrapper span.bricks-svg-wrapper.create,
.brxc-clone-class-wrapper span.bricks-svg-wrapper.create,
.brxc-copy-id-to-class-wrapper span.bricks-svg-wrapper.cancel,
.brxc-clone-class-wrapper span.bricks-svg-wrapper.cancel {
   align-items: center;
   bottom: 10px;
   display: flex;
   gap: 8px;
   justify-content: center;
   position: absolute;
   right: 8px;
   top: 10px;
   opacity: .5;
   cursor: pointer;
   height: fit-content;
   font-size: 14px;
}
.brxc-copy-id-to-class-wrapper span.bricks-svg-wrapper.create,
.brxc-clone-class-wrapper span.bricks-svg-wrapper.create{
   right: 26px;
}
.brxc-copy-id-to-class-wrapper span.bricks-svg-wrapper.create:hover,
.brxc-clone-class-wrapper span.bricks-svg-wrapper.create:hover,
.brxc-copy-id-to-class-wrapper span.bricks-svg-wrapper.cancel:hover,
.brxc-clone-class-wrapper span.bricks-svg-wrapper.cancel:hover {
    opacity: 1;
}

.brxc-copy-id-to-class-wrapper .control.control-checkbox{
   margin-top: 8px;
}

.brxc-copy-id-to-class-wrapper .control.control-checkbox .control-inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 8px;
}
.brxc-copy-id-to-class-wrapper .control.control-checkbox label {
   color: var(--builder-color);
}

 /*--------------------------------------
 Codemirror
 --------------------------------------*/
 
 .CodeMirror-lint-tooltip,
 .CodeMirror-hints {
    z-index: 999999 !important;
 }
 #brxcPlainClassesOverlay .CodeMirror{
   min-height: 70px;
   max-height: 70px;
   position: sticky;
    top: -32px;
    z-index: 5;
    padding: 2px 6px;
 }
 #brxcPlainClassesOverlay.brxc-overlay__wrapper.sidebar .CodeMirror{
    top: -16px;
 }
 #brxcPlainClassesOverlay .cm-s-one-dark {
    background-color: var(--builder-gray-1);
 }
 
 #brxcPlainClassesOverlay .cm-s-one-dark .cm-tag {
    color: var(--builder-gray-f) !important;
 }

#brxcCSSOverlay .brxc-overlay__pannel-2 .CodeMirror{
    min-height: 300px;
}
#brxcCSSOverlay .brxc-ai-response-wrapper.remove-on-reset,
#brxcCSSOverlay .brxc-ai-response-wrapper.remove-on-reset > label,
#brxcCSSOverlay .brxc-ai-response-wrapper.remove-on-reset > label > .message.assistant{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#plainClassesSearchWrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
}

#plainClassesSearchOptionsCanvas {
   flex-basis: 100%;
}
#plainClassesMostUsedCanvas .brxc-overlay__action-btn-wrapper{
   margin-top: 8px;
}
#plainClassesMostUsedCanvas .brxc-overlay__action-btn-wrapper,
#plainClassesSearchResultsCanvas .brxc-overlay__action-btn-wrapper{
   flex-wrap: wrap;
}
#plainClassesMostUsedCanvas .brxc-overlay__action-btn-wrapper .no-result{
   color: var(--builder-color-description);
}

#brxcPlainClassesOverlay .brxc-overlay__action-btn-wrapper .load-more {
   white-space: nowrap;
   align-self: center;
   color: var(--builder-color);
   font-size: 14px;
   
}

 
 /*--------------------------------------
 Bricks Buider Controls
 --------------------------------------*/
 #bricks-panel-element [data-control=color] .bricks-control-popup .color-palette-selector{
   order: -1;
   margin: 0 0 30px;
   position: relative;
 }
 #bricks-panel-element [data-control=color] .bricks-control-popup .color-palette-selector:before{
   background-color: var(--builder-bg);
   bottom: -15px;
   content: "";
   height: 1px;
   left: -15px;
   position: absolute;
   right: -15px;
}
#bricks-panel-element [data-control=color] .bricks-control-popup .color-modes{
   margin: 0;
}
#bricks-panel-element [data-control=color] .bricks-control-popup .color-modes:before{
   content: none;
}

#bricks-panel-element [data-control=color] .bricks-control-popup .color-palette {
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 5px !important;
    ;
 }
 
 #bricks-panel-element [data-control=color] .bricks-control-popup .color-palette li.color {
    padding: 0px !important;
    aspect-ratio: 1;
    display: flex;
 }
 
 #bricks-panel-element [data-control=color] .bricks-control-popup .color-palette li.color div.color-button {
    position: relative;
 }
 
 #bricks-panel-element [data-control=border] [controlkey=radius] .handle>div[data-control="number"],
 #bricks-panel-element [data-control=spacing][data-type=dimensions] .handle>div[data-control="number"],
 .bricks-control-popup .sliders .filter {
    position: relative;
 }
 
 #bricks-panel-element li:not([data-controlkey="query"]) [data-control=text] input.has-dynamic-picker {
    padding-right: 80px !important;
 }

 #bricks-panel-element [data-control=textarea] textarea{
    padding-right: 30px !important;
 }

 
 /*--------------------------------------
 Toolbar
 --------------------------------------*/
 
 #bricks-toolbar li.enabled {
    color: var(--builder-color-accent);
 }
 
 #bricks-toolbar li.enabled i {
    opacity: 1 !important;
    color: var(--builder-color-accent);
 }
 
 /*--------------------------------------
 Toggles
 --------------------------------------*/

 .variable-picker-button *{
   pointer-events: none;
 }
 
 .brxc-toggle-lorem,
 .brxc-toggle-ai,
 #bricks-panel-element [data-controlkey="_cssSuperPowerCSS"] .brxc-action > *,
 #brxc-sticky-css [data-controlkey="_cssStickyCSS"] .brxc-action > *{
    padding: 9px;
    display: flex;
    height: 15px;
    align-items: center;
    justify-content: center;
    width: 15px;
    border-radius: var(--builder-border-radius);;
    background-color: var(--builder-bg-3);
    cursor: pointer;
 }
 #bricks-panel-element [data-controlkey="_cssSuperPowerCSS"] .brxc-action > *,
 #brxc-sticky-css [data-controlkey="_cssStickyCSS"] .brxc-action > * {
   height: 24px;
   width: 24px;
   border-radius: unset;
   border-top-left-radius: var(--builder-border-radius);
   border-top-right-radius: var(--builder-border-radius);
   background-color: var(--builder-bg-2);
}
#bricks-panel-element [data-controlkey="_cssSuperPowerCSS"] .brxc-action > * * ,
#brxc-sticky-css [data-controlkey="_cssStickyCSS"] .brxc-action > * *{
   pointer-events: none;
}
 
 
 .brxc-toggle-ai {
    aspect-ratio: 1;
    padding: 10px;
 }
 #bricks-panel-element [data-control=textarea] .brxc-toggle-ai[data-balloon-pos=top-right]:before {
    border-left-color: var(--bricks-tooltip-bg);
    border-top-color: transparent !important;
    right: unset;
    left: 0;
    top: 50%;
    transform: translate(-100%,-50%);
}
#bricks-panel-element [data-control=textarea] .brxc-toggle-ai[data-balloon-pos=top-right]:after {
    right: unset;
    left: -7px;
    top: 50%;
    transform: translate(-100%,-50%);
}
 
 .brxc-toggle-ai .ai-wrapper {
    display: flex;
 }
 
 .brxc-toggle-ai .ai-wrapper span.ai-text {
    font-size: 10px;
 }
 
 .brxc-toggle-lorem {
    height: 20px;
    width: 20px;
    padding: 2px;
 }
 .brxc-icon-wrapper{
   position: absolute;
   top: 6px;
   right: 5px;
   display: flex;
   flex-direction: column;
   gap: 5px;
 }
 .dynamic-tag-picker-button ~ .brxc-icon-wrapper{
   top: 32px;
 }

 #bricks-panel-element [data-control=text]  .brxc-icon-wrapper{
   top: 6px;
   right: 30px;
   padding-left: 6px;
   display: flex;
   flex-direction: row;
   overflow: visible;
 }

 #bricks-panel-element [data-control=textarea] .brxc-toggle-lorem[data-balloon-pos=top-right]:before {
    border-left-color: var(--bricks-tooltip-bg);
    border-top-color: transparent !important;
    right: unset;
    left: 0;
    top: 50%;
    transform: translate(-100%,-50%);
}
#bricks-panel-element [data-control=textarea] .brxc-toggle-lorem[data-balloon-pos=top-right]:after {
    right: unset;
    left: -7px;
    top: 50%;
    transform: translate(-100%,-50%);
}

 .brxc-toggle-lorem .lorem-wrapper,
 .brxc-toggle-ai * {
    pointer-events: none;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
 }
 
 .brxc-toggle-lorem:hover,
 .brxc-toggle-ai:hover {
    background-color: var(--builder-bg-accent);
    color: var(--builder-color-accent);
    opacity: 1;
 }
 
 .brxc-toggle-ai:hover .ai-wrapper span.ai-text {
    color: var(--builder-color-accent);
 }
 
 .brxc-toggle-lorem .lorem-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 2.5px;
    gap: 2.5px;
    justify-content: center;
 }
 
 .brxc-toggle-lorem .lorem-wrapper .lorem-line {
    height: 1px;
    width: 100%;
    background-color: var(--builder-gray-e);
 }
 
 .brxc-toggle-lorem:hover .lorem-wrapper .lorem-line {
    background-color: var(--builder-color-accent);
 }
 
 .brxc-toggle-lorem .lorem-wrapper .lorem-line.lorem-line-3 {
    width: 60%;
 }
 

 .brxc-toggle-spacing {
   position: absolute;
   top: -23px;
   right: 27px;
   cursor: pointer;
   opacity: .33;
}
.brxc-toggle-spacing:hover {
   opacity: 1;
}
.brxc-toggle-spacing *  {
   pointer-events: none;
}



/* ----------------
Strict Editor View
---------------- */

.brxc-toggle-strict-editor, .brxc-toggle-strict-editor-disabled{
   position: absolute;
   cursor: pointer;
   top: 10px;
}
.brxc-toggle-strict-editor-disabled{
   right: -22px;
   
}
.brxc-toggle-strict-editor-disabled .fa-eye{
   opacity: .5
}
.brxc-toggle-strict-editor-disabled .fa-eye-slash{
   color: var(--bricks-color-secondary);
}  

.control-inner label ~ .brxc-toggle-strict-editor, 
.control-inner label ~ .brxc-toggle-strict-editor-disabled{
   top: 3px;
}
.control-inner.control-inline label ~ .brxc-toggle-strict-editor,
.control-inner.control-inline label ~ .brxc-toggle-strict-editor-disabled{
   top: unset;
}

.brxc-toggle-strict-editor i{
   color: var(--builder-color-accent);
}
.brxc-toggle-strict-editor i.fa-toggle-off {
   color: var(--bricks-color-secondary);
}


/* ---------------
MARGIN / PADDING EXPANDED
---------------- */
#bricks-panel-element [data-controlKey=_borderRadiusLogical] [data-control=spacing][data-type=spacing].variables-ui .handles {
   display: grid;
   gap: 0px;
   grid-template-columns: repeat(2, 1fr);
}

#bricks-panel-element [data-control=spacing][data-type=spacing].variables-ui .block-start,
#bricks-panel-element [data-control=spacing][data-type=spacing].variables-ui .block-end,
#bricks-panel-element [data-control=spacing][data-type=spacing].variables-ui .block-start-width,
#bricks-panel-element [data-control=spacing][data-type=spacing].variables-ui .block-end-width {
   grid-column: 2 / span 4;
}
[data-control=spacing][data-type=spacing].variables-ui .block-end,
[data-control=spacing][data-type=spacing].variables-ui .block-end-width {
   grid-row: 3
}
body.at-expand-spacing #bricks-panel-element [data-control=spacing][data-type=spacing].variables-ui .top,
body.at-expand-spacing #bricks-panel-element [data-control=spacing][data-type=spacing].variables-ui .bottom,
body.at-expand-spacing #bricks-panel-element [data-control=spacing][data-type=spacing].variables-ui .block-start,
body.at-expand-spacing #bricks-panel-element [data-control=spacing][data-type=spacing].variables-ui .block-end,
body.at-expand-spacing #bricks-panel-element [data-control=spacing][data-type=spacing].variables-ui .block-start-width,
body.at-expand-spacing #bricks-panel-element [data-control=spacing][data-type=spacing].variables-ui .block-end-width {
   grid-column: 1/span 6;
}
#bricks-panel-element [data-control=spacing][data-type=spacing].variables-ui .inline-start,
#bricks-panel-element [data-control=spacing][data-type=spacing].variables-ui .inline-start-width {
   grid-column: 1 / span 3;
   grid-row: 2;
}
#bricks-panel-element [data-control=spacing][data-type=spacing].variables-ui .inline-end,
#bricks-panel-element [data-control=spacing][data-type=spacing].variables-ui .inline-end-width {
   grid-column: 4 / span 3;
   grid-row: 2;
}
#bricks-panel-element [data-control=spacing][data-type=spacing].variables-ui .handle {
   position: relative;
}

body.at-expand-spacing #bricks-panel-element [data-control=number].has-variables>input {
   padding-inline-end: 26px;
}

 /*--------------------------------------
 Pseudo Element Shorcuts
 --------------------------------------*/
 #bricks-panel #bricks-panel-header .actions li  {
   position: relative;
}
#bricks-panel #bricks-panel-header .actions li  span::before{
   content: '';
   position: absolute;
   inset: 0 0 0 0;
}
 #bricks-panel #bricks-panel-header .actions li.active {
   outline: 1px solid;
   color: unset
}
#bricks-panel #bricks-panel-header .actions li.active.highlight {
   outline: 1px solid;
   color: var(--builder-color-accent)
}

#bricks-panel #bricks-panel-header .actions svg,
#bricks-panel #bricks-panel-header .actions i {
   height: 16px;
   display: flex;
   width: 16px;
   align-items: center;
   justify-content: center;
   fill: var(--builder-color);
}
#bricks-panel-header .actions li.highlight i  {
   opacity: .66;
}

#bricks-panel #bricks-panel-header .actions li.active.highlight svg,
#bricks-panel-header .actions li.active i,
#bricks-panel-header .actions li:hover i  {
   opacity: 1 !important;
}
#bricks-panel #bricks-panel-header .actions li.highlight svg{
   fill: var(--builder-color-accent);
}

#bricks-panel-header .actions i {
   font-size: 16px;
}
/*--------------------------------------
Feature Error
--------------------------------------*/

.brxc-feature-error__wrapper{
   display: grid;
   place-items: center;
   height: 100%;
}
.brxc-feature-error__container{
   display: flex;
   flex-direction: column;
   gap: 20px;
   text-align: center;
   color: var(--builder-color);
   max-width: 610px;
}
.brxc-feature-error__container i{
   font-size: 36px;
}
.brxc-feature-error__title-wrapper{
   display: flex;
   flex-direction: column;
   gap: 8px;
}
.brxc-feature-error__title{
   font-size: 20px;
}
.brxc-feature-error__desc strong.accent{
   color: var(--builder-color-accent);
}

.brxc-feature-error__container .brxc-overlay__action-btn.primary{
   align-self: center;
   margin-top: 10px;
}

/*--------------------------------------
Class Contextual Menu
--------------------------------------*/
#bricks-panel-element-classes .active-class.active input,
#bricks-panel-element-classes .active-selector.active input {
   margin-right: auto;
}
html body .class-contextual-menu-icon {
   display: flex !important;
   font-size: 16px;
   top: 0px;
   cursor: pointer;
   width: 20px;
   align-items: center;
   justify-content: center;
   position: relative;
}
html body .class-contextual-menu-icon:hover {
   color: var(--builder-color-accent)
}
.brxc-context-menu {
   background-color: #fff;
   border-radius: var(--builder-border-radius);
   box-shadow: 0 4px 20px rgba(0,0,0,.15);
   min-width: 220px;
   opacity: 0;
   position: fixed;
   user-select: none;
   visibility: hidden;
   z-index: -1
}

.brxc-context-menu.show {
   opacity: 1;
   visibility: visible;
   z-index: 100000!important
}

.brxc-context-menu ul {
   list-style-type: none;
   margin: 0;
   padding: 0
}

.brxc-context-menu ul li {
   align-items: center;
   color: var(--bricks-text-medium);
   cursor: pointer;
   display: flex;
   font-family: sans-serif;
   font-size: 12px;
   font-weight: 700;
   gap: 10px;
   justify-content: space-between;
   letter-spacing: .2px;
   line-height: 36px;
   padding: 0 1em
}
.brxc-context-menu ul li.disable{
   opacity: .5;
}

.brxc-context-menu ul li:first-child {
   border-top-left-radius: var(--builder-border-radius);
   border-top-right-radius: var(--builder-border-radius)
}

.brxc-context-menu ul li:last-child {
   border-bottom-left-radius: var(--builder-border-radius);
   border-bottom-right-radius: var(--builder-border-radius)
}

.brxc-context-menu ul li:hover:not(.convert) {
   background-color: var(--builder-gray-3);
   color: #fff
}

.brxc-context-menu ul li:hover:not(.convert).delete {
   background-color: var(--bricks-text-danger)
}

.brxc-context-menu ul li:hover:not(.convert).save {
   background-color: var(--bricks-text-success)
}

.brxc-context-menu ul li.sep {
   border-bottom: 1px solid var(--builder-gray-d)
}

.brxc-context-menu ul li.disabled {
   background-color: inherit;
   color: var(--bricks-text-light);
   cursor: default;
   pointer-events: none!important
}

.brxc-context-menu ul li.convert {
   cursor: default
}

.brxc-context-menu ul li a {
   width: 100%
}

.brxc-context-menu ul li span {
   color: inherit;
   display: inline-block;
   position: relative
}

.brxc-context-menu ul li .label {
   flex-grow: 1;
   margin-right: 40px;
}

.brxc-context-menu ul li .action {
   background-color: var(--builder-gray-e);
   border-radius: var(--builder-border-radius);
   line-height: 20px;
   text-align: center;
   width: 20px
}

.brxc-context-menu ul li:hover .action {
   background-color: var(--builder-gray-4)
}

.brxc-context-menu ul li:hover .action:hover {
   background-color: var(--builder-color-accent);
   color: var(--builder-color-accent-inverse)
}

.brxc-context-menu ul li .shortcut {
   font-size: 11px;
   opacity: .5;
   text-transform: uppercase;
}

.brxc-context-menu ul li .buttons {
   cursor: pointer;
   display: flex;
   font-size: 14px;
   gap: 8px
}

/*--------------------------------------
Quick Remote Templates
--------------------------------------*/

body.at-quick-remote-template{
   margin-left: var(--at-remote-template-margin);
}

body.at-quick-remote-template #bricks-panel{
   display: none;
}

#brxcRemoteTemplatesOverlay{
   top: 0px;
   user-select: none;
   right: unset;
}
body.admin-bar #brxcRemoteTemplatesOverlay{
   top: 32px;
}
#brxcRemoteTemplatesOverlay .brxc-overlay__close-btn{
   width: 26px;
   top: 7px;
}

#brxcRemoteTemplatesOverlay .brxc-overlay__inner {
   height: 100vh;
}

body.admin-bar #brxcRemoteTemplatesOverlay .brxc-overlay__inner {
   height: calc(100vh - 32px);
}
#brxcRemoteTemplatesOverlay[data-active="true"] {
   z-index: initial;
}
#brxcRemoteTemplatesUI {
   display: flex;
   flex-direction: column;
   height: 100%;
}
#brxcRemoteTemplatesUI__header {
   width: 100%;
   overflow: auto;
}
#brxcRemoteTemplateHeaderWrapper {
   display: flex;
   gap: 5px;
   padding-bottom: 12px;
   width: 100%;
}
#brxcRemoteTemplatesUI__header .brxc-overlay__action-btn {
   border: none;
   font-size: 14px;
   padding: 4px 12px !important;
   flex: none;
}
#brxcRemoteTemplatesUI__header .brxc-overlay__action-btn {
   align-self: unset;
   display: flex;
   align-items: center;
}
#brxcRemoteTemplatesUI__header .brxc-overlay__action-btn.secondary {
   cursor: pointer;
   background-color: var(--builder-bg-2);
   display: flex;
   align-items: center;
}
#brxcRemoteTemplatesUI__header .brxc-overlay__action-btn[data-balloon="1-col"] {
   margin-left: 20px; 
}
#brxcRemoteTemplatesUI__header .brxc-overlay__action-btn[data-balloon="1-col"] i{
   rotate: 90deg;
}
#brxcRemoteTemplatesUI__header .brxc-overlay__action-btn.secondary:hover {
   color: var(--builder-color);
   background-color: var(--builder-bg-3);
}
#brxcRemoteTemplatesUI__header .brxc-overlay__action-btn.primary {
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
   pointer-events: none;
}
#brxcRemoteTemplatesUI__main{
   display: grid;
   grid-template-columns: 180px auto;
   height: calc(100% - 44px);
   flex: 1;
   position: relative;
   overflow: hidden;
}
#brxcRemoteTemplatesUI__loader {
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: var(--builder-bg);
   z-index: -1;
   pointer-events: none;
}
#brxcRemoteTemplatesUI__loader.active {
   z-index: 9999;
}
#brxcRemoteTemplatesUI__left{
   margin-top: 40px;
   overflow: hidden;
   max-height: 100%;
}
#brxcRemoteTemplatesUI__left .brxc-manager__left-menu {
   overflow: scroll;
   max-height: 100%;
}
#brxcRemoteTemplatesUI__left .brxc-manager__left-menu li {
   padding: 0px 10px 0 10px;
}
#brxcRemoteTemplatesUI__left .brxc-manager__left-menu li *{
   pointer-events: none;
}

#brxcRemoteTemplatesUI__panel {
   background: var(--builder-bg-2);
   border-radius: var(--builder-border-radius);
   height: 100%;
    overflow: hidden;
}
#brxcRemoteTemplatesUI__panel .brxc-overlay__search-box {
   margin-bottom: 0px;
}
#brxcRemoteTemplatesUI__panel .brxc-overlay__search-box input[type="text"]{
   background: var(--builder-bg-3);
}
#brxcRemoteTemplatesUI__panel-canvas{
   height: calc(100% - 40px);
   overflow: scroll;
}
#brxcRemoteTemplatesPanelWrapper{
   display: block;
   padding: 16px;
   column-count: 1;
   gap: 16px;
}

#brxcRemoteTemplatesPanelWrapper > div {
   cursor: pointer;
   opacity: .8;
   transition: 100ms all;
   transition-timing-function: cubic-bezier(.4,0,.2,1);
   border-radius: var(--builder-border-radius);
   overflow: hidden;
   height: 100%;
   min-height: 150px;
   display: flex;
   flex-direction: column;
   background-color: var(--builder-bg-3);
   margin-bottom: 16px;
}

#brxcRemoteTemplatesPanelWrapper > div.disable .brxc-template__img-wrapper::after {
   content: "";
   position: absolute;
   width: 16px;
   height: 16px;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   border: 4px solid transparent;
   border-top-color: var(--builder-color-accent);
   border-radius: 50%;
   animation: button-loading-spinner 1s ease infinite;
}
#brxcRemoteTemplatesPanelWrapper > div.disable img {
   opacity: .2;
}
#brxcRemoteTemplatesPanelWrapper > div.disable,
#brxcRemoteTemplatesPanelWrapper > div.disable * {
   pointer-events: none;
}
#brxcRemoteTemplatesPanelWrapper > div:hover{
   scale: 1.01;
   opacity: 1;
}
#brxcRemoteTemplatesPanelWrapper .brxc-template__img-wrapper {
   position: relative;
   flex-grow: 1;
   display: flex;
   align-items: center;
}
#brxcRemoteTemplatesPanelWrapper .brxc-template__img-wrapper img{
   object-fit: cover;
   object-position: top;
   width: 100%;
}

#brxcRemoteTemplatesPanelWrapper .brxc-template-footer {
   background-color: var(--builder-bg-3);
   padding: 8px 12px;
   color: var(--builder-color);
   font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
   transition: .1s;
   white-space: nowrap;
   width: 100%;
   flex-shrink: 0;
   border-top: 1px solid var(--builder-bg-2);
   z-index: 1;
   overflow: visible;
}
#brxcRemoteTemplatesPanelWrapper .brxc-template-footer__label {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   font-size: 13px;
}
#brxcRemoteTemplatesPanelWrapper .brxc-template-footer__label span *{
   pointer-events: none;
}
#brxcRemoteTemplatesPanelWrapper .brxc-template-footer__label .save-template {
   border: 1px solid #fff;
   padding: 5px;
   font-size: 10px;
   border-radius: var(--builder-border-radius);
   color: #fff;
   opacity: .6;
}
#brxcRemoteTemplatesPanelWrapper .brxc-template-footer__label .save-template:hover {
   opacity: 1;
}

#brxcRemoteTemplatesUI__panel .notification,
#brxcClassContentCanvas .notification{
   align-items: center;
   display: flex;
   flex-direction: column;
   font-size: 16px;
   font-weight: 700;
   gap: 30px;
   height: 100%;
   justify-content: center;
   text-align: center;
   color: var(--builder-color);
   max-height: 400px;
}

#brxcRemoteTemplatesUI__panel .notification svg,
#brxcClassContentCanvas .notification svg{
   font-size: 60px;
   margin-bottom: 15px;
   opacity: .5;
}

@media screen and (min-width: 1800px){
   :root{
      --at-remote-template-margin: min(1000px, 45vw);
   }
   #brxcRemoteTemplatesPanelWrapper.layout-2-col {
      column-count: 2;
   }
   #brxcRemoteTemplateHeaderWrapper > div:first-child{
      margin-left: auto;
   }
}
@media screen and (max-width: 1400px){
   #brxcRemoteTemplatesUI__left{
      display: none;
   }
   #brxcRemoteTemplatesUI__panel {
      grid-column: 1 / 3;
   }
}
/*--------------------------------------
Locks Elements Order in Structure Panel
--------------------------------------*/

#bricks-structure #bricks-panel-header li .ti-lock{
   color: var(--bricks-text-danger);
}

body.locked-elements #bricks-structure .element{
   cursor: auto !important;
}

/*--------------------------------------
Alert Message
--------------------------------------*/

 #brxc-alert-message {
   background-color: var(--bricks-text-success);
   border-radius: var(--builder-border-radius);
   box-shadow: 4px 4px 8px -2px rgba(0,0,0,.25);
   color: #fff;
   font-size: 21px;
   left: 50%;
   line-height: 50px;
   opacity: 0;
   padding: 0 30px;
   position: fixed;
   text-align: center;
   text-transform: uppercase;
   top: 50%;
   transform: translate(-50%,-50%);
   transition: all .1s;
   user-select: none;
   visibility: hidden;
   white-space: nowrap;
   z-index: 2003;
}
#brxc-alert-message.active{
   opacity: 1;
   visibility: visible;
}
/*--------------------------------------
Panel Shortcuts Settings
--------------------------------------*/
.brxc-shortcut-balloon.component{
   --bricks-tooltip-bg: var(--builder-bg-component);
   --bricks-tooltip-text: var(--builder-color-component);
}
.brxc-shortcut-balloon{
   position: absolute;
   background: var(--bricks-tooltip-bg);
   border-radius: var(--builder-border-radius);
   font: 12px Inter,sans-serif;
   font-size: 11px;
   font-weight: 700;
   z-index: 99999999;
   padding: 2px 8px;
   overflow: visible;
   color: var(--bricks-tooltip-text);
}
.brxc-shortcut-balloon::before {
   border: 4px solid transparent;
   border-left: 4px solid var(--bricks-tooltip-bg);
   content: "";
   height: 0;
   width: 0;
   position: absolute;
   right: -15px;
   top: 50%;
   transform: translate(-7px, -50%);
   border-top-color: transparent;
   z-index: 1002;
}

#brxcShortcutsSettings {
   position: absolute;
   top: 115px;
   right: 60px;
   bottom: 103px;
   width: 400px;
   background-color: var(--builder-bg);
   z-index: 9999;
   box-shadow: 0px 10px 20px #000;
   border-radius: var(--builder-border-radius);
   font: 12px Inter, sans-serif;
   font-weight: 500;
   letter-spacing: .2px;
   overflow: hidden;
   text-overflow: ellipsis;
   user-select: none;
   white-space: nowrap;
   color: var(--builder-color);
   overflow: scroll;
   overscroll-behavior: none;
   scrollbar-width: none;
}
#brxcShortcutsSettings::-webkit-scrollbar {
   background: transparent;
   height: 0;
   width: 0;
}


#brxcShortcutsSettingsHeader {
   --size: 50px;
   display: flex;
   justify-content: space-between;
   gap: 1px;
   background-color: var(--builder-bg-2);
   position: sticky;
   top: 0;
   z-index: 1;
}
#brxcShortcutsSettingsHeader .title{
   flex: 1;
   font-size: 15px;
   font-weight: 700;
   letter-spacing: .4px;
   line-height: var(--size);
   margin: 0;
   padding: 0 20px;
   position: relative;
   text-transform: uppercase;
}
#brxcShortcutsSettingsHeader .close,
#brxcShortcutsSettingsHeader .save{
   align-items: center;
    background-color: var(--builder-bg-3);
    cursor: pointer;
    display: flex;
    height: var(--size);
    justify-content: center;
    width: var(--size);
}
#brxcShortcutsSettingsHeader .close >*,
#brxcShortcutsSettingsHeader .save > *{
   opacity: .5;
}
#brxcShortcutsSettingsHeader .close:hover >*,
#brxcShortcutsSettingsHeader .save:hover > *{
   opacity: 1;
}

#brxcShortcutsSettingsMain{
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 20px;
}
#brxcShortcutsSettingsActive,
#brxcShortcutsSettingsInactive{
   display: flex;
   flex-direction: column;
   gap: 4px;
}
#brxcShortcutsSettingsInactive{
   opacity: .8;
}
#brxcShortcutsSettingsActive{
   margin-bottom: 24px;
}
#brxcShortcutsSettingsActive > div {
   display: flex;
   align-items: center;
   gap: 12px;
}
#brxcShortcutsSettingsActive > div .handle{
   opacity: 0.5;
   font-size: 16px;
   cursor: pointer;
}
#brxcShortcutsSettingsActiveLabel,
#brxcShortcutsSettingsInactiveLabel {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
}
#brxcShortcutsSettingsActiveLabel span:first-child,
#brxcShortcutsSettingsInactiveLabel span:first-child{
   color: var(--builder-color);
   opacity: 0.3;
   font-weight: 800;
   text-transform: uppercase;
   font-size: 14px;
   margin-bottom: 4px;
   display: block;
}
#brxcShortcutsSettingsActiveLabel span:last-child,
#brxcShortcutsSettingsInactiveLabel span:last-child{
   cursor: pointer;
}
#brxcShortcutsSettingsActiveLabel span:last-child:hover,
#brxcShortcutsSettingsInactiveLabel span:last-child:hover{
   color: var(--builder-color-accent);
}
#brxcShortcutsSettings [data-name],
#brxcShortcutsSettings [data-component-id] {
   display: flex;
   align-items: center;
   gap: 12px;
   background: var(--builder-bg-2);
   padding: 10px;
   border-radius: var(--builder-border-radius);
   flex: 1;
}
#brxcShortcutsSettings [data-component-id]{
   color: var(--builder-color-component);
}

#brxcShortcutsSettings [data-name] i.icon,
#brxcShortcutsSettings [data-component-id] i.icon{
   font-size: 16px;
   opacity: .5;
}
#brxcShortcutsSettings [data-name] i.toggle,
#brxcShortcutsSettings [data-component-id] i.toggle{
   margin-left: auto;
   font-size: 16px;
   cursor: pointer;
}

#brxcShortcutsSettings [data-name] i.toggle.fa-toggle-on,
#brxcShortcutsSettings [data-component-id] i.toggle.fa-toggle-on{
   color: var(--builder-color-accent);
}
#brxcShortcutsSettings [data-name] i.toggle.fa-toggle-off,
#brxcShortcutsSettings [data-component-id] i.toggle.fa-toggle-off{
   color: var(--bricks-color-secondary);
}


/*--------------------------------------
Panel Shortcuts
--------------------------------------*/

body.at-has-panel-shortcuts #bricks-panel-element[data-active="true"]:not(.instance,.property) {
   height: 100%;
    display: flex;
    flex-direction: column;
    max-width: 100%;
}
body.at-has-panel-shortcuts #bricks-panel-element:not(.instance,.property) > * {
    width: calc(100% - 40px);
    margin-left: 40px
}
body.at-has-panel-shortcuts #bricks-panel-element:not(.instance,.property) #bricks-panel-header {
   min-height: unset;
}
body.at-has-panel-shortcuts #bricks-panel-element:not(.instance,.property) > .bricks-panel-controls {
   padding-bottom: 50px;
   flex-grow: 1;
}
body.at-has-panel-shortcuts #bricks-panel-element:not(.instance,.property) > .brxce-panel-shortcut__wrapper,
body.at-has-shortcuts-sidebar #bricks-structure .brxce-panel-shortcut__wrapper{
    height: calc(100vh - var(--at-topbar-height));
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    background-color: #1e2225;
    grid-column: 1 /2;
    grid-row: 1 / 999;
    z-index: 1003;
    position: relative;
    order: -1;
    width: 40px;
    position: fixed;
    margin: 0;
    z-index: 2002;
}
body.at-has-panel-shortcuts.admin-bar #bricks-panel-element:not(.instance,.property) > .brxce-panel-shortcut__wrapper,
body.admin-bar.at-has-shortcuts-sidebar #bricks-structure .brxce-panel-shortcut__wrapper{
    height: calc(100vh - 40px - var(--wp-admin--admin-bar--height))
}
body.at-has-panel-shortcuts #bricks-panel.minimize #bricks-panel-element:not(.instance,.property) > .brxce-panel-shortcut__wrapper{
   display: none;
}
body.at-has-shortcuts-sidebar #bricks-structure{
   display: grid;
   grid-template-columns: calc(100% - 40px) 40px;
   grid-template-rows: auto auto auto 1fr;
}

#bricks-structure #bricks-panel-header{
   position: sticky;
}
#bricks-structure main.panel-content{
   position: relative;
   margin-top: 1px;
}
body.at-has-shortcuts-sidebar #bricks-structure #bricks-panel-header,
body.at-has-shortcuts-sidebar #bricks-structure main.panel-content{
   grid-column: 1/2;
   height: fit-content;
}
#bricks-structure .panel-content > .bricks-structure-list {
   min-height: calc(100vh - 120px);
}
body.focus-mode #bricks-structure .panel-content > .bricks-structure-list {
   min-height: calc(100vh - 170px);
}
body.at-has-shortcuts-sidebar #bricks-structure .brxce-panel-shortcut__wrapper{
   grid-column: 2/3;
   position: fixed;
   right: 0;
}
body.draggable-structure.at-has-shortcuts-sidebar #bricks-structure .brxce-panel-shortcut__wrapper{
   right: calc(100% - var(--right, var(--right-default)) - var(--width, var(--width-default)));
   top: var(--top, 10%);
   max-height: var(--max-height, 80vh);
   height: calc(100% - 40px);
}
body.at-has-shortcuts-sidebar #bricks-structure .brxce-panel-shortcut__container{
   padding-top: 64px;
   display: flex;
   flex-direction: column;
   height: 100%;
   flex: 1;
   overflow: scroll;
   overscroll-behavior: none;
   scrollbar-width: none;
}
body.at-has-shortcuts-sidebar #bricks-structure .brxce-panel-shortcut__containers::-webkit-scrollbar {
   background: transparent;
   height: 0;
   width: 0;
}

body.at-has-shortcuts-sidebar #bricks-structure .brxce-panel-shortcut__wrapper #brxcKeyBoardShortcuts{
   margin-top: auto;
   background: var(--builder-bg-2);
}
body.at-has-shortcuts-sidebar #bricks-structure .brxce-panel-shortcut__wrapper #brxcKeyBoardShortcuts.active{
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
}
.brxce-panel-shortcut__container{
    position: relative;
}

.brxce-panel-shortcut__container li.has-settings:before {
   content: '';
   position: absolute;
   left: -7px;
   opacity: 0.5;
   border-width: 0px;
   padding: 15px 11px;
   border-left: 3px solid var(--builder-color-accent);
   height: 100%;
}
.brxce-panel-shortcut__container li.has-settings[data-panel-group="_attributes"]:before,
.brxce-panel-shortcut__container li.has-settings[data-panel-group="_classesAndId"]:before{
   border-left: 3px solid var(--builder-color-highlight);
}

body.at-has-shortcuts-sidebar #bricks-structure .brxce-panel-shortcut__container .brxc-right-sidebar-shortcuts.custom-components .bricks-svg-wrapper{
   padding: 6px;
   background-color: var(--builder-bg-2);
   border-radius: 50%;
   aspect-ratio: 1;
   min-width: 26px;
   max-width: 26px;
   min-height: 26px;
   max-height: 26px;

}body.at-has-shortcuts-sidebar #bricks-structure .brxce-panel-shortcut__container .brxc-right-sidebar-shortcuts.custom-components i{
   font-size: 14px;
}


#bricks-structure .structure-item > .title{
   overflow: hidden;
   border-radius: var(--builder-border-radius);
}
/* === Base Common Styles === */
#bricks-structure .element[data-sci="style"] > .structure-item::before,
#bricks-structure .element[data-sci="both"] > .structure-item::before,
#bricks-structure .element[data-sci="class"] > .structure-item::after,
#bricks-structure .element[data-sci="both"] > .structure-item::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 100%;
  top: 0;
  bottom: 0;
  z-index: 1;
}

/* === Direction & Border Radius === */
body.at-indicators-color-colored{
   --at-left-structure-indicator: var(--builder-color-highlight);
   --at-right-structure-indicator: var(--bricks-color-secondary);
}
body.at-indicators-color-grey{
   --at-left-structure-indicator: var(--builder-gray-9);
   --at-right-structure-indicator: var(--builder-gray-9);
}
#bricks-structure .element[data-sci="style"] > .structure-item::before,
#bricks-structure .element[data-sci="both"] > .structure-item::before {
  right: 0;
  border-radius: 0 var(--builder-border-radius) var(--builder-border-radius) 0;
  background: var(--at-right-structure-indicator);
}

#bricks-structure .element[data-sci="class"] > .structure-item::after,
#bricks-structure .element[data-sci="both"] > .structure-item::after {
  left: 0;
  border-radius: var(--builder-border-radius) 0 0 var(--builder-border-radius);
  background: var(--at-left-structure-indicator);
}

body.at-has-panel-shortcuts #bricks-panel-element > .brxce-panel-shortcut__wrapper li,
body.at-has-shortcuts-sidebar #bricks-structure .brxce-panel-shortcut__wrapper li {
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   position: relative;
   font-size: 16px;
   height: 55.7px;
}
body.at-has-panel-shortcuts #bricks-panel-element > .brxce-panel-shortcut__wrapper li * {
   pointer-events: none;
}
body.at-has-shortcuts-sidebar #bricks-structure .brxce-panel-shortcut__wrapper li[data-component-id] {
   color: var(--builder-color-component);
}
body.at-has-panel-shortcuts #bricks-panel-element > .brxce-panel-shortcut__wrapper i,
body.at-has-panel-shortcuts #bricks-panel-element > .brxce-panel-shortcut__wrapper .bricks-svg-wrapper,
body.at-has-shortcuts-sidebar #bricks-structure .brxce-panel-shortcut__wrapper i {
    width: 100%;
    text-align: center;
    opacity: .5;
}
body.at-has-panel-shortcuts #bricks-panel-element > .brxce-panel-shortcut__wrapper li.active,
body.at-has-panel-shortcuts #bricks-panel-element > .brxce-panel-shortcut__wrapper li:hover,
body.at-has-shortcuts-sidebar #bricks-structure .brxce-panel-shortcut__wrapper li.active,
body.at-has-shortcuts-sidebar #bricks-structure .brxce-panel-shortcut__wrapper li:hover {
    background-color: var(--builder-bg);
}
body.at-has-panel-shortcuts #bricks-panel-element > .brxce-panel-shortcut__wrapper li.active i,
body.at-has-panel-shortcuts #bricks-panel-element > .brxce-panel-shortcut__wrapper li:hover i,
body.at-has-panel-shortcuts #bricks-panel-element > .brxce-panel-shortcut__wrapper li.active .bricks-svg-wrapper,
body.at-has-panel-shortcuts #bricks-panel-element > .brxce-panel-shortcut__wrapper li:hover .bricks-svg-wrapper,
body.at-has-panel-shortcuts #bricks-panel-element > .brxce-panel-shortcut__wrapper li.active.has-settings:before,
body.at-has-panel-shortcuts #bricks-panel-element > .brxce-panel-shortcut__wrapper li:hover.has-settings:before,
body.at-has-shortcuts-sidebar #bricks-structure .brxce-panel-shortcut__wrapper li.active i,
body.at-has-shortcuts-sidebar #bricks-structure .brxce-panel-shortcut__wrapper li:hover i{
    opacity: 1;
}
body.at-has-panel-shortcuts #bricks-panel-element > .brxce-panel-shortcut__wrapper li.active i,
body.at-has-panel-shortcuts #bricks-panel-element > .brxce-panel-shortcut__wrapper li.active .bricks-svg-wrapper,
body.at-has-shortcuts-sidebar #bricks-structure .brxce-panel-shortcut__wrapper li.active i{
    color:var(--builder-color-accent);
}

.brxce-panel-shortcut__container li .keyboard-shortcut{
   position: absolute;
   top: 5px;
   left: 5px;
   border-radius: 50%;
   background-color: var(--builder-bg-2);
   color: var(--builder-color);
   width: 18px;
   aspect-ratio: 1;
   align-items: center;
   justify-content: center;
   font-size: 10px;
   font-weight: 600;
   display: none;
}
#bricks-panel .brxce-panel-shortcut__container li .keyboard-shortcut{
   left: unset;
   right: 5px;
}
.brxce-panel-shortcut__container.shortcuts-active li .keyboard-shortcut{
   display: flex;
}


.bricks-panel-controls ul.control-groups.hidden-accordion-panels .control-group{
   display: none;
}
body.at-has-panel-shortcuts #bricks-panel-element .control-groups.hidden-accordion-panels{
   height: 100%;
}
body.at-has-panel-shortcuts #bricks-panel-element .control-group.open[data-control-group="_css"]{
   height: 100%;
}
.bricks-panel-controls ul.control-groups.hidden-accordion-panels .control-group.open{
   display: flex;
   flex-direction: column;
}
/*--------------------------------------
Style Overview
--------------------------------------*/
.brxc-overlay__panel-switcher-wrapper.style-overview{
   padding: 0;
}
#brxcCSSContainer{
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow: hidden;
}
#brxcStyleOverviewCanvas .brxc-header-icons {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 35px;
   background-color: var(--builder-bg-3);
   margin-bottom: 1.2rem;
   padding: 10px;
   border-radius: 0.5rem;
   color: var(--builder-color);
   cursor: pointer;
}
#brxcStyleOverviewCanvas .brxc-header-icons.active {
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
}
#brxcStyleOverviewCanvas {
   flex-grow: 1;
   overflow: scroll;
}
#brxcStyleOverviewCanvas .brxc-overlay__panel-switcher-wrapper {
   padding: 0px;
   margin-left: auto;
   flex-shrink: 0;
}
#brxcStyleOverviewWrapper,
#brxcStyleOverviewWrapper > *{
   overflow: scroll;
   min-height: 100%;
   display: flex;
   width: 100%;
   flex: 1;
}

#brxcStyleOverviewWrapper.brxc-preview{
   display: grid;
   grid-template-columns: auto 400px;
   gap: 40px;
   height: 100%;
}
#brxcStyleOverviewCanvas #brxcStyleOverviewPreview {
   margin: 0;
   padding: 10px;
   display: flex;
   flex-direction: column;
   border-radius: var(--builder-border-radius);
   background-color: var(--builder-bg-2);
}
#brxcStyleOverviewCanvas #brxcStyleOverviewPreview li{
   opacity: 1;
   padding: 4px 6px 4px 10px;
   font-size: 13px;
   gap: 10px;
   background-color: var(--builder-bg-3);
   margin-bottom: 4px;
   position: relative;
   overflow: hidden;
}
#brxcStyleOverviewCanvas #brxcStyleOverviewPreview li.is-component{
   color: var(--builder-color-component) !important;
}
#brxcStyleOverviewCanvas #brxcStyleOverviewPreview li.is-component:hover{
   background-color: var(--builder-bg-component);
}
#brxcStyleOverviewCanvas #brxcStyleOverviewPreview li[data-has-style="true"]::before{
   content: '';
   position: absolute;
   bottom: 0;
   top: 0;
   right: 0;
   width: 3px;
   background-color: var(--bricks-color-secondary);
   opacity: .5;
}
#brxcStyleOverviewCanvas #brxcStyleOverviewPreview li[data-has-class="true"]::after{
   content: '';
   position: absolute;
   bottom: 0;
   top: 0;
   left: 0;
   width: 3px;
   background-color: var(--builder-color-highlight);
   opacity: .5;
}
#brxcStyleOverviewCanvas #brxcStyleOverviewPreview li:hover, #brxcStyleOverviewCanvas #brxcStyleOverviewPreview li.active{
   background-color: var(--builder-gray-5);
}
#brxcStyleOverviewCanvas #brxcStyleOverviewPreview li.active {
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
   pointer-events: none;
}
#brxcStyleOverviewCanvas #brxcStyleOverviewPreview li.active.is-component {
   background-color: var(--builder-bg-component);
}
#brxcStyleOverviewCanvas #brxcStyleOverviewPreview li .icon{
   opacity: .5;
}
#brxcStyleOverviewOverlay table,
#brxcClassManagerOverlay table{
   color: var(--builder-gray-c);
   text-align: center;
   margin-bottom: 16px;
   border-radius: 12px;
    overflow: hidden;
}
#brxcStyleOverviewOverlay table:last-of-type{
   margin-bottom: 0px;
}

#brxcStyleOverviewOverlay table thead,
#brxcClassManagerOverlay table thead{
   position: sticky;
   top: 0px;
   z-index: 1;
   height: 0.01px;
}
#brxcStyleOverviewOverlay table thead,
#brxcStyleOverviewOverlay table thead th,
#brxcClassManagerOverlay table thead,
#brxcClassManagerOverlay table thead th{
   background-color: var(--builder-gray-1);
}
#brxcStyleOverviewOverlay table tbody tr:nth-child(even),
#brxcClassManagerOverlay table tbody tr:nth-child(even){
   background: var(--builder-bg-3);
}
#brxcStyleOverviewOverlay .brxc-breakpoint-wrapper{
   display: flex;
   justify-content: center;
}
#brxcStyleOverviewOverlay .brxc-breakpoint-inner{
   display: flex;
   justify-content: center;
   gap: 3px;
   position: relative;
   width: fit-content;
}
#brxcStyleOverviewOverlay .brxc-breakpoint-settings{
   cursor: pointer;
}
#brxcStyleOverviewOverlay .brxc-breakpoint-settings *{
   pointer-events: none;
}
.brxc-breakpoint-menu-canvas{
   position: absolute;
    top: 0;
    left: calc(100% + 4px);
    z-index: 1;
}
.brxc-breakpoint-menu-canvas ul{
   padding: 0;
   margin: 0;
   list-style: none;
   background-color: var(--builder-bg);
}
.brxc-breakpoint-menu-canvas ul li{
   padding: 0px 12px;
   font-size: 12px;
   font-weight: 400;
   font-family: 'Inter';
   line-height: 36px;
   color: var(--builder-color);
   white-space: nowrap;
}
.brxc-breakpoint-menu-canvas ul li:hover{
   color: var(--builder-color-accent);
   background-color: var(--builder-bg-accent);
   cursor: pointer;
}

#brxcStyleOverviewOverlay table thead tr,
#brxcClassManagerOverlay table thead tr{
   background-color: var(--builder-gray-1);

}
#brxcStyleOverviewOverlay .brxc-input__label{
   color: var(--builder-color);
   background-color: var(--builder-bg-3);
   border: unset;
   opacity: var(--builder-placeholder-opacity);
 }
 #brxcStyleOverviewOverlay .brxc-input__label:hover{
   opacity: .5;
 }
 #brxcStyleOverviewOverlay .brxc-input__label.has-style{
   opacity: .8;
 }
 #brxcStyleOverviewOverlay .brxc-input__label.has-style:hover{
   opacity: 1;
 }

 #brxcStyleOverviewOverlay input:checked+label{
   color: var(--builder-color-accent);
    background-color: var(--builder-bg-accent);
    border-color: var(--builder-bg-accent);
    opacity: 1 !important;
 }
.brxc-style-overview__id-tag-wrapper{
   display: flex;
   align-items: center;
   gap: 12px;
}
#brxcCSSContainerCSS .brxc-style-overview__id-tag-wrapper{
   margin-bottom: 12px;
}
#brxcCSSContainerCSS .CodeMirror{
   margin-bottom: 12px;
}
#brxcCSSContainerCSS .CodeMirror-cursor {
   display: none !important;
}
.brxc-style-overview__id-tag-wrapper .disabled-style-icon-table {
   color: var(--bricks-text-danger);
   display: none;
   font-size: 10px;
   cursor: pointer;
}
#brxcStyleOverviewOverlay table.brxc-lock-id-styles .brxc-style-overview__id-tag-wrapper .disabled-style-icon-table {
   display: flex;
}
.brxc-style-overview__class-tag,
.brxc-style-overview__id-tag {
   background-color: rgb(40, 40, 146);
   line-height: 1.2em;
   cursor: pointer;
   font-weight: 400;
   color: var(--builder-color);
   text-overflow: ellipsis;
   white-space: nowrap;
   padding: 8px;
   border-radius: 4px;
   overflow: hidden;
   max-width: 180px;
   display: block;
   width: fit-content;
}
.brxc-style-overview__class-tag.locked-true{
   background-color: #fa43625c;
}
.brxc-style-overview__class-tag.locked-false{
   background-color: #11b76b4d;
}
#brxcStyleOverviewOverlay table thead .brxc-group-icon .bricks-svg-wrapper {
   background-color: var(--builder-gray-3) !important;
   padding: 6px;
   font-size: 14px;
   border-radius: 50%;
   aspect-ratio: 1;
   width: 28px;
   height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 4px auto;
}
#brxcStyleOverviewOverlay table thead .brxc-group-icon.active .bricks-svg-wrapper {
   background-color: var(--builder-bg-accent) !important;
   color: var(--builder-color-accent);
}
#brxcStyleOverviewOverlay table tbody,
#brxcClassManagerOverlay table tbody{
   position: relative;
}

#brxcStyleOverviewOverlay table tr,
#brxcClassManagerOverlay table tr{
   background: var(--builder-gray-3);
   display: flex;
   align-items: center;
   width: 100%;
   color: var(--builder-color);
}
#brxcStyleOverviewOverlay table tr.even,
#brxcClassManagerOverlay table tr.even{
   background: var(--builder-gray-4);
}
#brxcStyleOverviewOverlay table th, 
#brxcStyleOverviewOverlay table td,
#brxcClassManagerOverlay table th,
#brxcClassManagerOverlay table td{
   padding: 4px 0px;
   position: relative;
   flex-grow: 1;

}
#brxcClassManagerOverlay table th,
#brxcClassManagerOverlay table td{
   width: 20%
}
#brxcStyleOverviewOverlay table th:first-child, 
#brxcStyleOverviewOverlay table td:first-child,
#brxcClassManagerOverlay table th:first-child,
#brxcClassManagerOverlay table td:first-child{
   padding: 4px 16px;
}
#brxcStyleOverviewOverlay table td ul{
   list-style-type: none;
    margin: 0;
    padding: 0;
}
#brxcStyleOverviewOverlay table th, 
#brxcStyleOverviewOverlay table td.brxc-no-style-found{
   line-height: 40px;
   width: 100% !important;
   max-width: none !important;
}
#brxcClassManagerOverlay table th{
   line-height: 40px;
   max-width: none !important;
}
#brxcStyleOverviewOverlay table th, 
#brxcStyleOverviewOverlay table td.brxc-no-style-found [data-control="info"]{
   font-size: 13px;
   padding-left: 16px;
}
#brxcClassManagerOverlay  table th{
   font-size: 13px;
}
#brxcStyleOverviewOverlay table th:first-child, 
#brxcStyleOverviewOverlay table td:first-child,
#brxcClassManagerOverlay table th:first-child, 
#brxcClassManagerOverlay table td:first-child{
   --width: 300px;
   width: var(--width);
   min-width: var(--width);
   max-width: var(--width);
   text-align: left;
   flex-grow: 0;
}
#brxcStyleOverviewOverlay table th:last-child, 
#brxcStyleOverviewOverlay table td:last-child,
#brxcClassManagerOverlay table th:last-child, 
#brxcClassManagerOverlay table td:last-child{
   --width: 48px;
   width: var(--width);
   min-width: var(--width);
   max-width: var(--width);
   padding: 0;
   margin: 0;
   flex-grow: 0;
}
#brxcStyleOverviewOverlay table input,
#brxcClassManagerOverlay table input {
   background-color: unset;
   border: unset;
   padding: 0px;
}

#brxcClassManagerOverlay td[data-balloon='Delete']{
   cursor: pointer;
}

#brxcClassManagerOverlay table i.ti-trash{
   color: var(--builder-color-danger);
}

.brxc-style-overview__class-wrapper {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 4px;
   margin-bottom: 20px;
}

.brxc-style-overview__class-btn {
   background-color: #11b76b4d;
   padding: 2px 8px;
   color: var(--builder-gray-f);
   border-radius: 5px;
}
.brxc-style-overview__class-btn.locked-false {
   background-color: #11b76b4d;
}
.brxc-style-overview__class-btn.locked-true {
   background-color: #fa43625c;
}
#brxcStyleOverviewOverlay table.brxc-lock-id-styles td,
#brxcStyleOverviewOverlay table.locked-true td{
   cursor: not-allowed!important;
   opacity: .5;
}
#brxcStyleOverviewOverlay table.brxc-lock-id-styles input,
#brxcStyleOverviewOverlay table.brxc-lock-id-styles .brxc-style-overview__css-selectors,
#brxcStyleOverviewOverlay table.brxc-lock-id-styles .disabled-style-icon-table.trash-can,
#brxcStyleOverviewOverlay table.locked-true input{
   pointer-events: none;
}
#brxcStyleOverviewOverlay .brxc-style-overview__css-selectors{
   cursor: pointer;
}
#brxcStyleOverviewOverlay .brxc-style-overview__css-selectors:hover{
   color: var(--builder-color-accent);
}
#brxcStyleOverviewOverlay .brxc-trash-can-col{
   width: 15px;
   margin: 0 16px;
}
#brxcStyleOverviewOverlay .brxc-trash-can-col .bricks-svg-wrapper{
   cursor: pointer;
   color: var(--builder-gray-6);
}
#brxcStyleOverviewOverlay .brxc-trash-can-col .bricks-svg-wrapper:hover{
   color: var(--bricks-text-danger);
}

#brxcStyleOverviewBody {
   display: flex;
   flex-direction: column;
}
#brxcStyleOverviewBody .CodeMirror{
   flex-grow: 1;
}

#brxcStyleOverviewBody .notification {
   align-items: center;
   display: flex;
   flex-direction: column;
   font-size: 16px;
   font-weight: 700;
   gap: 30px;
   height: 100%;
   justify-content: center;
   text-align: center;
   color: var(--builder-color)
}

#brxcStyleOverviewBody .notification svg {
   font-size: 60px;
   margin-bottom: 15px;
   opacity: .5;
}

/*--------------------------------------
Accordion
--------------------------------------*/

 .accordion {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
  }
  .accordion .brxc-accordion-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 5px;
    margin-bottom: 1rem;
    align-items: flex-end;
  }
  .accordion .brxc-accordion-container .brxc-accordion-btn {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0px 24px 0px 0px;
    width: fit-content;
    cursor: pointer;
    user-select: none;
  }
  .accordion .brxc-accordion-container .brxc-accordion-btn label{
    color: var(--builder-gray-a);
    pointer-events: none;
  }
  .accordion .brxc-accordion-container.active .brxc-accordion-btn label,
  .accordion .brxc-accordion-container .brxc-accordion-btn:hover label{
    color: var(--builder-color-accent);
  }
  .accordion .brxc-accordion-container .brxc-accordion-btn span {
    display: block;
    position: absolute;
    height: 14px;
    width: 14px;
    right: 0px;
    top: 4px;
    pointer-events: none;
    cursor: pointer;
  }
  .accordion .brxc-accordion-container .brxc-accordion-btn span:after {
    content: "";
    width: 10px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--builder-color-accent);
    position: absolute;
    top: 6px;
  }
  .accordion .brxc-accordion-container .brxc-accordion-btn span:before {
    content: "";
    width: 10px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--builder-color-accent);
    position: absolute;
    top: 6px;
    transform: rotate(90deg);
  }
  .accordion .brxc-accordion-container .brxc-accordion-panel {
    width: 100%;
    opacity: 0;
    height: auto;
    max-height: 0;
    padding: 0 16px;
    overflow: hidden;
  }
  .accordion .brxc-accordion-container.active .brxc-accordion-btn span::before {
    transform: rotate(0deg);
  }
  .accordion .brxc-accordion-container.active .brxc-accordion-panel {
    opacity: 1;
    max-height: 100%;
    padding: 24px 24px 8px;
    background-color: var(--builder-bg-2);
    border-radius: 0 0 0.25rem 0.25rem;
  }
 
 /*--------------------------------------
 Elements Panel
 --------------------------------------*/

  #bricks-panel-view{
    display: flex;
    justify-content: flex-end;
    padding: 0 var(--builder-spacing);
    padding-bottom: 0;
    margin-top: 8px;
  }

  #bricks-panel-view li{
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    height: 24px;
    justify-content: center;
    width: 24px;
  }
  #bricks-panel-view li[data-balloon="1-col"] i{
   transform: rotate(90deg);
 }
  #bricks-panel-view li .bricks-svg-wrapper{
    font-size: 16px;
    opacity: .3;
  }
  #bricks-panel-view li:hover .bricks-svg-wrapper{
    opacity: 1;
    color: var(--builder-color-accent);
  }
  #bricks-panel-elements #bricks-panel-header.searching {
    margin-bottom: 0px !important;
}

#bricks-panel-elements #bricks-panel-header.searching + #bricks-panel-view{
    margin-bottom: 20px;
}

 /*--------------------------------------
 Elements Columns
 --------------------------------------*/
 #bricks-panel-elements-categories[data-col="1"] ul.sortable-wrapper{
   grid-template-columns: 1fr !important;
   gap: 5px !important;
 }
 #bricks-panel-elements-categories[data-col="1"] ul.sortable-wrapper li.bricks-add-element .element-data{
    display: flex !important;
    align-items: center;
    gap: 4px;
 }
 #bricks-panel-elements-categories[data-col="1"] ul.sortable-wrapper li.bricks-add-element .element-icon{
   font-size: 14px;
   line-height: 0;
   margin-left: 8px;
   opacity: .5;
 }
 #bricks-panel-elements-categories[data-col="1"] ul.sortable-wrapper li.bricks-add-element .element-label{
   flex: 1;
   display: flex;
   box-shadow: none !important;
 }

 #bricks-panel-elements-categories[data-col="2"] ul.sortable-wrapper{
   grid-template-columns: repeat(2,1fr) !important;
 }
 #bricks-panel-elements-categories[data-col="3"] ul.sortable-wrapper{
   grid-template-columns: repeat(3,1fr) !important;
 }
 #bricks-panel-elements-categories[data-col="4"] ul.sortable-wrapper{
   grid-template-columns: repeat(4,1fr) !important;
 }

 /*--------------------------------------
Dynamic Data
 --------------------------------------*/
.dynamic-tag-picker-button * {
   pointer-events: none;
}
 body.at-dynamic-data-modal .control:not(.control-code) .dynamic-tag-picker-button.open + div.expand[data-control="select"]{
   display: none;
 }
 #brxcDynamicDataModalOverlay .brxc-overlay__search-box {
   margin-bottom: 10px;
 }
 #brxcDynamicDataFilters{
   margin-bottom: 30px;
 }
 #brxcDynamicDataFilters #brxcRecentSearch,
 #brxcPlainClassesOverlay #brxcMostUsed{
    margin-bottom: 10px;
 }
 #brxcDynamicDataFilters #brxcRecentSearch *,
 #brxcPlainClassesOverlay #brxcMostUsed *{
   color: var(--builder-color);
   opacity: .4;
 }
 #brxcDynamicDataFilters #brxcRecentSearch a,
 #brxcPlainClassesOverlay #brxcMostUsed a{
   opacity: 1;
   border-bottom-width: 1px;
   border-bottom-style: dashed;
   padding-bottom: 2px;
 }
 #brxcDynamicDataFilters #brxcRecentSearch a:hover,
 #brxcPlainClassesOverlay #brxcMostUsed a:hover{
   color: var(--builder-color-accent);
 }
 #brxcDynamicDataFilters .brxc-overlay__action-btn-wrapper{
   flex-wrap: wrap;
 }

 #brxcDynamicDataFilters .brxc-overlay__action-btn{
   flex: 1;
   justify-content: center;
 }

 #brxcDynamicDataCanvas > ul {
   column-count: 5;
   gap: 20px;
 }

 #brxcDynamicDataCanvas ul {

   margin: 0;
   padding: 0
 }
 #brxcDynamicDataCanvas > ul > div {
   break-inside: avoid-column;
   margin: 0 0 20px 0;
 }
 #brxcDynamicDataCanvas > ul > div > span{
   color: var(--builder-color);
   opacity: 0.3;
   font-weight: 800;
   text-transform: uppercase;
   font-size: 14px;
   margin-bottom: 4px;
   display: block;
 }
 #brxcDynamicDataCanvas > ul li {
   list-style: none;
   color: var(--builder-color);
   font-size: 14px;
   cursor: pointer;
   line-height: 1.4em;
   background-color: var(--builder-bg-2);
   padding: 9px 12px 9px 16px;
   border-radius: var(--builder-border-radius);
   display: flex;
   justify-content: space-between;
   margin-bottom: 4px;
   position: relative;
 }
 #brxcDynamicDataCanvas > ul li:hover {
   color: var(--builder-color-accent);
   background-color: var(--builder-bg-accent);
 }
 #brxcDynamicDataCanvas > ul li span{
   font-size: 13px;
   word-break: break-word;
 }

 #brxcDynamicDataCanvas > ul li .copy-tag-icon{
   opacity: 0;
   position: absolute;
   right: 10px;
   z-index: 1;
 }
 #brxcDynamicDataCanvas > ul li:hover .copy-tag-icon{
   opacity: 1;
 }
/*--------------------------------------
Mask Helper
 --------------------------------------*/
 #brxcMaskHelperCanvas ul{
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   padding: 0;
 }
 #brxcMaskHelperCanvas li {
   background-color: #fafafa;
   list-style: none;
   padding: 30px;
   margin: 0;
   border-radius: var(--builder-border-radius);
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
}
/*--------------------------------------
Position Focus Point
 --------------------------------------*/
 #bricks-panel-element [data-controlkey="_background"] .control.control-select .control-inner:has(.brxc-position-icon) {
   flex-direction: row;
   flex-wrap: wrap;
   column-gap: 4px;
 }
 #bricks-panel-element [data-controlkey="_background"] .control.control-select .control-inner:has(.brxc-position-icon) label[for="position"],
.control.control-select .control-inner:has(.brxc-mask-icon) label[for="mask"]{
   width: 100%;
 }
 #bricks-panel-element [data-controlkey="_background"] .control.control-select .control-inner:has(.brxc-position-icon) label[for="position"] + div[data-control="select"],
 .control.control-select .control-inner:has(.brxc-mask-icon) label[for="mask"] + div[data-control="select"]{
   flex-grow: 1;
 }

 .brxc-position-icon,
 .brxc-mask-icon{
    display: flex;
    height: 32px;
    align-items: center;
    justify-content: center;
    width: 24px !important;
    border-radius: var(--builder-border-radius);
    background-color: var(--builder-bg-2);
    cursor: pointer;
    z-index: 1001;
}
#bricks-panel-element [data-controlkey="_objectPosition"] .control.control-text .control-inner:has(.brxc-position-icon) label[for="_objectPosition"] + div[data-control="text"],
#bricks-panel-element [data-controlkey="mask"] .control.control-select .control-inner:has(.brxc-mask-icon) label[for="mask"] + div[data-control="select"]{
   margin-right: 30px;
   flex-basis: calc(50% - 30px) !important;
}
#bricks-panel-element [data-controlkey="_objectPosition"] .brxc-position-icon,
#bricks-panel-element [data-controlkey="mask"] .brxc-mask-icon{
   position: absolute;
   right: 0px;
}
#brxcBgFocusCanvas{
   height: 100%;
}
#brxcFocusContainer {
   --left: 50%;
   --top: 50%;
   display: grid;
   grid-template-columns: 4fr 3fr;
   gap: 23px;
   height: 100%;
}
.brxc-focus-col{
   height: 100%;
   overflow-y: scroll;
   padding: 17px;
}
#brxcBgFocusCanvas #brxcFocusWrapper{
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
}
/*Preview*/
#brxcFocusPreview {
   gap: 20px;
   overflow-y: scroll;
   display: block;
   column-count: 2;
}
.brxc-focuc-preview-item{
   display: flex;
   flex-direction: column;
   gap: 4px;
   color: var(--builder-color);
   break-inside: avoid-column;
   margin-bottom: 20px;
   font-size: 12px;
   position: relative;
}
.brxc-focuc-preview-item span{
   position: absolute;
   top: 0;
   right: 0;
   padding: 2px 6px;
   background-color: var(--builder-bg-2);
   color: var(--builder-color)
}
#brxcFocusPreview img{
   width: 100%;
   height: auto;
   object-fit: cover;
   object-position: var(--left) var(--top);
}
#brxcFocusPreview .ar-4{
   aspect-ratio: 4;
}
#brxcFocusPreview .ar-3{
   aspect-ratio: 3;
}
#brxcFocusPreview .ar-2{
   aspect-ratio: 2;
}
#brxcFocusPreview .ar-16-9{
   aspect-ratio: 16/9;
}
#brxcFocusPreview .ar-4-3{
   aspect-ratio: 4/3;
}
#brxcFocusPreview .ar-3-2{
   aspect-ratio: 3/2;
}
#brxcFocusPreview .ar-1{
   aspect-ratio: 1;
}
#brxcFocusPreview .ar-2-3{
   aspect-ratio: 2/3;
}
#brxcFocusPreview .ar-3-4{
   aspect-ratio: 3/4;
}
#brxcFocusPreview .ar-9-16{
   aspect-ratio: 9/16;
}
#brxcFocusPreview .ar-1-2{
   aspect-ratio: 1/2;
}

/*Mode Grid*/
#brxcFocusGrid {
   position: absolute;
   top: 0;
   left: 0;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   height: 100%;
   width: 100%;
}
.brxc-focus-item {
   border: 2px solid var(--builder-color-accent-inverse);
   width: 100%;
   height: 100%;
   transition: .3s all ease;
   cursor: pointer;
}
.brxc-focus-item:hover {
   border: 2px solid var(--builder-color-accent);
   background-color: var(--builder-bg-accent);
   opacity: .25;
}
.brxc-focus-item.active{
   border: 2px solid var(--builder-color-accent);
   background-color: var(--builder-bg-accent);
   opacity: .8;
}

/*Mode Custom*/
#brxcBgFocusCanvas #brxcFocusWrapper img{
   width: 100%;
   height: auto;
   filter: brightness(0.5);
}
#brxcBgFocusCanvas #brxcFocusPoint{
   left: calc(var(--left) - 17px);
   top: calc(var(--top) - 17px);
   position: absolute;
   width: 34px;
   height: 34px;
   border-radius: 50%;
   border: 3px solid var(--builder-color-accent);
   background: var(--builder-bg-accent);
   cursor: pointer;
   z-index: 1;
   box-shadow: var(--builder-box-shadow);
}

/*--------------------------------------
Audio Player
 --------------------------------------*/
 audio#brxcAudioPlayer {
   width: 100%;
}
 audio#brxcAudioPlayer::-webkit-media-controls-panel {
   background-color: var(--builder-bg-2); 
   color: var(--builder-color);
   box-shadow: none;
   border: none;
}
audio#brxcAudioPlayer::-webkit-media-controls-mute-button,
audio#brxcAudioPlayer::-webkit-media-controls-play-button{
   border-radius: 50%;
   background-color:  var(--builder-color-accent);
   margin-right: 8px;
}
audio#brxcAudioPlayer::-webkit-media-controls-current-time-display,
audio#brxcAudioPlayer::-webkit-media-controls-time-remaining-display {
   color: #fff;
   text-shadow: none;
 }
 
/*--------------------------------------
Hide Element
 --------------------------------------*/
.bricks-structure-list .element[data-builder-hidden="true"]{
   display: initial;
}

#bricks-structure li.element[data-builder-hidden="true"] > .structure-item{
   background-color: #573700 !important;
}
#bricks-structure li.element[data-builder-hidden="true"] .structure-item input,
#bricks-structure li.element[data-builder-hidden="true"] .structure-item .icon i,
#bricks-structure li.element[data-builder-hidden="true"] .structure-item button.brxc-tag-btn {
   color: var(--bricks-text-warning) !important;
}

#bricks-structure li.element[data-builder-hidden="true"] > .structure-item:hover,
#bricks-structure li.element[data-builder-hidden="true"].active > .structure-item{
   background-color: #6f4600 !important;
}

#bricks-structure li.element[data-builder-hidden="true"] .structure-item button.brxc-tag-btn {
   background-color: #ffa10020 !important;
}
#bricks-structure li.element[data-builder-hidden="true"] > .structure-item:hover button.brxc-tag-btn,
#bricks-structure li.element[data-builder-hidden="true"].active > .structure-item button.brxc-tag-btn {
   background-color: #ffa10030 !important;
} 

#bricks-structure li.element[data-frontend-hidden="true"] > .structure-item{
   background-color: #462533 !important
}
#bricks-structure li.element[data-frontend-hidden="true"] .structure-item input,
#bricks-structure li.element[data-frontend-hidden="true"] .structure-item .icon i,
#bricks-structure li.element[data-frontend-hidden="true"] .structure-item button.brxc-tag-btn {
   color: var(--bricks-text-danger) !important;
}

#bricks-structure li.element[data-frontend-hidden="true"] > .structure-item:hover,
#bricks-structure li.element[data-frontend-hidden="true"].active > .structure-item{
   background-color: #6b2036 !important;
}

#bricks-structure li.element[data-frontend-hidden="true"] .structure-item button.brxc-tag-btn {
   background-color: #fa436220 !important
}
#bricks-structure li.element[data-frontend-hidden="true"] > .structure-item:hover button.brxc-tag-btn,
#bricks-structure li.element[data-frontend-hidden="true"].active > .structure-item button.brxc-tag-btn {
   background-color: #fa436230 !important
}  


/*--------------------------------------
Hide Floating Bar
 --------------------------------------*/
#brxcHideFloatingBar {
   position: sticky;
   bottom: 10px;
   margin: 20px 8px 0px 8px;
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
   border-radius: var(--builder-border-radius);
   overflow: hidden;
   font-size: 14px;
   font-weight: 600;
   user-select: none;
   box-shadow: 0px 0px 30px 10px rgba(0, 0, 0, 0.7);
   background-color: var(--builder-bg);
}

#brxcHideFloatingBar > div{
   display: flex;
   flex: 1;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   padding: 4px 8px;
   background-color: var(--builder-bg-2);
}

#brxcHideFloatingBar i{
   font-size: 18px;
   cursor: pointer;
}

#brxcHideFloatingBar i.fa-toggle-on{
   color: var(--builder-color-accent);
}
#brxcHideFloatingBar i.fa-toggle-off{
   color: var(--builder-color-danger);
}

 
/*--------------------------------------
Structure Helper
 --------------------------------------*/
 #brxcStructureHelper .brxc-overlay__pannel-1{
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
   overflow: hidden;
 }
 .brxc-structure-panel-list__header {
   color: var(--builder-color);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 0 8px 0px;
   position: sticky;
   top: 0;
   z-index: 1;
   background-color: var(--builder-bg);
}
.brxc-structure-panel-list__header span{
   flex: 1;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .2px;
    pointer-events: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.brxc-structure-panel-list__header .actions{
   display: flex;
   align-items: center;
   gap: 4px;
   
}
.brxc-structure-panel-list__header .bricks-svg-wrapper{
   opacity: .33;
   cursor: pointer;
   background-color: var(--builder-bg-2);
   padding: 6px 8px;
   border-radius: var(--builder-border-radius);
   font-size: 12px;
}
.brxc-structure-panel-list__header .bricks-svg-wrapper:hover{
   opacity: 1;
}
.brxc-structure-panel-list__header .bricks-svg-wrapper.active{
   opacity: 1;
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
}

 #brxcStructureHelper #structurPanelList li,
 #brxcStyleOverviewPreview li{
   display: flex;
   align-items: center;
   background-color: var(--builder-bg-3);
   color: var(--builder-color);
   padding: 4px 6px 4px 2px;
   border-radius: var(--builder-border-radius);
   margin: 0 0 5px;
   list-style: none;
   margin-left: calc(var(--margin) * 20px);
   opacity: .3;
   cursor: pointer;
   white-space: nowrap;
   flex-shrink: 0;
 }
 #brxcStructureHelper #structurPanelList li.is-component{
   --builder-color:var(--builder-color-component);
 }
 #brxcStructureHelper #structurPanelList li:hover{
   background-color: var(--builder-gray-5);
 }
 #brxcStructureHelper #structurPanelList li.is-component:hover{
   background-color: var(--builder-bg-component);
 }
 #brxcStructureHelper #structurPanelList .brxc-structure-list__wrapper.collapsed:has(li.active) li{
   display: none
}
#brxcStructureHelper #structurPanelList .brxc-structure-list__wrapper.collapsed li{
   margin-left: 0 !important;
}
#brxcStructureHelper #structurPanelList .brxc-structure-list__wrapper.collapsed li.active.active{
   display: flex;
}
 #brxcStructureHelper #structurPanelList li:not(.editable) *{
   pointer-events: none;
 }

 #brxcStructureHelper #structurPanelList li span.show-id,
 #brxcStructureHelper #structurPanelList li span.show-tag{
   margin-left: auto;
   background-color: var(--builder-bg-2);
   padding: 0px 4px 0px 8px;
   border-radius: var(--builder-border-radius);
   font-size: 12px !important;
   min-width: 120px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
}

#brxcStructureHelper #structurPanelList li span.show-tag {
   margin: 0 8px 0 0;
   padding: 0px 8px;
   min-width: 0;
   font-size: 10px !important;
   font-weight: 700;
   width: fit-content;
   text-transform: uppercase;
   line-height: 200%;
   flex-shrink: 0;
}
#brxcStructureHelper #structurPanelList li span.show-id .copy-id-icon{
   pointer-events: auto;
}
#brxcStructureHelper #structurPanelList li span.show-id .copy-id-icon i {
   padding: 5px;
   font-size: 8px !important;
   background-color: var(--builder-bg-3);
   border-radius: 99vw;
   pointer-events: none;
   width: 18px;
   height: 18px;
   display: flex;
   justify-content: center;
   align-items: center;
}

#brxcStructureHelper #structurPanelList li input {
   background-color: var(--builder-bg-2);
   border: none;
   border-radius: var(--builder-border-radius);
   box-shadow: none;
   color: inherit;
   display: block;
   font-family: Inter, sans-serif;
   font-size: 13px;
   height: var(--builder-input-height);
   line-height: var(--builder-input-height);
   outline: none;
   padding: 0 12px;
   transition: none;
   width: 100%;
   background-color: transparent !important;
   border-radius: 0;
   box-shadow: none !important;
   cursor: auto;
   height: 25px;
   padding: 0;
}
#brxcStructureHelper .brxc-overlay__pannel-col--left:not(:has(.active)) + .brxc-overlay__pannel-col--right #structurPanelList .brxc-structure-list__wrapper:not(:has(.active)) li,
 #brxcStructureHelper #structurPanelList li.active{
   opacity: 1;
 }
 #brxcStructureHelper .brxc-overlay__pannel-col--left,
 #brxcStructureHelper .brxc-overlay__pannel-col--right{
   overflow: scroll;
 }
 #structurPanelList ul{
   margin: 0;
   padding: 10px;
   border-radius: var(--builder-border-radius);
   background-color: var(--builder-bg-2);
 }
 #brxcStructureHelper .brxc-overlay__pannel-col--left{
   display: block;
 }
 
 #brxcStructureHelper .brxc-overlay__pannel-col--left ul{
   display: flex;
   flex-direction: column;
   gap: 4px;
   break-inside: avoid-column;
   margin: 0 0 24px 0;
   padding: 0;
 }
 #brxcStructureHelper .brxc-overlay__pannel-col--left ul span.title,
 #brxcCSSVariableManagerOverlay span.title{
   color: var(--builder-color);
   opacity: 0.3;
   font-weight: 800;
   text-transform: uppercase;
   font-size: 14px;
   margin-bottom: 4px;
   display: block;
 }
 #brxcCSSVariableManagerOverlay span.title{
   display: block;
   margin: 0 4px 0 0;
 }
 #brxcStructureHelper .brxc-overlay__pannel-col--left ul li{
   list-style: none;
    color: var(--builder-color);
    font-size: 14px;
    cursor: pointer;
    line-height: 1.4em;
    background-color: var(--builder-bg-2);
    padding: 9px 12px 9px 16px;
    border-radius: var(--builder-border-radius);
    opacity: .8;
    display: flex;
    justify-content: space-between;
    gap: 8px;
 }
 #brxcStructureHelper .brxc-overlay__pannel-col--left ul li div{
    opacity: .5;
    position: relative;
    height: fit-content;
 }
 #brxcStructureHelper .brxc-overlay__pannel-col--left ul li div:hover{
   opacity: 1;
}
 #brxcStructureHelper .brxc-overlay__pannel-col--left ul li:hover{
   opacity: 1;
 }
 #brxcStructureHelper .brxc-overlay__pannel-col--left ul li.active{
   color: var(--builder-color-accent);
   background-color: var(--builder-bg-accent);
   opacity: 1;
 }

 #brxcStructureHelper #structurPanelList li .icon{
   display: flex;
   font-size: inherit;
   justify-content: center;
   line-height: var(--builder-structure-input-height);
   opacity: .5;
   width: 32px;
   min-width: 32px;
   pointer-events: none;
 }

 #brxcStructureHelper #structurPanelList li span{
   font-size: 13px;
   font-family: Inter, sans-serif;
   line-height: 25px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 /*--------------------------------------
Class Manager
 --------------------------------------*/
 #brxcClassManagerOverlay .brxc-overlay__container {
   border-radius: 0;
}
 #brxcClassManagerOverlay .brxc-overlay__pannel {
   padding: 16px 32px 32px 32px;
}
 .brxc-class-manager__wrapper{
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 0px;
   height: 100%;
 }
 .brxc-class-manager__wrapper:has(#brxcClassContentCanvas .brxc-class-manager__content-css.export){
   grid-template-columns: minmax(0, 2fr) minmax(0, 12fr);
   gap: 0px;
 }
 .brxc-class-manager__wrapper:has(#brxcClassContentCanvas .brxc-class-manager__content-css.export) .col-1{
   grid-template-columns: 1fr;
 }
 .brxc-class-manager__wrapper:has(#brxcClassContentCanvas .brxc-class-manager__content-css.export) .col-1 .brxc-overlay__search-box,
 .brxc-class-manager__wrapper:has(#brxcClassContentCanvas .brxc-class-manager__content-css.export) .col-1 .class-list{
   display: none;
 }

 #brxcClassManagerOverlay .col-1 {
   overflow: auto;
   display: grid;
   grid-template-areas:
       ". a"
       "b c";
   grid-template-columns: 2fr 5fr;
   grid-template-rows: 40px auto;
}
#brxcClassManagerOverlay .col-1 .cat-list {
   width: 100%;
    position: sticky;
    top: 40px;
    height: fit-content;
    min-width: 140px;
    grid-area: b;
    z-index: 1;
}
#brxcClassManagerOverlay .col-1 .class-list {
   width: 100%;
   height: 100%;
   background-color: var(--builder-bg-2);
   grid-area: c;
}
#brxcClassManagerOverlay .col-2 {
   overflow: auto;
   margin-left: 40px;
}
.brxc-class-manager__wrapper:has(#brxcClassContentCanvas .brxc-class-manager__content-css.export) .col-2{
   margin-left: 0px;
}
#brxcClassManagerOverlay .brxc-overlay__search-box{
   margin-bottom: 0px;
   position: sticky;
   top: 0px;
   z-index: 10;
   grid-area: a;
}
#brxcClassManagerOverlay .brxc-overlay__search-box .action{
   position: absolute;
   top: 10px;
   right: 7px;
   display: flex;
   gap: 4px;
}
#brxcClassManagerOverlay .brxc-overlay__search-box .iso-icon.active {
   background-color: var(--builder-color);
}
#brxcClassManagerOverlay .brxc-overlay__search-box .iso-icon.active i{
   color: var(--builder-bg);
}

#brxcClassManagerOverlay .brxc-overlay__search-box .iso-icon.locked {
   background-color: var(--bricks-text-danger);
}
#brxcClassManagerOverlay .brxc-overlay__search-box .iso-icon.unlocked {
   background-color: var(--bricks-text-success);
}
#brxcClassManagerOverlay .brxc-overlay__search-box .iso-icon.locked i,
#brxcClassManagerOverlay .brxc-overlay__search-box .iso-icon.unlocked i{
   color: var(--builder-color);
}
.brxc-manager__left-menu ul,
#brxcClassManagerOverlay ul{
   list-style-type: none;
   margin: 0;
   padding: 0px;
   z-index: 5;
 }
 #brxcClassBulkActionList ul,
 #brxcClassUnusedList ul{
   display: flex;
   flex-direction: column;
   padding: 8px;
   gap: 4px;
 }
 #brxcClassManagerOverlay #brxcClassListCanvas ul{
    flex: 1;
 }
 div#brxcClassListCanvas {
   height: 100%;
   display: flex;
   flex-direction: column;
}

 #brxcClassListCanvas > ul > li,
 .brxc-manager__left-menu li,
 #brxcClassManagerOverlay .col-left li,
 #brxcQueryCatListCanvas li,
 #brxcPromptCatListCanvas li {
   cursor: pointer;
   display: flex;
   gap: 10px;
   justify-content: space-between;
   align-items: center;
   margin: 0;
   padding: 0px 10px;
 }
#brxcClassManagerOverlay #brxcClassBulkActionList li{
   cursor: initial;
}

.brxc-manager__left-menu li {
padding: 0px 20px 0 10px;
}
.brxc-manager__left-menu li.trash {
   gap: 6px;
   color: var(--builder-color-danger);
}
.brxc-manager__left-menu li.trash i {
   font-size: 13px;
}
.brxc-manager__left-menu li.trash input[type="text"]{
   color: var(--builder-color-danger) !important;
}

#brxcClassListCanvas > ul > li > .span-wrapper span,
.brxc-manager__left-menu li span,
#brxcQueryCatListCanvas li span,
#brxcPromptCatListCanvas li span,
#brxcClassManagerOverlay .col-left li span,
#brxcColorManagerOverlay li input{
   line-height: 32px;
   color: var(--builder-color);
   font-family: Consolas,monaco,Courier New,monospace;
   font-size: 12px;
   white-space: nowrap;
}
#brxcClassManagerOverlay li span.max-results {
      opacity: 1 !important;
      color: var(--builder-color-accent) !important;
      cursor: pointer;
}
 #brxcColorManagerOverlay li input[type="text"].color-name{
   pointer-events: none;
   font: 12px Inter,sans-serif;
 }
 #brxcColorManagerOverlay li input[type="text"].color-name.editable{
   pointer-events: unset;
 }
 #brxcColorManagerOverlay li input[type="text"].color-name.inactive{
   opacity: .6;
 }
 #brxcClassListCanvas > ul > li > .span-wrapper span{
   opacity: .6;
 }
 #brxcClassListCanvas > ul > li > .span-wrapper{
   display: flex;
   align-items: center;
   flex: 1;
 }
 #brxcClassListCanvas > ul > li.active > .span-wrapper > span{
   opacity: 1;
 }
 #brxcClassListCanvas > ul > li:hover,
 .brxc-manager__left-menu li:hover,
 #brxcColorManagerOverlay li:hover {
   background-color: var(--builder-bg-3);
}
.brxc-manager__left-menu li.active,.brxc-manager__left-menu li.dragged{
   background-color: var(--builder-bg-2);
}
.brxc-manager__left-menu li span.count,
.brxc-manager__left-menu li div.deleteCat {
   background-color: var(--builder-bg-2);
   height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--builder-border-radius);
   font-size: 9px !important;
   padding: 0 6px;
}
.brxc-manager__left-menu li span.count{
   pointer-events: none;
}
.brxc-manager__left-menu li div.deleteCat span{
   color: var(--bricks-text-danger) !important;
}

.brxc-manager__left-menu li div.deleteCat * {
   pointer-events: none;
}

#brxcClassListCanvas > ul > li.selected > .span-wrapper span,
.brxc-manager__left-menu li.active input{
   color: var(--builder-color-accent) !important;
}
.brxc-manager__left-menu li .action {
   display: flex;
   gap: 4px;
}
.brxc-manager__left-menu li .action > div {
   background-color: var(--builder-bg-3);
   height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--builder-border-radius);
   font-size: 9px !important;
   padding: 0 6px;
}
.brxc-manager__left-menu li .action .export{
   color: var(--builder-color);
}
.brxc-manager__left-menu li .action .export i {
   font-size: 12px;
}
.brxc-manager__left-menu li .action .export.active{
   color: var(--builder-color-accent);
   background-color: var(--builder-bg-accent);
}
.brxc-manager__left-menu li .action .export *{
   pointer-events: none;
}
.brxc-manager__left-menu li .action .expandedCat.expanded{
   background-color: var(--builder-bg-accent);
}
.brxc-manager__left-menu li .action .expandedCat.expanded i{
   color: var(--builder-color-accent);
}
.brxc-manager__left-menu li.active span{
   font-size: 9px;
}
.brxc-manager__left-menu li.active span.count{
   font-size: 9px;
   background-color: var(--builder-bg-3);
}
.brxc-manager__left-menu li.active .deleteCat i{
   font-size: 11px;
}
#brxcClassListCanvas > ul > li .actions,
#brxcColorManagerOverlay .actions{
   --icon-size: 10px;
   display: flex;
   align-items: center;
   gap: 8px;
}
#brxcClassListCanvas > ul > li .actions .bricks-svg-wrapper,
#brxcColorManagerOverlay .actions .bricks-svg-wrapper{
   display: flex;
}
#brxcClassListCanvas > ul > li .unlock-icon,
#brxcClassListCanvas > ul > li .css3-icon{
   color: var(--builder-gray-5);
   font-size: var(--icon-size);
}
#brxcClassListCanvas > ul > li:hover .unlock-icon{
   color: var(--builder-gray-6);
}
#brxcClassListCanvas > ul > li.selected .unlock-icon,
#brxcClassListCanvas > ul > li.selected .css3-icon{
   color: var(--builder-gray-8);
}
#brxcClassListCanvas > ul > li .lock-icon{
   color: var(--bricks-text-danger);
   font-size: var(--icon-size);
}
#brxcClassListCanvas > ul > li .trash-icon,
#brxcClassListCanvas > ul > li .clone-icon,
#brxcColorManagerOverlay .actions .trash-icon,
#brxcColorManagerOverlay .actions .clone-icon{
   color: var(--builder-color);
   font-size: var(--icon-size);
}
#brxcClassListCanvas > ul > li .trash-icon,
#brxcColorManagerOverlay .actions .trash-icon{
   margin-left: 8px;
   color: var(--bricks-text-danger);
}
   
.brxc-class-manager__footer {
   color: var(--builder-gray-8);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 0;
    background-color: var(--builder-bg-3);
    position: sticky;
    bottom: -1px;
    font-size: 12px;
    z-index: 10;
}
.brxc-class-manager__footer input,
.brxc-manager__left-menu input,
#brxcClassContentCanvas #submitCSSPrompt,
#brxcColorManagerOverlay #addNewColor,
#brxcCSSVariableManagerOverlay .brxc-add-new-variable,
#brxcPlainClassesOverlay #plainClassesSearchWrapper input,
#brxcQueryCatListCanvas input,
#brxcPromptCatListCanvas input{
   background-color: var(--builder-bg-2);
   border-radius: var(--builder-border-radius);
   box-shadow: none;
   font-family: Consolas,monaco,Courier New,monospace;
   font-size: 11px;
   height: auto;
   line-height: 26px;
   margin: 4px 12px;
   overflow: hidden;
   padding: 6px 12px;
   position: relative;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 100%;
   color: var(--builder-color);
   border: none;
}


#brxcPlainClassesOverlay #plainClassesSearchWrapper.brxc-overlay__search-box {
   margin-bottom: 8px;
}
#brxcPlainClassesOverlay #plainClassesSearchWrapper input {
   margin: unset;
   padding: 0px 32px;
   height: 100%;
   flex-basis: 100%;
   font-size: inherit;
   font-family: inherit;
   min-height: 40px;
   margin-bottom: 0px;
   background-color: var(--builder-bg-3);
}
#brxcPlainClassesOverlay #plainClassesSearchWrapper input::placeholder {
   opacity: .7;
   color: var(--builder-color-knob);
}
#brxcPlainClassesOverlay #plainClassesSearchWrapper .iso-reset{
   background-color: var(--builder-bg-2);
   top: 10px;
   right: 7px;
}
#brxcPlainClassesOverlay #plainClassesSearchWrapper .iso-search-icon{
   left: 12px;
}
#brxcColorManagerOverlay #addNewColor,
#brxcCSSVariableManagerOverlay .brxc-add-new-variable{
   margin: 0;
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
}
.brxc-class-manager__footer input{
   background-color: var(--builder-bg);
}

.brxc-add-color-wrapper{
   padding: 16px;
   display: flex;
   gap: 2px;
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-overlay__inner{
   container-type: inline-size;
   container-name: variable-manager;
 }
#brxcCSSVariableManagerOverlay.sidebar .brxc-add-color-wrapper{
   padding: 16px;
   padding: 16px 16px 0px 16px;
   display: flex;
   gap: 2px;
}
.brxc-add-color-wrapper textarea,
#brxcCSSVariableManagerOverlay textarea{
   margin: 0;
   font-family: Consolas,monaco,Courier New,monospace;
   font-size: 11px;
   margin-bottom: 0;
}


.brxc-import-css-colors{
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: var(--builder-bg-2);
   color: var(--builder-color);
   font-size: 12px;
   padding: 13px 12px;
   border-top-left-radius: var(--builder-border-radius);
   border-bottom-left-radius: var(--builder-border-radius);
   cursor: pointer;
}

.brxc-import-css-colors.active{
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
}
.brxc-import-css-colors i{
   opacity: var(--builder-placeholder-opacity);
}
.brxc-import-css-colors:hover i,
.brxc-import-css-colors.active i{
   opacity: 1;
}

#brxcColorManagerOverlay #addNewColor::placeholder,
#brxcCSSVariableManagerOverlay .brxc-add-new-variable::placeholder{
   opacity: var(--builder-placeholder-opacity);
   color: var(--builder-color);
}
#brxcClassContentCanvas #submitCSSPrompt{
   margin: 0 0 5px 0;
}
.brxc-manager__left-menu input{
   background-color: unset;
   border-radius: unset;
   padding: 0;
   margin: 0;
   width: 100%;
   line-height: 32px;
   font-size: 12px;
}
.brxc-manager__left-menu input#addNewCat{
   padding: 0 10px;
}
.brxc-manager__left-menu input[readonly]{
   cursor: pointer;
}
.brxc-class-manager__footer input::placeholder,
.brxc-manager__left-menu input::placeholder,
#brxcClassContentCanvas #submitCSSPrompt::placeholder{
   opacity: var(--builder-placeholder-opacity);
   color: var(--builder-color)
}
#brxcClassContentCanvas ul.action-wrapper {
   display: flex;
   fill: var(--builder-gray-8);
   gap: 3px;
}
#submitCSSPromptWrapper{
   position: relative;
}
#submitCSSPromptWrapper .brxc-overlay__action-btn.primary.disable{
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   height: calc(100% - 5px);
   background-color: transparent !important;
   border: none;
}

#brxcClassContentCanvas {
   display: flex;
   flex-direction: column;
   gap: 32px;
   height: 100%;
   width: 100%;
}

.brxc-class-manager__view-wrapper{
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 10px;
   top: 0;
    z-index: 999;
}
.brxc-class-manager__view-btn{
   background-color: var(--builder-bg-2);
    border-radius: var(--builder-border-radius);
    color: var(--builder-color);
    padding: 10px 18px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: .7;
    text-align: center;
    line-height: 1.6;
    gap: 10px;
}

.brxc-class-manager__view-btn * {
   pointer-events: none;
}
.brxc-class-manager__view-btn:hover{
   opacity: 1;
}
.brxc-class-manager__view-btn.active{
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
   cursor: auto;
   opacity: 1;
}
#brxcClassContentCanvas .brxc-class-manager__content-header,
#brxcClassContentCanvas .wrapper {
   display: flex;
   gap: 10px;
   background-color: var(--builder-bg);
}
#brxcClassContentCanvas .wrapper {
   padding-bottom: 0px;
}
#brxcClassContentCanvas .brxc-class-manager__content-header{
   z-index: 1;
}
#brxcClassContentCanvas .brxc-class-manager__content-status-wrapper{
   display: flex;
   gap: 40px
}
#brxcClassContentCanvas .brxc-class-manager__content-description{
   flex: 1;
}
#brxcClassContentCanvas .brxc-class-manager__content-description textarea{
   margin: 0;
   min-height: 120px;
}
#brxcClassContentCanvas .wrapper {
   flex: 1;
   display: grid;
    grid-template-columns: minmax(0, 1fr);
}
#brxcClassContentCanvas .wrapper .left-wrapper {
   display: flex;
   flex-direction: column;
   gap: 4rem;
}
#brxcClassContentCanvas .no-result{
   font-size: 14px;
}
#brxcClassContentCanvas input{
   box-shadow: none!important;
   cursor: inherit;
   height: var(--builder-structure-input-height);
   outline: none;
   border: none;
   color: var(--builder-color);
   overflow: hidden;
   position: relative;
   text-overflow: ellipsis;
   padding: 20px 10px;
   background-color: var(--builder-bg-2);
   border-radius: var(--builder-border-radius);
}
#brxcClassContentCanvas .autocomplete-items.bricks-control-popup.bottom {
   top: unset;
   color: var(--builder-color);
}
#brxcClassContentCanvas .brxc-class-manager__content-header input{
   padding: 20px 10px;
   background-color: var(--builder-bg-2);
   border-radius: var(--builder-border-radius);
}
#brxcClassContentCanvas .brxc-class-manager__content-header .span-unit-wrapper {
   display: flex;
   align-items: center;
   gap: 8px;
}
#brxcClassContentCanvas .brxc-class-manager__content-header span.units {
   font-size: 19px;
   color: var(--builder-gray-5);
   white-space: nowrap;
}
#brxcClassContentCanvas .brxc-overlay__action-btn-wrapper {
   flex-wrap: wrap;
}
#brxcClassContentCanvas .brxc-class-manager__content-css {
   flex: 1;
    display: flex;
    flex-direction: column;
}
.label-wrapper {
   display: flex;
   justify-content: space-between;
}
.breakpoint-wrapper {
   display: flex;
}
.breakpoint-wrapper {
   display: flex;
}
#brxcClassContentCanvas .CodeMirror,
#CSSVariableBodyCanvas .CodeMirror{
   min-height: 200px;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
}
#brxcClassContentCanvas .CodeMirror{
   margin-bottom: 12px;
}
.brxc-class-manager__content-css label:last-of-type + .brxc-codemirror__wrapper .CodeMirror{
   margin-bottom: 0px !important;
}

.CodeMirror.disable {
   opacity: 1;

}
.CodeMirror.disable *{
   cursor: not-allowed !important;
}
.CodeMirror.disable .CodeMirror-cursors {
   display: none !important;
}

.cm-s-one-dark .CodeMirror-selected {
   background-color: #4c5660 !important
}
.cm-s-one-dark .cm-comment, .cm-s-one-dark .cm-quote {
   color: #7c8596 !important;
}

ul.CodeMirror-hints{
   background-color: var(--builder-bg);
   border: unset;
   outline: unset;
   padding: 0;
}
ul.CodeMirror-hints .CodeMirror-hint{
   color: var(--builder-color) !important;
}
ul.CodeMirror-hints .CodeMirror-hint:hover{
   color: var(--builder-color-accent) !important;
}
ul.CodeMirror-hints .CodeMirror-hint-active{
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent) !important;
}

/* Bulk Actions */
#brxcClassBulkActionCanvas {
   flex: 1;
   display: flex;
   flex-direction: column;
}
#brxcClassManagerOverlay .brxc-overlay__pannel.brxc-overlay__pannel-3 .col-left,
#brxcClassManagerOverlay .brxc-overlay__pannel.brxc-overlay__pannel-4 .col-left {
   width: 100%;
   height: 100%;
   background-color: var(--builder-bg-2);
}
#brxcClassManagerOverlay .brxc-overlay__pannel.brxc-overlay__pannel-3 .brxc-bulk-actions__wrapper,
#brxcClassManagerOverlay .brxc-overlay__pannel.brxc-overlay__pannel-4 .brxc-unused__wrapper{
   display: grid;
   grid-template-columns: 2fr 3fr;
   gap: 4rem;
   overflow: hidden;
   height: 100%;
}
#brxcClassManagerOverlay .brxc-overlay__pannel.brxc-overlay__pannel-3 .brxc-bulk-actions__wrapper > div,
#brxcClassManagerOverlay .brxc-overlay__pannel.brxc-overlay__pannel-4 .brxc-unused__wrapper > div{
   overflow: scroll;
   display: flex;
   flex-direction: column;
   height: 100%;
}

#brxcClassManagerOverlay .col-left li.bulk-action-Rename span span.brxc_changes {
   color: var(--bricks-text-success);
}
.brxc-bulk-action-wrapper,
.brxc-unused-action-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
}
.brxc-bulk-action-wrapper .brxc-icon.enable i,
.brxc-unused-action-wrapper .brxc-icon.enable i{
   color: var(--builder-color-accent);
   font-size: 14px !important;
}
.brxc-bulk-action-wrapper .brxc-icon.disable i,
.brxc-unused-action-wrapper .brxc-icon.disable i{
   color: var(--bricks-color-secondary);
   font-size: 14px !important;
}
#brxcClassManagerOverlay .col-left li .brxc-icon *{
   pointer-events: none;
}
#brxcClassManagerOverlay .col-left li .brxc-icon i{
   font-size: 10px;
}
#brxcClassManagerOverlay .col-left li .brxc-icon {
   opacity:.5;
   cursor: pointer;
}
#brxcClassManagerOverlay .col-left li .brxc-icon:hover {
   opacity:1;
}
#brxcClassManagerOverlay .col-left li .span-wrapper{
   display: flex;
   flex: 1;
}

#brxcClassManagerOverlay .col-left li.bulk-action-Rename input[type="text"],
#brxcClassManagerOverlay .col-left li.bulk-action-Duplicate input[type="text"]{
   all: unset;
   line-height: 32px;
   color: var(--builder-color);
   font-family: Consolas,monaco,Courier New,monospace;
   font-size: 11px;
   white-space: nowrap;
   flex: 1;
}

#brxcClassManagerOverlay .col-right fieldset{
   display: grid;
   padding: 16px 16px 0 16px;
   margin-bottom: 32px;
   color: var(--builder-color-accent);
   border-radius: var(--builder-border-radius);
   border: 1px solid;
   border-color: var(--builder-bg-2);
}
@media screen and (min-width: 1400px){
   #brxcClassManagerOverlay .col-right fieldset{
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 40px;
   }
}
#brxcClassManagerOverlay .col-right fieldset > div{
   break-inside: avoid;
   min-height: 102px;
}


#brxcClassManagerOverlay .col-right legend{
   padding: 0 10px;
}

#brxcClassManagerOverlay .col-left li.bulk-action-Duplicate[data-enable="true"] {
   background-color: #11b76b20;
}
#brxcClassManagerOverlay .col-left li.bulk-action-Duplicate[data-enable="true"] span span.brxc_changes{
   color: var(--bricks-text-success) !important;
}
#brxcClassManagerOverlay .col-left li.bulk-action-Permadelete[data-enable="true"] {
   background-color: #fa436220;
}
#brxcClassManagerOverlay .col-left li.bulk-action-Permadelete[data-enable="true"] span{
   color: var(--bricks-text-danger) !important;
}



#brxcClassManagerOverlay .brxc-class-manager__content-used ul::after {
   content: '';
   flex-grow: 999;
}
#brxcClassManagerOverlay .brxc-class-manager__content-used ul,
#brxcClassManagerOverlay .brxc-class-manager__content-used-sitewide ul {
   gap: 4px;
}
#brxcClassManagerOverlay .brxc-class-manager__content-used-sitewide ul {
   flex-direction: column;
}
#brxcClassManagerOverlay .brxc-class-manager__content-used > label,
#brxcClassManagerOverlay .brxc-class-manager__content-used-sitewide > label,
#brxcClassManagerOverlay .brxc-class-manager__content-used > label span,
#brxcClassManagerOverlay .brxc-class-manager__content-used-sitewide > label span{
   white-space: unset;
   text-wrap-style: pretty;
}

#brxcClassManagerOverlay .brxc-class-manager__content-used li,
#brxcClassManagerOverlay .brxc-class-manager__content-used-sitewide li{
   display: flex;
   align-items: center;
   background-color: var(--builder-bg-2);
   color: var(--builder-color);
   padding: 4px 12px 4px 10px;
   border-radius: var(--builder-border-radius);
   list-style: none;
   opacity: 1;
   cursor: pointer;
   white-space: nowrap;
   gap: 10px;
   max-width: 100%;
   flex-grow: 1;
   position: relative
 }
 #brxcClassManagerOverlay .brxc-class-manager__content-used-sitewide li a::before {
   content: '';
   position: absolute;
   inset: 0;
 }
 #brxcClassManagerOverlay .brxc-class-manager__content-used li:hover,
 #brxcClassManagerOverlay .brxc-class-manager__content-used-sitewide li:hover {
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
 }

 #brxcClassManagerOverlay .brxc-class-manager__content-used li.component,
 #brxcClassManagerOverlay .brxc-class-manager__content-used-sitewide li.component{
   color: var(--builder-color-component);
 }
 #brxcClassManagerOverlay .brxc-class-manager__content-used li.component:hover,
 #brxcClassManagerOverlay .brxc-class-manager__content-used-sitewide li.component:hover{
   background-color: var(--builder-bg-component);
 }

 #brxcClassManagerOverlay .brxc-class-manager__content-used li *{
   pointer-events: none;
 }

  #brxcClassManagerOverlay .brxc-class-manager__content-used .icon,
  #brxcClassManagerOverlay .brxc-class-manager__content-used-sitewide .icon{
   display: flex;
   font-size: 14px;
   justify-content: center;
   line-height: var(--builder-structure-input-height);
   opacity: .5;
   pointer-events: none;
 }
 #brxcClassManagerOverlay .brxc-class-manager__content-used-sitewide a {
   text-overflow: ellipsis;
   overflow: hidden;
 }

  #brxcClassManagerOverlay .brxc-class-manager__content-used span,
  #brxcClassManagerOverlay .brxc-class-manager__content-used-sitewide span{
   font-size: 14px;
   font-family: Inter, sans-serif;
   line-height: 1.8em;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }

 #brxcGridUlilityCanvas td:first-child::before {
   content: '.';
   position: absolute;
   bottom: 12px;
   left: 9px;
}
#brxcGridUlilityCanvas .ti-trash{
   cursor: pointer;
}
.brxc-overlay__pannel.brxc-overlay__pannel p[data-control]{
   margin-bottom: 16px;
}

/*--------------------------------------
Find & replace & Extend
--------------------------------------*/

#brxcFindReplaceModal .brxc-select,
#brxcExtendModal .brxc-select{
   min-height: 36px;
   margin-bottom: 34px;
}
/*--------------------------------------
Unused Classes
--------------------------------------*/
#brxcClassUnusedCanvas {
   display: flex;
   flex-direction: column;
   height: 100%;
}

div#brxcFilterCanvas {
   flex: 1;
}
/*--------------------------------------
Sticky CSS
--------------------------------------*/

body.at-full-screen:has(#bricks-structure [data-controlkey="_cssStickyCSS"].at-full-screen) #bricks-structure,
body.at-full-screen:has(#bricks-structure [data-controlkey="_cssStickyCSS"].at-full-screen) #bricks-structure main.panel-content{
   z-index: 99999;
   overflow: auto;
}

body.at-full-screen #bricks-structure main.panel-content #brxcHideFloatingBar{
   display: none;
}

 #brxc-sticky-css{
   display: none;
 }
 body.at-has-sticky-css #brxc-sticky-css {
   height: 40vh;
   display: flex;
   flex-direction: column;
   flex: 1;
   position: sticky;
   bottom: 0;
   background-color: var(--builder-bg);
   grid-column: 1 / 2;
   border-top: 1px solid var(--builder-bg-3);
   z-index: 9999;
}

#brxc-sticky-css [data-controlkey="_cssStickyCSS"],
#brxc-sticky-css [data-controlkey="_cssStickyCSS"] .control,
#brxc-sticky-css [data-controlkey="_cssStickyCSS"] .control-inner,
#brxc-sticky-css [data-controlkey="_cssStickyCSS"] .control-inner [data-control="textarea"],
#brxc-sticky-css .CodeMirror{
   display: flex;
   flex-direction: column;
   flex: 1;
   max-height: 100%;
}
#brxc-sticky-css [data-controlkey="_cssStickyCSS"] {
   padding: 12px 20px 20px 20px;
   flex-grow: 9999;
}
#brxc-sticky-css [data-controlkey="_cssStickyCSS"] .control-inner{
   overflow: hidden;
}
#brxc-sticky-css [data-controlkey="_cssStickyCSS"] label{
   margin:0;
   height: 28px;
}

#brxc-sticky-css [data-controlkey="_cssStickyCSS"] [data-control="textarea"]{
   flex-grow: 9999;
   max-height: calc(100% - 28px) !important;
}

#brxc-sticky-css #brxcSuperPowerCSSAIpromptContainer {
   bottom: 0px;
}

#brxc-sticky-css-resizable{
   width: 100%;
   min-height: 8px;
   transition: 300ms background-color ease;
   background-color: var(--builder-bg);
}
#brxc-sticky-css-resizable:hover{
   background-color: var(--builder-bg-2);
   cursor: ns-resize;
}
#brxc-sticky-css .brxc-sticky-css__control-wrappper{
   display: flex;
   gap: 2px;
}
#brxc-sticky-css .brxc-sticky-css__control-wrappper > div:first-child{
   z-index: 999;
}
#brxc-sticky-css .brxc-sticky-css__control-wrappper .plain-classes-icon{
   align-items: center;
    background-color: var(--builder-bg-2);
    border-top-right-radius: var(--builder-border-radius);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    font-size: 10px;
    justify-content: center;
    min-width: 28px;
    aspect-ratio: 1;
    color: var(--builder-color);
    font-weight: 700;
}
#brxc-sticky-css .brxc-sticky-css__control-wrappper .plain-classes-icon:hover{
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
}

.brxc-toggle-computed.active{
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
}

/*--------------------------------------
Class Converter
 --------------------------------------*/
 #brxcClassConvertCanvas .disable{
   opacity: .3;
   cursor: not-allowed;
 }
 #brxcClassConvertCanvas .disable input{
   pointer-events: none;
 }
 #brxcClassConvertCanvas ul,
 .brxc-custom-components__preview-container{
   padding: 10px 10px 5px;
   display: flex;
   flex-direction: column;
   margin-top: 0;
   border-radius: var(--builder-border-radius);
   background-color: var(--builder-bg-2);
   margin-bottom: 25px;
 }
.brxc-custom-components__preview-container {
   max-height: 375px;
   overflow: scroll;
}
#brxcClassConvertCanvas li,
#brxcClassBulkActionList li,
#brxcClassUnusedList li,
.brxc-custom-components__preview-container li{
   display: flex;
   background-color: var(--builder-bg-3);
   color: var(--builder-color);
   padding: 4px 6px 4px 10px;
   border-radius: var(--builder-border-radius);
   margin: 0 0 5px;
   list-style: none;
   margin-left: calc(var(--margin) * 20px);
}
#brxcClassConvertCanvas li.parent{
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
}
 #brxcClassConvertCanvas li.parent.component{
   background-color: var(--builder-bg-component);
}
#brxcClassConvertCanvas li{
   opacity: .3;
}
#brxcClassConvertCanvas li.active{
   opacity: 1;
}
#brxcClassConvertCanvas li .icon,
.brxc-custom-components__preview-container li .icon{
   display: flex;
   font-size: 14px;
   line-height: var(--builder-structure-input-height);
   opacity: .5;
   align-items: center;
   pointer-events: auto;
   margin-right: 10px;
}
#brxcClassConvertCanvas li .icon:hover{
   opacity: 1;
}

#brxcClassConvertCanvas li input{
   all: unset;
   flex: 1;
   overflow: hidden;
   position: relative;
   text-overflow: ellipsis;
   white-space: nowrap;
   padding-right: 8px;
   color: var(--builder-color-accent);
   width: 100%;
}
#brxcClassConvertCanvas li span.brxc-class-exists{
   width: 6px;
   height: 6px;
   align-self: center;
   margin-right: 5px;
   margin-left: auto;
   border-radius: 50%;
}
#brxcClassConvertCanvas li span.brxc-class-exists[data-exists="false"]{
   background-color: var(--bricks-text-success);
}
#brxcClassConvertCanvas li span.brxc-class-exists[data-exists="duplicate"] {
   background-color: var(--bricks-text-warning);
}
#brxcClassConvertCanvas li span.brxc-class-exists[data-exists="true"] {
   background-color: var(--bricks-text-danger);
}
#brxcClassConvertCanvas li button{
   all: unset;
   cursor: pointer;
   position: relative;
   padding: 0 4px;
}
#brxcClassConvertCanvas li button:focus {
   outline: 1px dotted;
}

#brxcClassConvertCanvas li button i{
   color: var(--builder-color-accent);
}
#brxcClassConvertCanvas li button i.fa-toggle-off {
   color: var(--bricks-color-secondary);
}

#brxcClassConverterOverlay .input-wrapper{
   display: flex;
   gap: 10px;
   position: sticky;
   top: 0;
   z-index: 1;
   background-color: var(--builder-bg);
   padding-top: 16px;
}
#brxcClassConverterOverlay #classConverterGrpWrapper{
   position: relative;
}
#brxcClassConverterOverlay #classConverterGrpWrapper .autocomplete-items.bricks-control-popup.bottom {
   box-shadow: 0 6px 12px 0 rgb(0 0 0 / 50%);
   max-width: 100%;
   overflow-y: scroll;
   overflow-x: hidden;
   padding: 0;
   height: max-content;
   max-height: 400px;
   min-width: 200px;
   text-align: left;
}

#brxcClassConverterOverlay #classConverterGrpWrapper .autocomplete-items.bricks-control-popup.bottom {
  top: 42px;
  color: var(--builder-color);
}

#brxcClassConverterOverlay #classConverterGrpWrapper .autocomplete-items.bricks-control-popup.bottom ul {
   padding: 0;
   margin: 3px;
}

/*--------------------------------------
Query Manager
 --------------------------------------*/

#queryManagerUI {
   display: grid;
   grid-template-columns: 2fr 3fr;
   gap: 40px;
   height: 100%;
}

#queryManagerUI__left{
   overflow: auto;
    display: grid;
    grid-template-areas:
        ". a"
        "b c";
    grid-template-columns: 2fr 5fr;
    grid-template-rows: 40px auto;
}
#queryManagerUI .queryManagerUI__cat {
   width: 100%;
    position: sticky;
    top: 40px;
    height: fit-content;
    min-width: 140px;
    grid-area: b;
    z-index: 1;
}
#brxcQueryCatListCanvas input{
   background-color: unset;
   border-radius: unset;
   padding: 0;
   margin: 0;
   width: 100%;
   line-height: 32px;
   font-size: 12px;
}
#brxcQueryCatListCanvas input#addNewQueryCat{
   margin: 0 10px;
}
#brxcQueryCatListCanvas input[readonly]{
   cursor: pointer;
}

#queryManagerUI input::placeholder{
   opacity: var(--builder-placeholder-opacity);
   color: var(--builder-color)
}
#brxcQueryCatListCanvas ul {
   list-style-type: none;
   margin: 0;
   padding: 0px;
   z-index: 5;
}
#brxcQueryCatListCanvas li {
   padding: 0px 20px 0 10px;
 }
 #brxcQueryCatListCanvas li:hover {
   background-color: var(--builder-bg-3);
}
#brxcQueryCatListCanvas li.active,#brxcQueryCatListCanvas li.dragged{
   background-color: var(--builder-bg-2);
}
#brxcQueryCatListCanvas li span.count,
#brxcQueryCatListCanvas li div.deleteCat {
   background-color: var(--builder-bg-2);
   height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--builder-border-radius);
   font-size: 9px !important;
   padding: 0 6px;
}
#brxcQueryCatListCanvas li span.count{
   pointer-events: none;
}
#brxcQueryCatListCanvas li div.deleteCat span{
   color: var(--bricks-text-danger) !important;
}

#brxcQueryCatListCanvas li.active input{
   color: var(--builder-color-accent) !important;
}
#brxcQueryCatListCanvas li.active span{
   font-size: 9px;
}
#queryManagerUI .queryManagerUI__querys {
   width: 100%;
   height: 100%;
   background-color: var(--builder-bg-2);
   grid-area: c;
}

#queryManagerUI .brxc-overlay__search-box{
   margin-bottom: 0px;
   position: sticky;
   top: 0px;
   z-index: 10;
   grid-area: a;
}
#queryManagerUI .brxc-overlay__search-box input[type="text"] {
   background-color: var(--builder-bg-3);
   border-radius: 0;
   border-top-right-radius: var(--builder-border-radius);
   border-top-left-radius: var(--builder-border-radius);
}
.queryManagerUI__querys {
   display: flex;
   flex-direction: column;
   border-bottom-right-radius: var(--builder-border-radius);
   border-bottom-left-radius: var(--builder-border-radius);
   overflow: hidden;
}
#queryManagerUI__list {
   display: flex;
   flex-direction: column;
   list-style: none;
   padding: 0;
   margin: 0;
   background-color: var(--builder-bg-2);
   overflow: scroll;
   flex: 1;
}
#queryManagerUI__list li {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 5px 8px;
   cursor: pointer;
}
#queryManagerUI__list li span{
   color: var(--builder-color);
   font-size: 14px;
   pointer-events: none;
   flex: 1;
}
#queryManagerUI__list li .actions{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
}
#queryManagerUI__list li .actions > div{
   cursor: pointer;
}
#queryManagerUI__list li .actions > div *{
   pointer-events: none;
}

#queryManagerUI__list li .actions i{
   pointer-events: none;
   font-size: 10px;
   color: var(--builder-color);

}
#queryManagerUI__list li:hover span {
   color: var(--builder-color-accent);
}
#queryManagerUI__list li.active {
   background-color: var(--builder-bg-accent);
   cursor: unset;
}
#queryManagerUI__list li.active i,
#queryManagerUI__list li.active span{
   color: var(--builder-color-accent);
}
#queryManagerUI__list li .actions .delete i{
   margin-left: 3px;
   color: var(--bricks-text-danger);
}

#queryManagerUI__panel {
   display: flex;
   flex-direction: column;
   gap: 20px;
}
.brxc-query-manager__title-wrapper {
   display: flex;
   gap: 20px
}
.brxc-query-manager__title-wrapper > * {
   flex: 1;
   position: relative;
}
#queryManagerUI__panel .autocomplete-items.bricks-control-popup.bottom {
   top: unset;
   color: var(--builder-color);
}
#queryManagerUI__panel .autocomplete-items ul {
   list-style-type: none;
   margin: 0;
   padding: 0px;
   z-index: 5;
}
#queryManagerUI__panel input {
   background-color: transparent;
   border-radius: 0;
   box-shadow: none!important;
   cursor: inherit;
   height: var(--builder-structure-input-height);
   outline: none;
   border: none;
   color: var(--builder-color);
   overflow: hidden;
   position: relative;
   text-overflow: ellipsis;
   padding: 24px 0;
   font-size: 28px;
   border-bottom: 1px solid var(--builder-gray-5);
}
#queryManagerUI__panel textarea {
   margin: 0;
}
#queryManagerUI__panel .codemirror-wrapper,
#queryManagerUI__panel .CodeMirror{
   flex: 1;
    display: flex;
    flex-direction: column;
}

#bricks-panel-element [data-controlkey="query"] [controlkey="query"]{
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
   gap: 3px;
   flex-basis: unset !important;
   min-width: 90px;
   margin-left: 0;
}
#bricks-panel-element [data-controlkey="query"] [controlkey="query"] .bricks-control-preview {
   margin-left: 0;
}
.brxc-global-query-loops {
   display: flex;
   align-items: center;
   justify-content: center;
   position: static;
}
.brxc-global-query-loops .icon{
   background-color: var(--builder-bg-2);
   border-radius: 99vw;
   padding: 5px;
   cursor: pointer;
   height: 28px;
   width: 28px;
   aspect-ratio: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--builder-color);
   position: relative;
}
.brxc-global-query-loops.active .icon {
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
}
.brxc-global-query-loops .bricks-svg-wrapper,
.brxc-global-query-loops .bricks-svg-wrapper *{
   pointer-events: none;
}
.brxc-global-query-loops i {
   font-size: 10px;
}

.brxc-global-query-loops .bricks-control-popup{
   padding: 0;
}
.brxc-global-query-loops:before,
.brxc-global-query-loops .bricks-control-popup:before {
   right: 42px;
}
.brxc-global-query-loops .bricks-control-popup .input-wrapper{
   padding: 13px 10px 5px;
}
.brxc-global-query-loops .bricks-control-popup .title {
   color: currentcolor;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .2px;
   line-height: var(--builder-input-height);
   margin: 0;
   padding: 0 10px;
   position: relative;
   text-transform: uppercase
}

.brxc-global-query-loops .bricks-control-popup .title:before {
   background-color: var(--builder-bg);
   content: "";
   height: 1px;
   left: 0;
   position: absolute;
   right: 0;
   top: 0
}

.brxc-global-query-loops .bricks-control-popup .title span {
   opacity: .5
}

.brxc-global-query-loops .bricks-control-popup .css-classes {
   max-height: 50vh;
   min-height: 300px;
   overflow-y: scroll;
   scrollbar-color: rgba(0,0,0,.4) rgba(0,0,0,.2);
   scrollbar-width: thin
}

.brxc-global-query-loops .bricks-control-popup .css-classes::-webkit-scrollbar {
   width: 8px
}

.brxc-global-query-loops .bricks-control-popup .css-classes::-webkit-scrollbar-thumb {
   background-color: transparent
}

.brxc-global-query-loops .bricks-control-popup .css-classes::-webkit-scrollbar-track {
   background-color: rgba(0,0,0,.2)
}

.brxc-global-query-loops .bricks-control-popup .css-classes::-webkit-scrollbar-thumb {
   background-color: rgba(0,0,0,.4)
}

.brxc-global-query-loops .bricks-control-popup .css-classes::-webkit-scrollbar-thumb:hover {
   background-color: var(--builder-color-accent);
   cursor: default!important
}

.brxc-global-query-loops .bricks-control-popup .css-classes .actions {
   opacity: 0
}

.brxc-global-query-loops .bricks-control-popup .css-classes li:hover .actions {
   opacity: 1
}

.brxc-global-query-loops .bricks-control-popup ul li {
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   line-height: 20px;
   margin: 1px 0;
   padding: 4px 10px
}

.brxc-global-query-loops .bricks-control-popup ul li.locked .actions span.lock {
   opacity: 1
}

.brxc-global-query-loops .bricks-control-popup ul li.locked .actions span.lock svg path {
   fill: var(--bricks-text-danger)!important
}

.brxc-global-query-loops .bricks-control-popup ul li.selected,.brxc-global-query-loops .bricks-control-popup ul li:hover {
   background-color: var(--builder-bg-3)
}
.brxc-global-query-loops .bricks-control-popup ul li.active {
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
}

.brxc-global-query-loops .bricks-control-popup ul li .name {
   font-family: Consolas,monaco,Courier New,monospace;
   font-size: 11px
}

.brxc-global-query-loops .bricks-control-popup ul li .normal {
   text-transform: lowercase
}

.brxc-global-query-loops .bricks-control-popup ul li .actions {
   align-items: center;
   display: flex;
   justify-content: center
}

.brxc-global-query-loops .bricks-control-popup ul li .actions span {
   border-radius: var(--builder-border-radius);
   cursor: pointer;
   height: 16px;
   line-height: 1;
   margin: 0 2px;
   opacity: .5;
   width: 16px
}

.brxc-global-query-loops .bricks-control-popup ul li .actions span:hover {
   opacity: 1
}

.brxc-global-query-loops .bricks-control-popup ul li .actions span:hover.delete {
   background-color: var(--bricks-text-danger)!important;
   color: #fff!important
}

.brxc-global-query-loops .bricks-control-popup ul li .actions span:hover.confirm {
   background-color: var(--bricks-text-success)!important;
   color: #fff!important
}

/*--------------------------------------
Prompt Manager
 --------------------------------------*/

 #promptManagerUI {
   display: grid;
   grid-template-columns: 3fr 2fr;
   gap: 40px;
   height: 100%;
}

#promptManagerUI__left{
   overflow: auto;
   display: grid;
   grid-template-areas:
      ". a"
      "b c";
   grid-template-columns: 180px 1fr;
   grid-template-rows: 40px auto;
}
#promptManagerUI .promptManagerUI__cat {
   width: 100%;
    position: sticky;
    top: 40px;
    height: fit-content;
    min-width: 140px;
    grid-area: b;
    z-index: 1;
}
#brxcPromptCatListCanvas input{
   background-color: unset;
   border-radius: unset;
   padding: 0;
   margin: 0;
   width: 100%;
   line-height: 32px;
   font-size: 12px;
}
#brxcPromptCatListCanvas input#addNewPromptCat{
   margin: 0 10px;
}
#brxcPromptCatListCanvas input[readonly]{
   cursor: pointer;
}

#promptManagerUI input::placeholder{
   opacity: var(--builder-placeholder-opacity);
   color: var(--builder-color)
}
#brxcPromptCatListCanvas ul {
   list-style-type: none;
   margin: 0;
   padding: 0px;
   z-index: 5;
}
#brxcPromptCatListCanvas li {
   padding: 0px 20px 0 10px;
 }
 #brxcPromptCatListCanvas li:hover {
   background-color: var(--builder-bg-3);
}

#brxcPromptCatListCanvas li.active,#brxcPromptCatListCanvas li.dragged{
   background-color: var(--builder-bg-2);
}
#brxcPromptCatListCanvas li span.count,
#brxcPromptCatListCanvas li div.deleteCat {
   background-color: var(--builder-bg-2);
   height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--builder-border-radius);
   font-size: 9px !important;
   padding: 0 6px;
}
#brxcPromptCatListCanvas li span.count{
   pointer-events: none;
}
#brxcPromptCatListCanvas li div.deleteCat span{
   color: var(--bricks-text-danger) !important;
}

#brxcPromptCatListCanvas li.active input{
   color: var(--builder-color-accent) !important;
}
#brxcPromptCatListCanvas li.active span{
   font-size: 9px;
   background: var(--builder-bg-3);
}
#promptManagerUI .promptManagerUI__prompts {
   width: 100%;
   height: 100%;
   background-color: var(--builder-bg-2);
   grid-area: c;
}

#promptManagerUI .brxc-overlay__search-box{
   margin-bottom: 0px;
   position: sticky;
   top: 0px;
   z-index: 10;
   grid-area: a;
}
#promptManagerUI .brxc-overlay__search-box input[type="text"] {
   background-color: var(--builder-bg-3);
   border-radius: 0;
   border-top-right-radius: var(--builder-border-radius);
   border-top-left-radius: var(--builder-border-radius);
}
.promptManagerUI__prompts {
   display: flex;
   flex-direction: column;
   border-bottom-right-radius: var(--builder-border-radius);
   border-bottom-left-radius: var(--builder-border-radius);
   overflow: hidden;
}
#promptManagerUI__list {
   display: flex;
   flex-direction: column;
   list-style: none;
   padding: 0;
   margin: 0;
   background-color: var(--builder-bg-2);
   overflow: scroll;
   flex: 1;
}
#promptManagerUI__list li {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 5px 8px;
   cursor: pointer;
}
#promptManagerUI__list li span{
   color: var(--builder-color);
   font-size: 14px;
   pointer-events: none;
   flex: 1;
}
#promptManagerUI__list li .actions{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
}
#promptManagerUI__list li .actions > div{
   cursor: pointer;
}
#promptManagerUI__list li .actions > div *{
   pointer-events: none;
}

#promptManagerUI__list li .actions i{
   pointer-events: none;
   font-size: 10px;
   color: var(--builder-color);

}
#promptManagerUI__list li:hover span {
   color: var(--builder-color-accent);
}
#promptManagerUI__list li.active {
   background-color: var(--builder-bg-accent);
   cursor: unset;
}
#promptManagerUI__list li.active i,
#promptManagerUI__list li.active span{
   color: var(--builder-color-accent);
}
#promptManagerUI__list li .actions .delete i{
   margin-left: 3px;
   color: var(--bricks-text-danger);
}

#promptManagerUI__panel {
   display: flex;
   flex-direction: column;
   gap: 20px;
}
.brxc-prompt-manager__title-wrapper {
   display: flex;
   gap: 20px
}
.brxc-prompt-manager__title-wrapper > * {
   flex: 1;
   position: relative;
}
.brxc-prompt-manager__prompt-wrapper,
.brxc-prompt-manager__prompt-wrapper textarea{
   display: flex;
   flex-direction: column;
   flex-grow: 1;
}
#promptManagerUI__panel .autocomplete-items.bricks-control-popup.bottom {
   top: unset;
   color: var(--builder-color);
}
#promptManagerUI__panel .autocomplete-items ul {
   list-style-type: none;
   margin: 0;
   padding: 0px;
   z-index: 5;
}
#promptManagerUI__panel input {
   background-color: transparent;
   border-radius: 0;
   box-shadow: none!important;
   cursor: inherit;
   height: var(--builder-structure-input-height);
   outline: none;
   border: none;
   color: var(--builder-color);
   overflow: hidden;
   position: relative;
   text-overflow: ellipsis;
   padding: 24px 0;
   font-size: 28px;
   border-bottom: 1px solid var(--builder-gray-5);
}
#promptManagerUI__panel textarea {
   margin: 0;
}
#promptManagerUI__panel .codemirror-wrapper,
#promptManagerUI__panel .CodeMirror{
   flex: 1;
    display: flex;
    flex-direction: column;
}

#bricks-panel-element [data-controlkey="prompt"] [controlkey="prompt"]{
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
   gap: 3px;
   flex-basis: unset !important;
   min-width: 90px;
   margin-left: 0;
}
.brxc-global-prompt-loops {
   display: flex;
   align-items: center;
   justify-content: center;
   position: static;
}
.brxc-global-prompt-loops .icon{
   background-color: var(--builder-bg-2);
   border-radius: 99vw;
   padding: 5px;
   cursor: pointer;
   height: 28px;
   width: 28px;
   aspect-ratio: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--builder-color);
   position: relative;
}
.brxc-global-prompt-loops.active .icon {
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
}
.brxc-global-prompt-loops .bricks-svg-wrapper,
.brxc-global-prompt-loops .bricks-svg-wrapper *{
   pointer-events: none;
}
.brxc-global-prompt-loops i {
   font-size: 10px;
}

#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup{
   padding: 0;
}
.brxc-global-prompt-loops:before,
#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup:before {
   right: 64px;
   top: unset;
   bottom: 0;
   rotate: 180deg;
}
#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup .input-wrapper{
   padding: 13px 10px 13px;
    border-top: 1px solid var(--builder-bg);
}
#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup .title {
   color: currentcolor;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .2px;
   line-height: var(--builder-input-height);
   margin: 0;
   padding: 0 13px;
   position: relative;
   text-transform: uppercase;
   padding-top: 10px;
}

#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup .title:before {
   background-color: var(--builder-bg);
   content: "";
   height: 1px;
   left: 0;
   position: absolute;
   right: 0;
   top: 0
}

#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup .title span {
   opacity: .5
}

#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup .css-classes {
   max-height: 50vh;
   min-height: 80px;
   overflow-y: scroll;
   scrollbar-color: rgba(0,0,0,.4) rgba(0,0,0,.2);
   scrollbar-width: thin
}

#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup .css-classes::-webkit-scrollbar {
   width: 8px
}

#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup .css-classes::-webkit-scrollbar-thumb {
   background-color: transparent
}

#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup .css-classes::-webkit-scrollbar-track {
   background-color: rgba(0,0,0,.2)
}

#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup .css-classes::-webkit-scrollbar-thumb {
   background-color: rgba(0,0,0,.4)
}

#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup .css-classes::-webkit-scrollbar-thumb:hover {
   background-color: var(--builder-color-accent);
   cursor: default!important
}

#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup .css-classes .actions {
   opacity: 0
}

#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup .css-classes li:hover .actions {
   opacity: 1
}

#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup ul li {
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   line-height: 20px;
   margin: 1px 0;
   padding: 5px 13px;
}

#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup ul li.locked .actions span.lock {
   opacity: 1
}

#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup ul li.locked .actions span.lock svg path {
   fill: var(--bricks-text-danger)!important
}

#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup ul li.selected,#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup ul li:hover {
   background-color: var(--builder-bg-3)
}
#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup ul li.active {
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
}

#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup ul li .name {
   font-family: Consolas,monaco,Courier New,monospace;
   font-size: 11px;
   pointer-events: none;
}

#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup ul li .normal {
   text-transform: lowercase
}

#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup ul li .actions {
   align-items: center;
   display: flex;
   justify-content: center
}

#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup ul li .actions span {
   border-radius: var(--builder-border-radius);
   cursor: pointer;
   height: 16px;
   line-height: 1;
   margin: 0 2px;
   opacity: .5;
   width: 16px
}

#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup ul li .actions span:hover {
   opacity: 1
}

#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup ul li .actions span:hover.delete {
   background-color: var(--bricks-text-danger)!important;
   color: #fff!important
}

#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup ul li .actions span:hover.confirm {
   background-color: var(--bricks-text-success)!important;
   color: #fff!important
}
/*--------------------------------------
Advanced CSS
 --------------------------------------*/
#advancedCSSUI{
   height: 100%;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   position: relative;
}
#advancedCSSUI__loader {
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: var(--builder-bg);
   z-index: -1;
   pointer-events: none;
}
#advancedCSSUI__loader.active {
   z-index: 9999;
}
#advancedCSSUI__header,
#advancedCSSUI__body {
   display: grid;
   grid-template-columns: 320px 1fr;
   gap: 0px;
   flex: 1;
   overflow: hidden;
}
#advancedCSSUI__body {
   height: 100%;
}

#advancedCSSUI__panel {
   overflow: hidden;
   display: flex;
   flex-direction: column;
}
.brxc-overlay__wrapper.sidebar #advancedCSSUI__body {
   grid-template-rows: auto 1fr;
   grid-template-columns: 1fr;
   height: 100%;
}
.brxc-overlay__wrapper.sidebar #advancedCSSUI__header{
   display: flex;
   flex-direction: column;
}
.brxc-overlay__wrapper.sidebar #advancedCSSUI__header,
.brxc-overlay__wrapper.sidebar #advancedCSSUI .brxc-overlay__search-box{
   display: none
}
.brxc-overlay__wrapper.sidebar #brxcAdvancedCSSCatListCanvas{
   margin-bottom: 14px;
}
.brxc-overlay__wrapper.sidebar #brxcAdvancedCSSCatListCanvas .brxc-select{
   min-height: 36px;
   align-items: center;
}

.brxc-overlay__wrapper.sidebar #advancedCSSUI .brxc-icon-container {
   gap: 8px;
   display: flex;
   align-items: center;
   margin-left: 14px;
}
.brxc-overlay__wrapper.sidebar #advancedCSSUI .brxc-icon-container .brxc-icon {
   font-size: 12px;
   color: var(--builder-color);
   cursor: pointer;
   opacity: .5;
}
.brxc-overlay__wrapper.sidebar #advancedCSSUI .brxc-icon-container .brxc-icon:hover {
   opacity: 1;
}

.brxc-overlay__wrapper.sidebar #advancedCSSUI .brxc-toggle-palette {
   margin-left: 16px;
   display: flex;
   align-items: center;
}
.brxc-overlay__wrapper.sidebar #advancedCSSUI .brxc-panel-message{
   margin-top: 8px;
}

#advancedCSSUI__left{
   height: 100%;
   overflow: scroll;
   padding-top: 24px;
   padding-left: 10px;
}
.brxc-overlay__wrapper.sidebar #advancedCSSUI__left{
   overflow: unset;
}
.brxc-overlay__wrapper.sidebar #advancedCSSUI__left{
   padding-top: 0px;
   padding-left: 0px;
}
#advancedCSSUI__left .brxc-overlay__search-box {
   margin-bottom: 20px;
}
#advancedCSSUI__left .brxc-overlay__search-box .iso-search-icon {
   left: 10px;
   opacity: 0.3;
   transition: 200ms opacity ease;
}
#advancedCSSUI__left .brxc-overlay__search-box input[type="text"] {
   opacity: .5;
   padding-left: 30px;
   font-size: 12px;
   border-radius: 0;
   transition: 200ms opacity ease;
}
#advancedCSSUI__left .brxc-overlay__search-box input[type="text"]:focus-within {
   opacity: 1;
}
#advancedCSSUI__left .brxc-overlay__search-box input[type="text"]:focus-within + .iso-search-icon{
   opacity: 1;
}
#advancedCSSUI__left .iso-reset {
   top: 9px;
   right: 9px;
}
#advancedCSSUI__header{
   top: 0;
   position: sticky;
   flex: none;
}
#advancedCSSUI__header .brxc-panel-header{
   display: flex;
   align-items: center;
   gap: 4px;
   color: var(--builder-color);
   margin-bottom: 4px;
   font-size: 14px;
   font-family: Consolas, monaco, Courier New, monospace;
   grid-column: 2/3;
}
#brxcAdvancedCSSToggleType{
   grid-row-start: 2;
   display: flex;
   gap: 8px;
   padding-bottom: 12px;
   padding-left: 10px;
}
#brxcAdvancedCSSToggleType .brxc-overlay__action-btn{
   border: none;
   font-size: 14px;
   padding: 4px 12px;
}
#brxcAdvancedCSSToggleType .brxc-overlay__action-btn.primary {
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
   pointer-events: none;
}
#brxcAdvancedCSSToggleType .brxc-overlay__action-btn.secondary {
   cursor: pointer;
   background-color: var(--builder-bg-2);
}
#brxcAdvancedCSSToggleType .brxc-overlay__action-btn.secondary:hover {
   color: var(--builder-color);
   background-color: var(--builder-bg-3);
}
.brxc-panel-message{
   margin-bottom: 12px;
   font-size: 13px;
   margin-top: 6px;
}
#advancedCSSUI__header .brxc-panel-header,
#advancedCSSUI__header .brxc-panel-message{
   grid-column: 2/3;
}
#advancedCSSUI__header .brxc-panel-header *{
   opacity: .5;
}
#advancedCSSUI__header .brxc-panel-title{
   opacity: 1;
   margin-right: 6px;
}
#advancedCSSUI__header .brxc-panel-options{
   display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--builder-border-radius);
    height: 100%;
    width: fit-content;
    background-color: var(--builder-bg-2);
    color: var(--builder-color);
    opacity: 1;
    cursor: pointer;
    font-size: 12px;
    padding: 0px 7px;
}
#advancedCSSUI__header .brxc-panel-options.active{
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
}
.brxc-overlay__wrapper.sidebar #advancedCSSUI__panel{
   height: 100%;
}
#advancedCSSUI__panel .brxc-advanced-options__wrapper {
   padding: 16px 28px;
   background-color: var(--builder-bg-3);
   margin-bottom: 20px;
   display: flex;
   flex-wrap: wrap;
   gap:16px;
}

#brxcAdvancedCSsMessage {
   margin: 0;
}
#advancedCSSUI__panel .brxc-advanced-options__wrapper > div{
   min-width: 200px;
   flex: 1;
   display: flex;
   flex-direction: column;
}
#advancedCSSUI__panel .brxc-advanced-options__wrapper > .gridUI__input-wrapper {
   flex-direction: row;
   gap: 20px;
   background: var(--builder-bg-2);
   border-radius: var(--builder-border-radius);
   padding: 0px 12px;
   height: 40px;
   align-items: center;
   justify-content: space-between;
}
#advancedCSSUI__panel .brxc-advanced-options__wrapper > .gridUI__input-wrapper label {
   margin: 0;
}
#advancedCSSUI__panel .brxc-advanced-options__wrapper [readonly]{
   opacity: .5;
}
#advancedCSSUI__panel .brxc-advanced-options__wrapper .has-tooltip i{
   color: var(--builder-color)
}
#advancedCSSUI__panel .brxc-advanced-options__wrapper .brxc-select{
   flex-direction:column;
   margin-bottom: 0;  
}

#advancedCSSUI__panel .CodeMirror-gutter.CodeMirror-linenumbers {
   min-width: 34px;
}

#advancedCSSUI__panel .CodeMirror-scroll {
   margin-bottom: 0px;
   margin-right: 0px;
   padding-bottom: 0px;
}
#advancedCSSUI__panel .codemirror-wrapper, #advancedCSSUI__panel .CodeMirror{
   display: flex;
   flex-direction: column;
   flex: 1;
   position: relative;
   overflow-y: auto;
   resize: none;
}
#advancedCSSUI__panel .codemirror-wrapper{
   transition: 300ms border-width ease-in-out;
}

.brxc-error-handling {
   color: #fff;
   padding: 4px 10px;
   border-radius: 4px;
   position: absolute;
   top: 20px;
   right: 10px;
   width: fit-content;
   max-width: min(400px, 50%);
   opacity: 0; 
   visibility: hidden;
   transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, top 0.3s ease-in-out;
   pointer-events: none;
   margin-top: 0 !important;
}

.brxc-error-handling.visible {
   opacity: 1;
   visibility: visible;
   pointer-events: all;
   top: 10px;
}
.brxc-error-handling.error {
   background-color: var(--builder-color-danger);
}
.brxc-error-handling.success {
   background-color: var(--builder-color-success);
   animation: 300ms fade-error-message forwards ease;
   animation-delay: 2000ms;
}

@keyframes fade-error-message {
   100%{
      opacity: 0;
   }
}

#advancedCSSUI__panel .actions {
   fill: var(--builder-color);
   color: var(--builder-color);
   display: flex;
   gap: 4px;
   justify-content: flex-end;
}

#advancedCSSUI__panel .actions > *{
   padding: 9px;
   font-size: 12px;
   display: flex;
   height: 15px;
   align-items: center;
   justify-content: center;
   border-radius: var(--builder-border-radius);
   background-color: var(--builder-bg-3);
   cursor: pointer;
   height: 24px;
   width: 24px;
   border-radius: unset;
   border-top-left-radius: var(--builder-border-radius);
   border-top-right-radius: var(--builder-border-radius);
   background-color: var(--builder-bg-2);
}

#advancedCSSUI .cat-separation:not(.custom){
   margin-bottom: 20px;
}

#advancedCSSUI .cat-separation:not(:has(ul li), .custom),
#advancedCSSUI .cat-separation:not(:has(ul li), .custom) + #addNewAdvancedCSSCat{
   display: none;
}

#advancedCSSUI .brxc-manager__left-menu li {
   padding: 2px 10px 2px 6px;
   gap: 10px;
   user-select: none;
   position: relative;
}
#advancedCSSUI .brxc-manager__left-menu .brxc-advanced-css--change-indicator{
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background-color: var(--builder-color-accent);
   position: absolute;
   left: -10px;
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
}
#advancedCSSUI .brxc-manager__left-menu .brxc-advanced-css-type--label,
#advancedCSSUI__header  .brxc-advanced-css-type--compiled-css,
#advancedCSSUI__header .brxc-advanced-css-type--label{
   background-color: var(--builder-bg-2);
   color: var(--builder-color);
   border-radius: var(--builder-border-radius);
   padding: 4px 16px;
   font-size: 10px;
   font-weight: 800;
   min-width: 55px;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: .7;
   text-transform: uppercase;
   user-select: none;
}
#advancedCSSUI__header .brxc-advanced-css-type--label{
   margin-left: auto;
}
#advancedCSSUI__header .brxc-advanced-css-type--label,
#advancedCSSUI__header .brxc-advanced-css-type--compiled-css{
   min-width: fit-content;
   padding: 4px 10px;
}
#advancedCSSUI__header .brxc-advanced-css-type--compiled-css{
   cursor: pointer;
}
#advancedCSSUI__header .brxc-advanced-css-type--compiled-css.active{
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
}
#advancedCSSUI .brxc-manager__left-menu li.active .brxc-advanced-css-type--label {
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
}
#advancedCSSUI .brxc-readonly--icon i {
    color: var(--builder-color);
    opacity: .5;
    font-size: 14px;
}
#advancedCSSUI .brxc-actions{
   display: flex; 
   align-items: center;
   gap: 4px;
}
#advancedCSSUI .brxc-manager__left-menu .brxc-toggle-palette{
   margin-left: 4px;
   margin-top: 2px;
}
#advancedCSSUI .brxc-manager__left-menu .brxc-toggle-palette > div {
   display: flex;
}
#advancedCSSUI .brxc-manager__left-menu .brxc-toggle-palette i {
   font-size: 17px;
}
.brxc-overlay__wrapper.sidebar #advancedCSSUI .brxc-manager__left-menu .brxc-toggle-palette i {
   font-size: 18px;
   margin-top: 0px;
}
#advancedCSSUI .brxc-manager__left-menu .deleteCat {
   padding: 0 2px;
   padding-top: 1px;
}
#advancedCSSUI .brxc-manager__left-menu .deleteCat i {
   font-size: 13px;

}
#advancedCSSUI span.title {
   color: var(--builder-color);
   opacity: 0.3;
   font-weight: 800;
   text-transform: uppercase;
   font-size: 14px;
   margin-bottom: 4px;
   display: block;
}
#addNewAdvancedCSSCat{
   padding-left: 10px;
}
#brxcCpImporterAIContainer{
   overflow: visible;
}
#brxcAdvancedCSSAIpromptContainer,
#brxcSuperPowerCSSAIpromptContainer,
#brxcCpConverterAIpromptContainer{
   background-color: #282c34;
   padding-left: 35px;
}
#brxcCpConverterAIpromptContainer{
   padding: 0;

}
#brxcSuperPowerCSSAIpromptContainer{
   position: sticky;
   bottom: 50px;
}
#brxcSuperPowerCSSAIpromptContainer{
   padding-left: 29px;
}
#brxcAdvancedCSSAIpromptWrapper,
#brxcSuperPowerCSSAIpromptWrapper,
#brxcCpConverterAIpromptWrapper {
   display: flex;
   gap: 12px;
   padding: 12px 12px;
   align-items: stretch;
   background-color: var(--builder-bg-3);
   --btn-size: 40px;
}
#brxcSuperPowerCSSAIpromptWrapper {
   --btn-size: 30px;
}
#brxcAdvancedCSSAIpromptWrapper.readonly,
#brxcSuperPowerCSSAIpromptWrapper.readonly,
#brxcCpConverterAIpromptWrapper.readonly{
   opacity: 0.7;
   cursor: not-allowed !important;
}
#brxcAdvancedCSSAIpromptWrapper.readonly *,
#brxcSuperPowerCSSAIpromptWrapper.readonly *,
#brxcCpConverterAIpromptWrapper.readonly *{
   pointer-events: none;
}

#brxcCpConverterAIpromptWrapper input{
   display: none;
}
#brxcCpConverterAIpromptWrapper #brxcCpConverterDropzone{
   height: 40px;
   border: 3px dotted var(--builder-color-knob);
   color: var(--builder-color);
   opacity: .6;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 4px 16px;
   margin: 0;
   border-radius: var(--builder-border-radius);
   font-size: 13px;
   white-space: nowrap;
   user-select: none;
   position: relative;
   background-color: var(--builder-bg);
}

#brxcCpConverterAIpromptWrapper #brxcCpConverterDropzone:hover,
#brxcCpConverterAIpromptWrapper #brxcCpConverterDropzone.hover{
   opacity: 1;
}

#brxcCpConverterAIpromptWrapper #brxcCpConverterDropzone .dropzone-content {
   display: flex;
   align-items: center;
   flex-direction: row;
   gap: 10px;
   max-width: 250px;
   overflow: hidden;
}
#brxcCpConverterAIpromptWrapper #brxcCpConverterDropzone .dropzone-content #previewImage img{
   max-height: 30px;
   width: auto;
   border: 1px solid var(--builder-bg-3);
}
#brxcCpConverterAIpromptWrapper #brxcCpConverterDropzone .dropzone-content #previewImage i{
   max-height: 30px;
   width: auto;
}
#brxcCpConverterAIpromptWrapper #brxcCpConverterDropzone .dropzone-content #fileInfo {
   text-overflow: ellipsis;
   overflow: hidden;
}
#brxcCpConverterAIpromptWrapper #brxcCpConverterDropzone #removeImage {
   --offset: -9px;
   position: absolute;
   top: var(--offset);
   right: var(--offset);
   font-size: 9px;
   height: calc(var(--offset) * -2);
   width: calc(var(--offset) * -2);
   align-items: center;
   justify-content: center;
   background-color: var(--builder-color-danger);
   color: var(--builder-color);
   border-radius: 99vw;
   display: none;
}
#brxcAdvancedCSSAIEdit,
#brxcSuperPowerCSSAIEdit,
#brxcSuperPowerCSSAIPlus {
   display: flex;
   min-height: var(--btn-size);
   max-height: var(--btn-size);
   min-width: var(--btn-size);
   min-width: var(--btn-size);
   align-items: center;
   justify-content: center;
   align-self: flex-end;
   padding: 10px;
   background-color: var(--builder-bg-2);
   border-radius: 3px;
   cursor: pointer;
}
#brxcAdvancedCSSAIEdit.active,
#brxcSuperPowerCSSAIEdit.active,
#brxcSuperPowerCSSAIPlus.active {
   background-color: var(--builder-bg-accent);
}
#brxcAdvancedCSSAIEdit i,
#brxcSuperPowerCSSAIEdit i,
#brxcSuperPowerCSSAIPlus i{
   color: var(--builder-color);
   pointer-events: none;
}
#brxcAdvancedCSSAIEdit.active i,
#brxcSuperPowerCSSAIEdit.active i,
#brxcSuperPowerCSSAIPlus.active i{
   color: var(--builder-color-accent);
}
#brxcAdvancedCSSAIprompt,
#brxcSuperPowerCSSAIprompt,
#brxcCpConverterAIprompt {
   max-height: 150px;
   height: var(--btn-size);
   min-height: var(--btn-size);
   margin: 0;
   padding: 7px 11px !important;
   resize: none;
   transition: none;
}
#brxcSuperPowerCSSAIprompt:focus {
   background-color: var(--builder-bg-2);
}
#brxcAdvancedCSSAISendRequest,
#brxcSuperPowerCSSAISendRequest,
#brxcSuperPowerCSSAIUndo,
#brxcCpConverterAISendRequest{
   background-color: var(--builder-color);
   min-height: var(--btn-size);
   max-height: var(--btn-size);
   min-width: var(--btn-size);
   min-width: var(--btn-size);
   display: flex;
   align-items: center;
   justify-content: center;
   align-items: center;
   align-self: flex-end;
   margin-left: 6px;
   border-radius: 50%;
   opacity: .7;
   transition: 150ms opacity ease;
   cursor: pointer;
}
#brxcSuperPowerCSSAIUndo{
   margin-left: 2px;
}
#brxcAdvancedCSSAISendRequest:hover,
#brxcSuperPowerCSSAISendRequest:hover,
#brxcSuperPowerCSSAIUndo:hover,
#brxcCpConverterAISendRequest:hover {
   opacity: 1;
}
#brxcSuperPowerCSSAISendRequest.disable,
#brxcCpConverterAISendRequest.disable {
   opacity: .5;
   cursor: not-allowed;
}
#brxcAdvancedCSSAISendRequest i,
#brxcSuperPowerCSSAISendRequest i,
#brxcSuperPowerCSSAIUndo i,
#brxcCpConverterAISendRequest i{
   font-size: 20px;
   pointer-events: none;
   color: initial;
}
#brxcSuperPowerCSSAISendRequest.disable i,
#brxcCpConverterAISendRequest.disable i{
   animation: rotateIcon 800ms linear infinite;
}

@keyframes rotateIcon {
   from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
}


#brxcSuperPowerCSSAIpromptWrapper .bricks-control-popup.bottom {
   top: unset;
   bottom: 52px;
   left: 29px;
}

/*--------------------------------------
Quick Search
 --------------------------------------*/

#brxcQuickSearch {
   position: fixed;
   top: 130px;
   left: 50%;
   transform: translateX(-50%);
   box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .5);
   min-width: 620px;
   width: max(725px, 35%);
   z-index: 2002;
}
#brxcQuickSearch .brxc-overlay__close-btn{
   top: -20px;
   right: -20px;
}
#brxcQuickSearch > div{
   margin: 0;
}
#brxcQuickSearch .brxc-overlay__search-box input[type="text"] {
   border-radius: .25rem .25rem 0 0;
   background-color: var(--builder-bg);
}
#brxcQuickSearch .brxc-overlay__search-box .iso-reset {
   top: 9px;
}
div#brxcQuickSearchResults > #brxcQuickSearchHeader {
   display: flex;
   gap: 8px;
   padding: 12px 20px;
   margin: 0;
   list-style: none;
   overflow: auto;
}
div#brxcQuickSearchResults > #brxcQuickSearchHeader > li{
   background-color: var(--builder-bg-3);
   padding: 2px 8px;
   border-radius: var(--builder-border-radius);
   opacity: .5;
   pointer-events: none;
   white-space: nowrap;
}
div#brxcQuickSearchResults > #brxcQuickSearchHeader > li.active{
   opacity: 1;
   cursor: pointer;
   pointer-events: auto;
}
div#brxcQuickSearchResults > #brxcQuickSearchHeader > li.highlight{
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
   cursor: pointer;
   pointer-events: auto;
}
#brxcQuickSearchResults {
   background-color: var(--builder-bg);
   border-radius: 0 0 0.25rem 0.25rem;
   color: var(--builder-color);
   font-size: 14px;
}
#brxcQuickSearchResults:has(div){
   padding: 0px 0 8px 0;
   border-top: 1px solid var(--builder-bg-3);
   max-height: 680px;
   overflow: scroll;
}
div#brxcQuickSearchResults > div {
   padding: 4px 20px;
   pointer-events: none;
   display: flex;
   align-items: center;
   gap: 10px;
   opacity: .5;
}


div#brxcQuickSearchResults > div[data-type]{
   opacity: 1;
   pointer-events: auto;
   cursor: pointer;
}
div#brxcQuickSearchResults > div[data-type="add-component"],
div#brxcQuickSearchResults > div[data-type="jump-element"].component{
   color: var(--builder-color-component);
}
div#brxcQuickSearchResults > div[data-type].selected{
   color: var(--builder-color-accent);
}

div#brxcQuickSearchResults span span{
   opacity: .5;
}
div#brxcQuickSearchResults > div:hover {
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent) !important;
}
div#brxcQuickSearchResults > div * {
   pointer-events: none;
}
div#brxcQuickSearchResults > div i{
   opacity: .55;
}
div#brxcQuickSearchResults > .brxc-title,
div#brxcQuickSearchResults > .brxc-title:hover {
   background-color: var(--builder-bg-2);
   font-weight: 800;
   color: var(--builder-gray-9);
   opacity: 1 !important;
   pointer-events: auto;
}
div#brxcQuickSearchResults > .brxc-title * {
   pointer-events: none;
}
div#brxcQuickSearchResults > .brxc-more span{
   opacity: .5;
}
div#brxcQuickSearchResults > .brxc-more.selected span{
   opacity: 1;
}

div#brxcQuickSearchResults .keyboard-sc {
   margin-left: auto;
   display: flex;
   gap: 6px;
   font-size: 12px;
   font-weight: 600;
   color: var(--builder-color);
}
div#brxcQuickSearchResults .keyboard-sc > div:not(.plus){
   background-color: var(--builder-bg-3);
   padding: 2px 7px;
   border-radius: var(--builder-border-radius);
}
div#brxcQuickSearchResults .keyboard-sc > div:first-child{
   opacity: .5;
}

#brxcQuickSearchResults > div:hover .keyboard-sc {
   color: var(--builder-color-accent);
}

#brxcQuickSearchResults > div:hover .keyboard-sc > div:not(.plus){
   background-color: var(--builder-color-accent);
   color: var(--builder-color-accent-inverse);
}
#brxcQuickSearchResults .keyboard-sc .digit{
   width: 24px;
   height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
}
#brxcQuickSearchResults .keyboard-sc .plus{
  opacity: .5;
}

/*--------------------------------------
Selector Picker
 --------------------------------------*/

body.at-selector-picker *:hover:hover{
   outline: 3px solid red !important;
}
body.at-selector-picker *:has(*:hover:hover), 
body.at-selector-picker *[class*="bricks-preview"][class*="bricks-preview"] {
   outline: unset !important;
}

.brxc-toggle-selector-picker.active{
   background-color: var(--builder-bg-accent) !important;
   color: var(--builder-color-accent);
}
.brxc-toggle-selector-picker *{
   pointer-events: none;
}
/*--------------------------------------
Codepen Importer
 --------------------------------------*/

#brxcCpImporterCanvas{
   display: grid;
   grid-template-columns: 1fr 350px;
   grid-template-rows: 1fr auto;
   gap: 20px 0;
   height: 100%;
   overflow: hidden;
   position: relative;
}
#brxcCpImporterCanvas #brxcCpImporterLoading {
   position: absolute;
   inset: 0;
   align-items: center;
   justify-content: center;
   background-color: var(--builder-bg);
   z-index: 1;
   opacity: .95;
   display: none;
}
#brxcCpImporterCanvas #brxcCpImporterLoadingContainer {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px;
}
#brxcCpImporterCanvas #brxcCpImporterLoadingContainer span{
   color: var(--builder-color);
}
#brxcCpImporterCanvas #brxcCpImporterLoading.active {
   display: flex;
}
#brxcCpImporterCanvas #brxcCpImporterMain{
   --editors: 1fr;
    --preview: 3fr;
    display: grid;
    grid-template-columns: var(--editors) var(--preview);
    gap: 20px;
    height: 100%;
    overflow: hidden;
}
#brxcCpImporterPreviewContainer{
   width: 100%;
   height: 100%;
   background-color: var(--builder-bg);
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: var(--builder-color);
   gap: 8px;
   overflow: hidden;
}
#brxcCpImporterPreviewIcons{
   background-color: var(--builder-bg-2);
   padding: 7px 8px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: nowrap;
   gap: 12px;
   border-radius: var(--builder-border-radius);
}
#brxcCpImporterPreviewIcons > div{
   --size: 25px;
    width: var(--size);
    height: var(--size);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: var(--builder-border-radius);
    cursor: pointer;
}
#brxcCpImporterPreviewIcons > div *{
   pointer-events: none;
}
#brxcCpImporterPreviewIcons > div:hover{
   background-color: var(--builder-bg-3);
}
#brxcCpImporterPreviewIcons > div.active{
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
}
#brxcCpImporterPreviewWrapper{
   background-color: var(--builder-bg-2);
   display: flex;
   justify-content: center;
   width: 100%;
   height: 100%;
   border-radius: var(--builder-border-radius);
}
#brxcCpImporterPreview{
   background-color: #fff;
   width: 100%;
   height: 100%;
   border: 0;
   box-shadow: 0 0 20px 3px rgba(0, 0, 0, .5);
}
#brxcCpImporterCanvas #brxcCpImporterEditors {
   --css: minmax(32px, 1fr);
   --html: minmax(32px, 1fr);
   --js: minmax(32px, 1fr);
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   grid-template-rows: var(--html) var(--css) var(--js);
   gap: 20px;
   max-height: 100%;
   overflow: hidden;
}
#brxcCpImporterCanvas [data-panel] {
   margin-left: auto;
   opacity: .5;
   cursor: pointer;
}
#brxcCpImporterCanvas [data-panel] *{
   pointer-events: none;
}
#brxcCpImporterCanvas [data-panel]:hover {
   opacity: 1;
}
#brxcCpImporterEditors > * {
   overflow: hidden;
}
#brxcCpImporterEditors .CodeMirror-scroll{
   padding-bottom: 0;
}
#brxcCpImporterCanvas > *{
   overflow: scroll;
   display: flex;
   flex-direction: column;
}
#brxcCpImporterAIContainer {
   grid-column-end: span 2;
   border-radius: var(--builder-border-radius);
   overflow: visible;
}
#brxcCpImporterFilterCanvas {
   display: flex;
   gap: 20px;
   overflow: scroll;
   margin-left: 20px;
   height: 100%;
   user-select: none;
}
.brxc-cpconverter__setting-container {
   display: flex;
   flex-direction: column;
   gap: 12px;
   background-color: var(--builder-bg-2);
   border-radius: var(--builder-border-radius);
   padding: 20px;
}
#brxcCpImporterFilterCanvas .gridUI__input-wrapper,
#brxcAIGeneratedStructureCanvas .gridUI__input-wrapper{
   flex: unset;
   display: flex;
   align-items: center;
   justify-content: space-between;
}
#brxcCpImporterFilterCanvas .gridUI__input-wrapper label,
#brxcAIGeneratedStructureCanvas .gridUI__input-wrapper label{
   margin: 0;
}
#brxcCpImporterFilterCanvas .gridUI__input-wrapper.brxc-input,
#brxcAIGeneratedStructureCanvas .gridUI__input-wrapper.brxc-input{
   flex-direction: column;
   align-items: flex-start;
   gap: 12px;
}
#brxcCpImporterFilterCanvas .gridUI__input-wrapper.brxc-input input,
#brxcAIGeneratedStructureCanvas .gridUI__input-wrapper.brxc-input input{
   background-color: var(--builder-bg);
}
#brxcCpImporterFilterCanvas .brxc-overlay__action-btn-wrapper{
   flex-wrap: wrap;
}
#brxcCpImporterFilterCanvas .brxc-overlay__action-btn{
   border: none;
   background-color: var(--builder-bg);
   color: var(--builder-color);
   font-size: 13px;
   padding: 4px 10px;
   opacity: .8;
}
#brxcCpImporterFilterCanvas .brxc-overlay__action-btn:hover{
   opacity: 1;
}
.sidebar #brxcCpImporterFilterCanvas .brxc-overlay__action-btn{
   background-color: var(--builder-bg-2);
}
#brxcCpImporterFilterCanvas .brxc-overlay__action-btn.active{
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
   opacity: 1;
}
#brxcCpImporterCanvas .brxc-title__wrapper{
   display: flex;
    align-items: center;
    color: var(--builder-color);
    padding-bottom: 8px;
    position: sticky;
    top: 0;
    background: var(--builder-bg);
    z-index: 1;
}
#brxcCpImporterCanvas .CodeMirror{
   height: 100% !important;
}

/*--------------------------------------
AI Generated Stucture
 --------------------------------------*/
 #brxcGenerateAIStructureOverlay #brxcAIGeneratedStructureCanvas {
   display: grid;
   grid-template-columns: 1fr 400px;
   gap: 40px;
   height: 100%;
   padding-bottom: 16px;
   overflow: hidden;
}
 #brxcGenerateAIStructureOverlay.sidebar #brxcAIGeneratedStructureCanvas {
   display: flex;
   flex-direction: column;
   gap: 24px;
   height: 100%;
   padding-bottom: 16px;
   overflow: hidden;
}
#brxcGenerateAIStructureOverlay #brxcAIGeneratedStructureCanvas > *{
   display:flex;
   flex-direction: column;
   gap: 16px;
}
#brxcGenerateAIStructureOverlay #brxcAIGeneratedStructureCanvas > .gridUI__right-col{
   margin-top: 32px;
   padding: 20px;
   background-color: var(--builder-bg-2);
   border-radius: var(--builder-border-radius);
}
#brxcGenerateAIStructureOverlay.sidebar #brxcAIGeneratedStructureCanvas > .gridUI__right-col{
   margin-top: 0px;
}
#brxcGenerateAIStructureOverlay.sidebar #brxcAIGeneratedStructureCanvas > .gridUI__right-col .gridUI__title{
   display: none;
}
#brxcGenerateAIStructureOverlay.sidebar #brxcAIGeneratedStructureCanvas > *{
   padding: 0px;
   background-color: unset;
}
#brxcGenerateAIStructureOverlay #brxcAIGeneratedStructureCanvas .gridUI__left-col{
   flex: 1;
}
#brxcAIGeneratedStructureCanvas .gridUI__input-wrapper.brxc-input:not(.select),
#brxcAIGeneratedStructureCanvas .gridUI__input-wrapper.brxc-input textarea{
   height: 100%;
   margin: 0;
}
#brxcAIGeneratedStructureCanvas .gridUI__input-wrapper.brxc-input textarea {
   background-color: var(--builder-gray-1);
}
#brxcGenerateAIStructureOverlay.sidebar #brxcAIGeneratedStructureCanvas .gridUI__input-wrapper.brxc-input textarea {
   background-color: var(--builder-bg-2);
}

#brxcGenerateAIStructureOverlay #brxcAIGeneratedStructureCanvas .brxc-overlay__action-btn{
   background-color: var(--builder-bg);
}
#brxcGenerateAIStructureOverlay.sidebar #brxcAIGeneratedStructureCanvas .brxc-overlay__action-btn{
   background-color: var(--builder-bg-2);
}
#brxcGenerateAIStructureOverlay.sidebar #brxcAIGeneratedStructureCanvas .brxc-overlay__action-btn.active{
   background-color: var(--builder-bg-accent);
}
/*--------------------------------------
CSS Variable Manager
 --------------------------------------*/

 #brxcCSSVariableManagerOverlay.brxc-overlay__wrapper.sidebar .brxc-overlay__pannel {
   padding: 0px 0px 16px;
}

#brxcCSSVariableManagerOverlay .brxc-overlay__pannel.brxc-overlay__pannel-1{
   display: grid;
   grid-template-columns: 280px minmax(0,1fr);
   gap: 0px;
   padding-bottom: 0;
}
.brxc-variable-manager__right-col{
   background-color: var(--builder-bg-2);
   display: flex;
   flex-direction: column;
}
#CSSVariableBodyCanvas{
   display: flex;
   flex-direction: column;
   flex: 1;
   /* --rem-calc: calc(var(--base-font) / 10); */
}
#CSSVariableBodyCanvas .brxc-class-manager__content-css{
   display: flex;
   flex-direction: column;
   flex: 1;
}
.brxc-variable-manager__right-col #CSSVariableBodyCanvas:has(p.varable-manager-disabled){
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   padding: 0 20px;
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-variable-manager__right-col{
   background-color: var(--builder-bg);
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-overlay__pannel.brxc-overlay__pannel-1{
   display: flex;
   gap: unset
}
#brxcCSSVariableManagerOverlay .brxc-overlay__search-box{
   margin-bottom: 0px;
   padding: 16px 16px 0px 16px;
   background-color: var(--builder-bg-2);
}
#brxcCSSVariableManagerOverlay:not(.sidebar) .brxc-overlay__search-box .iso-search-icon {
   left: 30px;
   top: 37px;
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-overlay__search-box{
   margin-bottom: 0px;
   padding: 0px;
}
#brxcCSSVariableManagerOverlay .brxc-overlay__search-box input[type="text"]{
   background-color: var(--builder-bg-3);
}
#brxcCSSVariableManagerOverlay:not(.sidebar) .brxc-overlay__search-box input[type="text"]{
   padding-left: 37px;
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-overlay__search-box input[type="text"]{
   background-color: var(--builder-bg-2);
}
#brxcCSSVariableManagerOverlay .brxc-overlay__search-box .iso-reset{
   background-color: var(--builder-bg-2);
   top: 25px;
   right: 25px;
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-overlay__search-box .iso-reset{
   background-color: var(--builder-bg-3);
   top: 9px;
   right: 9px;
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-overlay__search-box{
   margin-bottom: 30px;
}
#brxcCSSVariableManagerOverlay .brxc-add-color-wrapper input.brxc-add-new-variable{
   background-color: var(--builder-bg)
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-add-color-wrapper input.brxc-add-new-variable{
   background-color: var(--builder-bg-2)
}

#brxcCSSVariableManagerOverlay.sidebar .variable-heading{
   background-color: var(--builder-bg);
}

#brxcCSSVariableManagerOverlay .brxc-import-css-colors,
#brxcCSSVariableManagerOverlay .brxc-add-color-wrapper textarea{
   background-color: var(--builder-bg);
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-import-css-colors,
#brxcCSSVariableManagerOverlay.sidebar .brxc-add-color-wrapper textarea{
   background-color: var(--builder-bg-2);
}
#brxcCSSVariableManagerOverlay .brxc-import-css-colors.active{
   background-color: var(--builder-bg-accent);
}
#CSSVariableHeaderCanvas{
   padding: 24px 0 16px 0;
   position: sticky;
   top: 0;
   background-color: var(--builder-bg);
   z-index: 2;
}

#brxcCSSVariableManagerOverlay.sidebar #CSSVariableHeaderCanvas{
   padding: 16px;
   padding-bottom: 0;
   position: sticky;
   top: 0;
   background-color: var(--builder-bg);
   z-index: 2;
}

#CSSVariableHeaderCanvas #sortableWrapper .fa-grip-vertical,
#brxcCatListCanvas #sortableWrapper .fa-grip-vertical{
   color: var(--builder-bg-3);
}
#CSSVariableHeaderCanvas #sortableWrapper li:hover .fa-grip-vertical,
#CSSVariableHeaderCanvas #sortableWrapper li.active .fa-grip-vertical,
#brxcCatListCanvas #sortableWrapper li:hover .fa-grip-vertical,
#brxcCatListCanvas #sortableWrapper li.active .fa-grip-vertical{
   color: var(--builder-bg);
}
#CSSVariableHeaderCanvas .brxc-top-actions {
   display: flex;
   margin: 0 20px 8px auto;
   align-items: center;
   gap: 4px;
   justify-content: end;
}
#CSSVariableHeaderCanvas .brxc-icon {
   --width: 24px;
   color: var(--builder-color-accent);
   background-color: var(--builder-bg-accent);
   width: var(--width);
   height: var(--width);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   border-radius: var(--builder-border-radius);
   opacity: .5;
   cursor: pointer;
}
#CSSVariableHeaderCanvas .brxc-icon:hover {
   opacity: 1;
}
.brxc-select {
   display: flex;
   gap: 1px;
   color: var(--builder-color);
}

#CSSVariableHeaderCanvas #brxcRenameCategory,
#CSSVariableHeaderCanvas #brxcAddCategory{
   background-color: var(--builder-bg-3);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   border: 0;
   outline: 0;
   font-size: 12px;
   width: 100%;
   height: 44px;
   padding: 0 40px 0 10px;
   color: var(--builder-color);
   border-radius: 0 0.25em 0.25em 0;
}
#CSSVariableHeaderCanvas .brxc-icon-container {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-left: 16px;
}
#CSSVariableHeaderCanvas .brxc-select-wrapper .brxc-icon.active{
   color: var(--builder-color-accent);
   opacity: 1;
}

#CSSVariableHeaderCanvas .brxc-icon-container .brxc-icon{
   font-size: 12px;
   color: var(--builder-color);
   background-color: var(--builder-bg-3);
   cursor: pointer;
   opacity: .5;
}
#CSSVariableHeaderCanvas .brxc-icon-container .brxc-icon:hover{
   opacity: 1;
}
#CSSVariableSearchCanvas{
   padding-top: 16px;
   background-color: var(--builder-bg);
   z-index: 1;
}
#brxcCSSVariableManagerOverlay.sidebar #CSSVariableSearchCanvas{
   position: sticky;
   top: -15px;
}
.brxc-overlay__wrapper.sidebar #CSSVariableSearchCanvas .brxc-overlay__search-box {
   margin-bottom: 20px;
}
.brxc-global-variable-list,
.brxc-theme-variable-list{
   padding: 0;
   margin: 0;
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 8px;
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-global-variable-list{
   margin: 6px 0 0;
}
.brxc-global-variable-list > li,
.brxc-theme-variable-list> li{
   position: relative;
   list-style: none;
   display: flex;
   flex-direction: column;
}

#brxcCSSVariableManagerOverlay .brxc-global-variable-list > li.active,
#brxcCSSVariableManagerOverlay .brxc-theme-variable-list > li.active{
   background-color: var(--builder-bg-accent);
   z-index: 1;
}

.brxc-global-variable-list > li.disable {
   pointer-events: none;
   opacity: .7;
}
.brxc-global-variable-list > li .variable-wrapper,
.brxc-theme-variable-list > li .variable-wrapper{
   --min-width: 50%;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
   padding: 0 16px;
}
.brxc-theme-variable-list > li .variable-wrapper{
   grid-template-columns: minmax(0, 1fr) auto;
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-global-variable-list > li .variable-wrapper{
   padding: 0 8px 0 16px;
}
.brxc-global-variable-list > li .variable-inner-wrapper,
.brxc-theme-variable-list > li .variable-inner-wrapper{
   display: flex;
   flex-wrap: nowrap;
   width: 100%;
   gap: 4px 4px;
   background-color: var(--builder-bg-3);
   border-radius: 0.25rem;
   padding: 6px;
   position: relative;
   box-sizing: border-box;
   align-items: center;
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-global-variable-list > li .variable-inner-wrapper,
#brxcCSSVariableManagerOverlay.sidebar .brxc-theme-variable-list > li .variable-inner-wrapper{
   display: flex;
   flex-wrap: wrap;
}

.variable-add-group {
   position: absolute;
   top: 0;
   right: 0;
   background-color: var(--builder-bg-accent);
   display: flex;
   border-bottom-left-radius: var(--builder-border-radius);
   border-top-right-radius: var(--builder-border-radius);
   padding: 3px;
   font-size: 12px;
   cursor: pointer;
   color: var(--builder-color-accent);
   opacity: .7;
}
.variable-add-group:hover {
   opacity: 1;
}
.variable-add-group *{
   pointer-events: none;
}

#brxcCSSVariableManagerOverlay .variable-inner-button-wrapper{
   display: flex;
   position: relative
}
#brxcCSSVariableManagerOverlay .variable-inner-button-wrapper .brxc-variable-switch__modal{
   position: absolute;
   top: 100%;
   left: 0;
   z-index: 1;
   background-color: var(--builder-bg-2);
   color: var(--builder-color);
   font-size: 13px;
   padding: 4px;
   border-radius: var(--builder-border-radius);
   box-shadow: var(--builder-box-shadow);
}
#brxcCSSVariableManagerOverlay .variable-inner-button-wrapper .brxc-variable-switch__wrapper{
   display:flex;
   flex-direction: column;
   gap: 1px;
}
#brxcCSSVariableManagerOverlay .variable-inner-button-wrapper .brxc-variable-switch__item{
   padding: 4px 14px;
   background-color: var(--builder-bg);
   cursor: pointer;
   text-align: center;
}
#brxcCSSVariableManagerOverlay .variable-inner-button-wrapper .brxc-variable-switch__item:hover{
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent)
}

#brxcCSSVariableManagerOverlay.sidebar .brxc-global-variable-list > li .variable-inner-wrapper,
#brxcCSSVariableManagerOverlay.sidebar .brxc-theme-variable-list > li .variable-inner-wrapper{
   background-color: var(--builder-bg-2);
}
li .variable-inner-wrapper .input-container {
   display: flex;
   flex-wrap: nowrap;
   width: var(--min-width);
   min-width: var(--min-width);
   flex: 1;
   gap: 16px;
}
.brxc-global-variable-list li.sortable-selected .variable-inner-wrapper,
.brxc-theme-variable-list li.sortable-selected .variable-inner-wrapper {
   background-color: var(--builder-bg-accent);
}
.brxc-global-variable-list li.sortable-selected .variable-inner-wrapper input:not(.variable-name),
.brxc-theme-variable-list li.sortable-selected .variable-inner-wrapper input:not(.variable-name) {
   opacity: .5;
}
.brxc-global-variable-list > li .variable-wrapper .handle, 
.brxc-global-variable-list > li[data-scale-id] .handle,
.brxc-theme-variable-list > li .variable-wrapper .handle,
.brxc-theme-variable-list > li[data-scale-id] .handle{
   color: var(--builder-color);
   margin-right: 8px;
   opacity: .5;
   font-size: 12px;
   cursor: pointer;
}
.brxc-global-variable-list > li[data-id] .handle,
.brxc-theme-variable-list > li[data-id] .handle,
.brxc-global-variable-list .brxc-generated-group li[data-id] .handle,
.brxc-theme-variable-list .brxc-generated-group li[data-id] .handle{
   align-self: center;
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-global-variable-list > li[data-id] .handle,
.brxc-theme-variable-list > li[data-id] .handle{
   align-self: flex-start;
   margin-top:12px;
}
.brxc-global-variable-list > li[data-scale-id] .handle,
.brxc-theme-variable-list > li[data-scale-id] .handle{
   margin-top: 16px
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-global-variable-list > li[data-scale-id] .handle,
.brxc-theme-variable-list > li[data-scale-id] .handle{
   margin-top: 8px
}
.brxc-global-variable-list > li .btn-color-check,
.brxc-theme-variable-list > li .btn-color-check{
   --height: 10px;
   position: absolute;
   top: -4px;
   right: -4px;
   color: white;
   background-color: green;
   width: var(--height);
   height: var(--height);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 6px;
   border-radius: 50%;
   padding: 4px;
}

.variable-heading {
   display: flex;
   align-items: center;
   padding: 24px 16px;
   gap: 8px;
   justify-content: space-between;
   color: var(--builder-color);
   position: relative;
   z-index: 2;
}

#brxcCSSVariableManagerOverlay [data-control="info"]{
   margin: 0px 16px 16px;
   font-size: 13px;
}

#brxcCSSVariableManagerOverlay.sidebar .variable-heading {
   padding: 8px 16px 8px 16px;

}
.variable-heading:hover {
   z-index: 2;
}

#brxcCSSVariableManagerOverlay span.title{
   opacity: .5;
}
#brxcCSSVariableManagerOverlay span.title.inactive{
   opacity: .2;
}
ul.brxc-global-variable-list + .variable-heading.theme{
   margin-top: 24px;
}
#brxcCSSVariableManagerOverlay.sidebar .variable-heading.sticky{
   position: sticky;
   top: 0px;
   flex-wrap: wrap;
}
.variable-heading .brxc-icon{
   opacity: .3;
   cursor: pointer;
}
.variable-heading .brxc-icon:hover{
   opacity: 1;
}
.brxc-global-variable-list > li button.variable-type-switch,
.brxc-theme-variable-list > li button.variable-type-switch {
   --width: 26px;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   max-width: var(--width);
   min-width: var(--width);
   padding: 6px 6px;
   border-radius: 0.25rem;
   background-color: var(--builder-bg);
   color: var(--builder-color);
   opacity: .75;
   font-size: 10px;
   pointer-events: auto;
   text-transform: uppercase;
   font-weight: 700;
   letter-spacing: 0.6px;
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-theme-variable-list > li button.variable-type-switch{
   opacity: .5;
}
.brxc-global-variable-list > li button.variable-type-switch:hover,
.brxc-theme-variable-list > li button.variable-type-switch:hover{
   opacity: 1;
}
.brxc-global-variable-list > li button.variable-type-switch.clamp,
.brxc-theme-variable-list > li button.variable-type-switch.clamp {
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
}
.brxc-global-variable-list > li button.variable-type-switch.color,
.brxc-theme-variable-list > li button.variable-type-switch.color {
   background-color: var(--builder-bg-component);
   color: var(--builder-color-component);
}
.brxc-global-variable-list > li .input-wrapper,
.brxc-theme-variable-list > li .input-wrapper{
   display: flex;
   align-items: center;
   flex: 1;
   gap: 1px;
}
#brxcCSSVariableManagerOverlay span.title {
   font-size: 16px;
}
#brxcCSSVariableManagerOverlay.sidebar span.title {
   font-size: 14px;
}
.brxc-global-variable-list > li .variable-wrapper input,
.brxc-theme-variable-list > li .variable-wrapper input{
   background-color: transparent;
   border-radius: 0.25rem;
   box-shadow: none!important;
   cursor: inherit;
   height: var(--builder-structure-input-height);
   outline: none;
   border: none;
   color: var(--builder-color);
   overflow: hidden;
   position: relative;
   text-overflow: ellipsis;
   font-family: Inter, sans-serif;
   font-size: 14px;
   height: 32px;
}

#brxcCSSVariableManagerOverlay.sidebar .brxc-global-variable-list > li .variable-wrapper input,
#brxcCSSVariableManagerOverlay.sidebar .brxc-theme-variable-list > li .variable-wrapper input{
   font-size: 12px;
   height: inherit;
   min-height: 32px;
   height: 32px;
}
.brxc-global-variable-list > li .variable-prefix,
.brxc-theme-variable-list > li .variable-prefix {
   color: var(--builder-color);
   opacity: .5;
   margin: 0px 0 0 4px;
   font: 12px Inter,sans-serif;
   text-wrap: nowrap;
}
.brxc-global-variable-list .brxc-generated-scale .variable-prefix{
   margin: 0px 0 0 4px;
   text-wrap: nowrap;
}
.brxc-global-variable-list > li input.variable-name,
.brxc-theme-variable-list > li input.variable-name {
   flex: 1;
   padding: 0px;
   font: 14px Inter,sans-serif;
   min-width: 120px;
   text-wrap: nowrap;
   flex-basis: 20%;
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-global-variable-list > li input.variable-name,
#brxcCSSVariableManagerOverlay.sidebar .brxc-theme-variable-list > li input.variable-name {
   min-width: unset;
}
.brxc-global-variable-list .brxc-generated-scale input.variable-name{
   padding: 0px 0px 0px 0px;
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-global-variable-list > li input.variable-name,
#brxcCSSVariableManagerOverlay.sidebar .brxc-theme-variable-list > li input.variable-name {
   font: 12px Inter,sans-serif;

}

.brxc-global-variable-list > li span.variable-unit,
.brxc-theme-variable-list > li span.variable-unit {
   --width: 28px;
    min-width: var(--width);
    max-width: var(--width);
    padding: 0px 5px;
    opacity: .5;
    color: var(--builder-color);
}
.brxc-global-variable-list > li input.variable-min,
.brxc-global-variable-list > li input.variable-max,
.brxc-global-variable-list > li input.variable-value,
.brxc-global-variable-list > li input.variable-label,
.brxc-theme-variable-list > li input.variable-min,
.brxc-theme-variable-list > li input.variable-max,
.brxc-theme-variable-list > li input.variable-value,
.brxc-theme-variable-list > li input.variable-label {
   background-color: var(--builder-bg-2);
   text-align: left;
   transition: none;
}

#brxcCSSVariableManagerOverlay.sidebar .brxc-global-variable-list > li input.variable-min,
#brxcCSSVariableManagerOverlay.sidebar .brxc-global-variable-list > li input.variable-max,
#brxcCSSVariableManagerOverlay.sidebar .brxc-global-variable-list > li input.variable-value,
#brxcCSSVariableManagerOverlay.sidebar .brxc-global-variable-list > li input.variable-label,
#brxcCSSVariableManagerOverlay.sidebar .brxc-theme-variable-list > li input.variable-min,
#brxcCSSVariableManagerOverlay.sidebar .brxc-theme-variable-list > li input.variable-max,
#brxcCSSVariableManagerOverlay.sidebar .brxc-theme-variable-list > li input.variable-value,
#brxcCSSVariableManagerOverlay.sidebar .brxc-theme-variable-list > li input.variable-label  {
   background-color: var(--builder-bg-3);
   text-align: left;
   transition: none;
}
#brxcCSSVariableManagerOverlay .brxc-global-variable-list > li input.variable-min,
#brxcCSSVariableManagerOverlay .brxc-global-variable-list > li input.variable-max,
.brxc-theme-variable-list > li input.variable-min,
.brxc-theme-variable-list > li input.variable-max{
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
}
.brxc-theme-variable-list > li input.variable-min,
.brxc-theme-variable-list > li input.variable-max {
   padding-right: 0;
}

.brxc-theme-variable-list > li input.variable-min::-webkit-inner-spin-button,
.brxc-theme-variable-list > li input.variable-min::-webkit-outer-spin-button,
.brxc-theme-variable-list > li input.variable-max::-webkit-inner-spin-button,
.brxc-theme-variable-list > li input.variable-max::-webkit-outer-spin-button {
   background-color: red;
}

.brxc-global-variable-list > li input.variable-label,
.brxc-theme-variable-list > li input.variable-label{
   --min-width: 25%;
}
.brxc-global-variable-list > li input.variable-value,
.brxc-theme-variable-list > li input.variable-value,
.brxc-global-variable-list > li input.variable-label,
.brxc-theme-variable-list > li input.variable-label,
.brxc-global-variable-list > li .brxc-variable-color-wrapper,
.brxc-theme-variable-list > li .brxc-variable-color-wrapper{
   width: var(--min-width);
   min-width: var(--min-width);
   height: 100%;
   display: flex;
   flex: 99;
   position: relative;
}
.brxc-global-variable-list > li input.variable-value::placeholder,
.brxc-theme-variable-list > li input.variable-value::placeholder,
.brxc-global-variable-list > li input.variable-label::placeholder,
.brxc-theme-variable-list > li input.variable-label::placeholder{
   opacity: .3;
}
.brxc-global-variable-list > li .brxc-variable-color__preview,
.brxc-theme-variable-list > li .brxc-variable-color__preview{
   width: 22px;
    aspect-ratio: 1;
    position: absolute;
    left: 5px;
    top: 5px;
    border-radius: 99vw;
    z-index: 1;
    cursor: pointer;
    border: 1px solid var(--builder-bg-3);
}
.brxc-global-variable-list > li .brxc-variable-color-wrapper input.variable-value,
.brxc-theme-variable-list > li .brxc-variable-color-wrapper input.variable-value{
   padding-left: 36px;
}

.brxc-global-variable-list > li input.disabled{
   opacity: .5;
}
.brxc-global-variable-list > li .right-actions,
.brxc-theme-variable-list > li .right-actions{
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-left: 8px;
   margin-top: 5px;
   margin-bottom: auto;
}
.brxc-global-variable-list > li .right-actions div,
.brxc-theme-variable-list > li .right-actions div{
   display: flex;
   color: var(--builder-color);
   font-size: 11px;
   opacity: .5;
   cursor: pointer;
}
.brxc-global-variable-list > li .right-actions div:hover,
.brxc-theme-variable-list > li .right-actions div:hover{
   opacity: 1;
}
.brxc-global-variable-list > li .right-actions div *,
.brxc-theme-variable-list > li .right-actions div *{
   pointer-events: none;
}
#brxcCSSVariableManagerOverlay .control-inner {
   display: flex;
   flex-direction: column;
   gap: 16px;
   justify-content: space-between;
   position: relative;
   width: 100%;
}
#brxcCSSVariableManagerOverlay .control-inline {
   align-items: center;
   flex-direction: row;
   min-height: var(--builder-input-height);
}
#brxcCSSVariableManagerOverlay label{
   margin: 0;
}
#brxcCSSVariableManagerOverlay .brxc-overlay__panel-inline-btns-wrapper label{
   background-color: var(--builder-bg);
}
#brxcCSSVariableManagerOverlay .brxc-shade-wrapper input[type="text"],
#brxcCSSVariableManagerOverlay .brxc-shade-wrapper input[type="number"]{
   background-color: var(--builder-bg);
   border: none;
   border-radius: var(--builder-border-radius);
   box-shadow: none;
   color: var(--builder-color);
   display: block;
   font-family: inherit;
   font-size: 12px;
   height: var(--builder-input-height);
   line-height: var(--builder-input-height);
   outline: none;
   padding: 0 12px;
   transition: none;
   width: 100%;
   flex-basis: 50%!important;
}
#brxcCSSVariableManagerOverlay .brxc-shade-wrapper input[type="number"]#numberShadesValue{
   flex-basis: 64px !important;
   padding-right: 0px;
   padding-left: 8px;
}

.brxc-color-list > li.active input[type="text"].color-name{
   color: var(--builder-color-accent) !important;
}
#brxcCSSVariableManagerOverlay label span{
   display: block;
   color: var(--builder-color);
   font-weight: 400;
   letter-spacing: .2px;
   line-height: 20px;
   margin: 0;
   position: relative;
   font-size: 12px;
}
#brxcCSSVariableManagerOverlay .brxc__range{
   --RaisinBlack02: var(--builder-bg);
   --BabyBlue: var(--builder-gray-5);
   --Cinnabar: var(--builder-gray-0);
   --circle: var(--builder-bg);
   flex-basis: 50%;
   gap: 1rem;
}

#brxcCSSVariableManagerOverlay .brxc__range span {
   color: var(--builder-color);
}
#brxcCSSVariableManagerOverlay .brxc-color-list .brxc-shade-wrapper .scale-wrapper {
   color: var(--builder-color);
   max-width: 50%;
   display: grid;
   grid-template-columns: repeat(auto-fit, 20px);
   justify-content: space-between;
   width: 100%;
   align-items: center;
   gap: 5px 3px;
}
#brxcCSSVariableManagerOverlay .brxc-color-list .brxc-shade-wrapper .scale-color {
   position: relative;
}
#brxcCSSVariableManagerOverlay .brxc-color-list .brxc-shade-wrapper .scale-color .delete-scale-color{
   position: absolute;
   top: -5px;
   right: -5px;
   width: 12px;
   height: 12px;
   background-color: var(--builder-color-accent);
   color: var(--builder-gray-0);
   border-radius: 50px;
   font-size: 7px;
   display: none;
   align-items: center;
   justify-content: center;
   border: 1px solid;
}
#brxcCSSVariableManagerOverlay .brxc-color-list .brxc-shade-wrapper .scale-color:hover .delete-scale-color{
   display: flex;
}
#brxcCSSVariableManagerOverlay .brxc-color-list .brxc-shade-wrapper .scale-wrapper .dotted-border{
   color: var(--builder-gray-8);
    border: 2px dotted;
    border-radius: 3px;
    aspect-ratio: 1;
    width: 20px;
    height: 20px;
    display: flex;
    font-size: 10px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#brxcCSSVariableManagerOverlay .brxc-color-list .brxc-shade-wrapper .scale-wrapper .dotted-border:hover{
   color: var(--builder-color);
   
}
#brxcCSSVariableManagerOverlay .brxc-color-list .brxc-shade-wrapper .color-btn-wrapper{
   display: grid;
   grid-auto-flow: column;
   gap: 3px;
   color: var(--builder-color);
   flex-basis: 50%;
}
#brxcCSSVariableManagerOverlay .brxc-color-list .complementary-form .brxc-shade-wrapper .color-btn-wrapper{
   flex-basis: unset;
   gap: 6px;
}
#brxcCSSVariableManagerOverlay .brxc-color-list .brxc-shade-wrapper .color-btn-wrapper button{
   width: 100%;
   height: 20px;
}
#brxcCSSVariableManagerOverlay .brxc-color-list .complementary-form .brxc-shade-wrapper .color-btn-wrapper button{
   height: 36px;
   aspect-ratio: 1;
   border-radius: 50%;
}

#color_picker input {
   padding: 0;
}
#color_picker #color_text_values {
   padding: 38px 0 16px !important;
}
#color_picker .rgba_input, #color_picker .hsla_input {
   width: 55px !important;
}
#color_picker #custom_colors {
   display: none;
}
#brxcClassListCanvas > ul > li.sortable-selected,
#brxcCSSVariableManagerOverlay .brxc-color-list > li.sortable-selected{
   background-color: var(--builder-bg-accent);
}

#brxcCSSVariableManagerOverlay .brxc-color-list > li.sortable-selected .color-wrapper input.color-name{
   color: var(--builder-color-accent);
}

#brxcImportVariableWrapper {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 24px;
   padding: 0 16px;
}

#brxcImportVariableWrapper .gridUI__input-wrapper {
   width: fit-content;
   display: flex;
   flex: unset;
   gap: 12px;
}

.brxc-color-type-toggle {
   --size: 23px;
   color: var(--builder-color);
   background-color: var(--builder-bg-2);
   font-size: 11px;
   font-weight: 800;
   height: var(--size);
   width: var(--size);
   min-width: var(--size);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--builder-border-radius);
   margin-left: 9px;
   cursor: pointer;
}
.brxc-color-type-toggle.active {
   color: var(--builder-color-accent);
   background-color: var(--builder-bg-accent);
}

/* Scale */
span.brxc-add-new-scale {
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent) !important;
   padding: 4px 12px;
   border-radius: var(--builder-border-radius);
   margin-left: 14px !important;
   cursor: pointer;
   opacity: .7;
}
span.brxc-add-new-scale:hover {
   opacity: 1;
}

li .brxc-scale-wrapper,
li .brxc-group-wrapper{
   color: var(--builder-color);
   background-color: var(--builder-bg);
   border-radius: var(--builder-border-radius);
   padding: 16px;
   width: 100%;
}
li.sortable-selected .brxc-scale-wrapper,
li.sortable-selected .brxc-group-wrapper{
   background-color: var(--builder-bg-accent);
}
#brxcCSSVariableManagerOverlay.sidebar li .brxc-scale-wrapper,
#brxcCSSVariableManagerOverlay.sidebar li .brxc-group-wrapper{
   padding: 6px;
   font-size: 13px;
   background-color: var(--builder-bg-2);
}
#brxcCSSVariableManagerOverlay.sidebar li .brxc-scale-wrapper .variable-inner-wrapper,
#brxcCSSVariableManagerOverlay.sidebar li .brxc-group-wrapper .variable-inner-wrapper {
   background-color: var(--builder-bg-3) !important;
}

#brxcCSSVariableManagerOverlay .brxc-group-wrapper .brxc-add-new-variable {
   margin: 0px 15px;
   width: calc(100% - 34px);
   border-radius: var(--builder-border-radius);
   background-color: var(--builder-bg-2);
   opacity: .6;
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-group-wrapper .brxc-add-new-variable {
   background-color: var(--builder-bg-3);
}
#brxcCSSVariableManagerOverlay .brxc-group-wrapper .brxc-add-new-variable:focus-within {
   opacity: 1;
}

#brxcCSSVariableManagerOverlay.sidebar li .brxc-scale-wrapper .variable-inner-wrapper input.variable-modifier {
   background-color: var(--builder-bg-2);
}

li .brxc-scale-wrapper > *,
li .brxc-group-wrapper > * {
   margin: 0;
   padding: 0;
   list-style: none;
}
.brxc-generated-group{
   display: flex;
   flex-direction: column;
   gap: 8px;
}
.brxc-scale-control,
.brxc-group-control {
   display: flex;
   flex-direction: column;
   gap: 3px;
}
.brxc-scale-control,
.brxc-group-control{
   grid-column-end: span 3;
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-scale-control,
#brxcCSSVariableManagerOverlay.sidebar .brxc-group-control{
   grid-column-end: span 5;
}
.brxc-scale-control:nth-child(1), 
.brxc-scale-control:nth-child(2), 
.brxc-scale-control:nth-child(3) {
   grid-column-end: span 4;
}
@container variable-manager (min-width: 500px) {
   .brxc-scale-control:first-child{
      grid-column-end: span 4;
   }
   .brxc-scale-control:nth-child(6),
   .brxc-scale-control:nth-child(7){
      grid-column-end: span 2;
   }
 }
.brxc-scale-control--label,
.brxc-group-control--label {
   color: var(--builder-color);
   font-size: 12px;
   text-transform: uppercase;
   font-weight: 800;
   opacity: .5;
   letter-spacing: .3px;
}
.brxc-scale-control--value,
.brxc-group-control--value {
   height: 100%;
   min-height: 40px;
}
.brxc-scale-control--value input,
.brxc-group-control--value input{
   min-height: 38px;
}
.brxc-scale-control--value input,
.brxc-group-control--value input{
   border-radius: var(--builder-border-radius);
}

.brxc-generated-scale{
   display: flex;
   flex-direction: column;
   gap: 4px;
   margin-top: 16px !important;
}
.brxc-generated-scale__controls {
   display: flex;
   gap: 4px;
}
.brxc-generated-scale__controls[data-key="smallSteps"] {
   margin-bottom: 4px;
}
.brxc-generated-scale__controls[data-key="largeSteps"] {
   margin-top: 4px;
}
.brxc-generated-scale__controls i {
   --width: 20px;
   background: var(--builder-bg-2);
   color: var(--builder-color);
   width: var(--width);
   height: var(--width);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 99vw;
   font-size: 12px;
   cursor: pointer;
}
.brxc-generated-scale__controls i:hover {
   background: var(--builder-bg-accent);
   color: var(--builder-color-accent);
}

.brxc-generated-scale .brxc-base-input-wrapper {
   padding: 0px 10px;
   display: flex;
   justify-content: center;
}
.brxc-generated-scale .brxc-base-input {
   --size: 10px;
   width: var(--size);
   height: var(--size);
   border: 1px solid currentColor;
   border-radius: 99vw;
   opacity: .7;
   cursor: pointer;
}
.brxc-generated-scale .brxc-base-input.active {
   border-color: var(--builder-color-component);
   background-color: var(--builder-color-component);
   cursor: auto;
}

.brxc-scale-control-wrapper,
.brxc-group-control-wrapper{
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
   gap: 10px;
}
.brxc-group-control-wrapper{
   margin-bottom: 30px !important
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-group-control-wrapper{
   margin-bottom: 12px !important
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-scale-control-wrapper,
#brxcCSSVariableManagerOverlay.sidebar .brxc-group-control-wrapper{
   grid-template-columns: repeat(5, minmax(0, 1fr));
}

.brxc-scale-control input,
.brxc-group-control input {
   width: 100% !important;
   border-color: var(--builder-bg-2);
   background-color: var(--builder-bg-3) !important;
}
.brxc-scale-wrapper .variable-wrapper,
.brxc-group-wrapper .variable-wrapper{
   padding: 0 !important;
}
.brxc-scale-wrapper .variable-inner-wrapper {
   background-color: var(--builder-bg-2) !important;
   --min-width: calc(50% - 90px);
}

.brxc-scale-wrapper .variable-inner-wrapper .variable-value,
.brxc-group-wrapper .variable-inner-wrapper .variable-value{
   flex: 99;
   display: flex;
   flex-direction: column;
   align-self: stretch;
   gap: 4px;
   overflow: hidden;
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-scale-wrapper .variable-inner-wrapper .variable-value{
   display: none;
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-group-wrapper .variable-inner-wrapper .variable-label,
#brxcCSSVariableManagerOverlay.sidebar .brxc-group-wrapper .variable-inner-wrapper .variable-value{
   background-color: var(--builder-bg-2);
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-variable-manager__left-col{
   overflow: visible;
   min-height: 56px;
   z-index: 3;
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-variable-manager__left-col .brxc-select {
   min-height: 36px;
}
.brxc-scale-wrapper .variable-inner-wrapper .variable-value .variable-value__sizer{
   background-color: var(--builder-color);
   border-radius: 0.25rem;
   max-width: 100%;
   align-self: normal;
}
.brxc-scale-wrapper .variable-inner-wrapper .variable-value__container:nth-of-type(2) .variable-value__sizer{
   background-color: var(--builder-color-accent);
}
.brxc-scale-wrapper .variable-inner-wrapper span.variable-value__sizer-label {
   font-size: 14px;
   cursor: default;
}
.brxc-scale-wrapper .variable-inner-wrapper .variable-value .variable-value__border {
   --size: 75px;
   width: calc(var(--size) * 2);
   height: var(--size);
   background-color: var(--builder-color);
}
.brxc-scale-wrapper .variable-inner-wrapper .variable-value__container:nth-of-type(2) .variable-value__border {
   background-color: var(--builder-color-accent);
}
span.preview-typgragraphy-scale{
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   line-height: 120%;
   align-content: center;
}
.variable-value__container:nth-of-type(2) span.preview-typgragraphy-scale {
   color: var(--builder-color-accent);
}
.brxc-scale-wrapper .variable-inner-wrapper .variable-value .variable-value__container {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 5px;
   background-color: var(--builder-bg);
   opacity: .5;
   border-radius: var(--builder-border-radius);
}
.brxc-scale-wrapper .variable-inner-wrapper .variable-value .variable-value__container:hover{
   opacity: 1;
}
.variable-value__svg {
   background-color: var(--builder-bg-2);
   color: var(--builder-color);
   padding: 8px;
   align-self: normal;
   align-items: center;
   justify-content: center;
   display: flex;
   border-radius: var(--builder-border-radius);
}
#brxcCSSVariableManagerOverlay.sidebar .input-container .variable-value__svg{
   background-color: var(--builder-bg-3);
}
.input-container .variable-value__svg{
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
}
.brxc-scale-wrapper .variable-inner-wrapper .variable-modifier__container{
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-self: normal;
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-scale-wrapper .variable-inner-wrapper .variable-modifier__container{
   max-width: 25%;
}
.brxc-scale-wrapper .variable-inner-wrapper input.variable-modifier {
   --width: 90px;
   width: var(--width);
   min-width: var(--width);
   max-width: var(--width);
   color: var(--builder-color);
   opacity: 1;
   background-color: var(--builder-bg-3);
   align-self: stretch;
   flex: 1;
}
.brxc-scale-wrapper .variable-inner-wrapper input.variable-modifier{
   height: auto;
   text-align: center;
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-scale-wrapper .variable-inner-wrapper input.variable-modifier{
   --width: min(80px, 100%);
   height: 26px;
   max-height: 26px;
   min-height: 26px;
   max-width: unset;
   width: unset;
   flex-grow: 1;
}
.brxc-scale-wrapper .variable-inner-wrapper input.variable-modifier[readonly]{
   opacity: .5;
   cursor: not-allowed;
}
.brxc-scale--base {
   --builder-bg-2: var(--builder-bg-component);
   --builder-bg-3: var(--builder-bg);
   --builder-color: var(--builder-color-component);
}
#brxcCSSVariableManagerOverlay.sidebar .brxc-scale--base{
   --builder-bg-3: var(--builder-bg-component);
   --builder-bg-2: var(--builder-bg);
}
.brxc-delete-scale {
   font-size: 12px;
   color: var(--builder-color-danger);
   cursor: pointer;
   z-index: 1;
}

.brxc-delete-scale * {
   pointer-events: none;
}

/* Categories */
#brxcCSSVariableManagerOverlay .variable-heading .action {
   display: flex;
   align-items: center;
   gap: 16px;
   min-width: 250px;
   justify-content: flex-end;
   height: 36px;
}
#brxcCSSVariableManagerOverlay.sidebar .variable-heading .action {
   display: none;
}

/*--------------------------------------
Focus Mode
 --------------------------------------*/
body.focus-mode #bricks-structure .structure-item{
   display: none;
}

body.focus-mode #bricks-structure .structure-item[data-focus="true"],
body.focus-mode #bricks-structure .structure-item[data-focus="true"] + .bricks-structure-list .structure-item {
   display: flex;
}

body.focus-mode #bricks-structure .bricks-structure-list[data-parent-focus="true"]{
   margin-left: 0;
}

#brxcFocusModeAlert {
   grid-column: 1 / 2;
   padding: 4px 8px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: calc(100% - 0px);
   margin-bottom: 20px;
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
   pointer-events: none;
   user-select: none;
   order: 1;
   position: sticky;
   z-index: 1;
   top: 136px;
}
#brxcFocusModeLabel {
   display: flex;
   align-items: center;
}
#brxcFocusModeLabel i {
   margin-right: 8px;
}
#brxcFocusModelClose {
   display: flex;
   pointer-events: auto;
   cursor: pointer;
}
#brxcFocusModelClose * {
   pointer-events: none;
}

/*--------------------------------------
Color Manager
 --------------------------------------*/
 #brxcColorManagerOverlay.brxc-overlay__wrapper.sidebar .brxc-overlay__pannel {
   padding: 0px 0px 16px;
}
#colorHeaderCanvas{
   display: grid;
   grid-template-columns: 1fr;
   gap: 8px;
   padding: 16px;
   padding-bottom: 0;
   position: sticky;
   top: 0;
   background-color: var(--builder-bg);
   z-index: 3;
}
#colorHeaderCanvas:has(.brxc-prefix-container){
   grid-template-columns: 1fr 60px auto;
}
#colorSearchCanvas:has(~ #colorBodyCanvas #brxcColorManagerViewCSS){
   display: none;
}
#colorBodyCanvas, 
#colorBodyCanvas #brxcColorManagerViewCSS + .CodeMirror {
   display: flex;
   flex-direction: column;
   height: 100%;
   min-height: 300px;
}
#colorBodyCanvas #brxcColorManagerViewCSS + .CodeMirror{
   max-height: 50vh;
}
#colorBodyCanvas #brxcColorManagerViewCSSContainer{
   margin: 0 16px 16px;
   padding-bottom: 8px;
   display: flex;
   flex-direction: column;
   gap: 8px;
}
#colorBodyCanvas #brxcColorManagerViewCSSContainer p[data-control] {
   margin: 0 0 8px 0;
}
#colorBodyCanvas:has(#brxcColorManagerViewCSS) .brxc-overlay__panel-inline-btns-wrapper{
   padding: 16px;
}
#brxcExportColorsToManager{
   width: 100%;
   border: none;
   padding: 6px 8px !important;
   font-weight: 500;
   background-color: var(--builder-bg-2);
   color: var(--builder-color);
}
#brxcExportColorsToManager:hover{
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
}
#colorBodyCanvas .brxc-codemirror__wrapper .brxc-overlay__action-btn{
   font-size: 12px;
}
.brxc-select {
   display: flex;
   gap: 1px;
   color: var(--builder-color);
}
.brxc-toggle-palette{
   margin-left: 16px;
   display: flex;
   align-items: center;
}
.brxc-shade-wrapper i.fa-toggle-on,
.brxc-shade-wrapper i.fa-toggle-off{
   font-size: 32px;
   cursor: pointer;
}
.brxc-toggle-palette i.fa-toggle-on,
.brxc-shade-wrapper i.fa-toggle-on{
   color: var(--builder-color-accent);
}
.brxc-toggle-palette i.fa-toggle-off,
.brxc-shade-wrapper i.fa-toggle-off{
   color: var(--bricks-color-secondary);
}
#colorHeaderCanvas #brxcRenamePalette,
#colorHeaderCanvas #brxcAddPalette{
   background-color: var(--builder-bg-3);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   border: 0;
   outline: 0;
   font-size: 12px;
   width: 100%;
   height: 44px;
   padding: 0 40px 0 10px;
   color: var(--builder-color);
   border-radius: 0 0.25em 0.25em 0;
}
#colorHeaderCanvas .brxc-select-palette{
   display: flex;
   flex-direction: column;
}
#colorHeaderCanvas .brxc-label{
   color: var(--builder-color);
   margin-bottom: 4px;
   font-size: 12px;
   opacity: .5;
}
#colorHeaderCanvas .brxc-input-wrapper {
   display: flex;
   gap: 1px;
   color: var(--builder-color);
}
#colorHeaderCanvas .brxc-icon-container {
   display: flex;
   align-items: center;
   gap: 10px;
}
#colorHeaderCanvas .brxc-icon-container > div{
   display: flex;
}

#colorHeaderCanvas .brxc-select-wrapper .brxc-icon{
   color: var(--builder-color);
   opacity: .5;
}
#colorHeaderCanvas .brxc-select-wrapper .brxc-icon:hover{
   opacity: 1;
}
#colorHeaderCanvas .brxc-select-wrapper .brxc-icon.active{
   color: var(--builder-color-accent);
   opacity: 1;
}
#colorHeaderCanvas .brxc-prefix-container input{
   background-color: var(--builder-bg-2);
   height: 34px;
   border: 0;
   border-radius: var(--builder-border-radius);
   color: var(--builder-color);
}
#colorHeaderCanvas .brxc-darkmode {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 8px;
   background-color: var(--builder-bg-2);
   border-radius: 0.25em 0 0 0.25em;
   cursor: pointer;
   min-width: 38px;
}
#colorHeaderCanvas .brxc-darkmode.active {
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
}
#colorHeaderCanvas .brxc-darkmode i {
   font-size: 18px;
}
#colorHeaderCanvas .brxc-select-wrapper {
   display: flex;
   flex-direction: column;
   flex: 1;
   height: 100%;
   border-top-right-radius: var(--builder-border-radius);
   border-bottom-right-radius: var(--builder-border-radius);
   font-size: 13px;
   font-weight: 600;
   position: relative;
}
#colorHeaderCanvas .brxc-select-wrapper > .active-palette,
#colorHeaderCanvas .brxc-select-wrapper .list-palette > div{
   height: 34px;
   align-items: center;
   padding: 0px 10px;
   cursor: pointer;
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 8px;
}
#colorHeaderCanvas .brxc-select-wrapper > .active-palette > span,
#colorHeaderCanvas .brxc-select-wrapper .list-palette > div > span{
   white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
#colorHeaderCanvas .brxc-select-wrapper .active-palette{
   background-color: var(--builder-bg-2);
   border-top-right-radius: var(--builder-border-radius);
}
#colorHeaderCanvas .brxc-select-wrapper:has(.list-palette.hidden) .active-palette{
   border-bottom-right-radius: var(--builder-border-radius);
}
#colorHeaderCanvas .brxc-select-wrapper .list-palette{
   display: flex;
   flex-direction: column;
   z-index: 2;
   position: absolute;
   top: 100%;
   width: 100%;
   box-shadow: 0 6px 12px rgba(0, 0, 0, .4);
   font-weight: 400;
}
#colorHeaderCanvas .brxc-select-wrapper .list-palette > div{
   background-color: var(--builder-bg-2);
   border-top: 1px solid var(--builder-bg);
}
#colorHeaderCanvas .brxc-select-wrapper .list-palette > div:last-child{
   border-bottom-left-radius: var(--builder-border-radius);
   border-bottom-right-radius: var(--builder-border-radius);
}
#colorHeaderCanvas .brxc-select-wrapper .active-palette:hover,
#colorHeaderCanvas .brxc-select-wrapper .list-palette > div:hover{
   background-color: var(--builder-bg-3)
}
#colorHeaderCanvas .brxc-select-wrapper .list-palette.hidden{
   display: none;
}
#colorHeaderCanvas .brxc-select-wrapper .brxc-action {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-left: auto;
}
#colorHeaderCanvas .brxc-select-wrapper .brxc-action i{
   display: flex;
   align-items: center;
}
#colorHeaderCanvas .brxc-select-wrapper .brxc-action i.fa-toggle-on{
   font-size: 20px;
   color: var(--builder-color-accent);
}
#colorHeaderCanvas .brxc-select-wrapper .brxc-action i.fa-toggle-off{
   font-size: 20px;
   color: var(--bricks-color-secondary);
}
#colorHeaderCanvas .brxc-icon-container .brxc-icon{
   display: flex;
   font-size: 12px;
   color: var(--builder-color);
   cursor: pointer;
   opacity: .5;
}
#colorHeaderCanvas .brxc-icon-container .brxc-icon.palette-menu{
   opacity: 1;
   font-size: 18px;
   cursor: pointer;
   align-self: end;
   margin-bottom: 8px;
}

#colorSearchCanvas{
   padding-top: 16px;
   position: sticky;
   top: 74px;
   background-color: var(--builder-bg);
   z-index: 1;
}
.brxc-overlay__wrapper.sidebar #colorSearchCanvas .brxc-overlay__search-box {
   margin-bottom: 6px;
}
.brxc-color-list{
   padding: 0;
   margin: 0;
   list-style: none;
   display: flex;
   flex-direction: column;
}
.brxc-color-list > li{
   position: relative;
   list-style: none;
   display: flex;
   flex-direction: column;
}
.brxc-color-list > li[data-level] {
   padding-left: calc(16px + 32px * var(--level));
}
.brxc-color-list.is-searching > li[data-level] {
   padding-left: 0px;
   color: black;
   background-color: wheat;
}
.brxc-color-list:not(.is-searching) > li[data-level]::before,
.brxc-color-list:not(.is-searching) > li[data-level]::after{
   content: '';
   position: absolute;
   background-color: var(--builder-color);
   opacity: 0.3;
}
.brxc-color-list:not(.is-searching) > li[data-level]::before {
   left: 19px;
   top: 50%;
   transform: translateY(-50%);
   height: 1px;
   width: calc(34px * var(--level));
}
.brxc-color-list:not(.is-searching) > li[data-level]::after {
   left: 18px;
   top: 0;
   height: 100%;
   width: 1px;
}
.brxc-color-list > li.framework{
   cursor: not-allowed;
}

#brxcColorManagerOverlay .brxc-color-list > li.active{
   background-color: var(--builder-bg-accent);
   z-index: 1;
}

.brxc-color-list > li.disable button,
.brxc-color-list > li.disable input{
   pointer-events: none;
   cursor: not-allowed;
   opacity: .5;
}
.brxc-color-list > li .color-wrapper{
   display: flex;
   align-items: center;
   padding: 0 16px;
}
#brxcClassListCanvas li .handle,
.brxc-color-list > li .color-wrapper .handle {
   color: var(--builder-color);
   margin-right: 8px;
   opacity: .5;
   font-size: 12px;
   cursor: pointer;
}
.brxc-color-list > li button.brxc-color-input,
.brxc-color-list > li button.brxc-color-input-framework{
   width: 25px;
    height: 25px;
    border-radius: 50%;
    aspect-ratio: 1;
}
.brxc-color-list > li .btn-color-wrapper{
   position: relative;
    background-image: var(--bg-checkboard);
    background-size: 300%;
    display: flex;
    border-radius: 99vw;
    margin: 5.5px 0;
}
.brxc-color-list > li .btn-color-check{
   --height: 10px;
   position: absolute;
   top: 4px;
   right: -4px;
   color: white;
   background-color: green;
   width: var(--height);
   height: var(--height);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 6px;
   border-radius: 50%;
   padding: 4px;
}
.brxc-color-list > li button.brxc-color-input-framework{
   cursor: not-allowed;
}
.brxc-color-list > li .color-wrapper input{
   background-color: transparent;
   border-radius: 0;
   box-shadow: none!important;
   cursor: inherit;
   height: var(--builder-structure-input-height);
   outline: none;
   border: none;
   color: var(--builder-color);
   overflow: hidden;
   position: relative;
   text-overflow: ellipsis;
}
#brxcColorManagerOverlay .brxc-color-list .actions {
   display: none;
}
#brxcColorManagerOverlay .brxc-color-list .actions.always-visible {
   display: flex;
   margin-left: 8px;
}
#brxcColorManagerOverlay .brxc-color-list > li .actions.always-visible .brxc-icon {
    --size: 21px;
    background-color: var(--builder-bg-3);
    padding: 5px;
    border-radius: 50%;
    width: var(--size);
    height: var(--size);
    display: flex;
    align-items: center;
    justify-content: center;
}
#brxcColorManagerOverlay .brxc-color-list > li .actions.always-visible .brxc-icon.links {
   --size: 21px;
   background-color: unset;
}
#brxcColorManagerOverlay .brxc-color-list > li .actions.always-visible .brxc-icon.links.unlinked {
   color: var(--bricks-color-secondary);
}
#brxcColorManagerOverlay .brxc-color-list .actions .brxc-icon{
   cursor: pointer;
}
#brxcColorManagerOverlay .brxc-color-list > li.active .actions,
#brxcColorManagerOverlay .brxc-color-list > li:hover .actions {
   display: flex;
}
.brxc-color-list > li.active .actions .brxc-icon,
#brxcColorManagerOverlay .brxc-color-list > li .actions .brxc-icon{
   color: var(--builder-color);
   font-size: 11px;
   opacity: .5;
}

#brxcColorManagerOverlay .brxc-color-list > li .actions .brxc-icon:hover,
#brxcColorManagerOverlay .brxc-color-list > li .actions .brxc-icon.active{
   color: var(--builder-color);
   opacity: 1;
}
#brxcColorManagerOverlay .brxc-color-list > li .actions .brxc-icon.active{
   color: var(--builder-color-accent);
}

#brxcColorManagerOverlay .brxc-color-list .actions .brxc-icon * {
   pointer-events: none;
}

#brxcColorManagerOverlay .brxc-color-list .shade-form,
#brxcColorManagerOverlay .brxc-color-list .complementary-form {
   margin: 0 16px;
   position: relative;
   z-index: 0;
}
#brxcColorManagerOverlay .brxc-color-list .complementary-form .brxc-select{
   flex-basis: 50%;
   min-height: 36px;
}
#brxcColorManagerOverlay .brxc-color-list .brxc-shade-wrapper{
   padding: 16px;
   gap: 16px;
   top: 5px;
}
div#dynamicScaleCanvas {
   display: flex;
   flex-direction: column;
   gap: 16px;
}
#brxcColorManagerOverlay .shade-form .bricks-control-popup.bottom:before {
   right: 56px;
}
#brxcColorManagerOverlay .complementary-form .bricks-control-popup.bottom:before {
   right: 76px;
}
#brxcColorManagerOverlay .control-inner {
   display: flex;
   flex-direction: column;
   gap: 16px;
   justify-content: space-between;
   position: relative;
   width: 100%;
}
#brxcColorManagerOverlay .control-inline {
   align-items: center;
   flex-direction: row;
   min-height: var(--builder-input-height);
}
#brxcColorManagerOverlay label{
   margin: 0;
}
#brxcColorManagerOverlay .brxc-overlay__panel-inline-btns-wrapper label{
   background-color: var(--builder-bg);
}
#brxcColorManagerOverlay .brxc-shade-wrapper input[type="text"],
#brxcColorManagerOverlay .brxc-shade-wrapper input[type="number"]{
   background-color: var(--builder-bg);
   border: none;
   border-radius: var(--builder-border-radius);
   box-shadow: none;
   color: var(--builder-color);
   display: block;
   font-family: inherit;
   font-size: 12px;
   height: var(--builder-input-height);
   line-height: var(--builder-input-height);
   outline: none;
   padding: 0 12px;
   transition: none;
   width: 100%;
   flex-basis: 50%!important;
}
#brxcColorManagerOverlay .brxc-shade-wrapper input[type="number"]#numberShadesValue{
   flex-basis: 64px !important;
   padding-right: 0px;
   padding-left: 8px;
}

.brxc-color-list > li.active input[type="text"].color-name{
   color: var(--builder-color-accent) !important;
}
#brxcColorManagerOverlay label span{
   display: block;
   color: var(--builder-color);
   font-weight: 400;
   letter-spacing: .2px;
   line-height: 20px;
   margin: 0;
   position: relative;
   font-size: 12px;
}
#brxcColorManagerOverlay .existing-shades-message{
   color: var(--builder-color-description);
   font-size: 12px;
   line-height: 1.4em;
   display: block;
}
#brxcColorManagerOverlay .brxc__range{
   --RaisinBlack02: var(--builder-bg);
   --BabyBlue: var(--builder-gray-5);
   --Cinnabar: var(--builder-gray-0);
   --circle: var(--builder-bg);
   flex-basis: 50%;
   gap: 1rem;
}

#brxcColorManagerOverlay .brxc__range span {
   color: var(--builder-color);
}
#brxcColorManagerOverlay .brxc-color-list .brxc-shade-wrapper .scale-wrapper {
   color: var(--builder-color);
   max-width: 50%;
   display: grid;
   grid-template-columns: repeat(auto-fit, 20px);
   justify-content: space-between;
   width: 100%;
   align-items: center;
   gap: 5px 3px;
}
#brxcColorManagerOverlay .brxc-color-list .brxc-shade-wrapper .scale-color {
   position: relative;
}
#brxcColorManagerOverlay .brxc-color-list .brxc-shade-wrapper .scale-color .delete-scale-color{
   position: absolute;
   top: -5px;
   right: -5px;
   width: 12px;
   height: 12px;
   background-color: var(--builder-color-accent);
   color: var(--builder-gray-0);
   border-radius: 50px;
   font-size: 7px;
   display: none;
   align-items: center;
   justify-content: center;
   border: 1px solid;
}
#brxcColorManagerOverlay .brxc-color-list .brxc-shade-wrapper .scale-color:hover .delete-scale-color{
   display: flex;
}
#brxcColorManagerOverlay .brxc-color-list .brxc-shade-wrapper .scale-wrapper .dotted-border{
   color: var(--builder-gray-8);
    border: 2px dotted;
    border-radius: 3px;
    aspect-ratio: 1;
    width: 20px;
    height: 20px;
    display: flex;
    font-size: 10px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#brxcColorManagerOverlay .brxc-color-list .brxc-shade-wrapper .scale-wrapper .dotted-border:hover{
   color: var(--builder-color);
   
}
#brxcColorManagerOverlay .brxc-color-list .brxc-shade-wrapper .color-btn-wrapper{
   display: grid;
   grid-auto-flow: column;
   gap: 3px;
   color: var(--builder-color);
   flex-basis: 50%;
}
#brxcColorManagerOverlay .brxc-color-list .complementary-form .brxc-shade-wrapper .color-btn-wrapper{
   flex-basis: unset;
   gap: 6px;
}
#brxcColorManagerOverlay .brxc-color-list .brxc-shade-wrapper .color-btn-wrapper button{
   width: 100%;
   height: 20px;
}
#brxcColorManagerOverlay .brxc-color-list .complementary-form .brxc-shade-wrapper .color-btn-wrapper button{
   height: 36px;
   aspect-ratio: 1;
   border-radius: 50%;
}

#color_picker input {
   padding: 0;
}
#color_picker #custom_colors {
   display: none;
}
#brxcClassListCanvas > ul > li.sortable-selected,
#brxcColorManagerOverlay .brxc-color-list > li.sortable-selected{
   background-color: var(--builder-bg-accent);
}

#brxcColorManagerOverlay .brxc-color-list > li.sortable-selected .color-wrapper input.color-name{
   color: var(--builder-color-accent);
}

/*--------------------------------------
Disable Styles on ID level
 --------------------------------------*/
 body.at-disable-styles #bricks-panel-tabs{
   position: relative;
 }

 body.at-disable-styles .brxc-style-tab-disabled{
   pointer-events: none;
   display: flex;
   gap: 10px;
   justify-content: center;
   align-items: center;
   overflow: visible !important;
}

body.at-disable-styles #bricks-panel-inner > #bricks-panel-element #bricks-panel-tabs li:nth-of-type(2)
{
   pointer-events: none;
}
body.at-disable-styles  #bricks-panel-element[data-has-class="true"] #bricks-panel-tabs li:nth-of-type(2){
   pointer-events: auto !important;
}

body.at-disable-styles  .disabled-style-icon{
   color: var(--bricks-text-danger);
   display: flex;
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
   font-size: 9px;
   left: calc(75% + 24px);
   cursor: pointer;
}

 /*--------------------------------------
Responsive Bar
 --------------------------------------*/
 body[data-responsive-helper="true"] #bricks-toolbar li.breakpoint.active{
   cursor: pointer;
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
 }
 body[data-responsive-helper="true"] #bricks-toolbar li.breakpoint.active[data-click="true"]{
   cursor: pointer;
   background-color: var(--builder-bg-3);
   color: currentcolor;
 }
 #bricks-toolbar li.responsive-slider {
   width: 20px !important;
}
#bricks-toolbar li.responsive-slider.active {
   cursor: pointer;
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
}

 #brxcResponsiveBar {
   position: relative;
   z-index: 1003;
}
#brxcResponsiveBar *{
   display: none;
}
#brxcResponsiveBar.active *{
   display: flex;
}


#brxcResponsiveBar.active + #bricks-builder-iframe-wrapper {
      height: calc(100% - 66px);
}

.brxc-range-input-wrapper{
   background-color: var(--builder-bg);
   padding: 18px 10px;
}
.brxc-range-input-container{
   position: relative;
   flex-grow: 1;
   flex-direction: column;
}
.brxc-range-input-container .ruler{
   width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 8px;
}
.brxc-range-input-container .ruler .interval {
   position: relative;
    padding-right: 4px;
    flex-grow: 1;
    justify-content: end;
    width: 100%;
    padding-top: 9px;
}
.brxc-range-input-container .ruler .interval:before {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   width: 1px;
   background-color: var(--builder-bg-2);
}
.brxc-range-input-container .ruler .interval:first-child:after {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   width: 1px;
   background-color: var(--builder-bg-2);
}


#brxcResponsiveBar input {
   direction: rtl;
   z-index: 1;
}
#brxcResponsiveBar input.reverse {
   direction: ltr;
}

#brxcResponsiveBar .bp-marker{
   width: 1px;
   height: 8px;
   position: absolute;
   background-color: var(--builder-color-accent);
   z-index: 1;
}
 /*--------------------------------------
Draggable Structure Panel
 --------------------------------------*/

body.draggable-structure #bricks-preview{
   margin-right: 0px !important;
   pointer-events: none;
}
body.draggable-structure #bricks-structure{
   --right-default: 65%;
   --width-default: 500px;
   z-index: var(--at-structure-elevation);
   position: fixed;
   padding-bottom: 0px;
   right: calc(100% - var(--right, var(--right-default)) - var(--width, var(--width-default))) !important;
   top: var(--top, 10%);
   max-height: var(--max-height, 80vh);
   box-shadow: 0px 0px 15px rgba(0,0,0,0.3);
   border: none;
}
#bricks-panel-header{
   cursor: pointer;
}
body.draggable-structure #bricks-structure #bricks-panel-header{
   cursor: grab;
}
body.draggable-structure #bricks-structure #bricks-structure-resizable{
   top: var(--top);
   height: var(--max-height, 80vh);
}
body.draggable-structure.at-has-shortcuts-sidebar #bricks-structure .brxce-panel-shortcut__wrapper{
   overflow: scroll;
   scrollbar-width: none !important;
   -ms-overflow-style: none;
}
body.draggable-structure.at-has-shortcuts-sidebar #bricks-structure .brxce-panel-shortcut__wrapper::-webkit-scrollbar{
   width: 0 !important;
   height: 0 !important;
}

body.draggable-structure #bricks-structure ~ #bricks-builder-context-menu{
   z-index: 9999!important;
}

/*--------------------------------------
Select Control
--------------------------------------*/

.brxc-select-new{
   height: auto;
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
   text-overflow: ellipsis;
   position: relative;
   cursor: pointer;
   width: 100%;
   color: var(--builder-color);
   user-select: none;
   align-self: baseline;
}
.brxc-select-new.max-width{
   max-width: 96px;
}
.brxc-select-new__wrapper{
   position: absolute;
   top:0;
   left:0;
   right: 0;
   z-index: 1;
   overflow-y: auto;
   max-height: 400px;
}
.brxc-select-new__wrapper span{    
   text-overflow: ellipsis;
   overflow: hidden;
   pointer-events: none;
}

.brxc-select-new__wrapper > div{
   padding: 4px 8px;
   white-space: nowrap;
   height: 36px;
   display: flex;
   align-items: center;
}

.brxc-select-new.hidden .brxc-select-new__wrapper > div:not(.active){
   display: none;
}
.brxc-select-new__wrapper > div:not(.active){
   background-color: var(--builder-bg-3);
}
.brxc-select-new__wrapper > .active{
   background-color: var(--builder-bg-3);
}
.brxc-select-new.hidden .brxc-select-new__wrapper > .active{
   padding-right: 18px;
   border-top-left-radius: var(--builder-border-radius);
   border-bottom-left-radius: var(--builder-border-radius);
}
.brxc-select-new.hidden .brxc-select-new__wrapper > .active::before {
   content: '';
   position: absolute;
   top: 50%;
   right: 8px;
   width: 0;
   height: 0;
   pointer-events: none;
   transform: translateY(-50%);
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   border-top: 4px solid var(--builder-color);
   opacity: .5;
}
.brxc-select-new.hidden .brxc-select-new__wrapper > .active:hover::before {
   border-top: 4px solid var(--builder-color-accent);
   opacity: 1;
}
.brxc-select-new__wrapper > *:first-child{
   border-top-left-radius: var(--builder-border-radius);
}
.brxc-select-new__wrapper > *:hover{
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
}
.brxc-select-new__wrapper > *:not(:first-child){
   border-top: var(--builder-bg-2) 1px solid;
}
.brxc-select-new.hidden .brxc-select-new__wrapper > .active{
   border: none !important;
}

.brxc-select-new.visible .brxc-select-new__wrapper > div:last-child:not(:first-child){
   border-bottom-left-radius: var(--builder-border-radius);
   border-bottom-right-radius: var(--builder-border-radius);
}
.brxc-select-new.rounded .brxc-select-new__wrapper > div:first-child,
.brxc-select-new.rounded.hidden .brxc-select-new__wrapper > .active{
   border-top-right-radius: var(--builder-border-radius);

}
.brxc-select-new.rounded.hidden .brxc-select-new__wrapper > .active{
   border-bottom-right-radius: var(--builder-border-radius);
}

.brxc-select-new.visible {
   z-index: 99;
}

.brxc-select-new.visible .brxc-select-new__wrapper{
   box-shadow: var(--builder-box-shadow);
}

/* bg2 */
.brxc-select-new.bg2 .brxc-select-new__wrapper > .active,
.brxc-select-new.bg2 .brxc-select-new__wrapper > div:not(.active) {
   background-color: var(--builder-bg-2);
}
.brxc-select-new.bg2 .brxc-select-new__wrapper > div:hover{
   background-color: var(--builder-bg-accent);
}
.brxc-select-new.bg2 .brxc-select-new__wrapper > div:not(:first-child) {
   border-top: var(--builder-bg) 1px solid;
}

/* overrides*/

/* Advanced Text Wrapper & Class Manager*/
#brxc-text-basic-options .brxc-select-new__wrapper > div{
   height: 32px;

}
#brxcCSSVariableManagerOverlay .brxc-scale-control-wrapper .brxc-select-new__wrapper > div{
   height: 40px;
}

/* Sticky CSS */
#brxcStickyCSSSelect.hidden .brxc-select-new__wrapper > .active{
   border-bottom-left-radius: 0px;
}

#brxcSearchStructureSelect .brxc-select-new__wrapper{
   overflow: unset;
}

/*--------------------------------------
Search Structure
--------------------------------------*/
#brxcSearchStructureContainer{
   display: flex;
   align-items: stretch;
   padding: 20px 0px 20px 24px;
   position: sticky;
   top: 60px;
   background-color: var(--builder-bg);
   z-index: 1;
}


#brxcStickyCSSSelect{
   min-width: 150px;
}
#brxcSearchStructureWrapper{
   margin-bottom: 0;
}
#brxcSearchStructureWrapper .iso-reset{
   right: 28px;
}
#brxcStickyCSSSelect #brxcStickyCSSSelectWrapper > div{
   height: 28px;
}
#brxcSearchStructureSelect.hidden #brxcSearchStructureSelectWrapper > div:first-child{
   border-bottom-left-radius: var(--builder-border-radius);
}


#bricks-structure .panel-content #brxcSearchStructureContainer .brxc-overlay__search-box {
   margin-bottom: 0px;
}
#bricks-structure .panel-content #brxcSearchStructureContainer .brxc-overlay__search-box .iso-reset {
   right: 27px;
   top: 7px;
}
#bricks-structure .panel-content #brxcSearchStructureContainer .brxc-overlay__search-box .iso-search-icon{
   top: 20px;
   left: 12px;
}
body.searching-in-structure #bricks-structure .panel-content .bricks-structure-list.bricks-draggable-root,
body.searching-in-structure #bricks-structure .panel-content #brxcSearchStructureContainer{
   padding-left: 24px !important;
}

body.filterable-structure #bricks-structure > #brxcSearchStructureContainer{order: 1; grid-column: 1 / 2;}
body.filterable-structure #bricks-structure > #bricks-panel-header{order: 0}
body.filterable-structure #bricks-structure > main.panel-content{order: 2}
#brxcSearchStructure{
   margin: 0 0px 0px 1px;
   width: calc(100% - 22px);
   font-size: unset;
   padding-left: 35px;
   height: calc(var(--builder-input-height) + 4px);
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
}
#brxcSearchStructure::placeholder{
   opacity: var(--builder-placeholder-opacity)
}

body.searching-in-structure #bricks-structure .element[data-id] > .structure-item,
body.searching-in-structure #bricks-structure .structure-item .toggle,
body.searching-in-structure #bricks-structure .element.active:before,
body.searching-in-structure #bricks-structure .element.active .element:before{
   display: none;
}
body.searching-in-structure #bricks-structure .bricks-structure-list{
   margin-left: 0 !important;
   padding-left: 0 !important;
}
body.searching-in-structure #bricks-structure .element[data-search-active="true"] > .structure-item{
   display: flex !important;
}

 /*--------------------------------------
TinyMCE
 --------------------------------------*/
.mce-ico.mce-i-icon.fas.fa-robot{
   font-family: Font Awesome\ 6 Solid;
}
 /*--------------------------------------
Extend
 --------------------------------------*/

#brxcExtendModal #brxcExtendCategory{
    text-transform: capitalize;
}
 /*--------------------------------------
Remove Border and box-shadow
 --------------------------------------*/
 [class*=brxe-].is-active-element.has-border-settings{
    outline: none !important;
}

 /*--------------------------------------
Superpower CSS
 --------------------------------------*/
.brxc-codemirror__wrapper{
   position: relative;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
}
.brxc-codemirror__wrapper .brxc-overlay__action-btn{
   position: absolute;
   top: 8px;
   right: 8px;
   font-size: 9px;
   padding: 4px 8px;
   border: 2px solid var(--builder-gray-4);
}
.brxc-codemirror__wrapper .brxc-overlay__action-btn:hover{
   border: 2px solid var(--builder-gray-6);
}

body.at-superpower-css [data-controlkey="_cssCustom"] {
   display: none !important;
}

#bricks-panel-element [data-controlkey="_cssSuperPowerCSS"]{
   display: none;
}
body.at-superpower-css #bricks-panel-element [data-controlkey="_cssSuperPowerCSS"]{
   display: block;
}
body.at-has-panel-shortcuts.at-superpower-css #bricks-panel-element [data-controlkey="_cssSuperPowerCSS"]{
   display: flex;
    flex-direction: column;
    flex-grow: 1;
}
body.at-has-panel-shortcuts.at-superpower-css #bricks-panel-element [data-controlkey="_cssSuperPowerCSS"] .control.control-textarea{
   height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
body.at-has-panel-shortcuts.at-superpower-css #bricks-panel-element [data-controlkey="_cssSuperPowerCSS"] .control.control-textarea .control-inner{
   flex: 400%;
}
body.at-has-panel-shortcuts.at-superpower-css #bricks-panel-element [data-controlkey="_cssSuperPowerCSS"] .control.control-textarea [data-control="textarea"]{
   flex-grow: 1;
   margin-top: 24px;
   display: flex;
   flex-direction: column;
}

body.at-has-panel-shortcuts.at-superpower-css #bricks-panel-element [data-controlkey="_cssSuperPowerCSS"] .CodeMirror[data-type="at"]{
   display: flex;
    flex-direction: column;
    width: 100%;
    flex-grow: 1;
    min-height: 200px;
}

body.at-superpower-css [data-controlkey="_cssSuperPowerCSS"] .CodeMirror[data-type="at"] .CodeMirror-sizer,
#brxc-sticky-css [data-controlkey="_cssStickyCSS"] .CodeMirror .CodeMirror-sizer {
   margin-left: 29px !important;
   margin-bottom: 0px !important;
   border-right-width: 50px !important;
   min-height: 74px !important;
   padding-right: 0px !important;
   padding-bottom: 0px !important;
   height: 100%;
}
body.at-superpower-css [data-controlkey="_cssSuperPowerCSS"] .CodeMirror[data-type="at"] .CodeMirror-gutter.CodeMirror-linenumbers,
#brxc-sticky-css [data-controlkey="_cssStickyCSS"] .CodeMirror[data-type="at"] .CodeMirror-gutter.CodeMirror-linenumbers{
   width: 29px !important;
}

body.at-superpower-css [data-controlkey="_cssSuperPowerCSS"] .brxc-action,
#brxc-sticky-css [data-controlkey="_cssStickyCSS"] .brxc-action {
   position: absolute;
   top: -24px;
   right: 0px;
   fill: var(--builder-color);
   display: flex;
   gap: 4px;
}

body.at-superpower-css [data-controlkey].at-full-screen ,
#advancedCSSUI__panel.at-full-screen{
   position: fixed;
    top: 0;
    z-index: 100000;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--builder-bg);
}
body.at-superpower-css [data-controlkey="_cssSuperPowerCSS"].at-full-screen [data-control="textarea"]{
   padding-bottom: 40px;
}
#advancedCSSUI__panel.at-full-screen{
   padding: 10px 20px;
}



.at-full-screen[data-controlkey],
.at-full-screen[data-controlkey] .control.control-textarea,
.at-full-screen[data-controlkey] .control.control-textarea .control-inner,
.at-full-screen[data-controlkey] .control.control-textarea .control-inner [data-control="textarea"],
.at-full-screen[data-controlkey] .control.control-textarea .control-inner [data-control="textarea"] .CodeMirror,
.at-full-screen[data-controlkey] .control.control-code,
.at-full-screen[data-controlkey] .control.control-code .control-inner,
.at-full-screen[data-controlkey] .control.control-code .control-inner [data-control="code"],
.at-full-screen[data-controlkey] .control.control-code .control-inner [data-control="code"] .CodeMirror{
   display: flex;
   flex-direction: column;
   flex-wrap: unset;
   height: -webkit-fill-available !important;
}
.at-full-screen[data-controlkey] .control.control-code .control-inner [data-control="code"]{
   overflow: auto;
}
.at-full-screen[data-controlkey] .control.control-code{
   max-height: calc(100% - 60px) !important;
}
.at-full-screen[data-controlkey] .control.control-textarea .description,
.at-full-screen[data-controlkey] .control.control-code .description {
   flex-grow: 0;
   flex-shrink: 99;
}

.at-full-screen[data-controlkey] .control,
.at-full-screen[data-controlkey] .control-inner,
.at-full-screen[data-controlkey] [data-control="textarea"],
.at-full-screen[data-controlkey] .CodeMirror{
   height: 100%;
}
.at-full-screen[data-controlkey] [data-control=select] .options-wrapper{
   position: relative;
}

body.at-superpower-css [data-controlkey="_cssSuperPowerCSS"] span.highlight,
.brxc-class-manager__content-css span.highlight,
#brxc-sticky-css [data-controlkey="_cssStickyCSS"] span.highlight{
   background-color: var(--builder-color-success);
   padding: 4px 7px;
   border-radius: var(--builder-border-radius);
   font-size: 10px;
   font-weight: 600;
   color: #fff;
   margin-left: 10px;
}
.brxc-class-manager__content-css span.highlight{
   padding: 1px 7px;
   margin-left: 6px;
   margin-right: 4px;
}

/* Full Height CSS */ 
body[data-hide-inactive-panels="true"] #bricks-panel-element:has(.control-group.open[data-control-group="_css"] [data-control="code"] .CodeMirror),
body[data-hide-inactive-panels="true"] #bricks-panel-element:has(.control-group.open[data-control-group="_css"] [data-control="code"] .CodeMirror) .bricks-panel-controls,
body[data-hide-inactive-panels="true"] #bricks-panel-element:has(.control-group.open[data-control-group="_css"] [data-control="code"] .CodeMirror) .bricks-panel-controls .control-groups,
body[data-hide-inactive-panels="true"] #bricks-panel-element:has([data-control="code"] .CodeMirror) .bricks-panel-controls .control-groups .control-group.open[data-control-group="_css"],
body[data-hide-inactive-panels="true"].at-superpower-css #bricks-panel-element:has([data-control="code"] .CodeMirror) .bricks-panel-controls .control-groups .control-group.open[data-control-group="_css"] [data-controlkey="_cssSuperPowerCSS"],
body[data-hide-inactive-panels="true"] #bricks-panel-element:has([data-control="code"] .CodeMirror) .bricks-panel-controls .control-groups .control-group.open[data-control-group="_css"] [data-controlkey="_cssSuperPowerCSS"] .control.control-textarea,
body[data-hide-inactive-panels="true"] #bricks-panel-element:has([data-control="code"] .CodeMirror) .bricks-panel-controls .control-groups .control-group.open[data-control-group="_css"] [data-controlkey="_cssSuperPowerCSS"] .control.control-textarea .control-inner,
body[data-hide-inactive-panels="true"] #bricks-panel-element:has([data-control="code"] .CodeMirror) .bricks-panel-controls .control-groups .control-group.open[data-control-group="_css"] [data-controlkey="_cssSuperPowerCSS"] .control.control-textarea .control-inner [data-control="textarea"],
body[data-hide-inactive-panels="true"] #bricks-panel-element:has([data-control="code"] .CodeMirror) .bricks-panel-controls .control-groups .control-group.open[data-control-group="_css"] [data-controlkey="_cssSuperPowerCSS"] .control.control-textarea .control-inner [data-control="textarea"] .CodeMirror,
body[data-hide-inactive-panels="true"] #bricks-panel-element:has([data-control="code"] .CodeMirror) .bricks-panel-controls .control-groups .control-group.open[data-control-group="_css"] [data-controlkey="_cssCustom"],
body[data-hide-inactive-panels="true"] #bricks-panel-element:has([data-control="code"] .CodeMirror) .bricks-panel-controls .control-groups .control-group.open[data-control-group="_css"] [data-controlkey="_cssCustom"] .control.control-code,
body[data-hide-inactive-panels="true"] #bricks-panel-element:has([data-control="code"] .CodeMirror) .bricks-panel-controls .control-groups .control-group.open[data-control-group="_css"] [data-controlkey="_cssCustom"] .control.control-code .control-inner,
body[data-hide-inactive-panels="true"] #bricks-panel-element:has([data-control="code"] .CodeMirror) .bricks-panel-controls .control-groups .control-group.open[data-control-group="_css"] [data-controlkey="_cssCustom"] .control.control-code .control-inner [data-control="code"],
body[data-hide-inactive-panels="true"] #bricks-panel-element:has([data-control="code"] .CodeMirror) .bricks-panel-controls .control-groups .control-group.open[data-control-group="_css"] [data-controlkey="_cssCustom"] .control.control-code .control-inner [data-control="code"] .CodeMirror{
   display: flex;
   flex-direction: column;
   flex-wrap: unset;
   height: 100%;
}
body[data-hide-inactive-panels="true"] #bricks-panel-element:has([data-control="code"] .CodeMirror) .bricks-panel-controls .control-groups .control-group.open[data-control-group="_css"] [data-controlkey="_cssSuperPowerCSS"] .control.control-textarea .control-inner [data-control="textarea"] .CodeMirror-scroll{
   margin-bottom: 0px;
}

body[data-hide-inactive-panels="true"] #bricks-panel-element:has(.control-group.open[data-control-group="_css"] [data-control="code"] .CodeMirror) #bricks-panel-controls-search.active + .bricks-panel-controls{
   height: unset;
}
body[data-hide-inactive-panels="true"] #bricks-panel-element .bricks-panel-controls .control-groups.hidden-accordion-panels .control-group.open[data-control-group="_css"] [data-controlkey="_cssSuperPowerCSS"] .control.control-textarea .description,
body[data-hide-inactive-panels="true"] #bricks-panel-element .bricks-panel-controls .control-groups .control-group.open[data-control-group="_css"] [data-controlkey="_cssCustom"] .control.control-code .description {
   flex-grow: 0;
   flex-shrink: 99;
}

body[data-hide-inactive-panels="true"] #bricks-panel-element:has(.control-group.open[data-control-group="_css"]) #bricks-panel-controls-search+.bricks-panel-controls {
   margin-bottom: 0px;
}

 /*--------------------------------------
Hide inactive Panels
 --------------------------------------*/

body[data-hide-inactive-panels="true"] .control-groups:has(.control-group.open:is([data-control-group^="_"], [data-control-group^="x_"], [data-control-group^="brf_"], [data-control-group^="bricksforge"])) 
:is([data-control-group^="_"], [data-control-group^="x_"], [data-control-group^="brf_"], [data-control-group^="bricksforge"]).control-group:not(.open) {
    display: none;
}

/*--------------------------------------
Grid UI
--------------------------------------*/
.grid-icon-active[data-controlkey="_display"] .control-select .control-inline [data-control=select] {
   padding-right: 28px;
}
.brxc-gridui-icon{
   position: absolute;
    right: 0;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    width: 24px !important;
    border-radius: var(--builder-border-radius);
    background-color: var(--builder-bg-2);
    cursor: pointer;
    z-index: 1001;
}
.grid-icon-active:hover .brxc-gridui-icon{
   z-index: 9999;
}
.brxc-gridui-icon.active{
   color: var(--builder-color-accent);
   background-color: var(--builder-bg-accent);
}
.brxc-gridui-icon *{
   pointer-events: none;
}

.gruiUI__main-wrapper{
   display: grid;
   grid-template-columns: auto 300px;
   gap: 80px;
   height: 100%;
   overflow: hidden;
}
.gridUI__input-container{
   display: flex;
   flex-direction: column;
   gap: 16px;
   background-color: var(--builder-bg-2);
   padding: 20px;
   border-radius: var(--builder-border-radius);
   overflow: scroll;
}
.gridUI__input-inline-container{
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}
.gridUI__input-inline-container.add-cells a,
.gridUI__input-inline-container.bottom a{
   flex: 1;
   align-items: center;
   justify-content: center;
}
.gridUI__input-wrapper {
   flex: 1;
   position: relative;
}
.gridUI__input-wrapper #gapautocomplete-list{
   top: calc(100% + 3px);
}
.gridUI__input-wrapper #gapautocomplete-list ul{
   margin: 0;
   padding: 0;
}
.gridUI__input-wrapper.minmax,
.gridUI__input-wrapper.auto-flow,
.gridUI__input-wrapper.repeat,
.gridUI__input-wrapper.replace-css{
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.gridUI__input-wrapper i[class*="fa-toggle"]{
   font-size: 24px;
   cursor: pointer;
}
.gridUI__input-wrapper i.fa-toggle-on{
   color: var(--builder-color-accent);
}
.gridUI__input-wrapper i.fa-toggle-off{
   color: var(--bricks-color-secondary);
}
.gridUI__span-toggle{
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
}
.gridUI__span-toggle div{
   cursor: pointer;
}
.gridUI__span-toggle i{
   padding: 10px;
   font-size: 10px;
   border-radius: var(--builder-border-radius);
   background-color: var(--builder-bg-3);
   color: var(--builder-color);
   pointer-events: none;
}
.gridUI__span-toggle div.active i{
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
}
.gridUI__input-wrapper.error input {
   outline: 2px solid var(--bricks-text-danger);
}
.gridUI__title,
#brxcBoxShadowUIOverlay .brxc__title {
   color: var(--builder-color-description);
   font-weight: 800;
   text-transform: uppercase;
   font-size: 14px;
   margin-bottom: 4px;
   display: flex;
   align-items: center;
   gap: 16px;
   white-space: nowrap;
}
#brxcBoxShadowUIOverlay .brxc__title {
   margin-bottom: 0;
}
.gridUI__id-selector {
   color: var(--builder-color-accent);
   text-transform: lowercase;
   font-weight: 400;
   font-size: 12px;
   padding: 4px 8px;
   background-color: var(--builder-bg-accent);
   display: flex;
   align-items: center;
   gap: 8px;
   border-radius: var(--builder-border-radius);
   font-family: Consolas,monaco,Courier New,monospace;
   position: relative;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: auto;
}
.gridUI__id-selector .icon-wrapper{
   cursor: pointer;
}
.gridUI__id-selector i{
   color: red;
}
input.gridUI__grid-inputs {
   background-color: var(--builder-bg-3);
   border-radius: 0.25rem 0 0 0.25rem;
   box-shadow: none!important;
   cursor: inherit;
   height: var(--builder-structure-input-height);
   outline: none;
   border: none;
   color: var(--builder-color);
   overflow: hidden;
   position: relative;
   text-overflow: ellipsis;
   font-family: Inter, sans-serif;
   font-size: 14px;
}
.gridUI__input-container label,
#brxcBoxShadowUIOverlay .brxc__label{
   display: block;
   color: var(--builder-color);
   font-weight: 400;
   letter-spacing: .2px;
   line-height: 20px;
   margin: 0;
   margin-bottom: 4px;
   position: relative;
   font-size: 12px;
}
.gridUI__main-container{
   --height: 100%;
   --col: 1fr 1fr 1fr;
   --row: 1fr 1fr 1fr;
   --gap: 20px;
   display: grid;
   grid-template-columns: 60px auto 20px;
   grid-template-rows: 40px auto 20px;
   height: var(--height);
   padding: 62px 0 28px 0;
   max-height: var(--max-height);
   width: calc(100% - 40px);
}
.gridUI__main-container *{
   max-height: calc(var(--max-height) - 110px)
}
.gridUI__main-container.empty{
   filter: blur(5px);
}
.gridUI__grid-maxi-container{
   display: grid;
   place-items: center;
   height: 100%;
   overflow-y: scroll;
   position: relative;
}
#gridUI-header-wrapper{
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20px;
   padding-left: 80px;
}
#gridUI-header-wrapper [data-control="info"]{
   font: 12px Inter,sans-serif;
}

#gridUI-bp-wrapper {
   display: flex;
   gap: 2px;
}
.gridUI__grid-header{
   display: grid;
   gap: var(--globalGap);
   text-align: center;
   outline: 3px solid transparent;
   height: 100%;
   width: 100%;
   color: var(--builder-color);
   align-items: center;
   justify-content: center;
   gap: 8px;
}
.gridUI__grid-header.remove-col, .gridUI__grid-header.add-col {
   padding-bottom: 5px;
}
.gridUI__grid-header.remove-row, .gridUI__grid-header.add-row {
   padding-right: 5px;
}
.gridUI__grid-header i {
   background-color: var(--builder-bg-2);
   width: fit-content;
   padding: 6px;
   font-size: 10px;
   border-radius: 50%;
}
.gridUI__grid-header.top{
   grid-column: 2 / 3;
   grid-row: 1 / 2;
   grid-template-columns: var(--globalCol);
}
.gridUI__grid-header.top input{
   min-width: 60px;
}
.gridUI__grid-header.left{
   grid-column: 1 / 2;
   grid-row: 2 / 3;
   grid-template-rows: var(--globalRow);
   padding-right: 12px;
}
.gridUI__grid-header.left input{
   min-height: 60px;
}
.gridUI__grid-header.gridUI__add-col__wrapper{
   grid-row: 1 / 2;
   grid-column: 3 / 4;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   cursor: pointer;
}
.gridUI__grid-header.gridUI__add-row__wrapper{
   grid-column: 1 / 2;
   grid-row: 3 / 4;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   cursor: pointer;
}
.gridUI__grid-width{
   --margin: 15px;
   --color: var(--builder-bg-2);;
   background: var(--color);
   outline: 3px solid var(--color);
   height: 100%;
   width: 100%;
}
.gridUI__grid-width.handle-right{
   grid-column: 3 / 4;
   grid-row: 2 / 3;
   cursor: ew-resize;
   margin: 0 var(--margin);
}
.gridUI__grid-width.handle-bottom{
   grid-row: 3 / 4;
   grid-column: 2 / 3;
   cursor: ns-resize;
   margin: var(--margin) 0;
}
.gridUI__grid-header input{
   text-align: center;
   padding: 0!important;
   outline: 0px solid;
   border: none;
   background-color: transparent;
   color: var(--builder-color);
   position: relative;
   text-overflow: ellipsis;
   white-space: normal;
}
.gridUI__grid-header .input-wrapper:before, .gridUI__grid-header .input-wrapper:after{
   display: none !important
}
.gridUI__grid-header .input-wrapper.error input{
   color: red;
}
.gridUI__grid-header .input-wrapper.error:before, .gridUI__grid-header .input-wrapper.error:after{
   display: block !important;
   opacity: 1;
   pointer-events: auto;
}

.gridUI__grid-wrapper{
   --radius: 5px;
   grid-column: 2 / 3;
   grid-row: 2 / 3;
   position: relative;
   height: 100%;
}
.gridUI__grid-container,.gridUI__grid-container-guide{
   display: grid;
   grid-template-columns: var(--globalCol);
   grid-template-rows: var(--globalRow);
   grid-auto-flow: var(--globalAutoFlow);
   height: 100%;
   gap: max(6px, var(--globalGap));
}
.gridUI__grid-container-guide{
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
}
.gridUI__grid-guide{
   min-width: 60px;
   width: 100%;
   height: 100%;
   outline: 3px solid rgba(255,255,255,0.1);
   border-radius: var(--radius);
}

.gridUI__grid-element{
    --hue: 50;
    --opacity: 50%;
    position: relative;
    min-width: 60px;
    width: 100%;
    height: 100%;
    background-color: hsla(var(--hue), 50%, 70%, var(--opacity));
    z-index: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
    border-radius: var(--radius);
    transition: 200ms ease background-color;
}
.gridUI__grid-element:hover{
   --opacity: 80%;
   z-index: 2;
}
.gridUI__grid-element.active{
   --opacity: 100%;
   z-index: 3;
}
.gridUI__grid-element.inactive{
   opacity: .3;
}
.gridUI__grid-element.moving{
   background-color: transparent;
}

.gridUI__grid-handle-container{
   background: transparent;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   outline: 3px solid hsla(var(--hue), 50%, 60%, 100%);
   border-radius: var(--radius);
   overflow: hidden;
}
.gridUI__grid-handle-container.error{
   outline: 3px solid var(--bricks-text-danger);
}

.gridUI__grid-handle{
   width: 20px;
   height: 20px;
   position: absolute;
   cursor: pointer;
   z-index: 999;
   background-color: hsla(var(--hue), 50%, 60%, 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 11px;
   color: hsla(var(--hue), 50%, 25%, 100%);
}
.gridUI__grid-handle *{
   pointer-events: none;
}
.gridUI__grid-handle-container .action-top {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 1px;
}
.gridUI__grid-handle.dom {
   position: relative;
   border-bottom-left-radius: var(--radius);
   border-bottom-right-radius: var(--radius);
   font-weight: 700;
   font-size: 14px;
   width: auto;
   padding: 12px 8px;
   pointer-events: none;
   height: 24px;
   order:0
}
.gridUI__grid-handle.clear {
   position: relative;
   border-bottom-right-radius: var(--radius);
   font-weight: 700;
   font-size: 14px;
   width: auto;
   padding: 12px 8px;
   height: 24px;
   order:2;
}
.gridUI__grid-handle.delete{
   position: relative;
   border-bottom-right-radius: var(--radius);
   height: 24px;
   order:1;
}
.gridUI__grid-handle ~ .gridUI__grid-handle.delete,
.gridUI__grid-handle ~ .gridUI__grid-handle.dom{
   border-bottom-right-radius: 0px;
}
.gridUI__grid-handle.resize{
   opacity: 0;
}
.gridUI__grid-handle-container:hover .gridUI__grid-handle.resize{
   opacity: 1;
}
.gridUI__grid-handle.handle-down-right{
   bottom: 0;
   right: 0;
   cursor: nwse-resize;
   border-top-left-radius: var(--radius);
}
.gridUI__grid-handle.handle-down-right i{
   rotate: 135deg;
}
.gridUI__grid-handle.handle-down-left{
   bottom: 0;
   left: 0;
   cursor: nesw-resize;
   border-top-right-radius: var(--radius);
}
.gridUI__grid-handle.handle-down-left i{
   rotate: -135deg;
}
.gridUI__grid-handle.handle-up-left{
   top: 0;
   left: 0;
   cursor: nwse-resize;
   border-bottom-right-radius: var(--radius);
}
.gridUI__grid-handle.handle-up-left i{
   rotate: -45deg;
}
.gridUI__grid-handle.handle-up-right{
   top: 0;
   right: 0;
   cursor: nesw-resize;
   border-bottom-left-radius: var(--radius);
}
.gridUI__grid-handle.handle-up-right i{
   rotate: 45deg;
}
.gridUI__grid-guide.active{
   background-color: var(--builder-color-accent);
}

#gridUI__parent-settings, #gridUI__child-settings{
   display: flex;
   flex-direction: column;
   gap: 16px;
   margin-bottom: 24px;
}

 /*--------------------------------------
 Box Shadow Generator
 --------------------------------------*/
 .boxShadowdUI__main-container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px 20px;
   overflow: scroll;
   padding: 20px 32px;
}
.boxShadowdUI__main-container .brxc-box-item{
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0;
   background-color: #fafafa;
   aspect-ratio: 1;
   border-radius: var(--builder-border-radius);
   position: relative;
}
.boxShadowdUI__main-container .brxc-box {
   align-items: center;
   background-color: #fff;
   color: #000;
   display: flex;
   height: 180px;
   justify-content: center;
   width: 180px;
   max-height: 80%;
   max-width: 80%;
}

.brxc-box-btn-wrapper {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   background-color: var(--builder-bg-2);
   opacity: 0;
}

.brxc-box-item:hover .brxc-box-btn-wrapper {
   opacity: .8;
}

.brxc-box-item:hover .brxc-box-btn-wrapper a{
   color: #000;;
   background-color: #ffffff;
   padding: 5px 8px;
   border-radius: var(--builder-border-radius);
   font-weight: 800;
   text-transform: uppercase;
   font-size: 12px;
}

.brxc-box-item:hover .brxc-box-btn-wrapper a:hover{
   background-color: var(--builder-color-accent);
}


#boxShadowUI__container{
   width: 100%;
   height: 100%;
   display: grid;
   grid-template-columns: auto 470px;
   align-items: center;
   overflow: hidden;
   padding: 20px 32px;
    gap: 32px;
}
#boxShadowUI__main{
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   border-radius: 10px;
   background-color: #fafafa;
}
#boxShadowUI__box{
   width: 300px;
   height: 300px;
   border-radius: 10px;
   background-color: #ffffff;
}
#boxShadowUI__global{
   padding: 32px;
   overflow: scroll;
   background-color: var(--builder-bg-2);
   height: 100%;
   display: flex;
   flex-direction: column;
   gap: 40px;
   border-radius: 10px;
   overflow: scroll;
}
#boxShadowUI__global > div,
#boxShadowUI__child {
   display: flex;
   flex-direction: column;
   gap: 10px;
}
.brxc__field {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 4px;
}
.gridUI__input-container label, #brxcBoxShadowUIOverlay .brxc__label {
   margin-bottom: 2px;
}
#brxcBoxShadowUIOverlay input[type="number"], #brxcBoxShadowUIOverlay input[type="text"] {
   background-color: var(--builder-bg-3);
   border: none;
   border-radius: var(--builder-border-radius);
   box-shadow: none;
   color: var(--builder-color);
   display: block;
   font-family: inherit;
   font-size: 12px;
   height: var(--builder-input-height);
   line-height: var(--builder-input-height);
   outline: none;
   padding: 0 12px;
   transition: none;
   width: 100%;
   flex-basis: 64px !important;
   padding-right: 0px;
   padding-left: 8px;
}
#brxcBoxShadowUIOverlay input[type="text"]{
   flex-basis: unset !important;
}

#boxShadowUI__container .brxc__range {
   width: 250px;
   --RaisinBlack01: var(--builder-bg);
    --RaisinBlack02: var(--builder-bg);
    --BabyBlue: var(--builder-bg-3);
    --Cinnabar: var(--builder-gray-0);
    --circle: var(--builder-bg);
}
#boxShadowUI__container .brxc__range input[type="range"] {
   width: 100%;
}
.brxc-layer-btn-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
}

.brxc-layer-btn {
   display: flex;
   align-items: center;
   background-color: var(--builder-bg-3);
   color: var(--builder-color);
   padding: 4px 12px 4px 2px;
   border-radius: var(--builder-border-radius);
   list-style: none;
   margin-left: calc(var(--margin) * 20px);
   cursor: pointer;
   white-space: nowrap;
}
.brxc-layer-btn:hover {
   color: var(--builder-color-accent);
}
.brxc-layer-btn.active{
   color: var(--builder-color-accent);
   background-color: var(--builder-bg-accent);
}

.brxc-layer-btn .icon {
   display: flex;
   font-size: 14px;
   justify-content: center;
   line-height: var(--builder-structure-input-height);
   opacity: .5;
   width: 32px;
   min-width: 32px;
   pointer-events: none;
}

.brxc-layer-btn .icon * {
   pointer-events: none;
}

.brxc-layer-btn span {
   font-size: 14px;
   font-family: Inter, sans-serif;
   line-height: 1.8em;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.brxc__simple-color{
   display: flex;
   align-items: center;
   gap: 12px;
   width: 250px;
}
.brxc-input__simple-color{
   width: 32px;
   height: 32px;
   border-radius: 99vw;
   aspect-ratio: 1;
}

.brxc__toggle-icon{
   cursor: pointer;
}
.brxc__toggle-icon i{
   font-size: 26px;
   pointer-events: none;
}
.brxc__toggle-icon i.fa-toggle-on{
   color: var(--builder-color-accent);
}
.brxc__toggle-icon i.fa-toggle-off{
   color: var(--bricks-text-danger);
}

.bricks-panel-controls .control-inline>[type="box-shadow"] {
   display: flex;
   flex-direction: row-reverse;
}

.bricks-panel-controls .control-inline>[type="box-shadow"] > .bricks-control-preview {
   margin-left: unset;
}

.bricks-panel-controls .control-inline>[type="box-shadow"] > .brxc-box-shadow-generator.bricks-control-preview {
   margin-right: 4px;
   margin-left: auto;
}
.bricks-panel-controls .control-inline>[type="box-shadow"] > .brxc-box-shadow-generator.bricks-control-preview.active {
   background-color: var(--builder-bg-accent);
}
.bricks-panel-controls .control-inline>[type="box-shadow"] > .brxc-box-shadow-generator.bricks-control-preview.active i{
   color: var(--builder-color-accent);
}
.brxc__title-wrapper{
   display: flex;
   gap: 16px;
   align-items: center;
}
#boxShadowUI__container .trash-icon {
   --size: 20px;
   background-color: var(--builder-bg-3);
   aspect-ratio: 1;
   width: var(--size);
   height: var(--size);
   border-radius: 99vw;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 10px;
   color: var(--bricks-text-danger);
   cursor: pointer;
   padding: 10px;
}

 /*--------------------------------------
Save Template
 --------------------------------------*/
 #brxcSaveTemplateOverlay .brxc-overlay__pannel-1{
   overflow: hidden;
   height: calc(100% - 32px);
 }
 #brxcSaveTemplateCanvas{
   overflow: hidden
 }
#brxcSaveTemplateCanvas canvas{
   max-width: 100%;
    object-fit: contain;
    height: auto !important;
}
#brxcExistingTemplate{
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   overflow: hidden;
   height: 100%;
}
#brxcExistingTemplate > div{
   position: sticky;
   top: 0;
   overflow: scroll;
}
#brxcExistingTemplate .col-left{
   display: flex;
   flex-direction: column;
   gap: 2rem;
}
#brxcExistingTemplate .brxc__text{
   position: relative
}
#brxcExistingTemplate .autocomplete-items{
   top: 40px;
}
#brxcExistingTemplate .autocomplete-items ul{
   padding: 0;
   margin: 0;
}


#brxcExistingTemplate .col-right{
   background-color: var(--builder-bg-2);
   padding: 20px;
   border-radius: var(--builder-border-radius);
}
#brxcExistingTemplate input{
   margin: 0
}
#brxcSaveTemplateImageTemp{
   width: 100%;
   height: 250px;
   color: var(--builder-color);
   border: 3px;
   border-style: dashed;
   border-color: var(--builder-bg-3);
   display: flex;
   align-items: center;
   justify-content: center;
}
#brxcExistingTemplate .col-right ul{
   padding: 0;
}

#brxcExistingTemplate .col-right ul li{
   display: flex;
   align-items: center;
   background-color: var(--builder-bg-3);
   color: var(--builder-color);
   padding: 4px 6px 4px 2px;
   border-radius: var(--builder-border-radius);
   margin: 0 0 5px;
   list-style: none;
   margin-left: calc(var(--margin) * 20px);
   white-space: nowrap;
 }
 #brxcExistingTemplate .col-right ul li .icon{
   display: flex;
   font-size: 14px;
   justify-content: center;
   line-height: var(--builder-structure-input-height);
   opacity: .5;
   width: 32px;
   min-width: 32px;
   word-break: keep-all;
 }

 #brxcExistingTemplate .col-right ul li span{
   font-size: 14px;
   font-family: Inter, sans-serif;
   line-height: 1.8em;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

 /*--------------------------------------
Text Basic Advanced Options
 --------------------------------------*/

 #bricks-panel-element [data-controlkey="text"] .control.control-textarea .control-inner{
   gap: 0px;
}

#brxc-text-basic-options{
   padding: 10px;
   background-color: var(--builder-bg-3);
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 4px;
   border-top-left-radius: var(--builder-border-radius);
   border-top-right-radius: var(--builder-border-radius);
}
#brxc-text-basic-options + [data-control="textarea"] textarea{
   border-top-left-radius: 0px !important;
   border-top-right-radius: 0px !important;
}
#brxc-text-basic-options input {
   background-color: var(--builder-bg-2);
   color: #fff;
   opacity: 1;
   flex: 99;
   min-width: 70px;
   color: var(--builder-color);
}

.brxc-field-wrapper{
   display: flex;
   gap: 2px;
   flex: 1;
   position: relative;
}
#brxc-text-basic-options a, 
#brxc-text-basic-options > div:not(#brxc-text-basic-options-extra),
#brxc-text-basic-options .icon-wrapper {
   display: grid;
   place-content: center;
   background-color: var(--builder-bg-2);
   padding: 0px 8px;
   border-radius: var(--builder-border-radius);
   min-height: 32px;
   cursor: pointer;
   word-break: keep-all !important;
}
#brxc-text-basic-options a{
   flex: 1;
}
#brxc-text-basic-options a:hover, #brxc-text-basic-options > div:not(#brxc-text-basic-options-extra).active {
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent)
}
#brxc-text-basic-options-extra{
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
   width: 100%;
}
#brxc-text-basic-options-extra input {
   min-width: 100px;
}

 /*--------------------------------------
 Notes
 --------------------------------------*/
.brxc-notes{
   position: absolute;
   z-index: 9999;
   border-radius: var(--builder-border-radius);
   background-color: var(--builder-color-accent-inverse);
   color:var(--builder-color);
   padding: 4px 8px;
   width: 220px;
   font-size: 12px;
} 

#bricks-structure .structure-item .actions {
   opacity: 1;
}
#bricks-structure .structure-item .actions .action.notes,
#bricks-structure .structure-item .actions .action.link {
   opacity: .5;
}
#bricks-structure .structure-item .actions .action.notes i,
#bricks-structure .structure-item .actions .action.link i{
   font-size: 14px;
   transform: translateY(1.5px);
}
#bricks-structure .structure-item .actions .action.notes:hover,
#bricks-structure .structure-item .actions .action.link:hover {
   opacity: 1;
}
 /*--------------------------------------
 Light Theme
 --------------------------------------*/
 

 body[data-builder-mode="light"] .brxc-toggle-lorem .lorem-wrapper .lorem-line {
    background-color: var(--builder-gray-4);
 }
 
 body[data-builder-mode="light"] .brxc-toggle-lorem:hover .lorem-wrapper .lorem-line {
    background-color: var(--builder-color-accent);
 }
 
 body[data-builder-mode="light"] .brx-body.main~.brxc-overlay__wrapper:not(.sidebar) {
    background: #ffffffe8;
 }
 
 body[data-builder-mode="light"] .brxc-overlay__wrapper:not(.sidebar) .brxc-overlay__inner,
 body[data-builder-mode="light"] .brxc-overlay__wrapper:not(.sidebar) .brxc-overlay__inner2 {
    box-shadow: 0 0 40px var(--builder-bg-3);
 }
 
 body[data-builder-mode="light"] .brxc-overlay__wrapper .brxc-overlay__header {
    background: var(--builder-bg-2);
 }
 
 body[data-builder-mode="light"] .brxc-overlay__inner .brxc-overlay__header-title,
 body[data-builder-mode="light"] .brxc-overlay__inner2 .brxc-overlay__header-title {
    color: var(--builder-gray-2);
 }
 
 body[data-builder-mode="light"] .brxc-overlay__wrapper .brxc-overlay__container {
    background: var(--builder-bg);
 }
 
 body[data-builder-mode="light"] .brxc-overlay__wrapper .brxc-overlay__close-btn {
    background: var(--builder-color-accent);
 }
 
 body[data-builder-mode="light"] .brxc-overlay__wrapper .brxc-overlay__close-btn i {
    color: var(--builder-gray-f);
 }
 

 body[data-builder-mode="light"] .brxc-accordion-panel .brxc__text input{
    background-color: var(--builder-gray-e);
    color: var(--builder-gray-1);
 }
 body[data-builder-mode="light"] .brxc-accordion-panel .brxc__text input::placeholder{
    opacity: var(--builder-placeholder-opacity);
    color: var(--builder-color);
 }

 body[data-builder-mode="light"] #brxcPlainClassesOverlay .cm-s-default {
    background-color: var(--builder-bg-2);
 }
 
 body[data-builder-mode="light"] #brxcPlainClassesOverlay .cm-s-default .cm-tag {
    color: var(--builder-gray-1) !important;
 }
 body[data-builder-mode="light"] .brxc__text input[type="text"]::placeholder,
 body[data-builder-mode="light"] .brxc-overlay__wrapper .brxc-overlay__search-box input[type="text"]::placeholder,
 body[data-builder-mode="light"] .brxc-overlay__wrapper textarea::placeholder {
   opacity: var(--builder-placeholder-opacity);
   color: var(--builder-color);
 }
 
 body[data-builder-mode="light"] .brxc-overlay__wrapper .brxc-overlay-variables__title {
    color: var(--builder-color-knob);
 }
 
 body[data-builder-mode="light"] .brxc-overlay__wrapper .brxc-gallery__title {
    background: var(--builder-gray-d);
    color: var(--builder-gray-5);
 }
 
 body[data-builder-mode="light"] .brxc-overlay__wrapper .brxc-overlay-css__title {
    color: var(--builder-gray-5);
 }
 
 body[data-builder-mode="light"] .brxc-overlay__wrapper .brxc-overlay-css__desc {
    color: var(--builder-color-knob);
 }
 
 body[data-builder-mode="light"] .brxc-overlay__wrapper .brxc-overlay-variables__btn,
 body[data-builder-mode="light"] .brxc-overlay__wrapper .brxcCSSLabel {
    border: 1px solid var(--builder-gray-2);
    color: var(--builder-gray-2);
 }
 
 body[data-builder-mode="light"] .brxc-overlay__wrapper .brxc-overlay-variables__btn:hover,
 body[data-builder-mode="light"] .brxc-overlay__wrapper .brxc-overlay-variables__btn.active,
 body[data-builder-mode="light"] .brxc-overlay__wrapper .brxcCSSLabel:hover,
 body[data-builder-mode="light"] .brxc-overlay__wrapper .brxcCSSLabel.active,
 body[data-builder-mode="light"] .brxc-overlay__wrapper .brxcCSSLabel.disable {
    background: var(--builder-color-accent);
    color: var(--builder-gray-f);
    border-color: var(--builder-color-accent);
 }
 
 body[data-builder-mode="light"] .brxc-overlay__wrapper .brxcCSSLabel.disable {
    background: transparent;
 }
 
 [class*=brxe-].builder-active-element.has-border-settings {
    outline: 0px !important;
 }

 body[data-builder-mode="light"] .brxc-overlay__panel-switcher-wrapper label,
 body[data-builder-mode="light"] .brxc-overlay__panel-inline-btns-wrapper label,
 body[data-builder-mode="light"] .brxc-overlay__action-btn {
    border-color: var(--builder-gray-c);
    color: var(--builder-gray-6);
 }
 body[data-builder-mode="light"] .brxc-overlay__action-btn.danger {
   border-color: var(--bricks-text-danger);
   color: var(--bricks-text-danger);
}
 body[data-builder-mode="light"] .brxc-overlay__panel-switcher-wrapper label:hover, 
 body[data-builder-mode="light"] .brxc-overlay__panel-inline-btns-wrapper label:hover, 
 body[data-builder-mode="light"] .brxc-overlay__action-btn:hover {
    border-color: var(--builder-gray-a);
    color: var(--builder-gray-3);
}

body[data-builder-mode="light"] .brxc__text input#global-openaiSystem,
body[data-builder-mode="light"] .brxc__text input#openaiSystem {
    color: var(--builder-gray-0);
    background-color: #fff;
}
body[data-builder-mode="light"] .brxc__text input#global-openaiSystem::placeholder,
body[data-builder-mode="light"] .brxc__text input#openaiSystem::placeholder {
   opacity: var(--builder-placeholder-opacity);
   color: var(--builder-color);
}

body[data-builder-mode="light"] .brxc-overlay__panel-inline-btns-wrapper input:checked+label,
body[data-builder-mode="light"] .brxc-overlay__panel-switcher-wrapper input:checked+label,
body[data-builder-mode="light"] .brxc-overlay__action-btn.active,
body[data-builder-mode="light"] .brxc-overlay__action-btn.outline.primary {
    color: var(--builder-gray-3);
    border-color: var(--builder-color-accent);
}

body[data-builder-mode="light"] .brxc-overlay__action-btn.primary {
    color: var(--builder-gray-f);
    border-color: var(--builder-color-accent);
}

body[data-builder-mode="light"] .brxc-overlay__action-btn.disable {
    background-color: var(--builder-gray-c) !important;
    border-color: var(--builder-gray-c) !important;
}

body[data-builder-mode="light"] .brxc-prompt-option label i {
    color: var(--builder-gray-b);
}
body[data-builder-mode="light"] .brxc-overlay__pannel label i{
    color: var(--builder-gray-c);
}

body[data-builder-mode="light"] .brxc-overlay__pannel label .brxc-history__header-wrapper--left i{
    color: var(--builder-gray-6);
    background-color: var(--builder-gray-b);
}
body[data-builder-mode="light"] .brxc-prompt-option label i:hover {
    color: var(--builder-gray-6);
}

body[data-builder-mode="light"] .brxc__range {
    --RaisinBlack01: var(--builder-gray-6);
    --RaisinBlack02: var(--builder-gray-d);
    --BabyBlue: var(--builder-gray-d);
    --Cinnabar: var(--builder-gray-f);
    --circle: var(--builder-gray-a);
 }

 body[data-builder-mode="light"] .brxc__no-record {
    color: var(--builder-gray-3);
}

body[data-builder-mode="light"] .brxc__text input::placeholder {
   opacity: var(--builder-placeholder-opacity);
   color: var(--builder-color);
 }

body[data-builder-mode="light"] .message.assistant, body[data-builder-mode="light"] img.brxc__image {
    background-color: var(--builder-gray-f);
    color: var(--builder-gray-0);
}
body[data-builder-mode="light"] .brxc-overlay__pannel-top--sticky {
    background-color: var(--builder-gray-e);
}

body.at-has-panel-shortcuts[data-builder-mode="light"] #bricks-panel-element > .brxce-panel-shortcut__wrapper,
body[data-builder-mode="light"].at-has-shortcuts-sidebar #bricks-structure .brxce-panel-shortcut__wrapper {
    background-color: var(--builder-bg-2);
}
body.at-has-panel-shortcuts[data-builder-mode="light"] #bricks-panel-element > .brxce-panel-shortcut__wrapper li.active,
body.at-has-panel-shortcuts[data-builder-mode="light"] #bricks-panel-element > .brxce-panel-shortcut__wrapper li:hover,
body[data-builder-mode="light"].at-has-shortcuts-sidebar #bricks-structure .brxce-panel-shortcut__wrapper li:hover {
    background-color: var(--builder-bg);
}

body[data-builder-mode="light"] .brxc-overlay__resize-icons {
   color: var(--builder-gray-5);
}
body[data-builder-mode="light"] .brxc-overlay__resize-icons i {
   border: 2px solid var(--builder-gray-b);
}
body[data-builder-mode="light"] .brxc-overlay__resize-icons i:hover {
   border: 2px solid var(--builder-gray-9);
   color: var(--builder-gray-2);
}
body[data-builder-mode="light"] .brxc-overlay__resize-icons i.active {
   color: var(--builder-gray-f);
}

body[data-builder-mode="light"]#brxcVariableOverlay .brxc-overlay__action-btn.active, 
body[data-builder-mode="light"] #brxcCSSOverlay .isotope-wrapper .brxc-overlay__action-btn:hover {
   color: var(--builder-gray-3);
}

body[data-builder-mode="light"] .isotope-wrapper .brxc-input__label {
   color: var(--builder-gray-3);
}

body[data-builder-mode="light"] .brxc-tag-btn-wrapper button.brxc-tag-btn {

   background-color: var(--builder-gray-d);
   color: var(--builder-gray-6);
}
body[data-builder-mode="light"] button.brxc-tag-btn.red, button.brxc-tag-btn.orange {
   color: var(--builder-gray-9);
}

body[data-builder-mode="light"] .structure-item:hover > .title .brxc-tag-btn-wrapper button.brxc-tag-btn {
   background-color: var(--builder-gray-c);
}
body[data-builder-mode="light"] .element.active > .structure-item > .title .brxc-tag-btn-wrapper button.brxc-tag-btn {
   background-color: var(--builder-bg-accent);
   color: var(--builder-color-accent);
}
body[data-builder-mode="light"] .bricks-panel-controls .control-group-title .brxc-group-icon {
   background-color: var(--builder-gray-f);
}
body[data-builder-mode="light"] .bricks-panel-controls .control-group-title .brxc-group-icon:hover, 
body[data-builder-mode="light"] .bricks-panel-controls .control-group-title .brxc-group-icon.active{
   background-color: var(--builder-bg-accent);
}

 body[data-builder-mode="light"] .brxc-style-overview__class-btn{
   color: var(--builder-color);
}

body[data-builder-mode="light"] #brxcStyleOverviewOverlay table tr {
   background: var(--builder-gray-e);
}
body[data-builder-mode="light"] #brxcStyleOverviewOverlay table tr.even {
   background: var(--builder-gray-f);
}
body[data-builder-mode="light"] #brxcStyleOverviewOverlay table thead .brxc-group-icon .bricks-svg-wrapper {
   background-color: var(--builder-gray-e) !important;
}
body[data-builder-mode="light"] #brxcStyleOverviewOverlay table thead tr,
body[data-builder-mode="light"] #brxcStyleOverviewOverlay table thead, 
body[data-builder-mode="light"] #brxcStyleOverviewOverlay table thead th {
   background-color: var(--builder-bg-3);
}
body[data-builder-mode="light"] #brxcStyleOverviewOverlay table thead .brxc-group-icon.active .bricks-svg-wrapper {
   background-color: var(--builder-bg-accent) !important;
}
 body[data-builder-mode="light"] .brxc-style-overview__id-tag {
   background-color: #c2c2ff;
 }

.brxc-overlay__action-btn .buttons:hover .action {
   color: var(--builder-color-accent-inverse);
}
body[data-builder-mode="light"] #brxcClassManagerOverlay .brxc-overlay__search-box .iso-reset.locked i, 
 body[data-builder-mode="light"] #brxcClassManagerOverlay .brxc-overlay__search-box .iso-reset.unlocked i{
   color: var(--builder-gray-f);
 }
 body[data-builder-mode="light"] #brxcClassManagerOverlay .brxc-overlay__search-box .iso-reset.active i{
   color: var(--builder-gray-2);
}

body[data-builder-mode="light"] #brxcClassListCanvas > ul > li:hover {
   background-color: var(--builder-bg-2);
}
body[data-builder-mode="light"] #brxcClassListCanvas > ul > li.selected {
   background-color: var(--builder-bg-accent);
}

body[data-builder-mode="light"] #brxcClassListCanvas > ul > li .unlock-icon,
body[data-builder-mode="light"] #brxcClassListCanvas > ul > li .css3-icon,
body[data-builder-mode="light"] #brxcClassListCanvas > ul > li:hover .unlock-icon,
body[data-builder-mode="light"] #brxcClassListCanvas > ul > li.selected .unlock-icon{
   color: var(--builder-gray-a);
}

body[data-builder-mode="light"] .brxc-class-manager__footer input{
   background-color: var(--builder-bg-2);
}

body[data-builder-mode="light"] #brxcClassContentCanvas .brxc-class-manager__content-header input{
   border-bottom: 1px solid var(--builder-gray-d);
}
body[data-builder-mode="light"] #brxcClassContentCanvas .brxc-class-manager__content-order input{
   border-bottom: 1px solid var(--builder-gray-d);
}
body[data-builder-mode="light"] #brxcClassContentCanvas .brxc-class-manager__content-header span.units {
   color: var(--builder-gray-a);
}

body[data-builder-mode="light"] #brxcClassManagerOverlay .brxc-group-icon.has-styles {
   color: var(--builder-color);
}

body[data-builder-mode="light"] .gridUI__grid-guide {
   outline-color: rgba(0,0,0,0.1);
}
body[data-builder-mode="light"] .gridUI__grid-handle {
   color: hsla(var(--hue), 50%, 95%, 100%);
}

/*--------------------------------------
RTL
--------------------------------------*/

body.rtl .bricks-panel-controls .control-inline > [data-control="number"]{
   position: relative;
}

body.rtl.at-disable-styles .disabled-style-icon {
   left: calc(25% + 40px);
}

body.rtl #brxcResizeBox {
   right: -12px;
}
body.rtl #bricks-structure {
   padding-right: 12px;
   padding-left: 0;
}
body.rtl #bricks-structure .structure-item .title {
   padding: 0 3px 0px 0px;
}
body.rtl #bricks-structure .structure-item .title>.icon {
   margin-left: 3px;

}
body.rtl .brxc-copy-id-to-class-wrapper span.bricks-svg-wrapper.create, 
body.rtl .brxc-clone-class-wrapper span.bricks-svg-wrapper.create {
   left: 8px;
}

body.rtl [data-balloon-pos=left]:after {
   right: -7px;
   left: unset;
}
body.rtl [data-balloon-pos=left]:after,
body.rtl [data-balloon-pos=left]:before {
   top: 50%;
   transform: translate(100%,-50%);
}
body.rtl [data-balloon-pos=left]:before {
   right: 0;
}
body.rtl .brxc-tag-btn-wrapper button.brxc-tag-btn {
   margin-left: 10px;
   margin-right: 0;
}

body.rtl [data-controlkey][data-has-class-style="true"]:before {
   right: 8px;
}

body.rtl span.bricks-svg-wrapper.arrow {
   margin-right: auto;
   margin-left: 0;
}
body.rtl .brxce-panel-shortcut__container li.has-settings:before {
   right: 3px;
}