:root	{
/*	--bg-image: url("/graphics/CorporateImage.png"); */
	--bg-image: url("/graphics/JanesCalendarV2.png"); 
}

body {
	font-size: 1.1vw;
	font-family: "Verdana", sans-serif;
	background-image: var(--bg-image);
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: 30%;
        background-color: #F5F5DC;
	min-height: 100vh;
}

h1 {
	font-size: 2vw;
	font-family: "Verdana", sans-serif; 
	font-weight: 400;
}

h2 {
	font-size: 1.8vw;
	font-family: "Verdana", sans-serif; 
	font-weight: 100;
}

h3 {
	font-size: 1.5vw;
	font-family: "Verdana", sans-serif; 
	font-weight: 100;
}


th {
	font-size: 1.5vw;
	font-family: "Verdana", sans-serif;
	font-weight: 400; 
}

th.inputlabel {
	text-align: right;
}

th.login {
	width: 40%;
}	

td	{
	font-size: 1.2vw;
	font-family: "Verdana", sans-serif;
	font-weight: normal;
}

.Icon	{
	height: 7vh;
	width: 7vh;
}

.IconSmaller	{
	height: 5vh;
	width: 5vh;
        vertical-align: middle;
} 

.Position1 {
	position: fixed;
	right: 1vh;
	top:10px;
}
.Position2 {
	position: fixed;
	right:8.1vh;
	top:10px;
}

.Position3 {
        position: fixed;
        right:15.2vh; 
        top:10px;
}

.Position4 {
        position: fixed;
        right:22.3vw;
        top:10px;
}

.Position5 {
        position: fixed;
        right:29.4vw;
        top:10px;
}

.Position6 {
        position: fixed;
        right:36.5vw;
        top:10px;
}

.Position7 {
        position: fixed;
        right:43.6vw;
        top:10px;
}

.Position8 {
        position: fixed;
        right:50.7vw;
        top:10px;
}

a {
	color: #blue;
	text-decoration: none;
	font-family: "Verdana", sans-serif;
}

input[type=text] {
	font-size: 1.2vw;
	background-color: #FFFFA0;
}
input[type=text]:focus {
	border: 3px solid #555;
}

input[type=password] {
	font-size: 1.2vw;
	background-color: #FFFFA0;
}
input[type=password]:focus {
	border: 3px solid #555;
}

input[type=date] {
        font-size: 1.2vw;
}
input[type=time] {
        font-size: 1.2vw;
}
input[type=number] {
        font-size: 1.2vw;
}
input[type=float] {
        font-size: 1.2vw;
}
select {
	background-color: #FFFFA0;
	padding: 15px 32px;
	font-size: 1.3vw;
}

input[type=submit] {
/*	background-color: #a0ffa0; */
	border-radius: 30px;
/*	color: black;  */
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1.2vw;
}

input[type=button] {
	background-color: lightblue;
	border-radius: 8px;
	color: black;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block; 
	font-size: 1.2vw;
}

input[type=file] {
	text-align: center;
	text-decoration: none;
	font-size: 1.2vw;
}

::file-selector-button {
  border: 1px solid black;
  padding: 5px 10px;
  border-radius: 5px;
}

input[type=text].time {
	width: 50;
	text-align: center;
}

input[type="checkbox"] {
	/* Add if not using autoprefixer */
	-webkit-appearance: none;
	appearance: none;
	/* For iOS < 15 to remove gradient background */
	background-color: #fff;
	/* Not removed via appearance */
	margin: 0;
	font: inherit;
	color: currentColor;
	width: 1.15em;
	height: 1.15em;
	border: 0.1em solid currentColor;
	border-radius: 0.15em;
	transform: translateY(-0.075em);
	display: grid;
	place-content: center;
}

input[type="checkbox"]::before {
	content: "";
	width: 0.65em;
	height: 0.65em;
	transform: scale(0);
	transition: 120ms transform ease-in-out;
	box-shadow: inset 1em 1em var(--form-control-color);
	background-color: Red;

}

