/* =====================================move scrollbar only into ng-view======================================*/

@wrapperTop: 125px;      /*   Change this if there is no Header @wrapperTop: 70px; */
@wrapperBottom:111px;    /*   Change this if there is no Footer  @wrapperBottom:111px; */
@wrapperMaxHeight:750px;
@motionLineMarginTop:0px; /* Change this to position Motion Lines vertical */
@footerSideBarDisplay:12000px; /* value describes horizontal display width. when reached then sidebar is displayed instead of footer */

html, body
{
    height:100%;
    overflow: hidden;

}

    .yellow-background{
        background-color: yellow;
    }


.inax-mainview{

    top: @wrapperTop;  /*   Change this if there is no Header */
    bottom:@wrapperBottom;
    left: 0;
    right: 0;
    position: absolute;
    overflow-y: auto;

}



@media (min-width: 1200px) {
  .inax-mainview {
    bottom:0;
  }
}


/* ==================================*/ 


.header-text {
    color: #999;
} 

.inax-navbar-invbtn{
    background-color:inherit;
    color:inherit;
    position:absolute;
    right:5px;
    top:5px;
    font-size:1.5em;
    border:0;
    padding:5px;

}

.inax-navbar-dropdown-btn-form {

    padding:1px;
    z-index:9999;
    position:fixed;
    top:1px;

}

.inax-navbar-dropdown-btn {

    opacity:0.4;
    background-color:rgb(0,255,0);
    padding:4px;
    padding-top:1px;
    padding-bottom:1px;
}

.inax-navbar-dropdown {
position:relative;
padding:10px;
margin-left: 25px;
border-radius:20px;
border-style:groove;
border-width:10px;
background-color:#333;
float:none;

}

.inax-navbar-dropdown-menuitem {
background-color:transparent;
color:#999;
margin-bottom:5px;
border-radius:3px;

}

#inax-navbar-href-left{
background-color:white;
display:inline-flex;
float:left;

}

#inax-navbar-href-right{
background-color:white;
display:inline-flex;
float:right;
}

.clickable:hover, .clickable:hover > td
    {
        background-color: #ffff00 !important;
        cursor: pointer;
    }

#mainIntro {
    padding-left: 30px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 260px;
    background-color: #fff;
    background: #fff url('/images/Logo.jpg') no-repeat center bottom;
}

    #pageControl {
        width: 20px;
        height:20px;
        padding: 0;
        font-size:medium;
        text-align:center;
        border:none;
    }

    #pageControl-btn {
        padding: 4.5px;
        font-size:medium;
        text-align:center;
        margin-top:1px;
    }


/* =====================================inax-sidebar======================================*/
/* Hide for mobile, show later */
.inax-sidebar {
    display:none;

}


@media (min-width: @footerSideBarDisplay) {
  .inax-sidebar {
 display:block;
 
  }
}


/* =====================================inax-footer======================================*/
.inax-footer-infoline {
    height:20px;
    background-color:deepskyblue;
    color:white;
}


.inax-footer-buttons {
  display: table;
  margin:0;
}

.inax-footer-container {
  margin:0;
  padding:0;

}

@media (min-width: @footerSideBarDisplay) {
  .inax-footer-buttons {
      display: none;
  }
}

#menu-button {
    min-height: 30px;
    width: 12.5%;
    border-radius:0;
    border-color: dimgray;
    background-color:  lightgray;
    padding:2px;
    word-wrap: break-word;
    word-break: break-all;
    white-space:normal;
 //   margin-right:-3px;
    margin-left:0;
    
}

#menu-button-main {
    min-height: 30px;
    width: 12.5%;
    border-radius:0;
    border-color:  lightgray;
    background-color: dimgray;
    color:white;
    padding:2px;
    word-wrap: break-word;
    word-break: break-all;
    white-space:normal;
   // margin-right:-3px;
   margin-left:0;
    
}

#menu-button.selected {
    background-color: yellow ;
}

#menu-button-main.selected {
    background-color: yellow ;
    color:inherit;
}

/* =====================================Menu======================================*/


