/* ================= LOADER ================== */

.brand-loader-inner {
    background: #eee;
}

.brand-loader {
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-top-color: #00b6e8;
}

/* ================= GENERAL STYLES ================== */

* {
    scrollbar-color: #aaa #fff;
}

*::-webkit-scrollbar-track {
    background: #eee;
}

*::-webkit-scrollbar-thumb {
    background-color: #999;
    border: 4px solid #eee;
}

body {
  /*  background: #eee;
    color: #494949;*/
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #111;
}

.text-danger {
    color: #00b6e8 !important;
}

.text-success {
    color: #009688 !important;
}

#brand-icon-panel hr {
    border-bottom: 1px dashed #bcbcbc;
}

.notice {
    color: #494949;
    background: rgba(0, 0, 0, 0.1);
    border-left: 4px solid #00b6e8;
}

.notice.notice-danger {
    border-left: 4px solid #00b6e8;
}

.notice.notice-warning {
    border-left: 4px solid #FFC107;
}

.notice.notice-success {
    border-left: 4px solid #009688;
}

.brand-img-loader {
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: #00b6e8;
}

#brand-overlay-preview {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='%23FFFFFF'/%3E%3C/svg%3E") left top/contain #ccc;
    background-size: 15px 15px;
}

/* ================= PAGE STRUCTURE ================== */

#brand-toggle-left,
#brand-toggle-right {
    background-color: #fff;
    border: 1px solid #bcbcbc;
}

#brand-toggle-right.closed,
#brand-toggle-left.closed {
    background-color: #fff;
}

#brand-toggle-left .material-icons,
#brand-toggle-right .material-icons {
    color: #111;
}

#brand-toggle-left:hover .material-icons,
#brand-toggle-right:hover .material-icons {
    color: #00b6e8;
}

/* ================= TOP BAR ================== */

#brand-top-bar {
    background: #eee;
    border-bottom: 1px solid #bcbcbc;
}

.brand-top-bar-menu .brand-btn-simple {
    color:#111;
}

.brand-top-bar-menu .brand-btn-simple:disabled {
    color:#494949
}

/* ================= DROPDOWN ================== */

ul.brand-dropdown {
     background: rgba(255, 255, 255, 0.7); /* semi-transparent white */
    backdrop-filter: blur(12px);           /* optional: frosted glass effect */
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    padding: 6px;
    max-width: 380px;
    max-height: 60vh;
    overflow: auto;
}

ul.brand-dropdown li {
    
}

ul.brand-dropdown li a {
    color: #494949;
    transition: color var(--motion-duration-base) var(--motion-ease-out), transform var(--motion-duration-base) var(--motion-ease-out);
}

ul.brand-dropdown li a:hover {
    color: #111;
    transform: translateX(2px);
}

ul.brand-dropdown li a .material-icons {
    color: #00b6e8;
}

/* ================= CONTENT BAR ================== */

.brand-content-bar {
    background: #fff;
    border: 1px solid #bcbcbc;
}

.brand-content-bar .brand-img-size {
    border-right: 1px solid #bcbcbc;
}

.brand-content-bar .brand-counter .brand-btn,
.brand-content-bar .brand-counter .brand-btn:hover,
.brand-content-bar .brand-counter .brand-btn:focus {
    background: #fff;
    color: #494949;
}

.brand-content-bar .brand-counter .brand-btn:hover {
    color: #111;
}

.brand-counter .brand-btn:disabled {
    color: rgba(0, 0, 0, 0.3);
}

.brand-content-bar .brand-counter:after {
    background: #eee;
}

/*#brand-img-drag {
    border-right: 1px solid #bcbcbc;
    background: #fff;
    color: #494949;
}

#brand-img-drag:hover,
#brand-img-drag.active {
    background: #eee;
    color: #111;

}*/

/* ================= PAGES ================== */

#brand-pages {
   /* background: #EEEEEE;*/

}

#brand-pages>div.active>.brand-open-page {
    background: #e9e9ed;
    color: #111;


}

