:root {
    --dark-mode-white: #FFF;
    --dark-mode-light-gray: #DDD;
    --dark-mode-gray: #CCC;
    --dark-mode-dark-gray: #333;
    --dark-mode-dark-gray-2: #6b7886;
    --dark-mode-dark-blue: #3a4c67;
    --dark-mode-dark-blue-2: #19212a;
    --dark-mode-darker-blue: #1b232f;
    --dark-mode-darkest-blue: #151b24;
    --dark-mode-blue: #00a3d4;
    --dark-mode-primary-pink: #dc3c5f;
    --dark-mode-crimson: #dc143c;
    --dark-mode-red: #dc3545;
    --dark-mode-yellow: #ffc107;
    --dark-mode-secondary: #6c757d;
    --dark-mode-black: #000;
    --dark-mode-transparent: transparent;
    --dark-mode-orange: #ff8c00;
}

html.dark-mode input::placeholder {color: var(--dark-mode-dark-gray-2) !important;}
/* text color */
.dark-mode .text-1 {color:var(--dark-mode-white)!important}
.dark-mode .text-2, .dark-mode .post-text .save-caption-btn {color:var(--dark-mode-light-gray)!important}
.dark-mode .text-3 {color:var(--dark-mode-gray)!important}
.dark-mode .bg-filer {filter:invert(100%) brightness(200%)}
.dark-mode .nav-pills .nav-link.active {color:var(--dark-mode-dark-gray)!important}
.dark-mode input::placeholder {color:var(--dark-mode-gray)!important}
html.dark-mode h1,html.dark-mode .dropdown-menu a,html.dark-mode .dropdown-menu label,html.dark-mode .dropdown-menu span,html.dark-mode h2,html.dark-mode .left-pane i,html.dark-mode h3,html.dark-mode .left-pane li span,html.dark-mode h4,html.dark-mode h6,html.dark-mode .btn-primary,html.dark-mode .btn-secondary,html.dark-mode .btn-danger,html.dark-mode .btn-success,html.dark-mode .btn-warning,html.dark-mode .btn-info,html.dark-mode table th,html.dark-mode .btn-primary i,html.dark-mode .btn.status,html.dark-mode .post-container .middle .post-menu a:hover,html.dark-mode #title-text,html.dark-mode a.logo-title-text span,html.dark-mode .emojionearea > .emojionearea-editor,html.dark-mode .trumbowyg-editor,html.dark-mode select.form-control,html.dark-mode input.form-control,html.dark-mode textarea.form-control,.dark-mode .nav-tabs input,.dark-mode .display-5,.dark-mode .branch-title {color:var(--dark-mode-white)!important}
html.dark-mode .btn-light,html.dark-mode .btn-light i,html.dark-mode .btn-white,html.dark-mode .del,html.dark-mode .social-select i,html.dark-mode .btn.btn-outline-light i,html.dark-mode select.form-control option,html.dark-mode select.form-control optgroup {color:var(--dark-mode-darkest-blue)!important}
.dark-mode input.tagin-input {color:var(--dark-mode-gray)}
html.dark-mode body,html.dark-mode .search-form i.la-search,html.dark-mode .dashboard-container .each,html.dark-mode .left-pane li a,html.dark-mode .text-dark,html.dark-mode #app-container .app-header .nav-right .user-menu,html.dark-mode button,html.dark-mode table td,html.dark-mode .side-menu span,html.dark-mode .count,html.dark-mode .each {color:var(--dark-mode-white)!important}
.text-white-important,a.text-white-important,html.dark-mode .text-white-important,html.dark-mode i.text-white-important, html.dark-mode .btn-outline-light.text-white-important {color:var(--dark-mode-white)!important}
.text-dark-important,html.dark-mode .text-dark-important,html.dark-mode input.text-dark-important,html.dark-mode input.bg-white-input {color:var(--dark-mode-dark-gray)!important}
html.dark-mode .text-muted { color: var(--dark-mode-gray) !important;}
.dark-mode input.tagin-input { color: var(--dark-mode-gray) !important;}
.dark-mode input.tagin-input::placeholder { color: var(--dark-mode-dark-gray-2) !important;}
html.dark-mode .statistics-container .each .icon i{color:var(--dark-mode-darker-blue) !important }

