@charset "UTF-8";

html {
  background: window;
  /* backgound needs set, then inherited, for absolute positioned elements */
  font-size: 14px; /* Best practice to set here for rem */
  font-family: sans-serif;
  color: black;
}

body {
  position: relative;
  margin: 0;
  background: inherit;
  color: inherit;
  text-align: center;
}

div.shade {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: black;
  opacity: .75;
  z-index: 1000; /* High enough to cover Bing elements */
  display: none;
}

header {
  text-align: left;
  background: lightblue;
  position: sticky;
  top: 0;
  z-index: 1;
}

main {
  display: inline-block;
  background: inherit;
  color: inherit;
  min-height: 50vh;
}

aside {
  position: absolute;
  top: 0;
  right: 0;
  background: inherit;
}

aside:first-of-type>span {
  float: right;
  color: darkblue;
  padding-right: .5rem;
}

aside:first-of-type div {
  display: none;
}

aside:hover {
  border: solid grey 1px;
  box-shadow: 5px 10px 5px grey;
  max-width: 33vw;
  z-index: 3;
}

aside:hover:first-of-type div {
  display: block;
}

a {
  text-decoration: none;
  color: blue;
}

a:visited {
  color: blue;
}

a:hover {
  cursor: pointer;
  background: lightgrey;
}

a.current {
  background: lightgrey;
}

a.togglePopup {
  display: block;
  text-align: center;
  color: blue;
}

a.togglePopup:hover {
  font-weight: bold;
}

h1 {
  margin: 0;
  font-size: 1.2rem;
  background: inherit;
}

h1.admin {
  background: pink;
  text-align: center;
}

h2 {
  margin: 0;
  font-size: 1.1rem;
  background: inherit;
}

h3 {
  margin: 0;
  text-align: center;
}

h4, h5 {
  margin: 0;
}
/*
Date Selector
*/
#selectDate {
  margin-top: 1px;
  margin-bottom: 1px;
  font-size: 1rem;
  padding: 1px;
}

#selectDate input {
  border: none;
}

#selectDate a {
  color: black;
  background: lightgrey;
  padding-left: 4px;
  padding-right: 4px;
  border: solid grey 1px;
  border-radius: 5px;
}
/*
Payperiod Selector
*/
#selectPayperiod {
  margin-top: 1px;
  margin-bottom: 1px;
  font-size: 1rem;
  padding: 1px;
}

#selectPayperiod a {
  color: black;
  background: lightgrey;
  padding-left: 4px;
  padding-right: 4px;
  border: solid grey 1px;
  border-radius: 5px;
}

#selectPayperiod a:hover {
  background: darkgrey;
  cursor: default;
}

hr {
  margin: 1px;
}

footer {
  position: relative;
  margin-top: 1rem;
  background: inherit;
  padding-bottom: 1rem;
}

footer span#page_load_time {
  position: absolute;
  right: 0;
  top: 0;
}

article {
  position: relative;
  display: inline-block;
  vertical-align: top;
  background: inherit;
  color: inherit;
}

form {
  position: relative;
  background: inherit;
  color: inherit;
}

form.Login {
  text-align: center;
  border-radius: 1rem;
}

form.Roles {
  display: inline-block;
  padding-left: .5rem;
  margin: 0;
}
/* This enlarges and highlights form buttons */
form:focus-within button {
  background: lightgreen;
}
/*
* Form section.details, hidden until form gets focus
*/
form section.details {
  display: none;
}

form:focus-within section.details {
  display: block;
  position: absolute;
  background: #ffffb3;
  color: inherit;
  text-align: center;
  border-left: solid black 1px;
  border-bottom: solid black 1px;
  border-right: solid black 1px;
  border-radius: 0 0 1rem 1rem;
  box-shadow: 5px 10px 5px grey;
  margin-left: 2rem;
  min-width: calc(100% - 2rem);
  z-index: 2; /* allow to cover popup */
}

