#datauser-online {
    /* font-size: 24px; */
    color: rgb(0, 214, 0) !important;
}

#datauser-offline {
    /* font-size: 24px; */
    color: red !important;
}

#datauser-new {
    /* font-size: 24px; */
    color: orange !important;
}

.vf-list__table {
    width: 100%;
    display: table;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: auto;
}

.vf-list__table .vf-list__action--active .vf-list__actions {
    display: table-cell;
}

.vf-list__table thead tr>th.vf-list__action-header:first-child {
    padding-left: 2px;
    padding-right: 7px;
    height: 55px !important;
}

.vf-list__table thead {
    display: table-row-group;
    width: 100%;
    table-layout: auto
}

.vf-list__table thead th {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.87);
}

.vf-list__table thead tr>th {
    padding: 10px 5px 10px;
}

.vf-list__table tr {
    display: table-row !important;
    width: 100%;
    table-layout: auto;
    /* max-height: 41px; */
    height: 41px;
}

.vf-list__table tbody {
    table-layout: auto;
    display: table-row-group;
}

.vf-list__table td {
    max-width: 300px;
    padding-top: 10px;
    padding-bottom: 10px;
    white-space: normal !important;
    max-height: 10px;
}

.vf-list__action--active tr {
    display: block !important;
}

.vf-list__table tbody th a,.vf-list__table tbody td a {
    text-decoration: none;
    color:  #3f51b5 !important;
}

/* Prevents help text overlapping blue bars */
vf-field-select .vf-field__row, vf-field-select-multiple .vf-field__row {
    height: auto;
    min-height: 76px;
    padding-bottom: 5px;
}

/* thead needs to be display: table-header-group;
    and not block

tr needs to be      display: table-row;

*/

/* TODO: The problem with the list bulk actions is that the <th> class="vf-list__actions" is set to display: flex; which breaks the colspan=5, causing it to bunch up in a single cell.
You can change it to display: table-cell; like stock but then that breaks  the whole section being hidden/visible depending on whether you have an item ticked
The divs are also bunch but I fixed by putting a flexbox div inside the cell. */


a.vf-link, a:visited.vf-link {
    text-decoration: none;
    color: -webkit-link;
}

.vf-page-lockscreen__sidebar {
    width: 600px;
    /* background: #fff;
    background: var(--mdc-theme-background, #fff);
    opacity: .95;
    display: flex;
    flex-direction: column;
    overflow: auto; */
}

.vf-page-lockscreen__sidebar-content {
    /* flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    justify-content: center; */
    margin-bottom: 10px;
    padding-top: 10px;
}

.vf-page-lockscreen__sidebar-header {
    padding-bottom: 10px;
}

tr.total td {
    border-top: 2px solid black; font-weight: bold;
  }

.vf-form__error {
    background-color: red;
    margin-top: 0;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: Roboto,sans-serif;
    font-family: var(--mdc-typography-headline6-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
    font-size: 1.25rem;
    font-size: var(--mdc-typography-headline6-font-size, 1.25rem);
    line-height: 2rem;
    line-height: var(--mdc-typography-headline6-line-height, 2rem);
    font-weight: 500;
    font-weight: var(--mdc-typography-headline6-font-weight, 500);
    letter-spacing: .0125em;
    letter-spacing: var(--mdc-typography-headline6-letter-spacing, .0125em);
    text-decoration: inherit;
    text-decoration: var(--mdc-typography-headline6-text-decoration, inherit);
    text-transform: inherit;
    text-transform: var(--mdc-typography-headline6-text-transform, inherit);
    font-size: 1rem;
    padding: 8px;
    text-align: center;
    color: #0000008a;
    color: var(--mdc-theme-on-secondary, rgba(0, 0, 0, .54));
    /* background-color: #e91e63; */
    /* background-color: var(--mdc-theme-secondary, #e91e63); */
    padding: 10px;
    margin-bottom: 10px;
}