:root {
--text: #021a21;
--background: #fafeff;
--primary: #84dbf6;
--secondary: #a0e3f8;
--accent: #0e95be;
--stripe: #FFCC00;
--light:#FFEBCD;
--surface: #ffffff;
--text: #0f172a;
--bg: #0b1020;
--radius: 16px;
--border: 6px;
--gradient: linear-gradient(135deg, #7a5cff, #5bd3ff);
}
	select{
	font-size: 1.35em;
}

#runDOW{
	display: none;
}
#dateRangeModal {
  visibility: hidden;
}
#showMoreData{ display: none;}
#dateRangeModal.show-modal {
  visibility: visible;
}

#dateRangeModal form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#dateRangeModal input[type="date"] {
  font-size: 1.2rem;
  padding: .4rem;
}
#dateControls {
	margin-bottom: 10px;
	display: grid;
	grid-template-columns: auto auto auto auto auto auto;
}

#dateControls input {
	margin-right: 10px;
}

#dateControls button {
	padding: 4px 10px;
}

#quickSelect button {
	margin-left: 4px;
	padding: 3px 8px;
	cursor: pointer;
}

#quickSelect button.active {
	background: #444;
	color: rgb(255, 255, 255);
}

.nBtns{
	font-size: 1.25rem;
}
#TW_Since,
#tw_DOW, #yearDashboardContainer {
	display: none;
}

.calendarReport {
	border-collapse: collapse;
	font-size: 14px;
	background: wheat;
}
.calendarReport th, .calendarReport td {
	border: 1px solid #ccc;
	padding: 4px 8px;
	text-align: right;
}
.calendarReport th{
	background: #f2f2f2;
}
.calendarReport th:first-child,
.calendarReport td:first-child {
	text-align: left;
}
.calendarReport .totals {
	background: #f2f2f2;
}
.calendarReport .total {
	font-weight: bold;
}
.calendarReport .currentMonth {
	background-color: #fff3cd;
}
.calendarReport .currentYear {
	background-color: #e9f5ff;
}

#ldrQTY{
	width:100%;
}
.letterSpacing{
	letter-spacing: .3em;
}
.details_div {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-auto-rows: min-content; /* row height = height of first row content */
  /* gap: 0.25rem; */
  border:3px solid rgba(6, 73, 123, 0.742);
  background: aliceblue;
}

/* first row items */
.details {
	width: 100%;
}
#description{
	overflow-y: auto;
	color: black;
	text-align: left;
	line-height: 1.25em;
	padding: 1em;
	font-size: 1.35rem;
	margin:.5em 1em;
	box-shadow: 8px 8px 6px 1px rgba(48, 49, 70, 1);
	background: #c0eef0;
}
#copyTableBtn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); /* centers perfectly */
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border:1px solid rgb(255, 209, 71);
	background-color: rgba(66, 51, 51, 1);
	color: white;	
	font-size: 3em;
	cursor: pointer;
	box-shadow: 0 4px 6px rgba(0,0,0,0.3);
	z-index: 10;
	transition: background-color 0.2s, transform 0.2s;
}

#copyTableBtn:hover {
	background-color: rgba(211, 129, 214, 0.9);
	transform: translate(-50%, -50%) scale(1.1); /* subtle grow on hover */
}
/* second row */
.hours {
  grid-column: 1 / -1;
}
/* .crewMember:hover:after {
  background: #333;
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;
  top: 240px;
  color: #fff;
  content: attr(data-title);
  left: 33%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 400px;
} */
.csp_level200{
	background: wheat !important;
}
.csp_level40{
	background: thistle !important;
}
.csp_level40:hover, .csp_level200:hover{
	background:blue !important;
}
#copyStats{
	background: rebeccapurple;
	color:white;
}
#h3Target, #pTarget{
	 border:3px solid silver;
	 margin: 0px;
}
#AllTimeRecordsTable{
	width: 100%;
	max-width: 960px !important;
}
#AllTimeRecordsTable td:nth-child(1):has(img):hover{
	cursor: pointer;	

}
#totals tr:last-child td:last-child{
	font-weight: 800;
	color:rgb(6, 90, 5)
}

