/*.hover-primary:hover{
	color: red;
}*/
.show{
	border: 1px solid green;
}
#settings{
	color: black;
	font-size: 1.5rem;
	margin-right: 2%;
	opacity: 0.5;
	transition: opacity 0.4s;
}
#settings:hover{
	color:black;
	opacity: 1;
	cursor: pointer;
}
#settings a:link{
	color:black;
	text-decoration: none;
}
#settings a:visited{
	color: black;
}
.elementOff{
	display: none;
}
#monthsContainer{
	width: 540px;
	height: 540px;
	border: 1px solid green;
}
.center-content{
	margin: 0;
	display: grid;
	place-items: center;
}
.calendarField{
	margin: 0;
}
.controlON{
	color: #19191a;
}
.controlOFF{
	color: grey;
}
.controlON:hover{
	color: grey;
	cursor: pointer;
}
ul{
	list-style-type: none;
}
.monthNav{
	padding-top: 2%;
	padding-bottom: 2%;
	font-size: 120%;
	margin-bottom: 10px;
	width: 100%;
	background-color: #5b6466;
	border-radius: 10px;
	border: 0px solid red;

}
.weekdays{
	margin: 0;
	padding: 0;
}
.weekdays li{
	background-color: #5b6466;
	text-align: center;
	margin: 0;
	padding: 0;
	display: block;
	float: left;
	width: 14.25%;
	margin-top: 10px;
	margin-bottom: 10px;
	border: 0px solid red;
}
#monthDays{
	padding: 1%;
	border-radius: 10px 10px 0 0;
	background-color: #5b6466;
	border: 0px solid white;
	width: 98%;
	height: 35px;
}
#monthDaysSqr{
	background-color: #5b6466;
	padding: 2%;
	width: 96%;
	height: 440px;
	border-radius: 0 0 10px 10px;
}
.daySqr{
	background-color: #327e12;
	transition: background-color 0.3s;
	
}
.daySqrUnav{
	background-color: #093c3d;
}
.daySqrNotUsed{
	background-color: #232026;
}
.daySqr:hover{
	background-color: #113f02;
	cursor: pointer;
}
#blur{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(25,25,26, .6) ;
	backdrop-filter: blur(.6em);
}
.hrContainerOn{
	border: 0px solid white;
	display: block;
	position: fixed;
	top: 5vh;
	left: 5vw;
	width: 400px;
	height: 93vh;
}
#title{
	position: relative;
	padding: 3%;
	font-size: 85%;
	text-align: center;
	width: 94%;
	background-color: #5b6466;
	border-radius: 10px;
	display: inline-block;
	margin-bottom: 2%;
}

