html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow:hidden;
    -ms-user-select:none;
    user-select:none;
}

iframe {
    display:block;
    height:100%;
    width: 100%;
}

.w2ui-popup iframe.overlay,
#w2ui-lock iframe.overlay,
#w2ui-overlay iframe.overlay {
    position: absolute;
    z-index: -1;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    margin: -3px;
    top: 0px;
}

/*------------------------------------------------------------------------------------------------------------------------
//
//
//                                              Nav Bar
//
//
------------------------------------------------------------------------------------------------------------------------*/

.navButton {
    color: #fff;
    font-weight:bold;
    letter-spacing:1px;
    text-decoration: none;
    cursor:pointer;
    border:none;
    vertical-align:middle;
}

.navButton:hover{ 
    background-color: rgb(25,25,25);
}

.navButton.active { 
    background-color: #070;
}

.navTab > .count {
    visibility: hidden;
}

.navTab.alert > .count {
    background-color: #f00;
    border-radius: 30px;
    padding: 3px;
    visibility: visible;
}

.navTab {
    border-color:ButtonShadow;
}

#navBar {
    height: 44px;
    background-color: rgb(77,77,77);
    display:table;
    width:100%;
}

#navBar ul{
    margin: 0px;
    padding: 0px;
    list-style: none;
}

#navBar ul li{
    display: inline-block;
    position: relative;
    height:100%;
    text-align: center;
    color: #fff;
    font-weight:bold;
    letter-spacing:1px;
    text-decoration: none;
    cursor:pointer;
    border:none;
    vertical-align:middle;
}

#navBar ul li a
{
    display: block;
    padding: 14px 5px;
    line-height: 16px;
    color: #fff;
    text-decoration: none;    
    min-width: 100px;
    position:relative;
    z-index:2;
}

#navBar ul li iframe {
    border:0px;
    margin:0px;
    position:absolute;
    top:0;
    z-index:1;
}

#navBar > ul > li > a.active,
#navBar > ul > li > a.open {
     background-color: #070;
}

#navBar ul li a:hover,
#navBar ul li iframe:hover{  
    background-color: rgb(25,25,25);
}

#navBar ul li:hover .dropdown{
    display: block;	/* Display the dropdown */
}

.dropdown {
    background-color: #666;
    min-width: 100%; /* Set width of the dropdown */
    display: none;
    position: absolute;
    z-index: 1300;
    left: 0;
}

.dropdown > li {
    width: 100%;
}

.dropdown > li > a.active,
.dropdown > li > iframe.active{
    background-color: #922;
}

.bottomR 
{
    width:110px;
    height:60px;
    position:absolute;
    bottom:0;
    right:0;
    z-index: 99; 
}

.topR 
{    
    width:48px;
    height:48px;
    position:absolute;
    top:80px;
    right:10px;
    z-index: 99; 
}

#vehicleListIcon 
{ 
    background-image: url('images/ControlPanel/ToggleVehicleList.png');
    background-position:center;
    background-size: 40px 40px; 
    background-repeat: no-repeat; 
    margin-right: 12px; 
    margin-left: 12px; 
    padding-left:30px;
    padding-right:30px;
    cursor:pointer;
}

#logoutTag {
    cursor:pointer;
}

#accoutInfoTag {
    cursor:default;
}

#AlarmDialogIcon 
{    
    background-image: url('images/ControlPanel/alarmoff.png');
    background-position:center;
    background-size: 90px 35px; 
    background-repeat: no-repeat; 
    margin: 0px;  
    padding-left:50px;
    padding-right:50px;
    padding-top:25px;
    padding-bottom:25px;
    cursor:pointer;
}

#DownloadDialogIcon 
{
    background-image: url('images/ControlPanel/download.png');
    background-position:center;
    background-size: 48px 48px; 
    background-repeat: no-repeat; 
    margin: 0px;  
    padding-left:24px;
    padding-right:24px;
    padding-top:24px;
    padding-bottom:24px;
    cursor:pointer;
}

/*------------------------------------------------------------------------------------------------------------------------
//
//
//                                              Google Map
//
//
------------------------------------------------------------------------------------------------------------------------*/
#map_canvas { 
    height: 100%; 
}

