/*
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 			All Initial CSS is for a mobile phone in portrait orientation
	
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 */

* {
  margin: 0;
  padding: 0;
  font-weight: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

:root {
  /* Set all of the color variables */

  --siteBackground: #f0f0f0;
  --siteBlack: #444444;
  --siteGreen: #3abd3a;
  --siteGrey: #c5c5c5;
  --siteLightGrey: #e2e2e2;
  --siteOrange: #ed9b17;
  --siteRed: #e13816;
  --siteShadow: rgba(68, 68, 68, 0.5);
  --siteWhite: #f0f0f0;
  --siteYellow: #faf54d;

  --modulePrimary: #3662b7;
  --modulePrimaryHighlight: #1c2145;
  --modulePrimaryDark: #1c2145;
  --moduleSecondary: #b6c2d9;
  --moduleTertiary: #f1511c;
  --disabled: #aaaaaa;

  /* Set other property variables */

  --siteWhiteSpace: 0.3em;
}

a {
  cursor: pointer;
}

body,
html {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  /*	--windowWidth: 100vw;
	font-size: calc(10 * (var(--windowWidth) / 490));*/
  font-size: calc(20px - (100vw / 550));
  letter-spacing: 0.04em;
  font-family: Tahoma, Geneva, sans-serif;
  background-image: url('/images/3d_logo.png');
  background-position-y: 20vh;
  background-position-x: 50%;
  background-size: 50vh;
  background-repeat: no-repeat;
  background-color: var(--siteBackground);
}

button {
  flex: 0 0 auto;
  min-width: 5em;
  padding: 2vw;
  font-size: 7em;
  color: var(--siteWhite);
  background-color: var(--modulePrimary);
  border: 1vw var(--siteShadow) solid;
  border-radius: 3vw;
  cursor: pointer;
}

form {
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-self: center;
  background-color: var(--moduleSecondary);
  border: 1px var(--siteShadow) solid;
  border-radius: var(--siteWhiteSpace);
  padding: var(--siteWhiteSpace);
}

form > :nth-child(1n + 2) {
  margin-top: var(--siteWhiteSpace);
}

h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  color: var(--siteWhite);
  background-color: var(--modulePrimary);
  border: 1px var(--siteShadow) solid;
  border-radius: calc(0.5 * var(--siteWhiteSpace));
  padding: var(--siteWhiteSpace);
}

h2 {
  display: flex;
  align-items: center;
  font-size: 1.2em;
}

h3 {
  display: flex;
  align-items: center;
  font-size: 1em;
}

h3 > :nth-child(1n + 2) {
  margin-left: var(--siteWhiteSpace);
}

header {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: var(--siteWhite);
}

img[src*='document'],
[src*='trash'] {
  flex: 0 0 auto;
  height: 2em;
  margin: var(--siteWhiteSpace);
}

input {
  font-size: 1em;
  padding: var(--siteWhiteSpace);
  border: 1px var(--siteShadow) solid;
  border-radius: var(--siteWhiteSpace);
  background-color: var(--siteWhite);
  color: var(--siteBlack);
}

input:disabled {
  background-color: var(--disabled);
}

input[type='button'],
[type='submit'] {
  flex: 0 0 auto;
  min-width: 5em;
  padding: var(--siteWhiteSpace);
  font-size: 1.5em;
  color: var(--siteWhite);
  background-color: var(--modulePrimary);
  border: calc(var(--siteWhiteSpace) / 2) solid;
  border-color: var(--siteWhite);
  border-radius: var(--siteWhiteSpace);
  cursor: pointer;
}

input[type='button']:disabled {
  opacity: 0.8;
  color: var(--disabled);
  background-color: #888888;
  border-color: #aaaaaa;
  cursor: default;
}

input[type='checkbox'] {
  height: 2em;
  width: 3em;
  padding: 0px;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}

input[type='checkbox']::before {
  content: url(/images/checkbox_unchecked.svg);
}

input[type='checkbox']:checked::before {
  content: url(/images/checkbox_checked.svg);
}

input[type='date'] {
  width: 11em;
}

input[type='radio'] {
  height: 2em;
  width: 2em;
  border-radius: 1em;
  cursor: pointer;
}

