.equipment-location-main-container{
  width: 100%;
  height: calc(100vh - 230px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.location-type-selection{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.line-location-container{
  width: 100%;
  height: calc(100vh - 320px);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.line-parts-container{
  height: 100%;
  width: calc(100% - 128px);
  display: flex;
  flex-direction: row;
  overflow-y: hidden;
  overflow-x: auto;
  justify-content: flex-start;
}

.line-parts-container img{
  height: 100%;
  cursor: pointer;
  transition: all 0.25s ease;
}

.line-parts-container img:hover{
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}

.image-fade-out{
  animation-name: imageOut;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}

@keyframes imageOut{
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

.image-move-left{
  animation-name: imageLeft;
  animation-duration: 1s;
  animation-timing-function: ease;
}

@keyframes imageLeft{
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.train-area-selection-container{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.car-views-row{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.train-families-flex{
  width: 100%;
  height: 100%;
  position: relative;
}

.rc-car-lateral-layout{ position: relative; width: 994px; height: 169px; padding: 32px 0; margin: 0 auto; }
.rc-car-top-layout    { position: relative; width: 995px; height: 169px; padding: 32px 0; margin: 0 auto; }
.rc-car-bottom-layout { position: relative; width: 997px; height: 169px; padding: 32px 0; margin: 0 auto; }

.n-car-lateral-layout { position: relative; width: 955px; height: 169px; padding: 32px 0; margin: 0 auto; }
.n-car-top-layout     { position: relative; width: 922px; height: 169px; padding: 32px 0; margin: 0 auto; }
.n-car-bottom-layout  { position: relative; width: 887px; height: 169px; padding: 32px 0; margin: 0 auto; }

.r-car-lateral-layout { position: relative; width: 955px; height: 169px; padding: 32px 0; margin: 0 auto; }
.r-car-top-layout     { position: relative; width: 922px; height: 169px; padding: 32px 0; margin: 0 auto; }
.r-car-bottom-layout  { position: relative; width: 889px; height: 169px; padding: 32px 0; margin: 0 auto; }
 
.area-101  { position: absolute; width:  95px; height: 169px; top:    32px; left:      0; }
.area-102  { position: absolute; width: 247px; height: 122px; top:    32px; left:   95px; }
.area-103  { position: absolute; width: 242px; height: 122px; top:    32px; left:  342px; }
.area-104  { position: absolute; width: 242px; height: 122px; top:    32px; right: 168px; }
.area-105  { position: absolute; width: 119px; height: 122px; top:    32px; right:  49px; }
.area-106  { position: absolute; width:  49px; top:    32px; right:     0; }
.area-191  { position: absolute; width:  36px; height:  47px; bottom: 32px; left:   95px; }
.area-195  { position: absolute; width:  24px; height:  47px; bottom: 32px; left:  131px; }
.area-192  { position: absolute; width:  34px; height:  47px; bottom: 32px; left:  155px; }
.area-197  { position: absolute; width: 642px; bottom: 32px; left:  189px; }
.area-193  { position: absolute; width:  37px; height:  47px; bottom: 32px; right: 127px; }
.area-196  { position: absolute; width:  24px; height:  47px; bottom: 32px; right: 103px; }
.area-194  { position: absolute; width:  54px; height:  47px; bottom: 32px; right:  49px; }

.area-171  { position: absolute; width:  31px; height: 169px; top:    32px; left:      0; }
.area-111-1{ position: absolute; width:  66px; height:  84px; top:    32px; left:   31px; }
.area-111-2{ position: absolute; width:  66px; height:  84px; bottom: 32px; left:   31px; }
.area-117  { position: absolute; width:  24px; height:  84px; top:    32px; left:   97px; }
.area-116  { position: absolute; width:  24px; height:  84px; bottom: 32px; left:   97px; }
.area-115  { position: absolute; width:  52px; height:  84px; top:    32px; left:  121px; }
.area-114  { position: absolute; width:  52px; height:  84px; bottom: 32px; left:  121px; }
.area-121  { position: absolute; width: 102px; height:  84px; top:    32px; left:  173px; }
.area-131  { position: absolute; width: 102px; height:  84px; bottom: 32px; left:  173px; }
.area-122  { position: absolute; width: 242px; height:  84px; top:    32px; left:  275px; }
.area-132  { position: absolute; width: 242px; height:  84px; bottom: 32px; left:  275px; }
.area-123  { position: absolute; width: 243px; height:  84px; top:    32px; right: 235px; }
.area-133  { position: absolute; width: 243px; height:  84px; bottom: 32px; right: 235px; }
.area-124  { position: absolute; width: 137px; height:  84px; top:    32px; right:  98px; }
.area-134  { position: absolute; width: 137px; height:  84px; bottom: 32px; right:  98px; }
.area-149  { position: absolute; width:  98px; height:  84px; top:    32px; right:     0; }
.area-159  { position: absolute; width:  98px; height:  84px; bottom: 32px; right:     0; }

.area-172  { position: absolute; width: 125px; height: 169px; top:    32px; left:      0; }
.area-173  { position: absolute; width: 240px; height: 169px; top:    32px; left:  125px; }
.area-174  { position: absolute; width:  68px; height: 122px; top:    32px; left:  365px; }
.area-174-1{ position: absolute; width:  68px; height:  47px; bottom: 32px; left:  365px; }
.area-175  { position: absolute; width:  88px; height:  86px; top:    32px; left:  433px; }
.area-175-1{ position: absolute; width:  88px; height:  83px; bottom: 32px; left:  433px; }
.area-176  { position: absolute; width:  62px; height:  85px; top:    32px; right: 414px; }
.area-176-1{ position: absolute; width:  62px; height:  84px; bottom: 32px; right: 414px; }
.area-177  { position: absolute; width:  65px; height:  85px; top:    32px; right: 349px; }
.area-177-1{ position: absolute; width:  65px; height:  84px; bottom: 32px; right: 349px; }
.area-178  { position: absolute; width:  71px; height:  85px; top:    32px; right: 278px; }
.area-178-1{ position: absolute; width:  71px; height:  84px; bottom: 32px; right: 278px; }
.area-179  { position: absolute; width: 241px; height: 169px; bottom: 32px; right:  37px; }
.area-180  { position: absolute; width:  37px; height: 169px; bottom: 31px; right:     0; }

.area-200  { position: absolute; width:  47px; top:    32px; left:      0; }
.area-202  { position: absolute; width: 256px; height: 123px; top:    32px; left:   47px; }
.area-203  { position: absolute; width: 242px; height: 123px; top:    32px; left:  303px; }
.area-291  { position: absolute; width:  45px; height:  52px; bottom: 32px; left:   47px; }
.area-295  { position: absolute; width:  24px; height:  52px; bottom: 32px; left:   92px; }
.area-292  { position: absolute; width:  34px; height:  52px; bottom: 32px; left:  116px; }
.area-297  { position: absolute; width: 633px; bottom: 32px; left:  150px; }
.area-293  { position: absolute; width:  46px; height:  47px; bottom: 32px; right: 127px; }
.area-296  { position: absolute; width:  24px; height:  47px; bottom: 32px; right: 103px; }
.area-294  { position: absolute; width:  54px; height:  47px; bottom: 32px; right:  49px; }
.area-204  { position: absolute; width: 242px; height: 123px; top:    32px; right: 168px; }
.area-205  { position: absolute; width: 119px; height: 123px; top:    32px; right:  49px; }
.area-206  { position: absolute; width:  49px; top:    32px; right:     0; }

.area-241  { position: absolute; width: 100px; height:  84px; top:    32px; left:      0; }
.area-251  { position: absolute; width: 100px; height:  84px; bottom: 32px; left:      0; }
.area-221  { position: absolute; width: 102px; height:  84px; top:    32px; left:  100px; }
.area-231  { position: absolute; width: 102px; height:  84px; bottom: 32px; left:  100px; }
.area-222  { position: absolute; width: 242px; height:  84px; top:    32px; left:  202px; }
.area-232  { position: absolute; width: 242px; height:  84px; bottom: 32px; left:  202px; }
.area-223  { position: absolute; width: 243px; height:  84px; top:    32px; right: 235px; }
.area-233  { position: absolute; width: 243px; height:  84px; bottom: 32px; right: 235px; }
.area-224  { position: absolute; width: 137px; height:  84px; top:    32px; right:  98px; }
.area-234  { position: absolute; width: 137px; height:  84px; bottom: 32px; right:  98px; }
.area-249  { position: absolute; width:  98px; height:  84px; top:    32px; right:     0; }
.area-259  { position: absolute; width:  98px; height:  84px; bottom: 32px; right:     0; }

.area-272  { position: absolute; width:  28px; height: 173px; top:    32px; left:      0; }
.area-273  { position: absolute; width: 241px; height: 173px; top:    32px; left:   28px; }
.area-274  { position: absolute; width:  73px; height:  61px; top:    32px; left:  269px; }
.area-274-1{ position: absolute; width:  73px; height:  51px; top:    93px; left:  269px; }
.area-274-2{ position: absolute; width:  73px; height:  61px; bottom: 28px; left:  269px; }
.area-275  { position: absolute; width:  72px; height:  87px; top:    32px; left:  342px; }
.area-275-1{ position: absolute; width:  72px; height:  86px; bottom: 28px; left:  342px; }
.area-276  { position: absolute; width:  75px; height:  87px; top:    32px; left:  414px; }
.area-276-1{ position: absolute; width:  75px; height:  86px; bottom: 28px; left:  414px; }
.area-277  { position: absolute; width:  54px; height:  63px; top:    32px; right: 344px; }
.area-277-2{ position: absolute; width:  54px; height:  47px; top:    95px; right: 344px; }
.area-277-1{ position: absolute; width:  54px; height:  63px; bottom: 28px; right: 344px; }
.area-278  { position: absolute; width:  75px; height:  60px; top:    32px; right: 269px; }
.area-278-3{ position: absolute; width:  75px; height:  27px; top:    92px; right: 269px; }
.area-278-2{ position: absolute; width:  75px; height:  26px; bottom: 88px; right: 269px; }
.area-278-1{ position: absolute; width:  75px; height:  60px; bottom: 28px; right: 269px; }
.area-279  { position: absolute; width: 241px; height: 173px; top:    32px; right:  28px; }
.area-280  { position: absolute; width:  28px; height: 173px; top:    32px; right:     0; }

.area-501  { position: absolute; width:  47px; top:    32px; left:      0; }
.area-502  { position: absolute; width: 256px; height: 123px; top:    32px; left:   47px; }
.area-503  { position: absolute; width: 242px; height: 123px; top:    32px; left:  303px; }
.area-591  { position: absolute; width:  45px; height:  52px; bottom: 32px; left:   47px; }
.area-595  { position: absolute; width:  24px; height:  52px; bottom: 32px; left:   92px; }
.area-592  { position: absolute; width:  34px; height:  52px; bottom: 32px; left:  116px; }
.area-597  { position: absolute; width: 633px; bottom: 32px; left:  150px; }
.area-593  { position: absolute; width:  46px; height:  47px; bottom: 32px; right: 127px; }
.area-596  { position: absolute; width:  24px; height:  47px; bottom: 32px; right: 103px; }
.area-594  { position: absolute; width:  54px; height:  47px; bottom: 32px; right:  49px; }
.area-504  { position: absolute; width: 242px; height: 123px; top:    32px; right: 168px; }
.area-505  { position: absolute; width: 119px; height: 123px; top:    32px; right:  49px; }
.area-506  { position: absolute; width:  49px; top:    32px; right:     0; }

.area-541  { position: absolute; width: 100px; height:  84px; top:    32px; left:      0; }
.area-551  { position: absolute; width: 100px; height:  84px; bottom: 32px; left:      0; }
.area-521  { position: absolute; width: 102px; height:  84px; top:    32px; left:  100px; }
.area-531  { position: absolute; width: 102px; height:  84px; bottom: 32px; left:  100px; }
.area-522  { position: absolute; width: 242px; height:  84px; top:    32px; left:  202px; }
.area-532  { position: absolute; width: 242px; height:  84px; bottom: 32px; left:  202px; }
.area-523  { position: absolute; width: 243px; height:  84px; top:    32px; right: 235px; }
.area-533  { position: absolute; width: 243px; height:  84px; bottom: 32px; right: 235px; }
.area-524  { position: absolute; width: 137px; height:  84px; top:    32px; right:  98px; }
.area-534  { position: absolute; width: 137px; height:  84px; bottom: 32px; right:  98px; }
.area-549  { position: absolute; width:  98px; height:  84px; top:    32px; right:     0; }
.area-559  { position: absolute; width:  98px; height:  84px; bottom: 32px; right:     0; }

.area-572  { position: absolute; width:  24px; height: 170px; top:    32px; left:      0; }
.area-573  { position: absolute; width: 245px; height: 170px; top:    32px; left:   24px; }
.area-574  { position: absolute; width:  70px; height:  86px; top:    32px; left:  269px; }
.area-574_1{ position: absolute; width:  70px; height:  84px; bottom: 31px; left:  269px; }
.area-575  { position: absolute; width:  78px; height:  86px; top:    32px; left:  339px; }
.area-575_1{ position: absolute; width:  78px; height:  84px; bottom: 31px; left:  339px; }
.area-576  { position: absolute; width:  71px; height:  59px; top:    32px; left:  417px; }
.area-576_2{ position: absolute; width:  71px; height:  50px; top:    91px; left:  417px; }
.area-576_1{ position: absolute; width:  71px; height:  61px; bottom: 31px; left:  417px; }
.area-577  { position: absolute; width:  57px; height:  85px; top:    32px; right: 344px; }
.area-577_1{ position: absolute; width:  57px; height:  85px; bottom: 31px; right: 344px; }
.area-578  { position: absolute; width:  68px; height:  85px; top:    32px; right: 276px; }
.area-578_1{ position: absolute; width:  68px; height:  85px; bottom: 31px; right: 276px; }
.area-579  { position: absolute; width: 247px; height: 170px; top:    32px; right:  29px; }
.area-580  { position: absolute; width:  29px; height: 170px; top:    32px; right:     0; }

.shadow{
  cursor: pointer;
  transition: all 0.25s ease;
}

.shadow:hover{
  filter: drop-shadow(0 0 0.75rem rgba(0,0,0,0.36));
  z-index: 999;
}

.pcc-location-container{
  width: 100%;
  height: calc(100% - 96px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
}

.coords-container{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 0 4px;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.coord-x{
  display: flex;
  flex-direction: column-reverse;
  width: 20px;
  box-sizing: border-box;
}

.coord-y{
  height: 20px;
  cursor: pointer;
}

.border_right{
  border-right: 1px solid rgba(0, 0, 0, 0.25);
}

.border_left{
  border-left: 1px solid rgba(0, 0, 0, 0.25);
}

.border_top{
  border-top: 1px solid rgba(0, 0, 0, 0.25);
}

.border_bottom{
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

.empty_square:hover{
  background-color: rgba(0, 0, 0, 0.12);
}

/* ESTILOS UBICACION POR VIA */
.main-selector-container{
  width: 100%;
  height: calc(100vh - 240px);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  padding: 0 4px 4px 4px;
  justify-content: space-between;
}

.movement-button{
  width: 64px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.movement-button:hover{
  background-color: rgba(0, 0, 0, 0.06);
}

.location-frame-container{
  width: calc(100% - 136px);
  height: 100%;
  box-sizing: border-box;
  border: solid 1px black;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.location-frame-container::-webkit-scrollbar {
  width: 4px;
  background-color: #EEE; 
}

.location-frame-container::-webkit-scrollbar-thumb {
  background-color: #CCC; 
}

.line-locator-container{
  display: flex;
  flex-direction: column;
  width: 1024px;
  margin: 8px auto;
}

.locator-icons-container{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  box-sizing: border-box;
  padding: 0 16px;
}

.locator-icons-container mat-icon{
  width: 15px;
  height: 15px;
  font-size: 15px;
}

.rotated{
  transform: rotate(90deg);
}

.line-locator-container-background{
  background-color: #DDD;
}

.line-elements-container{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: #DDD;
  box-sizing: border-box;
  padding: 0 16px;
}

.first-line-element{
  width: 32px;
  height: 16px;
  border-radius: 8px 0 0 8px;
  background-color: #636363;
}

.station-circle{
  width: 16px;
  height: 16px;
  background-color: #636363;
}

.station-circle-outline{
  width: 16px;
  height: 16px;
  background-color: #AAA;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.station-circle-fill{
  width: 10px;
  height: 10px;
  background-color: #636363;
  border-radius: 5px;
}

.inter-station-section{
  width: 32px;
  height: 16px;
  background-color: #636363;
}

.last-line-element{
  width: 32px;
  height: 16px;
  border-radius: 0 8px 8px 0;
  background-color: #636363;
}

.interstation_width{ width: 32px; }
.center-icon{ text-align: center; transition: all 0.5s ease; }
.station_width{ width: 16px; }

.station-logos-container{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: #DDD;
  box-sizing: border-box;
  padding: 0 16px;
}

.station-logo{
  width: 48px;
  height: 48px;
  background-color: #DDD;
  box-sizing: border-box;
  padding: 12px;
}

.station-logo:first-child{
  margin-left: 16px;
}

.station-logo:last-child{
  margin-right: 16px;
}

.station-logo img{
  width: 100%;
  height: 100%;
}

.transparent{ opacity: 0; }

.non_selected_station{
  filter: grayscale(100%);
  opacity: 0.56;
}

.selected_background{
  background: rgba(0, 92, 187, 1) !important;
}

.selected_to_unselected_background{
  background: linear-gradient(90deg, rgba(0,92,187,1) 0%, rgba(99,99,99,1) 45%, rgba(99,99,99,1) 100%) !important;
}

.unselected_to_selected_background{
  background: linear-gradient(270deg, rgba(0,92,187,1) 0%, rgba(99,99,99,1) 45%, rgba(99,99,99,1) 100%) !important;
}

.via-elements-container{
  width: 100%;
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  min-height: 345px;
  margin: 16px 0;
  overflow-y: hidden;
}

.via-elements-container::-webkit-scrollbar{
  height: 4px;
  background-color: #EEE; 
}

.via-elements-container::-webkit-scrollbar-thumb {
  background-color: #CCC; 
}

.via-elements-container .img{
  width: 192px;
  height: 345px;
  min-width: 192px;
  min-height: 345px;
  cursor: pointer;
  transition: all 0.5s ease;
  position: relative;
}

.via-elements-container .img:hover{
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.45);
}

.ruler-elements-container{
  width: 100%;
  overflow-x: hidden;
  display: flex;
  flex-direction: row;
  padding: 16px 48px;
  box-sizing: border-box;
  min-height: 79px;
}

.via-side-spacer{
  min-width: 48px;
  height: 345px;
}

.ruler_scale_number{
  font-size: 16px;
  border-radius: 16px;
  cursor: pointer;
  width: 72px;
  text-align: center;
  padding: 4px;
  box-sizing: border-box;
  margin-left: -36px;
}

.ruler_scale_number:hover{
  background: rgba(0, 0, 0, 0.12);
}

.ruler_scale_entire_number{
  font-size: 16px;
  border-radius: 16px;
  cursor: pointer;
  width: 72px;
  text-align: center;
  padding: 4px;
  box-sizing: border-box;
  margin-left: -36px;
  background: #DDD;
}

.zero_ruler_scale_entire_number{
  margin-top: -23px;
  margin-left: 156px;
  font-size: 16px;
  border-radius: 16px;
  cursor: pointer;
  width: 72px;
  text-align: center;
  padding: 4px;
  box-sizing: border-box;
  background: #DDD;
}

.ruler-scale-container{
  min-width: 192px;
  display: flex;
  flex-direction: column;
}

.ruler-markers-container{
  width: 100%;
  height: 16px;
  border-left: solid 2px #636363;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-around;
}

.ruler-marker-horizontal{
  width: 1.075em;
  height: 2px;
  background-color: #AAA;
}

.ruler-marker-vertical{
  width: 2px;
  height: 12px;
  background-color: #AAA;
}

.ruler_zero_element{
  border-right: solid 2px #636363;
}

.top-elements-container{
  width: 100%;
  min-height: 128px;
  max-height: 128px;
  height: 128px;
  margin-bottom: -160px;
  margin-top: 32px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: hidden;
  align-items: flex-start;
}

.bottom-elements-container{
  width: 100%;
  min-height: 128px;
  max-height: 128px;
  height: 128px;
  margin-bottom: -320px;
  margin-top: 192px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: hidden;
  align-items: flex-start;
}

.station-shadow{
  background: #DDD;
  height: 64px;
  box-sizing: border-box;
  border: dashed 1px #AAA;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.station-shadow img{
  width: 28px;
  height: 28px;
}

.station-shadow p{
  margin: 4px 0 0 0;
  background-color: #AAA;
  color: white;
  padding: 2px 4px;
}

.position-indicator-container{
  width: 100%;
  height: 2px;
  min-height: 2px;
  position: relative;
}

.position-indicator{
  height: 2px;
  position: absolute;
}

.train-indicator-container{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 0 48px;
}

.train-indicator-container img{
  width: 64px;
}

.station_circle_fill_selected{
  background: #5DAFF2;
}

.station-view-background{
  width: 100%;
  height: 100%;
  background-image: url("/public/assets/img/background-login.png");
  display: flex;
  justify-content: center;
  align-items: center;
}

.station-view-line-container{
  width: 100%;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  padding: 0 32px;
  align-items: flex-end;
  justify-content: space-between;
}

.station-item-container{
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.station-item-name{
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  margin-left: -4px;
  transition: all 0.25s ease;
}

.station_item_indicator_container_gen{
  margin-top: 16px;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.station_item_indicator_container{ background: rgba(99,99,99,1); }
.station_item_indicator_container_first{ background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(99,99,99,1) 45%, rgba(99,99,99,1) 100%) }
.station_item_indicator_container_last{ background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(99,99,99,1) 45%, rgba(99,99,99,1) 100%) }

.station-item-spacer{
  height: 12px;
  flex-grow: 1;
  background: rgba(99,99,99,1);
  margin-bottom: 40px;
  margin-left: -6px;
}

.station-item-indicator{
  min-width: 24px;
  height: 24px;
  background: #AAA;
  border-radius: 12px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.station-item-indicator-fill{
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background: rgba(99,99,99,1);
  transition: all 0.25s ease;
}

.station_item_name_hover{ color: rgba(0, 92, 187, 1) !important; }
.station_item_indicator_hover{ background: rgba(0, 92, 187, 1) !important; }
.station_item_indicator_fill_hover{ background: #5DAFF2 !important; }

.station-item-container img{
  width: 24px;
  height: 24px;
  margin-left: -6px;
  margin-top: 16px;
  filter: grayscale(100%);
  opacity: 0.56;
  transition: all 0.25s ease;
}

.no_gray_filter{
  filter: none !important;
  opacity: 1 !important;
}

.station-view-plane-container{
  width: 100%;
  height: 100%;
  position: relative;
}

.no-planes-related{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.station-view-plane-scale{
  height: 100%;
}

.station-view-plane-y{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 1px 0;
  box-sizing: border-box;
}

.station-view-plane-coord-y{
  display: flex;
  align-items: center;
  justify-content: center;
}

.station-view-plane-coord-x{
  display: flex;
  align-items: center;
  justify-content: center;
}

.station-view-plane-x{
  width: calc(100% - 144px);
  height: 24px;
  margin: 0 72px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  flex-wrap: nowrap;
}

.no-y-scroll{ overflow-y: hidden; }

.x-position-indicators-container{
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  z-index: 999;
}

.x_position_indicator{
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.25s ease;
}

.x_position_indicator:not(:last-child){
  border-right: solid 1px rgba(0, 0, 0, 0.06);
}

.x_position_indicator:hover{
  box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.26);
}

.x_position_indicator_disabled{
  background-color: rgba(0,0,0,0.06);
}

.x_position_indicator_selected{
  box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.26);
  display: flex;
  flex-direction: column;
}

.y_position_indicator{
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.25s ease;
}

.y_position_indicator:not(:last-child){
  border-bottom: solid 1px rgba(0, 0, 0, 0.12);
}

.y_position_indicator:hover{
  box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.54);
}

.detail_pixels_container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.coords_y{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.equipment_locator_outline{
  width: 50%;
  height: 50%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.car_equipment_locator_outline{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.equipment_locator_fill{
  width: 50%;
  height: 50%;
  border-radius: 50%;
}

@media screen and (max-height: 820px) {
  .station-view-plane-coord-x{ font-size: 14px !important; }
  .station-view-plane-coord-y{ font-size: 14px !important; }
}

@media screen and (max-height: 760px) {
  .station-view-plane-coord-x{ font-size: 12px !important; }
  .station-view-plane-coord-y{ font-size: 12px !important; }
}

@media screen and (max-height: 680px) {
  .station-view-plane-coord-x{ font-size: 10px !important; }
  .station-view-plane-coord-y{ font-size: 10px !important; }
}

@media screen and (max-height: 600px) {
  .station-view-plane-coord-x{ font-size: 8px !important; }
  .station-view-plane-coord-y{ font-size: 8px !important; }
}

.pcc-coords-container{
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  box-sizing: border-box;
  border-right: 1px solid black;
  border-left: 1px solid black;
}

.pcc-y-coords-container{
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
}

.pcc-y-coord{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pcc-y-coord:not(:last-child){
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

.pcc-x-coords-main-container{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pcc-x-coords-container{
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.pcc-x-coord{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.pcc-x-coord:not(:last-child){
  border-right: 1px solid rgba(0, 0, 0, 0.25);
}

.pcc-plane-container{
  width: 100%;
  position: relative;
}

.pcc-plane{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.pcc-x-indicators-container{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
}

.pcc_x_indicator_t{
  transition: all 0.5s ease;
}

.pcc_x_indicator{
  height: 100%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.pcc_x_indicator:not(:last-child){
  border-right: 1px solid rgba(0, 0, 0, 0.25);
}

.pcc_x_indicator:hover{
  box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.26);
}

.pcc_x_indicator_unselected{
  background: rgba(0, 0, 0, 0.06);
}

.pcc_x_indicator_selected{
  box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.26);
  display: flex;
  flex-direction: column;
}

.pcc_y_indicator{
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pcc_y_indicator:not(:last-child){
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

.pcc_y_indicator:hover{
  box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.38);
}

@media screen and (max-height: 840px){
  .pcc-y-coord{ font-size: 14px !important; }
  .pcc-x-coord{ font-size: 14px !important; }
}

@media screen and (max-height: 790px){
  .pcc-y-coord{ font-size: 10px !important; }
  .pcc-x-coord{ font-size: 10px !important; }
}

@media screen and (max-height: 680px){
  .pcc-y-coord{ font-size: 8px !important; }
  .pcc-x-coord{ font-size: 8px !important; }
}

.pcc_coord_y{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signal-elements{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

.station-signal{
  background: #E8559A;
  color: white;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 16px;
  box-sizing: border-box;
  width: 132px;
  text-align: center;
}

.station-direction{
  width: 48px;
  height: 48px;
  background: #FEE028;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
}

.station-direction-border{
  width: 40px;
  height: 40px;
  border: solid 1px black;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  font-weight: 900;
}