#cal_Wrapper {
	width: 100%;
	max-width: 1080px;
	height: auto;
	padding: 10px;
	margin: 0px auto;
	text-align: center;
}

#cal_container {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-auto-columns: minmax(10%, auto);
	gap: 1px;

	padding: 5px;
	border-radius: 10px;

	position: relative;
	/*background-color: rgba(0,0,0, 0.5);
	margin: 10px auto;*/
}

/* Style first five (5) DoW Items [Mon to Fri]  */
#cal_container>div:nth-of-type(-n+5) {
	outline: solid 1px var(--prim_clr);
	outline-offset: 3px;

}

/* Style 6th & 7th DoW Items [Sat & Sun]  */
#cal_container>div:nth-of-type(6),
#cal_container>div:nth-of-type(7) {
	/*color: rgb(100,150,255);*/
	color: var(--sec_clr);
	outline: solid 1px var(--3rd_clr);
	outline-offset: 3px;
}

/* Style 6th DoW Item [Sat]  */
#cal_container>div:nth-of-type(6) {
	background-color: var(--prim_clr);
}

/* Style 7th DoW Item [Sun]  */
#cal_container>div:nth-of-type(7) {
	background-color: var(--4th_clr);
}

/*#cal_container > div:nth-of-type(7){
	color: rgb(100,150,255);
}*/
/*
#cal_container > .cal_item:nth-of-type(odd){
	background-color: rgba(0, 0, 0, 0.25);
}
#cal_container > .cal_item:nth-of-type(even){
	background-color: rgba(255, 255, 255, 0.25);
}*/
.fill_cal_item {
	padding: 1.5px;
	margin: 1.5px;
	/*min-height: 75px;
	width: 100px;*/
	border-radius: 10px;
	background-color: rgba(0, 0, 0, 0.15);
}

.fill_cal_item:empty {
	background: transparent;
}

.month_cal_item {
	text-align: center;
	padding: 2.5px 10px;
	margin: 5px 5px;
	/*height: 25px;*/
	width: fit-content;
	border-radius: 5px;
	/*background-color: rgba(255, 255, 255, 0.15);
	color: var(--prim_clr);*/
	/*box-shadow: 1px 1px 3px black;*/
	display: inline-block;
	cursor: pointer;
}

.month_cal_item {
	/*background-color: rgba(255, 255, 255, 0.75);
	color: #fff;*/
}

.cal_item {
	text-align: center;
	padding: 1.5px;
	margin: 1.5px;
	min-height: 25px;
	border-radius: 10px;
	background-color: rgba(0, 0, 0, 0.15);
	/*box-shadow: 0px 0px 5px black;*/
}

#cal_event_item {
	border-radius: 5px;
	padding: 2.5px;
	margin: 2.5px;
	height: fit-content;
	text-align: center;

	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;

	/*text-shadow: 1px 1px 2px var(--3rd_clr);*/
	transition: all 0.25s;
}

/*#cal_event_item:hover{
	position: absolute;
	height: 75px;
	width: 200px;
	top: 50%;
	transform: translateY(-50%);
	left:50%;
	transform: translateX(-50%);
	font-size: 1.5rem;
}*/

#cal_event_item>span {
	margin: 0 auto;
	width: 100%;
	display: none;
}

#cal_event_item>span:nth-of-type(1) {
	display: block;
}

#cal_event_item:hover>span {
	display: block;
}

#cal_event_item>span:empty {
	display: none;
}

#old_cal_event_item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	border-radius: 5px;
	padding: 2.5px;
	margin: 2.5px;

	text-align: center;

	background-color: #ddd;
	color: #ccc;

	/*text-shadow: 1px 1px 2px #333;*/
	transition: all 0.25s;
}

#old_cal_event_item>span {
	margin: 0 auto;
	width: 100%;
	color: #666;
	display: none;
}

#old_cal_event_item>span:nth-of-type(1) {
	display: block;
}

#old_cal_event_item:hover>span {
	display: block;
}

#old_cal_event_item>span:empty {
	display: none;
}

