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

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

.designgfto-loader {
    border: 5px solid rgba(255, 255, 255, 0.1);
    border-top-color: #6658ea;
}

/* ================= 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;
}

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

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

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

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

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

.designgfto-img-loader {
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #6658ea;
}


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

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

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

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

#designgfto-toggle-left:hover .material-icons,
#designgfto-toggle-right:hover .material-icons {
    color: #6658ea;
}

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

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

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

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

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

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

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

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

ul.designgfto-dropdown li a .material-icons {
    color: #6658ea;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.designgfto-frame,
.designgfto-element {
    border: 1px solid #303030;
    background: #303030;
}

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

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

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

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

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

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

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

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

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

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

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

#designgfto-filters.designgfto-grid img:hover {
    border: 3px solid #fff;
}

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

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

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

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

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

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

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

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

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

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

.designgfto-btn:hover,
.designgfto-btn.primary:hover {
    background: #5546e8;
}

.designgfto-btn.active,
.designgfto-btn.active:hover,
.designgfto-btn.primary {
    background: #6658ea;
    color: #fff;
}

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

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

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

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

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

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

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

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

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

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

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

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

.designgfto-pagination ul li.active,
.designgfto-pagination ul li.active:hover {
    background: #6658ea;
    border-color: #6658ea;
    color: #fff;
}

.designgfto-pagination ul li:hover {
    border-color: #6658ea;
}

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

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

.designgfto-accordion .designgfto-pagination ul li.active,
.designgfto-accordion .designgfto-pagination ul li.active:hover {
    color: #fff;
    background: #6658ea;
}

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

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

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

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

ul.designgfto-accordion>li.opened {
    border-color: #6658ea;
}

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

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

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

ul.designgfto-accordion>li>a>.data-count {
    background: #6658ea;
    color: #fff;
}

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

.designgfto-slider {
    background: #303030;
}

.designgfto-slider::-webkit-slider-thumb {
    background: #6658ea;
    border: 3px solid #121212;
}

.designgfto-slider::-moz-range-thumb {
    background: #6658ea;
    border: 3px solid #121212;
}

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

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

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

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

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

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

.designgfto-form-field:focus {
    background: #212121;
    border: 1px solid #6658ea;
    color: #fff;
}

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

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

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

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

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

.designgfto-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: #6658ea;
    color: #fff;
}

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

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

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

.designgfto-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.5rem center;
    background-size: 20px 10px;
    border: 1px solid #303030;
}

.designgfto-select:focus {
    border: 1px solid #6658ea;
}

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

.select2-container--dark .select2-results__option[aria-selected=true] {
    background: #6658ea;
    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 #6658ea;
}

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

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

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

.designgfto-tabs-menu li.active {
    background: #6658ea;
    color: #fff;
}

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

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

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

.designgfto-toggle-checkbox:checked+.designgfto-toggle-switch {
    background: #6658ea;
}

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

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

.designgfto-checkbox input:checked~.designgfto-checkmark {
    background-color: #6658ea;
    border-color: #6658ea;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#designgfto-history-list li .info .material-icons {
    color: #6658ea;
}

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

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

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

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

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

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

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

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

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

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

#pexels-credit {
    color:#aaa;
}

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

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

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

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

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

.menu-btn {
    background-color: #6658ea;
    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) {
    .designgfto-modal-inner>.designgfto-tabs>.designgfto-tabs-menu>li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}