@font-face {
            font-family: "OpenS";
            src: url(../fonts/BaiJamjuree-Regular.eot), url(../fonts/BaiJamjuree-Regular.eot?#iefix) format('embedded-opentype'), url('../fonts/BaiJamjuree-Regular.ttf') format("truetype");
            /*src: url(../fonts/ostrich-sans-rounded.eot), url(../fonts/ostrich-sans-rounded.eot?#iefix) format('embedded-opentype'), url('../fonts/ostrich-sans-rounded.ttf') format("truetype");*/
            
            /*src: url(../fonts/Comfortaa_Regular.eot), url(../fonts/Comfortaa_Regular.eot?#iefix) format('embedded-opentype'), url('../fonts/Comfortaa_Regular.ttf') format("truetype");*/

            /*src: url(../fonts/Jura-Regular.eot), url(../fonts/Jura-Regular.eot?#iefix) format('embedded-opentype'), url('../fonts/Jura-Regular.ttf') format("truetype");*/
            /*src: url('../fonts/Lato-Regular.ttf') format("truetype");*/

           
        }

        .gauge {
            width:200px;
            height:200px;
            margin:-50px;
            box-shadow:0px 0px 10px rgba(0,0,0,0.5);
            background-color:white;
            border-radius:50%;
        }

        .gContainer {                
    padding: 10px;
    padding-top: 0px;
    margin: 50px;
    margin-left: 50px;
    margin-right: 0;
    border-top-left-radius: 69px;
    border-bottom-left-radius: 50px;
    height: 171px;
    margin-bottom: -27px;
            
            
        }

            .gContainer span {
               margin-left:10px;
                color:white;
                font-family:'OpenS';
                font-size:40px;
                font-weight:bold;                
                text-transform:uppercase;
            }

body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    background-color: white;
    overflow: auto;
    overflow-x:hidden;
}

        #logo {
width: 171px;
    height: 87px;
    margin: 19px;
    margin-bottom: 10px;
    margin-bottom: 9px;
    display: inline-block;
        }

        #title {
    position: absolute;
    top: 8px;
    left: 93px;
    font-family: 'OpenS';
    color: darkslateblue;
    font-size: 25px;
    display: inline-block;
    text-transform: uppercase;
    font-weight: bold;
        }

#hr {
position: absolute;
    background-color: white;
    width: Calc(100% - 130px);
    height: 1px;
    top: 57px;
    right: 0px;
}

.line {
    width: Calc(100% - 170px);
    height: 132px;
    background-color: white;
    margin-top: -154px;
    margin-left: 162px;
    border-radius: 5px;
    padding: 10px;
}

#info {
                position:absolute;
            top:18px;
            right:10px;
           font-family:'OpenS';
           color:white;
}

    #info tr td {
        padding-right:20px;
    }

    #info tr td:first-child {
        font-weight:bold;
        text-transform:uppercase;
        
    }

.icon {
    width:30px;
    height:30px;

    margin-left:150px;
}

        .mgauge {
            width:200px;
            height:200px;            
            box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
            background-color:white;
            border-radius:50%;
            margin-bottom:10px;
            padding:20px;
            margin:10px;
            border:0.5px solid white;
        }

                .mgContainer {            
    /*border: 1px solid lightgray;*/
        
        /*margin-top:10px;*/
        margin-bottom:10px;
    height:0px;
    width:0px;
    transform: translate(11px, -254px);
    
    
    
    
    /*box-shadow: 5px 5px 5px rgba(0,0,0,0.4);*/
}




            
            
        

            .mgContainer div {
                
               margin:10px;
                color:orange;
                font-family:'OpenS';
                font-size:24px;
                font-weight:bold;                
                text-transform:uppercase;
                margin-bottom:10px;
                    margin-top: -35px;
    margin-left: 40px;
            }

            .micon {
    width:20px;
    height:20px;
    margin:10px;

    
}

            #minfo {
           font-family:'OpenS';
           color:white;
}

    #minfo tr td {
        padding-right:20px;
    }

    #minfo tr td:first-child {
        font-weight:bold;
        text-transform:uppercase;
        
    }


#tblFunctions button {
    background-color: white;
    border-radius:50%;
    margin:5px;
    margin-bottom:0px;
    padding:10px;
    border: 1px solid black;
    /*box-shadow: inset -2px 2px 2px rgba(0,0,0,0.5);*/
    transition:all ease-in-out .5s;
    outline:none;
    cursor:pointer;
}

#tblFunctions button:disabled {
    opacity:0.5;
    cursor:default;
}

#tblFunctions button:hover {
    box-shadow: inset 0px 0px 2px rgba(0,0,0,0.5);    
}

#tblFunctions button:hover > img {
    transform:scale(1.1);    
}

#tblFunctions button:disabled:hover > img {
    transform:scale(1.0);    
}



#tblFunctions button:active > img {
    transform:scale(1.1);    
}

@keyframes fadeIn { 
  from { opacity: 0; } 
}

.animate-flicker {
    animation: fadeIn 1s infinite alternate;
}


        .counter {
            
    width: 300px;
    overflow: hidden;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    background-color: black;
    border-radius: 5px;
    margin-bottom: 10px;
    color: white;
    font-family: monospace;
    font-size: 48px;
    font-weight: bold;
    letter-spacing: 20px;
    line-height: 112px;
    text-align: center;
    margin-top: 60px;
        }

