html { 
	font-size: 1.125em; 
	font-family: "Zilla Slab", "Courier New", serif;
    scroll-padding: 80px;
}

body { 
	padding: 1rem; 
	padding-top: 0;
	margin-top: 0;
/*	background-color: white;*/
/*    background-color: rgb(255, 255, 241);*/
	opacity: 1;
	background-image: radial-gradient(#bfb9b2 0.8500000000000001px, #ffffff 0.8500000000000001px);
	background-size: 17px 17px;
}

a:link, a:visited {
	font-family: "Outfit", "Futura", sans-serif;
	color: black;
	text-decoration: underline;
    font-size: 1em;
}

a:hover {
    text-decoration: none;
}


p {
	font-size: 1em;
}

/*
.right-align{
    text-align: right !important;
}
*/

.big-bold {
    font-size: 1.6em;
    padding-top:.5em;
    padding-bottom:0;
    margin:0;
    word-break: normal;
    font-family: "Outfit", Futura, sans-serif;
    font-weight: 600;
}

.suns {
  font-size: 1em;
  padding-top:.5em;
  padding-bottom:0;
  margin:0;
  word-break: normal;
  /* font-family: "Outfit", Futura, sans-serif; */
  font-weight: 600;
}

.gray {
    color: dimgray;
}

h2{
	font-size: 1em;
	/* background-color: white; */
	padding-bottom: 1em;
	margin: 0em;
	border-bottom: 2px solid black;
    font-family: "Zilla Slab", "Courier New", serif;
}
h3 {
    font-size: 1.6em;
    padding-top:.5em;
    padding-bottom:0;
    margin:0;
    word-break: normal;
    font-family: "Outfit", "Futura", sans-serif;
    font-weight: 600;
}
h4{
	font-size: 1.6em;
	/* background-color: white; */
	padding-top:0;
    padding-bottom:.5em;
	margin-bottom: 0.5em;
    margin-top:1em;
	border-bottom: black 2px solid ;
    font-family: "Outfit", "Futura", sans-serif;
    font-weight: 600;
}
h5{
    font-size: 1em;
	/* background-color: white; */
	padding-bottom: 0;
	margin: 0em;
/*	border-bottom: 2px solid black;*/
    font-family: "Outfit", "Futura", sans-serif;
}

ul.help{
    margin-bottom: 1em;
    margin-top: 1em;
    padding-left: 0;
    list-style: none;
}

ul.help ul{
    margin-top: 1em;
    padding-left: 2em;
    list-style: none;
}

ul.help ul li::before {
    content: '»';
    display: inline-block; /* Keeps the bullet inline */
    width: 1em; /* Reserve space for the bullet */
    margin-left: -1em; /* Align the bullet to the left of the text */
}
ul.help ul li {
    margin-bottom: 1em;
}

ul.help li {
    margin-bottom: 2em;
/*    list-style: none;*/
}

li.help::last-child{
    margin-bottom:2em;
}
.box {
	background-color: rgb(255, 255, 241);
/*    background-color:white;*/
	color: black;
	padding: 1rem;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1rem;
	border: 1px solid rgb(179, 204, 164);
	border-radius: 5px;
}

.clear{
  background-color: transparent;
  border: none;
}

.wall {
    background-color: #E7F0FE;
    border: 1px solid #5897fb;
}

.alertBox{
	display: grid;
	gap: 2em;
}

.page-head{
	display: grid;
	gap: 2em;
    grid-template-columns: repeat(2, 1fr);
	grid-auto-flow: column;
}

.border-bottom{
    border-bottom: 2px solid black;
}
.session-alertBox{
	/* display: grid; */
	gap: 1em;
    background-color: rgb(213, 221, 176);
    border-radius: 5px;
    border: 1px solid rgb(179, 204, 164);
    padding: 1rem;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1rem;
    font-weight: 600;
    z-index: 999;
    position: relative;
}
.session-errorBox{
/*    display: grid;*/
    gap: 1em;
    background-color: #ffdc9d;
    border-radius: 5px;
    border: 1px solid #ff9000;
    padding: 1rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    font-weight: 600;
    z-index: 999;
    position: relative;
} 

.adminMode {
   	display: grid;
	gap: 1em;
  background-color: #dec5ce;
  border: 1px solid #ba8398;
    /* background-color: #f8f8b0; */
    border-radius: 5px;
    /* border: 1px solid #b3cca4; */
    padding: 1rem;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1rem;
    font-weight: 600;
    box-shadow: 0px 0px 8px 2px rgba(204,164,179,0.2);
}

.note{
  /* display: grid; */
  gap: 1em;
  background-color: #fffff8;
  border: 1px solid #ba8398;
    /* background-color: #f8f8b0; */
    border-radius: 5px;
    /* border: 1px solid #b3cca4; */
    padding: 1rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
    font-weight: 400;
}

.expand-small{
	margin-top: 1em;
}

.two-up{
	margin-bottom: 2em;
}

.three-up{
	display: grid;
	gap: 3em;
    grid-template-columns: repeat(3, 1fr);
	grid-auto-flow: column;
/*    text-align: center;*/
}

.uneven {
    display: grid;
	grid-template-columns: min-content;
}

.v-align-center{
	display: flex;
	align-items: center;
    padding-right: 1rem;
}
.v-align-top{
  display: block;
  align-items: top;
    padding-right: 1rem;
}
.h-align-center{
	display: flex;
	margin: auto;
}

.four-up{
	display: grid;
	gap: 1em;
	grid-auto-flow: column;
}
.six-up {
	display: grid;
	gap: 1em;
	grid-template-columns: repeat(6, 1fr); 
	grid-auto-flow: column;
}
.cards { 
/*	background-color: rgba(213, 221, 176,.5);*/
/*    background-color: rgb(255, 255, 241);*/
/*    background-color: white;*/
    background-color: rgba(179, 204, 164,.125);

    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
	color: black;
	padding: 1rem;
	/*height: 4rem;*/
/*	border: 3px solid rgb(179, 204, 164);*/
    border-radius: 10px;
}

.weekend {
/*	background-color: rgba(179, 204, 164, .125);*/
    background-color: rgba(179, 204, 164,.375);

/*	border: 3px solid rgb(179, 204, 164);*/
}

.today{
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
    border: black solid 2px;
}

.shifts {
/*	background-color: rgb(255, 255, 241);*/
	background-color: rgba(255,255,248,1.00);
	margin: 1em auto;
	padding: .5em;
	
	box-shadow: 0px 2px 4px 0px inset rgba(0,0,0,0.2);
    border:black solid 1px; 
	font-family: "Zilla Slab", "Courier New", serif;
	text-decoration: none;
	overflow-wrap: break-word !important;
	word-wrap: break-word !important;
	hyphens: auto;
	display: block;
    border-radius:0px;
}

.open, .new {
	background-color: rgb(254, 254, 200);
    border:none;
	border-top: 3px solid rgb(255, 165, 0) !important;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
    font-size: 1em;
 
/*    text-decoration: none !important;*/

}
.open:hover, .new:hover {
	background-color: rgb(254, 254, 163);
	box-shadow: none;
}

.no-underline {
    text-decoration: none !important; /* Ensures the stars are not underlined */
    display: inline-block; /* Ensures the stars still remain within the yellow box */
}

/*
.new {
	background-color: rgba(244,251,254,1.00);
    border:none;
	border-top: 2px solid #5897fb !important;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
    font-size: 1em;
}
.new:hover{
    background-color:rgba(216,240,251,1.00);
    box-shadow: none;
}
*/

.myShift{
/*   background-color:rgba(244,251,254,1.00); rgb(254, 250, 237);*/
   border: 2px solid black; /*#5897fb;*/
    background: white;
    box-shadow: 0px 0px 6px 5px rgba(254,254,200,1);
}
.myShift:hover{
/*   background-color:rgba(244,251,254,1.00); rgb(254, 250, 237);*/
/*    border:black dotted 2px; 5897fb*/
}

.highlight{
	background-color: rgb(254, 254, 200);
}

.isActive {
    background-color: rgb(213, 221, 176);
    border: 2px solid rgba(135,174,111,1.00);
    border-radius: 5px;
    padding: .5em;
    font-family:  "Outfit", "Futura", sans-serif;
    font-weight: 600;
    vertical-align:middle;
    font-size: .75rem !important;
    box-shadow: 0px 0px 8px 4px rgba(135,174,111,0.2);
}
.onAlert{
    background-color: rgba(255,220,157,1.00);
    padding: .5em;
    margin-bottom:1em;
    border-radius: 5px;
    border: 2px solid rgba(255,144,0,1.00);
   font-family: "Outfit", "Futura", sans-serif;
    font-weight: 600;
    vertical-align:middle;
    text-align:right;
    font-size: .75rem !important;
    box-shadow: 0px 0px 8px 4px rgba(255,144,0,0.2);
    text-wrap: nowrap;
}

.inline {
    display: inline-block;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


.time {
/*	background-color: rgb(254, 254, 200);*/
	border-bottom: 1px solid black !important; /*rgb(179, 204, 164)*/
/*	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);*/
    font-family: "Outfit", "Futura", sans-serif;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    font-size: 1em;
    text-decoration: none !important;
    margin-bottom: 0.5em;
}

.calendarbox {
	width:100%;
}

.week {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}
.legend {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}

.one-column {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
/*  gap: 1rem;*/
    padding: 1em;
    border-bottom: 1px solid black;
}

/* Remove bottom border for the last .three-column element */
.one-column:last-child {
    border-bottom: none;
}

.two-column {
  max-width: 100%;
  margin: 0;
  display: grid;
/*  gap: 1rem;*/
    padding: 1em 0;
/*    border-bottom: 1px solid black;*/
}
.search-bar {
  max-width: 100%;
  margin: 0;
  display: grid;
/*  gap: 1rem;*/
    padding: 0 0;
/*    border-bottom: 1px solid black;*/
}
.three-column {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
/*grid-template-columns: auto 1fr 1fr;*/
/*  gap: 1rem;*/
    padding: 1em;
    border-bottom: 1px solid black;
}

/* Remove bottom border for the last .three-column element */
.three-column:last-of-type {
    border-bottom: none !important;
/*    background-color:red ;*/
}

.three-column-email {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
/*grid-template-columns: 1.5fr 0.75fr 0.75fr;*/
/*  gap: 1rem;*/
    padding: 1em;
    border-bottom: 1px solid black;
}

/* Remove bottom border for the last .three-column element */
.three-column-email:last-child {
    border-bottom: none !important;
/*    background-color:red ;*/
}

.break-all {
  word-break: break-all;  /*Ensures long content breaks appropriately */
}
/* Remove bottom border for the last .three-column element */
form.three-column:last-child {
    border-bottom: none !important;
/*    background-color:red !important;*/
}


.five-column {
  max-width: 100%;
  margin-bottom: 0;
  display: grid;
/*  gap: 1rem;*/
    padding: 1.5em 1em 0 1em;
/*    border-bottom: 1px solid black;*/
}

.six-column {
  max-width: 100%;
  margin-bottom: 0;
  display: grid;
/*  gap: 1rem;*/
    padding: 1.5em 1em 0 1em;
/*    border-bottom: 1px solid black;*/
}

.table-header,.table-header-email{
    display:none;
}
.table-break{
    display: inline-block;
    clear: both;
}

.table-numbers {
    text-align:left;
/*    margin-top: 1rem;*/
}
.list-header {
        visible:true;
        margin-top:5rem;
}

.jump-to-today {
        visible:true;
        margin-top:5rem;
}

.hide-for-small{
    display: none;
}
.center-content{
	max-width:800px;
	margin: 0 auto;
}
   
  
.calnav {
	/* background-color: white; */
	margin-top: 1em;
	margin-bottom: 1em;
	padding: .5em;
	/* height: 3em; */
	width: auto;
	display: grid;
	font-size: .75em;
    font-family: "Outfit", "Futura", sans-serif;
 }
 
 .prev {
	display: inline-block;
	float: left;
 }
 .next{
	 display: inline-block;
	 float: right;
 }
 .center {
	 /* display: inline-block; */
	 margin: 0 auto;
	 width: 100%;
 }
 
.calnav {
	 grid-template-columns: repeat(3, 1fr);
	 grid-auto-flow: column;
 }
 .calnav_center{
	 text-align: center;
 }
 .calnav_right{
	 text-align: right;
 }


.clear-float {
/*    clear: both;*/
    float: none;
    display:inline-flex;
}

.page{
    margin-top: 1em;
}
 .right {
        text-align: right;
    }

.comments {
    padding-left: 1.5em;
}

.comment{
    margin-left: -1em;
    padding-left: 1em;
    border-left: 1px solid #cfcfcf;
}

.counter{
    font-size: .75rem;
    color: #666666;
    margin-top:0rem;
    text-align: right;
}
  
.wall-post{
        margin-top:2rem;
        margin-bottom:5rem;
}
@media (min-width : 1200px) {
     .right-align{
    text-align: right !important;
    }
	.week {
		grid-template-columns: repeat(7, minmax(0, 1fr));
		grid-auto-flow: column;
		max-width: inherit;
	}
    

	.alertBox{
		grid-template-columns: repeat(2, 1fr); 
		grid-auto-flow: column;
	}
    
    .two-up{
	margin-bottom: auto;
    }
    
    .comments{
        padding-left: 3em;
        border-left: 1px black;
    }
    .jump-to-today {
        display:none;
}
    
  

}

@media (min-width : 1000px){
   .legend {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-flow: column;
    max-width: inherit;
    }
}

@media (min-width : 750px) {
   .three-column-email {
        max-width: 100%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1.5fr 0.75fr 0.75fr;
        grid-auto-flow: column;
    /*  gap: 1rem;*/
        padding: 1em;
        border-bottom: 1px solid black;
    }
}
@media (min-width : 600px) {
    form{
    label{
        display: inline !important;
        margin-bottom: 0;
    }
    }
  .isActive {
      background-color: rgb(213, 221, 176);
      border: 2px solid rgba(135,174,111,1.00);
      border-radius: 5px;
      padding: .5em;
      font-family:  "Outfit", "Futura", sans-serif;
      font-weight: 600;
      vertical-align:middle;
      font-size: 1rem !important;
      box-shadow: 0px 0px 8px 4px rgba(135,174,111,0.2);
  }
  .onAlert{
      background-color: rgba(255,220,157,1.00);
      padding: .5em;
      margin-bottom:1em;
      border-radius: 5px;
      border: 2px solid rgba(255,144,0,1.00);
     font-family: "Outfit", "Futura", sans-serif;
      font-weight: 600;
      vertical-align:middle;
      text-align:right;
      font-size: 1rem !important;
      box-shadow: 0px 0px 8px 4px rgba(255,144,0,0.2);
  }
    .suns {
      font-size: 2em;
      padding-top:.5em;
      padding-bottom:0;
      margin:0;
      word-break: normal;
      /* font-family: "Outfit", Futura, sans-serif; */
      font-weight: 600;
    }
    .two-column {
        grid-template-columns: 1fr 3fr;
		grid-auto-flow: column;
		max-width: inherit;
/*        padding: 1em;*/
/*        border-bottom: 1px solid black;*/
        margin: 0 0 .5em 0;
    }
    .search-bar {
        grid-template-columns: repeat(1, minmax(0, 1fr));
		grid-auto-flow: column;
		max-width: inherit;
        padding: 1em 0 ;
/*        border-bottom: 1px solid black;*/
       margin: 0 auto;
        column-gap: 1em;
    }
    .three-column {
        grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-flow: column;
		max-width: inherit;
        padding: 1em;
        border-bottom: 1px solid black;
        margin: 0 auto;
    }
     
    /* Remove bottom border for the last .three-column element */
    .three-column:last-of-type {
        border-bottom: none !important;
    /*    background-color:red ;*/
    }


    .five-column {
        grid-template-columns: repeat(5, minmax(0, 1fr));
		grid-auto-flow: column;
		max-width: inherit;
        padding: 1em;
/*        border-bottom: 1px solid black;*/
    
    }
    .six-column {
        grid-template-columns: repeat(6, minmax(0, 1fr));
		grid-auto-flow: column;
		max-width: inherit;
        padding: 1em;
/*        border-bottom: 1px solid black;*/
    
    }
    
    .table-header{
        display:grid;
    }
    .table-numbers{
        text-align:right;
    }
    .table-break{
        display: block;
        clear: both;
    }

    .list-header {
        display:none;
    }
    .hide-for-small{
        display: inline;
    }
    
	.three-up{
		grid-template-columns: repeat(3, 1fr);
		grid-auto-flow: column;
	}
    .page{
        margin-top:1em;
    }
}


@media (max-width: 374px){
    .break{
        display: block;
        max-width: 100%;
        padding-bottom: 1.5em;
/*        gap: 2em;*/
/*        grid-template-columns: repeat(2, 1fr);*/
/*        grid-auto-flow: column;*/
    }
    
}
@media all (min-width: 1080px) and (max-width : 1200px) {
	html {
		font-size: 3rem;
		-webkit-text-size-adjust:100%;
		-moz-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}
}

/* NAVIGATION */
.icon {
  width: 1.125rem;
  height: 1.125rem;
  vertical-align: -0.125em;
}

.bars{
    
}

nav {
  background: #222;
  padding: 0;
  position: static; /* static Set position to fixed */
  top: 0; /* Position at the top of the page */
  left: 0; /* Position at the left side of the page */
  width: 100%; /* Take up the full width of the viewport */
  z-index: 1000; /* Ensure it's above other content */
}
a.nav {
  color: white;
  text-decoration: none;
}
.menu,
.submenu {
  list-style-type: none;
}
.logo {
  font-size: 20px;
  padding: 0;
}
.item {
  padding: 5px 0;
}
.item.button {
  padding: 9px 0px;
}
.item:not(.button) a:hover,
.item a:hover::after {
  color: #ccc;
}
/* Mobile menu */
.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: right;
    padding:0 5px;
    margin:0 5px;
}
.menu li a {
  display: block;
  padding: 15px 5px ;
}
.menu li.subitem a {
  padding: 5px;
}
.toggle {
  order: 1;
  font-size: 20px;
}
.item.button {
  order: 2;
}
.item {
  order: 3;
  width: 100%;
  text-align: right;
  display: none;
}
.active .item {
  display: block;
    padding-left:0;
    margin-left:0;
}
.button.secondary {
  /* divider between buttons and menu links */
  border-bottom: 1px white solid;
}
/* Submenu up from mobile screens */
.submenu {
  display: none;
}
.submenu-active .submenu {
  display: block;
}
.has-submenu i {
  font-size: 12px;
}
.has-submenu > a::after {
  font-family: "Font Awesome 5 Free";
  font-size: 12px;
  line-height: 16px;
  font-weight: 900;
  content: "\f078";
  color: white;
  padding-left: 5px;
}
.subitem a {
  padding: 10px 15px;
}
.submenu-active {
  background-color: #111;
  border-radius: 3px;
}


/* Tablet menu */
@media all and (min-width: 600px) {
    .right-align{
    text-align: left !important;
    }
  .menu {
	justify-content: left;
  }
    a.nav{
        margin-top:5px;
    }
  .logo {
	flex: 1;
      text-align:left;
/*      padding-top: .25em;*/
  }
  .item.button {
	width: auto;
	order: 1;
	display: block;
  }
  .toggle {
	flex: 1;
	text-align: right;
	order: 2;
  }
  /* Button up from tablet screen */
  .menu li.button a {
	padding: 10px 1em;
	margin: 5px 0;
  }
  .button a {
	background:rgb(179, 204, 164);
	color: black;
	border:none;
/*      border-top: 3px solid rgb(255, 165, 0) !important;*/
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
  }
  .button.secondary {
	border: 0;
  }
  .button.secondary a {
	background: transparent;
	border: 1px #b3cca4 solid;
  }
  .button a:hover {
	text-decoration: none;
      background-color: rgb(213, 221, 176);
  }
  .button:not(.secondary) a:hover {
	background: rgb(213, 221, 176);
	box-shadow:none;
  }
    .page{
        margin-top:1em;
    }
    
    .member-map {
        width: 400px;
    }
    .expand-small{
	margin-top: 0;
    }
    
}
/* Desktop menu */
@media all and (min-width: 1200px) {
    
    nav{
        position: fixed;
    }
    a.nav{
        margin-top:.25em;
        padding: 0 1em;
    }
  .menu {
	align-items: flex-start;
	flex-wrap: nowrap;
	background: none;
    padding-right:25px;
    padding-left:25px;
  }
  .logo {
	order: 0;
    margin-top: 0;
  }
  .item {
	order: 1;
	position: relative;
	display: block;
	width: auto;
      padding-top: .25em;
      padding-right: 1em;
  }
  .button {
	order: 2;
  }
  .submenu-active .submenu {
	display: block;
	position: absolute;
	left: 0;
	top: 68px;
	background: #111;
  }
  .toggle {
	display: none;
  }
  .submenu-active {
	border-radius: 0;
  }
    .page{
        margin-top:85px;
    }

}

/* Forms */

form {
/*	max-width: 800px;*/
}

label{
/*	padding-left: .5rem;*/
/*    margin-left: .25em;*/
    margin-bottom: 1em;
    display: block !important;
    
}

 /* Form Styles */
 form {
	 padding: 1rem;
	 margin: 0 0 0 -1rem;
 }

ul.form{
    list-style-type: none;
    margin:0;
    padding:0;
}
li.form{
    margin-left: 1.5em;
    text-indent: -2.5em;
    padding-right:1rem;
    line-height: .75em;
    margin-bottom:1em;
}

.no-emoji{
    line-height:.5em !important;
}
 
 input {
	  padding: 1rem 0;
/*	  margin: 1rem 0 1rem .5rem;*/
	  font-family: Courier New;
	  font-size: 1em;
	  border-radius: 0;
  }
 
 input[type="text"], input[type="email"], input[type="password"], input[type="number"]{
	 /* background-color: rgb(254, 250, 237); */
	 /* display: grid; */
	 border: 1px solid rgb(198, 198, 198);
	 -webkit-appearance: none;
	 box-shadow: 0px 2px 4px 0px inset rgba(0,0,0,0.2);	
	 font-family: "Zilla Slab", "Courier New", serif;
	 text-decoration: none;
	 padding:1rem 0 1rem 1rem;
/*	 width:100%;*/
 }
 
textarea {
	 /* background-color: rgb(254, 250, 237); */
	 /* display: grid; */
	 border: 1px solid rgb(198, 198, 198);
	 -webkit-appearance: none;
	 box-shadow: 0px 2px 4px 0px inset rgba(0,0,0,0.2);	
	 font-family: "Courier New";
	 text-decoration: none;
	 padding:1rem 0 1rem 1rem;
     rows:5;
/*	 width:100%;*/
 }

 input[type="submit"]{
	 background-color:rgb(179, 204, 164);
	 border: none;
	 box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
	 font-family: "Outfit", "Futura", sans-serif;
	 font-size: 1rem;
	 font-weight: 600;
	 color: black;
	 padding: 1rem 2rem;
	 margin:1rem 1rem 1rem 0;
	 -webkit-appearance: none;
	 border-radius: 0 !important;
     
 }

 input[type="submit"].disabled{
	 background-color:rgb(230, 229, 229);
	 border: none;
	 box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
	 font-family: "Outfit", "Futura", sans-serif;
	 font-size: 1rem;
	 font-weight: 600;
	 color: black;
	 padding: 1rem 2rem;
	 margin:1rem 1rem 1rem 0;
	 -webkit-appearance: none;
	 border-radius: 0 !important;
}
 input[type="submit"]:hover{
	  background-color:rgb(213, 221, 176);
	  box-shadow: none;
}
 input[type="submit"].disabled:hover{
	 background-color:rgb(230, 229, 229);
	 border: none;
	 box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
	 font-family: "Outfit", "Futura", sans-serif;
	 font-size: 1rem;
	 font-weight: 600;
	 color: black;
	 padding: 1rem 2rem;
	 margin:1rem 1rem 1rem 0;
	 -webkit-appearance: none;
	 border-radius: 0 !important;
}

input[type="submit"].warning{
	background-color: rgba(255,191,74,1.00);
	border: none;
	 box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
	 font-size: 1rem;
	 padding: 1rem 2rem;
	 margin: 1rem 1rem 1rem 0;
	 text-decoration: none !important;	
	 -webkit-text-size-adjust: 100%;
}

input[type="submit"].warning:hover{
	background-color: rgb(255, 216, 144);
	border: none;
	box-shadow:none;
	font-size: 1rem;
	padding: 1rem 2rem;
	text-decoration: none;	
}

input[type="checkbox"], input[type="radio"]{
	accent-color: rgb(213, 221, 176);
/*    margin-bottom:1em;*/
    margin-left:1em;
    margin-right:0.5em;
    vertical-align: middle; /* Adjust this value as needed */
    
}


.select2-search__field{
	margin:0;
}

.cancel{
	background-color: rgb(198, 198, 198);
	border: none;
	 box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
	 font-size: 1rem;
    font-weight:400;
	 padding: 1rem 2rem;
	 margin:1rem 1rem 1rem 0;
	 text-decoration: none !important;	
	 -webkit-text-size-adjust: 100%;
    
}

.cancel:hover{
	background-color: rgb(230, 229, 229);
	border: none;
	box-shadow:none;
	font-size: 1rem;
	padding: 1rem 2rem;
	text-decoration: none;	
}

.warning{
	background-color: rgba(255,191,74,1.00);
	border: none;
	 box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
	 font-size: 1rem;
    font-weight:600;
	 padding: 1rem 2rem;
	 margin: 1rem 1rem 1rem 0;
	 text-decoration: none !important;	
	 -webkit-text-size-adjust: 100%;
}

.warning:hover{
	background-color: rgb(255, 216, 144);
	border: none;
	box-shadow:none;
	font-size: 1rem;
	padding: 1rem 2rem;
	text-decoration: none;	
}

.error{
	background-color: #ffdc9d;
	padding: 1em;
/*	margin-left: .5rem;*/
    border-radius: 5px;
    border: 1px solid #ff9000;
    font-weight: 600;
}

/* DATEPICKER */
.ui-datepicker-div{
	font: "Zilla Slab", "Courier New", serif;
	font-size: 1rem;
}
.no-border{
    padding-bottom: 0;
    padding-top:0;
    border-bottom:none;
}


/* The Modal (background) */
.modal {
    display: none;  /*Hidden by default */
    position: fixed; 
    z-index: 1500; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(255,255,255,0.7); /* white w/ opacity */
    -webkit-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

/* Modal Content */
.modal-content {
    margin: 15% auto;
    padding: 20px;
    width: 80%;
    text-align: center;
     background-color: #fffff8;
    /* border: 4px solid #ba8398; */
    color: black;
    border: 2px solid rgb(179, 204, 164);
    border-radius: 5px;
    box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.2);
    }

.session-alertBox-modal{
    opacity: 1;
    visibility: visible;
    animation: fadeOut 2s cubic-bezier(0, .5, .5, 1) forwards; /* 3s is the duration, adjust as needed */
    position: fixed; 
    z-index: 990; /* Sit on top but below menu */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(255,255,255,0.9); /* white w/ opacity */
    -webkit-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

@-webkit-keyframes fadeOut{
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden;
        display: none;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden;
        display: none;
    }
}

@-webkit-keyframes fadeIn{
    0% {
        opacity: 0;
        visibility: hidden;
        display: none;
    }
    100% {
        opacity: 1;
        visibility: visible;
        display: block;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        visibility: hidden;
        display: none;
    }
    100% {
        opacity: 1;
        visibility: visible;
        display: block;
    }
}


/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    margin-top: -.25em;
    font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

button {
   background-color:rgb(179, 204, 164);
	 border: none;
	 box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
	 font-family: "Outfit", "Futura", sans-serif;
	 font-size: 1rem;
	 font-weight: 600;
	 color: black;
	 padding: 1rem 2rem;
	 margin:1rem 1rem 1rem 0;
	 -webkit-appearance: none;
	 border-radius: 0 !important;
}

button:hover {
   background-color:rgb(213, 221, 176);
	  box-shadow: none;
}

.complete{
    visibility: hidden;
    animation: fadeIn 0.5s ease-in-out forwards; 
    animation-delay: 1s;
    display:inline-block !important;
}

/*SVG STYLES*/

svg {
    width: 100%;
    max-width: 600px; /* Adjust based on your needs */
    height: auto;
}

.f {
    fill: #ddcfb0;
    stroke: rgb(179, 204, 164);
	stroke-width: 1px;

}

.plot {
    fill: rgb(213, 221, 176); /* Default color for plots */
    stroke: rgba(135,174,111,1.00) ;
    stroke-width: 1;
}

.clickable:hover {
    fill: rgba(135,174,111,1.00);
}

.highlight {
/*
    
    fill: #E7F0FE !important;
    stroke:  #5897fb !important;
*/
    
    fill: rgb(254, 254, 163) !important;  
    stroke: rgb(255, 165, 0) !important;
    stroke-width: 1 !important;
}

.responsive-svg-container {
        display: flex;
        justify-content: left;
        align-items: center;
        width: 100%; /* Full width of the container */
        overflow: hidden; /* Optional, to prevent overflow issues */
    }
    
svg {
        width: 100%; /* Makes the SVG scale to the container's width */
        height: auto; /* Maintains aspect ratio */
        max-width: 400px; /* Limits the size of the SVG on larger screens */

    }