* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
	}

body {

/*  Glossy Blue-Green Light
	background: rgb(204,238,208);
	background: radial-gradient(circle, rgba(204,238,208,1) 30%, rgba(212,226,242,1) 100%); */

/*  Glossy Blue-Green 
	background: rgb(174,238,183);
	background: radial-gradient(circle, rgba(174,238,183,0.6486927534685749) 43%, rgba(148,195,233,0.6486927534685749) 100%); 	*/

/*  Red & Purple
	background: rgb(238,215,204);
	background: radial-gradient(circle, rgba(238,215,204,1) 30%, rgba(216,212,242,1) 100%); */

/*  Vibrant Purple To Orange 
    background: rgb(131,58,180);
	background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); */
	
/*  Blue-Green-Yellow 
	background: 2E7BB6;
	background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(212, 238, 255, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);*/
	
/*  Yellow-Green-Blue */
	background: 2E7BB6;
	background: linear-gradient(276deg,rgba(0, 0, 0, 1) 0%, rgba(212, 238, 255, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(255, 243, 130, 1) 100%);	
	
/*  Monday Radial 
	background: #efffb5;
	background: radial-gradient(circle,rgba(239, 255, 181, 1) 0%, rgba(238, 220, 200, 1) 36%, rgba(226, 241, 252, 1) 95%);*/
	
/*  Vibrant Ocean Blues
    background: rgb(63,94,251);
    background: radial-gradient(circle, rgba(63,94,251,0.6654994761576505) 22%, rgba(70,234,252,0.6514938739167542) 100%); */

/*  Blue & White Clouds
	background: rgb(255,255,255);
	background: radial-gradient(circle, rgba(255,255,255,1) 43%, rgba(148,195,233,0.6486927534685749) 100%); */
	font-family: arial, sans-serif;
	font-size: 1em;
	color: #444;
	}
	
.wrap {
	border-radius: 10px;
	background: inherit;
	}
	
h1 {
	font-size: 1.4em;
	font-weight: bold;
	padding-bottom: 0.8em;
	color: #666;
	}
	
.list, .list-flex {
	font-family: arial, sans-serif;
	font-size: 0.9em;
	color: #444;
	}
	
.rowwrap h1 {
	font-family: arial, sans-serif;
	font-size: 1.4em;
	font-weight: normal;
	color: #666;
	padding: 7px 0px 5px 0px;
	}
	
h2 {
	font-size: 1.2em;
	font-weight: bold;
	padding-bottom: 0.7em;	
	color: #555;
	}
	
.rowwrap h2 {
	font-family: arial, sans-serif;
	font-size: 1.2em;
	font-weight: normal;
	color: #555;
	padding: 7px 0px 5px 0px;
	}
	
h3 {
	font-size: 1.2em;
	font-weight: bold;
	padding-bottom: 0.6em;
	color: #555;
	}
	
.rowwrap h3 {
	font-family: arial, sans-serif;
	font-size: 1.1 em;
	font-weight: normal;
	color: #555;
	padding: 5px 0px 5px 0px;
	}
	
.form-flex h3 {
	font-family: arial, sans-serif;
	font-size: 1.2em;
	font-weight: normal;
	color: #555;
	padding: 5px;
	line-height: 40px;
	}
	
.rowwrap h5 {
	font-family: arial, sans-serif;
	font-size: 0.8em;
	font-weight: normal;
	color: #555;
	padding: 0 0 8px 0;
	}

/* h4 is used for help modal pop-up text */	
h4 {
	color: #555;
	font-size: 0.9em;
	line-height: 1.7;
	margin: 8px 0 8px 10px;
	text-align: justify;
	text-justify: inter-word;
	}	

/* h6 is used for list-head text only */	
h6 {
	font-size: 0.7em;
	}	
	
p {
	color: #555;
	font-size: 1em;
	line-height: 1.7;
	margin: 8px 0 8px 10px;
	}

.bg-grey ul {
	list-style-type: circle;
	margin: 10px 20px 0 20px;
}	

.bg-grey li {
	color: #555;
	font-size: 1em;
	line-height: 1.7;
	margin: 8px 0 8px 10px;
}
	
.list p, .list-flex p {
	margin: 8px 0 8px 0;
	}
	
.rowwrap {
	font-size: 1em;
	line-height: 1.5;
	margin: 8px 0 8px 0;
	}
	
a {
	text-decoration: none;
	color: #167ECE;
	}
	
a:hover {
	color: #1B91FF;
	}

.hr {
	margin: 20px 0;
	}
	
.hr-thin {
	margin: 10px 0;
	}
	
.hr, .hr-thin {	
	display: flex;
	height: 2px;
	background-color: #E0E0E0;
	border-radius: 5px;
	}
	
img {
	width: 100%;
	display: block;
	}
	
.bold {
	font-weight: bold;
	}
	
.no-overflow {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1; /* Change to 3 for three lines */
}

	
/* CARDS BEGIN */

.cardwrap {
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* This will be the space between cards */
    justify-content: center; /* Align items at the start of the container */
    align-items: flex-start; /* Align items at the start of the cross axis */
    margin: 0;
    margin-bottom: 20px;
    background-color: #F7F7F7;
    font-family: Arial, sans-serif;
}

.card {
    flex: 1 1 calc(25% - 10px); /* take up 25% minus gap */
	max-width: 145px;
/*  min-width: 200px; /* card will not be smaller than 200px */
    background: #ffffff;
    border-radius: 15px;
    border: 6px solid #FFF;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    text-align: center;
    padding: 15px;
}

.card:hover {
/*    box-shadow: 0 4px 8px rgba(255, 252, 229, 1); /* Yellow shadow on hover */
}

/* Responsive adjustment if the container becomes too small */

@media (min-width: 725px) {
    .card {
        flex-basis: calc(25% - 20px); /* Adjust to 25% minus gap for smaller screens */

    }
}
@media (min-width: 626px) and (max-width: 724px) {
    .card {
        flex-basis: calc(50% - 10px); /* Adjust to 50% minus gap for smaller screens */
        /* other styles if needed */
    }
}

@media (max-width: 625px) {
    .card {
        flex-basis: 100%; /* Each card takes full width on smallest screens */
		max-width: 160px;
    }
}

.card-icon {
    /* Placeholder for the icon - use an <img> or <svg> tag instead */
    /* background: #eee; /* Background color of the icon area */
    padding: 15px;
    margin-bottom: 20px;
}

.card-content h2 {
    margin: 0;
    color: #666; /* Adjust text color as needed */
    font-size: 0.9em; /* Adjust font size as needed */
}

.card-content p {
    color: #666; /* Adjust text color as needed */
	font-size: 0.8em;
}

.card-button {
    background-color: #4E5B6E;
    color: white;
    border: none;
    padding: 10px 10px;
    margin-top: 10px; /* Adjust spacing as needed */
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%; /* Makes the button as wide as the card */
    box-sizing: border-box; /* Includes padding in the button width */
    border-radius: 5px; /* Slightly rounded corners for the button */
}

/* Red */

.card-bg-red {
  background-color: #F3E1E1; 
}

.card-bg-red:hover {
  background-color: #F8ECEC;
}

.card-button-red {
    background-color: #F3E1E1;
} 

.card-button-red:hover {
    background-color: #F8ECEC;
}

/* Orange */

.card-bg-orange {
  background-color: #F3EAE1; 
}

.card-bg-orange:hover {
  background-color: #F8F2EC;
}

.card-button-orange {
    background-color: #F3EAE1;
} 

.card-button-orange:hover {
    background-color: #F8F2EC;
}

/* Yellow */

.card-bg-yellow {
  background-color: #F3F3E1; 
}

.card-bg-yellow:hover {
  background-color: #F7F7E7;
}

.card-button-yellow {
    background-color: #F3F3E1;
} 

.card-button-yellow:hover {
    background-color: #F7F7E7;
}

/* Green */

.card-bg-green {
  background-color: #E3F3E1; 
}

.card-bg-green:hover {
  background-color: #EDF9EB;
}

.card-button-green {
    background-color: #E3F3E1;
} 

.card-button-green:hover {
    background-color: #EDF9EB;
}

/* Blue */
.card-bg-blue {
  background-color: #E1EBF3; 
}

.card-bg-blue:hover {
  background-color: #ECF3F8;
}

.card-button-blue {
    background-color: #E1EBF3;
} 

.card-button-blue:hover {
    background-color: #ECF3F8;
}

/* Purple */

.card-bg-purple {
  background-color: #ECE1F3; 
}

.card-bg-purple:hover {
  background-color: #F1E7F7;
}

.card-button-purple {
    background-color: #ECE1F3;
} 

.card-button-purple:hover {
    background-color: #F1E7F7;
}

/* CARDS END */

/* LONG CARDS START */

.long-card-container {
  width: 100%;
  margin: 0 auto;
}

.long-card {
  display: flex;
  align-items: center;
  width: 100%;
  background: #fff;
  border: 1px solid #ddd;
  margin-bottom: 20px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: background 0.3s;
}

.long-card:hover {
  background: #F1FEE6;
}

.long-card img {
  width: 120px;
  height: 120px;
  object-fit: cover;
}

.long-card-text {
  padding: 20px;
  flex: 1;
}

.long-card-text h2 {
  margin: 5px 0 5px 0;
	font-family: arial, sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	color: #555;
}

.long-card-text p {
  margin: 0;
  font-size: 1em;
  color: #555;
}

@media (max-width: 776px) {
  .long-card {
    flex-direction: column;
    text-align: center;
  }

  .long-card img {
    width: 100%;
    height: auto;
    max-height: 400px;
	margin-bottom: 10px;
  }

  .long-card-text {
    padding: 15px;
  }
}

/* LONG CARDS END */

/* FORMS START */	

input[type=text], input[type=password] {
	width: 100%;
	padding: 8px;
	margin: 8px 0;
	box-sizing: border-box;
	border: 1px solid #CDCDCD;
	border-radius: 4px;
	}	
	
select, input[type=date], input[type=number] {
	width: 100%;
	padding: 8px;
	border: none;
	border-radius: 4px;
	background-color: #FFF;
	border: 1px solid #CDCDCD;
	margin: 8px 0px;
	}

.formbutton {
	border: none;
	color: #FFF;
	padding: 8px;
	text-decoration: none;
	font-size: 0.9em;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 6px;
	}

.formbutton-green {
	background-color: #04AA6D;
	}
	
.formbutton-green:hover {
	background-color: #09BD73;	
	}
	
.formbutton-blue {
	background-color: #3072D4;
	}
	
.formbutton-blue:hover {
	background-color: #5D92E1;	
	}
	
.formbutton-red {
	background-color: #D43062;
	}
	
.formbutton-red:hover {
	background-color: #DA5E84;	
	}
	
.formbutton:disabled {
    background-color: #E0E0E0;
	cursor: auto;
	}
	
.form_upload label {
	width: 100%;
	background-color: #04AA6D;
	border: none;
	color: #FFF;
	padding: 8px;
	text-decoration: none;
	font-size: 0.9em;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 6px;
}

input, button {
    border: 0;
}

.iconlink_button {
	margin: 0;
	padding: 0;
	cursor: pointer;
	background-color: #F7F7F7;
	}

input[type=submit], input[type=reset] {
	width: 100%;
	}
	
input[type=checkbox], input[type=radio], input[type=date], input[type=month] {
	padding: 10px 0;
	margin: 10px 2px;
	}
	
input:focus, textarea:focus, select:focus {
	border: 1px solid #84C2F2;
	background-color: #FFF;
	}
	
textarea {
	width: 100%;
	height: 150px;
	padding: 15px;
	box-sizing: border-box;
	border: 1px solid #CDCDCD;
	border-radius: 4px;
	background-color: #fff;
	resize: none;
	font-family: arial, sans-serif;
	font-size: 0.9em;
	line-height: 1.5;
	color: #444;
	}
	
select.required, input[type=text].required, input[type=password].required, input[type=date].required, .required {
  box-sizing: border-box;
  border: 1px solid #D38585;
  background-color: #FFF9F9;
}

.req_wrap {
    position: relative;
}

.req_wrap input {
    padding-right: 50px; /* Make room for the icon */
}   

.req_tooltip {
    position: absolute;
    right: 10px; /* Adjust as needed */
    top: 7px; /* Adjust based on input height */
    width: 30px; /* Width of the tooltip */
    /* Add additional styling for the tooltip wrapper as needed */
}

.req_icon {
    position: absolute;
    right: 7px; /* Align to the right edge of .req_tooltip */
    top: 9px; /* Align to the top of .req_tooltip */
    max-width: 25px; /* Size of your icon */
    /* Add more styling for the icon as needed */
}

/* The container */
.checkwrap {
  display: block;
  position: relative;
  padding-left: 55px;
  cursor: pointer;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkwrap input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark, .radio {
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 40px;
  background-color: #eee;
}

.radio {
	border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.checkwrap:hover input ~ .checkmark, .checkwrap:hover input ~ .radio {
  background-color: #ccc;
}

/* When the checkbox is checked, add a green background */
.checkwrap input:checked ~ .checkmark {
  background-color: #04AA6D;
}

.checkwrap input:disabled ~ .checkmark {
  background-color: #F1E3E3;
}

.checkwrap input:checked ~ .radio {
  background-color: #058AA7;
}


/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after, .radio:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkwrap input:checked ~ .checkmark:after, .checkwrap input:checked ~ .radio:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkwrap .checkmark:after {
  left: 16px;
  top: 12px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Style the checkmark/indicator */
.checkwrap .radio:after {
  left: 15px;
  top: 15px;
  width: 10px;  /* Adjusted to create a circle */
  height: 10px; /* Adjusted to create a circle */
  background: white; /* The color of the circle */
  border-radius: 50%; /* This creates the circular shape */
  content: ""; /* Ensures the pseudo-element is displayed */
  display: block; /* Ensures the pseudo-element is displayed */
  /* Removed the border and transform properties as they are no longer needed */
}
/* FORMS END */	

/* ATTENDANCE TABLE START */	
  .week-container {
    display: flex;
    width: 100%; /* Container takes full width */
    gap: 5px; /* Creates space between the divs */
  }

  .day {
    flex: 1; /* Each div takes equal space */
    background-color: #fff;
    position: relative; /* Position relative for absolute checkbox positioning */
    padding: 5px; /* Padding to ensure space inside the div */
    font-size: 1.1em;
    line-height: 40px;
    min-height: 50px;
  }
  
  .day:hover, .day:active {
    cursor: pointer;
    background-color: #2CD8B6; /* Lighter shade on hover */
  }

  /* Media query for screens less than 765px wide */
  @media screen and (max-width: 765px) {
    .week-container {
      flex-direction: column;
    }
    .day {
      flex: none; /* Override the flex: 1; property */
      width: 100%; /* Each div takes full width */
      margin-bottom: 5px; /* Add space between the items */
    }
    /* Last child shouldn't have a margin-bottom to maintain consistent spacing */
    .day:last-child {
      margin-bottom: 0;
    }
  }
	
/* ATTENDANCE TABLE END */
	
/* COLUMNS START */	

.wrap {
	border-radius: 10px;
	}

.colwrap, .rowwrap, .topwrap {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: 0;
	border: 0;
	}
	
.buttonwrap, .buttonwrap-static {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0;
	margin: 0;
	border: 0;
	}
	
.row_parent {
    width: 100%;
    display: flex;
    gap: 5px;
}

.row_child {
    flex: 1; /* Equal width */
}

/* Responsive behavior */
@media (max-width: 775px) {
    .row_parent {
        flex-direction: column;
		gap: 0;
    }

    .row_child {
        width: 100%; /* Expand to full width */
    }
}
	
.subwrap  {
	text-decoration: none;
	color: #000;
	display: flex;
	flex: 1;
	}

.col, .row {
	}
	
.col-flex, .row-flex, .button-flex, .button-flex-static, .button-flex-left {
	flex: 1;
	margin: 0 1%;
	}
	
.button-flex-left p {
	size: 1em
	color: #666;
	font-weight: bold;
	}
	
.form-flex-wrap, .flex_button_wrap {
	display: flex;
	gap: 10px;
	}	
	
.form-flex, .flex_button {
	flex: 1 0 0;
	}
	
.flex_button {
	text-decoration: none;
    color: #555;
	padding: 5px 0;
	font-size: 0.9em;
	}
	
.button-flex a, .button-flex-static a, .button-flex-left a {
    display: flex;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #555;
	padding: 5px 0;
	font-size: 0.9em;
	}	

.button-flex a, .button-flex-static a {
	justify-content: center;
    align-items: center;
	}
	
.button-flex-left a {
	justify-content: flex-start;
    align-items: center;
	}
	
.button-flex a:hover, .button-flex-static a:hover, .button-flex-left a:hover {
	text-decoration: none;
	}
	
.month_button_container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
	margin-bottom: 5px;
}

.month_button {
    background-color: #FFF;
    color: #555;
    font-family: Arial, sans-serif;
	font-size: 0.9em;
    text-align: center;
    flex: 1;
    padding: 10px;
    box-sizing: border-box;
    text-decoration: none;
    transition: background-color 0.3s;
}

.month_button:hover, .month_button_complete:hover  {
	color: #555;
    background-color: #F1FEE6;
}

.month_button_complete {
	background-color: #E6FDD3;	
}

.month_button_active {
	background-color: #FCE3D8;
}

.month_button_active:hover {
	background-color: #FEEEE6;	
}

/* Responsive design for screen sizes below 725px */
@media (max-width: 725px) {
    .month_button_container {
        flex-direction: column;
    }

    .month_button {
        width: 100%;
		line-height: 20px;
    }
}

	
.pagehead {
	padding-bottom: 5px;
	border-bottom: 3px solid #E0E0E0;
	margin-bottom: 20px;
	}
	
.profilehead {
	padding-bottom: 2px;
	border-bottom: 3px solid #E0E0E0;
	margin-bottom: 20px;
	}
	
.breadcrumbs {
	margin-top: -10px;
	border-bottom: 3px solid #E0E0E0;
	margin-bottom: 20px;
	}
	
.subhead {
	margin-bottom: 10px;
	}

.col-310px {
	width: 310px;
	padding: 0 10px 10px 10px;
	/*margin-right: 1%;*/
	}

/* COLUMNS END */	
/* BLUE SIDENAV START */	

.outer-wrap {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: 10px;
	}
	
.inner-wrap {
	flex: 1;
	padding: 15px 12px 15px 0;
}	

@media (min-width: 775px) and (max-width: 975px) {
	.inner-wrap {
		flex: 1;
		padding: 15px 12px 15px 12px;
	}	
}

@media (max-width: 775px) {
	.outer-wrap {
		margin: 0;
	}	
	.inner-wrap {
		flex: 1;
		padding: 0;
	}
}

.sidenav {
	min-width: 200px;
	width: 200px;
	padding: 10px 0 10px 0;
	border-radius: 10px 0 0 10px;
	background-color: #449FE4;
}

@media (max-width: 1300px) {
	.sidenav-body-wrap {
		margin: 0;
	}
	.sidenav {
		display: none;
	}
}


@media (min-width: 975px) and (max-width: 1200px) {
	
}

.sidenav_button, .sidenav_alt_button, .sidenav_profile_button, .popMenu_button {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 8px 12px 8px 12px;
}

.sidenav_profile_button {
	padding: 4px 12px 4px 12px;	
}

.sidenav_button:hover {
	background-color: #6DB4EB;
}

.sidenav_alt_button {
	background-color: #5CAAE6;
}

.sidenav_alt_button:hover {
	background-color: #80C3F6;
}

.sidenav_profile_button {
	background-color: #6DB4EB;
}

.sidenav_profile_button:hover {
	background-color: #80C3F6;
}

.popMenu_button:hover {
	background-color: #F1FEE6;
}

.sidenav_button_left {
	display: flex;
	flex-grow: 1;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sidenav_button_left a {
	flex-grow: 1;
}

.sidenav_button_right {
	display: flex;
	min-width: 30px;
	width: 30px;

	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	color: #84C2F2;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
}

.sidenav_button_right:hover {
	background-color: #84C2F2;
	color: #A6D3F6;
}

.sidenav_button_wrap {
	display: none;
}
	
.sidenav_button a, .sidenav_button a:hover, .sidenav_alt_button a, .sidenav_alt_button a:hover, .popMenu_button, .popMenu_button a {
	text-decoration: none;
}
	
.sidenav_button img, .sidenav_alt_button img, .popMenu_button img {
	width: 24px;
	max-width: 24px;
	margin-right: 8px;
}

.sidenav_profile_button img {
	width: 30px;
	max-width: 30px;
	margin-right: 8px;
}

.sidenav_profile_button span {
	font-size: 0.9em;
	font-style: italic;
}
	
.sidenav_button_bg, .sidenav_button_sm {
	flex: 1;
	margin: 0;
}

.sidenav_button_bg a, .sidenav_button_sm a, .sidenav_button_right a {
    display: flex;
	justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #fff;
}

.sidenav_button_bg a, .sidenav_button_right a {
	padding: 5px 0;
	font-size: 1em;	
	font-weight: bold;
}

.sidenav_button_sm a {
	padding: 5px 0 5px 32px;
	font-size: 0.9em;	
}

/* These two undo/overwrite some elements of sidenav_button_bg above*/
.popMenu_button {
	margin: 0;
	}

.popMenu_button a {
	color: #666;
	font-weight: normal;
	font-size: 0.9em;	
	}

/* BLUE SIDENAV END */
/* RESPONSIVE COLUMNS START */

@media (max-width: 1080px) {
	.buttonwrap {
		width: 100%;
		flex-wrap: wrap;
		flex-direction: column;
		margin: 0;
	}
	.button-flex, .button-flex-left {
		width: 100%;
		margin: 2px 0;
		justify-content: center;
	}
	.button-flex a, .button-flex-left a {
		padding: 10px 0;
		font-size: 0.9em;
	}
	.iconbutton img, .topnav-iconbutton img {
		max-width: 40px;
	}
}

/* navbar drops from side to bottom */
@media (max-width: 975px) {
	.colwrap, .buttonwrap {
		width: 100%;
		flex-wrap: wrap;
		flex-direction: column;
		margin: 0;
	}
	.col-310px, .col {
		width: 100%;
	}
	.col-310px {
		padding: 20px 10px 10px 10px;
		border-top: 5px solid #888;
	}
	.col-flex, .button-flex, .button-flex-left {
		width: 100%;
		margin: 0;
	}

	.button-flex, .button-flex-left {
		width: 100%;
		margin: 2px 0;
		display: flex;
		justify-content: center; 
		align-items: center;
	}
	.button-flex a, .button-flex-left a {
		justify-content: center;
		align-items: center;
		padding: 10px 0;
		font-size: 1.2em;
	}
	.iconbutton img, .topnav-iconbutton img {
		max-width: 40px;
	}

}

/* RESPONSIVE COLUMNS END */	
/* NOTICES START */	

.notice {
	display: flex;
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 10px;
	}
	
.notice-info {
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 10px;
	background-color: #FFF3DF; /* yellow */
	border: 3px solid #FCD8AA;
	}
	
.greybox {
	background-color: #EDEDED;
	background: linear-gradient(to bottom, #EDEDED, #F7F7F7);
	padding: 12px;
	border-radius: 10px;	
	}	
	
.enrollment-info {
	background-color: #EDEDED;
	background: linear-gradient(to bottom, #EDEDED, #F7F7F7);
	padding: 12px;
	border-radius: 10px;
	}	
	
.closeable {
	position: relative;
    transition: opacity 0.5s, max-height 0.5s 0.5s; /* 0.5s delay on max-height */
    opacity: 1;
    overflow: hidden;
	margin-bottom: 10px;
	}
	
.notice-close {
	position: absolute;
	top: 10px;
	right: 10px;
	color: inherit;
	opacity: 0.4;
	cursor: pointer;
	}

.notice-close:hover {
	color: #F00;
	opacity: 0.8;
	}
	
.notice-info ul {
	padding-top: 1em;
	}
	
.notice-info li {
	padding-bottom: 1em;
	}
	
.notice-alert {
	color: 000;
	background-color: #FFF3DF; /* yellow */
	border: 3px solid #FCD8AA;
	}
	
.notice-fail {
	color: #000;
	background-color: #FDCBC3; /* red */
	border: 3px solid #FCAEA4;
	}

.notice-success {
	color: #000;
	background-color: #AAE2CB; /* green */	
	border: 3px solid #98DABD;
	}
	
.notice-help {
	color: #000;
	background-color: #E0F0F4; /* blue */	
	border: 3px solid #9FC9E3;
	}
	
.notice-grey {
	color: 000;
	background-color: #E0E0E0; /* grey */
	border: 3px solid #D0D0D0;
	}
	
.big_notice_parent {
    display: flex;
    align-items: flex-start; /* Aligns children to the top */
    align-items: center; /* Optional: vertically center-aligns the children */
	border-radius: 10px;
}

.big_notice_left {
    flex: 0 1 20%;
    max-width: 100px;
	align-self: flex-start; /* Ensures the image stays at the top */
}

.big_notice_left img {
    width: 100%;
	padding: 10px;
    height: auto; /* Ensures the image maintains its aspect ratio */
}

.big_notice_right {
    flex: 1;
    padding-left: 20px; /* Optional: Adds some space between the image and the text */
}	
	
/* NOTICES END */	
/* MODALS START */	


/* MODALS END */	
/* LIST ITEMS START */
	
.list-item, .list-head {
	margin-bottom: 5px;
	color: #555;
	}
	
.list-item {
	border: 2px solid #FFF;
	cursor: pointer;
	}
	
.list-item-nav {
	padding: 10px;
	color: #0366CC;
	border-radius: 10px;
	}
	
.list-item:hover {
/*	border: 2px solid #D6F6CE; */
	border: 2px solid #F1FEE6;
	}
	
.list-item-indent, .list-item-indent:hover {
	margin-left: 10px;
	border-left: 5px solid #E0E0E0;	
	}
	
.list-head {
	background-color: #EDEDED;
	border: 5px solid #EDEDED;
	}

.list {
	height: 40px;
	}
	
.list, .list_flex {
	padding: 12px 0;
	}
	
.list select {
	width: 100%;
	padding: 12px;
	border: none;
	border-radius: 4px;
	background-color: #FFF;
	margin: 0;
	}
	
.list a {
	text-decoration: none;
	}

.list-tall {
	padding: 12px 0;
	line-height: 160%;
	}
	
/* LIST ITEMS END */

/*CHAT BUBBLE START*/
.chatbox, .chatbox_comment {
	position: relative;
	background: #FFF;
	border: 2px solid #ccc;
	padding: 5px 16px 5px 16px;
	margin-left: 25px;
	margin-bottom: 10px;
	border-radius: 10px;
	font-size: 0.9em;
}

.chatbox {
	padding: 36px 16px 5px 16px;
}

.chatbox:after, .chatbox:before, .chatbox_comment:after, .chatbox_comment:before {
	right: 100%; /*left: 100% for right arrow*/
	top: 20px; /*was 50%*/
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.chatbox:after, .chatbox_comment:after {
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #FFF;  /*border-left-color: #fff for right arrow*/
	border-width: 10px;
	margin-top: -10px;
}
.chatbox:before, .chatbox_comment:before {
	border-color: rgba(204, 204, 204, 0);
	border-right-color: #ccc;  /*border-left-color: #ccc for right arrow*/
	border-width: 12px;
	margin-top: -12px;
}

.chatbox_comment textarea {
	margin: 0;
	border: 0;
	padding: 5px 0 5px 0;
	resize: vertical;
	font-family: arial, sans-serif;
	font-size: 1em;
	line-height: 1.7;
	color: #444;
	min-height: 80px;
	height: 80px;
	overflow: hidden;
	}
	
.chatbox_comment textarea:focus {
	outline: none;
}

.chatbox_footer, .chatbox_header {
    position: absolute;
    padding: 10px 0;
    width: 100%;
}

.chatbox_header {
    top: 0;
}

.chatbox_footer {
    bottom: 0;
}

.chatbox-info {
    font-size: 0.9em;
    color: #aaa;
    display: block; /* Ensure it takes the full width on smaller screens */
}

.chatbox-links {
    font-size: 1em;
    color: #aaa;
    display: none; /* Ensure it takes the full width on smaller screens */
    margin-right: 30px;
}

.chatbox:hover .chatbox-links {
    display: block;
}

/* Styles for larger screens (≥ 675px) */
@media screen and (min-width: 675px) {
    .chatbox-info {
        float: left;
        width: auto; /* Reset width for floating */
    }

    .chatbox-links {
        float: right;
        width: auto; /* Reset width for floating */
    }
}
/*CHAT BUBBLE END*/
/*WEEK COLUMNS START*/

.class_week_wrap, .vacancy_week_wrap {
    display: flex;
    overflow: hidden;
    position: relative;
}

.vacancy_week_wrap {
    display: flex;
    position: relative;
}

.class_week_col, .vacancy_week_col {
    flex: 1 1 auto;
    box-sizing: border-box;
}

.child_week_col, .child_week_col_head, .child_week_col_subhead, .child_vacancy_week_col, .child_vacancy_week_col_head, .child_vacancy_week_col_subhead {
	border: 1px solid #D8D8D8;
    box-sizing: border-box;	
}

.class_week_col, .vacancy_week_col {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers content vertically */
    align-items: center;     /* Centers content horizontally */
    text-align: center;      /* Centers text horizontally */
    height: 100%;            /* Ensure the column takes full height */
    box-sizing: border-box;
}

.child_week_col_head, .child_week_col_subhead, .child_week_col, .child_vacancy_week_col, .child_vacancy_week_col_head, .child_vacancy_week_col_subhead {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
	padding: 5px;
}

.child_week_col_head, .child_vacancy_week_col_head {
    flex: 0 0 auto; /* Adjust the height according to your need */
	font-size: 1.1em;
}

.child_week_col_subhead, .child_vacancy_week_col_subhead {
    flex: 0 0 auto; /* Adjust the height according to your need */
	font-size: 0.9em;
}

.child_week_col, .child_vacancy_week_col {
    flex: 1; /* Allow the child columns to grow and take available space */
	font-size: 0.9em;
	max-height: 50px;
	overflow: hidden;
	color: #555;
}

@media (min-width: 1250px) {
    .class_week_col, .vacancy_week_col {
        flex: 1 0 14.2857%;
    }
}

@media (min-width: 1026px) and (max-width: 1249px) {
    .class_week_col, .vacancy_week_col {
        flex: 1 0 20%;
    }
}

@media (min-width: 855px) and (max-width: 1025px) {
    .class_week_col, .vacancy_week_col {
        display: none;
    }

    .class_week_col:nth-child(3),
    .class_week_col:nth-child(4),
    .class_week_col:nth-child(5),
    .vacancy_week_col:nth-child(3),
    .vacancy_week_col:nth-child(4),
    .vacancy_week_col:nth-child(5),	{
        display: block;
        flex: 1 0 33.3333%;
    }
}

@media (max-width: 854px) {
    .class_week_col {
        display: none;
    }

    .class_week_col:nth-child(1), .vacancy_week_col:nth-child(1) {
        display: block;
        flex: 1 0 100%;
    }
}

.arrow {
    display: none;
    position: absolute;
    top: 10px;
    width: 30px;
    height: 30px;
    background-color: #449FE4;
    color: #FFF;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    z-index: 1000;
}

.arrow-left {
    left: 10px;
}

.arrow-right {
    right: 10px;
}

@media (max-width: 1249px) {
    .class_week_wrap:hover .arrow {
        display: block;
    }
}



/*WEEK COLUMNS END*/

/* RESPONSIVE LISTS START */	

.hide525 {
	display: block;
	}
	
	@media (max-width: 525px) {
		.hide525 {
			display: none;
			width: 0;
		}
	}

.hide550 {
	display: block;
	}
	
	@media (max-width: 550px) {
		.hide550 {
			display: none;
			width: 0;
		}
	}

.hide575 {
	display: block;
	}
	
	@media (max-width: 575px) {
		.hide575 {
			display: none;
			width: 0;
		}
	}
	
.hide600 {
	display: block;
	}
	
	@media (max-width: 600px) {
		.hide600 {
			display: none;
			width: 0;
		}
	}
	
.hide625 {
	display: block;
	}
	
	@media (max-width: 625px) {
		.hide625 {
			display: none;
			width: 0;
		}
	}
	
.hide650 {
	display: block;
	}
	
	@media (max-width: 650px) {
		.hide650 {
			display: none;
			width: 0;
		}
	}
	
.hide675 {
	display: block;
	}
	
	@media (max-width: 675px) {
		.hide675 {
			display: none;
			width: 0;
		}
	}

.hide775 {
	display: block;
	}
	
	@media (max-width: 775px) {
		.hide775 {
			display: none;
			width: 0;
		}
	}

.hide875 {
	display: block;
	}
	
@media (max-width: 875px) {
	.hide875 {
		display: none;
		width: 0;
	}
}

.hide975 {
	display: block;
	}
	
@media (max-width: 975px) {
	.hide975 {
		display: none;
		width: 0;
	}
}

/* RESPONSIVE LISTS END */	
/* LIST IMAGE START */		
	
.pic, .iconpic {
	max-width: 40px;
	width: 40px;
	}
	
.pic {
  display: inline-block;
  border-radius: 50%;
  border: 2px solid #FFF;
  overflow: hidden;
  width: 40px; /* or match image size */
  height: 40px; /* same as width for perfect circle */
}

.pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.iconpic img {
	max-width: 35px; 
	padding-top: 7px; 
	padding-left: 8px;
	}
	
.badge {
	max-width: 80px;
	width: 80px;
	}
	
.badge img {
	border-radius: 50%;
	border: 5px solid #D8DFE2;
	}
	
.badgewrap {
	padding: 5px;
	}
	
.badge_body h1 {
	color: #555;
	font-size: 1em;
	font-weight: 600;
	margin: 6px 0 0 10px;
	padding: 0;
}	

.badge_body p {
	color: #777;
	font-size: 0.9em;
	margin: 0 0 0 10px;
}

.badge_body h4 {
	color: #888;
	font-size: 0.7em;
	margin: 0 0 0 10px;
}
	
/* LIST IMAGE END */
/* BASIC FORMAT START */

.pad-left {
	margin-left: 10px;
	}
	
.pad-right {
	margin-right: 10px;
	}
	
.pad-bottom {
	margin-bottom: 10px;
	}	
	
.sandwich {
	margin: 10px 0;
	}
	
.bg-white, .bg-hover {
	background-color: #FFFFFF;
	}
	
.bg-hover-alt:nth-child(odd) {
  background-color: #FFFFFF;
}

.bg-hover-alt:nth-child(even) {
  background-color: #FCFCFC;
}
	
.bg-lightgrey {
	background-color: #FCFCFC;
	}

.bg-grey {
	background-color: #F7F7F7;
	}
	
.bg-darkgrey {
	background-color: #E8E8E8;
	}	
	
.bg-darkergrey {
	background-color: #D8D8D8;
	}	
	
.bg-darkestgrey {
	background-color: #C1C1C1;
	}		
	
.bg-sunday, .bg-saturday {
	background-color: #EBFFEF; /*light green*/
	}	
	
.bg-monday {
	background-color: #EBF3FF; /*light blue*/
	}		
	
.bg-tuesday {
	background-color: #F8EBFF; /*light purple*/
	}	

.bg-wednesday {
	background-color: #FFEBFB; /*light pink*/
	}		
	
.bg-thursday {
	background-color: #FFEBEB; /*light red*/
	}	

.bg-friday {
	background-color: #FFFDEB; /*light yellow*/
	}		
	
.bg-red {
	background-color: #E2B6AA;	
	}
	
.border-red {
	border: 2px solid #E2B6AA;
	}	
	
.bg-green {
	background-color: #AAE2CB;
	}

.border-green {
	border: 2px solid #AAE2CB;
	}
	
.bg-yellow {
	background-color: #F0EFC6;
	}

.border-yellow {
	border: 2px solid #F0EFC6;
	}	

.bg-orange {
	background-color: #EDDBB9;
	}

.border-orange {
	border: 2px solid #EDDBB9;
	}		
	
.bg-blue {
	background-color: #AACAE2;
	}

.border-blue {
	border: 2px solid #AACAE2;
	}	
	
.bg-purple {
	background-color: #CEAAE2;
	}

.border-purple {
	border: 2px solid #CEAAE2;
	}	

.bg-hover:hover, .bg-hover-alt:hover {
	background-color: #F1FEE6;
	}

.round {
	border-radius: 15px;
	padding: 10px;
	}
	
.align-right {
	text-align: right;
	}
	
.float-right {
	float: right;
	}
	
.align-left {
	text-align: left;
	}
	
.float-left {
	float: left;
	}
	
.clear {
	clear: both;
	}
	
.align-center {
	text-align: center;
	}

.border-none, .border-none:hover {
	border: 0;
	}
	
.nocursor {
	cursor: auto;
	}
	
.w14p {
	width: 14%;
	border-radius: 8px;
	overflow: hidden;
	}
	
.w100p {
	width: 100%;
	}
	
.w260 {
	width: 260px;
	}
	
.w240 {
	width: 240px;
	}
	
.w220 {
	width: 220px;
	}
	
.w200 {
	width: 200px;
	}
	
.w180 {
	width: 180px;
	max-width: 180px;
	}

.w160 {
	width: 160px;
	}
	
.w140 {
	width: 140px;
	}
	
.w120 {
	width: 120px;
	}
	
.w100 {
	width: 100px;
	}
	
.w80 {
	width: 80px;
	}
	
.w60 {
	width: 60px;
	}
	
.w40 {
	width: 40px;
	}
	
.divlink_wrap {
  position: relative; /* Needed to position the <a> relative to this div */

}

.divlink {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  text-decoration: none; /* No underline */
  z-index: 1; /* Make sure it's behind any text/content if needed */
}
	
.iconlink {
	width: 36px;
	}

.iconlinksm {
	width: 26px;
	}	
	
.iconbutton, .iconbutton_notext, .topnav-iconbutton, .topnav-iconbutton_notext {
    display: flex;
    justify-content: center;
    align-items: center;
	}
	
.iconlink, .iconlinksm, .iconbutton, .iconbutton_notext, .topnav-iconbutton, .topnav-iconbutton_notext {
	padding: 5px;
	border-radius: 10px;
	}	
	
.iconbutton a, .iconbutton a:hover, .iconbutton_notext a, .iconbutton_notext a:hover, .topnav-iconbutton a, .topnav-iconbutton a:hover, .topnav-iconbutton_notext a, .topnav-iconbutton_notext a:hover {
	text-decoration: none;
	}
	
.iconlink img, .iconbutton img, .iconbutton_notext img, .topnav-iconbutton img, .topnav-iconbutton_notext img {
	width: 24px;
	max-width: 24px;	
	}
	
.iconbutton img, .topnav-iconbutton img {
	margin-right: 8px;
	}
	
.iconbutton_notext img, .topnav-iconbutton_notext img {
	margin: 0 4px;
	}	
	
.no-margin {
	margin: 0;
	}
	
.iconlinksm img {
	padding-top: 7px;
	max-width: 16px;	
	}
	
.iconbutton, .iconbutton_notext, .iconlink:hover {
	background-color: #FFF;
	}
	
.iconbutton:hover, a.iconlink:hover, .iconbutton_notext:hover {
	background-color: #F1FEE6;
	}
	
.topnav-iconbutton, .topnav-iconbutton_notext {
	background-color: #449FE4;
	}
	
.topnav-iconbutton:hover, .topnav-iconbutton_notext:hover {
	background-color: #6DB4EB;
	}	
	
.iconlinksm:hover {
	background-color: #F1FEE6;
	}
	
.button-flex {
	border: 2px solid #E0E0E0;
	}	
	
.button-flex-active, .button-flex-active:hover {
	border: 2px solid #167ECE;
	}
	
.font-size-120p {
	font-size: 1.2em;
	line-height: 1.5;
	}
	
.font-size-140p {
	font-size: 1.4em;
	line-height: 1.5;
	}
	
.font-size-160p {
	font-size: 1.6em;
	line-height: 1.5;
	}
	
.font-size-180p {
	font-size: 1.8em;
	}	
	
.font-size-200p {
	font-size: 2em;
	}	
	
.font-light {
	font-weight: normal;
	}
	
.font-heavy {
	font-weight: bold;
	}
	
.status-text p {
	font-size: 1em;
	font-weight: bold;
	line-height: 1.5;
	margin: 4px 0px 4px 0px;
	}
	
.status-text-active, .status-text-active p {
	color: #379F37;
	}

.status-text-waitlist, .status-text-waitlist p {
	color: #CF9335;
	}

.status-text-vacation, .status-text-vacation p {
	color: #3576CF;
	}

.status-text-probation, .status-text-probation p {
	color: #D6920E;
	}
.status-text-inactive, .status-text-inactive p {
	color: #CF3C35;
	}
	
.round_label {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 15px; /* rounds both ends */
  font-size: 14px;
  font-weight: bold;
}

.round_label_active {
  background-color: #379F37;
  color: #FFF;
}

.round_label_waitlist {
  background-color: #379F37;
  color: #FFF;
}

.round_label_vacation {
  background-color: #3576CF;
  color: #FFF;
}

.round_label_probation {
  background-color: #D6920E;
  color: #FFF;
}

.round_label_inactive {
  background-color: #CF3C35;
  color: #FFF;
}
	
/* BASIC FORMAT END */		


/* PROFILE START */
.pro-pic, .fac-pic {
    position: relative; /* Ensure the positioning context is set to the div */
    width: 285px;
    max-width: 285px;
    margin: 0;
    padding: 0;
    margin-right: 10px;
    box-sizing: border-box;
    border: 5px solid #FFF;
    border-radius: 15px;
    overflow: hidden; /* Ensures no overflow outside the border */
	transition: transform 0.3s ease;
}

.fac-pic {
	width: 400px;
	max-width: 400px;
	}

.pro-pic:hover, .fac-pic:hover {
    border: 5px solid #FFF;
	transform: scale(1.03);
}

.pro-pic img, .fac-pic img {
    border-radius: 15px;
    width: 100%;
    box-sizing: border-box;
}

.round_photo_200px {
    display: inline-block;	
}
.round_photo_200px img {
    border-radius: 50%;
    width: 200px;
    box-sizing: border-box;	
}

.delete-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    display: none; /* Hide the button by default */
    width: 26px; /* Set the width of the button */
    height: 26px; /* Set the height of the button */
	filter: drop-shadow(0px 0px 8px white);
}

.pro-pic:hover .delete-btn {
    display: block; /* Show the button on hover */
}



@media (max-width: 675px) {
    .pro-pic {
		max-width: 100%;
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }
}

} /* why is this here? if I delete it the layout is messed up. :( */

/* PROFILE END */

/* Tooltip container */

.tooltip-wrapper + .tooltip-wrapper {
  margin-top: 10px;
}

.tooltip-wrapper {
    width: fit-content;
}

.tooltip{
    position: relative;
}

.tooltip::before {
    position: absolute;
    content: ' ';
    background-color: #42668E;
    width: 15px;
    height: 15px;
    z-index: 500;
    opacity: 0;
    transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
    pointer-events: none;
}

.tooltip::after {
    content: attr(data-tooltip-text);
    white-space: nowrap;
    background-color: #42668E;
	font-size: 0.8em;
    border-radius: 5px;
    color: white;
    position: absolute;
    text-align: center;
    z-index: 555;
    opacity: 0;
    transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
    pointer-events: none;
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 .555555555555556rem;
}

.tooltip:hover::before, .tooltip:hover::after {
    opacity: 1;
}

.tooltip.t-top::before {
    top: 0;
    left: 50%;
    transform: translate(-50%, 0) rotate(45deg);
}

.tooltip.t-top::after {
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

.tooltip.t-top:hover::before {
    transform: translate(-50%, calc(-100% - 5px)) rotate(45deg);
}

.tooltip.t-top:hover::after {
    transform: translate(-50%, calc(-100% - 10px));
}

.tooltip.t-left::before {
    top: 25%;
    left: 0;
    transform: translate(0, 0%) rotate(45deg);
}

.tooltip.t-left::after {
    top: 0;
    left: 0;
}

.tooltip.t-left:hover::before {
    transform: translate(calc(-100% - 5px)) rotate(45deg);
}

.tooltip.t-left:hover::after {
    transform: translate(calc(-100% - 10px));
}

.tooltip.t-right::before {
    top: 25%;
    right: 0;
    transform: translate(0, 0%) rotate(45deg);
}

.tooltip.t-right::after {
    top: 0;
    right: 0;
}

.tooltip.t-right:hover::before {
    transform: translate(calc(100% + 5px)) rotate(45deg);
}

.tooltip.t-right:hover::after {
    transform: translate(calc(100% + 10px));
}

.tooltip.t-bottom::before {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0) rotate(45deg);
}

.tooltip.t-bottom::after {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

.tooltip.t-bottom:hover::before {
    transform: translate(-50%, calc(100% + 5px)) rotate(45deg);
}

.tooltip.t-bottom:hover::after {
    transform: translate(-50%, calc(100% + 10px));
}

@media (max-width: 775px) {
	
}

.prev_next_container {
	display: flex;
    width: 100%;
	}

.prev_next_box {
    flex: 1; /* Equal width for all boxes */
    padding: 0 10px 10px 10px;
    box-sizing: border-box;
	font-size: 0.9em;
    }

.prev_next_left {
    text-align: left;
    }

.prev_next_center {
    text-align: center;
    }

.prev_next_right {
    text-align: right;
    }

.nohover, .nohover:hover {
	background-color: inherit;
}

/*style.css*/
.hidden {
    display: none;
}

.popMenu {
    position: absolute;
    width: 200px;
	max-width: 200px;
    padding: 0;
    background-color: #FFF;
    box-shadow: 0px 0px 5px #0003;
    z-index: 1000; /* Ensures the div appears above other page content */
}

.tag_checkbox {
    display: none;
}

.tag_label {
    display: inline-block;
    font-family: Arial;
    color: #ffffff;
    font-size: 0.9em;
    padding: 6px;
    text-decoration: none;
    border-radius: 15px;
    background: #C45663; /* Red by default */
}

.tag_checkbox:checked + .tag_label {
    background: #56C499; /* Green when checked */
}

.tag_label:hover {
    cursor: pointer;
}

.tag_checkbox:checked + .tag_label:hover {
    background: #C45663; /* Red when checked and hovered */
}

.tag_checkbox:not(:checked) + .tag_label:hover {
    background: #56C499; /* Green when not checked and hovered */
}

.pointer:hover {
	cursor: pointer;
}

.appear_on_hover {
	
	display: none;
}

.list-item:hover .appear_on_hover {
	
	display: inline;
}

.pagination {
    margin-top: 20px;
    text-align: center;
}

.pagination a {
    margin: 0 4px;
    text-decoration: none;
    color: #64B5F6;
	background-color: #FFF;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.pagination a:hover {
    background-color: #64B5F6;
	color: #FFF;
}

.sponsored-box {
  position: relative;
  border: 1px solid grey;
  padding-top: 8px; /* Space for the label */
  margin-bottom: 20px;
}

.sponsored-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 2px 8px;
  font-size: 12px;
  color: grey;
  white-space: nowrap;
}

.sponsored-content {
  padding: 10px;
}

.infant {
	border: 3px solid #0BC802;
	}
	
.small_toddler {
	border: 3px solid #02C85B;
	}
	
.toddler {
	border: 3px solid #02C88E;
	}	
	
.big_toddler {
	border: 3px solid #02C8B3;
	}
	
.small_preschooler { 
	border: 3px solid #028EC8;
	}
	
.preschooler { 
	border: 3px solid #3F02C8;
	}
	
.big_preschooler { 
	border: 3px solid #9702C8;
	}
	
.pre_kinder { 
	border: 3px solid #C802AE;
	}
	
.kinder { 
	border: 3px solid #C8024D;
	}
	
.big_kinder { 
	border: 3px solid #C81002;
	}