#brand-pages>div>.brand-open-page:hover {
    color:#111;
}

#brand-pages>div>.material-icons {
    color:#00b6e8 !important;
}

/* ================= ICON MENU ================== */

#brand-icon-menu {
    background: #eee;
}

#brand-icon-menu.closed {
    border-right: 1px solid #bcbcbc;
}

button.brand-icon-menu-btn {
    color: #494949;
    background: #eee;
    transition: transform var(--motion-duration-base) var(--motion-ease-out), background-color var(--motion-duration-base) var(--motion-ease-out), color var(--motion-duration-base) var(--motion-ease-out), box-shadow var(--motion-duration-base) var(--motion-ease-out);
}

button.brand-icon-menu-btn.active,
button.brand-icon-menu-btn:hover {
    color: #000;
    background: #fff;
    transform: scale(1.02);
}
button.brand-icon-menu-btn:active { transform: scale(0.98); }

#brand-icon-panel {
    /*  border-right: 1px solid #bcbcbc;
      background: #fff;*/
}

/* ================= CONTENT ================== */

#brand-content {
    /* background-color: #fff; */
}

#brand-canvas-wrap {
    /* background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='%23FFFFFF'/%3E%3C/svg%3E") left top/contain #ccc;
    background-size: 15px 15px; */
}

#brand-canvas-loader {
    background: #fff;
}

/* ================= LAYERS ================== */
#brand-right-col {
  /*  border-left: 1px solid #bcbcbc;*/
    background: #fff;
}

.brand-layers-title {
    /*background: #eee;*/
    font-size: 14px;
}

#brand-layers li {
    color: #494949;
    /* border-bottom: 1px solid #bcbcbc; */
    background: #fff;
}

#brand-layers li:first-child {
    /* border-top: 1px solid #bcbcbc; */
}

#brand-layers li:hover {
    color: #111;
}

#brand-layers li.active {
    color: #111;
    background: #21a1f7;
}

#brand-layers li .layer-icons {
    /* background: #eee; */
}

#brand-layers li .layer-name {
    color:#494949;
}


#brand-layers li .layer-icons .material-icons {
    color: #111;
}

#brand-layers>li>.material-icons {
    color: #6658ea;
}

#brand-layers>li>.material-icons.layer-settings {

    color: #494949;
}

#brand-layers>li>.material-icons.layer-settings:hover,
#brand-layers>li>.material-icons.layer-settings.active {
    color: #111;
}

#brand-layers li .layer-icons .layer-visible,
#brand-layers li .layer-icons .layer-unlocked {
    color: #009688;
}

#brand-layers li .layer-icons .layer-hidden,
#brand-layers li .layer-icons .layer-locked {
    color: #FFC107;
}

#brand-no-layer a {
    color: #6658ea;
}

#brand-layer-delete-wrap {
    border-top: 1px dashed #bcbcbc;
}
/* ================= LAYERS ================== */

 
/* ================= GRID ================== */

.brand-frames-grid .grid-item,
.brand-grid .grid-item {
    background: #eee;
}

.brand-frame {
    border: 1px solid #eee;
    background: #eee;
}

.brand-element {
    border: 1px solid #eee;
    background: #eee;
}

.brand-element.light {
    background: #eee;
}

.brand-element.dark {
    background: #303030;
}

.brand-frame:hover,
.brand-element:hover {
    border: 1px solid #00b6e8;
}

.brand-element.dark:hover {
    border-color: #1B1642;
}

.template-favorite,
.brand-frame .frame-favorite,
.brand-element .element-favorite {
    background: #00b6e8;
}

.brand-element.dark .element-favorite {
    background: #1B1642;
}


.brand-frames-grid .brand-frame {
    border: 3px solid #eee;
}

.brand-frames-grid .brand-frame:hover {
    border: 3px solid #111;
}

.grid-icon-item .material-icons {
    color: #00b6e8;
}

/* ================= ELEMENTS ================== */

