body {    
    overscroll-behavior: none;
    font-family: Arial, Helvetica, sans-serif;
}
#history{
    display:none;
}
div,p,span.ul.li{
    margin:0;   
    border:0;
}
* {
    box-sizing: border-box;
}
.rightText{
    text-align: right;
    padding-right: 5px;
}
.leftText{
    text-align: left;
    padding-left: 3px;
}
.bg{
    background-color: #13810a;
}
.bg_disabled{
    background-color: #c2bebe;
}
.redText{
    color: red;
}
.blueText{
    color: blue;
}
.greenText{
    color: green;
}
.organText{
    color: orange;
}
.blackText{
    color: black;
}
.datasource{
    display:none;
    width:0px;
    height:0px;
}
.popup {
    width: 100%;
    height: auto;
    margin: 0;
    border: 0;
    padding: 0;
    display: none;
    z-index:502;
    position:fixed;
    top:0;
    left:0;
    background:#fff;
    opacity:1;
}
.dialog{
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: #222;
    z-index: 599;
    padding: 0;
    border-radius: 0;
    opacity: 1;
}
.tips{
    position: fixed;
    z-index: 600;
}
.tips_panel{
    background-color: #f37322;
    font-size: 0.8em;
    color: #fff;
    opacity: 0.8;
    border: 0;
    border-radius: 4px;
    padding: 8px;
}
.tips_panel p{
    padding: 2px;
}
.message{
    width: 50%;
    min-height: 60px;
    background: rgb(146, 12, 12);
    display:block;
    position: fixed;
    top: 40%;
    left: 25%;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 3px 3px 6px 3px rgb(115, 116, 115);
    color: #ffffff;
    font-size: 0.85em;
    font-style: italic;
    opacity: 1;
    align-content: center;
    justify-content: center;
    text-wrap: wrap;
    text-align: center;
}

.more_button{
    width: 100%;   
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: transparent;
    z-index: 502;
    padding: 0;
    border-radius: 0;
    opacity: 0.95;
}
.back{
    width:30px;
    height:30px;
    text-align: center;
    top:0;
    left:0;
    background:url(../img/ic_arrow_50_50_1.png) no-repeat;
    background-size:28px 24px;
    background-position-x:8px;
    background-position-y:5px;
    padding: 5px 0 0 5px;
    color: #fff;    
}
.more{
    width:40px;
    height:30px;
    text-align: center;
    display: block;
    position: fixed;
    top:0;
    right:5px;
    background:url(../img/ic_more_50_50_1.png) no-repeat;
    background-size:24px 24px;
    background-position-x:8px;
    background-position-y:5px;
    padding: 5px 0 0 5px;   
    color: #fff;  
}
.statu{
    width: 40px;
    height: 12px;
    padding:6px;
    margin: 5px;
    display: block;
    color: #717070;
    font-size: 0.8em;
    border-radius: 5px;
    text-align: center;  
    border: 1px #c2bebe solid;   
    float: left;  
}
.all{
    background: #13810a; 
    color: #13810a; 
    font-size: 0.8em;
    border: 0;
}
.all_sel{    
    background: #fff; 
    border: 3px #13810a solid;    
}
.all_text{
    background: #13810a;
    color: #fff;
}
.move{
    background: blue; 
    color: blue; 
    font-size: 0.8em;  
    border: 0;   
}

.move_sel{
    background: #fff;    
    border: 3px blue solid;
}

.move_text{
    background: blue;
    color: #fff;
}
.stop{
    background: #F50404;  
    color: #F50404;   
    font-size: 0.8em;  
    border: 0;  
}
.stop_sel{
    background: #fff;    
    border: 3px #F50404 solid;
}
.stop_text{
    background: #F50404;  
    color: #fff;
}
.disconected{
    background: #000; 
    color: #000;
    font-size: 0.8em;  
    border: 0;  
}
.disconected_sel{
    background: #fff;   
    border: 3px #000 solid;
}
.disconected_text{
    background: #000;
    color: #fff;
}
.expired{
    background: #f37322; 
    color: #f37322; 
    font-size: 0.8em;    
}
.expired_sel{   
    background: #fff;   
    border: 3px #f37322 solid;
}
.expired_text{
    background: #f37322;
    color: #fff;
}