input[type='radio']:checked {
  background: url(/images/dot.svg) no-repeat center center;
  background-color: var(--siteWhite);
}

label {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  align-content: center;
}

label > label {
  margin-top: var(--siteWhiteSpace);
}

main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: scroll;
}

nav {
  flex: 0 0 auto;
  width: 100%;
  min-height: var(--siteWhiteSpace);
  background-color: var(--modulePrimary);
  border-bottom: 1px var(--siteShadow) solid;
  z-index: 100;
}

nav ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  list-style: none;
}

nav ul li {
  flex: 0 1 auto;
}

nav ul li a {
  display: block;
  text-decoration: none;
  text-align: center;
  font-size: 2em;
  letter-spacing: 0.2em;
  font-weight: 400;
  color: var(--siteWhite);
  padding: 4vw;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(20, 20, 20, 0.2);
}

nav ul li a:nth-last-child {
  border-bottom: none;
}

nav ul li ul {
  display: none;
}

nav ul li ul li a {
  color: var(--siteBlack);
  background-color: var(--moduleSecondary);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(20, 20, 20, 0.2);
}

object {
  flex: 1 1 auto;
}

select {
  flex: 1 1 auto;
  font-size: 1em;
  overflow: hidden;
  max-width: 100%;
  padding: var(--siteWhiteSpace);
  padding-right: 1.7em;
  border: 1px var(--siteShadow) solid;
  border-radius: var(--siteWhiteSpace);
  color: var(--siteBlack);
  background: url(/images/select.svg) no-repeat right bottom;
  background-color: var(--siteWhite);
  background-size: auto 100%;
}

select[multiple] {
  overflow-y: hidden;
  background: url();
  background-color: var(--siteWhite);
  background-size: auto 100%;
}

select:disabled {
  background-color: var(--disabled);
}

textarea {
  color: var(--siteBlack);
  font-size: 1em;
  letter-spacing: 0.04em;
  border-radius: var(--siteWhiteSpace);
  font-family: Tahoma, Geneva, sans-serif;
  background-color: var(--siteBackground);
  padding: var(--siteWhiteSpace);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  width: 100%;
}

table {
  background-color: var(--siteWhite);
  border-collapse: collapse;
}

td .missingDaily {
  background-color: var(--siteRed);
}

th {
  color: var(--siteWhite);
  background-color: var(--modulePrimary);
  border: 1px var(--siteShadow) solid;
  padding: var(--siteWhiteSpace);
}

tr:nth-child(even) {
  background-color: var(--siteLightGrey);
}

table,
td {
  color: var(--siteBlack);
  border: 1px var(--siteShadow) solid;
  padding: var(--siteWhiteSpace);
}

.centeredCell {
  text-align: center;
}

.centeredLabelSpan {
  text-align: center;
}

