/* 	------------------------------- 
	The Therapy Centre
	------------------------------- */

:root {
	--background-page: 		#ffffcc;
	--color-page:			#000000;

	--background-content: 	#ffffcc;
	--color-content:		rgb(0, 153, 0);

	--background-reverse: 	rgb(0, 153, 0);
	--color-reverse:		#ffffcc;
}

/* 	--------------------------------
	clear all default margins and 
	padding for consistency
	------------------------------- */

* {
	margin: 		0;
	padding: 		0;
}

/* 	--------------------------------
	base css for basic html elements

	Make HTML5 elements block-level 
	"display:block;" for consistent 
	styling on old (non HTML5-compliant)
	browsers 
	------------------------------- */

html {
	box-sizing: 	border-box;
}

*, *:before, *:after {
	box-sizing: 	inherit;
}

header, 
main, 
nav, 
article, 
details, 
blockquote,
footer { 
	display: 		block; 
}


body {
	width: 			100%;
	font-family: 	'Noto Sans', sans-serif, verdana, arial;
	background: 	var(--background-page);
}

table, form, input, select {
	font: inherit;
}
 
p {
	display: block;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
}

table {
	border-collapse: collapse;
} 

th {
/*	padding-left: 5px;*/
/*	padding-right: 5px;*/
}

td {
/*	padding-left: 5px;*/
/*	padding-right: 5px;*/
}

a {
	font-weight: bold;
	text-decoration: none;
}

a:link {
	color: #999999;
}

a:visited {
	color: #999999;
}

a:hover {
	color: #666666;
	text-decoration: underline;
}

a:active {
	color: #999999;
}

input { 
}

input[type=text] {
/*	font-size: 90%; */
	padding: .1em .2em;
}

input[type="password"] {
	font-family: verdana, sans-serif;
	font-size: 1.2em;
	letter-spacing: 1px;
	padding: .1em .2em;
}

/* , input[type=file] */
input[type=submit], input[type=button], .clsFileUpload {
	background-color: 	var(--background-reverse);
	color: 				var(--color-reverse);
	font-weight: bold;
	border: var(--color-content) 1px solid;
	padding: .5em 1em;
}

/* , input[type=file]:active */
input[type=submit]:active, input[type=button]:active, .clsFileUpload:active {
	background-color: 	var(--background-content);
	color: 				var(--color-content);
}

/* , input[type=file]:active */
input[type=submit]:hover, input[type=button]:hover, .clsFileUpload:hover {
	background-color: 	var(--background-content);
	color: 				var(--color-content);
}

input[type=submit]:disabled, input[type=button]:disabled {
	color: rgb(175, 175, 175);
	background-color: rgb(50, 120, 50);
	border: rgb(50, 120, 50) 1px solid;
}

input[type=checkbox] {
	width: 1.25em;
	height: 1.25em;
	background: white !important;
}

.clsFileUpload {
	margin-right: 1em;
}

input[type="file"] {
    display: none;
}

div#div-pagecontainer {
	background-color: var(--background-content);
	padding: 1em;
}

div#div-pagefooter {
	margin: 2em;
	width: 80%;
	font-size: 80%;
	text-align: center;	
}

div#div-content h1, h2, h3, h4, h5, h6 {
	color: var(--color-content);
}	

.clsError {
	color: red;
	font-weight: bold;
}

.clsWarning {
	color: red;
}

table.clsTableListing {
	font-size: 90%;
}

table.clsTableListing tr:nth-of-type(even) {
	background: #efefbc;
}

table.clsTableListing th, 
table.clsTableListing td {
	padding: .1em .5em;
}

table.clsTableListing td:nth-of-type(1) {
/*	white-space: nowrap;*/
}

table.clsTableEdit {
}

table.clsTableEdit th, table.clsTableEdit td {
	padding: .2em .5em;
}

table.therapy-grid {
	cursor: pointer;
}

table.therapy-grid td {
	min-width: 1.5em;
}

p#toolbar {
}

p#toolbar select {
	margin-bottom: 1em;
}

div.div-user-message {
	font-size: .8em;
	letter-spacing: 0;
	font-weight: normal;
	color: #303030;
}

div.div-new-record {
	clear: both;
	padding: 1em 0 0 .5em;
}

div.simple-grid {
	margin-top: 1em;
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 1em;
}

/* 	------------------------------- 
	classes for content editing
	------------------------------- */

.mobile-emulation {
	position: absolute;
	left: 55em;
	top: 23em;
	width: 300px;
	text-align: center;
}

.mobile-emulation-holder {
	position: absolute;
	left: 55em;
	top: 25em;
	height: 500px;
	width: 300px;
	border: 20px solid #666666;
	border-radius: 25px;
}

.mobile-emulation-iframe {
	height: 660px;
	width: 380px;
	border:none;
	overflow-x:hidden;
	transform: scale(.7, .7);
	transform-origin: top left;
}

div.list-links {
}

div.list-links a {
	margin-right: 1.5em;
}

table#imagetable {
	border: var(--color-content);
}

table#imagetable h3 {
	margin-top: 1em;
}

table#imagetable td {
	vertical-align: bottom;
	text-align: center;
	padding-right: 2em;
}