.container {
    background: #eae6e6;
    width: 100%;
    margin: 0;
    border: 0;
    padding: 0;
    display: table;
}
.main {
    display:table-cell;
    width: 100%;
    height: 100%;
}
.map{
    width:100%;
    height:105vh;
    
}
.map .ol-zoom{
    display: none;
}
#map{
    width:100%;
    height:105vh;
    /* position: absolute; */
}
.tools{
    width:50px;
    height:200px;
    /*background:orange;*/
    top:0;
    right:5px;   
    position:fixed;  
    z-index: 500;
  
}
.action {
    width: 48px;
    height: 48px;
    margin: 4px;
    padding-top: 14px;
    display: list-item;
    list-style: none;
    border: #fbf0f0;
    border-radius: 50%;
    text-align: center;
    justify-content: center;
    border: 1px solid #808080;
    transition: inherit;
}
.ic_timer_loading {
    background-color: #13810a;
    font-size: 1.3em;
    color: white;
    padding-top: 12px;
    color: white;
    /* display: none; */
}
.ic_timer_loading_sel {
    background-color: red;
    font-size: 1.3em;
    color: white;
    padding-top: 12px;
}
/*#region Tools Action iCon*/
.ic_list {
    background: url(../img/ic_cars_50_50_1.png) center no-repeat;
    background-size: 28px 28px;
    background-position: center center;
    background-color: white;
}
.ic_list_sel {
    background: url(../img/ic_cars_50_50_3.png) center no-repeat;
    background-size: 28px 28px;
    background-position: center center;
    background-color: #f37322;
}

.ic_history {
    background: url(../img/ic_clock_50_50_1.png) center no-repeat;
    background-size: 24px 24px;
    background-position: center center;
    background-color: white;   
}

.ic_history_sel {
    background: url(../img/ic_clock_50_50_3.png) center no-repeat;
    background-size: 24px 24px;
    background-position: center center;
    background-color: #13810a;
}

.ic_roadmap {
    background: url(../img/ic_roadmap_50_50_1.png) center no-repeat;
    background-size: 32px 32px;
    background-position: center center;   
    background-color: white; 
}
.ic_roadmap_sel {
    background: url(../img/ic_roadmap_50_50_3.png) center no-repeat;
    background-size: 32px 32px;
    background-position: center center;
    background-color: #13810a;
}
.ic_info {
    background: url(../img/ic_info_50_50_1.png) center no-repeat;
    background-size: 24px 24px;
    background-position: center center;
    background-color: white;
}
.ic_info_sel {
    background: url(../img/ic_info_50_50_3.png) center no-repeat;
    background-size: 24px 24px;
    background-position: center center;
    background-color: #13810a;
}
.ic_poweroff {
    background: url(../img/ic_power_off_50_50_1.png) center no-repeat;
    background-size: 36px 36px;
    background-position: center center;
    background-color: white;
}
.ic_poweroff_sel {
    background: url(../img/ic_power_off_50_50_2.png) center no-repeat;
    background-size: 36px 36px;
    background-position: center center;
    background-color: white;
}

.ic_engine {
    background: url(../img/ic_engine_50_50_1.png) center no-repeat;
    background-size: 36px 36px;
    background-position: center center;
    background-color: white;
}

.ic_engine_sel {
    background: url(../img/ic_engine_50_50_2.png) center no-repeat;
    background-size: 36px 36px;
    background-position: center center;
    background-color: white;
}

.ic_menu{
    background: url(../img/ic_menu_50_50_1.png) center no-repeat;
    background-size: 30px 30px;
    /* background-position: center center; */
    background-color: rgb(243, 238, 238);
    top:5px;
    left: 3px;
    position: fixed;
    width: 40px;
    height: 40px;
    opacity: 1;
    z-index: 501;
    border-radius: 3px;
}

/*#endregion*/

/*#region Speed meter*/
.speedmeter {
    width: 50px;
    height: 50px;
    background: rgb(254, 249, 249);
    top: 105px;
    left: 3px;   
    position:fixed;
    border:#0808fb 1px solid;
    border-radius: 50%;
    /* display:none; */
    z-index: 500;
    
}
.speedmeter .speedvalue{
    width:100%;
    /* height:50px; */
    /* color:blue; */
    font-size:1.2em;    
    text-align:center;    
    margin:0;
    padding-top:8px;
    color:#0808fb;
}
.speedmeter .speedlabel{
    color: #000;
    font-size: 0.7em;
    text-align:center;
}
/*#endregion Speed meter*/

