/* VARIABLES */
:root {
  --black: black;
  --black-75: rgba(0,0,0,0.75);
  
  --white: white;

  --red: #800;
  --red-75: rgba(136,0,0,0.75);

  --gray: #888;
  --gray-75: rgba(136,136,136,0.75);
  
  --dark-gray: #555;

  --menubg: #404040;
  
  --water: #c7e0eb;
  --water-75: rgba(199,224,235,0.75);
  --water-0: rgba(199,224,235,0.0);

  --status-safe: #088;
  --status-warning: #880;
  --status-danger: var(--red);
}

/* MODIFIERS */
button, .button {
  display:inline-block;
  margin:4px;
  margin-top:14px;
  padding:8px;
  border-width:0px;
  border-radius:4px;
  background:var(--red);
  color:var(--white);
  font: 100% "Jockey One", sans-serif;
  font-size:14pt;
  text-decoration:none;
  text-indent:0px;
}
button.gray, .button.gray {
  background: var(--gray);
}
button:hover, button:focus, .button:hover {
  background:var(--white);
  color:var(--red);
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
button:hover::after, button:focus::after, .button:hover::after {
    content: " >>";
}



* {
  transition-timing-function: ease;
  transition-duration: 0.75s
}

.only-print {
  display: none;
}

[target=_blank] {
  color:var(--gray);
  text-decoration-style:wavy;
  cursor:alias;
}

html {
  overflow-y: scroll;
}

body {
  background:var(--black);
  font: 100% "Jockey One", sans-serif;
  margin:0px;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  padding-top: 0px;
}

p {
  font-size: 14pt;
  margin: 0px;
  margin-bottom: 4pt;
  text-align: justify;
  text-indent: 20px;
}

a {
  color:var(--black);
}
a:hover {
  color:var(--red);
}

li {
  font-size: 14pt;
}

form, div.form {
  display: grid;
  grid-template-columns: 1fr auto;
  direction: rtl;
  align-content:center;
  grid-gap:5px;
  margin: 0px;
}
form > *, div.form > *{
  direction: ltr;
}
form span, div.form span, form .label, div.form .label, label{
  box-sizing: border-box;
  font-size: 14pt;
  transition-property:color;
}
form .label, div.form .label, label{
  font-weight: bold;
  padding-right: 5px;
  text-align: right;
}
form input, div.form input, form textarea, div.form textarea, form select, div.form select {
  font-family: monospace;
  box-sizing: border-box;
  border:1px solid var(--gray);
  transition-property:border-width, border-color, font-weight, padding;
  padding:5px;
  width: 85%;
}
form textarea, div.form textarea {
  height: 180px;
  resize: vertical;
  overflow-y: scroll;
}
input:focus, textarea:focus {
  border-width: 3px;
  padding:3px;
  border-color: var(--red);
  font-weight: bold;
  outline-style: none !important;
}
input:optional + span, input:optional + .label, textarea:optional + span, textarea:optional + .label {
  color: var(--gray);
}
input:focus + span, input:focus + .label, textarea:focus + span, textarea:focus + .label {
  color: var(--red);
}
.checkbox {
  display:inline-block;
  background:var(--gray-75);
  cursor:pointer;
  border-radius:3px;
}
.checkbox div {
  transition-property:margin-left, margin-right, background-color;
  background-color:var(--black-75);
  display:block;
  width:21px;
  height:21px;
  margin-top:3px;
  margin-bottom:3px;
  margin-left:3px;
  margin-right:30px;
}
.checkbox.checked div {
  background-color:var(--red);
  margin-left:30px;
  margin-right:3px;
}
.checkbox.inactive {
  opacity:0.4;
}
.checkbox_wrapper{
  width:50px;
  height:25px;
  padding:2px;
  background:var(--gray-75);
}
.checkbox_wrapper input[type="checkbox"]{
  margin:0px;
  height:25px;
  width:25px;
  display:inline-block;
  accent-color: var(--red);
}
.checkbox_wrapper input[type="checkbox"]:checked{
  margin-left:25px;
}



#HEADER{
  background-color:var(--black);
  background-image:url('/img/H_L02_1920x360.png'), url('/img/H_L01_1920x135.png');
  background-repeat:no-repeat, repeat-x;
  background-position:right top, right top;
  background-size:1920px 360px, 1920px 135px;
  padding-top:122px;
  padding-left:20px;
  height:57px;
  width:100%;
  position:fixed;
  top:0px;
  left:0px;
  transition-property:background-size, height, background-position, background-color, padding-top, padding-left;
  transition-delay:0s, 0s, 0s, 0s;
  z-index: 100;
}