form section.controls {
  text-align: center;
  background: #ffffb3;
}
/*
* Form.row
*/
form.row>* {
  vertical-align: middle;
}

form.row section.controls {
  display: none;
}

form.row:focus-within>section.controls {
  position: absolute;
  top: 0;
  bottom: 0;
  display: inline-block;
  border-top: solid darkgrey 1px;
  border-bottom: solid darkgrey 1px;
  border-right: solid darkgrey 1px;
  padding-top: 2px;
  width: unset;
  white-space: nowrap;
  z-index: 1;
}

fieldset {
  position: relative;
  background: inherit;
}

button {
  padding-top: 0;
  padding-bottom: 0;
  border: solid darkgrey 1px;
  border-radius: 5px;
}

button.close {
  border: none;
  font-weight: bold;
  float: right;
}

input, textarea {
  padding: 0;
  border: solid darkgrey 1px;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  background: inherit;
  color: inherit;
  resize: none;
}

input:read-only, textarea:read-only, select[readonly] {
  border: none;
  padding: 1px;
  color: inherit; /* Added to stop type date appearing greyed out */
  outline: none; /* Prevents border highlight on focus */
}

/* This replaces checkbox with a check character 
 	whenever it is disabled or has a readonly attribute 
*/
input[type=checkbox]:disabled, input[type=checkbox][readonly] {
  appearance: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

input[type=checkbox]:disabled:checked:after, input[type=checkbox][readonly]:after
  {
  content: '\2714'; /* checkmark */
  color: black;
}

select {
  padding: 0;
  border: solid darkgrey 1px;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  background: inherit;
  color: inherit;
  margin: 1px;
}

select:focus {
  outline: auto;
}

select[readonly], select:disabled {
  border: none;
  padding: 1px;
  outline: none; /* Prevents border highlight on focus */
  appearance: none; /* Removes drop-down widget */
}

select[readonly] option, select:disabled option {
  display: none;
}

section {
  background: inherit;
  position: relative;
}

.col-headers {
  display: block;
  background: #d9d9d9;
}

.col-headers label {
  display: inline-block;
  font-weight: bold;
  padding: 1px;
  vertical-align: middle;
  text-align: center;
}



section.records form:hover {
  background: #ffffb3;
}

table, tfoot, tr, td {
  background: inherit;
}

table {
  border-collapse: collapse;
  margin: auto;
}

tr:hover {
  background: #ffffb3;
}

th {
  background: lightgrey;
  border: solid black 1px;
  padding: .15rem;
  text-align: center;
}

td {
  border: solid black 1px;
  padding: .15rem;
  background: inherit;
}

td.empty {
  border: none;
}
/* Popup - used in javascript */
.popup {
  display: none;
}

.popup-open {
  position: absolute;
  left: 0;
  white-space: nowrap;
  display: inline-block;
  padding: .2rem;
  border: solid grey 1px;
  box-shadow: 5px 10px 5px grey;
  background: inherit;
  color: inherit;
  z-index: 1;
  /* z-index: 101; /* High enough to cover Bing map elements */
}
/* POST messaes, errors */
.err, .post_err {
  background: #ff8095; /* between red and pink */
  font-weight: bold;
  text-align: center;
}

.post_msg {
  background: #bdf5bd; /* shades above lightgreen */
  font-weight: bold;
  text-align: center;
}

/* Anything with this attribute will display its contents when hovered */
[data-tooltip]:hover::before {
  display: inline-block;
  position: absolute;
  content: attr(data-tooltip);
  border: solid grey 1px;
  border-radius: .5rem;
  box-shadow: 5px 10px 5px grey;
  background: lightyellow;
  padding: .1em;
  font-size: .75rem;
  z-index: 1;
}

.negative {
  color: red;
}
/* Selected date values for date selectors */
.selectedYear {
  width: 3rem;
  text-align: center;
}

@media screen and (max-width: 760px) {
  header span#page_load_time {
    display: none;
  }
}