/*LIGHT STYLE SHEET*/

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


   :root {

    --main-background: white;
    --text-color: #242424;
    --same: white;
    --subdued-text: #454545;
    --logo-color: #666;
    --top-header: #fff;
    --top-header-main: #ffffffbf;
    --header-accent: rgb(133, 133, 133);
    --accordion-background: #f6f6f6;
    --accordion-highlight: #fff;
    --advanced-background: #bad0d8;


    --settings-background: rgb(213, 213, 213);
    --settings-border: rgb(220, 220, 222);
    --emblem-pink: #fc02fc;
    --emblem-pink-over: #bb02bb;
    --emblem-blue: #329bb8;
    --emblem-blue-over: #23748a;
    --emblem-green: #008000;
    --emblem-green-over: #0ca70c;
    --emblem-orange: #fc8302;
    --emblem-orange-over: #d46e00;
    --toggle-off: #ccc;
    --selector: rgb(149, 149, 149);
    --selector-highlight: rgb(203, 203, 203);
    --selector-highlight-over: rgb(224, 224, 224);
    --divider-line:  rgb(206, 205, 205);
    --sub-menu:  rgb(179, 179, 179);
    --modal-background: rgb(231, 231, 231);
    --search-row: rgba(255, 255, 255, 0.192);
    --slide-overlays: rgb(225, 225, 225);
    --side-overlays: rgb(225, 225, 225);
    --slide-highlight: rgb(212, 212, 213);
    --show-hide: rgba(225, 225, 225, 0.809);
    --darker:rgba(0, 0, 0, 0.07);
    --lighter: rgba(0, 0, 0, 0.02);
    --ecobrick-preview: rgba(255, 255, 255, 0.836);
    --x-button-over: rgb(146, 146, 146);
    --input-background: rgb(229, 213, 241);
--friends-chat: #b1d9e3;
--my-chat: #dac3de;
       --strong-back: #6d6d6d;
       --course-module: rgb(213, 213, 213);
       --course-module-over: rgb(255, 250, 250);


    --form-background: rgb(223, 231, 233);

      --login-green: #2DB337;
  --login-green-highlight: #43CC32;


  --gallery:  rgb(222, 223, 236);
  --yellow-alert: #fbe9c8;

  --table-background-1: #f2f2f2;

  --table-background-2: #dad9d9;

  --table-background-hover: #bcbcbc;

  --table-background-heading: #2A91DA;


  /*Colors for messenger convo icons*/


    --color-0: #d1628a;  /* Darker pink */
    --color-1: #e6934a;  /* Darker peach */
    --color-2: #e6e06a;  /* Darker yellow */
    --color-3: #9ccd66;  /* Darker green */
    --color-4: #66c5d9;  /* Darker teal */
    --color-5: #7c66d9;  /* Darker purple */
    --color-6: #e66aaa;  /* Darker pinkish */
    --color-7: #667ed9;  /* Darker blue */
    --color-8: #66a0d9;  /* Darker cyan */
    --color-9: #d99866;  /* Darker orange */

       /*BOOK NOTES */

       --deeper-accent-color: rgb(225, 225, 225) ;
       --slider: rgb(228, 228, 228);
       --header-footer: #e7e7e7;
       --drop-cap: rgb(63, 63, 63);



    --h1: black;
    --general-background: rgb(252, 252, 252);
    --general-background-highlight: rgb(234, 234, 234);
    --deeper-accent: rgb(148, 148, 148);
    --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;

   }


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


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

       #book-box a {

           background: url(../svgs/content-arrow.svg) left center no-repeat var(--background-color);
           background-size: 30px;
           background-position-x: 18px;
       }

       #book-box a:hover {

           background: url(../svgs/content-arrow-45.svg) left center no-repeat var(--deeper-accent-color);
           background-size: 30px;
           background-position-x: 18px;
       ;
       }








   .dark-only {display:none;}

.light-only {display:block;}

.side-menu-button {
    /*background: url(../svgs/settings-icon-dark.svg) no-repeat;*/
    background: url(../icons/main-menu.svg) no-repeat;
    background-size: contain;
}

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

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

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

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

    background-size: contain;
}

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



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

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

.tour-slide3 {
  background: url(../svgs/authenticated-ecobricks-night.svg) no-repeat bottom;
  background-size: contain;
}

.tour-slide4 {
  background: url(../svgs/earth-service-animation.svg) no-repeat bottom;
  background-size: contain;
}

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

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


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

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

.featured-content-3 {
  background: url(../svgs/ecobrick-village-vision-2024-day.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:25px;
  margin-bottom:-10px;

}

#main {
  background: url(../svgs/ocean-footer-background-day.svg) repeat-x bottom;
  background-size: contain;
}

