/* 
* ZADS extra CSS for Dark (night) mode 
*  Version : 1.0.0 
* use body class .night-mode  as prefix to all class 
* ------------------------------------------------------------------- */
/* general variables */
:root {
  --black-bg-color : #000; 
  --main-bg-color: #303030;
  --secondary-bg-color : #3e3b3b;
  --third-bg-color : #3e3b3b;
  --btn-bg-color : #3e3b3b;
  --btn-active-bg-color : #0b96bc;

  --main-color : #dadada; 
  --secondary-color : #dadada;
  --dark-color :  #3e3b3b;
  --link-color : #1985a5; 

  --border-color :#9e9e9e2e;
  --btn-border-color : #9e9e9e2e;

  --form-field-bg-color : #000; 

  --scrollbarBG: #CFD8DC;
  --thumbBG: #90A4AE;
}



/* scroll bars special */
.night-mode #search-fields::-webkit-scrollbar {
    width: 6px;
}

.night-mode  #search-fields::-webkit-scrollbar-track-piece {
    background-color: var(--main-bg-color); 
}

.night-mode  body.night-mode #search-fields::-webkit-scrollbar-thumb:vertical  {
  background-color: #FFF;
    border : 1px solid white;

}

/* Backgrounds */

body.night-mode , 
.night-mode #site .center-wrapper ,
.night-mode section.main-content-wrapper, 
.night-mode section.notification-wrapper {
  background-color : var(--black-bg-color) !important;
  border : 0px;
}

.night-mode.main-site-page #network {
    background: var(--main-bg-color);
    color: var(--main-color);
}

.night-mode.is-home-page #site .center-wrapper-inner {
    background: var(--main-bg-color);
}


.night-mode .user-nav-menu ul, 
.night-mode .debug-toolbar ul {
  background-color: var(---black-bg-color) !important;
  
}

.night-mode .user-nav-menu li, 
.night-mode .debug-toolbar li  {
    border-color : var(--black-bg-color); 
}

.night-mode #site .center-wrapper-inner {
    background: var(--main-bg-color);
}

/*item details - pictures*/
.night-mode .addetails .ad-main-section .item-pics-main {
  background: var(--main-bg-color);
}


.night-mode .panel-default > .panel-heading {
  background: var(--secondary-bg-color);
  color: var(--secondary-color);
  border-color : var(--border-color); 
}

.night-mode  .panel .focus-tabs li.active {
  background: var(--secondary-bg-color);
  color: var(--secondary-color);
  border-color : var(--border-color); 
}

.night-mode  #main-nav-links li.current-tab a, 
.night-mode   #main-nav-links li.current-tab a:hover,
.night-mode #main-nav ul.tabbed li.current-tab {
  background: var(--secondary-bg-color);
  color: var(--secondary-color);
  border-color : var(--border-color);
}

.night-mode #boxes #dialog {
  background: var(--secondary-bg-color);
  color: var(--secondary-color);
}


.night-mode .section{
  background: var(--secondary-bg-color);
  color: var(--secondary-color);
  border-color : var(--border-color); 
}

.night-mode #sidebar .section .section-title,
.night-mode .home-widget .section .section-title,
.night-mode #sidebar .section ul li.subnavtitle div.title1inner, 
.night-mode .panel {
  background: var(--secondary-bg-color);
  color: var(--secondary-color) !important;
  border-color : var(--border-color); 
}


.night-mode #inner-right .panel {
    border-color : var(--border-color);
}

.night-mode  .panel-body {
  color: var(--secondary-color) !important;
}

.night-mode .panel-footer {
    border-color : var(--border-color);
}

.night-mode .addetails .item-pics-main IMG {
    border: 0px;
}


.night-mode  #adlist-header-wrapper {
  background: var(--secondary-bg-color);
  color: var(--secondary-color) !important;
  border-color : var(--border-color); 
 }


.night-mode .list-group-item {
  background: var(--secondary-bg-color);
  color: var(--secondary-color) !important;
  border-color : var(--border-color); 
}

.night-mode  .post {
  background: var(--third-bg-color);
  border-color : var(--border-color); 
  color: var(--secondary-color) !important;
}

.night-mode  .post:hover {
  background: var(--black-bg-color);
}


.night-mode ul.thumb-view li div.post {
    border-color : var(--border-color); 
}

.night-mode .search-form-inner {
    background-color: var(---black-bg-color) !important;
    border: 1px solid var(--border-color); 
}

.night-mode .search-form-inner .form-group {
    border-color : var(--border-color);
}

.night-mode .panel-footer.details-actions > ul> li:not(:last-child){
 border-color : var(--border-color);
}


.night-mode UL.post-list.maplist-view LI.hasinfofocus .post{
    background-color: var(--black-bg-color) !important;
}

/* table */
.night-mode .table-striped>tbody>tr:nth-of-type(odd) {
    background: var(--third-bg-color);
}

.night-mode .table-striped,
.night-mode .table-striped td,
.night-mode .table-striped th {
  border-color : var(--border-color);
}