#brand-filters.brand-grid img:hover,
#brand-filter-library.brand-grid img:hover,
#brand-filter-library.brand-grid canvas:hover {
    border: 3px solid #00b6e8;
}

#brand-filters.brand-grid div label span {
    background: #eee;
    color: #494949;
}

#brand-filters.brand-grid input[type=checkbox]:checked+label img,
#brand-filters.brand-grid input[type=radio]:checked+label img {
    border: 3px solid #00b6e8
}

#brand-filters.brand-grid div:hover span,
#brand-filters.brand-grid input[type=checkbox]:checked+label>span,
#brand-filters.brand-grid input[type=radio]:checked+label>span {
    color: #fff;
    background: #00b6e8
}

#brand-filter-library .grid-item.none .material-icons {
    color:#121212;
}

.brand-element>.material-icons {
    color: #494949;
}

#brand-shapes-grid .brand-shape {
   /* background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='%23FFFFFF'/%3E%3C/svg%3E") left top/contain #ccc;*/
    background-size: 10px 10px;
}

#brand-shapes-grid .brand-shape:hover {
    background: #00b6e8;
}

#brand-shapes-grid .brand-shape svg * {
    fill: #494949 !important;
}

#brand-shapes-grid .brand-shape:hover svg * {
    fill: #fff !important;
}

/* ================= APPS ================== */

.brand-apps-menu-item {
    background: #eee;
}

.brand-apps-menu-item:hover {
    background: #111;
}

.brand-apps-menu-item-desc {
    background: #eee;
    color: #111;
}

.brand-apps-menu-item:hover .brand-apps-menu-item-desc {
    background: #111;
    color: #fff;
}

.brand-app-peview {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='%23FFFFFF'/%3E%3C/svg%3E") left top/contain #ccc;
    background-size: 10px 10px;
}

.brand-colorbrewer-item {
    border: 1px solid #bcbcbc;
}

.brand-colorbrewer-item.active,
.brand-colorbrewer-item:hover {
    border: 1px solid #111;
}
/* ================= tools ================== */

.brand-tools-menu-item {
    background: #eee;
}

.brand-tools-menu-item:hover {
    background: #111;
}

.brand-tools-menu-item-desc {
    background: #eee;
    color: #111;
}

.brand-tools-menu-item:hover .brand-tools-menu-item-desc {
    background: #111;
    color: #fff;
}

/* ================= BUTTONS ================== */

.brand-btn-simple {
    color: #494949;
}

.brand-btn-simple:hover,
.brand-btn-simple.active {
    color: #111;
}

.brand-btn-simple:disabled {
    color: #494949;
}

.brand-btn-simple.star {
    color: #FF9800 !important;
}





.brand-btn {
    background: #eee;
    color: #111;
    transition: transform var(--motion-duration-base) var(--motion-ease-out), background-color var(--motion-duration-base) var(--motion-ease-out), color var(--motion-duration-base) var(--motion-ease-out), box-shadow var(--motion-duration-base) var(--motion-ease-out);



}



.brand-btn:hover,
.brand-btn.primary:hover {
    background: #00b6e8;
    color:#fff;
    transform: translateY(-0.5px) scale(1.02);
    box-shadow: 0 6px 16px rgba(15,23,42,0.12);
}