.vision-landscape {
  background: url(../svgs/ocean-footer-day.svg?v=4) no-repeat bottom;
  background-size: cover;
  /* background-color: #10ffff; */

}

  .open-books-top {
      background: url(../pngs/openbooks.png) no-repeat center;
      background-size: contain;
      }

@media screen and (min-width: 700px) {
.side {
  background: rgb(212,212,212);
	background: linear-gradient(126deg, rgba(212,212,212,1) 10%, rgba(251,251,251,1) 71%);

}
}

#header-content-block {
  background-color: #59c1fdb2;

}

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

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

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

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

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

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

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

}

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



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

}


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

}

/* #logo-ecobricks-org, #logo-global-ecobrick-alliance {
  fill: #666;
  transition: 0.5s;
} */

/*
#gea-logo {
  background: url(logos/gea-logo-full-light.svg) no-repeat;
  background-size: contain;
} */


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

#top-down-button:hover {
  background: url(../svgs/down-arrow.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;
}

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

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

          /* .bottom-scope  {
            background-image: linear-gradient(var(--general-background),var(--general-background), #30ffff);
          }


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



  .splash-content-block {
    background: url(../svgs/brik-view-light.svg?v=2) bottom no-repeat;
    background-size: cover;
    background-color: #2A91DA;

    }

    #splash-bar {
      background-color: #2A91DA;
      box-shadow: 0 8px 7px rgba(85, 84, 84, 0.4);
    }


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

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



    .loader {
      background: url(../svgs/bottle-loader.svg) center no-repeat;
      background-size: 38px;
    }




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

      }

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

      }

 */

/* light.css
light.css
--icon-filter_hover: invert(60%);*/

[part="permanentLabel"] {
  font-size: smaller !important;
}

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

.form-container .splash-heading {
  color: var(--text-color)!important;
  text-shadow: none !important;
}


      .main-landing-graphic {
      background: url(../svgs/richard-and-team-day.svg) no-repeat center bottom;
      background-size: contain;
      }

      .biosphere {
        background: url(../webps/biosphere-day.webp) no-repeat  center bottom;
        background-size: contain;
        margin: -100px auto -40vh auto;
        opacity: 0.8;

      }


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




.clouds-new2  {

  background: url(../svgs/cloud-top-down.svg)  repeat-x center top;
  background-size: contain;

      }

.log-ecobrick {
  background: url(../svgs/step1.svg) no-repeat center bottom;
  background-size: contain;
}


.log-step-2 {
      background: url(../svgs/step2-log-project.svg) no-repeat center;
      background-size: contain;
      }

 .log-step-3 {
      background: url(../svgs/step3.svg?v=3) no-repeat center;
      background-size: contain;
      }

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


    .city-image {
      background: url(../svgs/city-village-day.svg?v=2) no-repeat center;
      background-size: contain;
    }


    .my-ecobricks {

      background: url(../svgs/my-ecobricks-day.svg) no-repeat center;
      background-size: contain;
      }

       .signup-team {

      background: url(../svgs/signup-team-day.svg) no-repeat center;
      background-size: contain;
      }

        .credentials-banner {
  background: url(../svgs/credentials-banner-day.svg?v=2) no-repeat center;
  background-size: contain;
}

.snap-ecobrick {
  background: url(../svgs/step2.svg) no-repeat center bottom;
  background-size: contain;
}


.regen-top {
      background: url(../svgs/regen-top-simple.svg) no-repeat center;
      background-size: contain;
      }

  .earthen-service {
      background: url(../svgs/earth-service-animation.svg) no-repeat center;
      background-size: contain;
      }



.message-birded {
      background: url(../svgs/message-sent-day.svg) no-repeat center;
      background-size: contain;
      }

 .bug-reported {
      background: url(../svgs/bug-report-night.svg) no-repeat center;
      background-size: contain;
      }

.welcome-casandra {
      background: url(../svgs/welcome-casandra-day.svg) no-repeat center;
      background-size: contain;
      }

  .log-one-ecobrick {
  background: url(../svgs/log-ecobrick-day.svg) no-repeat center bottom;
  background-size: contain;
}

.offsetting {
background: url(../svgs/eco-accounting-icon-from-ecobricks-org.svg) no-repeat center;
      background-size: contain;
  }

    .brikchain {
background: url(../webps/brikchain-450px.webp) no-repeat center;
      background-size: contain;
  }

    .gea-logo {
background: url(../svgs/gea-logo-top-day.svg) no-repeat center;
      background-size: contain;
  }


    .login-top {
      background: url(../svgs/gobrik-login-banner-day.svg) no-repeat center;
      background-size: contain;
      }



  .gobrik-app-logo {
      background: url(../svgs/gobrik-logo.svg) no-repeat center;
      background-size: contain;
      }

/* Light mode pastel colors */