#uploadForm{
  display: none;
}

body, html{
  background-color: #FFC20A;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden; /* prevent horizontal scroll */
}

a:hover {
  color: #D63C36;
}

@font-face {
    font-family: EuclidFlex;
    src: url(../../font/EuclidFlex-Light.otf) format("opentype");
    font-weight: light;
}

@font-face {
    font-family: EuclidFlex;
    src: url(../../font/EuclidFlex-Medium.otf) format("opentype");
    font-weight: medium;
}

@font-face {
    font-family: EuclidFlex;
    src: url(../../font/EuclidFlex-Regular.otf) format("opentype");
    font-weight: regular;
}

@font-face {
    font-family: EuclidFlex;
    src: url(../../font/EuclidFlex-Bold.otf) format("opentype");
    font-weight: bold;
}

@font-face {
    font-family: EuclidFlex-Italic;
    src: url(../../font/EuclidFlex-RegularItalic.otf) format("opentype");
    font-weight: italic;
}

.euclid-bold{
 font-family: EuclidFlex;
 font-weight: bold
}

.euclid-regular{
 font-family: EuclidFlex;
 font-weight: regular
}

.euclid-medium{
 font-family: EuclidFlex;
 font-weight: medium
}

.euclid-regular-italic{
 font-family: EuclidFlex-Italic;
 font-weight: italic
}

.themed-grid-col {
/*  padding-top: .75rem;
  padding-bottom: .75rem;*/
/*  padding:1.75em;*/
/*  background-color: rgba(86, 61, 124, .15);
*/  border: 1px solid rgba(0, 0, 0, 1);
}

.btn-white {
  color: black;
  background-color: white;
  border-color: white;
}
.btn-white:hover {
  color: black;
  background-color: white;
  border-color: white;
}

.btn-green{
  background-color: #566456;
}

.btn-red{
  background-color: #dc3545;
  color: white;
}

.light-green-background{
  background-color: #1e9e62;
}

.green-background{
  background-color: #566456;
}

.beige-background{
  background-color:#ffe9a7; 
}

.teal-background{
  background-color: #3ab8b7;
}

.warm-red-background{
  background-color: #C1693C;
}

.soft-teal-background{
  background-color: #6C8E91;
}

.white-background{
  background-color: white;
}

.light-red-background{
  background-color: #ff5565;
}

.light-orange-background{
  background-color: #de875d; 
}

.red-text{
  color: #D63C36;
}

.black-text{
  color: black;
}

.blue-background{
  background-color:#0dcaf0;
}

.yellow-background{
  background-color:#EEDDAD;
}

.tomato-red-background{
  background-color:#C85A5A;
}

.sage-green-background{
  background-color:#8F9779;
}

.dark-background{
  background-color: #161616;
}

.red-text{
  color:#B32424;
}

.orange-background{
  background-color: #EC6146;
}

.white-text{
  color: white;
}

.black-text{
  color: black;
}

.grey-text{
  color: #555555;
}

.top-bottom-padding{
  padding-top:1rem;
  padding-bottom:1rem;
}

.extra-top-margin{
  margin-top: 10rem;
}

.special-extra-top-margin{
  margin-top: 5rem;
}

.no-bottom-padding{
  padding-bottom: 0;
}

.extra-top-padding{
  padding-top: 1rem;
}

.no-top-padding{
  padding-top: 0;
}

.no-border{
  border: none;
}

.two-col-text{
  font-size: 0.75rem;
}

.two-col-smaller-text{
  font-size: 0.75rem;
}

.one-col-text{
  font-size: 1rem;
}

.small-text{
  font-size: 0.5rem;
}

.medium-text{
  font-size: 0.75rem;
}

.medium-large-text{
  font-size: 0.85rem;
}

.input-text{
  font-size: 0.65rem;
}

.instruction-text{
  font-size: 0.5rem;
}

.logo-size{
  width:50%;
}

@media (min-width: 991px) { /*lg - Large - laptop */
  .logo-size{
    width:20%;
  }
  .two-col-text{
    font-size: 1rem;
  }
  .instruction-text{
    font-size: 1.0rem;
  }
  .two-col-smaller-text{
    font-size: 0.85rem;
  }
}

.no-underscore{
  text-decoration: none;
}

.no-padding{
  padding: 0;
}

.no-margin{
  margin:0;
}

.no-bottom-margin{
  margin-bottom: 0;
}

.lots-padding{
  padding: 2rem;
}