#HEADER a, #miniMenu a {
  display: inline-block;
  line-height: 58px;
  font-size: 18pt;
  color: var(--white);
  text-decoration: none;
  padding-right: 20px;
  padding-left: 20px;
}
#HEADER a:hover, #miniMenu a:hover {
	background: var(--white);
  color:var(--red);
}
#HEADER a.mini {
  display:none;
}

#HEADER div.full {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: auto auto auto 1fr 720px;
}

#HEADER div.full span.fill {
  justify-self: right;
}

#miniMenu {
  display:none;
  position: absolute;
  top: 0px;
  left:0px;
  width:100%;
  padding-top: 100px;
  z-index:90;
  background: var(--black-75);
}
#miniMenu a {
  display:block;
  color:var(--white);
  padding:8px;
}

/* GRIDDY ui element - main page element */
#griddy {
  background:var(--white);
  box-sizing: border-box;
  display:grid;
  transition-property:padding-top;
  padding-top:250px;
  padding-left:180px;
  padding-right:180px;
  padding-bottom: 60px;
  grid-gap: 60px;
  grid-template-columns: 1fr 300px;
}

/* Griddy Page Layouts and UI elements */
#griddy.layout__index
{
  grid-template-areas:
    "splash splash"
    "ind_pool ind_bio"
    "ind_jani ind_bio";
}
#griddy.layout__admin_property,
#griddy.layout__admin_company
{
  grid-template-columns: 1fr;
  grid-template-areas:
    "ui_navbar"
    "ui_content";
  grid-gap: 10px;
}

#ui_element_navbar { grid-area: ui_navbar; }
#ui_element_content { grid-area: ui_content; }
#splash {
  background:url('/img/water_002.jpg') repeat center center;
      padding:0px;
      min-height:500px;
      
      display:grid;
      grid-template-columns: 550px 1fr;
      grid-template-areas:"splashpic splashtext";
      
      border-radius: 80px;
      
      grid-area: splash;
}
#splashpic {
  grid-area: splashpic;
  background:url('/img/algae_lion.png') no-repeat bottom left;
  border-top-left-radius:80px;
  border-bottom-left-radius:80px;
  border-bottom-right-radius:0px;
  min-height:500px;
}
#splashtext {
  grid-area: splashtext;
  margin-left:40px;
  padding-left:20px;
  background-image: linear-gradient(to right, var(--water-0), var(--water-75) 30px);
  border-top-right-radius:80px;
  border-bottom-right-radius:80px;
  border-top-left-radius:0px;
}
#splashtext h1, #splash p {
  padding:20px;
  text-indent:0px;
  margin:4px;
}
#ind_bio {
  grid-area: ind_bio;
  border-left: 1px solid var(--gray-75);
  padding-left:20px;
}
#ind_bio img { margin-top:10px; }
#ind_bio p {
  text-indent: 0px;
  font-size: 13px;
  margin-bottom: 1pt;
}
#ind_pool { grid-area: ind_pool; }
#ind_jani { grid-area: ind_jani; }


