/*DARK COLOR SCHEME*/

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

:root {

  /* --main-background:  rgb(13, 15, 26); */
  --main-background: #21232f;
  --h1: #fff;
  --same: black;
  --text-color: rgb(230, 231, 242);
  --subdued-text: rgb(158, 162, 184);
  --logo-color: rgb(213, 213, 213); 
  --top-header: #21232f;
  --header-accent: #2e4958fe;
  --settings-background: rgb(23, 25, 40);
  --settings-border: rgb(24, 26, 38);
  --emblem-pink: #a93aa9;
  --emblem-pink-over: #e92de9;
  --emblem-blue: #2f8197;
  --emblem-blue-over: #329bb8;
  --emblem-green: #2b6d27;
  --emblem-green-over: #41a43c;
  --emblem-orange: #bd6303;
  --emblem-orange-over: #fc8302;
  --selector:  rgb(71, 73, 91);
  --selector-highlight: rgb(65, 65, 81);
  --selector-highlight-over: rgb(55, 55, 73);
  --divider-line:  rgb(51, 52, 63);
  --sub-menu:  rgb(51, 52, 63);
  --modal-background: rgb(48, 52, 77);
  --search-row: rgba(255, 255, 255, 0.065);
  --side-overlays: rgb(24, 26, 38);
  --accordion-background: #262751;
  --accordion-highlight:  #121226;
  --advanced-background: #482651;
  --slide-overlays:  rgb(29, 35, 71); 
  --slide-highlight:rgb(46, 46, 88);
  --show-hide: rgba(0, 0, 0, 0.65);
  --darker:rgba(0, 0, 0, 0.1);
  --ecobrick-preview: rgba(0, 0, 0, 0.836);
  --x-button-over: rgb(51, 52, 63);
  --input-background: rgb(164, 152, 176);

  --form-background: rgb(24, 26, 44);

  --gallery:  rgb(51, 52, 63);
  --yellow-alert: #623f00;
  
  

  --table-background-1: #4d4c4c;
  --table-background-2: #454545;


  --table-background-hover: #333333;

  --table-background-heading: #0868AD;
    --table-sort-odd: #464545ff;
    --table-sort-even:#403f3fff;

  .modal-content-box {
    background: #342834;
  }


/* BOOKNOTES */

--slider: #18181a;
  --header-footer: #27272c;
  --deeper-accent-color: #17181B;
  --drop-cap: rgb(200, 200, 200);

  #booknotes-curtain {
    background: url(svgs/tractatus-mandala-full-grey.svg) center no-repeat;
    background-size: 30%;
    background-color: var(--slider);
    color: var(--drop-cap);
  }


  .virtue img {
    filter: invert(100%);
  }


  #book-box a  {
    background: url(svgs/content-arrow-night.svg) left center no-repeat  var(--header-footer);
    background-size: 30px !important;
    background-position-x: 18px !important;
    border:  var(--thin-border-color);

  }

  #book-box a:hover {
    background: url(svgs/content-arrow-45-night.svg) left center no-repeat var(--deeper-accent-color);
    background-size: 30px !important;
    background-position-x: 18px !important;

  }



  --gallery:  rgb(51, 52, 63);
 
    --text-color: #c0c5e1ff;
    --top-header: #21232f;
    --general-background: rgb(13, 15, 26);
    --login: rgba(28, 31, 38, 0.7);
    --general-background-highlight: rgb(33, 33, 39); /*obsolete?*/
    --deeper-accent:  rgb(14, 14, 16);
    --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;
    --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;
 }

.dark-only {display:block;}

.light-only {display:none;}


.top-emblem-button {
    background: url(icons/main-menu-dark.svg) no-repeat;
    background-size: contain;
}

.top-emblem-button:hover {
      background: url(icons/main-menu-dark-over.svg) no-repeat;
      background-size: contain;
  }

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

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


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

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

.top-lang-button {
  background: url(icons/language-button.svg) no-repeat;
  background-size: contain;
}

