html { 
    font-family: Helvetica, Arial, sans-serif;
}
body, html {
    margin:0px;
    width:100vw;
    height:100vh;
    background:white;
    font-size: 12px;
}
.popUp {
	background:rgba(245, 245, 245, 0.945);
	border: 1px solid #999;
	border-radius: 0px;
	-moz-box-shadow: -5px 5px 5px rgba(0,0,0,.8);
	-webkit-box-shadow: -5px 5px 5px rgba(0,0,0,.8);	
	box-shadow: -5px 5px 5px rgba(0,0,0,.2);
}
.sysOvrlay {   
    position:absolute;
    background-color: #F0F0F0;
    filter: alpha(opacity=70);
    opacity: 0.7;    
    width:100%;   
    height:100%; 
    z-index:400; 
    top:0; 
    left:0;  
}


#hdr {
    height:20px;
    color:rgb(226, 226, 226);
    background:rgba(0, 0, 0, 0.75);
    padding:10px;
}
#dta {
    display:flex;
    height:calc(100% - 40px);
    width:100%;
}
.hor-menu {
    vertical-align: middle;
}
.mnu-items.hor-menu li {
    margin: 0;
    padding: 0 30px 0 0;
    color: white;
    display: inline-block;
}

.mnuHor {
    margin:0;
    padding:0;
    font-size:14px;
    list-style-type: none;
    text-transform: capitalize;
}
.mnuHor img {
    height:20px;
    vertical-align: top;
    padding-right:3px;
}
.mnuHor li {
    float:right;
    cursor: pointer;
    margin: 0;
    padding: 0;
    color: white;
    display: inline-block;
    height:18px;
    padding-right:35px;
    opacity: .5;
    transition: all 0.7s;
}
.mnuHor li img {
    margin:0;
    padding:0;
    padding-right:3px;
    opacity: .7;
    filter: invert(100%);
    transition: all 0.7s;
    vertical-align:middle;
}
.mnuHor li:hover, .mnuHor img:hover {
    opacity: 1.0;
    filter: none;
}
.mnuHor li:after {
    content: ' \25BC';
}



.invalid {
    border:2px solid red;
} 
:focus {
    outline: none;
}