/*
//        _      _       _        _  _          _           _   _            ___           
//       /_\  __| |_ __ (_)_ _   | \| |__ ___ _(_)__ _ __ _| |_(_)___ _ _   | _ ) __ _ _ _ 
//      / _ \/ _` | '  \| | ' \  | .` / _` \ V / / _` / _` |  _| / _ \ ' \  | _ \/ _` | '_|
//     /_/ \_\__,_|_|_|_|_|_||_| |_|\_\__,_|\_/|_\__, \__,_|\__|_\___/_||_| |___/\__,_|_|  
//                                               |___/                                     
*/
.navbar {
  border-bottom: 1px solid var(--gray);
  margin-bottom: 10px;
  padding:5px;
  padding-bottom:0px;
}
.navbar.lvl2 {
  margin-top: -10px;
  background-color: var(--gray);
  padding-left:30px;
  border-bottom-style: none;
}
.navbar.lvl3 {
  border-bottom-style: none;
}
.navbar .button {
  margin:5px;
  margin-top: 15px;
  vertical-align: top;
}
.navbar.lvl2 .button {
  background-color: var(--black);
  margin-bottom: 15px;
}
.navbar.lvl3 .button {
  margin-top: 0px;
  background-color: var(--black);
}
.navbar .button:hover {
  color: var(--white);
  background-color: var(--gray);
}
.navbar.lvl2 .button:hover {
  color: var(--black);
  background-color: var(--white);
}
.navbar .button.current {
  background-color: var(--gray);
  margin-bottom: 0px;
  margin-top: 20px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.navbar.lvl2 .button.current {
  background-color: var(--white);
  margin-bottom:0px;
  margin-top:30px;
  color:var(--black);
}
.navbar.lvl3 .button.current {
  margin-top: 0px;
  border-radius: 4px;
  border: 1px solid var(--gray);
  color: var(--black);
  background-color: var(--white);
}
.navbar .button.current:hover {
  color: var(--white);
  box-shadow: none;
}
.navbar.lvl2 .button.current:hover {
  color: var(--black);
}
.navbar.lvl3 .button.current:hover {
  background-color: unset;
  color:unset;
}
.navbar .button:hover::after {
  content: none;
}
.navbar .breadcrumbs {
  font-size: 14pt;
  color: var(--gray);
  border-right: 1px solid var(--gray);
  display: inline-block;
  padding: 8px;
  padding-right: 30px;
  margin-right: 30px;
}
.navbar .breadcrumbs a{
  padding-left: 10px;
  padding-right: 10px;
}
.navbar .breadcrumbs span {
  padding-left: 10px;
}


/*
//        _      _       _        ___     _            __                     _    _    _   
//       /_\  __| |_ __ (_)_ _   |_ _|_ _| |_ ___ _ _ / _|__ _ __ ___   ___  | |  (_)__| |_ 
//      / _ \/ _` | '  \| | ' \   | || ' \  _/ -_) '_|  _/ _` / _/ -_) |___| | |__| (_-<  _|
//     /_/ \_\__,_|_|_|_|_|_||_| |___|_||_\__\___|_| |_| \__,_\__\___|       |____|_/__/\__|
//                                                                                          
*/
.admin__list > div {
  margin:15px;
  padding:10px;
  border: 1px solid var(--gray);
}
.admin__list > div > svg {
  display: none;
}
.admin__list > div:not(.no_hover):hover {
  background-color: var(--water);
  cursor: pointer;
}
.admin__list > div.error {
  background-color: var(--red);
  color: var(--white);
}
.admin__list > div.alert {
  background-color: var(--water);
  color: var(--black);
}
.admin__list h2 {
  margin-bottom: 3px;
}
.admin__list h1 i,
.admin__list h2 i,
.admin__list h3 i,
.admin__list h4 i,
.admin__list h5 i,
.admin__list h6 i {
  font-style:normal;
  color:var(--gray);
}
.admin__list .address {
  text-indent: 0px;
}
@media print {
  .admin__list > div {
    overflow: hidden;
    break-inside: avoid;
  }

  .admin__list > div > svg {
    display: unset;
    float: right;
  }
}

.admin__list form {
  display:grid;
  grid-template-columns: auto 1fr;
  grid-gap:10px;
  direction: unset;
  padding: 20px;
}
.admin__list form > * {
  direction: unset;
}
.admin__list form input,
.admin__list div.form input,
.admin__list form textarea,
.admin__list div.form textarea,
.admin__list form select,
.admin__list div.form select {
  width:unset;
}
.admin__list form input[type="date"],
.admin__list div.form input[type="date"],
.admin__list form input[type="time"],
.admin__list div.form input[type="time"],
.admin__list form input[type="number"],
.admin__list div.form input[type="number"],
.admin__list .fit-content {
  width: fit-content;
}
.admin__list form hr {
  width:100%;
  grid-column: 1 / -1;
}
.admin__list form h1,
.admin__list form h2,
.admin__list form h3,
.admin__list form h4,
.admin__list form h5,
.admin__list form h6
{
  font-size:1.4em;
  grid-column: 1 / -1;
}
.admin__list form h2 { padding-left:5%; }
.admin__list form h3 { padding-left:10%; }
.admin__list form h4 { padding-left:15%; }
.admin__list form h5 { padding-left:20%; }
.admin__list form h6 { padding-left:25%; }
.admin__list form .schedule_matrix {
  width: fit-content;
  display: grid;
  grid-template-columns: auto repeat(7, 25px);
  grid-gap: 5px;
  grid-column: 1 / -1;
}
.admin__list form .schedule_matrix .heading {
  font-weight: bold;
  text-align: center;
}
.admin__list form .schedule_matrix .task {
  padding-right:30px;
}
.admin__list form .schedule_matrix input[type="checkbox"] {
  margin: 0px;
  height: 25px;
  width: 25px;
  display: inline-block;
  accent-color: var(--red);
}
.admin__list form button:disabled {
  border: 1px solid var(--black);
  background: var(--white);
  color: var(--gray);
}
.admin__list form button:disabled:hover {
  border: 1px solid var(--black);
  background: var(--white);
  color: var(--black);
  box-shadow: unset;;
}
.admin__list form button:disabled:hover::after {
  content: unset;
}
.admin__list .space {
  display: inline-block;
  padding-left:10px;
  padding-right:10px;
}
/*
//    ╦  ┬┌─┐┌┬┐  ╔═╗┬─┐┬┌┐┌┌┬┐  ╔═╗┌┬┐┬ ┬┬  ┌─┐┌─┐
//    ║  │└─┐ │   ╠═╝├┬┘││││ │   ╚═╗ │ └┬┘│  ├┤ └─┐
//    ╩═╝┴└─┘ ┴   ╩  ┴└─┴┘└┘ ┴   ╚═╝ ┴  ┴ ┴─┘└─┘└─┘

NOTE: Most of the time, admin__list is not printable.
Exceptions
  - contract.php -> PAGE: ServicePlan
*/
@media print {
  .admin__list {
    border-style: none;
    margin-top: 60px;
  }
  .admin__list > div {
    break-inside: avoid-page;
    margin-top: 20px;
  }
  .admin__list > div:first-child {
    margin-top: 0px;
  }
  .admin__list > div.no-print-borders {
    border-style: none;
    padding: 0px;
  }
  .admin__list > div.only-print-bottom-border {
    border-style: none;
    padding: 0px;

    border-bottom: 1px dashed var(--black);
    padding-bottom: 4px;
  }
  .admin__list * {
    font-size: 1.0em;
  }
  .admin__list h1 {
    font-size: 1.3em;
    margin-bottom: 2px;
    padding-bottom: 0px;
  }
  .admin__list h2 {
    font-size: 1.2em;
    margin-bottom: 2px;
    padding-bottom: 0px;
  }
  .admin__list h3 {
    font-size: 1.1em;
    margin-bottom: 2px;
    padding-bottom: 0px;
  }
  .admin__list .id_label {
    color: var(--dark-gray);
    font-size: 0.9em;
    font-weight: bold;
    padding-left: 0px;
    text-indent: 0px;
  }
}

/*
//      ___             _          ___ _               _        _    _     
//     |_ _|_ ___ _____(_)__ ___  |_ _| |_ ___ _ __   | |_ __ _| |__| |___ 
//      | || ' \ V / _ \ / _/ -_)  | ||  _/ -_) '  \  |  _/ _` | '_ \ / -_)
//     |___|_||_\_/\___/_\__\___| |___|\__\___|_|_|_|  \__\__,_|_.__/_\___|
//                                                                         
*/
.invoice_item_table,
.admin__list > div.invoice_item_table {
  padding: 0px;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1px;
  background-color: var(--gray);
  margin-bottom: 0px;
}
.invoice_item_table .header,
.invoice_item_table .row {
  display: grid;
  grid-template-columns: 100px 1fr 120px;
  grid-gap: 1px;
}
.invoice_item_table .header > div,
.invoice_item_table .row > div {
  padding: 6px;
}
.invoice_item_table .header > div {
  background-color: var(--dark-gray);
}
.invoice_item_table .row > div {
  background-color: var(--white);
}
.invoice_item_table .row:not(.no_hover):hover > div {
  background-color: var(--water);
  cursor: pointer;
}
.invoice_item_table .header {
  background: var(--dark-gray);
}
.invoice_item_table > .header * {
  color: var(--white);
  font-weight: bold;
}
.invoice_item_table .header > div.date,
.invoice_item_table .row > div.date {
  text-align: center;
  font-size: 14pt;
}
.invoice_item_table .header > div.description,
.invoice_item_table .row > div.description {
  font-size: 14pt;
  border-left: 1px solid var(--gray);
  border-right: 1px solid var(--gray);
}
.invoice_item_table .header > div.cost,
.invoice_item_table .row > div.cost {
  text-align: right;
  font-size: 14pt;
  padding-right: 20px;
}
.admin__list > div.invoice_total_table {
  margin-top: 0px;
  border: 0px;
  display: grid;
  grid-template-columns: 1fr 120px;
  padding: 0px;
}
.invoice_total_table div {
  font-size: 15pt;
  text-align: right;
  padding-right: 20px;
}
.invoice_total_table .label {
  font-weight: bold;
}



#FOOTER {
  display:grid;
  grid-template-columns:1fr;
  grid-gap:30px;
  background: var(--black);
  border-top:2px solid var(--gray);
  padding:20px;
  padding-bottom:30px;
}
#FOOTER * {
  color:var(--white);
  font-size:11pt;
  text-align:center;
}
#FOOTER a {
  color:var(--white);
}
#FOOTER .copyright {
  padding-top:20px;
  text-align:left;
}
#FOOTER .copyright img {
  float:left;
  margin-right:10px;
  margin-bottom:10px;
}
#FOOTER .copyright p {
  text-indent:0px;
  text-align:left;
  margin:2px;
}
#FOOTER #sitemap {
  box-sizing: border-box;
  display:grid;
  grid-gap: 20px;
  grid-template-columns: 1fr auto auto auto 1fr;
}
#FOOTER #sitemap a {
  font-size:10pt;
  display:block;
  text-align:left;
  padding:2px;
  min-width:100px;
}
#FOOTER #sitemap a:hover {
  background:var(--white);
  color:var(--red);
}
#FOOTER #sitemap a.lvl2{ padding-left:30px; }
#FOOTER #sitemap a.lvl3{ padding-left:60px; }
#FOOTER #sitemap a.lvl4{ padding-left:90px; }

