/********/
/* Card */
/********/
.card-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

/*.card.dsc-state .card-header {*/
/*    height: 6em;*/
/*    font-size: 2em;*/
/*    font-weight: bold;*/
/*}*/

/*.card.dsc-state .dsc-state-error-warn-count span {*/
/*    font-size: 1.6em;*/
/*}*/

/*.card.dsc-state-small {*/
/*    margin-bottom: 5px;*/
/*}*/

/*.card.dsc-state-small * {*/
/*    font-size: 1em;*/
/*}*/

/*.card.dsc-state-small .card-header {*/
/*    height: 4em;*/
/*    font-size: 1.4em;*/
/*    font-weight: bold;*/
/*}*/

/*************/
/* DataTable */
/*************/
.dsc-table tbody,thead {
    color: #444444;
}


/* Default font size of most browsers for monospace: 13px */
/* the fixed header row (once scrolling activates it) inherits from body
 */
.dsc-table {
    font-size: 11px;
    font-family:monospace;
}

/* Header cells centred, as up to DataTables 1.10.25. From 1.13 on
   dataTables.bootstrap4.css sets "table.dataTable thead th" to left; same
   specificity here, custom.css loads later and wins.
   From 2.x on the title sits in div.dt-column-header; it grows across
   the width there (flex-grow) and stays centred by text-align. The
   ordering icon, though, sits in the flow next to it and would push it
   off centre. So, as up to 1.13, it sits absolutely in the right padding
   of the cell: 20px with table-sm, arrows 10px from the edge. .table-sm
   in the selector because dataTables.bootstrap4.css sets 4px with
   "table.dataTable.table-sm ... th.dt-orderable-asc". */
table.dsc-table thead th {
    text-align: center;
}

/* Titles at the bottom of the header row, as up to 1.13 (Bootstrap:
   vertical-align bottom); DataTables centres them vertically through
   these variables. Names since DataTables 3; in 2.x they were
   --dt-header-vertical-align and --dt-header-align-items. */
table.dsc-table {
    --dt-header-cell_vertical-align: bottom;
    --dt-header-cell_align-items: flex-end;
}

/* Search hits (markjs) as up to DataTables 2 with searchHighlight:
   without the padding Bootstrap gives <mark> -- it spread the hits
   apart inside a word --, and in its colour. */
table.dsc-table mark {
    padding: 0;
    background-color: #FFFF88;
    border-radius: 0.28571429rem;
}

table.dsc-table.table-sm > thead > tr > th.dt-orderable-asc,
table.dsc-table.table-sm > thead > tr > th.dt-orderable-desc,
table.dsc-table.table-sm > thead > tr > th.dt-ordering-asc,
table.dsc-table.table-sm > thead > tr > th.dt-ordering-desc {
    position: relative;
    padding-right: 20px;
}

table.dsc-table thead > tr > th div.dt-column-header .dt-column-order {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
}

/* inherits from, or depends on, the font size of dscDataDtable */
.dsc-table-header {
    vertical-align: top;
    /*font-size: 1.067em;*/
    font-size: 12px;
    font-family:monospace;
    /*background:#f8f9fc;*/
}

/*.dsc-th-group {*/
/*    !*font-size: 0.8rem;*!*/
/*        font-family:monospace;*/
/*}*/

#dscDataTableFooter {
    background-color: #d0eaff;
    border-color: white;
    vertical-align: middle;
}

div.dsc-table-control {
    display: inline-block;
}

/* Fix column width in the second TH row if the first holds a colspan */
.dataTable.fixedHeader-floating {
    table-layout: auto !important;
}

table {
   table-layout: auto !important;
}

/* Gap between the DT length and search fields */
#dscDataTable_wrapper .dt-length {
    display: inline-block;
    margin-left: 3em;
}

#dscDataTable .dsc-iconized {
    text-align: center;
    font-size: 1.2em;
}

/**********/
/* Global search */
/***********/
#dscGlobalSearchResults .dsc-search-text {
    font-weight: bolder;
    font-size: 1.1em
}

#dscGlobalSearchResults .card-body {
    padding: 0;
}

