div#header {
    top : 0px;
    left : 0px;
    height : 80px;
    margin : 5px;
    padding : 5px;
    font-family: helvetica, arial, sans-serif;
}

div#main {
    min-height: 800px;
    width : 100%;
    /*margin : 5px;*/
    padding : 5px;
    font-family: helvetica, arial, sans-serif;
	
}
div#footer {
    clear : both ;
    margin : 0px;
    padding : 0px;
    padding-left : 10px;
    font: italic 8px "arial";
    color: White;
    background-color: #366b82;
}

table {
  table-layout: fixed;
  
  border: 3px solid black;
}

th, td {
  padding: 10px;
}

/* typography */

html {
  font-family:  helvetica, arial, sans-serif;
}

thead th, tfoot th {
  	font-family:  helvetica, arial, sans-serif;
}

th {
  	letter-spacing: 1px;
  	color: white;
	background-color: #366b82;
}

td {
  letter-spacing: 1px;
}

tfoot th {
  text-align: right;
}

thead, tfoot {
  color: Blue;
  text-shadow: 1px 1px 1px black;
}

thead th, tfoot th, tfoot td {
  border: 3px solid black;
}

tbody tr:nth-child(odd) {
  background-color: #f2f2f2;
}

tbody tr:nth-child(even) {
  background-color: White;
}

tbody tr {
  
}

table {
  background-color: White;
}

caption {
  font-family: helvetica, arial, sans-serif;
  font: bold 20px "arial";
  padding: 20px;
  color: #666;
  text-align: left;
  letter-spacing: 1px;
}

fieldset {
    width: 90%;
    border: 2px solid #cccccc;
}

label {
    width:150px;
    float: left;
    text-align: left;
    font-weight: bold;
}

input {
    border: 1px solid #000;
    padding: 3px;
}



h3 {
    color: black;
}

h1 {
    text-shadow: 2px 2px #FF0000;
}


.button {
    background-color: #366b82;
    border: none;
    color: white;
    border-radius: 12px;
    padding: 2px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button1 {
    background-color: Green;
    border: none;
    color: white;
    border-radius: 12px;
    padding: 2px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button2 {
    background-color: Red;
    border: none;
    color: white;
    border-radius: 12px;
    padding: 2px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button3 {
    background-color: Red;
    border: none;
    color: white;
    border-radius: 12px;
    padding: 2px 6px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button4 {
    background-color: Grey;
    border: none;
    color: white;
    border-radius: 12px;
    padding: 2px 6px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.error {
	font-weight: bold;
	color: #C00;
}


#wrap	{
	width: 100%; /* Spans the width of the page */
	height: 50px; 
	margin: 0; /* Ensures there is no space between sides of the screen and the menu */
	z-index: 99; /* Makes sure that your menu remains on top of other page elements */
	position: relative; 
	background-color: #366b82;
	}
	
	
.navbar	{
	height: 50px;
        padding: 0;
	margin: 0;
	position: absolute; /* Ensures that the menu doesn’t affect other elements */
	border-right: 1px solid #54879d; 
	}
	
.navbar li 	{
                height: auto;
                width: 150px;  /* Each menu item is 150px wide */
                float: left;  /* This lines up the menu items horizontally */
                text-align: center;  /* All text is placed in the center of the box */
                list-style: none;  /* Removes the default styling (bullets) for the list */
                font: normal bold 12px/1.2em Arial, Verdana, Helvetica;  
                padding: 0;
                margin: 0;
                background-color: #366b82;
                }
                        
.navbar a	{							
		padding: 18px 0;  /* Adds a padding on the top and bottom so the text appears centered vertically */
		border-left: 1px solid #54879d; /* Creates a border in a slightly lighter shade of blue than the background.  Combined with the right border, this creates a nice effect. */
		border-right: 1px solid #1f5065; /* Creates a border in a slightly darker shade of blue than the background.  Combined with the left border, this creates a nice effect. */
		text-decoration: none;  /* Removes the default hyperlink styling. */
		color: white; /* Text color is white */
		display: block;
		}
		
.navbar li:hover, a:hover {background-color: #54879d;} 	  

.navbar li ul 	{
		display: none;  /* Hides the drop-down menu */
		height: auto;									
		margin: 0; /* Aligns drop-down box underneath the menu item */
		padding: 0; /* Aligns drop-down box underneath the menu item */			
		}				

.navbar li:hover ul 	{
                        display: block; /* Displays the drop-down box when the menu item is hovered over */
                        }
                        
 .navbar li ul li {background-color: #54879d;} 
 
 .navbar li ul li a 	{
		border-left: 1px solid #1f5065; 
		border-right: 1px solid #1f5065; 
		border-top: 1px solid #74a3b7; 
		border-bottom: 1px solid #1f5065; 
		}
				
.navbar li ul li a:hover	{background-color: #366b82;}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #54879d;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#myInput {
    background-image: url('/css/searchicon.png'); /* Add a search icon to input */
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 100%; /* Full-width */
    font-size: 16px; /* Increase font-size */
    padding: 12px 20px 12px 40px; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    margin-bottom: 12px; /* Add some space below the input */
}

.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}