/* Sets & Resets everything */
reset.css

html, title, head, body, header, main, section, figure, figcaption, aside, article, input, textarea, select, form, label, fieldset, footer, div, span, nav, form, summary, details, br, img, h1, h2, h3, h4, h5, h6, button, ul, li, a, p {
	font-family: "helvetica";
		
/*		Arial, "sans-serif";
 Reset default - 16 is global standard*/
	font-size: 16px;
	line-height: 1.6;
	padding: 0px;
    border: 0px;
	margin: 0px;
	list-style-type: none;
	text-decoration: none;
	color: black;
	
}

/* Sets background color */
button {
	background-color: white;
}
body {
	background-color: whitesmoke;
}

/*----Non-HTML5 Browser code----more testing required----
article, aside, footer, header, nav, section {
  display: block;
}*/

/*----MOBILE----*/
html {font-size: 0.7rem;}

@media only screen and (max-width:600px) {
	/*Fix issue with date on mobile*/
	input[type='date']	{font-size: 0.4rem;}
}


/*----TABLET----*/
@media only screen and (min-width:600px) and (max-width:1200px) {
	html {font-size: 0.9rem;}
}
/*----DESKTOP----*/
@media only screen and (min-width:1200px) {
	html {font-size: 1.0rem;}
}
/*
p {
	text-align: left;
	font-size: 1.0rem;
	color: black;
	
color: hsla(229,100%,33%,1.00);
}
*/

/*----TRANSFORM TEXT----*/
p.uppercase {
	text-transform: uppercase;
}
  
p.lowercase {
	text-transform: lowercase;
}
  
p.capitalize {
	text-transform: capitalize;
}

.text-red> p{
	color: red;
}

progress {
	border-radius: 10px; 
	height: 20px;
	box-shadow: 1px 1px 4px rgba( 0, 0, 0, 0.2 );
}
progress::-webkit-progress-bar{
	background-color: grey;
	border-radius: 10px;
}
progress::-moz-progress-bar{
	background-color: grey;
	border-radius: 10px;
}
progress::-webkit-progress-value{
	background-color: goldenrod;
	border-radius: 10px;
}





/*----DYNAMIC----
a,
summary {
	text-decoration: none;
	font-size: 1.0rem;
}*/
/* Unvisited */
a:link,
summary:link {
	text-decoration: none;
}
/* Visited */
a:visited,
summary:visited {
	text-decoration: none;
}
summary:hover,
a:hover,
button:hover,
.label-select:hover,
input[type='file']:hover,
input::file-selector-button:hover {
	opacity: 1;
	cursor: pointer;
	text-decoration: underline;
}

a:focus,
button:focus,
label:focus,
input[type='file']:focus,
input::file-selector-button:focus {
	/* Shows button has been clicked */
	outline: none;
	opacity: 0.5;
	cursor: pointer;
}

a:active,
button:active,
label:active,
input[type='file']:active,
input::file-selector-button:focus {
	opacity: 0.5;
	color: red;
}

button:disabled,
input[type='file']:disabled {
   	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}
/* Sets button text colour when inside element
summary.button-solid,
a.button-solid {
	font-size: 1.1rem;
	color: white;
	opacity: 1.0;
}*/




/*----POSITION---- */
.vertical-center, .vertical-center> summary> img {
	/* Displays in column and centers along vertical and horizonal axis */
    display: flex;
	align-items: center;
	position: relative;
	top: auto;
	bottom: auto;
	
}
.horizontal-center {
	justify-content: center;
}

/*----BUTTONS----*/
.button-solid {
	font-size: 1.1rem;
	color: white;
	opacity: 1.0;
	/* Sorts out ipad rendering issue */
	-webkit-appearance: none;
	background-color: #118DA1;
	-moz-border-radius: 20px;
    -webkit-border-radius: 20px;
	border-radius: 20px;
	height: 40px;
	width: 100%;
	outline: none;
	display: flex;
	flex-direction: row;
    justify-content: center;
	align-items: center;
	text-align: center;
}
/*summary.button-solid:hover,
a.button-solid:hover, summary.button-border:hover {
	opacity: 1;
	cursor: pointer;
}*/
/* Button border to contain FORM ITEMS content, images, etc */