/* 	------------------------------- 
	screen size handling
	-------------------------------

 	------------------------------- 
	mobile and small screens
	------------------------------- */

@media only screen and (max-width: 800px) {

	.mobile-hidden {
		display:	none !important;
		visiblity:	hidden !important;
	}
	
	div#div-logo {
		float: left;
	}

	div#div-logo-text {
		float: left;
		font-weight: bold;
		color: var(--color-content);
		letter-spacing: 2px;   
		margin-left: 1em;	
		padding-top: .7em;
	}
	
	div#div-logo img {
		width: 3em;
	}
	
/* 	------------------------------- 
	classes to create menu icon
	hamburger transforming to cross
	------------------------------- */

	.menu-icon-container {
		font-size: 			75%;
		font-weight: 		bold;
		float:				right;
}

	.menu-icon {
		margin-top: 		1em;
		margin-right: 		1em;
		width: 				30px;
		height: 			20px;
		position: 			relative;
		left: 				2px;
		transform: 			rotate(0deg);
		transition: 		.5s ease-in-out;
		cursor: 			pointer;
	}
	
	.menu-icon span {
		display: 			block;
		position: 			absolute;
		height: 			2px;
		width: 				100%;
		background: 		var(--background-reverse);
		border-radius: 		2px;
		opacity: 			1;
		left: 				0;
		transform: 			rotate(0deg);
		transition: 		.25s ease-in-out;
	}
	
	.menu-icon span:nth-child(1) {
		top: 				0px;
	}
	
	.menu-icon span:nth-child(2) {
		top: 				8px;
	}
	
	.menu-icon span:nth-child(3) {
		top: 				16px;
	}
	
	.menu-icon span {
		transform-origin: 	left center;
	}
	
	.menu-icon.open span:nth-child(1) {
		transform: 			rotate(45deg);
		top: 				-1px;
		left: 				4px;
	}
	
	.menu-icon.open span:nth-child(2) {
		width: 				0%;
		opacity: 			0;
	}
	
	.menu-icon.open span:nth-child(3) {
		transform: 			rotate(-45deg);
		top: 				20px;
		left: 				4px;
	}
	
	.menu-icon-text {
		font-weight: 		normal;
		color:				var(--color-content);
	}
	
	div#div-menu {
		clear: 			left;
		width: 			75%;
		margin-left:	auto;
		margin-right:	auto;
	}
	
	div#div-menu a {
		margin-bottom: 		0.5em;
		padding: 			.5em;
		font-size: 			1.2em;
		font-weight: 		normal;
		color: 				var(--color-reverse);
		background-color: 	var(--background-reverse);
		border: 2px solid 	var(--color-content);
		text-decoration: 	none;
		display: 			block;
		text-align: 		center;
	}
	
	div#div-menu a:active, div#div-menu a#menuActive {
		background-color: 	var(--background-content);
		color: 				var(--color-content);
	}
	
	div#div-sidemenu {
		clear: left;
	}
	
	div#div-sidemenu a {
		display: 		block;
		color: 			var(--color-content);
		text-align: 	center;
		text-decoration: none;
		padding:		.5em;
		border-bottom:	thin solid var(--color-content);
	}
	
	div#div-content {
		clear: both;
	}
	
	div#div-leftside {
		display: none;
		visibility: hidden;
	}
	
	div#div-rightside img {
		width: 100%;
	}
	
	div#TEMP-div-pagefooter {
		width: 92%;
	}
	
	iframe#map {
		width: 100%;
		height: 450px;
	}
	
	/* Classes */

	div.div-user-message {
		font-style: italic;
	}
	
	.clsTEMP-Active {
		background-color: #CCCCCC;
	}
	
	.clsTEMP-Inactive {
		background-color: #F6F6F6;
	}
	
	.clsTEMP-Inactive a {
		color: red;
	}
	


}



/* 	------------------------------- 
	medium size screens
	------------------------------- */