nav {
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  background: #e5e5e7;
  width: 100%;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
 
.menu-item {
  background: #fff;
  width: 100%; 
}

/*Menu Header Styles*/
.menu-item h4 {
  font-size: 15px;
  font-weight: 500;
  padding: 7px 12px;
}

.menu-item h4 a {
  color: white;
  display: block;
  text-decoration: none;
  width: 100%;

    /*Gradient*/
  background: #a90329; /* Old browsers */
  background: -moz-linear-gradient(top, #a90329 0, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #a90329 0,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #a90329 0,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #a90329 0,#8f0222 44%,#6d0019 100%); /* IE10+ */
  background: linear-gradient(top, #a90329 0,#8f0222 44%,#6d0019 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */

}

.menu-item h4:hover {  
  background: #eee; /* Old browsers */
  cursor: pointer;
}

/*First Item Styles*/
.alpha p {
    font-size: 13px;
    padding: 8px 12px;
    color: #aaa;
}

 
/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  height: 0;
  list-style-type: none;
  overflow: hidden;
  padding: 0;
   
  /*Animation*/
  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
          transition: height 1s ease;
}

 
.menu-item ul a {
  margin-left: 20px;
  text-decoration: none;
  color: #aaa;
  display: block;
  width: 100%;
}
 
/*li Styles*/
.menu-item li {
    margin-left: 1px;
  border-bottom: 1px solid #eee;
}
 
.menu-item li:hover {
  background: #eee;
}

.menu-item.selected ul {
  height: 100%;
}


/* =====================================Motion======================================*/

.motion-control{
    padding-left:0; 
    padding-right:0;
}

.motion-glyph-button {
    font-size:1.5em;
    padding-bottom:1px;
    padding-top:1px;
}

.motion-view-toggle-control{
    margin:5px; 
}

.motion-head-state {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display:inline-flex;
    height: 34px;
    width:44px;
    background-color: #fff;
    vertical-align:middle;
    margin-bottom:0;
}


#motion-head-screen-locked {
    background: #fff url('/images/ScreenLocked.png') no-repeat center bottom;
    background-size:contain;
}

#motion-head-data-locked {
    background: #fff url('/images/DataLocked.png') no-repeat center bottom;
    background-size:contain;
}

#motion-head-data-inconsistent {
    background: #fff url('/images/DataInconsistent.png') no-repeat center bottom;
    background-size:contain;
}

.motion-caption-text {
    font-style:italic;
    text-shadow:10px;
    -webkit-text-size-adjust:auto;
    text-align:center;
    color:#555;
    margin-bottom:0;
    height:auto;
    padding:10px;
    padding-left:0;
    padding-right:0;

}


.motion-line-caption-text {
    width:100%;
    font-weight:600;
    background-color:rgba(0, 148, 255, 0.72);
    color:white;
    font-style:italic;
    font-size:medium;
    vertical-align:baseline;
    letter-spacing:1.3px;
    line-height:1.4em;
    display:inline-block;
    pointer-events:none;
}

.motion-line-state {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display:inline-flex;
    height: 1.4em;
    width:1.4em;
    background-color: #fff;
    vertical-align:middle;
    margin-bottom:0;

}

.motion-line-state-line {
    width:100%;
    background-color:black;
    color:white;
    font-size:x-small;
    vertical-align:top;
    line-height:1em;
    display:inline-block;
    pointer-events:none;

}


.motion-line-state-text { 
    background-color:transparent;
    vertical-align:middle;
    text-align:center;
    width:33%;
    pointer-events:none;
}

#motion-line-locked {
    background: #fff url('/images/Locked.png') no-repeat center bottom;
    background-size:contain;
    float:left;
    margin-left:10px;
}

#motion-line-inconsistent {
    background: #fff url('/images/DataInconsistent.png') no-repeat center bottom;
    background-size:contain;
    float:right;
    margin-right:10px;
}

