@font-face {
  font-family: "PT Sans Narrow";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/PTSansNarrow.woff2") format("woff2");
}
.more_button_item .dx-button-content {
  justify-content: flex-start;
}

.row_menu_col {
  width: 35px !important;
  min-width: 35px !important;
  vertical-align: middle !important;
}

.dx-command-select {
  width: 35px !important;
  min-width: 35px !important;
}


/* page_root: outer column-flex wrapper for full-page views. Sets dvh height
   so the page fills the viewport with the menu chrome above it. Used by
   every list view and edit view that wants its toolbar pinned and body
   scrollable. Replaces inline style="display:flex;flex-direction:column;
   height:100dvh;" sprinkled across 56 views. */
.page_root {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

/* page_body: scrollable middle region of a .page_root layout (toolbar
   stays pinned above, body absorbs remaining space). Replaces inline
   style="flex:2 2 auto;overflow-y:auto;min-height:0px;" on grids/forms. */
.page_body {
  flex: 2 2 auto;
  overflow-y: auto;
  min-height: 0;
}

/* page_toolbar: wrapper for standalone DevExtreme Toolbar widgets so they
   sit at the same height as the toolbar embedded in DataGrid pages
   (Refuels / Devices / etc. inherit this for free from .dx-datagrid). */
.page_toolbar {
  flex: 0 0 auto;
  height: 56px;
  display: flex;
  align-items: center;
  padding-right: 5px;
}
.note {
  background-image: url("data:image/svg+xml;utf8,<svg width='10' height='10' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'><path d='M63.333 63.333h896v896z' fill='red' /></svg>");
  background-repeat: no-repeat;
  background-position: right top;
}

/* Excel-style red corner indicator on grid cells whose row carries a
   remark. Consumed by site.js's tmShowRemarkOnCell helper; the hover
   text is set as the cell's native title attribute so any grid opts in
   by wiring an OnCellPrepared handler. Replaces the legacy
   /img/corner_red_10.png + DevXGridView.SetTooltip pattern from RMWeb. */
.cell-has-remark { position: relative; }
.cell-has-remark::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 0 9px 9px 0;
  border-color: transparent #d11 transparent transparent;
  pointer-events: none;
}

/* Reusable status-chip pill for grid cells. Bound to StatusChipDTO
   (Caption/BackColor/TextColor) by the Live + Airport status grids via
   a forEach over data.StatusChips. */
.span-tag {
  position: relative;
  display: inline-block;
  text-align: center;
  margin: 4px 0 0 4px;
  padding: 3px 15px 4px 6px;
  min-width: 40px;
  border-radius: 2px;
}

.date_col {
  min-width: 90px !important;
  width: 90px !important;
}

.time_col {
  min-width: 70px !important;
  width: 70px !important;
}

.datetime_col {
  min-width: 150px !important;
  width: 150px !important;
}

.duration_col {
  min-width: 80px !important;
  width: 80px !important;
}

.active_col {
  width: 40px !important;
  min-width: 40px !important;
}

@media (prefers-color-scheme: dark) {
  .dx-viewport {
    background-color: #2a2a2a !important;
  }
  #sidebar {
    min-width: 220px;
    max-width: 220px;
    background: #009688;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
  }
  #sidebar.active {
    margin-left: -220px;
  }
}
@media (prefers-color-scheme: dark) and (max-width: 991.98px) {
  #sidebar {
    margin-left: -220px;
  }
  #sidebar.active {
    margin-left: 0;
  }
}
@media (prefers-color-scheme: dark) {
  #sidebar .custom-menu {
    display: inline-block;
    position: absolute;
    top: 0px;
    right: 0;
    margin-right: -20px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
  }
}
@media (prefers-color-scheme: dark) and (prefers-reduced-motion: reduce) {
  #sidebar .custom-menu {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
}
@media (prefers-color-scheme: dark) {
  #sidebar .custom-menu .btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: relative;
  }
  #sidebar .custom-menu .btn i {
    margin-right: -40px;
    font-size: 14px;
  }
  #sidebar .custom-menu .btn.btn-primary {
    background: 0 0;
    border-color: transparent;
  }
  #sidebar .custom-menu .btn.btn-primary:after {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background: #009688;
    border-radius: 10px;
  }
  #sidebar .custom-menu .btn.btn-primary:hover,
  #sidebar .custom-menu .btn.btn-primary:focus {
    background: 0 0 !important;
    border-color: transparent !important;
  }
  a[data-toggle=collapse] {
    position: relative;
  }
  .dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}
