/* Import the "Permanent Marker" font */
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

  :root {
    /*--pico-border-radius: 2rem;*/
    --pico-typography-spacing-vertical: 1.5rem;
    --pico-form-element-spacing-vertical: 1rem;
    --pico-form-element-spacing-horizontal: 1.25rem;
  }
  
  
  
  
  .full-width {
      width: 100%;
  }
  
  .right {
      float: right;
      clear: both;
      width: 50%;
      margin: 0 0 0 1em;
  }
  
  .left {
      float: left;
      clear: both;
      width: 50%;
      margin: 0 1em 0 0 ;
  }
  
  .upper{
      text-transform: uppercase;
  }
  
  .rounded {
      border-radius: 1em;
  }
  /* fixing lists when floating elements */
  ol, ul {
      display: flow-root;
  }
  
  .bg-primary{
      background: var(--pico-primary-border);
  }
  
  .text-primary{
      color: var(--pico-primary-border);
  }
  

  .button , button {
    border-radius:2em;
    --pico-font-weight: 700;
    /*margin: 1em 0;*/
  }
  
  .topbuttons p{
      display: flex;
      flex-wrap: wrap;
  }
  .topbutton{
  	margin: 0.5em;
  	width: 23%;
	min-width: fit-content;
  }
  
  input, select {
    border-radius:2em;
  }


.date-nav a.button {
/*font-size: 0.51em;*/
}

.sidenav {
  display: none;
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  /*background-color: var(--pico-secondary-hover-background);;*/
  background-color: var(--pico-card-background-color);
  overflow-x: hidden;
  padding-top: 60px;
}

.sidenav a{
  /*padding: 8px 8px 8px 32px;*/
  padding: .2em .2em .2em 1em;
  text-decoration: none;
  font-size: 25px;
  color: var(--pico-primary-border);
  display: block;
}

span.nav_title {
    padding: .2em .2em .2em 1em;
    /*font-weight: 700;*/
    font-size: 1.2em;
    color: var(--pico-secondary);
    display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.foghero{
padding:  2em 3em;
background-image: url(/images/focus-roi-fog-report.jpg);
background-size:cover;
}
.foghero h1, .foghero h2{
color: white;
    text-shadow: 1px 1px gray;
}

span.fogcredit {
    font-size: .5em;
    float: right;
}

@media screen and (max-width: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
  .topbutton { width: 43%;}
  
  .right,.left {
      float: unset;
      clear: uunset;
      width: 100%;
      margin: initial;
  }

}
/*.dark {*/
/*        background-color: var(--pico-contrast);*/
/*        margin: 0 calc(50% - 50vw) 1em calc(50% - 50vw);*/
/*        padding: 1em 0;*/

/*        */*/
/*}*/

/*.dark h1,.dark h2, .dark h3, .dark p {*/*/
/*    color:var(--pico-primary-focus);*/
/*}*/

.logo{
	    max-width: 15vw;
	    min-width: 100px;

	    }
img.logo {
	    /*filter: invert(1);/* invert on dark background*/   
}

.date-nav { display: flex; justify-content: space-between; margin: 1em 0; }
.inactive { pointer-events: none; opacity: 0.5; }

.day{
    /*background-color:#d6f7e8;*/
}
/*   .available {*/
/*      /*background-color: var(--pico-form-element-valid-border-color);*/*/
/*      background: var(--pico-secondary);*/
/*      text-align: center;*/
/*      border-right: solid 2px #e7eaf0;*/
/*      border-right: var(--pico-border-width) solid var(--pico-table-border-color)*/
/*      }*/
/*  */
/*  .booked {*/

/*     text-align: center;*/*/
/*     background-color: var(--pico-primary-background);*/
/*     color: #fff;*/
/*  }*/
/*/* NAV + Hamburger */*/

/* Default menu item styles */
.menuItems {
display: flex;
gap: 1rem;
list-style: none;
padding-left: 0;
}

/* Navigation items on larger screens */
.menuItems {
display: flex;
gap: 1rem;
list-style: none;
padding-left: 0;
}



article.login {
max-width: 500px;
margin: auto;
}

#modalDescription {
white-space: pre-wrap; /* Preserve line breaks and whitespace */
word-wrap: break-word; /* Handle long words or URLs gracefully */
}


/*#taskTable {*/

/*}*/
 
/*#taskTable table tbody, */
/*#taskTable table thead {*/
/*    display: grid;*/
/*}*/

/*#taskTable table, th, tr {*/
/*  border: 1px solid black;*/
/*}*/
/*#taskTable table tbody {*/
/*  display: grid;*/
/*  grid-template-columns: repeat(4, 1fr);*/
/*}*/

.hero {
    background-color: lightyellow;
    text-align: center;
    padding: 1em;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
	margin-bottom: 1em;
}
.hero h1 {
    font-family: Fira Sans, sans-serif;
    font-size: 3em;
}




.stickyold {
    width: 40vw;
    height: 40vw;
    max-width: 400px;
    max-height: 400px;
    background: lightyellow;
    padding: 10px;
    margin: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    /* position: absolute; */
    transition: all 0.3s ease;
    touch-action: none;
    z-index: 1;
    overflow: hidden;
    display: inline-block;
    flex-direction: column;
    font-family: 'Permanent Marker', cursive; /* Apply the custom font */
    font-weight: 400;
      font-style: normal;
}

/* Container to hold the sticky notes */
.sticky-container {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap onto the next row */
    gap: 20px; /* Space between sticky notes */
    justify-content: space-around; /* Space the sticky notes evenly */
    margin: 20px auto; /* Center the container */
}


.sticky {
    width: 40vw;
    height: 40vw;
    max-width: 400px;
    max-height: 400px;
    background: lightyellow;
    padding: 1em;
    margin: auto;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    touch-action: none;
    z-index: 1;
    overflow: hidden;
    display: flex; /* Change to flex to allow content to adapt */
    flex-direction: column;
    
    justify-content: center; /* Center text vertically */
    font-style: normal;
    text-align: center; /* Center the text inside the sticky note */
}

.sticky.marker{
    align-items: center; /* Center text horizontally */
    font-family: 'Permanent Marker', cursive;
    font-weight: 400;
    font-size: 2.2vw; /* Make the font size responsive to the container's width */
}
/* Green Sticky Note */
.sticky.green {
    background: lightgreen;
}

/* Blue Sticky Note */
.sticky.blue {
    background: lightblue;
}

/* Red Sticky Note */
.sticky.red {
    background: lightcoral;
}

/* Purple Sticky Note */
.sticky.purple {
    background: lavender;
}