/* buttons */
.dark-mode .btn.btn-outline-light-important,.btn.btn-outline-light-important {color:var(--dark-mode-white)!important;border-color:var(--dark-mode-light-gray)!important;background:none}
.dark-mode .btn-outline-light-important:hover,.btn.btn-outline-light-important:hover {color:var(--dark-mode-black)!important;background-color:var(--dark-mode-light-gray)!important}
.dark-mode .btn-outline-danger, .dark-mode .btn-outline-danger i {color: var(--dark-mode-red) !important;border-color: var(--dark-mode-red) !important;}
.dark-mode .btn-outline-danger:hover, .dark-mode .btn-outline-danger:hover i {color: var(--dark-mode-white) !important;}

/* border color */
.dark-mode .form-control[readonly],.dark-mode .form-control:disabled {opacity:.4;border-color:var(--dark-mode-dark-gray-2)!important}
html.dark-mode .form-control,html.dark-mode .ss-main *,html.dark-mode input.tagin-input,html.dark-mode .border-dashed {border-color:var(--dark-mode-dark-gray-2)!important}
html.dark-mode div,html.dark-mode a,html.dark-mode .icoAction,html.dark-mode h6,html.dark-mode li,html.dark-mode span,html.dark-mode .border {border-color:var(--dark-mode-dark-blue)!important}
html.dark-mode .border-secondary {border-color:var(--dark-mode-dark-gray-2)!important}
html.dark-mode .carousel-indicators li,.carousel-indicators li {border-color:var(--dark-mode-transparent)!important}
html.dark-mode .border-dashed:hover, html.dark-mode .btn-round-icon {border-color:var(--dark-mode-dark-blue)!important}
html.dark-mode .modern-table .table-body .table-row.border-danger-important,.border-danger-important {border-color:var(--dark-mode-red)!important}
html.dark-mode .preview div.each {border-color:var(--dark-mode-dark-blue)!important}
html.dark-mode .each-chat .float-right .each-file-pane {border-color:var(--dark-mode-darkest-blue)!important}
html.dark-mode .nav-item,html.dark-mode .tagin-wrapper,html.dark-mode .trumbowyg-box,html.dark-mode .trumbowyg-editor {border-color:var(--dark-mode-dark-gray-2)!important}
html.dark-mode .border-colored {border-color:var(--dark-mode-blue)!important}
html.dark-mode .border-colored-hover:hover {border:1px var(--dark-mode-blue) solid!important}
.dark-mode .uploads-files-container .item-pane.selected {border:solid 2px var(--dark-mode-blue)!important}
html.dark-mode .addProductBox,html.dark-mode .dropdown-menu {border:1px var(--dark-mode-darkest-blue) solid!important}
html.dark-mode .addProductBox:hover {border:1px var(--dark-mode-darker-blue) solid!important}
html.dark-mode hr {border-top:1px var(--dark-mode-dark-blue) solid!important}
html.dark-mode .border-white-important { border-color: var(--dark-mode-white) !important;}
html.dark-mode  .border-warning {border-color: var(--dark-mode-yellow) !important;}
html.dark-mode  .border-secondary {border-color: var(--dark-mode-secondary) !important;}
html.dark-mode .border-danger {border-color: var(--dark-mode-red) !important;}

/* pricing */
.dark-mode .card.single-pricing-pack,.dark-mode .popular-price,.popular-price,.single-pricing-pack:hover,.single-promo-hover:hover {box-shadow:0 1rem 3rem rgba(31,45,61,.125)!important}
.dark-mode .single-pricing-pack:hover {transform:translate(0,-5px);border-top:4px solid var(--dark-mode-crimson)!important}
.dark-mode .popular-price {transform:translate(0,-5px);border-top:4px solid var(--dark-mode-crimson)!important}
.feature-tabs li a.active,html.dark-mode .feature-tabs li .active h6 {color:var(--dark-mode-crimson)!important}
.dark-mode .feature-tabs li a:not(.active):before {background-color:var(--dark-mode-gray)}
html.dark-mode .free-package li,html.dark-mode .single-pricing-pack .card-body {color:var(--dark-mode-white)!important}
html.dark-mode .btn-outline-dark, html.dark-mode .btn-outline-dark:hover { color: var(--dark-mode-gray) !important; border-color: var(--dark-mode-gray) !important;}
.dark-mode .pricing-feature-list .more-info {color:var(--dark-mode-dark-blue)!important}
html.dark-mode .notify-danger,.notify-danger, .notify-danger:hover {border-color:var(--dark-mode-red)!important;color:var(--dark-mode-red)!important}
.dark-mode a.del-element {color:var(--dark-mode-light-gray)!important;border-color:var(--dark-mode-light-gray)!important}