/*#region Direction*/
.direction{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #808080;
    z-index: 501;    
    position: fixed;
    top: 50px;
    left: 3px;
}

.ic_direction{
    background: url(../img/ic_my_location_50_50_1.png) center no-repeat;
    background-size: 30px 30px;
    background-color: #fff;
}

.ic_direction_sel{
    background: url(../img/ic_my_location_50_50_3.png) center no-repeat;
    background-size: 30px 30px;
    background-color: #13810a;
}
/*#endregion Direction*/
.bottom {
    width: 100%;
    min-height: 30px;
    height: auto;    
    bottom: 0;
    left: 0;
    position: absolute;
    z-index: 503;    
    
}

.info {
    width: 99%;
    min-height: 20px;
    height: auto;
    color: #fff;
    font-size: 0.9em;
    text-align: center;
    margin: auto;
    background: #898888;
    border-radius: 8px;
    /* opacity: 0.8;*/
    padding: 5px;
    margin-bottom: 5px;
    /* display: none; */
    overflow: auto;   
    z-index: 800;
    
}
.ul {
    min-width: 140px;
    height: 30px;    
    float:left;
    display:flex;
    margin:1px;   
}
.ul1 {
    width: 160px;
    height: 30px;
    float: left;
    display: flex;
    margin: 1px;
}

.ul2 {
    width: 260px;
    height: 30px;
    float: left;
    display: flex;
    margin: 1px;
}
.ul3 {
    width: 65px;
    height: 30px;    
    float:left;
    display:flex;
    margin:1px;       
}
.li_ic {
    width: 35px;
    height: 30px;
    float: left;
    background: red;
    border: 0;
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
}

.li_text {
    min-width: 110px;
    height: 30px;
    float: left;
    background: white;
    color: #000;
    font-size: 0.85em;
    padding: 8px 2px 0 2px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 0;
}
.li_text1{
    width: 40px;
    height: 30px;
    float: left;
    background: transparent;
    color: #000;
    font-size: 0.7em;
    padding: 8px 2px 0 2px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 0;
}

.li_text2{
    width: 140px;
    height: 30px;
    float: left;
    background: #fff;
    color: #000;
    font-size: 0.85em;
    padding: 2px 2px 0 2px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 0;
}
.li_text3 {
    width: 34px;
    height: 30px;
    float: left;
    background: white;
    color: #000;
    font-size: 0.85em;
    padding: 8px 2px 0 2px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 0;
}
/*#region Icon*/
.ic_licenseplates {
    background: url(../img/ic_licenseplates_50_50_3.png) center no-repeat;
    background-size: 18px 18px;
    background-position: center center;
    background-color: #434242;
}

.ic_distance {
    background: url(../img/ic_dictance_50_50_3.png) center no-repeat;
    background-size: 18px 18px;
    background-position: center center;
    background-color: #434242;
}
.ic_fuel {
    background: url(../img/ic_fuel_50_50_3.png) center no-repeat;
    background-size: 18px 18px;
    background-position: center center;
    background-color: #434242;
}
.ic_statellite {
    background: url(../img/ic_satellite_50_50_3.png) center no-repeat;
    background-size: 20px 20px;
    background-position:center center;
    background-color: #434242;
}
.ic_server {
    background: url(../img/ic_server_50_50_3.png) center no-repeat;
    background-size: 18px 18px;
    background-position: center center;
    background-color: #434242;
}
.ic_expired {
    background: url(../img/ic_expired_50_50_3.png) center no-repeat;
    background-size: 18px 18px;
    background-position: center center;
    background-color: #434242;
}
.ic_start {
    background: url(../img/ic_acc_50_50_3.png) center no-repeat;
    background-size: 22px 22px;
    background-position: center center;
    background-color: #434242;
}

.ic_start0 {
    background: url(../img/ic_acc_50_50_0.png) center no-repeat;
    background-size: 22px 22px;
    background-position: center center;    
}

