.darkMode{
    background: #2A2B2D ;
}
.darkMode .dark-mode-background{
    background: #323945 !important;
    border-color: #505C70 !important;
}


/* ------------------------------- header ------------------------------- */
.darkMode #header {
    background: #323945;
    border-color: #2A2B2D
}
.darkMode #header font,
.darkMode #header .filter-option-inner-inner, 
.darkMode #header .dropdown-toggle::after,
.darkMode #header span,
.darkMode #header #icon-angle,
.darkMode #header #navbar .menu-item{
    color: #fff
}
.darkMode #header #selectDomain .btn-light:not(:disabled):not(.disabled).active, 
.darkMode .btn-light:not(:disabled):not(.disabled):active, 
.darkMode .show>.btn-light.dropdown-toggle,
.darkMode #header #selectDomain .bootstrap-select>.dropdown-toggle, 
.darkMode #mainContent .dropdown-menu.show,
.darkMode #header #selectDomain .dropdown-menu.show,
.darkMode #header #navbar{
    background: #323945
}
.darkMode #mainContent .multi-column-dropdown li a{
	color: white
}
.darkMode #header #selectDomain .dropdown-menu>li>a:focus,
.darkMode .dropdown-menu>li>a:hover{
    background: #646f82
}
.darkMode #header #callToAction .desktop b{
    color: white;
}
.darkMode #header .closebtn:hover{
    color: white
}
.darkMode #header .button-upgrade{
    background-color: #f0ad4e;
    border-color: #eea236;
    box-shadow: none !important;
}
.darkMode #header .icon-upgrade{
    color: #f0ad4e;
}
.darkMode #header .button-upgrade:hover{
    background-color: #ec971f !important;
    border-color: #d58512 !important;
}
.darkMode #header .white-mode-icon{
    display: block !important;
}
.darkMode #header .black-mode-icon{
    display: none;
}
.darkMode #header .mode-container {
    border-color: #505C70
}
.darkMode .mode-container .mode-title{
    color: white
}

/* ------------------------------- left menu ------------------------------- */
.darkMode #sidebar ::-webkit-scrollbar-thumb {
    background-color: #0e6c8b;
}
.darkMode #sidebar{
    background: #2A2B2D !important;
}
.darkMode #sidebar #menu{
    background: #323945 !important
}
.darkMode #sidebar .jstree-default li a:hover,
.darkMode #sidebar .menuItem2 a:hover,
.darkMode #sidebar .left-menu-line{
    background: #5E6466;
}
.darkMode #sidebar #agencyUpgrade i{
    color: #686c7b !important;
}
.darkMode #sidebar #agencyUpgrade a{
    background-color: white;
    color: #686c7b !important;
}
.darkMode #sidebar #agencyUpgrade a:hover{
    background-color: #5E6466 !important;
}
.darkMode #sidebar #agencyUpgrade a.jstree-clicked,
.darkMode #sidebar #agencyUpgrade a.jstree-clicked i{
    color: white !important;
}
.darkMode #sidebar  #agencyUpgrade a:hover, 
.darkMode #sidebar #agencyUpgrade a:hover, 
.darkMode #sidebar #agencyUpgrade a:hover i{
    color: white !important;
}