#motion-line-remote-process {
    background: #fff url('/images/RemoteProcess.png') no-repeat center bottom;
    background-size:contain;
    float:right;
    margin-right:10px;
}
    ul#motion-control {
       list-style-type: none ;
       margin: 0 0 2px 0 ;
       padding: 0 0 0 0 ;
    }

    li#motion-control {
        background-color: #fff ;
        border:none;
        cursor: pointer ;
        float: none ;
        margin: 1px 1px 2px 1px ;
        text-align: center ;
        font-size: 100%;
        color:black;
        width: 100% ;

    }

    li#motion-control.selected {
        background-color: yellow ;
         border:2px solid #555;
    }

    li#motion-control.selecting {
        background-color: skyblue ;
        border:2px solid #555;
    }


    li#motion-control.otherHmi {
        background-color: blue ;
    }

    li#motion-control.locked {
        background-color: lightgray ;
    }



    ul#final-position{            
                padding: 0;
                width:100%;
                -moz-box-sizing:border-box;
                -webkit-box-sizing:border-box;
                box-sizing:border-box;
                max-width:100%;
                display:flex;
                justify-content:space-between;
                flex-flow: row wrap;
               
    }

        td#final-position {
            width:100%;
            padding-left:3px;
            padding-right:3px;
            }



    li#final-position {
         background-color:transparent;
         border:1px solid;
         border-color:black;
         margin:1px 1px 1px 1px;
         padding: 1px;
         display:inline-flex;
         word-wrap: break-word;
         word-break: break-all;
         flex-basis:11%;
         flex-grow:1;
         flex-shrink:0;
         align-self:stretch;
         justify-content:center;
  }

    span#final-position {
        padding: 0.1px;
         margin:0.1px;
         background-color:transparent;
         width:100%;
         font-size:90%;
       
    }

    span#final-position.flagged {
        background-color: rgb(0, 255, 33);
   }

    span#final-position-value {
        padding: 0.1px;
         margin:0.1px;
         background-color:transparent;
         width:100%;
         font-size:100%;
         text-align:left;
         font-weight: bold;
       
    }

    span#final-position-value.flagged {
        background-color: rgb(0, 255, 33);
   }


    table#motion-control-line {
        width: 100% ;
        margin-top:@motionLineMarginTop;
    }

    tr#motion-control-line {
      width: 100% ;
      height: 100%;
    }

    th#motion-control-line {
        text-align: center;
        width: 100% ;
        height: 100%;
        overflow: hidden;
    }

    #motion-control-line-button-area {
        width: 100px;
        pointer-events:none;
    }

    #motion-control-line-button-left {
        width: 100px ;
        height: 50px;
        margin: 2px;
        text-align:center;
        float: left; 
        color: black;
        background-color:lightgray ;
        background-image: url('/libs/98_BMW/icons/ArrowBlue_left.png');
        background-repeat:no-repeat;
        background-size:contain;
        background-position:left;
        word-wrap: break-word;
        word-break: break-all;
        pointer-events:auto;
    }

    #motion-control-line-button-left[disabled] {
        color: #999;
        background-color:lightgray ;
        background-image: url('/libs/98_BMW/icons/ArrowWhite_left.png');
        background-repeat:no-repeat;
        background-size:contain;
        background-position:left;
    }

    #motion-control-line-button-right {
        width: 100px ;
        height: 50px;
        margin: 2px;
        text-align:center;
        float: right;
        display:table-cell;
        color: black;
        background-color:lightgray ;
        background-image: url('/libs/98_BMW/icons/ArrowBlue_right.png');
        background-repeat:no-repeat;
        background-size:contain;
        background-position:right;
        word-wrap: break-word;
        word-break: break-all;
        pointer-events:auto;
     }

    #motion-control-line-button-right[disabled] {
        color: #999;
        background-color:lightgray ;
        background-image: url('/libs/98_BMW/icons/ArrowWhite_right.png');
        background-repeat:no-repeat;
        background-size:contain;
        background-position:right;
    }


    #motion-control-line-executable {
        border:1px solid;
        background-color:white ;
        display:table-cell;
        padding-left:8px;
    }

    #motion-control-line-executable.executable {
        background-color:blue ;
    }


/* =====================================Alarms======================================*/

.alarm-table thead tr th {  
  cursor: pointer;
}


/* =====================================Scroll table======================================*/

.scroll-table {
     height:@wrapperMaxHeight - 5px;
     width:49%; 
     font-size:15px; 
     overflow-y:auto; 
     overflow-x:auto; 
     border: 1px solid black; 
     margin:2px;
}

.scroll-table-left {
    float: left;
}

.scroll-table-right {
     float: right;
}


/* =====================================TableColumnsHelper======================================*/
.numeric-field {
    width: 50%;
    text-align:center;
}

/* =====================================BMW Helpers======================================*/

.layer-always-ontop {
    position:fixed;
    top:1px;
    left:1px;
    width:100%;
    height:100%;
    z-index:1000;
    background-color:gray;
    opacity:0.65;

}