.dialogNote {
    position: fixed;
    width: 100vw;
    height: auto;
    bottom: 0;
    z-index: 1001;
    background-color: rgba(0,0,0,0.8);
}

.dialogNoteBody {
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: "OpenS";
    font-size: 16px;
    font-weight: normal;
    color: white;
    opacity: 1;
}

  .dialog {
             position: absolute;
             width: 100vw;
             height: 100vh;
             top: 0;
             left: 0;
             background-color: rgba(255,255,255,0.7);             
             display: flex;
             flex-direction: column;
             justify-content: space-around;
             z-index:1001;
         }

.dialogMessage {
    display: flex;
    width: 100vw;
    height: auto;
    flex-direction: row;
    justify-content: space-around;
    background-color: rgba(79,158,239,0.9);
}

         .dialogContainer {
             display:flex;
             flex-direction:column;
             justify-content:space-around;
             max-width:330px;
         }


         .dialogHeading {
             margin-top:20px;
             font-family:"OpenS";
             font-size:24px;
             font-weight:bold;
             color:white;
             opacity:1;
         }

         .dialogBody {
             margin-top:20px;
             font-family:"OpenS";
             font-size:16px;
             font-weight:normal;
             color:white;
             opacity:1;
              
         }

         .dialogButtonContainer {
             max-width:400px;
             margin-top:20px;
             margin-bottom:20px
         }



         .dialogButton {
             background-color:white;
             color:orange;
             height:30px;
             font-family:"OpenS";
             border:none;
             padding-left:20px;
             padding-right:20px;
             margin-right:20px;
             text-transform:uppercase;
             transition:all linear 0.2s;
         }

             .dialogButton:hover {
                 opacity:0.5;
             }


.wait {
    cursor: wait;
    opacity:0;
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    z-index: 1000;
    background-color: rgba(255,255,255,0);
    transition:all ease-in-out 1s;
    pointer-events:none;
}

.waitshow {
    opacity:1;
}

.lock {
    display:none;
    cursor: wait;    
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    z-index: 1001;
    background-color:transparent;
}

.lds-spinner {
  color: official;
  display: inline-block;
  position: absolute;
  width: 64px;
  height: 64px;
      top: Calc(50% - 32px);
    left: Calc(50% - 32px);
}
.lds-spinner div {
  transform-origin: 32px 32px;
  animation: lds-spinner 1.2s linear infinite;
}
    .lds-spinner div:after {
        content: " ";
        display: block;
        position: absolute;
        top: 3px;
        left: 29px;
        width: 5px;
        height: 14px;
        border-radius: 20%;
        background: rgba(0,0,0,0.5);
    }
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


.dark-spinner {
    color: official;
    display: inline-block;
    position: absolute;
    width: 64px;
    height: 64px;
    top: Calc(50% - 32px);
    left: Calc(50% - 32px);
}
.dark-spinner div {
    transform-origin: 32px 32px;
    animation: dark-spinner 1.2s linear infinite;
}

    .dark-spinner div:after {
        content: " ";
        display: block;
        position: absolute;
        top: 3px;
        left: 29px;
        width: 5px;
        height: 14px;
        border-radius: 20%;
        background: black;
    }

    .dark-spinner div:nth-child(1) {
        transform: rotate(0deg);
        animation-delay: -1.1s;
    }

    .dark-spinner div:nth-child(2) {
        transform: rotate(30deg);
        animation-delay: -1s;
    }

    .dark-spinner div:nth-child(3) {
        transform: rotate(60deg);
        animation-delay: -0.9s;
    }

    .dark-spinner div:nth-child(4) {
        transform: rotate(90deg);
        animation-delay: -0.8s;
    }

    .dark-spinner div:nth-child(5) {
        transform: rotate(120deg);
        animation-delay: -0.7s;
    }

    .dark-spinner div:nth-child(6) {
        transform: rotate(150deg);
        animation-delay: -0.6s;
    }

    .dark-spinner div:nth-child(7) {
        transform: rotate(180deg);
        animation-delay: -0.5s;
    }

    .dark-spinner div:nth-child(8) {
        transform: rotate(210deg);
        animation-delay: -0.4s;
    }

    .dark-spinner div:nth-child(9) {
        transform: rotate(240deg);
        animation-delay: -0.3s;
    }

    .dark-spinner div:nth-child(10) {
        transform: rotate(270deg);
        animation-delay: -0.2s;
    }

    .dark-spinner div:nth-child(11) {
        transform: rotate(300deg);
        animation-delay: -0.1s;
    }

    .dark-spinner div:nth-child(12) {
        transform: rotate(330deg);
        animation-delay: 0s;
    }