/*.day_name{
	font-size: 20px;
	background-color: rgba(0, 0, 0, 0.75);
	color: var(--3rd_clr);
	font-weight: bolder;
}*/
.BSA {
	background-color: darkgreen;
	color: #FFD700;
	border: solid 2px darkgreen;
}

.Boland {
	background-color: #000;
	color: var(--prim_clr);
	border: solid 2px var(--prim_clr);
}

.Sub-District {
	background-color: var(--prim_clr);
	color: var(--3rd_clr);
	border: solid 2px var(--3rd_clr);
}

.Junior {
	background-color: #ec407a;
	color: var(--3rd_clr);
	border: solid 2px var(--3rd_clr);
}

.Club {
	background-color: orangered;
	color: var(--sec_clr);
	border: solid 2px var(--3rd_clr);
}

.Other {
	background-color: darkred;
	color: var(--sec_clr);
	border: solid 2px var(--3rd_clr);
}

.EventClose {
	background-color: #fff;
	color: #000;
	border: solid 2px #000;
}

/*#old_cal_event_item + .BSA{
	border: 2px solid green;
}
#old_cal_event_item + .Boland{
	border: 2px solid var(--prim_clr);
}
#old_cal_event_item + .Sub-Disrtict{
	border: 2px solid blue;
}
#old_cal_event_item + .Club{
	border: 2px solid orangered;
}
#old_cal_event_item + .Other{
	border: 2px solid darkred;
}*/

.old_num_date span,
.new_num_date span,
.cur_day span {
	display: none;
}

.old_num_date,
.new_num_date,
.cur_day {
	display: inline-block;
	width: fit-content;
	height: fit-content;
	padding: 2.5px 5px;
	margin: 5px auto;
	font-size: 1.2rem;
	font-weight: 600;
	border-radius: 20px;
	transition: all 0.25s;
}

.new_num_date {
	background-color: rgba(0, 0, 0, 0.75);
	color: var(--prim_clr);
}

.old_num_date {
	background-color: #fff;
	color: var(--3rd_clr);
}

.cur_day {
	background-color: var(--prim_clr);
	color: black;
}

.DoW {
	font-weight: bolder;
	font-size: 1.3rem;
	background-color: rgba(0, 0, 0, 0.65);
	color: var(--prim_clr);
	text-align: center;
	margin: 5px;
	padding: 2px;
	border-radius: 5px;
	transition: all 0.25s;
}

.DoW span {
	visibility: none;
}

#cal_legend ul {
	display: flex;
	flex-direction: row;
	row-gap: 20px;
    column-gap: 5px;
	justify-content: center;
	align-items: center;
    flex-wrap: wrap;
}

#cal_legend ul li a {
	cursor: pointer;
	border-radius: 5px;
	padding: 5px;
    white-space: nowrap;
}

/*#filter_bsa, #filter_boland, #filter_sub-districts, #filter_club, #filter_other{
	display: none;
}*/
#filter_bsa {
	background-color: darkgreen;
	color: #FFD700;
}

#filter_boland {
	background-color: #000;
	color: var(--prim_clr);
}

#filter_sub-districts {
	background-color: var(--prim_clr);
	color: var(--3rd_clr);
}

#filter_junior {
	background-color: #ec407a;
	color: var(--3rd_clr);
}

#filter_club {
	background-color: orange;
	color: var(--sec_clr);
}

#filter_other {
	background-color: darkred;
	color: var(--sec_clr);
}


/*.filter_btn{
	padding: 2.5px 10px;
	background-color: transparent;
	margin-left: 50px;
	color: var(--3rd_clr);
	border-radius: 10px;
}*/

/*#calBlock, #calStriped, form #cal_form {
	display: none;
}
#calStriped + label{
	cursor: pointer;
	margin: 10px;
	font-size:30px;
}
#calBlock + label {
	cursor: pointer;
	margin: 10px;
	font-size:30px;
}
#cal_Block label.acticve{
	color: var(--prim_clr);
}
#cal_Striped label.acticve{
	color: var(--prim_clr);
}*/
.picMonths {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	flex-direction: row;
	gap: 2px;
	margin: auto;
	flex-wrap: wrap;
}

