/*-- -------------------------- -->
<---      Core Dark Styles      -->
<--- -------------------------- -*/
body footer button#dark-mode-toggle,
footer button#dark-mode-toggle,
button#dark-mode-toggle{
   display: none;
}

/* Mobile */
@media only screen and (min-width: 0rem) {
   :root {
      --dark: #082032;
      --medium: #2c394b;
      --accent: #334756;
      --bodyTextColorWhite: #fafbfc;
   }

   body.dark-mode,
   body.dark-mode form.data_input,
   body.dark-mode .form_container,
   body.dark-mode {
      background-color: var(--dark);
   }

   body.dark-mode a,
   body.dark-mode p,
   body.dark-mode li,
   body.dark-mode h1,
   body.dark-mode h2,
   body.dark-mode h3,
   body.dark-mode h4,
   body.dark-mode h5,
   body.dark-mode h6,
   body.dark-mode footer,
   body.dark-mode .cs-title,
   body.dark-mode .cs-text,
   body.dark-mode .cs-li,
   body.dark-mode .allow-push-notification-bar {
      color: var(--bodyTextColorWhite);
   }

   body.dark-mode .light {
      display: none;
   }

   body.dark-mode .dark {
      display: block !important;
   }

   .dark {
      /* class used to hide elements that only need to be seen when dark mode is enabled */
      display: none;
   }

   body.dark-mode .login_banner {
      background-image: url('images/empact_logo-white.svg');
   }

   body.dark-mode #login_form input[type="text"],
   body.dark-mode #login_form input[type="password"] {
      box-shadow: 0px 0px 10px 0px #606060;
      background-color: #102a3e;
      color: white;
   }

}

/*-- -------------------------- -->
<---      Dark Mode Toggle      -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
   body.dark-mode #dark-mode-toggle .cs-sun {
      transform: translate(-50%, -50%);
      opacity: 1;
   }

   body.dark-mode #dark-mode-toggle .cs-moon {
      transform: translate(-50%, -150%);
      opacity: 0;
   }

   #dark-mode-toggle {
      transform: none;
      margin: 0;
      padding: 0;
      display: none;
      position: absolute;
      top: -2.5rem;
      right: 1rem;
      height: 100%;
      width: 2.5rem;
      background: transparent;
      border: none;
      overflow: hidden;
   }

   #dark-mode-toggle img,
   #dark-mode-toggle svg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 1.2rem;
      height: 1.2rem;
      pointer-events: none;
   }

   #dark-mode-toggle .cs-moon {
      z-index: 2;
      transition: transform 0.3s,
         opacity 0.3s,
         fill 0.3s;
      fill: #000;
   }

   #dark-mode-toggle .cs-sun {
      z-index: 1;
      transform: translate(-50%, 100%);
      opacity: 0;
      transition: transform 0.3s,
         opacity 0.3s;
   }
}

/* Desktop */
@media only screen and (min-width: 64rem) {
   #dark-mode-toggle {
      transform: none;
      margin: 0;
      padding: 0;
      display: block;
      position: absolute;
      top: 0;
      right: 1rem;
      height: 100%;
   }

   #dark-mode-toggle .moon {
      /* change to whatever you need */
      /* fill: #fff; */
   }
}