HEX

File: /var/www/html/tmpr/../tmpr/../tmpr/../tmpr/../tmpr/../tmpr/..//brandwow/css2/dark.css
/* ================= LOADER ================== */

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

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

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

* {
    scrollbar-color: #717171 #303030;
}

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

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

body {
    background: #212121;
    color: #aaa;
}

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

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

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

.text-warning {
    color: #FFC107 !important;
}

.text-white {
    color: #ffffff !important;
}

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

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

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

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

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

.brand-img-loader {
    border: 3px solid rgba(255, 255, 255, 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='%23000000'/%3E%3C/svg%3E") left top/contain #333;
    background-size: 15px 15px;
}

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

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

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

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

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

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

#brand-top-bar {
  /*  background: #090909;
    border-bottom: 1px solid #303030;*/
}

.brand-top-bar-menu .brand-btn-simple {
    color:#fff;
}
  
.brand-top-bar-menu .brand-btn-simple:disabled {
    color:#aaa
}

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

ul.brand-dropdown {
    background: #090909;
    border: 1px solid #303030;
}

ul.brand-dropdown li {
    border-bottom: 1px solid #303030;
}

ul.brand-dropdown li a {
    color: #aaa;
}

ul.brand-dropdown li a:hover {
    color: #fff;
}

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

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

.brand-content-bar {
    background: #121212;
    border: 1px solid #303030;
}

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

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

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

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

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

#brand-img-drag {
    border-right: 1px solid #303030;
    background: #121212;
    color: #aaa;
}

#brand-img-drag:hover,
#brand-img-drag.active {
    background: #303030;
    color: #fff;
}

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

#brand-pages {
    background: #121212;
}

#brand-pages>div.active>.brand-open-page {
    background: #212121;
    color: #fff;
}

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

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

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

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

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

button.brand-icon-menu-btn {
    color: #aaa;
    background: #090909;
}

button.brand-icon-menu-btn.active,
button.brand-icon-menu-btn:hover {
    color: #fff;
    background: #121212;
}

#brand-icon-panel {
    border-right: 1px solid #303030;
    background: #121212;
}

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

#brand-content {
    background-color: #212121;
}

#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='%23000000'/%3E%3C/svg%3E") left top/contain #333;
    background-size: 15px 15px;
}

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

/* ================= LAYERS ================== */

#brand-right-col {
    border-left: 1px solid #303030;
    background: #121212;
}

.brand-layers-title {
    background: #090909;
}

#brand-layers li {
    color: #aaa;
    border-bottom: 1px solid #303030;
    background: #121212;
}

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

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

#brand-layers li.active {
    color: #fff;
    background: #212121;
}

#brand-layers li .layer-icons {
    background: #090909;
}

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

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

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

#brand-layers>li>.material-icons {
    color: #00b6e8;
}

#brand-layers>li>.material-icons.layer-settings {
    background: #090909;
    color: #aaa;
}

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

#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: #00b6e8;
}

#brand-layer-delete-wrap {
    border-top: 1px dashed #303030;
}

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

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

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

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

.type-customSVG>a:before {
    color: #4CAF50;
}

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

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

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

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

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

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

.grid-icon-item {
    color: #aaa;
    border: 1px solid #121212;
}

.grid-icon-item:hover {
    border: 1px solid #00b6e8;
    color: #fff;
}

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

.grid-icon-label {
    border-top: 1px solid #121212;
}

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

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

#brand-filters.brand-grid div label span {
    background: #303030;
    color: #fff;
}

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

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

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

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

#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='%23000000'/%3E%3C/svg%3E") left top/contain #333;
    background-size: 10px 10px;
}

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

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

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

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

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

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

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

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

.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='%23000000'/%3E%3C/svg%3E") left top/contain #333;
      background-size: 10px 10px;
}

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

.brand-colorbrewer-item.active,
.brand-colorbrewer-item:hover {
    border: 1px solid #fff;
}

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

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

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

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

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

.brand-btn {
    background: #212121;
    color: #fff;
}

.brand-btn:hover,
.brand-btn.primary:hover {
    background: #00b6e8;
}

.brand-btn.active,
.brand-btn.active:hover,
.brand-btn.primary {
    background: #00b6e8;
    color: #fff;
}

.brand-btn.danger {
    background: #F44336;
}

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

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

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

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

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

.icon-group .brand-btn:hover,
.icon-group .brand-btn.active {
    background: #090909;
}

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

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

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

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

.brand-pagination ul li {
    border: 1px solid #303030;
    color: #aaa;
}

.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;
}

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

.brand-accordion .brand-pagination ul li {
    color: #aaa;
    background: #212121;
}

.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: #aaa;
}

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

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

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

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

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

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

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

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

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

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

.brand-slider {
    background: #303030;
}

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

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

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

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

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

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

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

.brand-form-field {
    background: #212121;
    border: 1px solid #303030;
    color: #aaa;
}

.brand-form-field:focus {
    background: #212121;
    border: 1px solid #00b6e8;
    color: #fff;
}

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

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

.brand-sub-settings {
    border-top: 1px dashed #303030;
}

#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='%23000000'/%3E%3C/svg%3E") left top/contain #333;
    background-size: 10px 10px;
}

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

.brand-colorpicker,
.brand-colorpicker:focus,
.brand-form-field {
    background: #212121;
    border: 1px solid #303030;
    color: #aaa;
}

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

.sp-container {
    background: #090909;
    border: 1px solid #303030;
}

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

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

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

.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: #fff;
}

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

.brand-select {
    color: #aaa;
    background: #212121 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 #303030;
}

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

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

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

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

.select2-container--dark .select2-selection--single .select2-selection__arrow b {
    border-color: #aaa 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: #090909;
    border-color: #303030;
}

.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-drop {
    border: 2px solid #303030;
}

.select2-drop.select2-drop-above {
    border-top: 2px solid #303030;
}

.select2-container--dark .select2-search input {
    border: 1px solid #303030;
    background: #090909;
    color: #fff
}

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

.select2-container--dark .select2-results__group {
    border-top: 1px solid #303030;
}

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

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

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

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

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

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

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

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

.brand-checkmark {
    background-color: #212121;
    border: 1px solid #303030;
}

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

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

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

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

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

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

.brand-modal-inner>.brand-tabs>.brand-tabs-menu>li {
    background: #212121;
}

.brand-modal-inner>.brand-tabs>.brand-tabs-menu>li.active {
    background: #121212;
}

.brand-modal-inner>.brand-tabs>.brand-tab,
.brand-modal-bg {
    background: #121212;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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='%23000000'/%3E%3C/svg%3E") left top/contain #333;
      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: #aaa;
}

#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: #090909;
    border: 1px solid #212121;
    color: #fff;
}

.ruler {
    background-color:#212121;
}

.ruler .label {
    color: #aaa;
}

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

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

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

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

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

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

#brand-ruler-icon {
    background: #212121;
    border-right:1px solid #444;
    border-bottom:1px solid #444;
}

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

.rg-menu {
  border-right: 1px solid #303030;
}

.rg-menu li {
    border-bottom: 1px solid #303030;
}

.rg-menu a {
    background-color: #090909;
    color: #aaa;
}

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

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

@media only screen and (max-width: 800px) {
    .brand-modal-inner>.brand-tabs>.brand-tabs-menu>li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}