/*DARK COLOR SCHEME*/

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

    /*--side-overlays: rgb(31, 33, 48);*/
    --slider:red;
    --toggle-bg: #4e5255;
    --toggle-bg-active: #b7bbbd;
    --toggle-knob-bg: #ffffff;
    --side-overlays: #070b1b;  /*old dark:#070b1b*/
    --slide-highlight: rgb(47, 47, 60);
    --text-color: #c0c5e1ff;
    --modal-background: #000000d5;
    --subdued-text: rgb(158, 162, 184);
    --h1: #fff;
    --top-header: #21232f;
    --gallery:  rgb(51, 52, 63);
    --general-background: rgb(13, 15, 26);
    --transparent: rgba(0, 0, 0, 0);
    --general-background-highlight: rgb(194, 192, 192);
    --toggle-row-bg: rgba(58, 59, 62, 0.49);
    --toggle-row-overbg: rgba(21, 22, 26, 0.49);
    --weeks-circle: rgb(39, 39, 39);
    --months-lunar: rgb(14, 13, 13); /*40%grey*/
    --modal-background: rgba(0, 0, 0, 0.352);
    --night-day: #191919;
    --grey-trans: rgba(0, 0, 0, 0.718);
    --grey-trans-over: rgba(0, 0, 0, 0.9);
    --date-controls: #0d0f1a80;


    --hover-over: #02E1E2;

    --form-field-background: #0000007a;
    --form-field-text: white;
    --form-conf-background: rgba(255, 255, 255, 0.7);
    --form-conf-background-over: rgb(155, 155, 155);
    --form-conf-text: rgb(32, 33, 38);

    --emblem-green: #2b6d27;
    --emblem-green-over: #41a43c;



    --login: rgba(28, 31, 38, 0.7);
    --deeper-accent:  rgb(14, 14, 16);
    --header-accent: #a0c0d2fe;
    --button-1-1: #2d2d85;
    --button-1-1-over: #26266b;
    --button-1-2: #2929b5;
    --button-1-2-over: #262686;
    --button-2-1:#016191;
    --button-2-1-over:#013a60;
    --button-2-2:#236d96;
    --button-2-2-over:#143952;
    --shadow: #8484846b;
    --cal-row-add-icon: url(../svgs/add-cal-dark.svg);
    --cal-row-add-icon-hover: url(../svgs/add-cal-dark-over.svg);
    --night: #13162b;

    --footer-background: #111735ff;
    --footer-text: #7ea9c2;
    --footer-header: #a4a7c2;
    --splash: #103e5dff;
    --splash-over: #103e5dff;
    --notification: #6388b3;
    --fuscia-button: #804280;
    --fuscia-button-over: #a93aa9;

    --facebook: #1d2e53;

    --blue: #4444fc;
    --yellow: #f8cd1f;
    --orange: #AA5A0A;
    --red: #b20b0f;
    --green: #049A15;

    --lighter: rgba(255, 255, 255, 0.06)
 }


   #white-back-for-day {
   display:block;
   }

   #path3 {
   fill:black;
   transition:1s;
   opacity:0}

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

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


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

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


  

 .tooltip {
  background-color: #fdd302d8;
 }

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

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


.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;
  }


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

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

.top-close-button {
  background: url(../svgs/down-arrow.svg) no-repeat;
  background-size: contain;
}

.top-close-button:hover {
  background: url(../svgs/up-reg-arrow-dark.svg) no-repeat;
  background-size: contain;
}

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

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

#comet-button {
    background: url(../svgs/comet-night.svg?v=2) no-repeat;
    background-size: contain;
}

#comet-button:hover {
    background: url(../svgs/comet-night-over.svg?v=2) no-repeat;
    background-size: contain;
}

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

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

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

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

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

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

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

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

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

/* .totems-icon.active {
  opacity: 1;
  border-bottom: 2px solid;
  padding-bottom: 4px;
 filter:saturate(4) !important; */





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

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

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


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

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

}


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

.top-search-icon {
  background: url(../svgs/search-night.svg) 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;
}

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

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



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



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


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

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

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

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

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

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

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

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

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

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

#close-datecycle-notice:hover,
#close-datecycle-notice:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-color, #ffffff);
  outline: none;
}

#close-datecycle-notice:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22);
}

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

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


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

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

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

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

.night-only {display:block;}

.day-only {display:none;}

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

  .x-button:hover {
  background: url(../svgs/x-night-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;
}