/* ------------------------------- modal ------------------------------- */
.darkMode .modal-dialog .modal-header,
.darkMode .popover-header{
    background-color: #414C5E !important;
    border-color: #505C70;
    color: white;
}
.darkMode .modal-dialog .modal-header .modal-title,
.darkMode .modal-dialog .modal-header button{
    color: white !important;
}
.darkMode .modal-dialog .modal-content,
.darkMode .popover-body{
    background: #323945 !important;
}
.darkMode .modal-dialog .modal-content .modal-footer,
.darkMode .modal-dialog .modal-content .formBody,
.darkMode .modal-dialog .modal-content .formHeading,
.darkMode .modal-dialog .modal-content .box,
.darkMode .modal-dialog .modal-content .bootstrap-select>.dropdown-toggle,
.darkMode .modal-dialog .modal-content textarea,
.darkMode .modal-dialog .modal-content td.resultsTDLeft,
.darkMode .modal-dialog .modal-content td.resultsTD,
.darkMode .modal-dialog .modal-content th.slickResultsTHLeft,
.darkMode .modal-dialog .modal-content .dropdown-menu.show {
    background: #323945 !important;
    border-color: #505C70;

}
.darkMode .modal-dialog .modal-content .formHeading,
.darkMode .modal-dialog .modal-content p,
.darkMode .modal-dialog .modal-content label,
.darkMode .modal-dialog .modal-content span,
.darkMode .modal-dialog .modal-content .slickResultsTH,
.darkMode .modal-dialog .modal-content .formInputBottomInfo,
.darkMode .modal-dialog .modal-content .instructions,
.darkMode .modal-dialog .modal-content textarea,
.darkMode .modal-dialog .modal-content font,
.darkMode .modal-dialog .modal-content .filter-option-inner-inner,
.darkMode .modal-dialog .modal-content .dropdown-toggle::after{
    color: white !important;
}

.darkMode .modal-dialog .modal-content .oddSlick{
    background: #323945 !important;
    color: white;
}
.darkMode .popover-body label{
    color: white;
}
.darkMode .popover-body input,
.darkMode .popover-body textarea{
    background: transparent;
    border-color: #505C70;
    color: white;
}




/* ------------------------------- main ------------------------------- */
.darkMode #main{
    background: #2A2B2D ;
}

.darkMode .pageHeading,
.darkMode #mainContent div,
.darkMode #mainContent font.slickSelector,
.darkMode #mainContent font.extraInfoTitle,
.darkMode #mainContent font.resultsTD,
.darkMode #mainContent a.resultsTD,
.darkMode #mainContent tr.slickResultsTableTitle th.slickResultsTHLeft a,
.darkMode #mainContent td.slickResultsTDLeft font,
.darkMode #mainContent td.slickResultsTDLeft .resultsTDasFontSlick,
.darkMode #mainContent a i:not(.fa-inverse),
.darkMode #mainContent td.slickTableViewMenu a,
.darkMode #mainContent .newInstructions #instructionsButton,
.darkMode #mainContent .formHeading,
.darkMode #mainContent button i,
.darkMode #mainContent .tableActionsHeader
{
    color: #fff !important;
}
.darkMode #mainContent #message.warn,
.darkMode #mainContent .add_keyword_message.warn{
   color: #9F6000 !important
}
.darkMode #mainContent a.resultsTDSlick:visited{
    color: #5FC0DD
}
.darkMode #mainContent tr.slickResultsTableTitle th.slickResultsTHLeft,
.darkMode #mainContent th.slickResultsTHLeft{
    background: #414C5E;
    border-color: #505C70;
}
.darkMode #mainContent tr.evenSlickInner{
    background: #2A2B2D;
}
.darkMode #mainContent td.slickResultsTDLeft,
.darkMode #mainContent td.resultsTD,
.darkMode #mainContent td.resultsTDLeft{
    border-color: #505C70;
}
.darkMode #mainContent tr.oddSlick,
.darkMode #mainContent tr.odd,
.darkMode #mainContent td.slickTableViewMenu,
.darkMode #mainContent .formHeading,
.darkMode #mainContent .formBody
{
    background: #323945 !important;
}
.darkMode #mainContent .resultTableActions table.dataTable tbody tr.even.selected,
.darkMode #mainContent .resultTableActions table.dataTable tbody tr.odd.selected {
  color: #fff !important;
}
table.dataTable tbody tr.even.selected  {
	background-color: white !important;
	color: rgb(88, 88, 88) !important
}
.darkMode #mainContent textarea {
    color: #fff;
    background: #323945 !important;
}