.brand-btn.active,
.brand-btn.active:hover,
.brand-btn.primary {
    background-image: linear-gradient(to right, #24C6DC 0%, #514A9D  51%, #24C6DC  100%);

    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
}

.brand-btn.danger {
    background: #00b6e8;
    color:#fff;
}

.brand-btn.danger:hover {
    background: #D32F2F;
    color:#fff;
}

.brand-horizontal-center.active,
.brand-vertical-center.active {
    background: #eee !important;
}

/* ================= BLOCKS ================== */

.icon-group {
    border: 1px solid #bcbcbc;
    background: #bcbcbc
}

.icon-group .brand-btn {
    border-right: 1px solid #bcbcbc;
}

.icon-group .brand-btn:hover,
.icon-group .brand-btn.active {
    background: #fff;
    color:#111
}

/* ================= TOOLTIP ================== */

.tooltip:after {
    background-color: #111;
    color: #fff;
}

.tooltip:before {
    border-color: #111 transparent;
}

/* ================= PAGINATION ================== */

.brand-pagination ul li {
    border: 1px solid #bcbcbc;
    color: #494949;
    transition: background-color var(--motion-duration-base) var(--motion-ease-out), border-color var(--motion-duration-base) var(--motion-ease-out), color var(--motion-duration-base) var(--motion-ease-out), transform var(--motion-duration-base) var(--motion-ease-out);
}

.brand-pagination ul li.active,
.brand-pagination ul li.active:hover {
    background: #00b6e8;
    border-color: #00b6e8;
    color: #fff;
}

.brand-pagination ul li:hover {
    border-color: #00b6e8;
    transform: translateY(-1px);
}

.brand-pagination ul li a {
    color: #111;
}

.brand-accordion .brand-pagination ul li {
    color: #494949;
    background: #eee;
}

.brand-accordion .brand-pagination ul li.active,
.brand-accordion .brand-pagination ul li.active:hover {
    color: #fff;
    background: #00b6e8;
}

.brand-accordion .brand-pagination ul li a,
.brand-accordion .brand-pagination ul li>span {
    color: #494949;
}

.brand-accordion .brand-pagination ul li a:hover {
    color: #111
}

.brand-accordion .brand-pagination ul li.active>span {
    color: #fff
}

/* ================= ACCORDION ================== */

ul.brand-accordion>li {
    border: 1px solid #bcbcbc;
}

ul.brand-accordion>li.opened {
    border-color: #00b6e8;
}

ul.brand-accordion>li>a {
    color: #494949;
}

ul.brand-accordion>li>a:hover,
ul.brand-accordion>li.opened>a {
    color: #111;
}

ul.brand-accordion>li.opened>a {
    /* border-bottom: 1px solid #bcbcbc */
}

ul.brand-accordion>li>a>.data-count {
    background: #00b6e8;
    color: #fff;
}

.material-icons.my-favorites-star {
    color: #FFC107;
}

/* ================= RANGESLIDER ================== */

.brand-slider {
    background: #bcbcbc;
}

.brand-slider::-webkit-slider-thumb {
    background: #00b6e8;
    border: 3px solid #fff;
}

.brand-slider::-moz-range-thumb {
    background: #00b6e8;
    border: 3px solid #fff;
}

/* ================= COUNTER ================== */

.brand-counter .brand-btn,
.brand-counter .brand-btn:hover,
.brand-counter .brand-btn:focus {
    background: #bcbcbc;
}

.brand-counter .brand-btn:disabled {
    color: rgba(0, 0, 0, 0.3);
}

/* ================= CONTROLS ================== */

.brand-control-label span {
    background: #666666;
    color: #fff;
}

.brand-form-field {
    background: #eee;
    border: 1px solid #bcbcbc;
    color: #494949;
    transition: background-color var(--motion-duration-base) var(--motion-ease-out), border-color var(--motion-duration-base) var(--motion-ease-out), color var(--motion-duration-base) var(--motion-ease-out);
}

.brand-form-field:focus {
    background: #fff;
    border: 1px solid #666666;
    color: #111;
}

.brand-search-wrap .material-icons {
    color: #494949;
}

#brand-element-search-icon.cancel,
#brand-icon-search-icon.cancel {
    color: #00b6e8;
}

.brand-sub-settings {
    border: none; /* Remove the default border */
    border-top: 1px dashed #cccccc; /* Add a dashed border */
    margin: 20px 0; /* Optional: Adjusts space around the hr */
}

#brand-barcode-wrap {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='%23FFFFFF'/%3E%3C/svg%3E") left top/contain #ccc;
    background-size: 10px 10px;
}

/* ================= COLORPICKER ================== */