.many-padding{
  padding: 1rem;
}

.extra-padding{
  padding: 0.75rem;
}
.extra-left-right-margin{
  margin:0.01rem;
}

.extra-left-right-padding{
  padding-left: 0.05rem;
  padding-right: 0.05rem;
}

.some-extra-padding{
  padding:0.5rem;
}

.min-extra-padding{
  padding: 0.25rem;
}

.extra-right-padding{
  padding-right: 0.75rem;
}

.only-right-margin{
  right-margin: 0.75rem;
  left-margin: 0;
  top-margin: 0;
  bottom-margin: 0;
}

.extra-margin{
  margin: 0.75rem;
}

.extra-left-right-margin{
  margin-left: 2rem;
  margin-right: 2rem;
}

.little-left-right-margin{
  margin-left: 0.1rem;
  margin-right: 0.1rem;
}

.extra-left-padding{
  padding-left: 1rem;
}

.extra-left-right-padding{
  padding-left: 1rem;
  padding-right:1rem;
}

.extra-left-margin{
  margin-left: 2rem;
}

.extra-right-margin{
  margin: 0.75rem;
}

.min-top-bottom-margin{
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.min-extra-top-bottom-margin{
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
}

.extra-top-bottom-padding{
  padding-bottom: 3rem;
  padding-top: 3rem;
}

.min-padding{
  padding: 0.1rem;
}

.min-margin{
  margin: 0.5rem;
}

/* Mobile phones */
@media (max-width: 768px) {
    .min-margin {
        margin: 0.5rem 0rem;
    }
}

.full-width{
  width:100%;
}

.small-image{
  width:1.5rem;
}

.medium-image{
  width:10rem;
}

.large-image{
  width:15rem;
}

.fixed-height-key-ingredients, .fixed-height-key-steps{
  height:25%;
}

.fixed-height-main-dish{
  height:50%;
}

.image-container {
    object-fit: cover;
    position:relative;
    margin:0 auto;
    background-size:cover;
    width:100%;
    height:100%;
}

.text-vertical-center{
  line-height: 50%;
}

#my_current_exploration{
  background-color:#0dcaf0;
  padding:1rem;
}

#ingredients_title:hover, #ingredients_sources_title:hover, #cooking_methods_title:hover{
  color:white;
}

.disable-clicking{
  pointer-events: none;
}

.enable-clicking{
  pointer-events: auto;
}

.red-background{
  background-color: #dc3545;
}

.white-background{
  background-color: white;
}

.super-light-grey-background{
  background-color: lightgrey;
}

.light-grey-background{
  background-color: #576557;
}

.hide{
  display: none;
}
.break-text{
  word-wrap: break-word;
}

.break-all{
  word-break: break-all;
}

.short-width{
  width: 50%;
}

.progress-edit {
  display: flex;
  height: 1rem;
/*  overflow: hidden;
*/  font-size: 0.75rem;
  background-color: none;
  border-radius: 0.25rem;
}

.progress-bar-edit {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #dc3545;
  transition: width 0.6s ease;
}


.progress-bar-edit-white{
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
  color: black;
  text-align: left;
  padding-left: 1rem;
  white-space: nowrap;
  background-color: white;
  transition: width 0.6s ease;
}

.progress-bar-edit-grey{
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
  color: black;
  text-align: left;
  padding-left: 1rem;
  white-space: nowrap;
  background-color: lightgrey;
  transition: width 0.6s ease;
}

.progress-bar-edit-black{
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
  color: black;
  text-align: left;
  padding-left: 1rem;
  white-space: nowrap;
  background-color: black;
  transition: width 0.6s ease;
}

.progress-bar-edit-yellow{
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
  color: black;
  text-align: left;
  padding-left: 1rem;
  white-space: nowrap;
  background-color: #DEBB5D;
  transition: width 0.6s ease;
}

.progress-bar-edit-teal{
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
  color: #fff;
  text-align: left;
  padding-left: 1rem;
  white-space: nowrap;
  background-color: #003738;
  transition: width 0.6s ease;
}

.progress-bar-edit-vege-protein{
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: #28a745;
  text-align: center;
  white-space: nowrap;
  background-color: #28a745;
  transition: width 0.6s ease;
}

.bottom-white{
  background-color: white;
}

.embed-container { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden; 
  max-width: 100%; 
} 

.embed-container iframe, .embed-container object, .embed-container embed { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}

