/* -------------------------- */
/* General styles             */
/* -------------------------- */
.vs-body {
  padding-top: 4.75em;  /* adjustment for fixed header */
}

.wrapper {
  min-height: calc(100vh - 4.75em);   /* adjustment for fixed header */
}

.ui-datepicker {
  z-index: 10000 !important;  /* To make sure datepicker calendar displays on top of all other controls */
}

.has-error {
  border-color: #dc3545;    /* bootstrap text-danger color */
}

.vs-error-msg {
  margin-top: .25rem;
  color: #dc3545;           /* bootstrap text-danger color */
}


.vs-semi-bold {
  font-weight: 600;
}

.vs-extra-bold {
  font-weight: 800;
}

.vs-icon-space {
  /* spacing to match a bootstrap icon so items with and without an icon will line up */
  width: 1em;
}

.vs-reset {
  all: revert;
}

.vs-warning-color {
  /* The bootstrap text warning color doesn't show up well in some places, so using a better color */
  color: #FF8C00;   /* Dark Orange */
}

.form-floating label {
  /* Use a lighter color for the form-floating label to make it more obvious it's a "plaheholder" and not a field value */
  color: #999999;   /* shade of gray */
}

.vs-readonly-form select {
  background-color: transparent !important;
  border: 1px solid #ccc !important;
  pointer-events: none;
  appearance: none; /* Removes default dropdown arrow */
}

.vs-sortable-list-borderless .list-group-item {
  border: none;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.vs-sortable-list-deleted {
  display: none !important;   /* need important otherwise bootstrap overrides with display flex */
}

.vs-detail-form input[readonly],
.vs-detail-form textarea[readonly] {
  background-color: #e9ecef !important;     /* matching bootstrap disabled color */
}

.vs-item-list-button:hover .small,
.add-issue-button:hover .small {
  color: white !important;
}

a.vs-plain-link {
  color: inherit;
  text-decoration: none;
}

/* -------------------------- */
/* Menu related styles        */
/* -------------------------- */
#main_nav a.nav-link {
  /* Set light text color so links show up on the black background of the navbar */
  color: #f8f9fa;   /* matching bootstrap text-lignt (pure white seemed a bit bright) */
}

#main_nav a.nav-link.active {
  color:#b0b0b0;
}

/* Style the dropdowm menus so that they have a black background to match the navbar */
#main_nav .dropdown-menu {
  background-color: black;  /* match background of menu */
}

#main_nav .dropdown-menu .dropdown-item {
  color: #f8f9fa;   /* matching bootstrap text-lignt (pure white seemed a bit bright) */
}

#main_nav .dropdown-menu .dropdown-item:hover {
    background-color: #333;   /* Slightly lighter dark background on hover */
}

/* ------------------------------------------ */
/* "Responsive" table related styles          */
/* Table "collapses" on small screens         */
/* so that the data is displayed vertically   */
/* ------------------------------------------ */
@media (max-width: 991.98px) {
  .vs-responsive-table {
    border: none;
    border-collapse: separate;
    /*border-spacing: 0em 1em;*/
  }

  .vs-responsive-table > thead {
    display: none;
  }

  .vs-responsive-table > tbody > tr {
    display: table;
    padding: 1em;
    width: 100%;
  }

  .vs-responsive-table > tbody > tr > td {
    display: table-row;
    border: none;
    width: 100%;
  }

  .vs-responsive-table td.hide-on-stack {
    display: none;
  }

}  /* end media tag for vs-responsive-table related styles */


/* -------------------------- */
/* Items list related styles  */
/* -------------------------- */
.vs-items-list-table .vs-item-list-link,
.vs-items-list-table .view-item-link,
.vs-item-list-link,
.view-item-link {
  text-decoration: none;
  color: blue;
}

/* -------------------------- */
/* Dashboard related styles   */
/* -------------------------- */
.vs-dashboard-preview-card {
  min-height: 300px;
  max-height: 300px;
}

.vs-dashboard-card .card-body {
  /* The following style specifies that content will expand to fill available space, shrink if neded, and starting size
     based on content or explicit size given.  Short for flex-grow, flex-shrink, flex-basis. */
  flex: 1 1 auto;
}

.dashboard-issue-list-item {
  color:blue;
  cursor: pointer;
}


/* ------------------------------------------------ */
/* Log Maintenance and Other Checks related styles  */
/* ------------------------------------------------ */
.progress-device-maintenance {
  height: 25px;
  width: 90%;
}

.progress-log-other-checks {
  height: 25px;
  width: 100%;
}

.maintenance-checkbox {
  scale: 2.75;
}

.maintenance-checkbox.task-na:disabled {
  background-color: #e0e0e0;  /* Light gray */
  border-color: #b0b0b0;      /* Slightly darker border */
  cursor: not-allowed;
  /*opacity: 1;*/                 /* Override Bootstrap's default opacity */
}

.maintenance-checkbox-area {
  /* On mobile browsers, double clicking zooms in.  This overrides that default behavior and allows the double click on
     the maintenance checkbox area (which is used to clear completed maintenance) to be captured. */
  touch-action: manipulation;
}

/* -------------------------- */
/* tree-list related styles   */
/* -------------------------- */
ul.tree-list,
ul.tree-list ul {
  list-style-type: none;
}

.tree-list .tl-leaf-level {
  /* We want an additional left margin on the "leaf" level nodes of the tree since they don't have the expand/collapse icon */
  margin-left: .75em;
}

.tree-list .tl-toggle {
  margin-right: .5em;
  cursor: pointer;
}

.tree-list input[type="checkbox"] {
  margin-right: .5em;
  scale: 1.35;
}
.tree-list input[type="checkbox"]:checked {
  /* set background of the checked treelist checkboxes (which are not bootstrap checkboxes) to blue background to look more
     like the bootstrap checkboxes.  Note: accent-color may not be supported by older browsers in which case checkbox will
     just display with browser's default checkbox styling */
  accent-color: #0d6efd;  /* matching bootstrap primary color */
}

.tree-list ul.tl-expanded {
  display: block;
}

.tree-list ul.tl-collapsed {
  display: none;
}

/* ----------------------------------------- */
/* Device Details page related styles        */
/* ----------------------------------------- */

#device_maintenance_schedule_table th {
  /* Overriding default bootstrap th style of bold to a semi-bold sytle for the headers */
  font-weight: 600;
}

/* ----------------------------------------- */
/* Maintenance Summary page related styles   */
/* ----------------------------------------- */

#maintenance_summary_area table {
  /* With the collapses in the table when tasks are shown, when the collapse was expanded, columns were resizing.
    Using the fixed layout and width 100% (along with the fixed width on the 1st column of the table (see .ms-row-header)
    and w-auto on the "data" columns seems to prevent the columns resizing and give us equal width columns for the "data"
    columns. */
  table-layout: fixed;
  width: 100%;
}

#maintenance_summary_area table th {
  font-weight: 600;
}

#maintenance_summary_area .ms-row-header {
  width: 160px;
}

#maintenance_summary_area .list-group-item a {
  /* We want the <a> tags in the list groups (which will be showing requirement titles, to be in the parent text color
     (as opposed to the link color) and with no text decroation (i.e. underline) */
  color: inherit;
  text-decoration: none;
}