/*dark Theme*/
:root{
  --bg-light: #ffffff;
  --bg-dark: #000000;
  --color-light: #ffffff;
  --color-dark: #000000;
  --bg-yellow: #EFCC00;
  --color-yellow: #EFCC00;
}
/* [data-theme="light"] {
    --color-bg: #ffffff;
    --color-fg: #000000;
  }
  
  [data-theme="dark"] {
    --color-bg: #000000;
    --color-fg: #ffffff;
  } */

  .header__themeToggle.header__themeToggle--light {
    background-image: url(../img/dark.png); 
  }
  .header__themeToggle {
    padding: 0.5rem;
    border-color: transparent;
    transition: all var(--global-transition-time) ease-in-out;
    background-image: url(../img/light.png);
    background-repeat: no-repeat;
    background-position: center;
    height: 20px;
    width:20px;
    border-radius: 100%;
    background-color: transparent;
    cursor: pointer;
    display: inline;
    position: relative;
  }
  [data-theme="light"] .header__themeToggle {
    background-image: url(../img/dark.png)!important;
  }

  [data-theme="dark"] img{
    filter: grayscale(100%);
  }

/*Theming Start*/

/*BG Dark*/
[data-theme="dark"] .container-fluid .Features--items, 
[data-theme="dark"] .container-fluid .footer-about > div,
[data-theme="dark"] .bg-lightBlud,
[data-theme="dark"] .custom__TableFirst thead tr th,
[data-theme="dark"] .copyright,
[data-theme="dark"] .inneractive .helpCenter,
[data-theme="dark"] .inneractive .navbar-nav .nav-link::before{
  background:var(--bg-dark)!important;
    
}

/*BG Light*/
[data-theme="dark"] .btn-primary{
  background:var(--bg-light)!important;
    
}

/*Color Dark*/
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .container-fluid .Features--items i, 
[data-theme="dark"] .container-fluid .footer-about > div i,
[data-theme="dark"] .Features__modifier--bigBox .text-primary,
[data-theme="dark"] .custom__TableFirst a,
[data-theme="dark"] .inneractive .navbar-nav .nav-link.active{
   color:var(--color-dark)!important;
    
}
/*Color Light*/
[data-theme="dark"] .nav-item.nav-link.active, 
[data-theme="dark"] .nav-item.nav-link:hover,
[data-theme="dark"] .custom__TableFirst thead tr th,
[data-theme="dark"] .inneractive .helpCenter {
    color: var(--color-light)!important;
}



/*BG Yello*/
[data-theme="dark"] .carousel-control-prev:hover, 
[data-theme="dark"] .carousel-control-next:hover,
[data-theme="dark"] .section-title::before,
[data-theme="dark"] .navbar-dark .navbar-nav .nav-link::before{
  background:var(--bg-yellow)!important;
    
}

/*Color Yellow*/
[data-theme="dark"] .breadcrumb a,
[data-theme="dark"] .nav-item.nav-link.active, 
[data-theme="dark"] .nav-item.nav-link:hover{
  color:var(--color-yellow)!important;
}




  /*End Dark Theme*/