/*LIGHT STYLE SHEET*/

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


   :root {

       --slider: red;
       --toggle-bg: #b7bbbd;
       --toggle-bg-active: #4e5255;
       --toggle-knob-bg: #ffffff;
/*    --side-overlays: rgb(225, 225, 225);*/
    --side-overlays: white;
    --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(245, 245, 245);
    --transparent: rgba(0, 0, 0, 0);
    --general-background-highlight: #f9f9f9ff;
    --toggle-row-bg: rgba(197, 196, 193, 0.49);
    --toggle-row-overbg: rgba(234, 233, 229, 0.49);
    --weeks-circle: #b3b3b3ff; /*30% grey*/
    --months-lunar: rgb(240, 239, 239); /*40%grey*/
    --modal-background: rgba(255, 255, 255, 0.215);
    --day-day: #f2f2f2;
    --grey-trans: rgba(255, 255, 255, 0.91);
    --grey-trans-over: rgba(255, 255, 255, 0.98);
   --date-controls: rgba(245, 245, 245, 0.55);

    --form-field-background: #5b5b5b80;
    --form-field-text: black;
    --form-conf-background: rgba(255, 255, 255, 0.7);
    --form-conf-background-over: rgba(255, 255, 255);
     --form-conf-text: rgb(32, 33, 38);

       --emblem-green: #008000;
       --emblem-green-over: #0ca70c;


    --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);
    --cal-row-add-icon: url(../svgs/add-cal.svg?v=4);
    --cal-row-add-icon-hover: url(../svgs/add-cal-over.svg?v=4);
    --login:rgb(244, 242, 242);
       --login-green: green;
    
    --footer-background: #252b4d;
    --footer-text: #a2cbe3;
    --footer-header: #a8aab8;
    --splash: #2A91DA;
    --splash-over: #19659c;
    --notification: #a1ccfd;
    --fuscia-button: #a458a4;

    --facebook: #728398;


       --blue: #3D3DE9;
       --yellow: #f4b201;
       --orange: #ee6b02;
       --red: #da1515;
       --green: #1fa804;


   }


   #white-back-for-day {
   display:block;
   opacity: 0;
   transition: 1s;
   }

   .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-day.svg) no-repeat;
    background-size: contain;
}
.top-settings-button:hover {
    background: url(../svgs/settings-icon-day-over.svg) no-repeat;
    background-size: contain;
}


.top-settings-icon {
    background: url(../svgs/settings-icon-day.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;
}

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

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


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

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

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

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

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

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

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

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

#whale-earthbutton.active {
  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?v=2) no-repeat;
    background-size: contain;
}

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

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

#reg-up-button {
  background: url(../svgs/up-reg-arrow-light.svg) center no-repeat;
  background-size: contain;
}

#reg-up-button:hover {
    background: url(../svgs/up-reg-arrow-light-over.svg) center no-repeat;
    background-size: contain;
}

#reg-up-button.active {
    background: url(../svgs/up-reg-arrow-light-active.svg) center no-repeat;
    background-size: contain;
}

#reg-up-button.active:hover {
    background: url(../svgs/up-reg-arrow-light-active-hover.svg) center no-repeat;
    background-size: contain;
}


#export-down-arrow {
  background: url(../svgs/down-arrow.svg) no-repeat;
  background-size: contain;
}

#export-down-arrow:hover {
    background: url(../svgs/down-arrow-over.svg) no-repeat;
    background-size: contain;
}

.reset-button {
  background-color: #45526b78;
  color: var(--general-background);
}


#next-year {
  background: url(../svgs/to-next-year-day.svg) center no-repeat;
  background-size: contain;
}

#next-year:hover {
  background: url(../svgs/to-next-year-day-over.svg) center no-repeat;
  background-size: contain;
}

#prev-year-search {
  background: url(../svgs/to-prev-year-day.svg) center no-repeat;
  background-size: contain;
}

#prev-year-search:hover {
  background: url(../svgs/to-prev-year-day-over.svg) center no-repeat;
  background-size: contain;
}

#next-day {
  background: url(../svgs/to-tomorrow-day.svg) center no-repeat;
  background-size: contain;
}

#next-day:hover {
  background: url(../svgs/to-tomorrow-day-over.svg) center no-repeat;
  background-size: contain;
}

#reset-to-today {
  background: url(../svgs/to-today-day.svg) center no-repeat;
  background-size: contain;
}

#reset-to-today:hover {
  background: url(../svgs/to-today-day-over.svg) center no-repeat;
  background-size: contain;
}

#prev-day {
  background: url(../svgs/to-yesterday-day.svg) center no-repeat;
  background-size: contain;
}

#prev-day:hover {
  background: url(../svgs/to-yesterday-day-over.svg) center no-repeat;
  background-size: contain;
}

#prev-year {
  background: url(../svgs/to-prev-year-day.svg) center no-repeat;
  background-size: contain;
}

#prev-year:hover {
  background: url(../svgs/to-prev-year-day-over.svg) center no-repeat;
  background-size: contain;
}

#next-year-search {
  background: url(../svgs/to-next-year-day.svg) center no-repeat;
  background-size: contain;
}

#next-year-search:hover {
  background: url(../svgs/to-next-year-day-over.svg) center no-repeat;
  background-size: contain;
}

.eye-open {
    background: url(../assets/icons/event-show.svg) center no-repeat;
    background-size: contain;
    width: 28.5px;
    height:18.75px;
    cursor:pointer;
    margin-left:6px;
}
.eye-open:hover {
    background: url(../assets/icons/event-show-over.svg) center no-repeat;
    background-size: contain;
}

.eye-closed {
    background: url(../assets/icons/event-hide.svg) center no-repeat;
    background-size: contain;
    width: 28.5px;
    height:18.75px;
    cursor:pointer;
    margin-left:6px;
}
.eye-closed:hover {
    background: url(../assets/icons/event-hide-over.svg) center no-repeat;
    background-size: contain;
}

.night-only {display:none;}

.day-only {display:block;}


.top-clock-button {
    background: url(../assets/icons/event-show.svg) no-repeat;
    background-size: contain;
}

.top-clock-button:hover {
    background: url(../assets/icons/event-show-over.svg) no-repeat;
    background-size: contain;
}

/*
.blur {
  background: #ededed;}
*/

.dim-blur {
  background: rgba(255, 255, 255, 0.7);
}
.x-button {
  background: url(../svgs/x-day.svg) center no-repeat;
  background-size: contain;
  }

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

.cal-row-action-icon {
    background-color: #ffffff7a;
}

.ec-plan-toggle {
  background: rgba(15, 23, 42, 0.08);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.ec-plan-toggle .ec-toggle-indicator {
  background: var(--emblem-green, #0b1120);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

.ec-plan-toggle:hover .ec-toggle-indicator,
.ec-plan-toggle:focus-within .ec-toggle-indicator {
  background: var(--emblem-green-hover, var(--emblem-green-over, var(--emblem-green, #0b1120)));
}

.ec-plan-toggle .ec-toggle-option {
  color: var(--text-color);
}

.ec-plan-toggle .ec-toggle-option.active {
  color: #ffffff;
}