/* backgrounds */
.dark-mode .code-display {background:var(--dark-mode-darkest-blue);color:var(--dark-mode-light-gray)}
html.dark-mode .bg-white-important,.bg-white-important,input.bg-white-input {background-color:var(--dark-mode-white)!important}
html.dark-mode .modal-content,html.dark-mode .view-schedule-modal {background:var(--dark-mode-darkest-blue)!important}
html.dark-mode .scheduled-posts-grid .each.bg-white,html.dark-mode .preview.bg-white {background:var(--dark-mode-darker-blue)!important}
html.dark-mode .inbox-social-menu a.social-menu-el.active {background-color:var(--dark-mode-darker-blue)!important}
html.dark-mode div#app-container {background:var(--dark-mode-darker-blue)}
html.dark-mode .right-cover {background:var(--dark-mode-darkest-blue)!important}
html.dark-mode .bg-white-opacity {background:rgba(21,27,36,0.8)}
.dark-mode .preview .user-container .avatar,.dark-mode .bg-gray {background:var(--dark-mode-dark-blue)!important}
html.dark-mode .uploads-files-container .item-pane {background-color:var(--dark-mode-darker-blue)!important;border-color:var(--dark-mode-darker-blue)!important}
html.dark-mode #cover-loader {background:rgba(0,0,0,.6)!important}
html.dark-mode .del {background:var(--dark-mode-white)!important;border:.5px var(--dark-mode-dark-gray-2) solid!important}
html.dark-mode .trumbowyg-button-pane .trumbowyg-button-group::after,html.dark-mode .trumbowyg-button-pane::after {background:var(--dark-mode-dark-gray-2)!important}
html.dark-mode .form-control {background:none}
html.dark-mode .modern-table .table-body .bg-transparent.table-row:nth-child(2n) {background:none!important}
.dark-mode .ss-main .ss-single-selected {background:none;color:var(--dark-mode-gray)}
html.dark-mode body,.dark-mode .trumbowyg-fullscreen,html.dark-mode .dashboard-container .each,html.dark-mode .menu-toggle,html.dark-mode .sub-menu-toggle,html.dark-mode #app-container .app-header .nav-right .user-menu .avatar-container,html.dark-mode .page-link,html.dark-mode #productType,html.dark-mode #horizontal-menu .nav-btn,html.dark-mode .post-container .left,html.dark-mode .help-modal,html.dark-mode .help-close-button,html.dark-mode .post-container .right,html.dark-mode .preview-container,html.dark-mode .modal-content,html.dark-mode #app-container .right-pane .inner-container .inner-left-pane,html.dark-mode .inbox-social-menu a.active,html.dark-mode #schedule-calender,html.dark-mode .docs-sidebar,html.dark-mode ul#connectedList li,html.dark-mode .bg-white,html.dark-mode input.tagin-input,html.dark-mode .ss-main .ss-multi-selected,.dark-mode .c100:after,.dark-mode #photos .image .icoAction {background:var(--dark-mode-darkest-blue)!important}
html.dark-mode .dropdown-menu,html.dark-mode div#order-list .row:hover,html.dark-mode .list-group-item,html.dark-mode .action-pane,html.dark-mode .pane-bg,html.dark-mode .card,html.dark-mode #connectedList .connected-el,html.dark-mode .each-add,html.dark-mode .account-lists .each.active,.account-lists .each:hover,html.dark-mode .bg-light-gray,html.dark-mode #horizontal-menu .menu-container .active span,html.dark-mode .bg-light,.dark-mode .c100,.dark-mode .breadcrumb,.dark-mode .feedBox input[type="radio"]:checked + div,.dark-mode .each-chat .chat-content.float-left .chat-message {background:var(--dark-mode-darker-blue)!important}
.dark-mode .preview .text-container-template div,.dark-mode .preview .text-container-template2 div,.dark-mode .preview .user-container .user-info div,html.dark-mode .docs .breadcrumb,.dark-mode .each-chat .chat-content .chat-message {background-color:var(--dark-mode-dark-blue)!important}
.dark-mode .trumbowyg-button-pane button.trumbowyg-active,.dark-mode .trumbowyg-button-pane button:not(.trumbowyg-disable):focus,.dark-mode .trumbowyg-button-pane button:not(.trumbowyg-disable):hover {background:none!important}
.dark-mode .side-menu .active {background: var(--dark-mode-darker-blue)}
html.dark-mode .chat-head, html.dark-mode .each-thread.active,html.dark-mode .each-thread:hover {background:var(--dark-mode-dark-blue-2)!important}

