* {
    box-sizing: border-box;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    margin: 7px;
    background-color: navy;
    color: navajowhite;
}
label, input {
    display: block;
    font: inherit;
    max-width: 100%;
}
input {
    text-align: right;
}
a:link, a:visited, input:link, input:visited {
    text-decoration: none;
}
a:hover, a:active, input:hover, input:active {
    text-decoration: underline;
}
.base-narrow {
    max-width: 376px;
    width: 100%;
    justify-content: center;
}
.base-wide {
    max-width: 1476px;
    width: 100%;
    justify-content: center;
}
.flex-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
}
/*alignment*/
.center {
    text-align: center;
}
.right {
    text-align: right;
}
.left {
    text-align: left;
}
.middle {
    display: flex;
    align-content: center;
    justify-content: center;
}
/*buttons*/
.button {
    display: block;
    border-radius: 25px;
    width: 285px;
    margin:  17px auto;
    color: white;
    text-align: center;
    padding: 15px;
    font-weight: bold;
}
.token {
    display: block;
    border-radius: 25px;
    width: 47px;
    margin:  11px auto;
    color: white;
    text-align: center;
    padding: 7px;
    font-weight: bold;
}
.narrow {
    width: 145px;
    padding: 7px;
    margin: 7px;
}
/*colors*/
.team {
    background-color: navajowhite;
    color: darkblue;
}
.manager {
    background-color: darkseagreen;
    color: darkblue;
}
.admin {
    background-color: lightcoral;
    color: darkblue;
}
.finance {
    background-color: lightskyblue;
    color: darkblue;
}
.act {
    background-color: navy;
    color: white;
}
/*grids*/
.grid {
    display: grid;
    grid-column-gap: 7px;
    overflow: auto;
    max-width: 99%;
    align-content: center;
    /*width: min-content;*/
    margin: 3px;
}
.long_grid {
    display: grid;
    grid-column-gap: 11px;
    overflow: scroll;
    max-width: 99%;
    /*border: 1px solid red;*/
}
.params-grid {
    display: grid;
    grid-gap: 17px;
    max-width: 576px;
    min-width: 426px;
    /*border: 1px solid red;*/
    grid-template: auto / auto auto;
    margin: 0 67px;
}
.working-grid {
    display: grid;
    grid-gap: 17px;
    /*border: 1px solid red;*/
    grid-template: auto / 99%;
    margin: 0 7px;
}
.params-grid > div, .working-grid > div {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    margin-left: 7px;
}
.present {
    display: grid;
    grid-column-gap: 7px;
    align-content: center;
}
.present > div {
    overflow-x: auto;
    overflow-y: hidden;
    overflow-wrap: break-word;
    align-content: center;
}
.two-halves {
    display: grid;
    grid-template: auto / 50% 50%;
    grid-column-gap: 0;
    align-content: center;
    align-items: center;
}
.three-thirds {
    display: grid;
    grid-template: auto / 33.3% 33.3% 33.4%;
    grid-column-gap: 0;
    align-content: center;
}
.three-thirds > div, .two-halves > div {

}
/*lines in a grid*/
.headers {
    background-color: navy;
    color: white;
    border: 3px double white;
    padding: 7px 3px;
    font-weight: bold;
}
.totals {
    background-color: dodgerblue;
    color: navy;
    border: 1px solid navy;
    padding: 3px;
    font-weight: bold;
}
.lined-area {
    border: 1px solid navy;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-wrap: break-word;
}
.lined-area > div {
    border-bottom: 1px solid dodgerblue;
    padding: 3px;
}
.present > div {
    overflow-x: auto;
    overflow-y: hidden;
    overflow-wrap: break-word;
    align-content: center;
}
/* responsive */
@media only screen and (max-width: 600px) {
    .laptop {
        display: none;
    }
    .lined-area {
            max-height: 397px;
    }
}
@media only screen and (min-width: 601px) {
    .mobile {
        display: none;
    }
    .lined-area {
            max-height: 627px;
    }
}