body {
    background-color: rgb(205, 233, 245);
}

form {
    display: inline
}

.underline-dotted {
    text-decoration-line: underline;
    text-decoration-style: dotted;
}

/* Light Blue Pastels Color taken from: https://www.schemecolor.com/light-blue-pastels.php */
.light-blue-pastels.light-blue {
    background-color: #B1DAE6;
}
.light-blue-pastels.water {
    background-color: #C9E9F5;
}
.light-blue-pastels.azureish-white {
    background-color: #E1F5F3;
}
.light-blue-pastels.beau-blue {
    background-color: #BFD6F5;
}
.light-blue-pastels.pale-cornflower-blue {
    background-color: #B2C9EB;
}
/* the same as above but specific to bootstrap 5 table classes: */
.table tr>td.light-blue-pastels.light-blue {
    background-color: #B1DAE6;
}
.table tr>td.light-blue-pastels.water {
    background-color: #C9E9F5;
}
.table tr>td.light-blue-pastels.azureish-white {
    background-color: #E1F5F3;
}
.table tr>td.light-blue-pastels.beau-blue {
    background-color: #BFD6F5;
}
.table tr>td.light-blue-pastels.pale-cornflower-blue {
    background-color: #B2C9EB;
}

/* Pale Blues Color taken from: https://www.schemecolor.com/pale-blues.php */
.pale-blues-color.light-blue {
    background-color: #AAD6E9;
}
.pale-blues-color.azureish-white {
    background-color: #D1E2EE;
}
.pale-blues-color.american-silver {
    background-color: #C6D2D4;
}
.pale-blues-color.vodka {
    background-color: #B2C1EB;
}
.pale-blues-color.wild-blue-yonder {
    background-color: #A3AED2;
}
/* the same as above but specific to bootstrap 5 table classes: */
.table tr>td.pale-blues-color.light-blue {
    background-color: #AAD6E9;
}
.table tr>td.pale-blues-color.azureish-white {
    background-color: #D1E2EE;
}
.table tr>td.pale-blues-color.american-silver {
    background-color: #C6D2D4;
}
.table tr>td.pale-blues-color.vodka {
    background-color: #B2C1EB;
}
.table tr>td.pale-blues-color.wild-blue-yonder {
    background-color: #A3AED2;
}

/* slightly modified snippet for the multi-level dropdown bootstrap menu,
    taken from: https://mdbootstrap.com/docs/standard/extended/dropdown-multilevel/ */
.dropdown-menu div {
    position: relative;
}
.dropdown-menu .dropdown-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
}
.dropdown-menu .dropdown-submenu-left {
    right: 100%;
    left: auto;
}
.dropdown-menu > div:hover > .dropdown-submenu {
    display: block;
}

@media print {
    nav {
        display: none !important;
    }
}

/* class for displaying a store color */
.store_color_box {
    border: solid;
    border-color: black;
    border-width: 1px;
}

/* class for displaying qr print preview */
.qr_print_preview{
    max-height: 384px;
    max-width: 768px;
    height: auto;
    width: auto;
}

/* classes for managing document to be printed */
.print_document_root {
    /* display: none */
}

.print_document_container {
    /* display: none */
}

.page_break_after_always {
    /* break-after: always; */
    page-break-after: always;   /* when applied as a style, transformed by Firefox to break-after: page o_O */
}

.disposable_print_iframe {
    display: none;
}

@media screen {
    .page_divisor {
        border-bottom: 2px dotted #00aa00;
    }
}

/* media query to control printing QR-codes */
@media print {
    body {
        margin: 0;
    }
    /* class for a QR image to be printed */
    .qr_print_image {
        width: "100%";
        height: "100%";
    }

    /* do not display page divisor when printing */
    .page_divisor {
        display: none;
    }
}

@keyframes highlight-new-api-key {
    from {
        background-color: teal;
    }
}

.new-api-key {
    animation: highlight-new-api-key 1500ms ease-out;
}

/* styles for expandable tables */
table.expandable-table tr.hidden-row
{
    display: none;
}

table.expandable-table.expanded tr
{
    display: table-row;
}

table.expandable-table tr.visible-row
{
    display: table-row;
}

/* vertical table headers */
.headerVerticalLr
{
  writing-mode: vertical-lr;
}

.headerVerticalRl
{
    writing-mode: vertical-rl
}

/* 'scroll to top' button */
.scrollToTopBtn {
    display: none;
    position: fixed;
    /* width: 64px;
    height: 64px; */
    bottom: 32px;
    right: 32px;
    z-index: 99;
}

#recorderDataTable{
    border-spacing: 0;
    border-collapse: collapse;
}

#recorderDataTable thead{
    position: sticky;
    top: 0;
    margin: 0;
}

#recorderDataTable > :not(caption) > * > *{
    padding: 0 0.08rem;
    min-width: 27px;
    text-align: center;
}

#recorderDataTable th{
    text-align: right;
}

.invalidSymbols {
    color: red;
    /* font-weight: bolder; */
    background-color: #f8d7da;
}

/* spinner based on the loader example from w3schools (see https://www.w3schools.com/howto/howto_css_loader.asp) */
.spinner {
    border: 4px solid whitesmoke;
    border-top: 4px solid rgb(4, 69, 166);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* .table tr
#recorderDataTable > tbody > tr > td.table-success.highlightedCell,
#recorderDataTable > tbody > tr > td.highlightedCell{
    animation: highlight-original-record 2500ms ease-out;
} */

/* highlight animation of the original recorder log line
@keyframes highlight-original-record {
    from {
        background-color: rgb(229, 255, 0);
    }
} */