.flexmenuitem img:hover{
	 border-bottom:2px solid lime;
	  /* padding:1px 2px; */
	
	
}
tr.formatRow {
background: yellow;
}
.leftBorderAccent{
	border-left: 10px solid transparent;
	border-image: linear-gradient(#EECDA3, #EF629F);
	border-image-slice: 1;	
}
.makeSpace{
	padding: 1rem;
	border:1px solid rgba(27, 181, 248, 0.841);
	box-shadow: 12px 12px 6px 1px rgba(48, 49, 70, 1);
	box-shadow: 10px 8px 5px rgb(123, 50, 50);
	font-size: 1.2em;
	line-height: 1.3em;
	max-width: 75ch;
	margin-left:auto;
	margin-right: auto;
	margin-top: 1rem;
	background:var(--light);
}
.central{
	text-align: center;
	font-size: 1.8rem;
	background: yellow;
	margin:0px 0px;x
}
.icon{
	width: 60px;

}
.formatNumber{
	text-align: right;
}
.enhance{
	color:black;
	font-size:1rem;
}
.modal {
visibility: hidden;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  height: 95%; /* Full height */
  width:100%;
  max-width:685px;
  /* overflow: auto;  */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  background: none;
}

/* Modal Content/Box */
.modal-content {
	overflow:clip;
  background-color: #fefefe;
  /* margin: 10% auto; /* 15% from the top and centered */ 
  padding: 20px;
  max-height:95vh;
  border: 1px solid #888;
  /* width:100%; */
  max-width: 700px;
  display: none;
  /* scrollbar-color: rgb(59, 55, 55) rgb(235, 218, 218); */

}
.modal-content h3{
	text-align: center;
	padding: 1rem 2rem;
	background: black;
	color: wheat;
}
.modal-content p:first-of-type{
	text-align: center;
	font-weight: bold;
}
.close-button {
	width: 100%;
	line-height: 1.5rem;
	padding:1em 0em;
	font-size:1.5em;
	text-align: center;
	cursor: pointer;
	border-radius: 0.25rem;
	background-color: rgb(106, 154, 237);
}

.close-button:hover {
	background-color: darkgray;
}
/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.show-modal {
	opacity: 1;
	visibility: visible;
	transform: scale(1.0);
	transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
#Leaders{
	width: 500px;
}
details, summary{
	cursor: pointer;
}
	body {

	  background-image: url('topography.png');
		/* background-image: url('images/Event_959_Crew_walking_back-pichi.jpg'); */
		/* background-repeat: no-repeat; */
		/* background-size: contain; */
		margin:auto;
		max-width: 960px;
		}
		h1{
			padding: 5px 0px 5px 0px;
			margin:auto;
			background: var(--accent);
			color: var(--secondary);
			border:4px groove rgb(16, 16, 16);
			text-align: center;
		}
	h2{
		padding: 5px 0px 5px 0px;
		margin:auto;
		background: var(--secondary);
		border:4px groove rgb(16, 16, 16);
		/* border:3px solid rgb(241, 246, 239); */
		/* background-color: #0093E9;
		background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%); */
		/* color:white; */
		text-align: center;
		/* width: 100%; */
	}
	#pTarget{
			background: rgb(242, 166, 24);
			color: rgb(18, 16, 16);
			padding: 5px;
			font-size: 1.4em;
			margin:0px;

					}
		.pageFooter{
			display: flex;
			justify-content: center;
			background: var(--accent);
			text-align: center;
			font-size: 2rem;
			/* width:100%; */
			gap:2em;
		}
		.pageFooter button{
			padding:.5rem;
		font-size:2rem;
		}
	.calendarWrapper {
		display: inline-block;
	}		
		hr.five {
		display: block;
		height: 4px;
		border: 0;
		border-radius: 8px;
		/* border-top: 4px solid #ccc; */
		margin:.05em;
		padding: 0;
		
		}
		hr.five:after {  /* Not really supposed to work, but does */
			content: "\00a0";  /* Prevent margin collapse */
		}
		
		.CSUCI_header{
			display: flex;
			justify-content: space-between;
			/* background-color: #0093E9;
			background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%); */
			background: var(--primary);
			border:4px groove rgb(16, 16, 16);
			
		}
		#CrewLeaderIdeals{
			border:1px solid tomato;
			font-size: 1.7rem;
			background: wheat;
			padding:.5rem;
			display:none;
		}
		.makeNicer{
			padding: 5px 0px 5px 0px;
			margin:0px 20px 0px 20px;
			font-size: 1.4rem;
		}
		#yearWrapper{
			display: none;
		}
		.openbtn, .closeSidePanel, .eBtn, #navMenu {
			height:36px;
			font-size: 1.35rem;
		}
		.flexHeaderContainer{
			display: flex;
			justify-content: space-between;
			/* background-color: #0093E9;
			background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%); */
			background: var(--secondary);
			border:4px groove rgb(16, 16, 16);
		}
		