@media (prefers-color-scheme: dark) and (max-width: 991.98px) {
  #sidebarCollapse span {
    display: none;
  }
}
@media (prefers-color-scheme: dark) {
  #content {
    width: 100%;
    padding: 0;
    min-height: 100dvh;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }
  .btn.btn-primary {
    background: #009688;
    border-color: #009688;
  }
  .btn.btn-primary:hover,
  .btn.btn-primary:focus {
    background: #009688 !important;
    border-color: #009688 !important;
  }
  #sidebarCollapse:focus, #sidebarCollapse:active {
    outline: none !important;
    box-shadow: none;
  }
  .logo_s {
    height: 36px;
  }
  .caption_s {
    font-size: 18px;
    font-weight: bold;
  }
  .caption_c {
    font-size: 18px;
    font-weight: bold;
  }
  .caption_space {
    padding-left: 30px;
  }
  .caption_f {
    font-weight: bold;
  }
}
@media (prefers-color-scheme: light) {
  #sidebar {
    min-width: 220px;
    max-width: 220px;
    background: #009688;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
  }
  #sidebar.active {
    margin-left: -220px;
  }
}
@media (prefers-color-scheme: light) and (max-width: 991.98px) {
  #sidebar {
    margin-left: -220px;
  }
  #sidebar.active {
    margin-left: 0;
  }
}
@media (prefers-color-scheme: light) {
  #sidebar .custom-menu {
    display: inline-block;
    position: absolute;
    top: 0px;
    right: 0;
    margin-right: -20px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
  }
}
@media (prefers-color-scheme: light) and (prefers-reduced-motion: reduce) {
  #sidebar .custom-menu {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
}
@media (prefers-color-scheme: light) {
  #sidebar .custom-menu .btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: relative;
  }
  #sidebar .custom-menu .btn i {
    margin-right: -40px;
    font-size: 14px;
  }
  #sidebar .custom-menu .btn.btn-primary {
    background: 0 0;
    border-color: transparent;
  }
  #sidebar .custom-menu .btn.btn-primary:after {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background: #009688;
    border-radius: 10px;
  }
  #sidebar .custom-menu .btn.btn-primary:hover,
  #sidebar .custom-menu .btn.btn-primary:focus {
    background: 0 0 !important;
    border-color: transparent !important;
  }
  a[data-toggle=collapse] {
    position: relative;
  }
  .dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}
@media (prefers-color-scheme: light) and (max-width: 991.98px) {
  #sidebarCollapse span {
    display: none;
  }
}
@media (prefers-color-scheme: light) {
  #content {
    width: 100%;
    padding: 0;
    min-height: 100dvh;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }
  .btn.btn-primary {
    background: #009688;
    border-color: #009688;
  }
  .btn.btn-primary:hover,
  .btn.btn-primary:focus {
    background: #009688 !important;
    border-color: #009688 !important;
  }
  #sidebarCollapse:focus, #sidebarCollapse:active {
    outline: none !important;
    box-shadow: none;
  }
  .logo_s {
    height: 36px;
  }
  .caption_s {
    font-size: 18px;
    font-weight: bold;
  }
  .caption_c {
    font-size: 18px;
    font-weight: bold;
  }
  .caption_space {
    padding-left: 30px;
  }
  .caption_f {
    font-weight: bold;
  }
}

/* Same 5px right inset on DataGrid-embedded toolbars so the
   search box / right-aligned items don't butt against the
   page edge. */
.dx-datagrid-header-panel {
  padding-right: 5px;
}