.top-lang-button:hover {
  background: url(icons/language-button-over-white.svg) no-repeat;
  background-size: contain;
}

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

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

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

.tour-slide1 {
  background: url(svgs/richard-and-team-night.svg) no-repeat bottom;
  background-size: contain;
}

.tour-slide2 {
  background: url(svgs/ecobricking-materials-night.svg) no-repeat bottom;
  background-size: contain;
}

.tour-slide4 {
  background: url(svgs/dolphin-top-optimized-dark.svg) no-repeat bottom;
  background-size: contain;
}

.tour-slide5 {
  background: url(svgs/earth-home-animated-day.svg) no-repeat bottom;
  background-size: contain;
}

.tour-slide6 {
  background: url(svgs/dolphin-top-optimized-dark.svg) no-repeat bottom;
  background-size: contain;
}

.featured-content-2 {
  background: url(svgs/blue-circles-banner-dark.svg) no-repeat bottom;
  background-size: cover;
}

.dolphin-pic {
  background: url(svgs/dolphin-top-optimized-dark.svg) no-repeat center;
  background-size: cover;
}

.featured-content-3 {
  background: url(svgs/ecobrick-village-vision-2024-night.svg) no-repeat bottom;
  background-size: cover;
}

.ecovillage-pic {
  background: url(webp/spiral-building.webp) no-repeat center;
  background-size: cover;
}


.earthservice-pic {
  background: url(svgs/earth-service-animation.svg) no-repeat center;
  background-size: contain;
  margin-top:15px;
  margin-bottom:-10px;
}

#main {
  /* background-image:linear-gradient(var(--main-background),var(--main-background),black); */
  background: url(svgs/starry-night.svg) repeat-x bottom;
  background-size: contain;

  }

.vision-landscape {
  background: url(webp/ocean-footer-night3.webp?v=3) no-repeat center;
  background-size: contain;
  background-color: var(--main-background);

}

.registration-footer-holder {
  background: url(webp/earthen-subscription-background-dark.webp) top center, var(--side-overlays);
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (min-width: 700px) {

.side {
  background: #262751;
	background: linear-gradient(126deg,#131431) 10%, #3c3d7c;

}
}


.splash-content-block {
  filter: brightness(75%) contrast(125%);
}

.splash-box {
  filter: brightness(125%) contrast(100%) ;
}

#splash-bar {
  filter: brightness(75%) contrast(125%);
  box-shadow: rgba(0, 0, 10, 0.805) 0px 0px 15px;
}

#splash-content-block {
  filter: brightness(75%) contrast(125%);
}

#splash-box {
  filter: brightness(125%) contrast(100%) ;
}

.virtue-icons {
  filter: invert(100%);
  
}
/* 
#clouds {
  filter: brightness(80%);
}

#cloud-banner {
  filter: brightness(80%);
}

#header-content-block  {
  background-color: #245d7eb2;
} */

#header-content-block {
  background-color: #2b3840b2;

}

.grey {
  background: rgb(62, 62, 62);
  /* background: linear-gradient(132deg, rgba(235,235,235,1) 0%, rgba(199,199,199,1) 100%); */
}

.reddish {
  background: rgb(131, 40, 40);
  /* background: linear-gradient(132deg, rgba(255,238,238,1) 0%, rgba(254,195,195,1) 100%); */
}

.greenish {
  background: rgb(47, 108, 44);
  /* background: linear-gradient(132deg, rgba(239,255,238,1) 0%, rgba(198,254,195,1) 100%); */
}

.blueish {
  background: rgb(37, 105, 121);
  /* background: linear-gradient(132deg, rgba(235,253,255,1) 0%, rgba(195,250,254,1) 100%); */
}

.orangeish {
  background: rgb(132, 97, 36);
  /* background: linear-gradient(132deg, rgba(255,248,235,1) 0%, rgba(254,234,195,1) 100%); */
}

.pinkish {
  background: rgb(116, 40, 96);
  /* background: linear-gradient(132deg, rgba(254,235,255,1) 0%, rgba(248,195,254,1) 100%); */
}

