html * {
    font-size: 14px;
}

.screen {
    position : absolute;
    left  : 0px;
    top : 0px;
    height : 100%;
    width : 100%;
    background-color : #F8F8F8;.
}



.shadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.cursor-pointer{
    cursor : pointer;
}

.head {
    position: absolute;
    top    : 1px;
    left   : 1px;
    height : 80px;
    right  : 1px;
    border : solid 1px;
}
.head-table{
    height : 100%;
    width  : 100%;
    table-layout : fixed;
}

.head-table td.search{
    max-width   : 500px;
    font-weight : bold;
    white-space : nowrap;
    overflow : hidden;
    text-overflow: ellipsis;
}
.head-table td.search input{
    border: none;
    width: 98%;
    height : 30px;
}


td.btn, th.btn{
/*    border :outset 1px; */
    border-style :outset;
    border-width :1px;
    border-color : #B9D7CB;
    border-radius : 5px;
    cursor : pointer;
    text-align : center;
}

td.btn:active{
    border-style : inset;
    padding-top : 3px;
}
th.btn:active{
    border-style : inset;
    padding-top : 3px;
}
.btn-white{
    background-color: #FFFFFF;
}

.btn-on{
    background-color: #e0e0e0;
    border-style : inset !important;
    padding-top : 3px !important;
}
.btn-off{
    border-style : outset !important;
}
td.btn img{
    height : 50px;
}
td.btn img.small{
    height : 36px;
}
td.image{
    width: 80px;
    text-align : center;
}
td.nowrap{
    white-space : nowrap;
    overflow : hidden;
    text-overflow: ellipsis;
}

.corner {
    border-radius : 5px;
}

.config-image{
    background-image:url(/img/loon-config.svg);
    background-size:100% 100%;
    background-repeat:no-repeat;
}
.query-image{
    background-image:url(/img/icons8-query.png);
    background-size: 50% 50%;
    background-repeat:no-repeat;
    background-position: center center;
}
.search-image{
    background-image:url(/img/icons8-search.png);
    background-size: 50% 70%;
    background-repeat:no-repeat;
    background-position: center center;
}



.body {
    position: absolute;
    top    : 81px;
    left   : 1px;
    bottom : 1px;
    right  : 1px;
    border : dashed 0px;
    padding : 10px;
    overflow: hidden;
}

.body-head {
    position: absolute;
    top    : 1px;
    left   : 1px;
    right  : 1px;
    height : 60px;
    border : dashed 0px;
    overflow: hidden;
    border-left : solid 1px;
    border-right : solid 1px;
    border-bottom : solid 1px;
    border-color : #c0c0c0;
    padding :2px;
}

.body-content {
    position: absolute;
    top    : 66px;
    left   : 1px;
    bottom : 1px;
    right  : 1px;
    border : dashed 0px;
    overflow: auto;
}



.file-container{
    position : relative;
    height : 55px;
    width: 48%;
    min-width: 500px;
    float: left;
    border : solid 0px;
    padding :2px;
    cursor : pointer;
    border-bottom : solid 1px;
    border-right : solid 1px;
    border-color : #c0c0c0;
}
.file-container-table{
    height : 100%;
    width  : 100%;
    table-layout : fixed;
/*    border-collapse:collapse; */
}
.file-container-table td{
    white-space : nowrap;
    overflow : hidden;
     text-overflow: ellipsis;
}
td.icon{
    width: 40px;
    text-align : center;
}
td.tiny{
    width: 20px;
    text-align : center;
}

.station-container{
    position : relative;
    height : 65px;
    width: 100%;
/*    min-width: 500px;*/
    float: left;
    border : solid 0px;
    padding :0px; 
    cursor : pointer;
    border-bottom : solid 1px;
/*    border-right : solid 1px; */
    border-color : #c0c0c0;
}
.station-container-table{
    height : 100% !important;
    width  : 100% !important;
    table-layout : fixed !important;
/*    border-collapse:collapse; */
}
.station-container-table td{
    white-space : nowrap;
    overflow : hidden;
    text-overflow: ellipsis;
    font-size : 12px;
}


.config {
    position: absolute;
    top    : 50%;
    left   : 50%;
    height : 50%;
    width  : 50%;
    min-width : 700px;
    min-height : 500px;
    border : solid 1px;
    border-radius : 5px;
    padding : 10px;
    overflow: auto;
    background-color: #FFFFFF;
    margin-left:-25%;
    margin-top :-20%;
/*    transform : translate(-50%, -50%);*/
/*    transform : translateX(-50%); */
}
.config-head {
    position: absolute;
    top    : 0px;
    left   : 0px;
    height : 30px;
    right  : 0px;;
    border : dashed 0px;
    overflow: hidden;
    background-color: #e0e0e0;
    cursor:move;
}
.config-body {
    position: absolute;
    top    : 40px;
    left   : 10px;
    bottom : 35px;
    right  : 10px;;
    border : dashed 0px;
    overflow: auto;

}
.config-body table{
    width  : 90%;
    table-layout : fixed;
/*    border-collapse:collapse; */
}
.config-body table tr{
/*    height:50px;*/
}
.config-body table td{
}
.config-body table td.name{
    text-align: right;
    cursor:default;
}
.config-body table td.divider{
    width:10px;;
}
.config-body table td input{
    height:25px;
    width : 98%;
    font-weight:bold;
}
.config-body input.col{
    width: 20px;
    text-align : center;
}




.config-body div.menu{
    position:absolute;
    top:1px;
    left:0px;
    width:100%;
/*    height:100px; */
    border:solid 1px #c0c0c0;
    background-color:#FFFFFF;
    cursor:pointer;
    z-index:999;
}

.config-body div.menu table{
    margin-left:auto; 
    margin-right:auto;
    width : 99%;
    font-weight: bold;
    table-layout : fixed;
    border-collapse:collapse;
}
.config-body div.menu table tr{
    height:30px;
}
.config-body div.menu table tr:hover{
    background-color:#e0e0e0;
}




.config-footer {
    position: absolute;
    height : 30px;
    left   : 1px;
    bottom : 1px;
    right  : 1px;;
    border : dashed 0px;

}
.config-footer table{
    width  : 100%;
    height : 100%;
    table-layout : fixed;
}
.config-footer table td{
    font-size:12px;
    font-weight:bold;
}

.view {
    position: absolute;
    top    : 50%;
    left   : 50%;
    height : 50%;
    width  : 80%;
    min-width : 800px;
    max-width : 1200px;
    min-height : 500px;
    border : solid 1px;
    border-radius : 5px;
    padding : 10px;
    overflow: auto;
    background-color: #FFFFFF;
    margin-left:-40%;
    margin-top :-20%;
    cursor:move;
/*    transform : translate(-50%, -50%);*/
/*    transform : translateX(-50%); */
}