.ic_start1 {
    background: url(../img/ic_acc_50_50_1.png) center no-repeat;
    background-size: 22px 22px;
    background-position: center center;    
}

.ic_start2 {
    background: url(../img/ic_acc_50_50_2.png) center no-repeat;
    background-size: 22px 22px;
    background-position: center center;    
}


.ic_stop {
    background: url(../img/ic_stop_50_50_2.png) center no-repeat;
    background-size: 18px 18px;
    background-position: center center;
    background-color: #434242;
}
.ic_security {
    background: url(../img/ic_security_50_50_3.png) center no-repeat;
    background-size: 18px 18px;
    background-position: center center;
    background-color: #434242;
}

.ic_security0 {
    background: url(../img/ic_security_50_50_0.png) center no-repeat;
    background-size: 18px 18px;
    background-position: center center;   
}

.ic_security1 {
    background: url(../img/ic_security_50_50_1.png) center no-repeat;
    background-size: 18px 18px;
    background-position: center center;   
}

.ic_security2 {
    background: url(../img/ic_security_50_50_2.png) center no-repeat;
    background-size: 18px 18px;
    background-position: center center;   
}


.ic_battery {
    background: url(../img/ic_battery_50_50_3.png) center no-repeat;
    background-size: 18px 18px;
    background-position: center center;
    background-color: #434242;
}

.ic_battery0 {
    background: url(../img/ic_battery_50_50_0.png) center no-repeat;
    background-size: 18px 18px;
    background-position: center center;  
}

.ic_battery1 {
    background: url(../img/ic_battery_50_50_1.png) center no-repeat;
    background-size: 18px 18px;
    background-position: center center;  
}

.ic_battery2 {
    background: url(../img/ic_battery_50_50_2.png) center no-repeat;
    background-size: 18px 18px;
    background-position: center center;  
}
.ic_parking {
    background: url(../img/ic_parking_50_50_3.png) center no-repeat;
    background-size: 18px 18px;
    background-position: center center;
    background-color: #434242;
}

.ic_calendar {
    background: url(../img/ic_calendar_50_50_3.png) center no-repeat;
    background-size: 18px 18px;
    background-position: center center;
    background-color: #434242;   
}

.ic_download {
    background: url(../img/ic_download_50_50_3.png) center no-repeat;
    background-size: 18px 18px;
    background-position: center center;
    background-color: #434242;
    border-radius:8px;
    margin-right:18px;
}
.ic_play {
    background: url(../img/ic_play_50_50_3.png) center no-repeat;
    background-size: 22px 22px;
    background-position: center center;
    background-color: #434242;
    border-radius: 8px;
    margin:0 3px 0 3px;
}

/*.ic_play:hover {
    background: url(../img/ic_play_50_50_0.png) center no-repeat;
    background-size: 22px 22px;
    background-position: center center;
    background-color: #434242;
    border-radius: 8px;
    margin: 0 8px 0 8px;
}*/
.ic_next {
    background: url(../img/ic_next_50_50_3.png) center no-repeat;
    background-size: 20px 20px;
    background-position: center center;
    background-color: #434242;
    border-radius: 8px;    
    margin:0 3px 0 3px;
}

/*.ic_next:hover {
    background: url(../img/ic_next_50_50_0.png) center no-repeat;
    background-size: 20px 20px;
    background-position: center center;
    background-color: #434242;
    border-radius: 8px;
}*/

.ic_last {
    background: url(../img/ic_last_50_50_3.png) center no-repeat;
    background-size: 23px 23px;
    background-position: center center;
    background-color: #434242;
    border-radius: 8px; 
    margin:0 0 0 3px;      
}

.ic_first {
    background: url(../img/ic_first_50_50_3.png) center no-repeat;
    background-size: 23px 23px;
    background-position: center center;
    background-color: #434242;
    border-radius: 8px;       
    margin:0 3px 0 0;
}