.button-border {
	font-size: 1.1rem;
	color: black;
	opacity: 1.0;
	/* Sorts out ipad rendering issue */
	-webkit-appearance: none;
	background-color:white;
	border: 2px solid #118DA1;
	-moz-border-radius: 20px;
    -webkit-border-radius: 20px;
	border-radius: 20px;
	height: 38px;
	width: calc(100% - 2px);
	outline: none;
	display: flex;
	flex-direction: row;
    justify-content: center;
	align-items: center;
	text-align: center;
}
/*----INPUT MENU BUTTON----*/
.button-input {
	height: 40px;
	display: flex;
	outline: none;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	text-align: center;

}
.button-input> summary, .button-input> button {
	font-size: 1.0rem;
	background-color: white;
	color: black;
	opacity: 1.0;
	height: calc(100% - 2px);
	margin: 1px 0px 1px 0px;
	border: 2px solid #118DA1;
	/* Sorts out ipad rendering issue */
	-webkit-appearance: none;
	width: calc(100% - 2px);
	outline: none;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	text-align: center;

	
}

/*----INPUTS----*/

label {
	font-size: 0.6rem;
	text-align: left;
	padding: 0px 0px 0px 0px;
}
input, select, textarea {
	font-size: 1.0rem;
	-moz-border-radius: 0px;
    -webkit-border-radius: 0px;	
	border-radius: 0px;
	box-sizing: border-box;
}
input[type='checkbox'] {
	-ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
 }
input[type='radio'] {
	-ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
 }
label:hover, input[type='checkbox']:hover, input[type='radio']:hover {
	cursor: pointer;
 }
/* Hides the circluar radio button */
.hide-check {
	position: fixed;
	display: none;
	opacity: 0;
	visibility:hidden;
	pointer-events: none;
}
/* Sets radio and checkbox format */
.input-select {
	position: relative;
	left: 10px;
}
.label-select {
	font-size: 1.0rem;
	position: relative;
	left: 20px;
}
input[type=submit] {
	background-color: blue;
	border: none;
	cursor: pointer;
}
input[type=submit]:hover {
	background-color: darkblue;
	cursor: pointer;
}

/* Text input formating */
.input-left {
	text-align: left;
	padding: 0px 20px 0px 20px;
}
.input-center {
	text-align: center;
	align-items: center;
	padding: 0px 10px 0px 10px;
}
.input-right {
	text-align: right;
	padding: 0px 10px 0px 10px;
}
.input-narrow {
	font-stretch: condensed;
}
.input-wide {
	font-stretch: expanded;
}
.input-readonly {
	background-color: lightgrey;
	pointer-events: none;
}

textarea {
  	font-size: 1.0rem;
	height: calc(100% - 28px);
	width: 100%;
	display: inline-block;
	margin: 1px 0px 1px 0px;
	border: 2px solid #118DA1;
	resize: none;
	/* Sorts out ipad rendering issue */
	-webkit-appearance: none;
}

input[type='text'], input[type='email']	{
	font-size: 1.0rem;
	height: 40px;
	width: 100%;
	display: inline-block;
	margin: 1px 0px 1px 0px;
	border: 2px solid #118DA1;
	/* Sorts out ipad rendering issue */
	-webkit-appearance: none;
}
input[type='password']	{
	font-size: 1.0rem;
	height: 40px;
	width: 100%;
	display: inline-block;
	margin: 1px 0px 1px 0px;
	border: 2px solid #118DA1;
	/* Sorts out ipad rendering issue */
	-webkit-appearance: none;
}
input[type='search']	{
	font-size: 1.0rem;
/*	height: 32px;*/
	width: 100%;
	display: inline-block;
	/* Sorts out ipad rendering issue */
	-webkit-appearance: none;
}
input[type='date']	{
	font-size: 1.0rem;
	height: 40px;
	width: 100%;
	display: inline-block;
	margin: 1px 0px 1px 0px;
	border: 2px solid #118DA1;
	/* Sorts out ipad rendering issue */
	-webkit-appearance: none;
}
input[type='datetime-local']	{
	font-size: 1.0rem;
	height: 40px;
	width: 100%;
	display: inline-block;
	margin: 1px 0px 1px 0px;
	border: 2px solid #118DA1;
	/* Sorts out ipad rendering issue */
	-webkit-appearance: none;
}
input[type='number']	{
	font-size: 1.0rem;
	height: 40px;
	width: 100%;
	display: inline-block;
	margin: 1px 0px 1px 0px;
	border: 2px solid #118DA1;
	/* Sorts out ipad rendering issue */
	-webkit-appearance: none;
}
input[type='file']	{
	font-size: 1.0rem;
	color: black;
	width: 100%;
	padding: 0px 2px 0px 0px;
	display: flex;
	/* Sorts out ipad rendering issue */
	-webkit-appearance: none;

}
input::file-selector-button {
	opacity: 1.0;
	font-size: 1.0rem;
	color: white;
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;	
	border-radius: 10px;
	background-color:#118DA1;
	/* Sorts out ipad rendering issue */
	-webkit-appearance: none;
	/* Removes box that is to show clicked */
	border: none;
	outline: none;
	width: 30%;
	height: 40px;
}
input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='date']:focus,
input[type='datetime-local']:focus,
input[type='number']:focus,
input[type='file']:focus,
textarea:focus	{
	border: 4px solid #118DA1;
	outline: none;
}
input[type='text']:hover,
input[type='email']:hover,
input[type='password']:hover,
input[type='search']:hover,
input[type='date']:hover,
input[type='datetime-local']:hover,
input[type='number']:hover,
textarea:hover	{
	cursor: text;
}
datalist {
  display: none;
}

