style.css

.slotinfo {
    font-size: 0.6rem;
    line-height: 0.7rem;
}
.slot-summary {
    font-size: 0.6rem;
}
.pending_approval {
    color: #ff9900;
}
.approval_denied {
    color: red;
}
.approval_incomplete {
    color: blue;
}
.used_slot {
    background-color: #F3F3F3;
    margin-bottom: 0.5rem;
}
.disabled {
    color: #a0a0a0;
}
.approved_panel {
    font-size: 0.7rem;
    padding: 2em;
}
@media (min-width: 576px) {
  .approved_panel {
      float: right;
  }
}
.approved_panel table {
    width: auto;
}
.approved_panel table, .approved_panel th, .approved_panel td {
    border: 1px solid black;
}

.field-title {
    font-weight: bold;
    margin-bottom: 0;
    padding-bottom: 0;
    line-height: 1em;
}

.field-input {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 1em;
    line-height: 1em;
}

.radio-group {
    line-height: 1em;
}

input[type="time"], input[type="date"] {
    font-family: "Courier New", Courier, monospace;
}

.info {
    font-weight: bold;
}

@media (max-width: 576px) {
    .shrink-font-sm { font-size: 0.65rem; }
    .card-md, .card-md .card-body {
	border: 0;
	padding: 0;
	margin: 0;
    }
}

.contact_table, .contact_table th, .contact_table td {
    border: 1px solid black;
}
.contact_table {
    margin-bottom: 1em;
}

table.record th { text-align: left; vertical-align: text-top; }
table.record td { vertical-align: text-top; }
table.records { border-collapse: collapse; }
.records, .records th, .records td { border: 1px solid black; }
table.records tr.record:nth-child(odd) { background-color: #E0E0E0; }
table.records tr.record:nth-child(even) { background-color: #FFFFFF; }
.clicksort { cursor: pointer; }
.clicksort.sorting { cursor: progress; }
.centered {
    text-align: center;
}
.label {
    font-weight: bold;
}

.admin-only {
    background-color: rgb(255,255,255,0.1) !important;
}

.nowrap {
    white-space: nowrap;
}

/* max width 20em */
.mw20 {
  max-width: 20em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: top;
}

.close-up {
    display: block;
    margin-top: 0;
    padding-top: 0;
}

.sort_data {
    display: none;
}

textarea {
    max-width: 100%;
}

caption {
    caption-side: top;
}

.active_tool {
    color: red !important;
}

.autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
}
.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}
.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: #e9e9e9;
}
.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: DodgerBlue !important;
    color: #ffffff;
}

h1 {
    margin-bottom: 1em;
}

.no-bullets li {
    list-style-type: none;
}

/* brighten navbar links, because some people have reported problems seeing them */
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,.75);
}
.navbar-dark .navbar-nav .nav-link:hover {
    color: rgba(255,255,255,1.0);
}

.usage-entry {
    display: inline-block;
    margin-right: 3em;
    min-width: 25em;
}

.floor-usage-entry {
    display: block;
    background-color: #D0D0D0;
    margin-bottom: 0.2em;
}

.floor-usage-entry .usage-entry {
    display: inline-block;
}

.record.conflict {
    color: red;
}

.building-input {
    margin-left: 1em;
}

@media only screen and (min-width: 976px) {
    #safety-monitor-panel {
        max-width: 30em;
        float: right;
        margin-left: 1em;
    }
}

#safety-monitor-panel {
    margin-bottom: 1em;
}
#safety-monitor-panel .safety-monitor-row {
    font-size: 0.75rem;
}

table.records tr.record.approval_row {
    cursor: pointer;
}
table.records tr.record.approval_row:hover:not(.selected) {
    background-color: #E0E0F0;
}
table.records tr.record.approval_row.selected {
    background-color: #C0C0D0;
}