.brand-colorpicker,
.brand-colorpicker:focus,
.brand-form-field {

    border: 1px solid #bcbcbc;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: rgb(188, 188, 188);
    color: #494949;

}

.brand-colorpicker:focus {
    color: #111;
}

.sp-container {
    background: #fff;
    border: 1px solid #bcbcbc;
}

.sp-palette-container {
    border-right: solid 1px #bcbcbc;
}

.sp-container button {
    color: #494949;
}

.sp-container button:hover {
    color: #111;
}

.sp-container button.sp-choose {
    background: #00b6e8;
    color: #fff;
}

.sp-container button.sp-choose:hover,
.sp-container button.sp-choose:focus {
    background: #00b6e8;
    color: #fff;
}

.sp-clear-display:before {
    color: #111;
}

.sp-colorize-container {
    border-color:#bcbcbc !important;
}

/* ================= SELECT ================== */

.brand-select {
    color: #494949;
    background: #eee url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23aaaaaa' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.1rem center;
    background-size: 20px 10px;
    border: 1px solid #bcbcbc;
    transition: background-color var(--motion-duration-base) var(--motion-ease-out), border-color var(--motion-duration-base) var(--motion-ease-out), color var(--motion-duration-base) var(--motion-ease-out);
}

.brand-select:focus {
    border: 1px solid #00b6e8;
}

.brand-select:focus::-ms-value {
    color: #465362;
    background-color: #fff;
}

.select2-container--dark .select2-selection--single {
    background: #eee;
    border: 1px solid #bcbcbc;
}

.select2-container--dark .select2-selection--single .select2-selection__rendered {
    color: #494949;
}

.select2-container--dark .select2-selection--single .select2-selection__arrow b {
    border-color: #bcbcbc transparent transparent transparent;
}

.select2-container--dark .select2-selection--single .select2-selection__placeholder {
    color: #fff;
}

.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above {
    background: #fff;
    border-color: #bcbcbc;
}

.select2-container--dark .select2-results__option--highlighted[aria-selected] {
    background: #00b6e8 !important;
    color: #ffffff;
}

.select2-container--dark .select2-results__option[aria-selected=true] {
    background: #00b6e8;
    color: #fff;
}

.select2-container--dark .select2-search input {
    border: 1px solid #bcbcbc;
    background: #eee;
    color: #111
}

.select2-container--dark .select2-search input:focus {
    border: 1px solid #00b6e8;
}

/* ================= TABS ================== */

.brand-tabs-menu li:hover {
    color: #111;
}

.brand-tabs-menu li.active {
    background: #00b6e8;
    color: #fff;
}

/* ================= TOGGLE ================== */

.brand-toggle-switch {
    background: #bcbcbc;
}

.brand-toggle-switch:before {
    background: #fff;
}

.brand-toggle-checkbox:checked+.brand-toggle-switch {
    background: #00b6e8;
}

/* ================= CHECKBOX ================== */

.brand-checkmark {
    background-color: #eee;
    border: 1px solid #bcbcbc;
}

.brand-checkbox input:checked~.brand-checkmark {
    background-color: #00b6e8;
    border-color: #00b6e8;
}

.brand-checkbox .brand-checkmark:after {
    border: solid #111;
    border-width: 0 3px 3px 0;
}

/* ================= CUSTOM CURSOR ================== */

.tm-pointer-simple.tm-cursor {
    background-color: #fff;
}

/* ================= MODAL ================== */

.brand-modal {
    background: rgba(224, 224, 224, 0.9);
}

.brand-modal-inner>.brand-tabs>.brand-tabs-menu>li {
    /* background: transparent; */
    color:#666666;
}

.brand-modal-inner>.brand-tabs>.brand-tabs-menu>li:hover,
.brand-modal-inner>.brand-tabs>.brand-tabs-menu>li.active {
    background: #fff;
    color:#111;
}