#dscGlobalSearchResults .list-group {
    margin: 0;
    border: 0;
}

#dscGlobalSearchResults .list-group-item {
    margin: 0;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid #ddd;
}


/**************/
/* STATE  */
/**********/
.dsc-state__on {
    font-size: 0.75rem;
    color: whitesmoke;
    text-transform: uppercase;
    font-weight: bold;
    background-color: #337ab7;
    padding: 2px 6px;
}

.dsc-state__off {
    color: #232323;
    text-transform: lowercase;
    padding: 2px 6px;
}

/*< Filter radio buttons */
.dsc-filter {
    padding: 0;
    margin: 0;
    border: 0;
}

.dsc-filter + .dsc-filter {
    padding: 0;
    margin: 0;
    border: 0;
}

/*severity*/
.dsc-filter input[type=radio] {
    display: none;
    padding: 0;
    margin: 0;
}

/*severity*/
.dsc-filter span, .dsc-filter.radio-inline span {
    padding: 0 6px;
    margin: 0 0 0 1px;
    min-width: 28px;
    background-color: #efefef;
    border: 1px solid #9a9a9a;
    border-radius: 100%;
    transition: border-radius .2s ease-in-out;
}

/* selected severity level */
.dsc-filter input[type=radio]:checked + span {
    /*border-radius: 0;*/
    box-shadow: 0 0 8px blue;
}

/*> Filter radio buttons */

/*< Hide/Show Columns */
.dsc-column-visibility-ctrl {
    border: 1px solid #9a9abb;
    border-radius: 4px;
    /*padding: 2px 22px 2px 24px;*/
    /*margin: 1px;*/
}

/*> Hide/Show Columns */

/*< table highlighing & colorization */
#dscDataTable.dsc-search-highlightened .dsc-search-text-match {
    font-weight: bold;
}

#dscDataTable.dsc-severity-colorized .dsc-state-red {
    font-weight: bold;
}

#dscDataTable.dsc-severity-colorized .dsc-state-orange {
    font-weight: bold;
}

#dscDataTable.dsc-severity-colorized .dsc-state-yellow {
    font-weight: bold;
}

#dscDataTable.dsc-severity-colorized .dsc-state-green {
    font-weight: bold;
}

#dscDataTable.dsc-severity-colorized .dsc-state-light-blue {
    font-weight: bold;
}

#dscDataTable.dsc-severity-colorized .dsc-state-blue {
    font-weight: bold;
}

#dscDataTable.dsc-severity-colorized .dsc-state-dark-blue {
    font-weight: bold;
}

#dscDataTable.dsc-severity-colorized .dsc-state-broken {
    font-weight: bold;
}

#dscDataTable.dsc-severity-colorized .dsc-state-not-in-effect{
    font-weight: lighter;
}

/*> table highlighing & colorization */

/*table.dataTable td {*/
/*  padding: 0.4em;*/
/*}*/

table.dataTable th {
  text-align: center;
}


#dscDataTable .dsc-msg-short {
    font-size: 11px;
    font-weight: bold;
}

#dscDataTable.table.table-bordered tbody th, table.table-bordered tbody td {
    vertical-align: middle;
}

/*< make sidebar toggleable */
#page-wrapper.dsc-page-full-width {
    margin-left: 0;
}

.dsc-navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.dsc-navbar-toggle:focus {
    outline: 0;
}

.dsc-navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}

.dsc-navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px;
}

@media (max-width: 767px) {
    .dsc-navbar-toggle {
        display: none;
    }
}

.navbar-default .dsc-navbar-toggle {
    border-color: #ddd;
}

.navbar-default .dsc-navbar-toggle:hover,
.navbar-default .dsc-navbar-toggle:focus {
    background-color: #ddd;
}

.navbar-default .dsc-navbar-toggle .icon-bar {
    background-color: #888;
}

.navbar-inverse .dsc-navbar-toggle {
    border-color: #333;
}

.navbar-inverse .dsc-navbar-toggle:hover,
.navbar-inverse .dsc-navbar-toggle:focus {
    background-color: #333;
}