@media only screen and (max-width: 1000px) {
  .embed-container iframe, .embed-container object, .embed-container embed { 
    position: absolute; 
    top: 0; 
    left: -60rem; 
    width: 300vw; 
    height: 100%; 
  }
}

@media only screen and (max-width: 800px) {
  .embed-container iframe, .embed-container object, .embed-container embed { 
    position: absolute; 
    top: 0; 
    left: -70rem; 
    width: 400vw; 
    height: 100%; 
  }
}

@media only screen and (max-width: 600px) {
  .embed-container iframe, .embed-container object, .embed-container embed { 
    position: absolute; 
    top: 0; 
    left: -25rem; 
    width: 350vw; 
    height: 100%; 
  }

  #intro{
    display: none;
  }

  .special-extra-top-margin{
    margin-top: 0rem;
  }

  .extra-right-padding{
    padding-right: 0.15rem;
  }
}

.sticky-logo {
    position: fixed;
    bottom: 10px;
    right: 20px;
    width: 50px; /* Adjust size for responsiveness */
    height: auto;
    z-index: 1000; /* Ensure it stays on top */
}

@media (max-width: 768px) {
    .sticky-logo {
        right: 30px;
        width: 60px; /* Smaller size for mobile devices */
    }
}

.sticky-logo-left {
    position: fixed;
    bottom: 10px;
    right: 85px;
    width: 50px; /* Adjust size for responsiveness */
    height: auto;
    z-index: 1000; /* Ensure it stays on top */
}

@media (max-width: 768px) {
    .sticky-logo-left {
        width: 60px; /* Smaller size for mobile devices */
        right: 95px;
    }
}

.hide-overflow-text {
  overflow: hidden;
}

button:hover .overlay-text {
    color: black !important;
    transition: color 0.3s ease;
}


.circle-Adaptation-category {
  border: 6px solid #018bd3;
  background-color: rgba(1, 139, 211, 0);
}

.circle-Energy-category {
  border: 6px solid #00926d;
  background-color: rgba(0, 146, 109, 0);
}

.circle-Home-category {
  border: 6px solid #b7006c;
  background-color: rgba(183, 0, 108, 0);
}

.circle-Transport-category {
  border: 6px solid #d3072a;
  background-color: rgba(211, 7, 42, 0);
}

.circle-Food-category {
  border: 6px solid #3c3c3c;
  background-color: rgba(60, 60, 60, 0);
}

.circle-Consumption-category {
  border: 6px solid #005f27;
  background-color: rgba(0, 95, 39, 0);
}

.circle-Community-engagement-category {
  border: 6px solid #322783;
  background-color: rgba(50, 39, 131, 0);
}

.circle-Nature-growing-category {
  border: 6px solid #891516;
  background-color: rgba(137, 21, 22, 0);
}

.circle-Advocacy-category {
  border: 6px solid #00497e;
  background-color: rgba(0, 73, 126, 0);
}

.circle-Waste-recycling-category {
  border: 6px solid #00a7e6;
  background-color: rgba(0, 167, 230, 0);
}

.circle-Education-communication-category {
  border: 6px solid #e6007e;
  background-color: rgba(230, 0, 126, 0);
}


.circle-Adaptation-category, .circle-Energy-category, .circle-Home-category, 
.circle-Transport-category, .circle-Food-category, .circle-Consumption-category,
.circle-Community-engagement-category, .circle-Nature-growing-category, .circle-Advocacy-category, 
.circle-Waste-recycling-category, .circle-Education-communication-category{
  border-radius: 50%;              /* circle shape */
  width: 60px;                     /* adjust size */
  height: 60px;                    /* must match width */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0.2rem;   
  color: black;                  /* text color matches border */
}

.white-circle {
  background-color: white;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0.2rem; 
}

.black-circle {
  background-color: black;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0.2rem; 
}

.show-detail {
  max-height: 2000px !important;
  opacity: 1 !important;
}


.text-Adaptation-category {
  color: #018bd3;       
}

.border-Adaptation-category {
  border: 5px solid #018bd3;
}

.text-Energy-category {
  color: #00926d;     
}

.border-Energy-category {
  border: 5px solid #00926d;
}

.text-Home-category {
  color:#b7006c;      
}

.border-Home-category {
  border: 5px solid #b7006c;
}

.text-Transport-category {
  color: #d3072a;      
}

.border-Transport-category {
  border: 5px solid #d3072a;
}

