:root {
    color-scheme: light dark; /* both supported */
    --text-color: rgba(255, 255, 255, 0.87);
    --bkg-color: rgb(21, 32, 43);
    --bkg-color-content: rgb(25, 39, 52);
    --border-color: rgb(218, 220, 224, 0.37);
    --title-color: rgba(255, 255, 255, 0.97);
    --menu-color: #bdc1c6;
    
  }
  body {
    font-weight: 350!important;
  }
  body.dark-theme a {
    color: #8ab4f8;
}
body .search .dark-theme{
    background-color: #fff!important;
}
body.dark-theme .sidebar-block.search {
   
  color: var(--text-color);
  background-color: var( --bkg-color);
}
body.dark-theme .navbar-brand {
  color: var(--text-color);

}
body.dark-theme .home-alt-search-box .form-control{
  border-color: var(--border-color)!important;
}
  body.dark-theme {
   
    color: var(--text-color);
    background-color: var( --bkg-color);
  }
  .dark-theme .site-logo {
    filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg) !important;
  }
  .dark-theme .site-navbar{
    background-color: var( --bkg-color);
  }
  .dark-theme .site-heading{
    color:var( --title-color) ; 
    border-bottom: 1px solid var(--border-color);
  }
  .dark-theme .sidebar-block .sidebar-heading{
    color:var( --title-color) ; 
    border-bottom: 1px solid var(--border-color);
  }
  .dark-theme .post-item .post-title {
      color:var( --title-color) ; 
     
    }
    .dark-theme .post-single.bg-white{
        background-color: transparent!important;
    }
    .dark-theme .sidebar-post-item .post-title {
        color:var( --title-color) ; 
       font-weight: 400;
    }
    .dark-theme .navbar-categories .nav-link {
        color: var(--menu-color);
    }
    .dark-theme .navbar-categories .nav-link:hover {
        color: #8ab4f8;
    }
    .dark-theme .category-icon{
        filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg)!important;
    
    }
    
    .dark-theme .navbar-light .navbar-toggler-icon{
        filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg)!important;
    
    }
    .dark-theme .sidebar-block .trend-item a{
        color: var(--menu-color);
    }
    .dark-theme .autocomplete-suggestions{
      background-color: var(--bkg-color-content);
     
    }
    .dark-theme .autocomplete-suggestion{
     
      color: var(--menu-color)!important;
    }
   
    .dark-theme  .autocomplete-suggestion b{
      color: var(--text-color)!important;
    }
   
    .dark-theme .btn.dropdown-toggle{
        color: var(--menu-color);
    }
    .dark-theme .sidebar-block .trend-item a:hover{
        color: #8ab4f8;
    }
    .dark-theme .navbar-categories .nav-link svg{
       fill: var(--menu-color);
    }
    .dark-theme .Qo7o0c {
        border-bottom: 1px solid var(--border-color);
    }
    .dark-theme button.btn-toggle .fas{
        color: #8ab4f8;
        vertical-align: middle;
        margin-top: 5px;
        font-size: 26px
    }
    .dark-theme .site-navbar.navbar-scrolled{
        box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12),0px 2px 4px -1px rgba(0,0,0,0.2);
    }
    .dark-theme .dummy-ad {
        color: #8ab4f8;
        background-color: var(--bkg-color-content);
        background-image: none;
border-radius: 8px;
    }
    .dark-theme .page-item.disabled .page-link {
        color: #8ab4f8;
        background-color: var(--bkg-color-content);
        border-color: var(--border-color);
    }
    .dark-theme .page-item.active .page-link {
        z-index: 1;
color: #fff!important;
background-color: #2196F3!important;
border-color: #2196F3!important;
    }
    .dark-theme .page-item .page-link {
        color: #8ab4f8;
        background-color: var(--bkg-color-content);
        border-color: var(--border-color);
    }
    .dark-theme .form-control{
        background-color: var(--bkg-color-content);
        border-color: var(--border-color);
        border: 1px solid var(--border-color);
        color: var(--text-color);
        }
        .dark-theme .input-group-text {
            border: 1px solid var(--border-color);
        }  
        .dark-theme .bg-white{
            background-color: var(--bkg-color-content)!important;
        }
    .dark-theme .home-search-box .form-control {
    background-color: var(--bkg-color-content);
    border-color: var(--border-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    }
  .dark-theme .post-item {
    background-color: var(--bkg-color-content);
    border-color: var(--border-color);
    color: var(--text-color);
  }
  .dark-theme .dSva6b {
    border-bottom: 1px solid var(--border-color);
}
  .dark-theme .post-item h5{
      color: var(--menu-color);
      font-weight: 400;
  }
  .dark-theme .post-item  .footer-loop
  {
    color: var(--menu-color);
}
.dark-theme .post-item .footer-loop span {
    margin-right: 10px;
}
.dark-theme .post-item .footer-loop .svg-icon{
    margin-right: 5px;
margin-left: 5px;
}
.dark-theme  .grid-element {
    border: none;
}
.dark-theme .navbar-light .navbar-nav .nav-link {
  color: var(--text-color);
  
}
.dark-theme .post-single-title{
  font-weight: 400;
}
.dark-theme .navbar-light .navbar-nav .nav-link:hover,
.dark-theme .navbar-light .navbar-nav .nav-link:focus {
  color: var(--text-color);
  
}
.dark-theme .dropdown-menu {
  background-color: var(--bkg-color-content);
  color: var(--text-color);
}
  .dark-theme .sidebar-block{
    background-color: var(--bkg-color-content);
    border-color: var(--border-color);
    color: var(--text-color);
  }
  body.dark-theme img {
    filter: brightness(.8) contrast(1.2);
  }
  body.dark-theme svg.icon path {
    fill: #efefef;
  }
  .dark-theme .dropdown-item:hover,
  .dark-theme .dropdown-item:focus {
    color: var(--menu-color);
  text-decoration: none;
  background-color: var(--bkg-color);
}
.dark-theme .dropdown-item {
  color: var(--text-color);
}

.dark-theme .post-item .post-title {
  font-weight: 400!important;
}
  /* Font icon (using Font Awesome as an example) */
  body.dark-theme .fa {
    color: #efefef;
  }
  @media (prefers-color-scheme: dark) {
    /* defaults to dark theme */
    body {
      --text-color: #eee;
      --bkg-color: #121212;
    }
    img {
        filter: brightness(.8) contrast(1.2);
      }
    body.light-theme {
      --text-color: #222;
      --bkg-color: #fff;
    }
  }
  @media (max-width: 767.98px) {
    .dark-theme .dropdown-menu {
      background-color: var(--bkg-color-content);
      color: var(--text-color)!important;
    }
    .dark-theme .site-navbar {
      box-shadow: none !important;
      border-bottom: 1px solid var(--border-color);
  }
  .dark-theme .navbar-light .offcanvas-collapse {
    background-color: var(--bkg-color-content);
}
  }
  
 