/*.ic_reverse:hover {
    background: url(../img/ic_reverse_50_50_0.png) center no-repeat;
    background-size: 23px 23px;
    background-position: center center;
    background-color: #434242;
    border-radius: 8px;    
}*/
.ic_previous {
    background: url(../img/ic_previous_50_50_3.png) center no-repeat;
    background-size: 20px 20px;
    background-position: center center;
    background-color: #434242;
    border-radius: 8px;  
    margin:0 3px 0 3px; 
}
/*.ic_previous:hover {
    background: url(../img/ic_previous_50_50_0.png) center no-repeat;
    background-size: 20px 20px;
    background-position: center center;
    background-color: #434242;
    border-radius: 8px;    
}*/
.ic_pause {
    background: url(../img/ic_pause_50_50_3.png) center no-repeat;
    background-size: 24px 24px;
    background-position: center center;
    background-color: #434242;
    border-radius: 8px;
    margin: 0 3px 0 3px;
}

/*.ic_pause:hover {
    background: url(../img/ic_pause_50_50_0.png) center no-repeat;
    background-size: 22px 22px;
    background-position: center center;
    background-color: #434242;
    border-radius: 8px;
    margin: 0 8px 0 8px;
}*/

.ic_shared{
    background: url(../img/ic_shared_button_50_50_3.png) center no-repeat;
    background-size: 24px 24px;
    background-position: center center;
    background-color: #434242;
    border-radius: 8px;
    margin: 0 3px 0 3px;
    width: 40px;
    height: 30px;   
}

.ic_shared_link{    
    background: url(../img/ic_share_50_50_3.png) left no-repeat;
    background-size: 24px 24px;
    /* background-position: center center; */
    background-color: #13810a;   
    padding: 8px 0 0 28px;
    border-radius: 8px;
    margin: auto ;
    width: 160px;
    height: 30px;
    color: #fff;
}
/*#endregion Icon for Device infomaction*/

/*#region Playback panel*/
.playback_panel{
    width:100%;
    height:auto;
    background:#e9e7e7;
    position:fixed;
    top:0;
    left:0;
    display:none;
    padding:8px;
    z-index:503;
}
.speed{
    width:96%;
    height:30px;    
    font-size:0.8em;
    cursor:pointer;
    
}
/*#endregion End Playback Panel*/

/*#region Address bar*/
.address {
    width: 99%;
    min-height: 30px;
    height: auto;
    color: #fff;
    font-size: 0.7em;
    text-align: center;
    text-overflow:ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: auto;
    /* background: #13810a; */
    border-radius: 8px;
    opacity: 0.95;
    padding: 8px;
    font-style: italic;    
    background: url(../img/ic_location_50_50_3.png)  #13810a left no-repeat;
    background-position: 3px 7px;
    background-size: 16px 16px;
    z-index: 500;
}
.address0 {
    width: 100%;    
    min-height: 26px;
    color: #000;
    font-size: 0.7em;
    font-family: 'Times New Roman', Times, serif;
    text-align: left;
    /* margin: auto;     */
    border-radius: 8px;
    /* opacity: 0.9; */
    padding-left: 28px;
    /* white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; */
    background: url('../img/ic_location_50_50_3.png') no-repeat;
    background-size: 24px 24px;
}
/*#endregion Address bar*/   

/*#region Footer*/
    .footer {
        display: none;
        font-family: 'Courier New', Courier, monospace;
        z-index: 500;
    }
        .footer p {
            margin: 0;
            width: 100%;
            height: 20px;
            padding-top: 5px;
            font-size: 0.6em;
            color:white;
        }
/*#endregion End Footer*/

/*#region Items for device list*/
.items {
    width: 100%;
    height: 100%;
    display:block;
    position: fixed;
    top: 30px;
    left: 0;
    background: #fff;      
    padding: 0 0 20px 0;   
    margin: 0;
    overflow-wrap: normal;
    overflow: auto;
}