.text-Food-category {
  color: #3c3c3c;     
}

.border-Food-category {
  border: 5px solid #3c3c3c;
}

.text-Consumption-category {
  color: #005f27;    
}

.border-Consumption-category {
  border: 5px solid #005f27;
}

.text-Community-engagement-category {
  color: #322783;     
}

.border-Community-engagement-category {
  border: 5px solid #322783;
}

.text-Nature-growing-category {
  color: #891516;     
}

.border-Nature-growing-category {
  border: 5px solid #891516;
}

.text-Advocacy-category {
  color: #00497e;     
}

.border-Advocacy-category {
  border: 5px solid #00497e;
}

.text-Waste-recycling-category {
  color: #00a7e6;      
}

.border-Waste-recycling-category {
  border: 5px solid #00a7e6;
}

.text-Waste-recycling-category {
  color: #e6007e;       
}

.border-Waste-recycling-category {
  border: 5px solid #e6007e;
}

.quote-box {
  background-color: #FFD966; /* light gray background */
  border-left: 4px solid #ffcc00; /* optional accent line */
  padding: 5px 20px 3px 20px;
  margin: 20px 0px;
  border-radius: 8px;
  user-select: text; /* allow text selection */
  pointer-events: none; /* makes the box itself non-clickable */
}

@media (max-width: 991.98px) {
  .climate-action-tagline-col {
    padding-left: 1.5rem !important;
  }
}

.category-legend-circle {
  border-radius: 50%;
  width: 75px;
  height: 75px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: transparent;
  color: black;
  font-family: EuclidFlex;
  font-weight: bold;
  font-size: 10px;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 6px;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow: hidden;
  border-width: 6px;
  border-style: solid;
}

.category-legend-circle { cursor: pointer; }
.category-legend-circle.active.circle-Adaptation-category        { background-color: #018bd3 !important; color: white !important; }
.category-legend-circle.active.circle-Energy-category            { background-color: #00926d !important; color: white !important; }
.category-legend-circle.active.circle-Home-category              { background-color: #b7006c !important; color: white !important; }
.category-legend-circle.active.circle-Transport-category         { background-color: #d3072a !important; color: white !important; }
.category-legend-circle.active.circle-Food-category              { background-color: #3c3c3c !important; color: white !important; }
.category-legend-circle.active.circle-Consumption-category       { background-color: #005f27 !important; color: white !important; }
.category-legend-circle.active.circle-Community-engagement-category { background-color: #322783 !important; color: white !important; }
.category-legend-circle.active.circle-Nature-growing-category    { background-color: #891516 !important; color: white !important; }
.category-legend-circle.active.circle-Advocacy-category          { background-color: #00497e !important; color: white !important; }
.category-legend-circle.active.circle-Waste-recycling-category   { background-color: #00a7e6 !important; color: white !important; }
.category-legend-circle.active.circle-Education-communication-category { background-color: #e6007e !important; color: white !important; }

.category-legend-circle:not(.active):hover.circle-Adaptation-category        { background-color: rgba(1, 139, 211, 0.7) !important; }
.category-legend-circle:not(.active):hover.circle-Energy-category            { background-color: rgba(0, 146, 109, 0.7) !important; }
.category-legend-circle:not(.active):hover.circle-Home-category              { background-color: rgba(183, 0, 108, 0.7) !important; }
.category-legend-circle:not(.active):hover.circle-Transport-category         { background-color: rgba(211, 7, 42, 0.7) !important; }
.category-legend-circle:not(.active):hover.circle-Food-category              { background-color: rgba(60, 60, 60, 0.7) !important; }
.category-legend-circle:not(.active):hover.circle-Consumption-category       { background-color: rgba(0, 95, 39, 0.7) !important; }
.category-legend-circle:not(.active):hover.circle-Community-engagement-category { background-color: rgba(50, 39, 131, 0.7) !important; }
.category-legend-circle:not(.active):hover.circle-Nature-growing-category    { background-color: rgba(137, 21, 22, 0.7) !important; }
.category-legend-circle:not(.active):hover.circle-Advocacy-category          { background-color: rgba(0, 73, 126, 0.7) !important; }
.category-legend-circle:not(.active):hover.circle-Waste-recycling-category   { background-color: rgba(0, 167, 230, 0.7) !important; }
.category-legend-circle:not(.active):hover.circle-Education-communication-category { background-color: rgba(230, 0, 126, 0.7) !important; }