@keyframes dark-spinner {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

            .spacer {
                width:0px;
                height:90px;
                display:flex;
            }

.grid {
    width: 100%;
    table-layout: auto;
    border: 0;
}

    .grid tr th {
        font-family: 'OpenS';
        font-size: 12px;
        color: white;
        background-color: #2B3640;
        padding: 5px;
        border: none;
        height:50px;
        min-height:50px;
        z-index:1;
    }

    .grid tr td {
        padding: 5px;
        font-family: 'OpenS';
        font-size: 12px;        
        transition: all linear 0.1s;
        text-align: center;
        border: 0px solid lightgray;
        border-bottom: 1px solid lightgray;
    }
    
        .grid tr td:nth-child(1) {
            border-right: 0px solid white;
        }

        .grid tr td:nth-child(2) {
            max-width: 50px;
            border-left: 0px solid white;
            border-right: 0px solid white;
        }

.imgButton {
    border: 0;
    display: block;
    vertical-align: middle;
    line-height: 43px;
    height: 45px;
    width: 45px;
    min-width: 50px;
    font-size: 24px;
    background-color: transparent;
    font-weight: bold;
    color: #ff6600;
    background-image: url(../images/hexagon.svg);
    background-size: 40px;
    background-position: 0;
    background-repeat: no-repeat;
    transition: all linear 0.2s;
    outline: none;
    cursor: pointer !important;
}

    .imgButton img {
        width: 34px;
        height: 30px;
    }

    .imgButton:hover {
        opacity: 0.7;
        cursor: pointer;
    }

    .imgButton:disabled {
        opacity:0.2;
        cursor:default;
    }

.imgButtonTicket {
    background-image: url(../images/ticket.svg?v4) !important;
}


.imgButtonFile {
    background-image: url(../images/file.svg?v4);
}

.imgButtonGPS {
    background-image: url(../images/gps.svg?v4) !important;
}

.imgButtonEvents {
    background-image: url(../images/event.svg?v5) !important;
}



.imgButtonDelete {
    background-image: url(../images/delete.svg?v4);
}

.imgButtonCmp {
    background-image: url(../images/cmp.svg?v4);
}

.imgButtonAdd {
    background-image: url(../images/add.svg?v5);
}

.imgButtonEdit {
    background-image: url(../images/edit.svg?v5);
    margin-left: 5px;
}


.imgButtonMore {
    background-image: url(../images/more.svg?v5);
}

.imgButtonFAN {
    background-image: url(../images/FAN.svg?v6);
}

.imgButtonDN {
    background-image: url(../images/DN.svg?v6);
}



.imgButtonBOL {
    background-image: url(../images/BOL.svg?v7);
}

.imgButtonHistory {
    background-image: url(../images/History.svg);
}



.imgButtonInfo {
    background-image: url(../images/Info.svg) !important;
}





.selected td {
    background-color: yellow !important;
}

.toolbar {
    width: 100%;
    background-color: lightgray;
    height: auto;
    overflow: hidden;
    display: flex;
}

.toolbtn {
    height: 90px;
    width: 70px;
    border: 0;
    border-right: 1px solid transparent;
    background-color: transparent;
    color: white;
    font-family: 'OpenS';
    font-size: 10px;
    outline: none;
    padding: 0;
    padding-top: 50px;
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center,center;
    background-position-y: 20px;
    cursor: pointer;
    transition: all linear 0.2s;
}





    .toolbtn:hover {
        color: #4d4d4d;
        background-color: rgba(169, 169, 169, 1);
    }



    .toolbtn:disabled:hover {
        cursor: default;
        background-color: lightgray;
    }

    .toolbtn:disabled {
        opacity:0.4;
    }



.toolbtnActive {
    color: #4d4d4d;
    background-color: rgba(169, 169, 169, 1);
}
.toolbtnSecondary:hover {
     
     transform:scale(1.1);

}






.tblApply {
    background-image: url(../images/apply.svg);
    border: 0;
    color: #4d4d4d;
}

.tblReset {
    background-image: url(../images/undo.svg);
    border: 0;
    color: #4d4d4d;
}

.tblFind {
    background-image: url(../images/find.svg);
    border: 0;
    color: #4d4d4d;
}

.alarm_off {
    background-image: url(../images/alarm_off.svg);
    border: 0;
    background-size: 30px;
    background-repeat: no-repeat;
    height:30px;
    width:30px;
}

.alarm_on {
    background-image: url(../images/alarm_on.svg);
    border: 0;
    background-size: 30px;
    background-repeat: no-repeat;
    height: 30px;
    width: 30px;
}

.tblAlarm {
    background-image: url(../images/alarm.svg);
    border: 0;
    color: #4d4d4d;
}

.tblTruck {
    background-image: url(../images/truck.svg?v2);
    border: 0;
    color: #4d4d4d;
}

.tblComps {
    background-image: url(../images/comp.svg);
    border: 0;
    color: #4d4d4d;
}

.tblProduct {
    background-image: url(../images/barrel.svg);
    border: 0;
    color: #4d4d4d;
}

.tblPDF {
    background-image: url(../images/pdf.svg?v2);
    border: 0;
    color: #4d4d4d;
}

.tblExcel {
    background-image: url(../images/xls.svg?v2);
    border: 0;
    color: #4d4d4d;
}

.tblAddUser {
    background-image: url(../images/adduser.svg?v2);
    border: 0;
    color: #4d4d4d;
}

.tblDeleteUser {
    background-image: url(../images/deleteuser.svg?v2);
    border: 0;
    color: #4d4d4d;
}


.tblDate {
    background-image: url(../images/date.svg);
}

    .tblDate:disabled {
        background-image: url(../images/date_d.svg?v3);
        color: #999999;
        cursor: default;
    }

.tblSearch {
    background-image: url(../images/search.svg);
}

    .tblSearch:disabled {
        background-image: url(../images/search_d.svg?v3);
        color: #999999;
        cursor: default;
    }

.tblHelp {
    background-image: url(../images/help.svg);
}

    .tblHelp:disabled {
        background-image: url(../images/help_d.svg?v3);
        color: #999999;
        cursor: default;
    }

.tblFilter {
    background-image: url(../images/filter.svg);
}

.tblUpload {
    background-image: url(../images/upload.svg);
}

    .tblFilter:disabled {
        background-image: url(../images/filter_d.svg?v3);
        color: #999999;
        cursor: default;
    }

.tblHome {
    background-image: url(../images/home.svg);
}

    .tblHome:disabled {
        background-image: url(../images/home_d.svg?v3);
        color: #999999;
        cursor: default;
    }

.toolbtnExpanded {
    width: 250px;
    padding-left: 180px;
    background-position-x: 200px;
}

.tblScanPOD {
    background-image: url(../images/scanpod.svg);
    color: #4d4d4d;
}

.tblUploadPOD {
    background-image: url(../images/uploadpod.svg);
    color: #4d4d4d;
}

.tblConfig {
    background-image: url(../images/config.svg);
}

    .tblConfig:disabled {
        background-image: url(../images/config_d.svg?v3);
        color: #999999;
        cursor: default;
    }

.tblOption {
    background-image: url(../images/option.svg?v4);
}

    .tblOption:disabled {
        background-image: url(../images/option.svg?v4);
        color: #999999;
        cursor: default;
    }

.tblExport {
    background-image: url(../images/Export.svg);
}

    .tblExport:disabled {
        background-image: url(../images/Export_d.svg?v3);
        color: #999999;
        cursor: default;
    }

.tblConfirm {
    background-image: url(../images/confirm.svg);
}

    .tblConfirm:disabled {
        background-image: url(../images/confirm_d.svg?v3);
        color: #999999;
        cursor: default;
    }

.tblSaveC {
    background-image: url(../images/save_c.svg);
}

    .tblSaveC:disabled {
        background-image: url(../images/save_c_d.svg?v3);
        color: #999999;
        cursor: default;
    }

.tblBack {
    background-image: url(../images/back.svg?v1);
}

.tblRefresh {
    background-image: url(../images/refresh.svg?v1);
}

    .tblRefresh:disabled {
        background-image: url(../images/refresh_d.svg?v3);
        color: #999999;
        cursor: default;
    }

.tblSave {
    background-image: url(../images/Save.svg?v5);
    color: #4d4d4d;
}

.tblNew {
    background-image: url(../images/New.svg?v2);
    border: 0;
    color: #4d4d4d;
}

.tblCancel {
    background-image: url(../images/Cancel.svg?v4);
    border: 0;
    color: #4d4d4d;
}

.tblGoBack {
    background-image: url(../images/GoBack.svg?);
    border: 0;
    color: #4d4d4d;
}

.tblLocation {
    background-image: url(../images/location.svg?v3);
    color: #4d4d4d;
}

.tblCarrier {
    background-image: url(../images/company.svg?v5);
    color: #4d4d4d;
}

.tblUser {
    background-image: url(../images/User.svg?v3);
    color: #4d4d4d;
}

.input {
    border: 0px;
    border-radius: 4px;
    margin: 5px;
    font-family: 'OpenS';
    font-size: 16px;
    padding: 5px;
}

    .input:disabled {
        background-color: gray;
        color: lightgray;
    }

.dropdown {
    border: 0px;
    border-radius: 4px;
    margin: 5px;
    font-family: 'OpenS';
    font-size: 16px;
    padding: 5px;
}

    .dropdown:disabled {
        background-color: gray;
        color: lightgray;
    }

.item {
    display: flex;
}

    .item div {
        font-family: 'OpenS';
        font-size: 12px;
        color: #4d4d4d;
        width: 140px;
        padding: 10px;
        text-align: right;
    }

.menu {
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    background-color: rgba(210,210,210, 1);
    max-width:600px;
    width:100%;
}

.selected td {
    background-color: yellow !important;
}

.textButton {
    width: 100%;    
    font-family: 'OpenS';
    background-image: linear-gradient(to bottom left, #fac43e, #e94a45);
    border: 0;
    height: 30px;
    transition: all linear 1s;
    width:140px;
    border-radius:5px;
    cursor:pointer;
}

    .textButton:hover {        
        background-image: linear-gradient(to left, #fac43e, #e94a45);
    }

    .textButton:disabled {
        pointer-events: none;
        background-image: linear-gradient(to bottom left, gray, darkgray);
        color: lightgray;
    }

.grid tr:hover > td {
    /*background-color: orange;*/
}

.grid input {
    border:1px solid darkgray;
}

.grid select {
    border: 1px solid darkgray;
}

.menubar {
    width:100%;
    background-color:darkgray;
    display:flex;
}

.mainHeader {
    font-family: 'OpenS';
    font-size: 12px;
    color: white;
    background-color: #2B3640;
    padding: 5px;
    border: none;
    width: 100%;
    height: 40px;
    font-weight: bold;
    padding-left: 10px;
    line-height: 40px;
}

.gridHeader {
    position:fixed;
    top:0;
    font-family: 'OpenS';
    font-size: 12px;
    color: white;
    background-color: gray;
    padding: 5px;
    border: none;
    width: 100%;
    height: 40px;
    font-weight: bold;
    padding-left: 10px;
    line-height: 40px;
}

.gridSubHeader {
    
    
    font-family: 'OpenS';
    font-size: 12px;
    color: white;
    background-color: gray;
    padding: 5px;
    border: none;
    width: 100%;
    height: 40px;
    font-weight: bold;
    padding-left: 10px;
    line-height: 40px;
}

.detailHeader {
    font-family: 'OpenS';
    font-size: 12px;
    color: white;
    background-color: #2B3640;
    padding: 5px;
    border: none;
    width: 100%;
    height: 40px;
    font-weight: bold;
    padding-left: 10px;
    line-height: 40px;
}

.appIcon {

    padding-top: 10px;
    fill: #4d4d4d;
    stroke: #4d4d4d;
    width: 30px;
    height: 26px;
}

    .appIconContainer {
        background-color: lightgray;
        border-radius: 50%;
        height:46px;
        width:46px;
    }



    .appIcon path {
        fill: #4d4d4d !important;
    }

.leftGrid tr td:last-child {
    width:100%;
}

.leftGrid tr td {
    /*padding-right:50px;*/
}

.leftGrid tr th {
    /*padding-right: 50px;*/
}

.spacer {
    width: 0px;
    height: 90px;
    display: flex;
}

.loginBackground {
    background-color: #4F9EEE;
    background-image: url('../images/X.svg');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 100vh;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.dmexHeader {
    position: fixed;
    top: 0px;
    width: 100vw;
    z-index: 102;
    background-color: #4F9EEE;
    height: 100px;
    transition: all cubic-bezier(.83,2.04,.5,.55) 1s;
    transition-delay: 1s;
    margin-top: -22px;
}



.dmexHeaderHidden {
    margin-top: -190px;
}

.dmexHeaderToolBand {
    position: fixed;
    top: 0px;
    width: 100vw;
    z-index: 100;
    background-color: lightgray;
    height: 178px;
    transition: margin-top cubic-bezier(.83,2.04,.5,.55) 1s;
    transition-delay: 1s;
    margin-top: -10px;
}

.dmexHeaderToolBandHidden {
    margin-top: -178px;
}

.dmexHeaderToolBandMobile {
    height: 156px;
}

.sponLogoSlant {
    height: 100px;
    position: absolute;
    right: -40px;
    top: 0px;
    cursor: default;
    transition: all ease-in-out 1s;
    transition-delay: 2s;
    z-index:10;
}

.sponLogo {
    height: 50px;
    width: 50px;
    object-fit: contain;
    position: absolute;
    right: 10px;
    top: 36px;
    cursor: pointer;
    transition: all ease-in-out 1s;
    transition-delay: 2s;
    z-index:11;
}

.sponsorHidden {
    right: -140px;
}


.custLogoSlant {
    height: 100px;
    position: absolute;
    left: -140px;
    top: 0px;
    cursor: default;
    background-image: linear-gradient(to left, transparent 50%, white 50%);
    transition: all ease-in-out 1s;
    transition-delay: 2s;
    pointer-events:none;
}

.custLogo {
    position: absolute;
    height: 50px;
    width: 50px;
    left: -140px;
    top: 36px;
    cursor: default;
    transition: all ease-in-out 1s;
    object-fit: contain;
    transition-delay: 2s;
    z-index:100;
}

.custLogoShow {
    left: 12px;
}

.custLogoSlantShow {
    left: -28px;
}

.bigCustLogo {
    height: 140px;
    width: 140px;
    position: absolute;
    left: 15px;
    top: 34px;
    cursor: default;
    object-fit: contain;
}



.bigCustLogoSlant {
    height: 192px;
    position: absolute;
    left: -300px;
    top: -2px;
    cursor: default;
    background-image: linear-gradient(to left, transparent 19%, white 19%);
    object-fit: contain;
}

.bigCustLogoSlantShow {
    left:-19px;
}



.athLogo {
    height: 37px;
    position: absolute;
    right: 90px;
    top: 42px;
    cursor: pointer ;
    transition: all ease-in-out 1s;
    object-fit: contain;
    transition-delay: 3s;
}

.athLogoHidden {
    margin-right: -145px;
}

.dmexBody {
    z-index: 101;
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: 78px;
    overflow: hidden;    
    background-color:white;
}

.hideRight {
    transform: translateX(100vw);
}

.hideLeft {
    transform: translateX(-100vw);
}

.nodelay {
    transition-delay:0s !important;
}

.transition {
    transition: all ease-in-out 1s;
}

.notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.condenseToolbar {
    /*height : 68px;*/
}

.condenseToolbtn {
    width: 65px;
    height: 68px;
    color: transparent !important;
}

.slidebarToolbtnOffset {
    background-position-y: 18px;
}

.fleetWidget {
    background-image: url(../images/fleet.svg);
    background-repeat: no-repeat;
    background-size: 30px, 30px;
    background-position: 32px 28px;
    position: absolute;
    background-color: white;
    top: 10px;
    left: 46px;
    width: 300px;
    height: auto;
    padding: 30px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    z-index: 1000;
    transition: all ease-in-out 0.25s;
    pointer-events: all;
    border-radius:5px;
}

.fleetStatusWidget {
    background-image: url(../images/fleetstatus.svg?v2);
    background-repeat: no-repeat;
    background-size: 30px, 30px;
    background-position: 32px 28px;
    position: absolute;
    background-color: white;
    top: 34px;
    right: 10px;
    width: 250px;
    height: auto;
    padding: 30px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    z-index: 1000;
    transition: all ease-in-out 0.25s;
    pointer-events: all;
    border-radius: 5px;
}

.tripWidget {
    background-image: url(../images/fleettrip.svg?v3);
    background-repeat: no-repeat;
    background-size: 30px, 30px;
    background-position: 32px 28px;
    position: absolute;
    background-color: white;
    top: 280px;
    right: 10px;
    width: 300px;
    height: auto;
    padding: 30px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    z-index: 1000;
    transition: all ease-in-out 0.25s;
    pointer-events: all;
    border-radius: 5px;
}

.summaryWidget {
    background-image: url(../images/shiftsummary.svg?v2);
    background-repeat: no-repeat;
    background-size: 30px, 30px;
    background-position: 32px 28px;
    position: absolute;
    background-color: white;
    top: 114px;
    right: 10px;
    width: 300px;
    height: 343px;
    padding: 30px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    z-index: 1000;
    transition: all ease-in-out 0.25s;
    pointer-events: all;
    border-radius: 5px;
}

.statusWidget {
    background-image: url(../images/vehiclestatus.svg);
    background-repeat: no-repeat;
    background-size: 30px, 30px;
    background-position: 32px 28px;
    position: absolute;
    background-color: white;
    bottom: 10px;
    left: 10px;
    width: 300px;
    height: auto;
    padding: 30px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    z-index: 1000;
    transition: all ease-in-out 0.25s;
    border-radius: 5px;
}

.widgetButton {
    overflow: hidden;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50%;    
    background-repeat: no-repeat;
    background-size: 30px, 30px;
    background-position: 20px, 25px;
    padding: 25px;
    z-index:999;
    cursor:pointer;
}

    .widgetButton > div {
        opacity: 0;
    }


.mobileWidget {
    top: 67px;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    z-index: 1001;
    border-radius: 0;
}

.mobileWidget div:first-child {
    width: Calc(100% - 60px);
}

.mobileWidgetUpper {
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    z-index: 1001;
    border-radius:0;
}

    .mobileWidgetUpper div:first-child {
        width: Calc(100% - 60px);
    }



.roundCell {
    font-family: 'OpenS';
    font-size: 16px;
    font-weight: bold;
    border-radius: 50px;
    text-align: center;
    padding: 10px;
}

.titleCell {
    font-family: 'OpenS';
    font-size: 10px;
    font-weight: normal;
    text-align:center;
    max-width:20px;
    
}

.fleetExpanded {
    top: 281px;
}

.retroshadow {
    color: #2c2c2c;    
    letter-spacing: 0.05em;
    text-shadow: 1px 1px 0px white, 2px 2px 0px rgba(0, 0, 0, 0.2);
}



.elegantshadow {
    color: #131313;
    background-color: #e7e5e4;
    letter-spacing: 0.15em;
    text-shadow: 1px -1px 0 #767676, -1px 2px 1px #737272, -2px 4px 1px #767474, -3px 6px 1px #787777, -4px 8px 1px #7b7a7a, -5px 10px 1px #7f7d7d, -6px 12px 1px #828181, -7px 14px 1px #868585, -8px 16px 1px #8b8a89, -9px 18px 1px #8f8e8d, -10px 20px 1px #949392, -11px 22px 1px #999897, -12px 24px 1px #9e9c9c, -13px 26px 1px #a3a1a1, -14px 28px 1px #a8a6a6, -15px 30px 1px #adabab, -16px 32px 1px #b2b1b0, -17px 34px 1px #b7b6b5, -18px 36px 1px #bcbbba, -19px 38px 1px #c1bfbf, -20px 40px 1px #c6c4c4, -21px 42px 1px #cbc9c8, -22px 44px 1px #cfcdcd, -23px 46px 1px #d4d2d1, -24px 48px 1px #d8d6d5, -25px 50px 1px #dbdad9, -26px 52px 1px #dfdddc, -27px 54px 1px #e2e0df, -28px 56px 1px #e4e3e2;
}

.markerVehicleStatusUnknown {
    background-color: darkgray;
}

.markerVehicleStatusLoading {
    background-color: lawngreen;
}

.markerVehicleStatusLoaded {
    background-color: forestgreen;
}

.markerVehicleStatusEnRoute {
    background: hotpink;
}

.markerVehicleStatusDelivering {
    background-color: dodgerblue;
}

.markerVehicleStatusReturning {
    background-color: #ffe000;
}

.markerVehicleStatusOutOfService {
    background-color: darkslategray;
}

.markerVehicleStatusOutOfDate {
    background-color: darkred;
}

.markerVehicleStatusParked {
    background-color: lightskyblue;
}

.marker {
    transition: fill ease-in-out 0.5s;
}

.markerUnknown {
    fill: darkgray;
}

.markerLoading {
    fill: lawngreen;
}

.markerLoaded {
    fill: forestgreen;
}

.markerEnRoute {
    fill: hotpink;
}

.markerDelivering {
    fill: dodgerblue;
}

.markerReturning {
    fill: #ffe000;
}

.markerOutOfService {
    fill: darkslategray;
}

.markerOutOfDate {
    fill: darkred;
}

.markerParked {
    fill: lightskyblue;
}

.colorBox {
    width: 15px !important;
    height: 15px;
    border-radius: 2px;
    margin-left: 15px;
}

.colorMarker {
    border: none;
    background-color: transparent;
    background-image: url(../images/colorMarker.svg);
    background-size: 40px;
    background-repeat: no-repeat;
    height: 40px;
    width: 40px;
    float: right;
    transform: translate(10px, -8px);
    cursor: pointer;
    outline:none;
    
}

    .colorMarker[notactive] {
        background-image: url(../images/colormarkerdisabled.svg);
        opacity:0.8;
    }


    .colorMarker:active {
        transform: translate(11px, -9px);
    }

    .colorMarker:hover {
        opacity:0.8;
    }

    .colorMarker[notactive]:hover {
        opacity: 1;
    }

.summaryCell {
    border-radius: 50px;    
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
    transition:all ease-in-out 0.2s;
}

.summaryCell > a{
    pointer-events:none;
}

.scGreen {
    background-color: lightgreen;
}

    .scGreen:hover {
        background-color: springgreen;
    }

.scRed {
    background-color: salmon;
}

    .scRed:hover {
        background-color: lightsalmon;
    }

.scOrange {
    background-color: orange;
}
    .scOrange:hover {
        background-color: coral;
    }


.mobileCard {
    box-shadow:none !important;
}

.nextCard {
    position: absolute;
    top: 50%;
    width: 45px;
    height: 45px;
    right: 10px;
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    border-radius: 50%;
    z-index: 1005;
    display: table-cell;
    align-content: center;
    vertical-align: middle;
    background-image: url(../images/arrowNext.svg?v2);
    background-size: 25px;
    background-position:center center;
    background-repeat: no-repeat;
    cursor:pointer;
}

.prevCard {
    position: absolute;
    top: 50%;
    width: 45px;
    height: 45px;
    left: 10px;
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    border-radius: 50%;
    z-index: 1005;
    display: table-cell;
    align-content: center;
    vertical-align: middle;
    background-image: url(../images/arrowNext.svg?v2);
    background-size: 25px;
    background-position: center center;
    background-repeat: no-repeat;
    transform: scaleX(-1);
    cursor: pointer;
}
.waterfallchart {
    border-collapse: collapse;
    width: 345px;
    height: 200px;
    font-family: 'OpenS';
    font-size: 8px;
    padding-right:20px;
}

    .waterfallchart td {
        border: 0px solid black;
        text-align: center;
        vertical-align: bottom;
        border-left: 1px dashed lightgray;
    }

        .waterfallchart td:last-child {
            border-right: 1px solid lightgray;
        }

    .waterfallchart tr:last-child td {
        height: 20px;        
    }

    .waterfallchart tr td:last-child {
        background-color: rgb(240,240,240);
    }

    .waterfallchart tr td:last-child div.bar {
        background-color: darkorange !important;
    }

.bar {
    width: 100%;
    box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.20);
}

.bar:hover {
    opacity:0.8;
}

.barSpace {
    width: 100%;
    transition: all ease-in-out 1s;
}

.barSpaceFlat {
    height:0 !important;
}

.bGreen {
    background-color: lightgreen;
}

.bRed {
    background-color: lightcoral;
}

.gridline td {
    border-top: 0px solid lightgray;
    height: 5px;
}

.gridLabel {
    font-size: 14px;
    font-weight:bold;
}

.gridValueLabel {
    font-size: 7px;
    transform: translateY(-14px) scale(2.0) rotate(-90deg);
    background-color: beige;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    width:35px;
}

.gridSpacer {
    opacity: 0;
    font-size:6px;
}

.loadLine {
    height: 16px;
    width: 400px;
    font-family: 'OpenS';
    font-size: 14px;
    border-bottom: 1px solid limegreen;
    margin-top: 4px;
    margin-bottom: 4px;
    
}
.bottomLine {
    height: 16px;
    width: 400px;
    font-family: 'OpenS';
    font-size: 14px;
    border-bottom: 1px solid orangered;
    margin-top: 4px;
    margin-bottom: 4px;
    
}

.userbarContainer {
    position: absolute;
    top: 140px;
    height: 70px;
    right: 0px;
    width: 300px;
    overflow: hidden;
    z-index: 1000;
    pointer-events: none;
    padding-left: 30px;
}



.userbarContainerMobile {
    top: 121px;
}

.userbarContainerHidden > .userbar {
    transform: translateX(302px);
}



.userbarContent {
    width: 250px;
    height: 53px;
    font-family: OpenS;
    font-size: 10px;
    background-color: rgba(235,235,235);
    background-image: linear-gradient(rgba(235,235,235));
    color: dimgray;
    font-weight: bold;
    font-size: 12px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    clip-path: polygon(12px 0%, 100% 0%, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(12px 0%, 100% 0%, 100% 100%, 0% 100%);
    text-transform: uppercase;
    letter-spacing: 4px;
    transition: all ease-in-out 1s;
    cursor: pointer;
    pointer-events: all;
    box-shadow: 5px 2px 2px rgba(0,0,0,0.3);
}

.userbar {
    display: flex;
    width: 250px;
    height: 53px;
    font-family: OpenS;
    font-size: 10px;
    background-color: transparent;
    color: dimgray;
    font-weight: bold;
    font-size: 12px;
    width: 250px;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 4px;
    transition: all cubic-bezier(.83,2.04,.5,.55) 1s;
    cursor: pointer;
    pointer-events: all;
    box-shadow: 5px 2px 2px rgba(0,0,0,0.3);
    transform: translateX(107px);
}

.userbarMinimize {
    transform: translateX(248px);
}


.userLogo {
    background-image: url(../images/User.svg?v3);
    width: 30px;
    height: 30px;
    background-size: 30px 30px;
    margin-left: 12px;
    margin-right: 10px;
    margin-top: -38px;
}

.userTable td {
    padding:0;
    table-layout:fixed;
}

.userSubTable {
    transform: translateY(-46px);
    transition: all ease-in-out 0.5s;
}

.userSubTable:hover {
    transform:translateY(0px);
}

.noaccesslabel {
    font-family: OpenS;
    font-size: 10px;
    color:dimgray;
}




.dmbutton {
    width: 100%;
    margin-top: 10px;
    font-family: 'OpenS';
    background-image: linear-gradient(to bottom left, #fac43e, #e94a45);
    border: 0;
    height: 30px;
    transition: all linear 1s;
    border-radius: 5px;
}

    .dmbutton:disabled {
        font-family: 'OpenS';
        background-image:none;
        background-color: lightgray;
        color: darkgray;
        border: 0;
        padding: 3px;
    }

.dmbutton:hover {
    background-image: linear-gradient(to left, #fac43e, #e94a45);
}

    .dmbutton:disabled:hover {
        
        background-image: none;
        background-color: lightgray;
    }

.noformattable {
    border:0;
}

.noformattable tr td {
    border:0 !important;
    width:auto;
    max-width:auto;
    background-color:none !important;
}

.headerButton {
    border: 0;
    display: block;
    vertical-align: middle;
    line-height: 40px;
    height: 40px;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    border-radius:0px;
    font-size: 24px;
    background-color: #72B1F1;
    font-weight: bold;
    outline: none;
    cursor: pointer !important;
    transform: translate(30px, -10px);
    border-right: 1px solid #4F9EEE;
}

.headerButton:hover {
    border: 0;
    display: block;
    vertical-align: middle;
    line-height: 20px;
    height: 40px;
    width: 40px;
    min-width: 40px;
    font-size: 24px;
    background-color: lightgray;
    font-weight: bold;
    outline: none;
    cursor: pointer !important;
}

    .headerButton:focus {
        border: 0;
        display: block;
        vertical-align: middle;
        line-height: 20px;
        height: 40px;
        width: 40px;
        min-width: 40px;
        font-size: 24px;
        background-color: #73B2F2;
        font-weight: bold;
        outline: none;
        cursor: pointer !important;
    }

.headerButtonCustomers {
    
    display: block;
    vertical-align: middle;    
    font-weight: bold;
    color: #ff6600;
    background-image: url(../images/customer.svg?v2);
    background-size: 20px;
    background-position: 10px;
    background-repeat: no-repeat;
    transition: all linear 0.2s;
    outline: none;
    cursor: pointer !important;
}

.headerButtonDestinations {
    
    display: block;
    vertical-align: middle;            
    font-weight: bold;
    color: #ff6600;
    background-image: url(../images/destination.svg?v2);
    background-size: 20px;
    background-position: 10px;
    background-repeat: no-repeat;
    transition: all linear 0.2s;
    outline: none;
    cursor: pointer !important;
}

.headerButtonCheckAll {
    display: block;
    vertical-align: middle;
    font-weight: bold;
    color: #ff6600;
    background-image: url(../images/tickall.svg?v2);
    background-size: 20px;
    background-position: 10px;
    background-repeat: no-repeat;
    transition: all linear 0.2s;
    outline: none;
    cursor: pointer !important;
}

.headerButtonUnCheckAll {
    display: block;
    vertical-align: middle;
    font-weight: bold;
    color: #ff6600;
    background-image: url(../images/untickall.svg?v2);
    background-size: 20px;
    background-position: 10px;
    background-repeat: no-repeat;
    transition: all linear 0.2s;
    outline: none;
    cursor: pointer !important;
}

.headerButtonSaveUser {
    display: block;
    vertical-align: middle;
    font-weight: bold;
    color: #ff6600;
    background-image: url(../images/saveuser.svg);
    background-size: 20px;
    background-position: 10px;
    background-repeat: no-repeat;
    transition: all linear 0.2s;
    outline: none;
    cursor: pointer !important;
}

.headerButtonEmailUser {
    display: block;
    vertical-align: middle;
    font-weight: bold;
    color: #ff6600;
    background-image: url(../images/mail.svg);
    background-size: 20px;
    background-position: 10px;
    background-repeat: no-repeat;
    transition: all linear 0.2s;
    outline: none;
    cursor: pointer !important;
}

.headerButtonAdd {
    display: block;
    vertical-align: middle;
    font-weight: bold;
    color: #ff6600;
    background-image: url(../images/hAdd.svg);
    background-size: 20px;
    background-position: 10px;
    background-repeat: no-repeat;
    transition: all linear 0.2s;
    outline: none;
    cursor: pointer !important;
}

.headerButtonEdit {
    display: block;
    vertical-align: middle;
    font-weight: bold;
    color: #ff6600;
    background-image: url(../images/hEdit.svg);
    background-size: 20px;
    background-position: 10px;
    background-repeat: no-repeat;
    transition: all linear 0.2s;
    outline: none;
    cursor: pointer !important;
}

.headerButtonSave {
    display: block;
    vertical-align: middle;
    font-weight: bold;
    color: #ff6600;
    background-image: url(../images/hSave.svg);
    background-size: 20px;
    background-position: 10px;
    background-repeat: no-repeat;
    transition: all linear 0.2s;
    outline: none;
    cursor: pointer !important;
}

.headerButtonCancel {
    display: block;
    vertical-align: middle;
    font-weight: bold;
    color: #ff6600;
    background-image: url(../images/hCancel.svg);
    background-size: 20px;
    background-position: 10px;
    background-repeat: no-repeat;
    transition: all linear 0.2s;
    outline: none;
    cursor: pointer !important;
}