.banner-image
{margin-left: auto; 
 margin-right: auto;
 width: 100%;
 display: block;
}

.page-border
{
 color: white; 
 width: 95%;
 border-style: solid;
 border-width: thin;
}


.half-width-border
{
color: white; 
width:40%;
border-style: solid;
border-width: thin;
}

.labelnearedge
{
margin-left: 3%;
}

.fullwidth
{width:96%;
}

.twothirds
{
    width:60%;
}

.halfwidth
{width:47%;
}

.quarterwidth
{
 width:22%;
}

.leftbuttonpadding
{margin-left: 1%; 
}

.rightbuttonpadding
{margin-right: 1%; 
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid lightgrey;
  background-color: gainsboro;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: grey;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: grey;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/* Buttons on update user info page */
.updateuserbtn {
  background-color: lightgray;
  color: black;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}



/* Dropdown Button */
.dropbtn {
  margin-left:3%;
  font-size: 2em;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
}

.button1 {
  background-color: lightgray;
  color: black;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  
}


/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: grey;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

h1 {color: white; font-size: 3em; font-family: Arial, Helvetica, sans-serif;}
h2 {color: white; font-size: 2em; font-family: Arial, Helvetica, sans-serif;}
h3 {color: yellow; font-size: 1em; font-family: Arial, Helvetica, sans-serif;font-weight: normal;}
h4 {color: white; font-size: 1em; font-family: Arial, Helvetica, sans-serif; font-weight: normal; margin-left: 3%; margin-right: 3%; text-align: justify; text-justify: auto;}
margintextheading {color: white; font-size: 2em; font-family: Arial, Helvetica, sans-serif; margin-left:3%}


.dygraph-label {
      /* This applies to the title, x-axis label and y-axis label */
       font-size: 10px;
       text-align: center;
       font-family: arial;
       color: white;
    }
.dygraph-title {
      /* This rule only applies to the chart title */
      font-size: 20px;
       text-align: center;
       font-family: arial;
       color: white;
       }
       
       
.chartstyle
{color: white;
font-family: arial;   
width:95%;
}

/*CSS for time picker*/
 .hours {color: black; font-family: "Arial"}
.minutes {color: black; font-family: "Arial"}
.week-day {color: black; font-family: "Arial"}
.month-day {color: black; font-family: "Arial"}
.month-year {color: black; font-family: "Arial"}
.select-hours {color: black; font-family: "Arial"}
.select-minutes {color: black; font-family: "Arial"}
.confirm {color: black; font-family: "Arial"}
.prev-month {color: black; font-family: "Arial"}

.row {
  display: flex;
}

.column {
  flex: 20%;
  padding: 5px;
}

a {
  background-color: black;
  color: white;
  
  text-decoration: none;
  text-transform: none;
  font-family: "Arial"
}

a:hover {
  background-color: black;
  color: grey;
}

a:active {
  background-color: black;
  color: grey;
}

a:visited {
  background-color: black;
  color: darkgray;
}

.dropdownlist {
  position: relative;
  display: inline-block;
}

.bigdropdown {
  position: relative;
  display: inline-block;
  color: white; 
  font-family: Arial, Helvetica, sans-serif;
}

.dropdownlist-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdownlist:hover .dropdown-content {
  display: block;
}