.checkboxLabel {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.currency {
  text-align: right;
}

.documentLink {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.documentLink > span {
  flex: 1 1 auto;
}

.fileFolder {
  display: flex;
  flex: 0 0 auto;
  min-width: 3em;
  min-height: 3em;
  padding: var(--siteWhiteSpace);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url('/images/folder.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.fileFolder > div {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-start;
  align-items: center;
}

.fileFolder > :nth-child(1n + 2) {
  margin-top: var(--siteWhiteSpace);
}

.fileFolder > div > :nth-child(1n + 2) {
  margin-left: var(--siteWhiteSpace);
  margin-top: 0;
}

.flexEnd {
  justify-content: flex-end;
}

.flexFieldset {
  display: flex;
  flex-direction: column;
  color: var(--siteWhite);
  background-color: var(--moduleTertiary);
  border: 1px var(--siteShadow) solid;
  border-radius: var(--siteWhiteSpace);
  padding: var(--siteWhiteSpace);
}

.flexFieldset > h2 > span {
  flex: 1 1 auto;
}

.flexFieldset > h2 > :nth-child(1n + 2) {
  margin-left: var(--siteWhiteSpace);
}

.flexFieldset > :nth-child(1n + 2) {
  margin-top: var(--siteWhiteSpace);
}

.flexFieldset > .formRow {
  padding: var(--siteWhiteSpace);
}

.flexGrow {
  flex: 1 1 auto;
}

.formRow {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--siteBlack);
  background-color: var(--moduleSecondary);
  border-radius: var(--siteWhiteSpace);
}

.formRow > :nth-child(1n + 2) {
  margin-left: 0;
  margin-top: var(--siteWhiteSpace);
}

.formRow .plusMinus {
  align-self: flex-start;
}

.headerCell {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--siteWhite);
  padding: var(--siteWhiteSpace);
}

.headerRow {
  display: flex;
}

.headerTitle {
  flex: 1 1 auto;
  font-size: 1.3em;
}

.hidden {
  display: none;
}

.icon {
  height: 1.5em;
  width: 1.5em;
  cursor: pointer;
}

.iconMedium {
  height: 3em;
  width: 3em;
  cursor: pointer;
}

.iconThemed {
  height: 1.5em;
  stroke: var(--siteBlack);
  cursor: pointer;
}

.invoiceStatusInvoiced {
  color: var(--siteBlack);
  background-color: var(--siteWhite);
}

.invoiceStatusPaid {
  color: var(--siteBlack);
  background-color: var(--siteLightGrey);
}

.invoiceStatusPastDue {
  color: var(--siteWhite);
  background-color: var(--siteRed);
}

.invoiceStatusSubmitted {
  color: var(--siteBlack);
  background-color: var(--siteOrange);
}

.invoiceStatusUnsubmitted {
  color: var(--siteBlack);
  background-color: var(--siteYellow);
}

.invoiceStatusValidated {
  color: var(--siteBlack);
  background-color: var(--siteGreen);
}

.moduleIcon {
  flex: 0 1 auto;
  height: 4em;
  margin: var(--siteWhiteSpace);
}

.responsiveMain {
  display: none;
}

.responsiveMenu {
  display: none;
}

.responsiveModules {
  display: none;
}

.responsiveSubMenu {
  display: flex;
  background-color: var(--modulePrimaryHighlight);
}

.rightLabel {
  flex-direction: row;
  align-items: center;
}

.rightLabel > span {
  margin-left: var(--siteWhiteSpace);
}

.statusActionRequired {
  color: var(--siteBlack);
  background-color: var(--siteWhite);
}

.statusApproved {
  color: var(--siteBlack);
  background-color: var(--siteGreen);
}

.statusAssigned {
  color: var(--siteBlack);
  background-color: var(--siteOrange);
}

.statusCompleted {
  color: var(--siteBlack);
  background-color: var(--siteGrey);
}

.statusDead {
  color: var(--siteWhite);
  background-color: var(--siteRed);
}

.statusDisabled {
  color: var(--siteBlack);
  background-color: var(--siteGrey);
}

.statusEnabled {
  color: var(--siteBlack);
  background-color: var(--siteGreen);
}

.statusFinalBilled {
  color: var(--siteBlack);
  background-color: var(--siteGrey);
}

.statusHold {
  color: var(--siteBlack);
  background-color: var(--siteYellow);
}

.statusNotBilled {
  color: var(--siteBlack);
  background-color: var(--siteYellow);
}

.statusPartialBilled {
  color: var(--siteBlack);
  background-color: var(--siteGreen);
}

.statusSaved {
  color: var(--siteBlack);
  background-color: var(--siteYellow);
}

.statusShouldBeComplete {
  color: var(--siteBlack);
  background: repeating-linear-gradient(
    45deg,
    #e6e6e6,
    #e6e6e6,
    var(--siteWhite),
    var(--siteWhite) 40px
  );
}

.statusSubmitted {
  color: var(--siteBlack);
  background-color: var(--siteOrange);
}

.statusUnassigned {
  color: var(--siteBlack);
  background-color: var(--siteGreen);
}

.statusValidated {
  color: var(--siteBlack);
  background-color: var(--siteGrey);
}

.tab {
  flex: 1 0 auto;
  min-width: 5em;
  padding: var(--siteWhiteSpace);
  font-size: 1.5em;
  background-color: var(--moduleSecondary);
  border: 1px var(--siteShadow) solid;
  border-radius: calc(2 * var(--siteWhiteSpace)) calc(2 * var(--siteWhiteSpace))
    0px 0px;
  padding: var(--siteWhiteSpace);
  padding-left: calc(2 * var(--siteWhiteSpace));
  cursor: pointer;
}

.tabParent {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--siteShadow);
  background-color: var(--moduleSecondary);
}