#filters{
			display: grid;
			grid-template-columns: auto auto auto 1fr;
			align-items: center;
			column-gap: 12px;
			/* background: rgba(31, 206, 236, 1); */
			padding: 6px 10px;
		}
		#resetFilters, #tableSearch{
			height: 36px;
			margin-block: auto;
		}
		#Elist {
			table-layout: fixed;
			width: 100%;
		}
		
		#Elist th:nth-child(2),
		#Elist td:nth-child(2) {
			width: 200px;   /* Trail column wider */
			
		}
		
		#Elist th:nth-child(9),
		#Elist td:nth-child(9),
		#Elist th:nth-child(10),
		#Elist td:nth-child(10),
		#Elist th:nth-child(11),
		#Elist td:nth-child(11) {
			width: 60px;    /* shrink hidden/last columns if needed */
		}
		#Elist td.t {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}	
.h2_item{
	border:none !important;
	background: none;
	text-align: center !important;
}

.h2_wrapper{
	flex-grow: 4;
	text-align: center;
	
}
.pressed{
background: var(--accent);
color: white;
}
.notPressed{
	background: var(--light);
	color:black;
}
input:where([type="checkbox"][role="switch"]) {
  appearance: none;
  position: relative;
  color: inherit;
  font-size: inherit;
  width: 2.5em;
  height: 1.25em;
  box-sizing: content-box;
  border: 1px solid #ccc;
  border-radius: 1em;
  background-color: black;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

input:where([type="checkbox"][role="switch"])::before {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  left: 0.125em;
  top: 0.125em;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

input:where([type="checkbox"][role="switch"]):checked {
  background-color: #4CAF50;
  border-color: #4CAF50;
}

input:where([type="checkbox"][role="switch"]):checked::before {
  transform: translateX(1.25em);
}

		#H2NoBorder{
			border:none !important;
		}
		.yearFilter {
		  appearance: none;
		  padding: 16px 32px;
		  border-radius: 12px;
		  background: radial-gradient(circle 12px, var(--background) 100%, transparent calc(100% + 1px)) var(--secondary) -16px;
		  transition: 0.3s ease-in-out;
			border: 0;
			outline: 2.5px solid #333;
			outline-offset: .25px;
			margin-right: 5px;
			margin-top:7px; 
			cursor: pointer;
			
		}
		.yearFilter:hover{
			position: relative;
			
		}
		.yearFilter:hover::before {
		  /* content: "Show Hide Filter"; */
		  padding: 2px 4px;
		  color: #333;
		  position: absolute;
		  bottom: 80px; 
		  top: 10px;
		  white-space: nowrap; 
		  z-index: 20;
		  border-radius: 5px;   
		  box-shadow: 0px 0px 4px #222;  
		  background-image: linear-gradient(#eeeeee, #cccccc);  
		}
		.CINPChoice {
		  appearance: none;
		  /* padding: 16px 32px; */
		  /* border-radius: 12px; */
		  background: radial-gradient(circle 12px, white 100%, transparent calc(100% + 1px)) #ccc -16px;
		  background-color: #286D71;
		  /* transition: 0.3s ease-in-out; */
			border: 0;
		
			cursor: pointer;
		}
		
		.CINPChoice:checked {
			/* content: "All"; */
		  background-color: #e592a2;
		  background-position: 16px;
		}
		.ZZCINPChoice:hover::before {
			content: "Optional"; 
			position: absolute;
			top:10px;
			left:-70px;
			
		}
		.flexHeader{
			flex-grow: 4;
		}

		.flexHeaderContainer{
			align-items: center;
		}
		
	#CrewRecords {
		scrollbar-color: red yellow;
	}	
	#crewHrs{
		background: #F7F8F9;
		margin-bottom: 2em;	
	}
