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

.pixbanner-loader-inner {
    background: #fff;
}

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

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



body {
    background: #f9f9f9;
    color: #888;
}

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

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

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

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

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

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

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

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

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

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

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


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

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

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

#pixbanner-toggle-left .material-icons,
#pixbanner-toggle-right .material-icons {
    color: #888;
}

#pixbanner-toggle-left:hover .material-icons,
#pixbanner-toggle-right:hover .material-icons {
    color: #f66724;
}

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

#pixbanner-top-bar {
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(177, 177, 177, 0.5) 0px 2px 16px 0px;
}

.pixbanner-top-bar-menu .pixbanner-btn-simple {
    color:#888;
}
  
.pixbanner-top-bar-menu .pixbanner-btn-simple:disabled {
    color:#888
}

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

ul.pixbanner-dropdown {
    background: #fff;
    border: 1px solid #bcbcbc;
}

ul.pixbanner-dropdown li {
    border-bottom: 1px solid #bcbcbc;
}

ul.pixbanner-dropdown li a {
    color: #888;
}

ul.pixbanner-dropdown li a:hover {
    color: #888;
}

ul.pixbanner-dropdown li a .material-icons {
    color: #f66724;
}

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

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

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

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

.pixbanner-content-bar .pixbanner-counter .pixbanner-btn:hover {
    color: #888;
}

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

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

#pixbanner-img-drag {
    border-right: 1px solid #bcbcbc;
    background: #fff;
    color: #888;
}

#pixbanner-img-drag:hover,
#pixbanner-img-drag.active {
    background: #eee;
    color: #888;
}

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

#pixbanner-icon-menu {
    background: #f9f9f9;
}

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

button.pixbanner-icon-menu-btn {
    color: #888;
    background: #fff;
    margin: 3px;
}

button.pixbanner-icon-menu-btn.active,
button.pixbanner-icon-menu-btn:hover {
    color: #fff;
    background: #f66724;
    border-radius: 4px;
    margin: 3px;
}

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

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

#pixbanner-content {
    background-color: #f9f9f9;
}

#pixbanner-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;
}

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

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

#pixbanner-right-col {
    border-left: 1px solid #bcbcbc;
    background: #fff;
}

.pixbanner-layers-title {
    background: #fff;
    color: #888
}

#pixbanner-layers li {
    color: #888;
    border-bottom: 1px solid #bcbcbc;
    background: #fff;
}

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

#pixbanner-layers li:hover {
    color: #888;
}

#pixbanner-layers li.active {
    color: #888;
    background: #eee;
}

#pixbanner-layers li .layer-icons {
    background: #eee;
}

#pixbanner-layers li .layer-name {
    color:#888;
}

#pixbanner-layers li .layer-name:focus {
    color:#888;
}


#pixbanner-layers>li>.material-icons {
    color: #f66724;
}

#pixbanner-layers>li>.material-icons.layer-settings {
    background: #eee;
    color: #888;
}

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


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

#pixbanner-no-layer a {
    color: #f66724;
}

#pixbanner-layer-delete-wrap {
    border-top: 1px dashed #bcbcbc;
}

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

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

.pixbanner-frame,
.pixbanner-element {
    border: 1px solid #eee;
    background: #eee;
}

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

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

.pixbanner-element.dark {
    background: #f66724;
  border-color: #f66724;
}

.pixbanner-frame:hover,
.pixbanner-element:hover {
    border: 1px solid #f66724;
}

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

.template-favorite,
.pixbanner-frame .frame-favorite,
.pixbanner-element .element-favorite {
    background: #f66724;
}

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


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

.pixbanner-frames-grid .pixbanner-frame:hover {
    border: 3px solid #888;
}

.grid-icon-item {
    color: #888;
    border: 1px solid #bcbcbc;
}

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

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

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

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

#pixbanner-filters.pixbanner-grid img:hover {
    border: 3px solid #f66724;
}

#pixbanner-filters.pixbanner-grid div label span {
    background: #eee;
    color: #888;
}

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

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

.pixbanner-element>.material-icons {
    color: #888;
}

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

.pixbanner-btn-simple {
    color: #888;
}

.pixbanner-btn-simple:hover,
.pixbanner-btn-simple.active {
    color: #888;
}

.pixbanner-btn-simple:disabled {
    color: #888;
}

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

.pixbanner-btn {
    background: #eee;
    color: #888;
}

.pixbanner-btn:hover,
.pixbanner-btn.primary:hover {
    background: #f66724;
    color:#fff;
}

.pixbanner-btn.active,
.pixbanner-btn.active:hover,
.pixbanner-btn.primary {
    background: #f66724;
    color: #fff;
}