.item{
    width: 260px;
    min-height: 80px;   
    display: block;    
    float: left;
    padding: 6px;
    background: #e9e7e7;
    border-radius: 8px;   
    border: 1px solid #aeacac;
    margin: 20px 0 10px 6px;
    padding: 8px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.item_sel{    
    background:#c2f5bc;
    border: 1px solid #13810a;
}

.item_title{
    width: 90%;
    height: 30px;
    font-family:'Times New Roman', Times, serif;
    font-size: 0.8em;
    /* font-weight: bolder;    */
    /* color: #f37322; */
    padding:3px 0 3px 8px;    
    display: block;
    position: relative;
    text-align: center;
    padding: 8px;
    margin-top: -24px;
    margin-left: 5%;    
    /* background-image:linear-gradient(to right,rgb(19, 19, 19),rgb(58, 58, 58));  */
    /* border: 1px #c2bebe solid;  */
    border-radius: 8px;
    /* background:#dbdada; */
}
.item_title_sel{
    width: 90%;
    height: 30px;
    font-family:'Times New Roman', Times, serif;
    font-size: 0.8em;
    font-weight: bolder;   
    /* color: #f37322; */
    padding:3px 0 3px 8px;    
    display: block;
    position: relative;
    text-align: center;
    padding: 8px;
    margin-top: -24px;
    margin-left: 5%;    
    /* background-image:linear-gradient(to right,rgb(19, 19, 19),rgb(58, 58, 58));  */
    border: 1px #c2bebe solid; 
    border-radius: 8px;
    background:#13810a;
}
.item_row{
    width: 96%;
    min-height:40px;
    display: flex;   
    /* background:#d3cfcf; */
    clear: both;
    margin: 2px;
    padding: 3px 0 3px 0;
    justify-content: center;
    /* border: 1px #f37322 solid; */
}
.item_row_status{
    width: 96%;
    height:22px;
    display: flex;   
    /* background:#aa4848; */
    clear: both;
    /* margin: 2px; */
    margin-bottom: 4px;
    padding: 0px 0 3px 0;
    justify-content: center;
    /* border: 1px #f37322 solid; */
}
.item_column{
    width: 48%;
    height: 20px;
    display:block;
    float: left;
}

.item_column .label{
    width: 100%;
    padding: 3px;
    float: left;
    color: #484747;
    font-size: 0.8em;
    font-weight: bolder;
    text-align: center;
}
.item_column .text{
    width: 100%;
    height: auto;
    display: block;
    color: #353434;
    font-size: 0.8em;
    text-align: center;
    padding: 3px;
}
.item_ic_sim{
    width: 26px;
    height: 20px;
    background: url(../img/ic_sim_card_50_50_3.png) no-repeat;
    background-size: 12px 12px;
    background-position: center right;
    float: left;
    display: block;   
}

.item_ic_calendar{
    width: 26px;
    height: 20px;
    background: url(../img/ic_calendar_50_50_3.png) no-repeat;
    background-size: 10px 10px;
    background-position: center right;
    float: left;
    display: block;   
}
.item_text{
    width: 140px;
    height: 20px;
    background: transparent;
    float: left;
    display: block;
    padding: 5px 0 0 5px;
    text-align: left;
    font-size: 0.85em;
    font-family:Arial, Helvetica, sans-serif;
    color: #fff;
}

/*#endregion End Items for device list*/

/* Text color */
.disconect_color{
    color: #000;
}
.move_color{
    color: blue;
}

.stop_color{
    color: #F50404;
}

.expires_color{
    color:#f37322;
}
.all_color{
    color: #13810a;
}
.qrcode{
    text-align: center;   
    margin: auto;
    width: 240px;
    height: 240px;
    border-radius: 8px;
    background-repeat: no-repeat;
    background-size: 240px 240px;    
    background-color: transparent;
    display: none;
}
.qrcode_link{
    height: 30px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 0.6em;
    padding: 10px 0 0 28px;
    background: url(../img/ic_share_50_50_1.png) left no-repeat;
    background-size: 24px 24px;
    display: none;
}
/*#region Multi Device Screen*/
/*Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .header {
        background: #000;
        width: 100%;  
        height:50px;
        position: fixed;
        left: 0;
        top: 0;
        color:#ffffff;
        display: none;
    }
    .main {
        background: #c2bebe;
        width: 100%;
        height:100%;
        left: 0;
        top: 0;
        position:fixed;
    }
    .speedmeter{
        top:105px;
        left:3px;
    }
    .bottom{
        bottom:0;
    }   
    .ul{
        /* width:33%; */
        margin:3px 0 3px 0;
    }  
    .ul2{ 
        width: 48%;       
        margin:3px 0 3px 0;
        text-align: center;
        justify-content: left;
    }  
    .ul3{       
        margin:3px 0 3px 0;
    } 
    .li_ic{
        width:30px;
        height:30px;
    }
    .li_text{
        width:100px;        
    }
    
    .playback_panel {        
        padding: 3px;      
    }
    .items{
        width: 100%;
        justify-content: center;
        display: block;
    }
    .item{
        width: 90%;
        margin-left: 5%;
        /* background-color: #28a428; */
    }
    /* .item_title{
        width: 90%;  
        margin-left: 5%;     
    }    */
    .message{
        width: 97%;
        left: 5px;
    }
    .signin{
        width: 94%;
        height: 98%;
    }
    .address{
        background-position: 3px 5px;
        background-size: 16px 16px;
        padding-left: 20px;
        text-align: left;
    }
    .copyright {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0;
        background-color: #f0f5f0;
        color: white;
        text-align: center;
        display: flex;
    }
    .menu{
        width: 100% !important;
        height: 100% !important;
    }
    .ui_view_report, .ui_view_search{
        width: 96% !important;      
    }
}