.darkMode #mainContent tr.evenSlick,
.darkMode #mainContent tr.even{
    background: #363E4E !important;
}
.darkMode #mainContent table.dataTable tbody tr{
	background: #363E4E !important;
}
.darkMode #mainContent table.dataTable tbody tr.even.selected{
   color: white!important;
}
.darkMode #mainContent .box{
    border-color: transparent;
    background: #323945;
}
.darkMode #mainContent .bootstrap-select>.dropdown-toggle,
.darkMode #mainContent .dropdown-menu.show{
    background: #323945;
}
.darkMode #mainContent .filter-option-inner-inner, 
.darkMode #mainContent .dropdown-toggle::after,
.darkMode #mainContent span,
.darkMode #mainContent #showing,
.darkMode #mainContent font.resultsTDSlick,
.darkMode #mainContent a.slickResultsTH,
.darkMode #mainContent input,
.darkMode #mainContent label,
.darkMode #mainContent #seform tr,
.darkMode #mainContent #playVideo div,
.darkMode #mainContent font.template2,
.darkMode #mainContent p.template2
{
    color: #fff !important
}
.darkMode #message.info,
.darkMode #mainContent td a.resultsTDSlick,
.darkMode #mainContent .link,
.darkMode #mainContent #message .info,
.darkMode #mainContent #enteranceMessage,
.darkMode #mainContent font.form2
{
    color: #5FC0DD !important
}
.darkMode .form-group .btn:not(.btn-primary):not(.btn-info){
    background: #323945
}
.darkMode #mainContent #tableContent th, 
.darkMode #mainContent #tableContent tr, 
.darkMode #mainContent #tableContent td{
    border-color: #505C70 !important;
}
.darkMode #mainContent .paginationjs-go-input input,
.darkMode .dataTables_wrapper .dataTables_paginate .paginate_button, 
.darkMode .ellipsis{
    background: #323945;
    border-color: #505C70 !important;
    color: #fff !important;
}
.darkMode .dataTables_wrapper .dataTables_paginate .paginate_button:hover, 
.darkMode .dataTables_wrapper .dataTables_paginate .paginate_button:active{
    background: #505C70 !important;
    color: #fff !important;
}
.darkMode .dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled:hover,
.darkMode .dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled:hover{
    color: #aaa !important;
}

.darkMode #mainContent #resizer,
.darkMode #mainContent .paginationjs .paginationjs-pages li>a{
    background: #323945
}
.darkMode .paginationjs.paginationjs-theme-blue .paginationjs-pages li.active>a{
    background: #337ab7 !important
}
.paginationjs.paginationjs-theme-blue .paginationjs-pages li{
    border-color: #505C70 !important
}
.darkMode .paginationjs.paginationjs-theme-blue .paginationjs-pages li>a:hover{
    background: #505C70 !important;
}
.darkMode #mainContent .nav-tabs .nav-item.show .nav-link{
    background: #323945;
    border-color: #505C70;
    color: #fff;
    border-bottom: none;
}
.darkMode #mainContent .nav-tabs .nav-link.active{
    background: #323945;
    color: #fff;
    border: 1px solid;
    border-color: #505C70 #505C70 #323945;
}
.darkMode #mainContent .nav-tabs .nav-link:hover{
    border-color: #505c70 #505c70 #323945;
    border-bottom: none;
}
.darkMode #mainContent .nav-tabs .nav-link.active:hover{
    border-bottom: 1px solid #323945;
}
.darkMode #mainContent .formBody.filterBar, 
.darkMode #mainContent .formBody{
    border: none !important
}
.darkMode #mainContent .info-box.standOut,
.darkMode #mainContent .info-box{
    background: transparent;
    border-color: #505C70 !important;
}
.darkMode #mainContent .jTip::after{
    color: #fff;
    background: transparent
}

.darkMode #mainContent text{
    fill: #fff !important
}
.darkMode #mainContent g.highcharts-label.highcharts-data-label text{
    font-weight: normal !important;
}
.darkMode #mainContent text tspan.highcharts-text-outline{
    stroke: none;
}
.darkMode #mainContent .highcharts-label.highcharts-tooltip text{
    fill: #000 !important
}
.darkMode .highcharts-label.highcharts-tooltip span{
    color: white !important;
}
.darkMode #mainContent .highcharts-exporting-group rect.highcharts-button-box{
    fill: transparent
}
.darkMode #mainContent .highcharts-exporting-group path.highcharts-button-symbol{
    stroke: #fff
}
.darkMode #mainContent .hccontainerdouble,
.darkMode #mainContent .hccontainerdouble2,
.darkMode #mainContent .hccontainerTriple,
.darkMode #mainContent .hccontainerTriple2,
.darkMode #mainContent .hccontainer,
.darkMode #mainContent .hccontainer2,
.darkMode #mainContent .hccontainer3,
.darkMode #mainContent .hccontainer4{
    border-color: #505C70 !important;

}