.greyish {
  background: #161a27;
  /*background: linear-gradient(126deg, rgba(212,212,212,1) 10%, rgba(251,251,251,1) 71%);*/


}

#clouds {
	background: url(../svgs/top-clouds-animated-desktop-dark.svg) center top;
    background-repeat: no-repeat;
    background-size: cover;
}


.dark-mode-invert {
  filter: invert(100%);
}


.x-button {
  background: url('svgs/x-button-night.svg?v=5.1') no-repeat center;
  background-size: contain;

}


.x-button:hover {
  background: url('svgs/x-button-night-over.svg?v=5.1') no-repeat center;
  background-size: contain;
}


  /* #gea-logo {
    background: url(logos/gea-logo-full-dark.svg) no-repeat;
    background-size: contain;
  } */
/* 
#logo-ecobricks-org, #logo-global-ecobrick-alliance {
  fill: #eaeaeaff;
  transition: 0.5s;
} */


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

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


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


@media screen and (min-width: 0px) and (max-width: 700px) {
    .clouds-new2  {
      background-image: linear-gradient(black,var(--general-background),var(--general-background));
      }
    }


    @media screen and (min-width: 701px) {
      .clouds-new2  {
        background-image: linear-gradient(black,var(--general-background));
        }
      }


      .bottom-scope  {
        background-image: linear-gradient(var(--general-background),var(--general-background), black);

        }
        .main-landing-graphic {
          background: url(../svgs/richard-and-team-night.svg?v=3) no-repeat center center;
          background-size: contain;
          } */

      /*
  @media screen and (min-width: 0px) and (max-width: 700px) {
    .clouds-new2  {
        background-image: linear-gradient(var(--top-header),var(--general-background),var(--general-background),var(--general-background));
     /* background: url(../svgs/ashim-top-clouds-mobile.svg?v1.3) center top repeat-x;
          box-sizing: border-box;
          background-size: 100%;*/
 
/*   

          .tree-coins {
            background: url(../svgs/earth-home-animated-night2.svg) no-repeat center;
            background-size: contain;
          }

  .bio-top {
    background: url(../svgs/biosphere-top-night.svg) no-repeat center top;
    background-size: cover;
  }



  .splash-content-block {
  background: url(../svgs/brik-view-dark.svg?v=3.1) bottom no-repeat;
  background-size: cover;
  background-color: #103e5dff;
  }

  #splash-bar {
    background-color: #103e5dff;
    box-shadow: 0 8px 7px rgba(3, 3, 3, 0.4);
  }


  .kn-info-bar {
    background: black !important;
    box-shadow: none !important;
  }

  #forgot-pass {
    color:var(--fuscia-button) !important;
   }

  .remember {
    color:var(--fuscia-button) !important;
 
}

.earth-com {
  background: url(../svgs/earth-community-night.svg?v=2) no-repeat center;
  background-size: contain;
}


.city-image {
  background: url(../svgs/city-village-night.webp) no-repeat center;
  background-size: contain;
} */

/*
.loader {
  background: url('svgs/bottle-loader-night.svg') center no-repeat !important;
  box-sizing: border-box;
background-size: 38px;
}

.loader-spin {
  background: url('svgs/bottle-loader-night.svg') center no-repeat !important;
  box-sizing: border-box;
background-size: 38px;
}

  .virtue img {
    filter: invert(100%);
  }
*/

/* 
.my-ecobricks {

background: url(../webp/my-ecobricks-night.webp) no-repeat;
background-size: contain;
}

.help-validate {
  background: url(../webp/help-validate-night.webp) no-repeat;
  background-size: contain;

}

.log-ecobricks {
  background: url(../webp/log-ecobricks-night.webp) no-repeat;
  background-size: contain;

}

.biosphere {
  background: url(../webp/biosphere2.webp) no-repeat center bottom;
  background-size: contain;

} */


#booknotes-curtain {
  background: url(svgs/tractatus-mandala-full-grey.svg) center no-repeat;
  background-size: 30%;
  background-color: var(--slider);
  color: var(--drop-cap);
}