/*Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .header {
        background: #13810a;
        width: 100%;
        height: 50px;
        position: fixed;
        left: 0;
        top: 0;
        display: none;
    }
    

    .main {
        background: #c2bebe;
        width: 100%;
        height: 700px;
        left: 0;
        top: 0;
        position: fixed;
    }    
    /* .bottom {
        bottom: 25px;
    }     */
    .ul {
        width: 130px;
        margin: 3px 6px 3px 6px;
    }    
    .ul2 {  
        width: 160px;       
        margin:6px;
    }
    .ul3 {        
        margin: 3px 6px 3px 6px;
    } 
    .li_text {
        width: 100px;
    }
    
    .playback_panel {
        padding: 8px;
    }
    div[name='expired'] {
        display: block;
    }   
    
    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 20px;
        background-color: #13810a;
        color: white;
        text-align: center;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .header {
        background: blue;
        width: 100%;
        height: 50px;
        position: fixed;
        left: 0;
        top: 0;
        display: none;
    }
    .main {
        background: #c2bebe;
        width: 100%;
        height: 800px;
        left: 0;
        top: 0;
        position: fixed;
    }    
    /* .bottom {
        bottom: 25px;
    }     */
    .ul {
        width: 130px;
        margin: 3px 6px 3px 6px;
    }
    .ul2 {    
        width: 180px;    
        margin:6px;
    }
    .ul3 {        
        margin: 3px 6px 3px 6px;
    } 
    .li_text {
        width: 100px;
    }
    div[name='expired'] {
        display: block;
    }
    /* .item{
        width:48%;
    } */
    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 20px;
        background-color: #13810a;
        color: white;
        text-align: center;
    }
        
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .header {
        background: orange;
        width: 100%;
        height: 50px;
        position: fixed;
        left: 0;
        top: 0;
        display: none;
    }
    .main {
        background: #c2bebe;
        width: 100%;
        height: 800px;
        left: 0;
        top: 0;
        position: fixed;
    }    
    /* .bottom {
        bottom: 25px;
    }     */
    div[name='expired'] {
        display: block;
    }
    .ul2 {    
        width: 180px;    
        margin:6px;
    }
    .ul3 {        
        margin: 3px 6px 3px 6px;
    } 
    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 20px;
        background-color: #13810a;
        color: white;
        text-align: center;
    }
    
   
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .header {
        background: pink;
        width: 100%;
        height: 50px;
        position: fixed;
        left: 0;
        top: 0;
        display: none;
    }
    .main {
        background: #c2bebe;
        width: 100%;
        height: 800px;
        left: 0;
        top: 0;
        position: fixed;
    }
    /* .bottom {
        bottom: 25px;       
    } */
    
    .ul{
        width:130px;
        margin:3px; /*6px 3px 6px;*/
    }
    .ul2 {      
        width: 180px;  
        margin:6px;
    }
    .ul3 {        
        width: 110px;
        margin: 3px 6px 3px 6px;
    } 
    .li_text{
        width:100px;
    }
    .li_text3{
        width:80px;
    }
    .playback_panel {
        padding: 8px;
    }
    div[name='expired'] {
        display: block;
    }
    /* .item{
        width:30%;
    } */
    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 20px;
        background-color: #13810a;
        color: white;
        text-align: center;
    }
}
/*#endregion*/