.brand-modal-inner>.brand-tabs>.brand-tab,
.brand-modal-bg {
    background: #fff;
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.20), 0 15px 12px rgba(0, 0, 0, 0.12);

    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.brand-modal-close {
    color: #fff;
    background: #00b6e8;
}

.brand-modal-close:hover {
    color: #fff;
    background: #66666;
}

#brand-modal-onstart {
    color: #fff;
    background: #00b6e8;
}

#brand-modal-onstart:hover {
    color: #fff;
    background: #00b6e8;
}








/* ================= COMPACT MODAL ================== */

.brand-modal-compact {

}

.brand-modal-compact-inner>.brand-tabs>.brand-tabs-menu>li {
    background: transparent;
    color:#494949;
}

.brand-modal-compact-inner>.brand-tabs>.brand-tabs-menu>li:hover,
.brand-modal-compact-inner>.brand-tabs>.brand-tabs-menu>li.active {
    background: #fff;
    color:#111;
}

.brand-modal-compact-inner>.brand-tabs>.brand-tab,
.brand-modal-compact-bg {
    background: #fff;


}

.brand-modal-compact-close {
    color: #fff;
    background: #00b6e8;
}

.brand-modal-compact-close:hover {
    color: #fff;
    background: #66666;
}










#brand-download-as-json,
#brand-save-as-json {
    border-top: 1px dashed #bcbcbc;
}

.brand-select-btn-block>div:first-child {
    border-right: 1px dashed #bcbcbc
}

/* ================= TEMPLATE LIBRARY ================== */

.brand-template-list {
    border: 1px solid #bcbcbc;
}

.brand-template-list li {
    border-bottom: 1px solid #bcbcbc;
}

.brand-template-list li.active {
    background:#eee
}

#brand-history-list li .info .material-icons {
    color: #00b6e8;
}

#brand-history-list li .info span.time {
    background: #fff;
    color:#111;
}

/* ================= MASONRY ================== */

.brand-masonry-item .favorite {
    background: #fff;
}

.brand-masonry-item-inner {
    border: 4px solid #eee;
}

.grid-item:hover .brand-masonry-item-inner,
.brand-masonry-item-inner:hover {
    border-color: #00b6e8;
}

.brand-masonry-item-desc {
    background: #00b6e8;
    color: #fff
}

.brand-svg-library-delete,
.brand-library-delete {
    color: #fff;
    background: #00b6e8;
}

.brand-svg-library-delete:hover,
.brand-library-delete:hover {
    background: #D32F2F;
}

.brand-grid.svg-library-grid .brand-masonry-item-inner {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='%23FFFFFF'/%3E%3C/svg%3E") left top/contain #ccc;
    background-size: 15px 15px;
}

a.iconfinder-url,
a.pixabay-url,
a.pexels-url {
    color: #00b6e8;
    background: #fff;
}

a.iconfinder-url:hover,
a.pixabay-url:hover,
a.pexels-url:hover {
    color: #544abf;
}

#iconfinder-credit,
#pexels-credit,
#pixabay-credit {
    color: #494949;
}

#brand-iconfinder-grid .brand-element {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='%23FFFFFF'/%3E%3C/svg%3E") left top/contain #ccc;
    background-size: 10px 10px;
}

/* ================= RULER ================== */

.guide.v {
    border-right: 1px solid #00b6e8;
}

.guide.h {
    border-bottom: 1px solid #00b6e8;
}

.guide .info {
    background-color: #111;
    border: 1px solid #111;
    color: #fff;
}

.ruler {
    background-color:#fff;
}

.ruler .label {
    color: #494949;
}

.ruler.h {
    border-bottom: 1px solid #bcbcbc;
}

.ruler.h span.major {
    border-left: 1px solid #bcbcbc
}

.ruler.h span.milestone {
    border-left: 1px solid #bcbcbc
}

.ruler.v {
    border-right: 1px solid #bcbcbc
}

.ruler.v span.major {
    border-top: 1px solid #bcbcbc;
}

.ruler.v span.milestone {
    border-top: 1px solid #bcbcbc;
}