#closePopUp:hover{
	cursor: pointer;
}
#hrsList{
	position: relative;
	display: block;
	padding: 3%;
	font-size: 100%;
	text-align: center;
	width: 94%;
	background-color: #5b6466;
	border-radius: 10px;
}
.buttonSaveOn{
	position: absolute;
	bottom: 10px;
	left: 38%;
	text-align: center;
	display: block;
	width: 120px;
	min-height: 25px;
	background-color: #b2b7b8;
	border-radius: 8px;
	cursor: pointer;
}
.buttons:hover{
	background-color: grey;
}
/*.serviceOn{
	display: block;
	border: 0px solid yellow;
}*/
#hrsList > select{
	padding: 2%;
	margin-top: 2%;
	width: 80%;
	text-align: center;
	font-family: monospace;
	font-size: 85%;
	border: 1px solid #b2b7b8;
	border-radius: 8px;
	background-color: #b2b7b8;
	outline: none;
}
.hrSqr{
	background-color: #856101;
	padding: 3%;
	text-align: center;
	float: left;
	border-radius: 10px;
	/*font-size: 15px;*/
	margin: 2px;
	box-shadow: 2px 2px 0px #3d3816;
	transition: background-color 0.3s;
}
.hrSqr:hover{
	background-color: #d4aa3a;
	cursor: pointer;
}
.hrSqr:active {
	transform: translateY(5px);
	box-shadow: 0 0 0 #3d3816;
}
.hiddenTest{
	display: block;
	border: 1px solid red;
}
.formTextStyle {
	font-weight: bold;
	color: #232026;
}
#userDetails div {
	border-bottom: 1px solid #232026;
}
#userDetails div:last-child{
	border-bottom: 0;
}
#userDetails div:first-child{
	border-bottom: 0;
}
#userDetails button {
	border: 0;
	text-decoration: none;
	padding: 3%;
	border-radius: 10px;
	background-color: #856101;
	box-shadow: 2px 2px 0px #3d3816;
	color: #232026;
	transition: background-color 0.3s;
}
#userDetails button:hover {
	background-color: #d4aa3a;
}
#userDetails button:active {
	box-shadow: 0 0 0 #3d3816;
}
.contactForm {
	background-color: whitesmoke;
}
.formButton {
	font-weight: bold;
	min-width: 10%;
	text-align: center;
	border: 0;
	text-decoration: none;
	padding: 0.8%;
	border-radius: 10px;
	background-color: #856101;
	box-shadow: 2px 2px 0px #3d3816;
	color: #232026;
	transition: background-color 0.3s ease;
}
.formButton:hover {
	background-color: #a47819;
}
.formButton:active {
	box-shadow: 0 0 0 #3d3816;
}
#treatments {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: whitesmoke;
}
/*.formFields{
	display: block;
	margin-top: 1%;
	border: 1px solid #ee7903;
	min-height: 25px;
	width: 100%;
	background-color: #b2b7b8;
	text-align: center;
	outline: none;
	border-radius: 5px;
	overflow-y: auto;
}*/
/*#userForm > fieldset{
	font-size: 77%;
	font-family: monospace;
	border: 1px solid grey;
	border-radius: 10px;
	text-align: left;	
}*/
#timeAndDate{
	text-align: center;
	min-height: 20px;
}
#timeAndDateHelp {
	font-weight: lighter;
}
.fieldError{
	color: red;
	font-size: 65%;
}
.borderBottom {
	border-bottom: 1px solid #c99700;
}
#calendarContainer{
	color: #f7e483;
	margin: 0;
	margin-top: 7vh;
	padding: 0;
	height: 65vh;
}

.footerStyle{
	color: #dcb857;
	margin: 0;
	min-height: 11vh;
}
.goldStripthick {
	min-height: 10px;
	width: 100%;
	background: radial-gradient(circle, #a47819, #dcb857, #c99700)	
}
.goldStripthin {
	margin-top: 1px;
	min-height: 2px;
	width: 100%;
	background: radial-gradient(circle, #a47819, #dcb857, #c99700)	
}
header{
	background-color: whitesmoke;
	margin: 0;
	min-height: 9vh;
}
.email-link{
	color: #dcb857;
	text-decoration: none;
	transition: color 0.3s;
}
.email-link:hover{
	color: #a47819;
}
/*
.tileOne{
	background-color: #003898;
}*/
@media (max-width: 576px) {
	.responsive-text{
		font-size: 0.9rem;
	}
	.calendarTileAll{
		width: 12.8%;
		min-height: 6vh;
	}
	.calendarTileMonth{
		font-weight: 600;
		text-align: center;
		width: 90%;
	}
	.calendarNavBar {
		width: 89.5%;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 7vh;
	}
}
@media (min-width: 576px) and (max-width: 1023px) {
	.responsive-text{
		font-size: 1rem;
	}
	.calendarTileMonth{
		font-weight: 600;
		text-align: center;
		width: 90%;
	}
	.calendarTileAll{
		width: 10%;
		min-height: 7vh;
	}
	.calendarNavBar {
		width: 70%;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 7vh;
	}
	
}
@media (min-width: 1023px) and (max-width: 1200px) {
	.responsive-text{
		font-size: 1.1rem;
	}
	.calendarTileMonth{
		font-weight: 600;
		text-align: center;
		width: 90%;
	}
	.calendarTileAll{
		width: 7.14%;
		min-height: 7vh;
	}
	.calendarNavBar {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 7vh;
	}
	
}
@media (min-width: 1200px) {
	.responsive-text{
		font-size: 1.1rem;
	}
	.calendarTileMonth{
		font-weight: 600;
		text-align: center;
		width: 90%;
	}
	.calendarTileAll{
		width: 4.5%;
		min-height: 7vh;
	}
	.calendarNavBar {
		width: 31.5%;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 7vh;
	}
}
#test p {
	margin: 0;
	display: inline-block;
	color: black;
}
.response_message{
	min-height: 75vh;
	color: #dcb857;
}