/* MCR clean scroll system */

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
}

* {
  box-sizing: border-box;
}

.app {
  height: 100vh !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
}

.main {
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
}

.board {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

.operations {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

.rail,
.location-section {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.rail-head,
.section-head {
  flex: 0 0 auto !important;
}

.rail-list,
.wing-layout,
.yard-layout {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
}

/* modern hidden/fade scrollbar */
.rail-list,
.wing-layout,
.yard-layout {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.rail-list:hover,
.wing-layout:hover,
.yard-layout:hover {
  scrollbar-color: rgba(148,163,184,.85) transparent;
}

.rail-list::-webkit-scrollbar,
.wing-layout::-webkit-scrollbar,
.yard-layout::-webkit-scrollbar {
  width: 7px;
}

.rail-list::-webkit-scrollbar-track,
.wing-layout::-webkit-scrollbar-track,
.yard-layout::-webkit-scrollbar-track {
  background: transparent;
}

.rail-list::-webkit-scrollbar-thumb,
.wing-layout::-webkit-scrollbar-thumb,
.yard-layout::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
}

.rail-list:hover::-webkit-scrollbar-thumb,
.wing-layout:hover::-webkit-scrollbar-thumb,
.yard-layout:hover::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.85);
}