/* icons */
.dark-mode .emojionearea-button, html.dark-mode .btn i {color:var(--dark-mode-white)}
html.dark-mode .social-icons svg {fill:var(--dark-mode-white)!important}
.social-icons svg + span {display:inline-block;margin-top:5px!important;vertical-align:middle}
html.dark-mode .fc-today-button,html.dark-mode .fc-button .fc-icon {color:var(--dark-mode-white)!important}
.dark-mode span.menu-toggle i {opacity:.4}
html.dark-mode .logo-container .logo-full .logo-st1 {fill:var(--dark-mode-white)}
.dark-mode .trumbowyg-box svg,.trumbowyg-modal svg {fill:var(--dark-mode-gray)!important}
.dark-mode .trumbowyg-box svg:hover,.trumbowyg-modal svg:hover {fill:var(--dark-mode-white)!important}

/* other */
html.dark-mode .preview-container {box-shadow:none!important}
html.dark-mode input:disabled,html.dark-mode select:disabled {opacity:.4!important}
html.dark-mode .tippy-popper[x-placement^=top] .tippy-arrow {border-color:var(--dark-mode-transparent)!important;border-top:7px solid var(--dark-mode-dark-gray)!important}
html.dark-mode .tippy-popper[x-placement^=bottom] .tippy-arrow {border-color:var(--dark-mode-transparent)!important;border-bottom:7px solid var(--dark-mode-dark-gray)!important}
html.dark-mode .tippy-popper[x-placement^=right] .tippy-arrow {border-color:var(--dark-mode-transparent)!important;border-right:7px solid var(--dark-mode-dark-gray)!important}
html.dark-mode .tippy-popper[x-placement^=left] .tippy-arrow {border-color:var(--dark-mode-transparent)!important;border-left:7px solid var(--dark-mode-dark-gray)!important}

/* modern table */
html.dark-mode .modern-table .table-body .table-row {background:var(--dark-mode-darkest-blue)!important;border-color:var(--dark-mode-dark-blue)!important}
html.dark-mode .modern-table .table-body .table-row:nth-child(2n) {background:var(--dark-mode-darker-blue)!important}

.dark-mode .dropdown-menu .dropdown-item:hover,.dark-mode .dropdown-item:focus,.dark-mode .dropdown-item:active {background: var(--dark-mode-primary-pink) !important; }
.social-icons .active svg,html.dark-mode .social-icons .active svg {fill:var(--dark-mode-primary-pink)!important}

html.dark-mode .left-pane .colored,html.dark-mode .colored,html.dark-mode .colored .las,html.dark-mode #domainsList .active .las {color:var(--dark-mode-blue)!important}
html.dark-mode .modern-table .table-body .table-row.border-colored {border-color:var(--dark-mode-blue)!important}
html.dark-mode .modern-table .table-body a.colored, html.dark-mode .colored {color: var(--dark-mode-blue)!important}
html.dark-mode .modern-table .table-body .colored i { color: var(--dark-mode-blue) !important; }

html.dark-mode .text-primary-orange, html.dark-mode .text-orange, html.dark-mode i.text-orange { color: var(--dark-mode-orange) !important;}

html.dark-mode div#domainSearchBox i,html.dark-mode div#domainSearchBox input::placeholder {color:var(--dark-mode-dark-blue-2)!important}

/*form email */
.dark-mode .form-email input, .dark-mode .form-email label {color:var(--dark-mode-white)!important}
.dark-mode .form-email span {border-left:1px var(--dark-mode-dark-gray-2) solid !important;}