/*LIGHT STYLE SHEET*/

/* light.css: 👉 dark-on-light */


   :root {

    --side-overlays: rgb(225, 225, 225);
    --slide-highlight: rgb(212, 212, 213);
    --top-header: #fff;
    --modal-background: #ffffffd5;
    --text-color: #242424;
    --subdued-text: #454545;
    --h1: black;
    --gallery: grey;
    --general-background: rgb(252, 252, 252);
    --general-background-highlight: #f9f9f9ff;
    --weeks-circle: #b3b3b3ff; /*30% grey*/
    --months-lunar: rgb(240, 239, 239); /*40%grey*/
    --modal-background: rgba(255, 255, 255, 0.215);
    --night-day: #f2f2f2;
    


    --deeper-accent: rgb(148, 148, 148);
    --header-accent: rgb(93, 93, 93);
    --button-1-1: #4646cf;
    --button-1-1-over: #5b5bf6;
    --button-1-2: #3b3baf;
    --button-1-2-over: #5454ff;
    --button-2-1:#00a1f2;
    --button-2-1-over:#3cb0fd;
    --button-2-2:#008ad4;
    --button-2-2-over:#3498db;
    --shadow: rgba(57, 57, 57, 0.613);
    --login:rgb(244, 242, 242);
    
    --footer-background: #252b4d;
    --footer-text: #a2cbe3;
    --footer-header: #a8aab8;
    --splash: #2A91DA;
    --splash-over: #19659c;
    --notification: #a1ccfd;
    --fuscia-button: #a458a4;

    --facebook: #728398;

   }

   .tooltip {
    background-color: #bca119d8;
   }


   .top-search-button {
    background: url(svgs/search-day.svg) no-repeat;
    background-size: contain;
}

.top-search-button:hover {
      background: url(svgs/search-day-over.svg) no-repeat;
      background-size: contain;
  }

.top-settings-button {
    background: url(svgs/settings-icon.svg) no-repeat;
    background-size: contain;
}

.top-settings-button:hover {
    background: url(svgs/settings-icon-over.svg) no-repeat;
    background-size: contain;
}

.top-help-button {
  background: url(svgs/about-i-day.svg) no-repeat;
  background-size: contain;
}

.top-help-button:hover {
    background: url(svgs/about-i-day.svg) no-repeat;
    background-size: contain;
}

.top-cycles-button {
  background: url(svgs/cycles-day.svg) no-repeat;
  background-size: contain;
}

.top-cycles-button:hover {
  background: url(svgs/cycles-day-over.svg) no-repeat;
    background-size: contain;
}

#planets-button {
  background: url(svgs/cycles-day.svg) no-repeat;
  background-size: contain;
}

#planets-button:hover {
  background: url(svgs/cycles-day-over.svg) no-repeat;
    background-size: contain;
}

#lunar-button {
  background: url(svgs/moon-day.svg) no-repeat;
  background-size: contain;
}

#lunar-button:hover {
    background: url(svgs/moon-day-over.svg) no-repeat;
    background-size: contain;
}

#earth-button {
  background: url(svgs/earth-day.svg) no-repeat;
  background-size: contain;
}

#earth-button:hover {
    background: url(svgs/earth-day-over.svg) no-repeat;
    background-size: contain;
}

.top-menu-button {
  background: url(svgs/menu-day.svg) no-repeat;
  background-size: contain;
}

.top-menu-button:hover {
  background: url(svgs/menu-day-over.svg) no-repeat;
    background-size: contain;
}

.main-menu-button {
  background: url(svgs/login-icon.svg) no-repeat;
  background-size: contain;
}

.main-menu-button:hover  {
  background: url(svgs/login-icon-over.svg) no-repeat;
  background-size: contain;
}

.earthcycles-logo {
  
  background: url(svgs/earthcycles-logo-motto-o-day.svg) no-repeat;
  background-size: contain;
}

.top-add-button {
  background: url(svgs/add-day.svg) no-repeat;
  background-size: contain;
}

.top-add-button:hover {
    background: url(svgs/add-day-over.svg) no-repeat;
    background-size: contain;
}