@media only screen and (min-width: 800px) {

	.desktop-hidden {
		display:	none !important;
		visiblity:	hidden !important;
	}

	div#div-pagecontainer {
		width: 800px;	
	
	/* 	to centre div */
	/*	margin-left:auto; */
	/*	margin-right:auto; */
	/* 	height: 100% */
	
		overflow: auto;
	}
	
	div#div-pageheader {
	
	/* 	overflow: hidden; */
		overflow: auto;
		margin-bottom: 2em;
	
	}
	
	div#div-logo {
		float: left;
	}

	div#div-logo-text {
		float: left;
		width: 6em;
		font-weight: bold;
		color: var(--color-content);
		letter-spacing: 2px;   
		margin-left: 1em;	
	}
	
	div#div-logo img {
		width: 4em;
	}
	
	.menu-icon-container {
		display: none;
		visibility: hidden;
	}

	div#div-menu {
		padding: 2.3em 0 .5em .2em;
		float: left;
		width: 75%;
	}
	
	div#div-menu a {
		margin: 0px;
		padding: .2em .5em .2em .5em;
		border: 2px solid var(--color-content);
		border-bottom: none;
		border-radius: 5px 5px 0px 0px;
		font-size: 80%;
		font-weight: bold;
		color: var(--color-reverse);
		background-color: var(--background-reverse);
		text-decoration: none;
	}
	
	div#div-menu a:hover {
		background-color: var(--background-content);
		color: var(--color-content);
	}
	
	div#div-menu a#menuActive {
		background-color: var(--background-content);
		color: var(--color-content);
	}
	
	div#div-menu:after {
		content: '';
		display: block;
		clear: both;
	}
	
	div#TEMP-div-pagebody {
		margin: 5px;
		width: 98%;
	}
	
	div#TEMP-div-pagebody:after {
		content: '';
		display: block;
		clear: both;
	}
	
	div#div-sidemenu {
		font-size: 90%;
		width: 11em;
		float: left;
		text-align: right;
		/*
		to make sure maincontent doesn't come 
		right across to the left when there's 
		nothing in sidemenu 
		*/
		height: 50%;
		margin-right: 15px;
	}
	
	div#div-sidemenu a {
		font-size: 90%;
		font-weight: bold;
		text-decoration: none;
		border-radius: 4px;
		float: right;
		clear: right;
		width: 100%;
	}
	
	div#div-sidemenu a:link {
		color: #999999;
	}
	
	div#div-sidemenu a:visited {
		color: #999999;
	}
	
	div#div-sidemenu a:hover {
		color: var(--color-reverse);
		background-color: var(--background-reverse);
	}
	
	div#div-content {
		overflow: auto;
	}

	div#TEMP-div-content h3 {
		margin-top: 0px;
	}	
	
	div#div-leftside {
		width: 5%;
		height: 70%;
		float: left;
		margin-right: 15px;
	}
	
	div#div-leftside img {
		width: 40px;
		height: 450px;
	}
	
	div#div-rightside {
		width: 120px;
	/*	height: 70%;*/
		height: 200px;
	
		float: right;
	
	/*	background-image: url('../thetherapycentre/images/trees-01.jpg');*/
	
		margin-left: 3em;
		margin-right: 3em;
	
	}
	
	div#div-rightside img {
		width: 120px;
	}
	
	iframe#map {
		width: 520px;
		height: 450px;
	}

	/* Classes */

	div.div-user-message {
		position: absolute;
		top: 1em;
		left: 70em;		
	}

	div.simple-grid {
		margin-top: 2em;
		grid-template-columns: 1fr 1fr;
	}
	
	.clsTEMP-Active {
		background-color: #CCCCCC;
	}
	
	.clsTEMP-Inactive {
		background-color: #F6F6F6;
	}
	
	.clsTEMP-Inactive a {
		color: red;
	}

}



/* 	------------------------------- 
	large size screens
	------------------------------- */

@media only screen and (min-width: 1100px) {

	body {
		width: 90%;
	}

/*	.readable-width {*/
/*		padding: 3em 25% 3em 20%;*/
/*	}*/
/**/
/*	.moderate-padding {*/
/*		padding: 3em;*/
/*	}*/

}

/* 	------------------------------- 
	very large size screens
	------------------------------- */

@media only screen and (min-width: 1200px) {

	body {
		width: 80%;
	}

}







/* 	------------------------------- 

	checkbox styling

	------------------------------- */

/* 	------------------------------- 

	taken from

	https://medium.com/claritydesignsystem/pure-css-accessible-checkboxes-and-radios-buttons-54063e759bb3	

	------------------------------- */

.checkbox input[type="checkbox"] {
	opacity: 0;
}

.checkbox label {
    position: relative;
    display: inline-block;
    
/* 	------------------------------- 
	16px width of fake checkbox + 6px 
	distance between fake checkbox and text
	------------------------------- */
    padding-left: 22px;
}

.checkbox label::before,
.checkbox label::after {
    position: absolute;
    content: "";
    
/* 	------------------------------- 
	needed for the line-height 
    to take effect
	------------------------------- */
    display: inline-block;
}

/* 	------------------------------- 
	outer box of the fake checkbox
	------------------------------- */
.checkbox label::before{
    height: 16px;
    width: 16px;
    
    border: 1px solid;
    left: 0px;
    
    /*(24px line-height - 16px height of fake checkbox) / 2 - 1px for the border
     *to vertically center it.
     */
    top: 3px;

	background: white;
}

/* 	------------------------------- 
	checkmark of the fake checkbox
	------------------------------- */
.checkbox label::after {
    height: 5px;
    width: 9px;
    border-left: 2px solid;
    border-bottom: 2px solid;
    
    transform: rotate(-45deg);
    
    left: 4px;
    top: 7px;
}

/* 	------------------------------- 
	hide the checkmark by default
	------------------------------- */
.checkbox input[type="checkbox"] + label::after {
	content: none;
}

/* 	------------------------------- 
	unhide on the checked state
	------------------------------- */
.checkbox input[type="checkbox"]:checked + label::after {
	content: "";
}

/* 	------------------------------- 
	adding focus styles on the 
	outer-box of the fake checkbox
	------------------------------- */
.checkbox input[type="checkbox"]:focus + label::before {
	outline: rgb(59, 153, 252) auto 5px;
}