.picMonths li {
	list-style: none;
	font-size: 1.rem;
}

.cal_space {
	display: none;
}

#cal_FrontPage {
	display: none;
}

/*#form_add_event_docs{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1px;
	height: fit-content;
	width: fit-content;
	background-color: rgba(255,255,255,0.75);
	padding: 5px;
	border-radius: 5px;
	margin: 5px;
}
#form_add_event_docs input{
	border: solid blue 1px;
}
#form_add_event_docs span:empty{
	display:none;
}
#form_add_event_docs button{
	border: solid blue 1px;
	background-color: grey;
	padding: 2.5px 5px;
	margin: 2px;
	border-radius: 5px;
}
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; 
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  position: absolute;
  z-index: 1;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px; 
}
.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; 
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}
*/

/* ==== Mobile Device Settings ===== */
@media only screen and (min-width: 600px) {
	.cal_gap {
		display: none;
	}
}

@media only screen and (max-width: 600px) {
	#cal_container {
		display: flex;
		flex-direction: column;
	}

	#cal_event_item {
		font-size: 1.2rem;
	}

	#cal_event_item:hover {
		font-size: 2.5rem;
	}

	#old_cal_event_item {
		font-size: 1.2rem;
	}

	#old_cal_event_item:hover {
		font-size: 2.5rem;
	}

	.num_date {
		font-size: 1rem;
		width: 20px;
		height: 20px;
	}

	.old_num_date {
		font-size: 1rem;
		height: 20px;
		width: fit-content;
	}

	.cur_day {
		font-size: 1rem;
		height: 20px;
		width: fit-content;
	}

	.new_num_date {
		font-size: 1rem;
		height: 20px;
		width: fit-content;
	}

	.old_num_date span,
	.new_num_date span,
	.cur_day span {
		display: inline-block;
	}

	.cal_gap {
		width: 100%;
		height: 30px;
	}

	.DoW {
		display: none;
		font-size: 1rem;
	}

	.DoW span {
		visibility: visible;
	}
}

@media print {
	@page {
		margin-top: 0.2cm;
		margin-bottom: 0.2cm;
		margin-left: 0.25cm;
		margin-right: 0.25cm;
	}

	body {
		visibility: visible;
		margin: auto;
	}

	html {
		background: transparent;
	}

	#cal_Wrapper {
		visibility: visible;
		position: relative;
		left: 0;
		top: 0px;
		margin: 0 auto;
		padding: 0px 3px;
		width: 100vw;
		background-color: #fff;
		clear: both;
		page-break-before: always;
		border: 2px goldenrod dashed;
	}

	#cal_legend:nth-of-type(2) {
		display: block;
		position: relative;
		top: 0;
		left: 50%;
		margin: 0 auto;
		transform: translateX(-50%);
	}

	h2 {
		font-size: 2.5rem;
	}

	/*.cal_item{
		min-height: 87px;
	}*/

	h1,
	.picMonths,
	.picYears,
	.navbar,
	.cal_gap,
	#header_Wrapper,
	.foot_links,
	.cal_change,
	#print_btn,
	#cal_legend,
	#cal_legend p {
		display: none;
	}

	#footer_Wrapper {
		display: flex;
		justify-content: center;
		align-content: center;
		margin: auto;
		width: 100vw;
		/*height: 100vh;*/
		border: solid 5px solid;
	}

	#DivSecCal1 {
		margin: 0;
	}

	#cal_FrontPage {
		display: flex;
		position: absolute;
		flex-direction: column;
		justify-content: center;
		align-content: center;
		width: 100vw;
		height: 60vh;
		top: 120px;
		margin: auto;
		padding: 30px;
		color: #000;
		text-align: center;
	}

	#cal_FrontPage img {
		display: block;
		height: 300px;
		margin: auto;
		filter: drop-shadow(0px 0px 5px #000);
	}

	#cal_FrontPage span:nth-of-type(1) {
		font-size: 42px;
	}

	#cal_FrontPage span:nth-of-type(2) {
		font-size: 38px;
	}

	#cal_FrontPage span:nth-of-type(3) {
		font-size: 54px;
	}

	.print_options {
		display: none;
	}
}