/* Original by Dan Maxwell dan@349design.co.uk */

/* Modified for use with DataTables/jQuery 3/Bootstrap 5
 * by Lee McLoughlin lee@wlmlabs.com
 */
body {
  font-family: 'Raleway', sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 1.3;
  color: #3a3a3a;
}

/* Lee: Add padding left/right of maincontainer at Bootstrap 5 lg breakpoint
 * Otherwise keep the margins at the defaul small values for phone/tablet
 * screens.
 */
@media screen and (min-width: 992px) {
  .maincontainer {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}

/*
 * Lee: The margin-left is to make logout as wide as the WLMLabs logo
 * as the navbar is centered between them. But on smaller screens this
 * pushes the logout link off the right hand edge of the screen.
 */
@media screen and (min-width: 880px) {
  .logout {
    margin-left: 5em;
  }
}

/* Lee: From Dan on DataTable highlight the selected page */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  /* background: #f5f5f5 !important; */
  background: #65a846 !important;
  color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #f5f5f5 !important;
  color: black !important;
  border: 1px solid transparent !important;
  border-radius: 2px;
}

.dataTables_wrapper td {
  border-bottom: 1px solid #d5d5d5;
}

/* dataTables make small tables have less padding */
/* https://datatables.net/forums/discussion/50678/how-to-show-less-text-in-each-column */
.table-sm td {
  padding: 4px 5px 5px 4px !important;
}

/* Used to prevent long items in a nowrap table making the row too wide */
.truncate {
  max-width: 10em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncateMore {
  max-width: 7em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* In DataTables when columns are auto hidden a green plus
 * appears to show the hidden contents in a div BUT the column class
 * is still applied. This trick overrides truncating.
 */
li.truncate,
li.truncateMore {
  max-width: 100%;
  white-space: normal;
  overflow: normal;
  text-overflow: normal;
}

/* Just used for the page title */
.jumbotron {
  /* background-color: #fff; */
  text-align: center;
  text-transform: uppercase;
  font-size: 63px !important;
  font-weight: bold;
  margin-bottom: 20px;
}

/* Extra action buttons under page title */
.extraActions {
  color: #3a3a3a;
  font-size: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 50px;
  text-align: center;
}

/* TODO: use lightened icons rather than doing it here! */
/* Note: the images are grey/black on white, lighten them to match the text */
.actionIcon {
  height: 30px;
  width: auto;
  /* filter: opacity(90%); */
}

.actionIconLight {
  height: 30px;
  width: auto;
  filter: opacity(70%);
}

.actionIconLighter {
  height: 30px;
  width: auto;
  filter: opacity(50%);
}

.action,
.action:hover {
  color: #3a3a3a !important;
  margin-left: 5px;
  margin-right: 5px;
  text-decoration: none;
  /* dont allow "+ add to groups" to be split into two lines! */
  white-space: nowrap;
}

/* Highlight on hover */
.action:hover {
  background-color: #f5f5f5 !important;
}

.tableIcon {
  height: 20px;
  width: auto;
  filter: opacity(70%);
}

.Icon {
  height: 20px;
  width: auto;
  filter: opacity(70%);
}

.IconSmall {
  height: 20px;
  width: auto;
  filter: opacity(70%);
}

.IconSmaller {
  height: 10px;
  width: auto;
  filter: opacity(70%);
}

.ack {
  display: none;
  font-size: xx-small;
}

.nav-link {
  color: #000000 !important;
}

.nav-item .active,
.nav-item .active a:focus,
.nav-item .active a:hover {
  color: #65a846 !important;
  /* background-color: initial; */
  background-color: #f5f5f5;
  font-style: bold;
}

/* Highlight on hover */
.nav-item a:hover {
  background-color: #f5f5f5 !important;
}

.XXXdropdown-item:hover {
  background-color: white;
}

.formAdminStuff {
  /* display: block; */
  padding-bottom: 10px;
}

.serverInfo {
  font-size: small;
}

.submitButton,
.submitButton:hover {
  text-decoration: none;
  color: black !important;
}

/* Highlight on hover */
.submitButton:hover {
  background-color: #f5f5f5 !important;
}

/* Pretty up table contents */

/* highlight network status with online or offline */
.online {
  color: green;
}

.offline {
  color: red;
}

.thumbnailParent {
  text-align: left;
}

.thumbnail {
  object-fit: contain;
  width: 80px;
  height: 80px;
  max-width: 100%;
  max-height: 60px;
  background-color: transparant !important;
  padding: 1px;
  border: none;
  border-radius: 0;
}

.tab {
  margin-left: 40px;
}

.submitButton {
  margin-top: 10px;
  margin-bottom: 10px;
}

.screenKind {
  font-family: 'Zen dots', sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 1.3;
  color: #3a3a3a;
}