#brand-ruler-icon {

}
#brand-ruler-icon.closed {
  /*  background: transparent;*/
}


#brand-ruler-icon .menu-btn{

}
.menu-btn {

}

#brand-ruler-icon .menu-btn{
    color: #666666;

}

.rg-menu a:hover,
.rg-menu a.selected {
    color: #000;
}

/* ================= MEDIA QUERIES ================== */

@media only screen and (max-width: 800px) {
    .brand-modal-inner>.brand-tabs>.brand-tabs-menu>li {
        background: #fff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
}
/* ================= PANEL FORM STYLES (Unified) ================== */
#brand-image-settings .brand-control-wrap,
#brand-shape-settings .brand-control-wrap,
#brand-apps-content .brand-control-wrap,
#brand-tools-content .brand-control-wrap {
    margin: 8px 0;
}

#brand-image-settings .brand-control-label,
#brand-shape-settings .brand-control-label,
#brand-apps-content .brand-control-label,
#brand-tools-content .brand-control-label {
    display: block;
    font-weight: 600;
    color: #111827;
    margin: 8px 0 6px;
}

#brand-image-settings .brand-form-field,
#brand-shape-settings .brand-form-field,
#brand-apps-content .brand-form-field,
#brand-tools-content .brand-form-field,
#brand-image-settings .brand-select,
#brand-shape-settings .brand-select,
#brand-apps-content .brand-select,
#brand-tools-content .brand-select {
    background: #fff;
    border: 1px solid rgba(17,24,39,0.12);
    border-radius: 8px;
    padding: 8px 10px;
    color: #111827;
}

#brand-image-settings .brand-form-field:focus,
#brand-shape-settings .brand-form-field:focus,
#brand-apps-content .brand-form-field:focus,
#brand-tools-content .brand-form-field:focus,
#brand-image-settings .brand-select:focus,
#brand-shape-settings .brand-select:focus,
#brand-apps-content .brand-select:focus,
#brand-tools-content .brand-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,182,232,0.25);
    border-color: #00b6e8;
}

#brand-image-settings .brand-colorpicker,
#brand-shape-settings .brand-colorpicker,
#brand-apps-content .brand-colorpicker,
#brand-tools-content .brand-colorpicker {
    background: #fff;
    border: 1px solid rgba(17,24,39,0.12);
    border-radius: 8px;
    height: 34px;
    padding: 0 8px;
    color: #111827;
}

#brand-image-settings .brand-slider,
#brand-shape-settings .brand-slider,
#brand-apps-content .brand-slider,
#brand-tools-content .brand-slider {
    width: 100%;
}

#brand-image-settings .brand-control-desc,
#brand-shape-settings .brand-control-desc,
#brand-apps-content .brand-control-desc,
#brand-tools-content .brand-control-desc {
    color: #494949;
}

/* ================= APPS PANEL EXTRAS ================== */
#brand-apps-content .brand-control { display: block; }
#brand-apps-content .brand-control .brand-form-field,
#brand-apps-content .brand-control select,
#brand-apps-content .brand-control textarea { width: 100%; }

#brand-apps-content .brand-control-wrap-half { display: inline-block; width: calc(50% - 6px); vertical-align: top; }

#brand-apps-content .brand-title { display:flex; align-items:center; gap:8px; padding:8px 10px; color:#111827; border-radius:8px; }
#brand-apps-content .brand-title:hover { background: rgba(0,182,232,0.08); }

#brand-apps-content .brand-btn { border-radius:8px; border:1px solid rgba(17,24,39,0.12); background:#fff; color:#111827; }
#brand-apps-content .brand-btn.primary { background:#00b6e8; color:#fff; border-color:#00b6e8; }
#brand-apps-content .brand-btn.primary:hover { background:#0bc0ef; }
#brand-apps-content .brand-lg-btn { padding:10px 12px; font-weight:600; }
#brand-apps-content .btn-full { width:100%; display:block; }

#brand-apps-content .brand-control-desc { margin-top:6px; }