/* #Barry:hover, #Jerry:hover,#JohnK:hover, #Dave:hover, #Norm:hover, #Sharon:hover, #Greg:hover,#Anne:hover,#George:hover,#Don_B:hover, #JonS:hover,#Barb:hover, #DavidP:hover, #crewDeets:hover, #Carlyn:hover{ */
		#Burt:hover:after {
			content: url("../twImages/Burt.jpg");
			display: block;
			text-align: center;
		}	
	.burt{
		color:white;
	}
	#workrecord table{
		width: 100%;
	}
.emphasis_Pos{
	background: rgb(20, 108, 6);
	color:rgb(241, 246, 239);
}
.emphasisNeg{
	color:black;
	background: #F7E6F5;
}
	.subcontainer {
	  display: flex;
	  flex-direction: row;
	  flex: 1;
	}
	.searchList{
		flex-grow: 0;
	}

.criteriaButtons{
	border-radius: 13px;
	background: linear-gradient(45deg, #f7f2eb, #d0cbc6);
	box-shadow:  2px -2px 4px #e5e0da, -1px 2px 4px #e9e4de;       
	padding-left: 8px;
	padding-right: 8px;
	margin-left: 14px;
	}
	#helpful{
		flex-wrap: wrap !important;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 80%;
			padding: 15px;
			border: 2px solid black;
			z-index: 50;
	border-radius: 27px;
	background: linear-gradient(315deg, #5bc6ff, #4da7db);
	box-shadow:  -13px -13px 26px #489dcf, 
				 13px 13px 26px #62d5ff;
	margin:auto;
	}	
	#help{
		background: white;
	}

.sidenav {
	  height: 100%; /* 100% Full-height */
	  width: 0; /* 0 width - change this with JavaScript */
	  position: fixed; /* Stay in place */
	  z-index: 1; /* Stay on top */
	  top: 0; /* Stay at the top */
	  right: 0;
	  background-color: #111; /* Black*/
	  overflow-x: hidden; /* Disable horizontal scroll */
	  padding-top: 0px; /* Place content 60px from the top */
	  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
	 /* border-left:10px solid tomato; */
	}
	
	/* The navigation menu links */
	.sidenav a {
	  padding: 8px 8px 8px 32px;
	  text-decoration: none;
	  font-size: 25px;
	  color: #818181;
	  /* display: block; */
	  transition: 0.3s;
	
	}
	
	/* When you mouse over the navigation links, change their color */
	.sidenav a:hover {
	  color: #f1f1f1;
	}
	
	/* Position and style the close button (top right corner) */
	.sidenav .closebtn {
	  /* position: absolute;
	  top: 0;
	  left: 0; */
	  /* margin-left: 50px; */
	  font-size: 2em;
	  color:red;
	 
		  }
	.sidenav img{
	  max-width: 100%; /* not to stand out from div */
	  max-height: 100%; /* not to stand out from div */
	  margin: auto 0; /* position to bottom and center */
	}		
	#currentEvents{
		/* background:#EADCC1; */
		/* border:5px solid black; */
		width: 100%;
	
	}
.flex-container{
	max-width: 100%;	
	
	}
	#wrapper{
		max-width: 100%;
		max-height: 85vh;
		overflow-x: scroll;
		margin:auto;
		/* background: rgb(249,227,129); */
		
	}
	.zebraStripe{
		width: 100%;
	}
	.zebraStripe tbody tr:nth-child(odd) {
		background-color: rgba(189,217,225,1);
		color: black;
		}
	.zebraStripe tbody tr:nth-child(even) {background-color: rgba(227, 236, 239, 1);}
	
.z{
		display: none !important;
	}
.i{
		display: none;
	}
.d{
	width: 22%;
}	
#stats{
	margin:auto;
}
#crew_records{
	background: rgb(254, 239, 255);
	margin-top:20px;
}
.event{
	display: none;
}
#crewHrs th{
	text-align: left;
}
.crewMember{
	cursor: pointer;
}	
.crewMember:hover{
	cursor: pointer;
	background: blue;
	color:yellow;
}	
.casual {
	background: rgba(247, 213, 174, 0.963);
	font-weight: bold;
}
.casual::before {
	content:"★ ";
	color:red;
}
.sectionFlash {
	background: #fff3b0;
	transition: background 2s ease;
}
/* Flashing style */
.sectionflash {
  animation: pulseHighlight 0.6s linear 4;
}