.darkMode #footer {
    background: #323945;
    box-shadow: none; 
}
.darkMode #footer a, .darkMode #footer font{
    color: #fff;
}



/* ------------------------------- dashboard2 ------------------------------- */
.darkMode .shufuni-container h1,
.darkMode .shufuni-container h3,
.darkMode .shufuni-container h5,
.darkMode .shufuni-container p {
    color: #fff !important;
}

.darkMode .shufuni-container {
    background: #323945;
    border: none
}
.darkMode .dashboard .card-content{
    background: #323945;
    border: none
}
.darkMode .dashboard .card-content span,
.darkMode .dashboard .card-content p,
.darkMode .dashboard .card-content td,
.darkMode .dashboard .card-content h1,
.darkMode .dashboard .card-content h2,
.darkMode .dashboard .card-content h3,
.darkMode .dashboard .card-content h6
{
    color: #fff  !important;
}
.darkMode .dashboard .card-content text{
    fill: #fff !important;
}
.darkMode .dashboard .backlinks-chart path,
.darkMode .dashboard .backlinks-chart g rect,
.darkMode .dashboard .rank-trending-chart path,
.darkMode .dashboard .rank-trending-chart g rect{
    stroke: #323945;
}
.darkMode .dashboard .organic-traffic-chart .highcharts-grid.highcharts-yaxis-grid path{
    stroke: #505C70
}
.darkMode .dashboard .jTip::after{
    background: transparent;
    color: #fff
}
.darkMode #rankingsTable tr{
    border-color: #505C70
}

/* ------------------------------- auditOverview ------------------------------- */

.darkMode #mainContent .hccontainer-dashboard{
    border-color: #505C70 !important
}

.darkMode #mainContent .graphTip{
    background: transparent;
    border: 1px solid #505C70;
}
.darkMode #mainContent .formBody.bs.container-fluid.dashboard .bottom-frame-content input[type="number"]{
    background: transparent;
    border: 1px solid #fff;
}

/* ------------------------------- auditIssue ------------------------------- */
.darkMode #mainContent .table-bordered td, 
.darkMode #mainContent .table-bordered th{
    border-color: #505C70 !important
}

.darkMode #mainContent table.dataTable tbody td.select-checkbox:before, 
.darkMode #mainContent table.dataTable tbody th.select-checkbox:before{
    border-color: #fff !important
}
.darkMode #mainContent .fa.fa-square.fa-stack-2x{
    color: #31708f !important;
}

/* ------------------------------- pageAudit ------------------------------- */
.darkMode #mainContent .row .issue_row{
    background: transparent
}
.darkMode #mainContent #issuesNumMessage {
    color: #fff !important;
}
.darkMode #mainContent #myDropdown{
    background: transparent;
    border-color: #ececec;
    color: white;
}
.darkMode #mainContent #myDropdown option{
    background: #323945 !important;
}

.darkMode #mainContent .instructions{
    background: #414C5E;
    box-shadow: none;
}
/* ------------------------------- other ------------------------------- */
.darkMode #mainContent #domainSettingsContent{
    border-bottom: 1px solid;
}
.darkMode #mainContent .top-keywords-page-bar,
.darkMode #mainContent .keywords_container,
.darkMode #mainContent .keywords-title
{
    background: #414C5E;
}
.darkMode #mainContent .keyword-bar{
    background: #505C70 ;
}

.darkMode #mainContent #keywords_filter{
    background: #323945  ;
}