.labels {
    color: white;
    background-color: red;
    font-family: "Lucida Grande", "Arial", sans-serif;
    font-size: 10px;
    text-align: center;
    width: 100px;     
    white-space: nowrap;
}

.infoWindow { 
    font-family: Courier New, Courier, monospace;                            
}



/*------------------------------------------------------------------------------------------------------------------------
//
//
//                                              Dialog
//
//
------------------------------------------------------------------------------------------------------------------------*/
.no-close .ui-dialog-titlebar-close {
  display: none;
}

.no-titleBar .ui-dialog-titlebar {
    display:none;
}

.circle{
    display:block;
    width:20px;
    height:20px;
    border-radius:10px;
    font-size:12px;
    color:#000;
    line-height:20px;
    text-align:center;
    background:#5abd0c
}

/*
    Video Panel    
*/
.icon-prev { 
    background-image: url('images/VideoPanel/prevover.png');
    background-size: 40px 40px;
    padding:20px;
}

.icon-next { 
    background-image: url('images/VideoPanel/nextover.png');
    background-size: 40px 40px;
    padding:20px;
}

.icon-split1 { 
    background-image: url('images/VideoPanel/oneover.png'); 
    background-size: 40px 40px;
    padding:20px;
}

.icon-split4 { 
    background-image: url('images/VideoPanel/fourover.png'); 
    background-size: 40px 40px;
    padding:20px;
}

.icon-split9 { 
    background-image: url('images/VideoPanel/nineover.png'); 
    background-size: 40px 40px;
    padding:20px;
}

.icon-split16 { 
    background-image: url('images/VideoPanel/sixteenover.png'); 
    background-size: 40px 40px;
    padding:20px;
}

.icon-audio { 
    background-image: url('images/Video/mute.png'); 
    background-size: 40px 40px;
    padding:20px;
}

.icon-audio.active {
    background-image: url('images/Video/audio.png'); 
}

.icon-fitwindow { 
    background-image: url('images/VideoPanel/fitwindow.png'); 
    background-size: 40px;
    padding:20px;
}

.icon-map { 
    background-image: url('images/VideoPanel/map.png'); 
    background-size: 40px;
    padding:20px;
}

.video-panel {
    display: inline-block;
    margin-left:10px;
    border-style:outset;
    border-width:1px;
    vertical-align: middle;
    cursor:pointer;
    top:7px;
    left:-1px;
    width:0px;
    height:0px;
}

.video-panel.active {
    border-style:inset;
    border-width:2px;
}

.video-panel:hover {
    border-style:inset;
    border-color:ButtonHighlight;
}

