html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

// my extensions

body {
  margin-bottom: 60px;
}

.vtable thead {
    border-block-end: 2px solid;
    background: whitesmoke;
}

.vtable tfoot {
    border-block: 2px solid;
    background: whitesmoke;
}

.vtable th,
.vtable td {
    border: 1px solid lightgrey;
    padding: 0.25rem 0.75rem;
}

.vreservation input {
    width: 34px;
    height: 38px;
    padding: 0px;
    margin: 0px;
    border: collapse;
    border-width: 0px;
    background-color: Transparent;
    background-repeat: no-repeat;
    background-position: center center;
}

.Grid {
    border-style: none;
    border-color: #DEDFDE;
    background-color: White;
    color: Black;
}

.GridHeader {
    background-color: #6B696B;
    font: 12pt arial;
    font-weight: bold;
    color: White;
}

.GridFooter {
    font: 11pt arial;
    background-color: #CCCC99;
}

.GridPager {
    font: 11pt arial;
    background-color: #F7F7DE;
    color: Black;
    text-align: right;
}

.GridRow {
    font: 11pt arial;
    background-color: #F7F7DE;
}

.GridSelectedRow {
    font: 11pt arial;
    background-color: #CE5D5A;
    font-weight: bold;
    color: White;
}

.GridEditingRow {
    font: 11pt arial;
}

.GridAlternatingRow {
    font: 11pt arial;
    background-color: White;
}