.tabSelected {
  color: var(--siteWhite);
  /*	background-color: var(--modulePrimary);*/
  border-bottom: none;
}

.tableRow {
  flex: 0 0 auto;
  display: flex;
  border-bottom: 1px var(--siteBlack) solid;
}

.tableCell {
  padding: calc(1.5 * var(--siteWhiteSpace));
  word-break: break-word;
  cursor: pointer;
}

.wrap {
  flex-wrap: wrap;
}

#downloadIcon {
  margin: var(--siteWhiteSpace);
  stroke: var(--siteWhite);
}

#filterIcon {
  margin: var(--siteWhiteSpace);
  stroke: var(--siteWhite);
}

#moduleDiv {
  flex: 1 0 auto;
  display: flex;
}

#hamburgerIcon {
  height: 3em;
  fill: var(--modulePrimary);
  margin: calc(2 * var(--siteWhiteSpace));
  cursor: pointer;
}

#logo {
  height: 4em;
  margin: var(--siteWhiteSpace);
}

#spinner {
  width: 400px;
  height: 400px;
  position: absolute;
  left: calc(50% - 200px);
  top: calc(50% - 200px);
  z-index: 99;
}

#tableBody {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}

#tableHeader {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background-color: var(--modulePrimary);
  border-bottom: 1px var(--siteBlack) solid;
}

#tableTotals {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background-color: var(--modulePrimary);
  border-top: 1px var(--siteBlack) solid;
}

/*
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 				First media query for all devices in landscape orientation
	
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 */

@media all and (min-width: 800px) {
  :root {
    --siteWhiteSpace: 0.3em;
  }

  body {
    /*		font-size: 2vw;*/
    background-position-y: 20vh;
    background-position-x: 50%;
    background-size: 50vh;
  }

  form {
    width: auto;
    margin-top: var(--siteWhiteSpace);
  }

  nav {
    display: flex;
    width: auto;
  }

  nav ul {
    flex-direction: row;
    padding: 0;
  }

  nav ul li {
    position: relative;
  }

  nav ul li a {
    font-size: 1em;
    padding: 0.25vw 0.75vw;
    border: none;
  }

  nav ul li > ul {
    flex-direction: column;
    justify-content: flex-start;
    position: absolute;
    width: -webkit-max-content;
    width: max-content;
  }

  @media (hover) {
    nav ul li:hover > ul {
      display: flex;
    }

    nav ul li a:hover {
      color: var(--siteWhite);
      background-color: var(--modulePrimaryHighlight);
      border-bottom: none;
    }

    .responsiveSubMenu {
      display: none;
    }
  }

  nav ul li ul {
    box-shadow: 0.5vw 0.5vw 0.4vw var(--siteShadow);
  }

  nav ul li ul li a {
    color: var(--siteWhite);
    background-color: var(--modulePrimary);
    border: none;
  }

  nav ul li ul li:hover > a {
    background-color: var(--modulePrimaryHighlight);
  }

  nav ul li ul a {
    text-align: left;
    border-bottom: 0;
  }

  p {
    text-align: justify;
    max-width: 35em;
  }

  .checkboxLabel {
    flex: 1 1 auto;
  }

  .formRow {
    flex-direction: row;
    justify-content: flex-start;
  }

  .formRow > :nth-child(1n + 2) {
    margin-left: var(--siteWhiteSpace);
    margin-top: 0;
  }

  .justifyCenter {
    justify-content: center;
  }

  .modal {
    margin-top: 25vh;
  }

  .responsiveMain {
    display: flex;
  }

  .responsiveMenu {
    display: flex;
  }

  .responsiveSubMenu li a {
    display: flex;
    background-color: var(--modulePrimary);
  }

  .tabContent {
    flex-direction: column;
  }

  .tabParent {
    flex-direction: row;
    justify-content: flex-start;
  }

  /*	.wrap > .checkboxLabel
		{
		width: 30%;
		}
*/
  #hamburgerIcon {
    display: none;
  }
}