.darkMode #mainContent .dark-mode-border,
.darkMode #mainContent .targetedBlogs,
.darkMode #mainContent .orederDetails,
.darkMode #mainContent #selectedKeywordTD,
.darkMode #mainContent .optimizationResult.row.siteInfo,
.darkMode #mainContent .tab-content,
.darkMode #mainContent .nav-tabs{
    border-color: #505C70 !important
}

.darkMode #mainContent .tasks .task{
    background: #414C5E !important;  
}

.darkMode #mainContent #message.success{
    color: #4F8A10 !important;  
}

.darkMode #mainContent label.checkbox-inline{
    background: #414C5E;
}
.darkMode .ui-menu ,
.darkMode .ui-menu .ui-widget-content ,
.darkMode .ui-menu .ui-menu-item{
    background: #414C5E;
}

.darkMode .ui-menu .ui-menu-item-wrapper,
.darkMode #mainContent #listFeature li,
.darkMode #mainContent #listFeature a{
    color: white;
}  

.darkMode .form-control.input-sm{
    color: white;
}

.darkMode .aboutTable p,
.darkMode .page-content font,
.darkMode .page-content label,
.darkMode .page-content p,
.darkMode .page-content li{
    color: white;
}

.darkMode .page-content input{
    background-color: transparent;
}
.darkMode .page-content .dropdown-toggle {
    background: #2A2B2D !important;
    color: white !important;
}
.darkMode .upgrade_table_blocker{
    background: rgb(50 60 80 / 97%);
}

.darkMode #mainContent .addTags{
    background: #2A2B2D;
}

.darkMode #mainContent .addTags:hover{
    background: #636569;
}
.darkMode #mainContent .editTagsInline{
    background-color: #4d9ce6;
}
.darkMode #mainContent .editTagsInline:hover{
    background-color: #00a8dc;
}
.darkMode .highcharts-label.highcharts-tooltip span{
    color: white !important;
}


.darkMode .competitors-keywords-chart .card-content {
    background: #323945;
    border: none
}
.darkMode .competitors-keywords-chart .card-content h2 ,
.darkMode .competitors-keywords-chart .card-content h6 ,
.darkMode .competitors-keywords-chart .card-content p {
    color: white;
}
.darkMode #showExtraFilters,
.darkMode #showExtraFilters i{
    color: #5bc0de !important;
}

.darkMode ::placeholder {
    color: #aaa; 
}

.darkMode ::-moz-placeholder {
    color: #aaa;
    opacity: 1; 
}

.darkMode :-ms-input-placeholder {
    color: #aaa;
}

.darkMode ::-ms-input-placeholder {
    color: #aaa;
}

.darkMode ::placeholder {
    color: #aaa !important;
}

.darkMode .popover-body {
    color: white;
}
.darkMode .dataTables_processing,
.darkMode #circles, .darkMode .progress-content{
    background: linear-gradient(to right, rgba(54, 62, 78, 0) 0%, rgba(54, 62, 78, 0.9) 25%, rgba(54, 62, 78, 0.9) 75%, rgba(50, 57, 69, 0) 100%) !important
}
.darkMode .dark-mode-text{
    color: white !important;
}

.darkMode .tooltip.show.bs-tooltip-left .arrow::before {
    border-left-color: white; 
}
.darkMode .tooltip.show.bs-tooltip-right .arrow::before {
    border-right-color: white; 
}
.darkMode .tooltip.show.bs-tooltip-top .arrow::before {
    border-top-color: white; 
}
.darkMode .tooltip.show.bs-tooltip-bottom .arrow::before {
    border-bottom-color: white; 
}

.darkMode table.dataTable thead .sorting_desc {
    background-image: url(/seo/assets/images/sort_decs.png) !important;
}
.darkMode table.dataTable thead .sorting_asc {
    background-image: url(/seo/assets/images/sort_asc.png) !important;
}
.darkMode table.dataTable thead .sorting {
    background-image: url(/seo/assets/images/sort_both.png) !important;
}
.darkMode #mainContent input:-webkit-autofill,
.darkMode #mainContent input:-webkit-autofill:hover,
.darkMode #mainContent input:-webkit-autofill:focus,
.darkMode #mainContent input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #323945 inset !important;
    -webkit-text-fill-color: white;
}