/* @keyframes flashAnim {
  0%,100% { background: yellow; }
  50% { background: rgb(240, 211, 155); }
}
}
.sectionPulse {
  animation: pulseHighlight 1.6s ease-out 1;
} */

.sectionflash {
  animation: captionPulseAnim 1.2s ease-out 1;
  font-weight: bold;
}

@keyframes captionPulseAnim {
  0%   { background: yellow; }
  50%  { background: #a8ffb3; box-shadow: 0 0 12px lime; }
  100% { background: transparent; box-shadow: none; }
}
#xtabreport caption {
  font-weight: bold;
  padding: 5px;
}
#showFeatures{
	padding-top: .2em;
	cursor: pointer;
	font-size: 2em;
	color:white;
}	
#elistDiv{
		overflow-y: scroll;
		font-size: .8em;
		max-height:80vh; 
		margin-bottom: 20px;
		width: 100%;
		background: whitesmoke;
			
	}
	#Elist{
		width: 100%;
		margin-left: 0px;
		margin-right: 0px;
		color: black;
	}
	#Elist tr{
		cursor: pointer;
	}
	#Elist th{
		color:white;
	}
	#Elist tbody tr:hover td,
	#Elist tbody tr:hover th {
	  background-color: #0a99ff
	}
	.labels{
		/* padding: 16px; */
		background: rgb(221, 214, 214);
		background: rgb(145, 202, 220);
		color: white;
		text-align: center;	
	}
	#labeltext{
		font-size: 2em;
		margin: -15px 0px 0px 0px;
		text-align: center;
	}
.lines {
		/* height: calc(100% - 40px); */
		background-image: repeating-linear-gradient(white 0px, white 24px, steelblue 25px);
		padding-left: 12px;
		padding-right: 12px;
		box-shadow: 0px 5px 5px 0px #888;
		font-size: 1em;
		width: 95%;
		margin: 0px;
	}
	.text {
	  line-height: 25px;
	  overflow: hidden;
	  outline: none;
	  color:black;
	  text-align: left;
	}
	.td_column1{
			background: black;
			color: white;
			text-align: right;
			width: 65px;
		}
		#helpful{display:none;}
	.td_column2{
			background: white;
			color: black;
			width: 255px;
		}
	.td_column3{
		width: 20px;
		text-align: right;
	}	
		#Elist th{
			color:white;
			background: black;
		}
		#Elist tbody tr:hover td,
		#Elist tbody tr:hover th {
		  background-color: #0a99ff
		}	
			
#crew_Records{
	overflow-y: auto;
	max-height: 900px;	
	width: 100%;
	/* background: rgb(226, 96, 96); */
	/* margin-top:30px; */
	margin: 0 auto;
}

#CrewRecords{
	background: azure;
	width: 100%;
}

#helpful{
display: none;
	
}

.eBtn{
	display:none
}
	.headerWrapper{
		display: flex;
		align-items: center;
		justify-content:space-between;
		border-radius: .6em;
		width: 100%;
		background: var(--accent);
	}

	.yearInputs{
		display: flex;
		justify-content: space-around;
		background: var(--accent);
		font-size: .85rem;
		padding:5px 20px 5px 20px;
	}
	.flex-item1{
		border:1px solid rgb(20, 108, 6);
		padding: 4px;
		background:var(--secondary);
	
		
	}
	.child{
		width: 100%;
		/* border:1px solid tomato; */
		}
	.title{
		text-align: center;
		padding-top:12px;
		
	}
	#navMenu{
		  appearance: none;
		  background-color: var(--accent);
		  border: 2px solid var(--accent);
		   border-radius: 2px;
		   margin-top: 2px;
		  margin-bottom: 12px;
		  box-sizing: border-box;
		  color: #FFFFFF;
		  cursor: pointer;
		  display: inline-block;
		  font-family: Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
		   font-weight: 600;
		   font-size: 2rem;	
		  line-height: normal;
		  /* margin: 0; */
		  min-width: 0;
		  outline: none;
		  text-align: center;
		  text-decoration: none;
		   user-select: none;
		  -webkit-user-select: none;
		  touch-action: manipulation;
		  width: 100%;
		  will-change: transform;
		}
		
		#navMenu:disabled {
		  pointer-events: none;
		}
		
		#navMenu:hover {
			  transform: translateX(5px);
			  transform: translateY(2px);
		}
		
		#navMenu:active {
		  box-shadow: none;
		  transform: translateY(0);
		}
	