/*----MODALS----*/
summary {
	list-style:none;                                                                                                                                
}
summary::-webkit-details-marker {
	display:none;
}

/*
summary:hover {
	cursor: pointer;
	opacity: 1;
}
summary:focus {
	opacity: 1;
}
summary:active {
	color: red;
	opacity: 1;
}*/

/*----SUB-MENU----*/
.sub-menu[open] summary::after	{
	content: '';

	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: black;	
	opacity: 0.8;
	z-index: 3;
}
.sub-menu> div	{
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	background: white;
	margin: 20px 0px 0px 0px;
	padding: 20px 0px 0px 0px;
	z-index: 4;
}
/* Adjust container for button to fit grid*/
.sub-menu> div> nav> ul, .sub-menu> div> div> div {
	margin: 0px 10px 0px 10px;
}
.sub-menu> div> nav> ul> li, .sub-menu> div> div> div> article {
	margin: 0px 0px 20px 10px;
	width: calc(100% - 20px);
}

/*----NOTIFY----*/
.notify> div	{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	background: black;	
	opacity: 0.2;
	margin: 0px 0px 0px 0px;
	padding: 40px 0px 20px 0px;
	z-index: 3;
}
.notify> div> div	{
	top: auto;
	bottom: auto;
	padding: 40px;
	background: white;
	z-index: 4;
}
.notify[open] summary::before	{
	content: '';
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 5;
}
.heading-aside> details> summary, .page-aside> details> summary, .list-aside> details> summary, .item-aside> details> summary {
	outline: none;
	font-size: 1.0rem;
	color: grey;
	text-align: left;
	font-weight: bold;
	font-style: italic;
}
.heading-aside> details> p, .page-aside> details> p, .list-aside> details> p, .item-aside> details> p  {
	list-style-type: none;
	text-align: justify;
	margin: 5px 0px 0px 0px;
	color: grey;
	font-size: 1.0rem;
}
.heading-aside> details> ul, .page-aside> details> ul, .list-aside> details> ul, .item-aside> details> ul  {
	list-style-type: none;
	text-align: justify;
}
.heading-aside> details> ul> li, .page-aside> details> ul> li, .list-aside> details> ul> li, .item-aside> details> ul> li {
	color: grey;
	font-size: 1.0rem;
}

/* Set confirm modal*/
.confirm-modal> ul {
	display: block;
	position: fixed;
	height: auto;
	width: 20vw;
	min-width: 200px;
	max-width: 300px;
	top: 40vh;
	left: 40vw;
	background: white;
	z-index: 3;
}
.confirm-modal> ul> li {
	margin: 20px;
	list-style-type: none;	
}
.confirm-modal-close[open] summary::after {
	content: '';
}

/* Button border to contain FORM ITEMS content, images, etc */
.search-border {
	font-size: 1.1rem;
	color: white;
	opacity: 1.0;
	/* Sorts out ipad rendering issue */
	-webkit-appearance: none;
	background-color: white;
	border: 2px solid #118DA1;
	min-height: 30px;
	max-height: 58px;
	width: calc(100% - 2px);
	padding: 0px 0px;
	outline: none;
	display: inline;
	float: left;
	flex-direction: column;
    justify-content: left;
	align-items: center;
	text-align: center;
}

.image-button {
	height: 50px;
	width: auto;
	/* Keep aspect ratio and resized to fit dimension */
	object-fit: contain;
	overflow: hidden;
}

/*----DEV ELEMENTS----*/

/* Sets test colors and space for grid */
.test {
	background-color: orange;
}
.testx {
	background-color: yellow;
}
.transparent {
	opacity: 0;
}

.hide {
	display: none;
}

.invisible {
  visibility: hidden;
}