/* override default bootstrap 5 input placeholder color which is too bright in the extent it can be confused with entered value */
input.form-control::placeholder {
    opacity: 0.75 !important;
}

/* class for highlighting SQL query parameters which is missing from highlight.js */
.sql-param {
    /* color: #b88b03;
    font-weight: bolder */
    color: blue
}

.metro-control-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  align-items: center;
}

.train-selector, .depot-selector, .wagon-selector {
  background-color: rgb(68, 83, 110);
  display: inline-block;
  vertical-align: middle;
  font-size: 1.2rem;
}

.train-selector-inactive, .wagon-selector-inactive {
  background-color: grey;
  display: inline-block;
  vertical-align: middle;
  font-size: 1.2rem;
}

.cell-container {
  min-width: 100px;
  height: 50px;
  padding: 0.1rem;
  font-size: 1.8rem;
}

.wagon-container {
  background-color: rgb(177, 177, 177);
  border: solid 0.25rem rgb(177, 177, 177);
  font-size: 1.2rem;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  width: 90%;
}

.train-container {
  background-color: white;
  border: solid 2px rgb(92, 112, 150);
  width: 300px;
  font-size: 1rem;
  display: inline-block;
  vertical-align: middle;
  text-align: left;
}

.depot-container {
  background-color: rgb(92, 112, 150);
  border: solid 2px rgb(92, 112, 150);
  width: 300px;
  font-size: 1.2rem;
  display: inline-block;
  vertical-align: middle;
  text-align: left;
}

.depot-image, .train-image {
  width: 2rem;
  height: 2rem; 
}

.wagon-image {
  width: 3rem;
  height: 2rem;   
}

.door-image, .resource-image {
  width: 0.8rem;
  height: 0.8rem;
}

.door-image-table {
  width: 1.2rem;
  height: 1.2rem;
}

.resource-status-table {
  width: 1.2rem;
  height: 1.2rem;
}

.parameter-image {
  width: 1rem;
  height: 1rem;
}

.door-status-image, .resource-status-image {
  width: 2rem;
  height: 2rem;
}

.depot-selector-image, .train-selector-image {
  width: 2rem;
  height: 2rem;  
}

.filter-button {
  width: 2rem;
  height: 2rem;
}

.mode-buttons, .wagon-controls {
  width: 100%;
  justify-content: end;
  margin-left: 0;
}

.wagon-controls {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
  align-items: center;
}

.control-panel-button {
  background-size: 100%;
  background-repeat: no-repeat;
  width: 3rem;
  height: 2rem;
}

.close-button {
  background-image: url('/icons/exit.svg');
  width: 2rem;
  height: 2rem;
} 

.filter-button-issuies-on {
  background-image: url('/icons/filter_error_blue.svg');
}

.filter-button-issuies-off {
  background-image: url('/icons/filter_error_grey.svg');
}

.filter-button-view-mode-battery {
  background-image: url('/icons/filter_battery_blue.svg');
}

.filter-button-view-mode-resource {
  background-image: url('/icons/filter_resource_blue.svg');
}

.filter-button-view-mode-doors {
  background-image: url('/icons/filter_doors_blue.svg');
}

.filter-button-display-mode-wagon {
  background-image: url('/icons/filter_vagon_blue.svg');
}

.filter-button-display-mode-blocks {
  background-image: url('/icons/filter_blocks_blue.svg');
  vertical-align: top;
}

.control-button-custom-inactive {
  border: solid 1px #B3B3B3;
}

.control-button-custom-active {
  border: solid 1px #647B98;
}

.inactive-control-custom-image {
  color: #B3B3B3;
}

.active-control-custom-image {
  color: #647B98;
}


.wagon-button, .wagon-button-inactive {
  background-image: url('/icons/vagon_number_blue.svg');
  position: relative;
}

.wagon-button-number {
  color: white;
  position: absolute;
  top: 1%;
  left: 0;
  right: 0;
  bottom: 55%;
  text-align: center;
  font-size: 0.7rem;
  font-weight: bold;
}

.wagon-button-inactive {
  background-image: url('/icons/vagon_number_grey.svg');
}

.depot-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}


.depot-table th, .depot-table td {
  padding: 0.1rem;
  text-align: center;
  vertical-align: middle;
}

.table-detail-view {
  overflow-x: auto;
  font-size: 0.8rem;
  border: solid 2px rgb(92, 112, 150);
}

.battery-grid, .door-grid {
  display: grid;
  width: 100%;
  height: 100%;
  gap: 0.1rem;
  padding: 0.1rem;
  font-size: 0.5rem;
}

.battery-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.door-grid {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.battery-cell, .door-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  color: white;
  border: solid 2px white;
  padding: 0.1rem;
  font-size: 0.6rem;
}

.battery-summary, .door-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  color: white;
  border: solid 2px white;
  cursor: pointer;
  font-size: 2rem;
  font-weight: 500;
}

.train-details .table {
  border: solid 2px grey;
}

.th-cell-container {
    position: relative;
    height: 100%;
    width: 100%;
}

.th-overlay-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 0 10px;
    z-index: 2;
}

.th-horizontal-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    z-index: 1;
    margin: 0;
    opacity: 1;
}

.tr-with-border-bottom {
  border-bottom: #00aa00c4 solid 1px;
}


/*
.depot-card {
  margin-bottom: 1rem;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
}

.train-details .table {
  margin-bottom: 0;
}

.train-details .table tr:last-child td {
  border-bottom: none;
}


@media (max-width: 768px) {
  .control-panel {
    flex-direction: column;
  }

  .selectors {
    max-width: 100%;
    width: 100%;
  }

  .cell-container {
    height: 60px;
  }
} */