* {
    box-sizing: border-box;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    background-color: paleturquoise;
    margin: 7px;
}
form {
}
label, input {
    display: block;
    font: inherit;
    max-width: 100%;
}
input {
    text-align: center;
}
span.helptext {
    font: italic 12px Arial, Helvetica, sans-serif;
    color: darkblue;
}
a:link, a:visited, input:link, input:visited {
    text-decoration: none;
}
a:hover, a:active, input:hover, input:active {
    text-decoration: underline;
}
.smaller {
    margin-top: 6px;
    font-size: 12px;
    font-weight: normal;
}
.larger {
    font-size: 18px;
}
.buttonbox {
    display: flex;
    flex-flow: column;
}
.buttondown {
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
}
.button {
    display: block;
    border-radius: 25px;
    width: 285px;
    margin: 17px;
    color: white;
    text-align: center;
    padding: 15px;
    font-weight: bold;
    /*text-underline: none;*/
}
.token {
    display: block;
    border-radius: 50%;
    margin: 11px;
    color: white;
    text-align: center;
    padding: 7px;
    font-weight: bold;
    text-underline: none;
}
.narrow {
    width: 145px;
    padding: 7px;
    margin: 7px;
}
.mini {
    width: 47px;
    padding: 3px;
    margin: 5px;
}
.thin {
    width: 145px;
    padding: 3px;
    margin: 7px;
    font-weight: normal;
    font-size: 12px;
}
.team {
    background-color: navy;
}
.user {
    background-color: mediumseagreen;
}
.admin {
    background-color: lightcoral;
}
.choice {
    background-color: cornflowerblue;
}
.mail {
    background-color: yellow;
    color: darkblue;
}
.puzzle {
    background-color: orange;
    color: darkblue;
}
.report {
    background-color: lightgreen;
    color: darkblue;
}
.alert {
    background-color: red;
}
.senior {
    background-color: indigo;
}
.nil {

}
.flex-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
}
.middle {
    display: flex;
    align-content: center;
    justify-content: center;
}
.grid {
    display: grid;
    grid-column-gap: 11px;
    overflow: scroll;
}
.narrow-grid {
    display: grid;
    grid-column-gap: 7px;
    overflow: scroll;
}
.mobile-grid {
    display: grid;
    width: 574px;
    max-width: 100%;
    margin: 0 0px;
    /*max-width: 374px;*/
    text-align: center;
    text-wrap: normal;
}
.mobile-grid > div {
    /*padding: 3px;*/
    /*width: 374px;*/
}
.frame {
    display: grid;
    overflow: scroll;
    width: 1487px;
    max-width: 100%;
    /*border: 1px solid red;*/
    text-align: center;
    text-wrap: normal;
}
.scrol {
    overflow: scroll;
}
.team-grid {
    grid-template: 41px / 167px 677px;
}
.party-grid {
    grid-template: auto / auto 97px;
}
.grid > div, .narrow-grid > div, .cash_grid, .long_grid > div {
    text-align: center;
    text-wrap: normal;
    /*border: 1px solid red;*/
}
.av-grid {
    display: grid;
    grid-template-columns: 41px 61px 67px 71px 71px;
    /*border: 3px darkgreen;*/
    height: 27px;
}
.av-grid > div {
    border: 1px red;
}
.headers {
    background-color: navy;
    color: white;
    border: 3px double white;
    padding: 7px 0px;
    font-weight: bold;
}
.totals {
    background-color: cornflowerblue;
    color: navy;
    border: 1px solid navy;
    padding: 3px 0;
    font-weight: bold;
}
.lines > div, .grid_data {
    border-bottom: 1px solid dodgerblue;
    padding-top: 3px;
    padding-bottom: 3px;
}
.lined-area {
    max-height: 557px;
    border: 1px solid navy;
    overflow: scroll;
}
.lined-area > div {
    border-bottom: 1px solid dodgerblue;
    padding-top: 3px;
    padding-bottom: 3px;
}
.nopad > div {
    border-bottom: 1px solid dodgerblue;
}
.area {
    display: block;
    /*width: 100%;*/
    max-height: 577px;
    /*min-height: 477px;*/
    overflow: scroll;
    border: 1px solid navy;
}
.hour {
    display: block;
    border: 1px solid white;
    width: 23px;
    height: 37px;
    background-color: lightpink;
}
.party {
    display: block;
    border-radius: 15px;
    width: 81px;
    margin: 3px;
    color: white;
    text-align: center;
    padding: 3px;
    font-weight: bold;
    text-underline: none;
}
.party:link, .party:visited {
    text-decoration: none;
}
.party:hover, .party:active {
    text-decoration: underline;
}
.comment {
    width: 77px;
    margin: 0 7px 0 7px;
    padding: 3px;
    font-weight: normal;
    font-size: 12px;
}
.right {
    text-align: right;
}
.left {
    text-align: left;
}
.showoff {
    background-color: lightskyblue;
    font-weight: normal;
}
.cash_grid {
    display: grid;
    grid-column-gap: 3px;
    overflow: scroll;
    max-width: 346px;
    /*border: 1px solid red;*/
    grid-template: auto / 29% 23% 25% 23%;
}
.long_grid {
    display: grid;
    grid-column-gap: 11px;
    overflow: scroll;
    max-width: 1487px;

    /*border: 1px solid red;*/
}
.params-grid {
    display: grid;
    grid-gap: 11px;
    max-width: 576px;
    min-width: 426px;
    /*border: 1px solid red;*/
    grid-template: auto / auto auto;
}
.params-grid > div {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    margin-left: 7px;
}
.greyed{
    color: grey;
}

/* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Style from summary_hours.html */

.staff_comment {
    display: none;
    position: absolute;
    top: 317px;
    left: 797px;
    z-index: 1;
    border-radius: 25px;
    width: auto;
    max-width: 257px;
    color: white;
    background-color: red;
    text-align: center;
    padding: 15px;
    text-underline: none;
}
.dropdown:hover .staff_comment {
  display: block;
}
.center {
    text-align: center;
}