.board {
    position: relative;
}

.board:fullscreen {overflow: auto;}

.highlight-search {
    z-index: 1000;
}

.board-title {
  font-size: x-large;
  position: fixed;
  z-index: 10;
}

.board-noty {
  position: fixed;
  top: 40px;
  right: 5px;
  z-index: 11;
  width: 400px;
}

.board-nav {
   background-color: white;
   margin: 3px;
   position: fixed;
   right: 0;
   z-index: 10;
   min-height: 30px;
}


.vlleft, .vlright {
  border-left: 1px dotted red;
  top: 0;
  width: 0px;
  position: absolute;
  height: 100%;
  z-index: 100;
  display: none;
}

.board .left-container {
  position: sticky;
  position: -webkit-sticky;
  left:0;
  height:0;
  width: 1px;
  display: block;
  z-index: 5;
}

.board:fullscreen .head {top: 0;}

.board .head {
  top: 50px;
  background-color: #222;
  position: sticky;
  position: -webkit-sticky;
  z-index: 6;
}

.board .left {
  list-style-type: none;
  background-color: #222;
  border: 'solid 3px solid';
  width: 66;
}
.flightboard {
  z-index: 2;
}
.board .body {
    z-index: 2;
    clear: both;
}
.collides {
    border-top: solid 3px #ff0000;
    border-right: solid 5px #ff0000;
}

.ufh {
  border-width: 1px 0 2px 0;
  border-style: solid;
  background-color: white;
}

.board:fullscreen .huflights {top: 70px;}
.huflights {
  width: 100%;
  position: sticky;
  position: -webkit-sticky;
  top: 120px;
  z-index:6;
  margin-left: 70px;
}

.blink-blink {
    animation: blinkingShadow 2s steps(5, start) infinite;
}

@keyframes blinkingShadow {
    0% { box-shadow: none }
    50% { box-shadow: 3px 3px 1px lime}
    100% { box-shadow: 5px 5px 5px lime}
}

@keyframes blink_noblock { 80% { border-color: orange; } }

@keyframes blink_noata { 80% { border-color: yellow; } }

@keyframes blink_noest { 80% { border-color: red; } }

.s_noblock  {
  border: solid 3px;
  animation: blink_noblock 2s step-end infinite alternate;
}
.s_noata {
  border: solid 3px;
  animation: blink_noata 2s step-end infinite alternate;
}
.s_noest {
  border: solid 3px;
  animation: blink_noest 2s step-end infinite alternate;
}

.flightbar:hover {
   cursor: move;
}

.disconnect:hover, .deallocate:hover, .edit:hover, .edit-arr:hover {
  cursor: pointer;
}

.flightbar {
    width: 100%;
    height: 100%;
    font-size: 12px;
    display: block;
    background-color: #ccc;
    border-top: solid 1px #aaa;
    border-radius: 0px 0px 0px 20px;
    z-index: 5;
}

.flightboard .info {
    width: 100%;
    height: 100%;
    padding-left: 6px;
}

.flightbar_dep {
    width: 100%;
    text-align: right;
    padding: 0 3px;
    color: black;
    font-weight: bold;
}
.flightbar_arr {
    float:left;
    padding: 0 3px;
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-weight: bold;
}
.flightbar_both {
    width: 100%;
    text-align: right;
}

.flightboard {
    margin-left: 70px;
    position: absolute;
    display: block;
}