body.collapse #griddy {
  padding-top:119px;
}
body.collapse #HEADER {
  background-size:640px 120px, 640px 45px;
  padding-top:41px;
}

body.slide #HEADER {
  background-position:-397px 0px, -397px 0px;
  padding-left:175px;
}

#invoice {
  display: grid;
  grid-template-columns: 2.5in 1fr 2.5in;
}
#invoice div.letterhead {
  margin-top: 0.19in;
  color: var(--dark-gray);
  font-family: 'Droid Sans', sans-serif;
  font-size: 11pt;
  line-height: 20pt;
  font-weight:bold;
  text-align: center;
  grid-column: span 3;
}
#invoice div.letterhead b {
  color: var(--gray);
}
#invoice div.box_client {
  grid-column: span 2;
}
#invoice div.title {
  color: var(--dark-gray);
  font-family: 'Droid Sans', sans-serif;
  font-size: 11pt;
  line-height: 20pt;
  font-weight:bold;
  grid-column: span 3;
}
#invoice div.item_table {
  display: grid;
  grid-template-columns: 1fr 1in;
  grid-column: span 3;
}
#invoice div.item_table > div {
  padding: 1pt;
  line-height: 10pt;
  font-size: 10pt;
  font-family: 'Droid Sans', sans-serif;
  border-left: 1px solid var(--dark-gray);
  border-top: 1px solid var(--dark-gray);
}
#invoice div.item_table .money {
  text-align: right;
  border-right: 1px solid var(--dark-gray);
}
#invoice div.item_table .header {
  background-color: var(--dark-gray);
  color: var(--white);
  font-weight: bold;
  padding: 1pt;
  line-height: 11pt;
  font-size: 11pt;
  font-family: 'Droid Sans', sans-serif;
}
#invoice div.item_table .header.money {
  text-align: center;
}
#invoice div.item_table .taxes,
#invoice div.item_table .fees,
#invoice div.item_table .total {
  text-align: right;
  font-size:12pt;
  font-weight:bold;
  line-height:16pt;
  color: var(--dark-gray);
  border-style: none;
}
#invoice div.item_table .taxes {
  padding-top: 8pt;
  border-top:1px solid var(--dark-gray);
}
#invoice div.item_table .total {
  color: var(--black);
}
#invoice h2 {
  font-family: 'Droid Sans', sans-serif;
  font-size: 18pt;
  line-height: 20pt;
}
#invoice h3 {
  font-family: 'Droid Sans', sans-serif;
  font-size: 10pt;
  line-height: 14pt;
  font-weight: bold;
  color: var(--white);
  background: var(--dark-gray);
}
#invoice p {
  font-family: 'Droid Sans', sans-serif;
  font-size: 10pt;
  line-height: 14pt;
}