.exMenu{
		padding-right: 5px;
			}
.te_photos{
	/* max-width: 500px; */
	display: block;
	  max-width: 100%;
	  text-align: center;
	 margin:auto;
}
.te_photos_container2{
	/* border:5px solid tomato; */
	background: rgb(144, 139, 139);
	display: grid;
	  grid-template-columns: 5fr;
	  grid-gap: 10px;
	  overflow: scroll;
	  /* max-height: 0vh;	  */
	  margin:auto; 
	  text-align: center;
	
}
.zcloseSidePanel{
	display: none;
}	
	
/* .highlight{
	background:rgb(114, 240, 240);
} */
.showHide{
	background: azure;
	color: black;
	width: 175px;
}

.xtabTotals {
	text-align: right;
	font-weight: bold;
}
.tableEmphasis{
text-align: right;
font-weight: bold;
background: #FFEBCD;
}	
.tableLessEmphasis{
	background: #FFF8ED;
	text-align: right;
	font-weight: bold;
}
.CINP{
	background: #286D71;
	color: white;
	text-align: right;
	/* font-weight: bold */
}
.gg{
	margin: 0;
	padding: 0;
	background: var(--stripe);
	border-radius: 12px;
}

.widget {
	padding: .3em;
	border-radius: 1rem;
	background: linear-gradient(to right, #e0eafc, #9dc2f6);
	background: linear-gradient(45deg, rgba(241, 241, 241, 0.3) 0%, rgba(199, 244, 255, 0.96) 64%, rgba(153, 202, 245, 0.43) 100%);
	box-shadow: 0 10px 20px 0 rgba(198, 52, 52, 0.02);
	border: 2px solid black;
}

	
.tabs {
  --tab-count: 3;
  --active: 0;
  position: relative;
  isolation: isolate;
  display: flex;
  height: 2rem;
  border-block-end: 1px solid #e9ebec;
  margin-block: .45rem;
  margin-left: .5rem;
  margin-right: .15rem;
  
}

.tabs input {
  display: none;
}

.tabs label {
  flex: 1;
  display: flex;
  font-family: sans-serif;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 600;
  /* color: #656d7b; */
  cursor: pointer;
  transition: color 0.5s ease-in-out;
}


.tabs input:checked + label {
  color: #101010;
  /* border:1px solid tomato;
  border-radius: .5em .5em 0 0; */
  cursor: default;
  
}

.tabs::after {
  pointer-events: none;
  position: absolute;
  content: "";
  z-index: -1;
  /* inset: 0; */
  inset: 0 0 -1px;
  /* width: 100%; */
  /* width: calc((100% / 3) - 2px); */
  width: calc((100% / var(--tab-count)) - 2px);
  /* border-radius: 0.5rem 0.5rem 0 0; */
 outline: 2px solid #cf84a6;
  border-block-end: none;
  background-image: linear-gradient(#eee89a, #fcd);
  translate: calc(var(--active) * 100%);
  transition: translate 0.5s ease-in-out;
  outline: 6px ridge rgba(170, 50, 220, .6);
  border-radius: 4rem;
}

.tabs:has(:checked:nth-of-type(1)) {
  --active: 0;
}

.tabs:has(:checked:nth-of-type(2)) {
  --active: 1;
}

.tabs:has(:checked:nth-of-type(3)) {
  --active: 2;
}

@media only screen and (max-device-width : 550px) {
.sidenav{
	top:0;
	right:0;	
	width:0;
	overflow: hidden;
	height:100%;
	
}	
.sidenav .closebtn {
  position: relative;           /* or absolute/fixed, depending on layout */
  display: inline-block;        /* ensures size wraps content unless specified */
  font-size: 1.5em;
  text-align: right;
  /* line-height: 40px;             */
  overflow: hidden;            
  white-space: nowrap;         
}
.sidenav img{
position: absolute;
  bottom: 0;
  left: 40%;
  transform: translateX(-50%); /* center horizontally */
  /* max-width: 100%;
  height: auto; */
	
}
#showIdeals, #showLeaderData, #scheduleOfEvents{
	display: none;
}
#Elist{
	width:105% !important;
	table-layout: auto;
}
#elistDiv{
	overflow-x: clip;

}
#Elist_wrapper{

	width:100%;
}
	#Elist td.t{
		white-space: unset;
		overflow: clip	;
		text-overflow: ellipsis;
	}
}