.maintbar {
    background: repeating-linear-gradient( -45deg, #FD0, #FE0 20px, #555 20px, #555 40px );
    text-shadow: 1px 1px 1px black;
    border: solid white 2px;
    position: absolute;
    display: block;
    width: 100%;
    float: left;
    font-size: 1.2em;
    z-index: 2;
    color: white;
    font-weight: bold;
    height:100%;
    padding-left: 10px;
}

.resItem {
    height: 40px;
}

.flight-edit {
  position: sticky;
  position: -webkit-sticky;
  background-color: #FFF;
  border: 1px solid #888;
  padding: 10px;
  left: 10px;
  top: 10px;
  width: 500px;
  z-index: 5000;
  display: block;
}

.A_pls { background-color: #B6C6F0}
.A_est { background-color: #86DDDD}
.A_act { background-color: #4110AD}
.A_blk { background-color: #27489D}
.A_4   { background-color: #27489D}

.D_pls { background-color: #FFC9BA}
.D_est { background-color: #FFA88F}
.D_act { background-color: #FF1C6B}
.D_blk { background-color: #FF744C}
.D_4   { background-color: #E95125}

.A_closed, .D_closed   { background-color: #999}

.too_close {
    border: solid 3px #FF0000;
}

.legend {
    position: fixed;
    width: 100%;
    bottom: 0;
    right: 0;
    z-index: 3;
    text-align: right;
    width: 600px;
}

.legend > div > ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 60px;
  padding-left: 0;
  float: left;
  width: 450px;
}

.legend div li {
  width: 80px;
  height: 16px;
  display: block;
  padding-left: 5px;
}


.legend div li span {
  width: 30px;
  height: 8px;
  display: block;
  background-color: grey;
}

.legend_img {
    height: 50px;
    width: 300px;
}

.s_collide {
  border: solid 3px lime; /* please overide */
}

.action-box .glyphicon:hover {
    cursor: pointer;
}

.status-loading {
  float: right;
  background-image: url('/static/img/inalix-loading-light.gif');
  background-size: 60px;
  width: 60px;
  height: 60px;
}

.legend ul li { display: none; } /* semua legend hidden */

/* khusus legend ini selalu visibile */
.legend .s_warning,
.legend .s_collide,
.legend .S_CAN,
.legend .flightbar_both,
.legend .S_NOP {
    display: block;
}

/* plan gak ada warning */
.legend-plan li.s_warning { display: none; }

.legend-plan-bay li.sch { display: block; }
.legend-plan-belt li.A_sch { display: block; }

.legend-plan-gate li.D_sch,
.legend-plan-desk li.D_sch { display: block; }

.legend-opr-bay ul li { display: block; } /* default legend opr visible */
.legend-opr-bay .S_LAN,
.legend-opr-bay .S_BGF,
.legend-opr-bay .S_BGL,
.legend-opr-bay .S_TWR,
.legend-opr-bay .S_GCH,
.legend-opr-bay .S_NBD,
.legend-opr-bay .S_LAC {
    display: none;
}

.legend-opr-belt .A_sch,
.legend-opr-belt .A_est,
.legend-opr-belt .S_BGF,
.legend-opr-belt .S_BGL,
.legend-opr-belt .S_LAN {
    display: block;
}

.legend-opr-desk .D_sch,
.legend-opr-desk .D_est,
.legend-opr-desk .S_TWR,
.legend-opr-desk .S_NBD {
    display: block;
}

.legend-opr-gate .D_sch,
.legend-opr-gate .D_est,
.legend-opr-gate .S_TWR,
.legend-opr-gate .S_GCH,
.legend-opr-gate .S_LAC,
.legend-opr-gate .S_NBD {
    display: block;
}

.ugrid .noop {
  background: #333;
}


.flightbar_both .A_sch,
.flightbar_both .A_est,
.flightbar_both .A_act,
.flightbar_both .A_blk,
.flightbar_both .S_LAN,
.flightbar_both .S_BGF,
.flightbar_both .S_BGL,
.flightbar_both .D_sch,
.flightbar_both .D_est,
.flightbar_both .S_TWR,
.flightbar_both .S_GCH,
.flightbar_both .S_NBD,
.flightbar_both .S_LAC,
.flightbar_both .D_blk,
.flightbar_both .D_act,
.flightbar_both .D_closed
{
    border-radius: 3px;
}

.action-box {
  margin-bottom: 5px;
  cursor: auto;
  padding: 3px;
  border-radius: 3px;
}

.board-hist .action-box {
    display: none;
}

.action-box .glyphicon {
    padding: 5px;
    margin: 0 1px;
    background: black;
    border-radius: 50%;
    font-size: 13px;
    color: #fff;
}

.flightbar_both .barinfo {
  width: 380px;
  line-height: 18px;
}

.containerinfo {
	display: flex;
}
.flightbar_both .barinfo div {
	width: 180px;
	flex-direction: row;
}
.flightbar_both .barinfo .callsign {
    font-size: 16px;
    font-weight: bold;
}

.barinfo .detail, .barinfo .detail-both {
	padding: 0 20px 0 5px;
	font-size: 11px;
	font-weight: normal;
	text-transform: uppercase;
	white-space: pre-line;
}
.barinfo {
  display: none;
  z-index: auto;
  position: absolute;
  cursor: default;
  text-align: left;
  width: 180px;
}
.flightbar .barinfo {
	transition: 0s opacity;
    transition-delay:3s;
	opacity: 0;
}
.flightbar:hover .barinfo {
  display: block;
  opacity: 1;
  background-color: #ffff99;
  padding: 3px;
  border-radius: 5px;
}

.input-group .glyphicon {color: black;}
nav.navbar-right .input-group {display: inline;}

.flight-form {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}