.navbar-inverse .dsc-navbar-toggle .icon-bar {
    background-color: #fff;
}

.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}

/*> make sidebar toggleable */

.nav > li > span {
    color: #337ab7;
    text-decoration: none;
    position: relative;
    display: block;
    padding: 10px 15px;
}

/*> Tooltips: Bootstrap tooltip (base.html), light as tooltipsy used to be */
.tooltip.show {
    opacity: 1;
}

.tooltip-inner {
    max-width: min(600px, 90vw);
    padding: 6px;
    text-align: left;
    color: #444;
    background-color: #f5f5f5;
    border: 1px solid #dde;
}

/* placement bottom; Bootstrap flips it up when there is no room below */
.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: #dde;
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: #dde;
}

/*> divider */
/*.divider-10 {*/
/*    width: 100%;*/
/*    min-height: 1px;*/
/*    margin-top: 10px;*/
/*    margin-bottom: 10px;*/
/*    display: inline-block;*/
/*    position: relative;*/
/*}*/

/*.divider-5 {*/
/*    width: 100%;*/
/*    min-height: 1px;*/
/*    margin-top: 5px;*/
/*    margin-bottom: 5px;*/
/*    display: inline-block;*/
/*    position: relative;*/
/*}*/

/* sticky footer */
html {
    position: relative;
    min-height: 100%;
    background: white;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 25px;
    color: #444444;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 25px;
    line-height: 25px;  /* Vertically center text here */
    /*background-color: linen;*/
}

.font-bold {
  font-weight: bold;
}


/*test*/
body > .container {
    padding: 25px 15px 0;
}

.footer > .container {
    padding-right: 15px;
    padding-left: 15px;
}
/*******/

/*disable hover effect*/
.li-no-hover:hover {
    background-color: transparent;
}

.border-3 {
    border-width:3px !important;
}

.custom-select {
    color: #444444;
}

.dropdown-menu-button {
    color: #444444;
}

.dropdown-menu-button:hover {
    color: #244ec9;
}

table.datatable-wide {
    padding-left: 0;
    padding-right: 0;
}



/* Clipboard Copy */
.copy-to-clipboard {
  transition: all 0.2s ease;
}

.copy-to-clipboard:hover {
  color: #007bff;
}

.copied {
  color: #28a745 !important;
}

/* Temperature short table: fixed tile boxes instead of font icon glyphs as the layout base.
   Every tile (shelf/sensor) has exactly the same fixed size - severity = background-color,
   an optional icon (house/triangle) sits centred inside as a plain child. */
.dsc-tile-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.dsc-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border-radius: 2px;
  flex-shrink: 0;
}

.dsc-tile i {
  font-size: 9px;
  line-height: 1;
}

/* Severity background colours (same hex values as the former text-* classes) */
.dsc-tile--crit-lo  { background-color: #0000cd; }
.dsc-tile--warn2-lo  { background-color: #73c2fb; }
.dsc-tile--warn1-lo  { background-color: #9ff; }
.dsc-tile--ok        { background-color: #1cc88a; }
.dsc-tile--warn1-hi  { background-color: #fee090; }
.dsc-tile--warn2-hi  { background-color: #ef8a62; }
.dsc-tile--crit-hi   { background-color: #d73027; }

/* Internal shelf: neutral grey, no severity */
.dsc-tile--internal {
  background-color: #b2b2b2;
}

/* Broken sensor: dark tile */
.dsc-tile--broken {
  background-color: #363a44;
  border-radius: 3px;
}

/* Unknown severity: light tile with a dashed border, never a severity colour */
.dsc-tile--unknown {
  background-color: #fff;
  border: 1px dashed #858796;
}

/* Icon colour variants per tile background */
.dsc-tile-icon--dark {
  color: #4a4a4a;
}

.dsc-tile-icon--light {
  color: #b8bcc4;
}

/* dark house with a white outline, for coloured severity backgrounds (embedded head) */
.dsc-tile-icon--dark-outline {
  color: #4a4a4a;
  text-shadow:
    0 0 1px #fff,
    0 0 1px #fff,
    0 0 1px #fff,
    0 0 1px #fff;
}