/*------------------------------------------------------------------------------------------------------------------------
//
//
//                                              Tabs
//
//
------------------------------------------------------------------------------------------------------------------------*/
ul.videoTabs {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Float the list items side by side */
ul.videoTabs li {float: left;}

/* Style the links inside the list items */
ul.videoTabs li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.videoTabs li a:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
ul.videoTabs li a:focus, .active {
    background-color: #ccc;
}

/* Style the tab content */
.videoTabContent {
    overflow:hidden;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

/*------------------------------------------------------------------------------------------------------------------------
//
//
//                                              Progressbar
//
//
------------------------------------------------------------------------------------------------------------------------*/

.ui-progressbar 
{
    position: relative;
}

.progress-label 
{
    position: absolute;
    left: 1%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
    width:100%;
    /* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
	white-space: pre-wrap;      /* CSS3 */   
	white-space: -moz-pre-wrap; /* Firefox */    
	white-space: -pre-wrap;     /* Opera <7 */   
	white-space: -o-pre-wrap;   /* Opera 7 */    
	word-wrap: break-word;      /* IE */
}


/*------------------------------------------------------------------------------------------------------------------------
//
//
//                                              VehicleList
//
//
------------------------------------------------------------------------------------------------------------------------*/
.w2ui-sidebar .w2ui-node,
.w2ui-sidebar .w2ui-node .w2ui-node-caption  {
    border: none !important;
    padding: 1px 0px !important;
}

.liveIcon 
{
    border-spacing:0;
}

.liveIcon tr td
{
    padding: 0; 
    margin: 0;
}

.google-visualization-table-page-number {
    height:1.2em;
}

.google-visualization-table-page-numbers a {
    font-size:1em;
}

.google-visualization-table-page-numbers a.current {
    height:1.2em; 
    font-size:1em;
}

.hide {
    display:none;
}

.vl_hover {
    background-color:rgb(255, 255, 204);
    border-top: 2px double orange;
    border-bottom: 2px double orange;
}

.liveIcon i:hover, .liveIcon span:hover {
    color:red;
}

.w2ui-sidebar .w2ui-sidebar-div .w2ui-node-caption {
    margin:1px 0 1px 0px !important;
}

.liveBtn {
    background-color:inherit;
    cursor:pointer;
    width:20px !important;
    border-width:0px;
    opacity:0;
}

.liveBtnIcon, .playbackBtnIcon {
    background-color:inherit;
    margin-left: -20px !important;
    font-size: 14px;
    color:black;
}

.liveBtnIcon.hover,
.playbackBtnIcon.hover,
.liveBtnIcon.active,
.playbackBtnIcon.active {
    font-size: 16px;
    color:red;
}

button.btn {
    background-image: -webkit-linear-gradient(#fff 0,#e7e7e7 100%);
    background-image: -moz-linear-gradient(#fff 0,#e7e7e7 100%);
    background-image: -ms-linear-gradient(#fff 0,#e7e7e7 100%);
    background-image: -o-linear-gradient(#fff 0,#e7e7e7 100%);
    background-image: linear-gradient(#fff 0,#e7e7e7 100%);
}

#login_bg {
    background-image: url('images/140.gif');
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 121;
}

span.DelayOff {
    color:#666;
    font-weight:bold;
}

span.Online {
    color:#090;
    font-weight:bold;
}

span.SafeMode {
    color:#f00;
    font-weight:bold;
}

span.PowerOff {
    color:#000;
    font-weight:bold;
}

span.Offline {
    color:#00f;
    font-weight:bold;
}

span.Unknown {
    color:#fff;
    font-weight:bold;
	text-shadow: 0px 0px 1px #222, 0px 0px 1px #222, 0px 0px 1px #222, 0px 0px 1px #222, 0px 0px 1px #222;
}

/*------------------------------------------------------------------------------------------------------------------------
//
//
//                                               Color
//
//
------------------------------------------------------------------------------------------------------------------------*/
span.red {
    color: #f00 !important;
}

span.black {
    color: #000 !important;
}

span.green {
    color: lawngreen !important;
}

span.globe {
    color: #068 !important;
    font-size: 20px !important;
}

span.blue {
    color: #00f !important;
}

/*------------------------------------------------------------------------------------------------------------------------
//
//
//                                               Footer - Status Button
//
//
------------------------------------------------------------------------------------------------------------------------*/
#layout_layout_panel_bottom .w2ui-toolbar table {
    height: 32px;
}

Button.Status-Checked {
    font-weight: bold;
    padding: 0px 5px;
    background-color: snow;
    border-radius: 7px;
    border-style: inset;
    border-color: rgb(255, 255, 255);
}

Button.Status-Unchecked {
    font-weight: bold;
    padding: 0 5px;
    background-color: bisque;
    border-radius: 7px;
    border-style: outset;
}

/*------------------------------------------------------------------------------------------------------------------------
//
//
//                                               w2popup
//
//
.w2ui-popup .w2ui-msg-title {
    color: darkseagreen !important;
    font-size: 18px !important;
    font-weight: bolder;
    background-image: -webkit-linear-gradient(#8fec8f,#8fec8f);
    background-image: -moz-linear-gradient(#8fec8f,#8fec8f);
    background-image: -ms-linear-gradient(#8fec8f,#8fec8f);
    background-image: -o-linear-gradient(#8fec8f,#8fec8f);
    background-image: linear-gradient(#8fec8f,#8fec8f);
    background-color: #8fec8f;
}

.w2ui-popup-btn.btn  {
	color: black;
    text-transform: uppercase;
}

.w2ui-popup .w2ui-msg-body {
	background-color: beige !important;
}

.w2ui-popup .img_alert {
    background-image: url('images/Popup/alert.png');
    background-size: 40px 40px;
    padding:20px;
}
------------------------------------------------------------------------------------------------------------------------*/