.pixbanner-btn.danger {
    background: #F00;
    color:#fff;
}

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

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

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

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

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

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

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

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

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

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

.pixbanner-pagination ul li {
    border: 1px solid #bcbcbc;
    color: #888;
}

.pixbanner-pagination ul li.active,
.pixbanner-pagination ul li.active:hover {
    background: #f66724;
    border-color: #f66724;
    color: #fff;
}

.pixbanner-pagination ul li:hover {
    border-color: #f66724;
}

.pixbanner-pagination ul li a {
    color: #888;
}

.pixbanner-accordion .pixbanner-pagination ul li {
    color: #888;
    background: #eee;
}

.pixbanner-accordion .pixbanner-pagination ul li.active,
.pixbanner-accordion .pixbanner-pagination ul li.active:hover {
    color: #fff;
    background: #f66724;
}

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

.pixbanner-accordion .pixbanner-pagination ul li a:hover {
    color: #888
}

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

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

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

ul.pixbanner-accordion>li.opened {
    border-color: #f66724;
}

ul.pixbanner-accordion>li>a {
    color: #888;
}

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

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

ul.pixbanner-accordion>li>a>.data-count {
    background: #f66724;
    color: #fff;
}

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

.pixbanner-slider {
    background: #bcbcbc;
}

.pixbanner-slider::-webkit-slider-thumb {
    background: #f66724;
    border: 3px solid #fff;
}

.pixbanner-slider::-moz-range-thumb {
    background: #f66724;
    border: 3px solid #fff;
}

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

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

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

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

.pixbanner-control-label span {
    background: #eee;
    color: #888;
}

.pixbanner-form-field {
    background: #eee;
    border: 1px solid #bcbcbc;
    color: #888;
}

.pixbanner-form-field:focus {
    background: #fff;
    border: 1px solid #f66724;
    color: #888;
}

.pixbanner-search-wrap .material-icons {
    color: #888;
}

#pixbanner-element-search-icon.cancel,
#pixbanner-icon-search-icon.cancel {
    color: #F00;
}

.pixbanner-sub-settings {
    border-top: 1px dashed #bcbcbc;
}

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

.pixbanner-colorpicker,
.pixbanner-colorpicker:focus,
.pixbanner-form-field {
    background: #eee;
    border: 1px solid #bcbcbc;
    color: #888;
}

.pixbanner-colorpicker:focus {
    color: #888;
}

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

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

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

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

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

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

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

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

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

.pixbanner-select {
    color: #888;
    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.5rem center;
    background-size: 20px 10px;
    border: 1px solid #bcbcbc;
}

.pixbanner-select:focus {
    border: 1px solid #f66724;
}

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

.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: #f66724 !important;
    color: #ffffff;
}

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

.select2-drop {
    border: 2px solid #bcbcbc;
}

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

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

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

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

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

.pixbanner-tabs-menu li:hover {
    color: #888;
}

.pixbanner-tabs-menu li.active {
    background: #f66724;
    color: #fff;
}

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

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

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

.pixbanner-toggle-checkbox:checked+.pixbanner-toggle-switch {
    background: #f66724;
}

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

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

.pixbanner-checkbox input:checked~.pixbanner-checkmark {
    background-color: #f66724;
    border-color: #f66724;
}

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

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

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

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

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

.pixbanner-modal-inner>.pixbanner-tabs>.pixbanner-tabs-menu>li {
    background: transparent;
  color:#888;
}

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

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

.pixbanner-modal-close {
    color: #fff;
    background: #F00;
}

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

.pixbanner-modal-close .material-icons {
    font-size: 20px;
    line-height: 36px;
}

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

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

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

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

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

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

#pixbanner-history-list li .info .material-icons {
    color: #f66724;
}

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

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

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

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

.grid-item:hover .pixbanner-masonry-item-inner,
.pixbanner-masonry-item-inner:hover {
    border-color: #f66724;
}

.pixbanner-masonry-item-desc {
    background: #f66724;
    color: #fff
}

.pixbanner-svg-library-delete,
.pixbanner-library-delete {
    color: #fff;
    background: #F00;
}

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

a.pexels-url {
    color: #f66724;
    background: #fff;
}

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

#pexels-credit {
    color:#888;
}

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

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

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

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

.ruler {
    background-color:#eee;
}

.ruler .label {
    color: #888;
}

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

#pixbanner-ruler-icon {
  background: #eee;
    border-right:1px solid #bcbcbc;
    border-bottom:1px solid #bcbcbc;
}

#pixbanner-ruler-icon.closed {
    background: transparent;
}

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

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

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

.rg-menu a {
    background-color: #eee;
  color: #888;
}

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

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

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