input[type="checkbox"]:checked::before {
	transform: scale(1);
	clip-path: polygon(20% 0, 0% 20%, 30% 50%, 0 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

input[type="checkbox"][class*="checkboxyes"]:before {
	background-color: Blue;
}

input[type="checkbox"][class*="checkboxyes"]:checked::before {
	transform: scale(1);
	clip-path: polygon(20% 50%, 0% 66%, 33% 100%, 100% 20%, 80% 0%, 33% 75%);
}

input[type="checkbox"]:focus {
	outline: max(2px, 0.15em) solid currentColor;
	outline-offset: max(2px, 0.15em);
}

.fileRemoveButton {
	border-radius: 5px;
	color: black;
	text-align: center;
	text-decoration: none;
	display: inline-block; 
	font-size: 1vw;
}

.form-control + .form-control {
	margin-top: 1em;
}

.AreYouSure	{
	display: none;
	position: fixed;
	top:	10px;
	right:	60px;
	background-color: LemonChiffon;
	border: 2px solid gray;
	width:	300px;
	height:	100px;
	text-align: center;
	padding: 20px;
	margin: 20px;
	border-radius: 10px;
	box-shadow: 10px 10px 10px silver;
        font-size: 0.9vw;
        font-family: "Verdana", sans-serif;
        z-index: 5;
}

.AreYouSure> Button {
	margin-left: 5px;
	margin-right: 5px;
	font-size: 1vw;
}

.AlertMessage {
        display: none;
        position: fixed;
        top:    10px;
        right:  60px;
        background-color: pink;
        border: 2px solid gray;
        width:  300px;
        height: 150px;
        text-align: left;
        padding: 20px;
        margin: 20px;
        border-radius: 10px;
        box-shadow: 10px 10px 10px silver;
        font-size: 1.1vw;
        font-family: "Verdana", sans-serif;
        z-index: 5;
}

.AlertMessage> Button {
  position: absolute;
  bottom: 10px;
  left: 160px;
  font-size: 1.1vw;
}

.MessageBox {
  position: fixed;
  left: 10px;
  top: 30px;
  text-align: center;
  vertical-align: center;
  min-height: 5vh;
  background-color: LemonChiffon;
  opacity: 0.95;

  border: 2px solid #808080;
  border-radius: 10px; 

  color: #000000;
  font-size: 4vh;

  width: 50vw;
  height: 10vh;
  margin: 5px;  
  padding: 10px; 
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25); 
  backdrop-filter: blur(4px); 
  -webkit-backdrop-filter: blur(4px); 
}

.LoadMenuCSV {
	opacity: 0;
}  

.hideElement {
	opacity: 0;
}  

.cleanButton	{
	background-color: silver;
	color: grey;
}

.dirtyButton	{
	background-color: lightgreen;
	color: black;
}

.oddRowColor	{
	background-color: #F0F0F0;
}

li.EventList	{
	font-size: 1.2vw;
}

.twist	{
        transform: rotate(-65deg);
        transform-origin: 5% 50% 0;
        text-align: left;
}

.errormessage {
	color: red;
}

.breakline {
	display: none;
}	

.menubreak {
	display: none;
}	

.ResidentName {
	position: absolute;
	display: block;
	top: 0;
	left: 1vw;
	font-size: 12px;
}

.MainMenuGrid {
        position:absolute;
        top:1;
        width:100vw;
        display: grid;
        grid-template-columns: 15% 40% 0% auto ;
        row-gap: 2px;
}        

.MainMenuRowGrid {
        display: grid;
        grid-template-columns: 80px auto;
}        

.MainMenuTopRow {
        display: grid;
        align-items: start;
        padding-bottom: 5px;
        border-bottom: 2px solid blue;
        margin-bottom: 20px;
}

.MainMenuSelectRow {
        display: grid;
        align-items: start;
        padding-bottom: 2px;
}
        
.MainMenuRow {
        display: grid;
        height: 100%;
        align-items: center;
	font-family: "Verdana", sans-serif;
	font-size: 3vh;
	font-weight: 100;
}

td.MedTimeHeading {
        width: 20px;
}

label.Attending {
	color: black;
}
label.NotAttending {
	color: lightgray;
}

.hoverpopup {
  position: relative;
}

.hoverpopup .hovertext {
        visibility: hidden;
        width: 15vw;
        background-color: white;
	background-color: LemonChiffon;
	color: black;
	text-align: center;
	border-radius: 5px;
	border: 1px solid black;
	padding: 5px 0;
	position: absolute;
	top: -2px;
	left: 105%;
	z-index: 1;
}

.hoverpopup:hover .hovertext {
  visibility: visible;
}

.coloursample {
        height: 3vw;
        width: 3vw;
        margin-left: 1vw;
}

.colourpicker {
        height: 3vw;
        width: 3vw;
        border: none;
        margin: none;
        appearance: none;
        -webkit-appearance: none;
        margin-left: 1vw;
}

/* PC Screen to fix issue where AreYouSure buttons were displayed outside the box for some longer messages */
@media screen and (orientation: landscape) and (min-height: 800px) and (max-height: 1200px) {
  .AreYouSure	{
        font-size: .9vw;
  }
}

/* Tablet Landscape Mode */
@media screen and (orientation: landscape) and (min-width: 950px) and (min-height: 600px) and (max-width: 1280px) {
  body {
	font-size: 2vw;
  }

  h1 {
	font-size: 3vw;
  }

  h3 {
	font-size: 2vw;
  }

  input[type=text] {
	font-size: 2vw;
  }
  input[type=password] {
	font-size: 2vw;
  }
  input[type=submit] {
	font-size: 2.5vw;
  }
  input[type=button] {
	font-size: 2.5vw;
  }
  input[type=date] {
	font-size: 2.5vw;
  }
  input[type=time] {
	font-size: 2.5vw;
  }
  input[type=number] {
	font-size: 2.5vw;
	width: 6vw;
  }
  input[type=float] {
	font-size: 2.5vw;
  }
  input[type="checkbox"] {
	width: 1.5em;
	height: 1.5em;
	font-size: 2.5vw;
  }

  select {
	font-size: 2.5vw;
  }

  option {
	font-size: 2.5vw;
  }
  
  th {
	font-size: 1.8vw;
  }

  td	{
	font-size: 2.0vw;
  }

  th.inputlabel {
	font-size: 2.5vw;
  }

  .Icon	{
	height: 7vw;
	width: 7vw;
  }

  .Position1 {
	right: 1vw;
  }

  .Position2 {
	right:8.1vw;
  }

  .Position3 {
        right:15.2vw; 
  }

  .smalltime {
        font-size: 1.5vw;
        vertical-align: middle;
  }
    
  .button {
        font-size: 3vw;
  }
  
  li.EventList	{
        font-size: 2.5vw;
  }

  .AreYouSure     {
        height: 15vw;
        font-size: 2vw;
  }

  .AreYouSure> Button {
        font-size: 2vw;
  }

  .AlertMessage {
        height: 15vw;
        font-size: 2vw;
  }

  .AlertMessage> Button {
        font-size: 2vw;
        left: 140px;
  }

  .MessageBox {
	width: 70%;
	margin: auto;
	right: auto;
  	font-size: 3vw;
  }

  .threebuttontitleline	{
	width: 80%;
  }
  .IconSmaller	{
	height: 5vw;
  	width: 5vw;
} 
}  

/* Tablet Portrait Mode */
@media screen and (orientation: portrait) and (min-width: 600px) and (min-height: 950px) {
  body {
	font-size: 2vh;
  }

  h1 {
	font-size: 3vh;
  }

  h3 {
	font-size: 2vh;
  }

  input[type=text] {
	font-size: 2vh;
  }
  input[type=password] {
	font-size: 2vh;
  }
  input[type=submit] {
	font-size: 2.5vh;
  }
  input[type=button] {
	font-size: 2.5vh;
  }
  input[type=date] {
	font-size: 2.5vh;
  }
  input[type=time] {
	font-size: 2.5vh;
  }
  input[type=number] {
	font-size: 2.5vh;
	width: 6vh;
  }
  input[type=float] {
	font-size: 2.5vh;
  }
  input[type="checkbox"] {
	width: 1.5em;
	height: 1.5em;
	font-size: 2.5vh;
  }

  select {
	font-size: 2.5vh;
  }

  option {
	font-size: 2.5vh;
  }
  
  th {
	font-size: 1.8vh;
  }

  td	{
	font-size: 1.5vh;
  }

  th.inputlabel {
	font-size: 2.5vh;
  }

  .Icon	{
	height: 7vh;
	width: 7vh;
  }

  .Position1 {
	right: 1vh;
  }

  .Position2 {
	right:8.1vh;
  }

  .Position3 {
        right:15.2vh; 
  }

  .smalltime {
        font-size: 1.5vh;
        vertical-align: middle;
  }
    
  .button {
        font-size: 3vh;
  }
  
  li.EventList	{
        font-size: 2.5vh;
  }

  .AreYouSure     {
        height: 15vh;
        font-size: 2vh;
  }

  .AreYouSure> Button {
        font-size: 2vh;
  }
  
  .AlertMessage {
        height: 15vh;
        font-size: 2vh;
  }

  .AlertMessage> Button {
        font-size: 2vh;
        left: 140px;
  }

  .MessageBox {
	width: 90%;
	margin: auto;
	right: auto;
  	font-size: 3vh;
  }

  .threebuttontitleline	{
	width: 70%;
  }

  .coloursample {
        height: 4vw;
        width: 4vw;
        margin-left: 1vw;
  }

  .colourpicker {
        height: 5vw;
        width: 5vw;
        margin-left: 1vw;
  }
}  


/* Mobile Portrait & Landscape Mode */
@media screen and (max-width: 420px),(max-height: 420px) {
  .smalltime {
	display: none;
  }

  .mealbutton {
	pointer-events: none;
	opacity: 0.4;
  }	
}

/* Mobile Landscape Mode */
@media screen and (orientation: landscape) and (max-height: 420px) {
  body {
	font-size: 3vw;
  }
  
  h1 {
	font-size: 4vw;
  }
  
  h3 {
	font-size: 3vw;
  }

  input[type=text] {
	font-size: 2.5vw;
  }

  input[type=password] {
	font-size: 2.5vw;
  }

  input[type=submit] {
	font-size: 3vw;
  }

  input[type=button] {
	font-size: 3vw;
  }

  input[type=date] {
	font-size: 3vw;
  }

  input[type=time] {
	font-size: 3vw;
  }

  input[type=number] {
	font-size: 3vw;
	width: 7vw;
  }

  input[type=float] {
	font-size: 3vw;
  }

  th.inputlabel {
	font-size: 3vw;
  }

  input[type="checkbox"] {
	width: 1.5em;
	height: 1.5em;
	font-size: 3vw;
  }

  select {
	font-size: 3vw;
  }

  option {
	font-size: 3vw;
  }

  th {
	font-size: 3vw;
  }

  th.login {
	width: 25%;
  }

  td	{
	font-size: 2.5vw;
  }

  a {
	font-size:3vw;
  }

  button {
	font-size: 3vw;
  }

  .AreYouSure     {
        font-size: 3vw;
	height:	150px;
  }

  .AreYouSure> Button {
	font-size: 2.5vw;
  }

  .AlertMessage {
        font-size: 3vw;
	height:	200px;
  }

  .AlertMessage> Button {
        font-size: 3vw;
        left: 40%;
  }
  
  .MessageBox {
  	font-size: 3vw;
  }

  .Icon	{
	height: 7vw;
	width: 7vw;
  }

  .Position1 {
	position: fixed;
	right: 1vw;
	top:10px;
  }
  .Position2 {
	position: fixed;
	right:8.1vw;
	top:10px;
  }

  .Position3 {
        position: fixed;
        right:15.2vw; 
        top:10px;
  }
  
  .MessageBox {
	width: 70%;
	margin: auto;
	right: auto;
  }

  .threebuttontitleline {
	width: 80%;
  }	

  .MainMenuGrid {
        top:10px;
        grid-template-columns: 10% 40% 5% auto ;
  } 

  .MainMenuRow {
	font-size: 3vw;
  }
  
  .IconSmaller	{
	height: 5vw;
  	width: 5vw;
  } 

  .coloursample {
        height: 4vw;
        width: 4vw;
        margin-left: 1vw;
  }

  .colourpicker {
        height: 5vw;
        width: 5vw;
        margin-left: 1vw;
  }
}

/* Mobile Portrait Mode */
@media screen and (orientation: portrait) and (max-width: 420px) {
  body {
	font-size: 3vh;
  }
  
  h1 {
	font-size: 4vh;
  }
  
  h3 {
	font-size: 3vh;
  }


  input[type=text] {
	font-size: 2.5vh;
	width: 30vh;
  }

  input[type=text].login {
	width: 20vh;
  }

  input[type=password] {
	font-size: 2.5vh;
  }

  input[type=password].login {
	width: 20vh;
  }

  input[type=submit] {
	font-size: 3vh;
  }

  input[type=button] {
	font-size: 3vh;
  }

  input[type=date] {
	font-size: 3vh;
  }

  input[type=time] {
	font-size: 3vh;
  }

  input[type=number] {
	font-size: 3vh;
	width: 7vh;
  }

  input[type=float] {
	font-size: 3vh;
  }

  th.inputlabel {
	font-size: 3vh;
  }

  input[type="checkbox"] {
	width: 1.5em;
	height: 1.5em;
	font-size: 3vh;
  }

  select {
	font-size: 3vh;
  }

  option {
	font-size: 3vh;
  }

  th {
	font-size: 3vh;
  }

  th.login {
	width: 30%;
  }

  td.login {
	width: 50%;
  }

  td	{
	font-size: 2.5vh;
  }

  a {
	font-size:3vh;
  }
  button {
	font-size: 3vh;
  }

  .AreYouSure     {
        font-size: 3vh;
	width: 80%;
	height:	150px;
	margin: auto;
	right: auto;
  }

  .AreYouSure> Button {
	font-size: 2.5vh;
  }

  .AlertMessage {
	width: 80%;
	margin: auto;
	right: auto;
        font-size: 3vh;
	height:	200px;
  }

  .AlertMessage> Button {
        font-size: 3vh;
        left: 40%;
  }
  
  .MessageBox {
	width: 90%;
	margin: auto;
	right: auto;
  	font-size: 3vh;
  }

  .twobuttontitleline	{
	width: 70%;
  }	

  .threebuttontitleline	{
	width: 60%;
   }

  .breakline {
	display: block;
  }	

  .menubreak {
	display: block;
  }	

  .MainMenuGrid {
        top:3vh;
        grid-template-columns: 10% 90%;
  }        

  .MainMenuLogoutRow {
        border-bottom: none;
        margin-bottom: 2px;
        padding-bottom: 0px;
  }
        
  .coloursample {
        height: 6vw;
        width: 6vw;
        margin-left: 1vw;
  }

  .colourpicker {
        height: 7vw;
        width: 7vw;
        margin-left: 1vw;
  }
}