/* button */
.night-mode .btn-plusad , 
.night-mode .btn-search,
.night-mode .dm_button2
{
  background-color : var(--btn-bg-color) !important;
  border-color : var(--btn-border-color) !important;  
  color: var(--secondary-color) !important;
}



.night-mode .btn.btn-default {
  background-color : var(--btn-bg-color) !important;
  border-color : var(--btn-border-color) !important;  
  color: var(--secondary-color) !important;
}


.night-mode .pagination li > a, 
.night-mode .pagination li.tripledots>span, 
.night-mode .listing-tab
{
  background-color : var(--btn-bg-color);
  border-color : var(--btn-border-color);  
  color: var(--secondary-color) !important;
   
}

.night-mode .pagination li.active > a,
.night-mode .listing-tab.active
{
  background-color : var(--btn-active-bg-color);
  border-color : var(--btn-border-color);  
  color: var(--dark-color) !important;
   
}

.night-mode .post .pcol-c, 
.night-mode .pcol-x ,
.night-mode ul.maplist-view li div.pcol-c, 
.night-mode .post .pcol-d, 
.night-mode ul.maplist-view li div.pcol-d
{
    border-color : var(--border-color) !important; 
}


.night-mode .nice-list.fullwidth .post-date
, .night-mode #topgallery.fullwidth .post-date
, .night-mode #userrelads.fullwidth .post-date {
  background-color : var(--btn-active-bg-color);
  opacity  : 0; 
}


.night-mode #listings-header-filters {
  background: var(--main-bg-color);
}


.night-mode #sub-nav li.current-tab {


}


.night-mode #sub-nav li.current-tab, 
.night-mode #sub-nav li.current-tab a, 
.night-mode #sub-nav a:hover, 
.night-mode #sub-nav li.link:hover, 
.night-mode .cat_list li.current-tab, 
.night-mode .cat_list a:hover, 
.night-mode .cat_list li.link:hover, 
.night-mode .cat_list dd.current-tab {

  background: var(--black-bg-color) !important;
  color: var(--secondary-color) !important;
}




/* Text*/

.night-mode h1, .night-mode h2,
.night-mode h3,
.night-mode h4,
.night-mode h5,
.night-mode h6 {
   color: var(--secondary-color);
}

.night-mode #breadcrumbs .nav .navtxt {
    color: var(--secondary-color);
}

.night-mode a {
  color : var(--link-color);
}

.night-mode .addetails H1 {
color : var(--link-color); 
}

.night-mode #main-nav-links .mainmenu > a {
    color : var(--link-color); 
}

.night-mode  #dashboard-content {
    
}

.night-mode  #breadcrumbsul a , .night-mode  #breadcrumbsul li{
    color: var(--secondary-color) !important;
}

.night-mode #footer a {
    color: var(--secondary-color) !important;
}


.night-mode .vtag_badges.display li div.below {
    color: var(--secondary-color) !important;
}

.night-mode #sub-nav a, 
.night-mode #loc-nav a, 
.night-mode .cat_list a {
    color: var(--secondary-color) !important;
}

.night-mode #sub-nav li .cnt, .night-mode #loc-nav li .cnt {
  color: var(--secondary-color) !important;
}

.night-mode .nice-list.fullwidth .post-date, 
.night-mode #topgallery.fullwidth .post-date, 
.night-mode #userrelads.fullwidth .post-date {

  background: var(--secondary-bg-color) !important;
  color: var(--secondary-color) !important;
  border-color : var(--border-color) !important; 
    
}



/* Images*/
body.night-mode img {
  filter: brightness(.8) contrast(1.2);
}


.night-mode .no-img .post .pcol-a a img, 
.night-mode .post.as-widget.no-img .pcol-a  a img, 
.night-mode .pcol-a a img.broken-img, 
.night-mode .nice-list .no-img  .listcol-a a img
{
  filter: invert(100%);
}


/* forms */
.night-mode input.text, .night-mode textarea, .night-mode  select,
.night-mode .input-group select.btn  {
    background: var(--form-field-bg-color);
    border-color : var(--form-field-bg-color);
    color: var(--secondary-color) !important;
}

.night-mode  .chosen-container-single .chosen-single , 
.night-mode .chosen-container .chosen-drop{
  background: var(--form-field-bg-color); 
  color: var(--secondary-color) !important;
  border-color : var(--form-field-bg-color); 
}

.night-mode .selectWrapper{
  border-color : var(--form-field-bg-color); 
}

/* checked color of radio */
.night-mode input[type=radio]:checked ~ .check::before {
    background: #dadada;
}


/* dropdown */ 

.night-mode .dropdown-menu>li>a {
  color: var(--secondary-color) !important;
}

.night-mode .dropdown-menu>li>a:focus,
.night-mode .dropdown-menu>li>a:hover,
.night-mode .drop-down-menu .hover-item:hover {
  background-color :var(--black-bg-color);

}