/*
//     ___ _              _         _ ___                                ___ _           
//    / __| |_  ___ _ __ (_)__ __ _| / __|_  _ _ __  _ __  __ _ _ _ _  _| __| |___ _ __  
//   | (__| ' \/ -_) '  \| / _/ _` | \__ \ || | '  \| '  \/ _` | '_| || | _|| / -_) '  \ 
//    \___|_||_\___|_|_|_|_\__\__,_|_|___/\_,_|_|_|_|_|_|_\__,_|_|  \_, |___|_\___|_|_|_|
//                                                                  |__/                 
*/
.chemical_summary {
  border: 1px solid var(--dark-gray);
  margin: 10px;
  padding: 8px;
}
/* favorites bar graphs */
.chemical_summary .favorites {
  display: grid;
  grid-gap: 6px;
  grid-template-columns: repeat( auto-fill, minmax(120px, 200px) );
}
.chemical_summary .favorites .label {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  margin-bottom:5px;
}
.chemical_summary .favorites .bar {
  border: 1px solid var(--dark-gray);
  border-radius: 10px;
  width: 120px;
  height: 160px;
  display: grid;
  margin-left: auto;
  margin-right: auto;
}
.chemical_summary .favorites .bar.empty {
  background-color: var(--gray-75);
  display: block;
}
.chemical_summary .favorites .bar.full {
  background-color: var(--status-safe);
  display: block;
}
.chemical_summary .favorites .top {
  background-color: var(--gray-75);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.chemical_summary .favorites .bottom {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.chemical_summary .favorites .safe .bottom {
  background-color: var(--status-safe);
}
.chemical_summary .favorites .warning .bottom {
  background-color: var(--status-warning);
}
.chemical_summary .favorites .danger .bottom {
  background-color: var(--status-danger);
}
.chemical_summary .favorites .bar.empty .top,
.chemical_summary .favorites .bar.empty .bottom,
.chemical_summary .favorites .bar.full .top,
.chemical_summary .favorites .bar.full .bottom
{
  display: none;
}
/* supply list */
.supply_list {
  display: grid;
  grid-gap: 6px;
}
.supply_list > div {
  border-bottom: 3px dotted var(--dark-gray);
  display: grid;
  grid-template-columns: 80px 1fr auto;
}
.supply_list > div.clickable:hover {
  background-color: var(--water);
  cursor: pointer;
}
.supply_list h3 {
  margin-top: 30px;
  margin-bottom: 0px;
  font-size: 24px;
}
.supply_list .icon {
  font-size: 18px;
}
.supply_list .label {
  font-size: 18px;
  font-weight: bold;
}
.supply_list .quantity {
  font-size: 18px;
}
/* - - - */


/*
//    ___             _                 _    _    _ __   ___            ___ _           
//   | _ \_  _ _ _ __| |_  __ _ ___ ___| |  (_)__| |\ \ / (_)_____ __ _| __| |___ _ __  
//   |  _/ || | '_/ _| ' \/ _` (_-</ -_) |__| (_-<  _\ V /| / -_) V  V / _|| / -_) '  \ 
//   |_|  \_,_|_| \__|_||_\__,_/__/\___|____|_/__/\__|\_/ |_\___|\_/\_/|___|_\___|_|_|_|
//                                                                                      
*/
.PurchaseListViewElem {
  display: grid;
  grid-template-columns: 80px auto 1fr auto;
}
.PurchaseListViewElem h1,
.PurchaseListViewElem h3 {
  grid-column: 1 / -1;
}
.PurchaseListViewElem > div,
.PurchaseListViewElem > form {
  border-bottom: 1px solid var(--dark-gray);
  padding-bottom:6px;
  margin-bottom:6px;
}
.PurchaseListViewElem .date {
  text-align: center;
  align-content: center;
}
.PurchaseListViewElem .qty {
  text-align: center;
  align-content: center;
  padding: 6px;
}
.PurchaseListViewElem .name {
  align-content: center;
}
.PurchaseListViewElem .actions {
  display:grid;
  grid-gap:6px;
  grid-template-columns: auto auto auto auto;
}
.PurchaseListViewElem form {
  display:inline-block;
  grid-template-columns: unset;
  grid-gap:unset;
  padding:0px;
  height:fit-content;
}
.PurchaseListViewElem form button {
  margin:0px;
}
/* - - - */


/*
//    ___           _                    _   ___              _       _____        _   _    _    _ __   ___            ___ _           
//   | __|__ _ _  _(_)_ __ _ __  ___ _ _| |_/ __| ___ _ ___ _(_)__ __|_   _|_ _ __| |_| |  (_)__| |\ \ / (_)_____ __ _| __| |___ _ __  
//   | _|/ _` | || | | '_ \ '  \/ -_) ' \  _\__ \/ -_) '_\ V / / _/ -_)| |/ _` (_-< / / |__| (_-<  _\ V /| / -_) V  V / _|| / -_) '  \ 
//   |___\__, |\_,_|_| .__/_|_|_\___|_||_\__|___/\___|_|  \_/|_\__\___||_|\__,_/__/_\_\____|_/__/\__|\_/ |_\___|\_/\_/|___|_\___|_|_|_|
//          |_|      |_|                                                                                                               
*/
.EquipmentServiceTaskListViewElem {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
}
.EquipmentServiceTaskListViewElem h1,
.EquipmentServiceTaskListViewElem h3 {
  grid-column: 1 / -1;
}
.EquipmentServiceTaskListViewElem h3 {
  font-size: 16pt;
  text-align: center;
  margin-top: 6px;
  padding-bottom: 2px;
  border-bottom: solid 1px var(--dark-gray);
  margin-bottom: 4px;
}
.EquipmentServiceTaskListViewElem.basic {
  grid-template-columns: 1fr auto;
}
.EquipmentServiceTaskListViewElem > div {
  font-size: 14pt;
  align-content: center;
}
.EquipmentServiceTaskListViewElem .equip_type {
  color: var(--dark-gray);
  font-style: italic;
}
.EquipmentServiceTaskListViewElem.basic .equip_type {
  display: none;
}
.EquipmentServiceTaskListViewElem .equip_model {
  padding-left: 8px;
  padding-right: 8px;
  color: var(--red);
  font-weight: bold;
}
.EquipmentServiceTaskListViewElem.basic .equip_model {
  display: none;
}
.EquipmentServiceTaskListViewElem .service_title {
  text-align: center;
}
.EquipmentServiceTaskListViewElem > .actions > form {
  display: inline-block;
  margin: 0px;
  margin-right: 8px;
  padding: 0px;
}
.EquipmentServiceTaskListViewElem > .actions > form button {
  margin: 0px;
}
@media (max-width: 800px) {
  .EquipmentServiceTaskListViewElem {
    grid-template-columns: 1fr auto;
  }
  .EquipmentServiceTaskListViewElem .equip_type {
    display: none;
  }
  .EquipmentServiceTaskListViewElem .equip_model {
    display: none;
  }
}
@media print {
  .EquipmentServiceTaskListViewElem.printable * {
    font-size: 1.0em;
  }
  .EquipmentServiceTaskListViewElem.printable .service_title {
    padding-left: 20px;
    text-align: left;
  }
}
/* - - - */


@media (max-width: 1400px) {
  #griddy {
    padding-left:100px;
    padding-right:100px;
  }
}

@media (max-width: 1165px) {
  #HEADER {
    background-size: 640px 120px, 640px 45px;
    padding-top: 41px;
  }
  #HEADER a.mini {
    display: inline-block;
  }
  #HEADER div.full {
    display: none;
  }

  #griddy {
    padding-top: 119px;
    padding-left: 40px;
    padding-right: 40px;
    grid-gap: 40px;
  }
  
  body.collapse #HEADER a.mini{
    border-radius: 4px;
    background-color: var(--red);
  }
  body.collapse #HEADER a.mini:hover{
    background-color: var(--white);
    color: var(--red);
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4), 0 6px 20px 0 rgba(0,0,0,0.38);
  }
  body.collapse #HEADER{
    padding-top: 10px;
    padding-bottom: 10px;
  }
  
  
  body.slide #HEADER{
    padding-left: 200px;
  }
  
  
  body.menuOpen #HEADER {
    padding-bottom: 0px;
  }
  body.menuOpen #miniMenuButton {
    background-color: var(--menubg);
    color: var(--white);
    border: 0px none var(--menubg);
  }
  body.menuOpen #miniMenu {
    display: block;
  }
  body.collapse.menuOpen #miniMenuButton {
    border-radius: 0px;
  }
}

@media print {
  body {
    margin:0px;
    padding:0px;
    background-color: var(--white);
  }

  #HEADER,
  #miniMenu,
  #FOOTER
  {
    display:none !important;
  }

  #griddy {
    padding-top: 0px !important;
  }

  #invoice{
    padding:0.75in;
  }

  .no-print {
    display: none;
  }

  .only-print {
    display: unset;
  }
}

@media (max-width: 1001px) {
  #FOOTER #sitemap {
    display:none;
  }
}

@media (max-width: 801px) {
  p {
    font-size: 18pt;
    text-align: left;
  }
  
  li { font-size:16pt; }

  #griddy {
    grid-gap: 20px;
    grid-template-columns: 1fr;
  }
}