@media only screen and (min-device-width : 300px) and (max-device-width : 767px) {
	body{
		width: 100%;
		overflow-x: hidden;
	}
	#Elist td:nth-child(2){
		width: 125px;
	}
	.details_div {
	  display: block;
		  border:3px solid rgba(6, 73, 123, 0.742);
	  background: aliceblue;
	}
	#yourDataHere{
		max-width: 96%;
	}
	/* .noMobile{
		display: none ;
	} */
	.modal-content{
		margin:0px;
		width: 100%;
	}
	#TW_Since{
		display: none;
	}
	.phone, #CSUCI_section, #SMMTC_Sort{
		display: none;
		visibility: hidden;
	}
	.flexHeaderContainer{
	justify-content: flex-end;	
	}
.flex-item1{
	font-size: .65rem;
}
.flexmenuitem *{
	font-size: .85rem;
	
}
.tabs label {
	font-size: .75rem;
}
.exMenu{
padding-right: 2px;
	}
#elistDiv{
	background: var(--background);
	overflow-x: hidden;
}
#navMenu{
	font-size: 1.25rem;
	margin: 0;
	width: 60%;
}
 .closeSidePanel, .openbtn{
	height: 25px;
	font-size:1rem;
}
#Elist{
	margin-left: 15px;
	width: 100%;
	border:1px solid lime;
	
}
#togglebtn{
	font-size: .75rem;
}
.eventHeader h2, .eventHeader br{
	display: none;
}
.eventHeader{
	display: flex;
	justify-content: space-between;
	padding-inline: 1em;
	padding-bottom: .5em;
}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1200px) {
	#Elist{
		width: 99.5% !important;
	}
}
@media only screen and (min-device-width : 1024px) {
#sideMenu {
	position: fixed;         /* floats above content */
	top: 0;
	right: 0;           /* start off-screen */
	height: 100dvh;           /* full viewport height */
	max-height: 100dvh;
	overflow-y: hidden !important;
	transform: translateX(100%);
	transition: transform .35s ease;
	background-color: #111;
	color: white;
	overflow-y: auto;
	/* transition: right 0.35s ease, width 0.35s ease; */
	z-index: 9999;
	padding: 20px;
	box-sizing: border-box;
	border-left:25px solid rebeccapurple;
}
#sideMenu.open{
	transform: translateX(0);
}
/* Optional styling for links/buttons inside menu */
#sideMenu a, #sideMenu button {
	display: block;
	margin: 10px 0;
	color: white;
	text-decoration: none;
}
#sideMenu a:hover, #sideMenu button:hover {
	text-decoration: underline;
}
.menuChoices{
	display: grid;
	grid-template-columns: auto auto;
}
#sideMenuImg{
/* height:74vh; */
	border:1px solid tomato;
}	
	.sidenav{
		font-weight: 500;
		font-family: monospace;
	}
	#showMoreData{
		font-size: 2em;
		padding: 5px 0px;
		margin:0px;
		text-align: center;
		display: block;
		cursor: pointer;
	}
	#showMoreData:hover{
		border:3px solid black;
		width: 2em;
		border-radius: 50%;
		background: silver;
	}
	#tw_DOW{
		background: white;
		border:1px solid silver;
	}
}
@media only screen and (min-device-width: 767px){
	.eventHeader {
		padding: .25rem;
	  display: flex;
	  align-items: center;   /* vertical alignment */
	  gap: 0.75rem;          /* space between items */
	  flex-wrap: nowrap;     /* keep on one line */
	  background: var(--secondary);
	  border:4px groove rgb(16, 16, 16);
	}
	
	.eventHeader h2 {
		margin: 0;
		flex: 1;              /* take remaining space */
		text-align: center;   /* optional */
		background: unset;
		border:unset;
		font-size: 2rem;
		color: #000; /* or whatever your text color is */
		text-shadow:
		-1px -1px 0 #fff,
		1px -1px 0 #fff,
		-1px  1px 0 #fff,
		1px  1px 0 #fff;
		}
}