/*Override some browser defaults*/
* {
    margin: 0;
    border: 0; 
    padding: 0;
    box-sizing: border-box;
}

html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100%;

}


p {
    margin: 5px 0px;
    padding: 0px 5px;   
}


h1,h2,h4,h5,h6 {
    font-family: times new roman, times, serif;

    color:darkblue;
    margin: 3px 0px;   
    padding: 0px 5px;
}


h3 {
    font-family: times new roman, times, serif;
    background-color:#FFF;
    color:darkblue;
    margin: 3px 0px;   
    border: medium; 
    padding: 0px 5px;
}


ul.home {
    margin: 10px;
}

li.home {
    margin: 10px;
}


p,td,th {
    font-family: arial, tahoma, sans-serif;
    color:#444;
}

input,select {
    border-radius:4px;
    border: medium;	
    border: 1px solid black;  	
    border-style: inset;
    box-shadow: 2px 2px 1px grey;
    padding: 5px ;
    margin: 2px 5px 2px 5px;
}


table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 5px;
    text-align: left;
}

/*
button,a {
    margin: 0px;
    border: 15;	
    padding: 5px;   
	background-color:darkblue;
	color:lightblue;
	text-decoration: none;
}
*/

.setupButton {
    font-family: arial, tahoma, sans-serif;
    margin: 5px;
    border: 2px;	
    border-radius: 6px; 
    padding: 5px;   
	  background-color:darkblue;
    border-style: outset;
	  color: gold;
	  text-decoration: none;
    box-shadow: 4px 4px 3px grey;
    display: inline-block;
    /*font-size: 13.3px;*/
}

.moveButton {
    font-family: arial, tahoma, sans-serif;
    margin: 5px;
    border: 2px;	
    border-radius: 6px; 
    padding: 5px;   
	background-color:darkblue;
    border-style: outset;
	color:lightblue;
	text-decoration: none;
    box-shadow: 4px 4px 3px grey;
    display: inline-block;
    font-size: 13.3px;
}

/* Set style for div class .bigbutton - in the setup.php */
.bigbutton {
    font-family: arial, tahoma, sans-serif;
    margin: 5px;	
    border: 2px red;
    border-radius: 8px; 
    padding: 15px;
    background-color: lightblue;
    border-style: outset;		
    display: inline-block;
    color:red;	
    text-decoration: none; 
    box-shadow: 5px 5px 4px grey;
}

.smallButton {
    font-family: arial, tahoma, sans-serif;
    margin: 0px;
    border: 1px;	
    border-radius: 2px; 
    padding: 2px 5px;   
  	background-color:darkblue;
	color:lightblue;
    text-decoration: none;
}

/* Set style for div .workers - in the setup.php */
.workers {
   /* background-color: #E2FFFF;*/
    border: 1px solid grey;
    border-radius: 4px;    
    display: inline-block; 
    vertical-align: top;    
    padding: 10px;
    margin: 10px 5px;
    box-shadow:  8px 8px 4px grey; 
    /* for neomorphic effect box-shadow: -7px -7px 17px rgb(243, 243, 243), 7px 7px 17px rgb(128, 128, 128); */

}

/* Set style for div .invisBox in amend.php */
.invisBox {
   /* background-color: #E2FFFF;*/
    border: 0px solid red;
    width: 300px;   
    display: inline-block; 
    vertical-align: top;    
    padding: 5px;
    margin: 20px;
}

 /*For the amend.php page. To allow stacking of the boxes */
.invisboxBreak {
   /* background-color: #E2FFFF;*/
    border: 0px solid green;
    display: block; 
    vertical-align: top;
    padding: 0px;
    margin: 0px;
}


.loginContainer {
    /*background-color: white;*/
    flex: 1 0 auto;

}






/* Used to centre the text in login.php while still keeping it left aligned */
.left {
    width: 33vw; 
    height: auto;    
    margin: auto;   
}




/*Set the style for class .warning */
.warning {
    color: red;	
}

.container {
    padding: 10px;
    width: 60%;
    min-height: 100%; 
    margin: 0 auto 0 auto; 
    background-color: white;
   
}

.containerBig {
    padding: 10px;
    width: 90%;
    height: auto;
    /*position: relative;*/
    margin: auto;
    background-color: white;
}
 

.loginBackground {
    background-image: url('../images/jess-baileydesktop.jpg'); 
    background-size: 100%; 
    background-color: rgba(255,255,255,0.6); 
    background-blend-mode: lighten; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}   

.background {
    background-image: url('../images/jess-baileydesktop.jpg'); 
    background-size: 100%; 
    background-color: rgba(255,255,255,0.6); 
    background-blend-mode: lighten; 
    display: flex;
    /*I don't know why the flex-basis value here works - it has to be given, in px (any number will do) for the page to stretch to the full screen height.*/
    flex: 1 0 100px; 
} 


.footer {   
    background-color: #7F86AA;
    padding: 2px 5px; 
    color: darkblue;
    text-decoration: none;
    /*flex-shrink: 0; */
}


/* Styling for tool tips  ***https://www.w3schools.com/css/css_tooltip.asp***    */
 /* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    color: darkblue;
    background-color: gold;
    padding: 1px 5px;
    font-weight: bolder;
    /*vertical-align: super;*/
    /*border-bottom: 1px dotted black;  /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    font-family: arial, tahoma, sans-serif;
    visibility: hidden;
    width: 320px;
    background-color: lightblue;
    color: darkblue;
    text-align: left;
    padding: 10px;
    border-radius: 6px;
    font-weight: normal;
    font-size: small;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 100px;
    margin-left: -70px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 15px;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent lightblue transparent transparent;
  }

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 0.9;
} 


/* Styles for menu (from https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_responsive) */
ul.topnav {
    font-family: arial, tahoma, sans-serif;
    color: lightblue;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: darkblue;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: block;
    color: lightblue;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    transition: .3s ease-in-out;  
}

ul.topnav li a:hover:not(.active) {
  color: darkblue;
  background-color: gold; 
}

ul.topnav li a.active {
  color: darkblue;
  background-color: lightblue;
}

ul.topnav li.right {float: right;}

@media screen and (max-width: 500px) {
    ul.topnav li.right, 
    ul.topnav li {
      float: none;
  }
  
   ul.topnav li a {
    padding: 5px;
  }
    
}




/*my phone pixel density 431 ppi*/
/*my laptop pixel density 260  ppi*/
/*my Amazon Fire 10 HD pixel density 149  ppi*/