/* DEFAULTS
----------------------------------------------------------*/
html, body {
    height: 100%;
}

body {
    font-family: Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif !important;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
    margin: 0px;
    padding: 0px;
    color: #696969;
    font-size: 12px;
}

* {
    padding: 0;
    margin: 0;
}

a {
    border: none;
    text-decoration: none;
}

    a:link, a:visited {
        color: #034af3;
    }

    a:hover {
        color: #1d60ff;
        text-decoration: none;
        text-decoration: underline;
    }

img {
    border: none;
}

a:active {
    color: #034af3;
}

p {
    margin-bottom: 10px;
    line-height: 1.6em;
}


/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-size: 1.5em;
    /*font-variant: small-caps;*/
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1 {
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2 {
    font-size: 2em;
    font-weight: 600;
    color: #333;
}

h3 {
    font-size: 1.2em;
    color: White;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2 {
    margin-top: 0px;
}


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/
.page {
    /*width: 960px;*/
    background-color: #fff;
    margin: 1px auto 0px auto; /*border: 1px solid #496077;*/
    width: 100% !important;
}

.header {
    position: relative;
    margin: 0px;
    padding: 0px; /*background: #4b6c9e;*/
    background: #009933;
    width: 100%;
    height: 40px;
}

    .header h1 {
        font-weight: 700;
        margin: 0px;
        padding: 0px 0px 0px 20px;
        color: #f9f9f9;
        border: none;
        line-height: 2em;
        font-size: 2em;
    }

.main {
    padding: 0px; /*margin: 0px 8px 8px 8px;*/ /*min-height: 800px;*/
    height: 100%;
}

.leftCol {
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.footer {
    color: #4e5766;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}

/* TAB MENU   
----------------------------------------------------------*/

div.hideSkiplink {
    background-color: #3a4f63;
    width: 100%;
}

div.menu {
    padding: 0px;
}

    div.menu ul {
        list-style: none;
        margin: 20px;
        display: block;
        padding: 0px;
        width: auto;
    }

        div.menu ul li a, div.menu ul li a:visited {
            background-color: #465c71;
            border: 1px #4e667d solid;
            color: #dde4ec;
            display: block;
            line-height: 1.35em;
            padding: 0px;
            text-decoration: none;
            white-space: nowrap;
        }

            div.menu ul li a:hover {
                background-color: #bfcbd6;
                color: #465c71;
                text-decoration: none;
                cursor: pointer;
            }

            div.menu ul li a:active {
                background-color: #465c71;
                color: #cfdbe6;
                text-decoration: none;
            }

/* FORM ELEMENTS   
----------------------------------------------------------*/

fieldset {
    margin: 1em 0px;
    padding: 10px;
    border: 1px solid #ccc;
}

    fieldset p {
        margin: 2px 12px 10px 10px;
    }

    fieldset.login label, fieldset.register label, fieldset.changePassword label {
        display: block;
    }

    fieldset label.inline {
        display: inline;
    }

legend {
    font-size: 1.1em;
    font-weight: 600;
    padding: 0 4px 0 4px;
    margin: 0;
    width: auto;
}

input.textEntry {
    width: 320px;
    border: 1px solid #ccc;
}

input.passwordEntry {
    width: 320px;
    border: 1px solid #ccc;
}

div.accountInfo {
    width: 121%;
}

.accountInfo legend {
    font-size: 1.4em;
}

/* MISC  
----------------------------------------------------------*/

.clear {
    clear: both;
}

.title {
    display: block;
    float: left;
    text-align: left;
    width: auto;
}

.loginDisplay {
    font-size: 1.1em;
    display: block;
    text-align: right;
    padding: 0px;
    color: White;
}

    .loginDisplay a:link {
        color: white;
    }

    .loginDisplay a:visited {
        color: white;
    }

    .loginDisplay a:hover {
        color: white;
    }

.failureNotification {
    font-size: 1.2em;
    color: Red;
}

.bold {
    font-weight: bold;
}

.submitButton {
    text-align: right;
    padding-right: 10px;
}

.modalErrorMessagePopup {
    background-color: white;
    border-width: 3px;
    border-style: solid;
    border-color: Gray;
    padding: 3px;
    position: absolute;
    display: none;
    z-index: 1005;
}

/*********New Css***********/
.dqNewWeapper {
    /*padding: 0;
    margin: 0;
    width: 100%;*/
    padding: 0;
    margin: 0;
    width: 100%;
    position: relative;
    top: 72px;
}

.dqNewHeader, .sidebar-header {
    background: url(images/headerBg.png) repeat-x;
    padding: 8px 0;
    height: 50px;
    box-shadow: 0 3px 5px 0 rgba(0,0,0,.2);
}


.headerWrapper {
    /*width: 1360px;*/
    margin: 0 auto;
}

    .headerWrapper .companyLogo {
        padding: 0;
        margin: 0;
        /*float: left;*/
    }

        .headerWrapper .companyLogo img {
            float: left;
        }

        .headerWrapper .companyLogo h1 {
            float: left;
            color: #009933;
            margin: 30px 0 0 5px;
            text-align: left;
            font-size: 16px;
            color: #404040;
            font-weight: 400;
            text-transform: uppercase;
        }


    .headerWrapper .rgt-info {
        float: right;
        padding: 4px 0;
    }

        .headerWrapper .rgt-info .leftUserInfo {
            /*float: left;
            width: 400px;*/
            float: right;
        }

.ddaccount {
    width: 234px;
    float: left;
    margin: 0 10px 0 0;
}

.headerWrapper .rgt-info .rightGpsMsgbtn {
    float: right;
}

.fullScreenBtn {
    display: none;
}

    .headerWrapper .rgt-info .rightGpsMsgbtn a, .fullScreenBtn a {
        display: block;
        border-style: solid;
        background: #fff;
        border: solid 1px rgb(0, 148, 68);
        border-radius: 4px;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }

    .fullScreenBtn a {
        position: absolute;
        right: 9px;
        z-index: 999;
        top: 12px;
    }

#MicrosoftNav.topMarginMapNavigation {
    top: 5px !important;
}

#MicrosoftNav {
    /*top:54px !important;*/
    right: 6px !important;
}

.headerWrapper .rgt-info .leftUserInfo h4 {
    font-size: 16px;
    color: rgb(8, 113, 74);
    font-weight: 500;
    font-variant: normal;
    float: left;
    line-height: 24px;
}

    .headerWrapper .rgt-info .leftUserInfo h4.loginOnly {
        float: none;
        text-align: right;
        padding: 0;
    }

/****CSS For My Account Custome Drop Down ****/
.myaccount-dd {
    float: left;
    position: relative;
    width: 140px;
    margin: 0 14px;
    padding: 8px 65px 8px 12px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
    cursor: pointer;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    border: solid 1px rgb(0, 148, 68);
    font-size: 16px;
    color: #404040;
}

    .myaccount-dd:after { /* Little arrow */
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: 50%;
        right: 15px;
        margin-top: -3px;
        border-width: 6px 6px 0 6px;
        border-style: solid;
        border-color: #333 transparent;
    }

    .myaccount-dd .dropdown {
        /* Size & position */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        /* Styles */
        background: #fff;
        border-radius: 0 0 5px 5px;
        border: 1px solid rgba(0,0,0,0.2);
        border-top: none;
        border-bottom: none;
        list-style: none;
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        z-index: 9;
        /* Hiding */
        max-height: 0;
        overflow: hidden;
    }

        .myaccount-dd .dropdown li {
            padding: 0 10px;
        }

            .myaccount-dd .dropdown li a {
                display: block;
                text-decoration: none;
                color: #404040;
                padding: 10px 0;
                transition: all 0.3s ease-out;
                border-bottom: 1px solid #e6e8ea;
                font-size: 16px;
            }

            .myaccount-dd .dropdown li:last-of-type a {
                border: none;
            }

            .myaccount-dd .dropdown li i {
                margin-right: 5px;
                color: inherit;
                vertical-align: middle;
            }

            /* Hover state */

            .myaccount-dd .dropdown li:hover a {
                color: rgb(0, 153, 51);
            }

    /* Active state */

    .myaccount-dd.active {
        border-radius: 5px 5px 0 0;
        background: rgb(0, 153, 51);
        box-shadow: none;
        border-bottom: none;
        color: white;
    }

        .myaccount-dd.active:after {
            border-color: #333 transparent;
        }

        .myaccount-dd.active .dropdown {
            border-bottom: 1px solid rgba(0,0,0,0.2);
            max-height: 400px;
        }



.dqNewWeapper .masterTobBg {
    /* background-color:#00882a;*/
    text-align: center; /*padding:1px 0;*/
    color: #fff;
    font: bold 12px/25px Arial, Helvetica, sans-serif;
    width: 100%;
}

.masterTobBg .weclComeMsg {
    padding: 0;
    margin: 0 5px;
    text-align: center;
}

.masterTobBg .topRightMenu {
    float: right;
    margin: 0 10px;
    position: absolute;
    right: 0;
    text-align: right;
    top: 50px;
}

    .masterTobBg .topRightMenu a {
        color: #454545;
        font: normal 13px Arial, Helvetica, sans-serif;
        margin: 0 0 0 15px;
    }

        .masterTobBg .topRightMenu a:hover {
            text-decoration: none !important;
            color: #000 !important;
        }

        .masterTobBg .topRightMenu a img {
            vertical-align: middle;
            margin: 0 5px 0 0;
        }

.logOut {
    background: url(images/LogOut.png) no-repeat;
    background-position: 0;
    padding: 5px 0 5px 22px;
    vertical-align: middle;
}


/*******Left Navigation*********/
.navbar-btn {
    /*background: url(images/headerBg.png) repeat-x;*/
    background: rgba(227, 235, 232, 0.8);
    padding: 8px;
    /*height: 50px;*/
    box-shadow: 0 3px 5px 0 rgba(0,0,0,.2);
    position: absolute;
    left: 5px;
    margin: 0 !important;
    top: 5px;
    z-index: 999;
}

    .navbar-btn button {
        box-shadow: none;
        outline: none !important;
        border: none;
    }

.compnylogotext {
    overflow: hidden;
}

    .compnylogotext img {
        float: left;
    }

.navbar-btn h2 {
    float: left;
    font-variant: normal;
    line-height: inherit;
    font-size: 14px;
    font-weight: 400;
    padding: 0;
    margin: 32px 0 0 0;
}

.sidebar-header img {
    padding: 0 6px 0 8px;
    float: left;
    width: 86px;
    border-right: dashed 1px #ccc;
    margin-right: 7px;
}

.sidebar-header h4 {
    color: #404040;
    float: left;
    font-variant: normal;
    font-weight: 400;
    margin: 10px 0;
    padding: 0;
    font-size: 10px;
    text-transform: uppercase;
    width: 148px;
    overflow: hidden;
    height: 32px;
}

    .sidebar-header h4 span {
        display: block;
        text-transform: none;
        font-size: 18px;
        color: rgb(8, 113, 74);
    }

#sidebarCollapse, #dismiss {
    width: 40px;
    height: 40px;
    background: none;
    padding: 5px;
    z-index: 999999;
    margin-right: 10px;
    margin-top: 5px;
    float: left;
}

    #sidebarCollapse:hover span, #dismiss:hover span {
        background: #bd202e;
    }

    #sidebarCollapse span {
        width: 100%;
        height: 2px;
        margin: 0 auto;
        display: block;
        background: #096f49;
    }

        #sidebarCollapse span:nth-of-type(2), #sidebarCollapse span:last-of-type {
            margin: 8px auto 6px auto;
        }

    #sidebarCollapse.active span {
        transform: none;
        opacity: 1;
        margin: 5px auto;
    }

#dismiss {
    line-height: 35px;
    text-align: center;
    position: absolute;
    top: 18px;
    right: 0;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    margin: 5px 0 0 0;
}

    #dismiss span {
        width: 80%;
        height: 2px;
        margin: 0 auto;
        display: block;
        background: #040301;
        transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
        transition-delay: 0.2s;
    }

        #dismiss span:first-of-type {
            transform: rotate(45deg) translate(2px, 2px);
        }

        #dismiss span:nth-of-type(2) {
            opacity: 0;
        }

        #dismiss span:last-of-type {
            transform: rotate(-45deg) translate(1px, -1px);
        }

    #dismiss.active span {
        transform: none;
        opacity: 1;
        margin: 5px auto;
    }

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
    width: 300px;
    position: fixed;
    top: 0;
    left: -300px;
    height: 99.5vh;
    z-index: 9999999;
    background: #050505;
    color: #fff;
    transition: all 0.3s;
}

    #sidebar.active {
        left: 0;
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
    }

    #sidebar ul.components {
        padding: 0;
    }

    #sidebar ul p {
        color: #fff;
        padding: 10px;
    }

    #sidebar ul li {
        border-bottom: solid 1px #363636;
    }

        #sidebar ul li a {
            padding: 6px 8px;
            font-size: 13px;
            font-weight: 400;
            display: block;
            color: #fff;
            position: relative;
            width: inherit;
            text-align: left;
        }

            #sidebar ul li a.icon-remove:before {
                padding-right: 5px;
            }

            #sidebar ul li a img {
                position: absolute;
                right: 10px;
                top: 10px;
            }

            #sidebar ul li a:hover {
                color: #fff;
                background: #0c8748;
                text-decoration: none;
            }

            #sidebar ul li a:focus {
                text-decoration: none;
            }

        #sidebar ul li.active > a, a[aria-expanded="true"] {
            color: #fff;
        }


a[data-toggle="collapse"] {
    position: relative;
}

/*a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
    content:url(images/arrow.png);
    display: block;
    position: absolute;
    right: 20px;
}
a[aria-expanded="true"]::before {
    content:url(images/backBtn.png);
}*/


ul ul a {
    /*font-size: 0.9em !important;*/
    padding-left: 14px !important;
    background: #181818;
    font-size: 12px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    font-size: 13px !important;
}

#sidebar ul li ul li {
    border: none;
}

.overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999;
    display: none;
    top: 0;
}



/**********Css For Login Page*************/
.loginWrapper {
    padding: 0;
    margin: 0 auto;
    /*background:url(images/loginBg.jpg) no-repeat;*/
    /*width: 1360px;*/
    /*position: relative;*/
}

.loginBox {
    border: 1px solid rgb(180, 180, 180);
    background-color: rgba(0, 0, 0, 0.2);
    width: 480px;
    padding: 15px;
    margin: 0;
    position: absolute;
    top: 20%;
    right: 10%;
}

.loginForm {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 20px;
    overflow: hidden;
}

    .loginForm .heading {
        text-align: center;
    }

        .loginForm .heading h1 {
            font-size: 24px;
            color: #08714a;
            text-transform: uppercase;
            font-weight: 500;
            margin: 0;
        }

            .loginForm .heading h1 img {
                vertical-align: top;
                margin: 0 4px 0 0;
            }

    .loginForm .subHeading {
        text-align: left;
        margin: 30px 0 0 0;
    }

        .loginForm .subHeading h2 {
            padding: 0;
            margin: 0;
            font-size: 20px;
            color: #404040;
            font-weight: 500;
            font-variant: inherit;
        }

        .loginForm .subHeading p {
            font-size: 15px;
            color: #404040;
            font-weight: 300;
            padding: 0;
            margin: 0 0 24px;
        }

    .loginForm .formFild {
        padding: 0;
        margin: 0;
    }

        .loginForm .formFild input {
            border: solid 1px #009444;
            padding: 8px;
            width: 100%;
            font-size: 16px;
            color: #636363;
            letter-spacing: 0.5px;
        }

            .loginForm .formFild input.userBox {
                background: url(images/user.png) no-repeat #fff;
                background-position: right 10px;
            }

            .loginForm .formFild input.userPass {
                background: url(images/password.png) no-repeat #fff;
                background-position: right 10px;
                margin: 10px 0 0;
            }

        .loginForm .formFild span {
            display: inline-block;
            float: left;
            margin: 0 5px 0 0;
        }

            .loginForm .formFild span.kmlChkBox input {
                width: 10px;
                height: 10px;
                background: #fff;
            }

        .loginForm .formFild label.chklbl {
            display: inline-block !important;
            margin: 0;
            text-transform: none;
            vertical-align: top;
            font-size: 15px;
            font-weight: 400;
            color: #404040;
        }

        .loginForm .formFild a {
            float: right;
            font-size: 15px;
            text-decoration: underline;
            color: #08714a;
            text-transform: none;
            font-weight: 400;
        }

            .loginForm .formFild a:hover {
                text-decoration: none;
            }

        .loginForm .formFild .fild {
            overflow: hidden;
            margin: 0 0 10px;
        }

        .loginForm .formFild input.loginButton, a.loginButton {
            background: #0d9047;
            width: 100%;
            text-align: center;
            padding: 10px 0;
            border: none;
            font-size: 18px;
            font-weight: 400;
            color: #fff;
            text-transform: uppercase;
            font-family: Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
            cursor: pointer;
            margin: 40px 0 0 0;
        }

            .loginForm .formFild input.loginButton:hover, a.loginButton:hover {
                background: #08714a;
            }

            a.loginButton:hover {
                text-decoration: none;
            }

.errormsg {
    color: #ff0000;
    text-align: right;
    float: right;
    font-size: 11px;
    font-weight: 400;
}

.errormsg1 {
    color: #ff0000;
    text-align: right;
    font-size: 11px;
    font-weight: 400;
}

.loginForm .formFild .gobackBtn a {
    float: none;
    text-align: center;
    display: block;
    margin: 10px 0;
}

/*Change Password*/
p.cpPassInfo span {
    font-size: 12px;
    display: block;
}

/******GPS Tracking********/
.nvrPopup .igg_Control {
    height: auto !important;
}

#bingLogo {
    display: none !important;
}

.mapDiv {
    width: 100%;
    height: 100%;
    padding: 0;
}

.MicrosoftMap .NavBar_Container.minified .NavBar_Button {
    width: 38px !important;
    height: 38px !important;
}

.MicrosoftMap a#VehicleReport {
    background: url(images/vReport.png) no-repeat !important;
    background-size: 100% !important;
}

    .MicrosoftMap a#VehicleReport:hover {
        background: url(images/vReportHover.png) no-repeat !important;
        background-size: 100% !important;
    }

.MicrosoftMap a#VehicleReportForBehaviorEvents {
    background: url(images/BehaviorReport.png) no-repeat !important;
    background-size: 100% !important;
}

    .MicrosoftMap a#VehicleReportForBehaviorEvents:hover {
        background: url(images/BehaviorReport_hover.png) no-repeat !important;
        background-size: 100% !important;
    }

.MicrosoftMap a#RefreshMap {
    background: url(images/refereshMap.png) no-repeat !important;
    background-size: 100% !important;
}

    .MicrosoftMap a#RefreshMap:hover {
        background: url(images/refereshMapHover.png) no-repeat !important;
        background-size: 100% !important;
    }

.MicrosoftMap a#btStartFindTrucks {
    background: url(images/nearestDevice.png) no-repeat !important;
    background-size: 100% !important;
}

    .MicrosoftMap a#btStartFindTrucks:hover {
        background: url(images/nearestDeviceHover.png) no-repeat !important;
        background-size: 100% !important;
    }

.MicrosoftMap a#btnRefreshMapZoomedArea {
    background: url(images/RefreshMapZoomedArea.png) no-repeat !important;
    background-size: 100% !important;
}

    .MicrosoftMap a#btnRefreshMapZoomedArea:hover {
        background: url(images/RefreshMapZoomedAreaHover.png) no-repeat !important;
        background-size: 100% !important;
    }

.MicrosoftMap a#btnRefreshMapZoomedAreaD {
    background: url(images/RefreshMapZoomedAreaD.png) no-repeat !important;
    background-size: 100% !important;
}

    .MicrosoftMap a#btnRefreshMapZoomedAreaD:hover {
        background: url(images/RefreshMapZoomedAreaHoverD.png) no-repeat !important;
        background-size: 100% !important;
    }

a#btnShowHideSearchBox .Search-close, a#av-btnShowHideSearchBox .Search-close {
    background: #fff;
    width: 34px !important;
    height: 34px !important;
    border: solid 2px #404040;
    border-radius: 100%;
    /*display: block;*/
    padding: 0;
    color: #404040;
    margin: 0;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    line-height: 32px;
}

    a#btnShowHideSearchBox .Search-close:hover {
        text-decoration: none;
        background: #dddddd;
        color: #404040;
    }

.MicrosoftMap a#btnShowHideSearchBox {
    background: url(images/mapSearch.png) no-repeat !important;
    background-size: 100% !important;
}

    .MicrosoftMap a#btnShowHideSearchBox:hover {
        background: url(images/mapSearchHover.png) no-repeat !important;
        background-size: 100% !important;
    }



/*added by nilesh */
.MicrosoftMap a#btShowDevices {
    background: url(images/showDevicesList.png) no-repeat !important;
    background-size: 100% !important;
}

    .MicrosoftMap a#btShowDevices:hover {
        background: url(images/showDevicesListHover.png) no-repeat !important;
        background-size: 100% !important;
    }

.MicrosoftMap a#divReplayButton {
    background: url(images/Start-Replay.png) no-repeat;
    background-size: 100% !important;
}

    .MicrosoftMap a#divReplayButton:hover {
        background: url(images/Start-ReplayHover.png) no-repeat !important;
        background-size: 100% !important;
    }

.MicrosoftMap a#divStopButton {
    background: url(images/Stop-Replay.png) no-repeat;
    background-size: 100% !important;
}

    .MicrosoftMap a#divStopButton:hover {
        background: url(images/Stop-ReplayHover.png) no-repeat !important;
        background-size: 100% !important;
    }
/*added by nilesh */
.MicrosoftMap a#btStartFindTrucks.active {
    background: url(images/nearestDeviceActive.png) no-repeat !important;
    background-size: 100% !important;
}
/*For areal view added by nilesh patel*/


/*Added by Tarun*/
.MicrosoftMap a#av-BehaviorReport {
    background: url(images/av-BehaviorReport.png) no-repeat !important;
    background-size: 100% !important;
}

    .MicrosoftMap a#av-BehaviorReport:hover {
        background: url(images/av-BehaviorReportHover.png) no-repeat !important;
        background-size: 100% !important;
    }

.MicrosoftMap a#av-btnShowHideSearchBox {
    background: url(images/av-mapSearch.png) no-repeat !important;
    background-size: 100% !important;
}

    .MicrosoftMap a#av-btnShowHideSearchBox:hover {
        background: url(images/av-mapSearchtHover.png) no-repeat !important;
        background-size: 100% !important;
    }


.MicrosoftMap a#av-btShowDevices {
    background: url(images/av-showDevicesList.png) no-repeat !important;
    background-size: 100% !important;
}

    .MicrosoftMap a#av-btShowDevices:hover {
        background: url(images/av-showDevicesListHover.png) no-repeat !important;
        background-size: 100% !important;
    }
/********/

.MicrosoftMap a#av-btStartFindTrucks.active {
    background: url(images/nearestDeviceActive.png) no-repeat !important;
    background-size: 100% !important;
}

.MicrosoftMap a#av-btStartFindTrucks:hover {
    background: url(images/nearestDeviceHover.png) no-repeat !important;
    background-size: 100% !important;
}

.MicrosoftMap a#av-VehicleReport {
    background: url(images/av-vReport.png) no-repeat !important;
    background-size: 100% !important;
}

    .MicrosoftMap a#av-VehicleReport:hover {
        background: url(images/av-vReportHover.png) no-repeat !important;
        background-size: 100% !important;
    }

.MicrosoftMap a#av-RefreshMap {
    background: url(images/av-refereshMap.png) no-repeat !important;
    background-size: 100% !important;
}

    .MicrosoftMap a#av-RefreshMap:hover {
        background: url(images/av-refereshMapHover.png) no-repeat !important;
        background-size: 100% !important;
    }

.MicrosoftMap a#av-btnRefreshMapZoomedArea {
    background: url(images/av-RefreshMapZoomedArea.png) no-repeat !important;
    background-size: 100% !important;
}

    .MicrosoftMap a#av-btnRefreshMapZoomedArea:hover {
        background: url(images/av-RefreshMapZoomedAreaHover.png) no-repeat !important;
        background-size: 100% !important;
    }

.MicrosoftMap a#av-btnRefreshMapZoomedAreaD {
    background: url(images/av-RefreshMapZoomedAreaD.png) no-repeat !important;
    background-size: 100% !important;
}

    .MicrosoftMap a#av-btnRefreshMapZoomedAreaD:hover {
        background: url(images/av-RefreshMapZoomedAreaHoverD.png) no-repeat !important;
        background-size: 100% !important;
    }

.MicrosoftMap a#av-btStartFindTrucks {
    background: url(images/av-nearestDevice.png) no-repeat !important;
    background-size: 100% !important;
}

    .MicrosoftMap a#av-btStartFindTrucks:hover {
        background: url(images/av-nearestDeviceHover.png) no-repeat !important;
        background-size: 100% !important;
    }
/*added by nilesh */
.MicrosoftMap a#av-divReplayButton {
    background: url(images/av-Start-Replay.png) no-repeat;
    background-size: 100% !important;
}

    .MicrosoftMap a#av-divReplayButton:hover {
        background: url(images/av-Start-ReplayHover.png) no-repeat !important;
        background-size: 100% !important;
    }

.MicrosoftMap a#av-divStopButton {
    background: url(images/av-Stop-Replay.png) no-repeat;
    background-size: 100% !important;
}

    .MicrosoftMap a#av-divStopButton:hover {
        background: url(images/av-Stop-ReplayHover.png) no-repeat !important;
        background-size: 100% !important;
    }

/***CSS for Plot icons****/
.MicrosoftMap a#vehiclePlot {
    background: url(images/vehiclePlot.png) no-repeat !important;
    background-size: 100% !important;
}

    .MicrosoftMap a#vehiclePlot:hover {
        background: url(images/vehiclePlotHover.png) no-repeat !important;
        background-size: 100% !important;
    }

.MicrosoftMap a#av-vehiclePlot {
    background: url(images/av_vehiclePlot.png) no-repeat !important;
    background-size: 100% !important;
}

    .MicrosoftMap a#av-vehiclePlot:hover {
        background: url(images/av_vehiclePlotHover.png) no-repeat !important;
        background-size: 100% !important;
    }


.MicrosoftMap a#vehiclePlot1 {
    background: url(images/vehiclePlot.png) no-repeat !important;
    background-size: 100% !important;
}

    .MicrosoftMap a#vehiclePlot1:hover {
        background: url(images/vehiclePlotHover.png) no-repeat !important;
        background-size: 100% !important;
    }

.MicrosoftMap a#av-vehiclePlot1 {
    background: url(images/av-vehiclePlot.png) no-repeat !important;
    background-size: 100% !important;
}

    .MicrosoftMap a#av-vehiclePlot1:hover {
        background: url(images/av-vehiclePlotHover.png) no-repeat !important;
        background-size: 100% !important;
    }



/*added by nilesh */


/*block for gpsback button*/
.MicrosoftMap a#gpsTracking {
    background: url(images/gpsTracking.png) no-repeat !important;
    background-size: 100% !important;
}

    .MicrosoftMap a#gpsTracking:hover {
        background: url(images/gpsTrackingHover.png) no-repeat !important;
        background-size: 100% !important;
    }

.MicrosoftMap a#av-gpsTracking {
    background: url(images/av-gpsTracking.png) no-repeat !important;
    background-size: 100% !important;
}

    .MicrosoftMap a#av-gpsTracking:hover {
        background: url(images/av-gpsTrackingHover.png) no-repeat !important;
        background-size: 100% !important;
    }
/*end for back button*/

/*end added by nilesh patel for areal view*/
/*.MicrosoftMap a#VehicleReport i, .MicrosoftMap a#RefreshMap i, .MicrosoftMap a#btStartFindTrucks i {
        display:none
    }*/

a#btShowHideSpeedPopup, a#av-btShowHideSpeedPopup {
    background: #fff;
    width: 32px !important;
    height: 32px !important;
    border: solid 2px #404040;
    border-radius: 100%;
    display: block;
    padding: 0;
    color: #404040;
    margin: 0;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    line-height: 32px;
}

    a#btShowHideSpeedPopup:hover {
        text-decoration: none;
        background: #dddddd;
        color: #404040;
    }

    a#av-btShowHideSpeedPopup:hover {
        text-decoration: none;
        background: #dddddd;
        color: #404040;
    }

a#av-btShowHideSpeedPopup {
    color: #fff !important;
    background: #666666;
    border-color: #171c25 !important;
}

.MaxSpeed-close {
    display: none;
}
/*.MicrosoftMap .NavBar_Container .NavBar_Button {
    float:none !important
}*/
.sNav {
    float: right;
}

    .sNav .speedTxtbox {
        float: left;
        width: 72px;
        overflow: hidden;
        background: #fff;
        padding: 4px 8px;
        position: absolute;
        z-index: -9;
        border: solid 2px #404040;
        right: 40px;
        margin: 0;
        border-radius: 16px;
    }

        .sNav .speedTxtbox input {
            width: 30px;
            float: left;
            padding: 3px 5px;
            text-align: center;
            border: solid 1px #ccc;
            border-radius: 6px;
        }

        .sNav .speedTxtbox a#btnSaveSpeed {
            float: none !important;
            width: 15px;
            background: #0F602B;
            padding: 5px;
            color: #fff;
            margin: 0 5px !important;
            position: inherit;
            border-radius: 100%;
            height: 15px;
            text-align: center;
            line-height: 15px;
        }

    .sNav a {
        float: right !important;
    }
/*.sNav a {
        text-decoration: none;
         display: block;
         position: relative;
         border-radius: 50%;
         background-color: rgb(255, 255, 255);
         box-shadow: 0px 0px 4.95px 0.05px rgba(35, 120, 177, 0.82);
         width: 64px;
         height: 64px;
         margin: 0 0 12px 0;
         text-align: center;
         padding: 5px;
    }*/
/*.sNav .speedTxtbox {
        font-size: 15px;
 vertical-align: middle;
 height: 44px;
 line-height: 44px;
 width: auto;
 white-space: nowrap;
 overflow: hidden;
 display: block;
 padding: 0 10px 0 20px;
 position: absolute;
 top: 0;
 visibility: hidden;
 z-index: 3;
    }*/
/****Feedback****/
.leftPansPosition {
    z-index: 999 !important;
}

#testfeedback {
    position: fixed;
    top: 36%;
    left: -196px;
    z-index: 99;
}

    #testfeedback .mainfBox {
        padding: 5px;
        border-radius: 0 5px 5px 0;
        width: 180px;
        height: auto;
        border: 1px solid #009444;
        background: #fff;
    }

    #testfeedback h2 {
        background: #e3ebe8;
        color: #08704a;
        font-size: 15px;
        text-transform: uppercase;
        padding: 0;
        margin: 0 0 5px;
        font-variant: inherit;
        text-align: center;
        padding: 9px;
    }

#fpi_feedback {
    z-index: 999999;
    position: fixed;
    width: 60px;
    height: 422px;
    bottom: 0px;
    top: 250px;
    right: 0px;
    font-size: 15px;
    color: white;
}

#fpi_title a {
    color: #08704a;
    font-size: 15px;
    margin: 0;
    padding: 8px;
    text-transform: none !important;
    text-decoration: none;
    display: block;
    letter-spacing: 0.5px;
    font-weight: 500;
}

#fpi_title {
    top: 46px;
    background-color: #e3ebe8;
    cursor: pointer;
    display: block;
    /*width: 122px;*/
    width: 64px;
    height: 36px;
    position: absolute;
    /*top: 42%;*/
    top: 34%;
    right: -51px;
    /*right: -80px;*/
    border: solid 1px rgb(0, 148, 68);
    border-radius: 0 0 4px 4px;
}

.rotate {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    /* Should be unset in IE9+ I think. */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.mapLegends p {
    line-height: 19px;
    font-size: 14px;
    padding: 5px 8px;
    margin: 0;
    border-bottom: solid 1px #e8e8e8;
    color: #404040;
    font-weight: 400;
}

    .mapLegends p.head {
        font-weight: 600;
    }

    .mapLegends p .mapLegends p:last-child {
        border: none;
    }

    .mapLegends p span, .mapLegends p .vsCount {
        font-weight: 700;
        font-size: 14px;
        float: right;
        width: inherit;
    }

.mapLegends input[type="checkbox"] {
    margin: 8px 0 0 4px;
}

.mapLegends input, .mapLegends label {
    float: left;
    display: block;
}

.mapLegends label {
    width: 88%;
}

.legendBox {
    position: fixed;
    z-index: 100;
    width: 500px;
    right: 115px;
    bottom: 0px;
}

    .legendBox button.slide-toggle {
        width: 24%;
        display: block;
        border: solid 1px rgb(0, 148, 68);
        padding: 6px 5px;
        text-align: center;
        background: #e3ebe8;
        color: #08704a;
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 0.5px;
        border-bottom: none;
        border-radius: 5px 5px 0 0;
        float: right;
    }

    .legendBox .box {
        height: 224px;
        background: #fff;
        overflow: auto;
        padding: 5px;
        border: solid 1px rgb(0, 148, 68);
        border-radius: 5px 0 0 0;
        background: rgba(227, 235, 232, 1);
        display: none;
    }

        .legendBox .box p {
            float: left;
            text-align: center;
            padding: 4px;
            margin: 2px;
            font-size: 9px;
            line-height: 11px;
            border: 1px solid #ccc;
            width: 11.2%;
            overflow: hidden;
            height: 60px;
            background: rgba(255,255,255,0.9);
            vertical-align: middle;
            display: table;
            border-radius: 8px;
            color: #08704a;
            text-transform: uppercase;
        }

            .legendBox .box p img {
                display: block;
                margin: 0 auto 5px auto;
            }

.languageBox {
    position: fixed;
    z-index: 99;
    width: 100px;
    right: 10px;
    bottom: 0px;
}
.languageBox button.slide-button {
    width: 84%;
    display: block;
    border: solid 1px rgb(0, 148, 68);
    padding: 6px 5px;
    text-align: center;
    background: #e3ebe8;
    color: #08704a;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    float: right;
}

.languagePopup {
    width: 25% !important;
    /*height: 80% !important;*/
    max-height: 500px;
    /*overflow: auto;*/
    /*border:none;
    padding:10px;*/
    top: 84px !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
}

.languageTopHead {
    width: 100%;
    /* overflow: hidden; */
    border-bottom: dashed 1px #ccc;
    padding: 0 0 10px;
}

.languageTopHead .modal-header {
    border: none;
    background: #388e3c !important;
    color: #fff;
    padding: 4px;
    margin: 0 0 14px;
}

.languageTopHead .modal-header h4, .modal-header h4 {
    font-size: 14px;
    color: #fff;
    text-shadow: none;
    font-weight: 400;
}

/****Map Actions*****/
.mapActionsWrapper {
    border: solid 1px rgb(0, 148, 68);
    border-radius: 4px;
    background: rgba(0, 148, 68, 0.99);
    position: absolute;
    z-index: 1;
    padding: 10px;
    bottom: 10px; /*40px*/
    left: 10px;
}

.sidePanelforAutorefresh {
    padding: 0;
    margin: 0;
    color: #fff;
}

    .sidePanelforAutorefresh p {
        padding: 0;
        margin: 0;
        font-size: 16px;
    }

        .sidePanelforAutorefresh p span {
            font-weight: 700;
        }

.sidePanel {
    /*   top: 5px !important;*/
}


/******Map Quick Filters*****/
#wrapper {
    position: relative;
    overflow-x: hidden;
}

.nav .open > a {
    background-color: transparent;
}

    .nav .open > a:hover {
        background-color: transparent;
    }

    .nav .open > a:focus {
        background-color: transparent;
    }

#wrapper {
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    padding-left: 0;
    transition: all 0.5s ease;
}

    #wrapper.toggled {
        padding-left: 220px;
    }

        #wrapper.toggled #sidebar-wrapper {
            width: 300px;
        }

        #wrapper.toggled #page-content-wrapper {
            margin-right: -220px;
            position: absolute;
        }

#sidebar-wrapper {
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    background: rgba(64,64,64, 0.98);
    left: 220px;
    margin-left: -220px;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all 0.5s ease;
    width: 0;
    z-index: 9;
    margin-top: 65px;
}

    #sidebar-wrapper h2 {
        padding: 20px 0;
        margin: 0;
        text-align: center;
        font-size: 22px;
        font-variant: inherit;
        text-transform: uppercase;
        background: #096f4a;
        color: #ececec;
    }

    #sidebar-wrapper::-webkit-scrollbar {
        display: none;
    }

#page-content-wrapper {
    /*padding-top: 70px;*/
    width: 100%;
}

.sidebar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 60px;
    width: 300px;
}

    .sidebar-nav li {
        display: inline-block;
        line-height: 20px;
        position: relative;
        width: 100%;
        border-bottom: 1px solid #182025;
        color: #d7d7d7;
    }

        .sidebar-nav li:last-child {
            border-bottom: none;
        }

        .sidebar-nav li:before {
            background-color: #1c1c1c;
            content: '';
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            -webkit-transition: width 0.2s ease-in;
            transition: width 0.2s ease-in;
            width: 0px;
            z-index: -1;
        }

        .sidebar-nav li:nth-child(1):before, .sidebar-nav li:nth-child(2):before, .sidebar-nav li:nth-child(3):before, .sidebar-nav li:nth-child(4):before, .sidebar-nav li:nth-child(5):before, .sidebar-nav li:nth-child(6):before, .sidebar-nav li:nth-child(7):before, .sidebar-nav li:nth-child(8):before, .sidebar-nav li:nth-child(9):before, .sidebar-nav li:nth-child(10):before {
            background-color: #096f4a;
        }

        .sidebar-nav li:hover:before {
            -webkit-transition: width 0.2s ease-in;
            transition: width 0.2s ease-in;
            width: 100%;
        }

        .sidebar-nav li a {
            color: #d7d7d7;
            display: block;
            padding: 20px 15px 20px 16px;
            text-decoration: none;
            position: relative;
            font-size: 18px;
            letter-spacing: 0.5px;
            font-weight: 400;
        }

        .sidebar-nav li.open:hover before {
            -webkit-transition: width 0.2s ease-in;
            transition: width 0.2s ease-in;
            width: 100%;
        }

        .sidebar-nav li.icon_active a {
            color: #829c4c;
        }

        .sidebar-nav li a:focus {
            background: none;
        }

    .sidebar-nav .dropdown-menu {
        background-color: #222222;
        border-radius: 0;
        border: none;
        box-shadow: none;
        margin: 0;
        padding: 0;
        position: relative;
        width: 100%;
    }

    .sidebar-nav li:hover.icon_active span, .sidebar-nav li:hover, .sidebar-nav li a:hover {
        background-color: transparent;
        color: #fff !important;
        text-decoration: none;
    }

    .sidebar-nav li ul li.secondlvl:hover {
        background-color: inherit !important;
    }
    /*.sidebar-nav li:hover.icon_active i.ecommerce_iocn::before {
            content: url(../images/ecommerce.png);
        }*/

    .sidebar-nav > .sidebar-brand {
        font-size: 20px;
        height: 65px;
        line-height: 44px;
    }

.hamburger {
    background: transparent;
    border: none;
    display: block;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 4%;
    z-index: 99 !important;
    right: 5px;
}

    .hamburger.is-closed span:after {
        content: url(images/portfolio_left_icon_isopen.png);
    }

    .hamburger.is-closed:hover span:after {
        content: url(images/portfolio_left_icon_isopenHover.png);
    }

    .hamburger.is-open span:after {
        content: url(images/portfolio_left_icon_isclose.png);
        position: relative;
        left: 0;
    }

    .hamburger.is-open:hover span:after {
        content: url(images/portfolio_left_icon_iscloseHover.png);
    }

.selectionWrapper {
    padding: 0;
    margin: 0;
}

#sidebar-wrapper .selectionWrapper .selectionHeader {
    width: 85%;
    margin: 15px 15px 10px 15px;
    overflow: hidden;
    padding: 8px 5px 8px 5px;
    border-bottom: dashed 1px #616161;
    border-top: dashed 1px #616161;
}

    #sidebar-wrapper .selectionWrapper .selectionHeader h2 {
        padding: 0;
        margin: 0;
        background: 0;
        text-align: left;
        font-size: 16px;
        float: left;
    }

    #sidebar-wrapper .selectionWrapper .selectionHeader span.selectAll {
        margin: 0;
        display: block;
        float: right;
    }

        #sidebar-wrapper .selectionWrapper .selectionHeader span.selectAll input {
            margin: 0;
        }

        #sidebar-wrapper .selectionWrapper .selectionHeader span.selectAll label {
            padding: 0;
            margin: 0 0 0 5px;
        }

#sidebar-wrapper .selectionWrapper .selectGroup {
    padding: 0 15px;
}


    #sidebar-wrapper .selectionWrapper .selectGroup table {
        margin: 0 auto !important;
        width: 94% !important;
    }

        #sidebar-wrapper .selectionWrapper .selectGroup table tr td {
            display: block;
            padding: 0;
            margin: 0 0 5px;
            width: 50%;
            float: left;
        }

            #sidebar-wrapper .selectionWrapper .selectGroup table tr td input.chkboxeS {
                margin: 0;
                padding: 0;
            }

            #sidebar-wrapper .selectionWrapper .selectGroup table tr td label {
                padding: 0;
                margin: 0 0 0 5px;
                font-weight: normal;
                font-size: 14px;
            }

.tbMargin {
    margin-top: 20px;
}

.actionBtn {
    width: 100%;
    margin: 15px auto;
    text-align: center;
}

    .actionBtn a.save, .actionBtn input.save {
        display: block;
        background: #046631;
        padding: 8px 0 !important;
        margin: 0 10px;
        color: #fff;
        font-size: 14px !important;
        font-weight: bold;
        text-transform: uppercase;
    }

    .actionBtn input.save {
        border: none;
        width: 90%;
    }

.sidenav .actionBtn {
    margin: 0;
}

.actionBtn a.save:hover, .actionBtn input.save:hover {
    background: #0F602B;
}

.legendsShow {
    overflow: auto;
    height: 340px;
    width: 100%;
    padding: 10px 18px;
}

    .legendsShow p img {
        margin: 0 5px 0 0;
        background: #c2c2c2;
        padding: 1px 4px;
        border-radius: 7px;
    }



/*CSS for Asset Management - Settings Popup*/
.amSettingBox {
    background: #fff;
    margin-bottom: 5px;
    padding: 8px;
    overflow: hidden;
}

    .amSettingBox h2 {
        padding: 0 !important;
        margin: 0 0 10px !important;
        font-size: 13px !important;
        font-weight: bold !important;
        color: #404040 !important;
        text-transform: uppercase !important;
    }

    .amSettingBox .fCol, .amSettingBox .sCol, .amSettingBox .tCol {
        float: left;
    }

        .amSettingBox .fCol label, .amSettingBox .sCol label, .amSettingBox .tCol label {
            margin: 0 0 5px;
        }

    .amSettingBox .fCol {
        width: 22%;
    }

    .amSettingBox .sCol {
        width: 30%;
    }

    .amSettingBox .tCol {
        width: 48%;
    }

.fCol input {
    width: 15px !important;
}

.datePicker {
}

    .datePicker table {
        border: solid 1px #ccc;
    }

        .datePicker table tr td input.textfield2 {
            border: none;
            margin: 0 !important;
            border-radius: 0;
            text-align: left !important;
        }

        .datePicker table tr td img.igte_ButtonImg {
            margin: 10px 0 0 0;
        }

.tDate, .fDate {
    display: inline-block;
    margin: 0 15px;
}

.amSettingBox label {
    font-size: 12px;
    display: block;
}

.datePicker table tr td.igte_Button {
    background-color: #eeeeee;
}


/****CSS FOR Vehicle Dashboard****/

/*****Dashboard - Tabds******/
.dashboardTabs {
    /*position: absolute;
    top: 12px;
    right: 0;
    left: 0;
    text-align: center;
    margin: 0 auto;
    width: 254px;
    border:none*/
    position: fixed;
    top: 14px;
    right: 0;
    left: 0;
    text-align: center;
    margin: 0 auto;
    width: 310px;
    border: none;
    z-index: 999;
}

.dpSettingTabs {
    width: 462px;
}

.dashboardTabs > li {
    padding: 0;
    margin: 0;
    border-radius: 0;
    position: relative;
}

    .dashboardTabs > li > a {
        margin-right: 0;
        border: none;
        border-radius: 0;
        background: #d0d0d0;
        margin: 0;
        padding: 10px 20px 10px 52px;
        font-size: 18px;
        line-height: 20px;
        color: #404040;
    }

    .dashboardTabs > li.active > a, .dashboardTabs > li.active > a:hover, .dashboardTabs > li.active > a:focus {
        background: #0d8548;
        color: #fff;
        border: none;
        margin: 0;
    }

.dashboardContent .topFiletr {
    text-align: center;
    margin: 20px 0 0 0;
    font-size: 14px;
    display: none;
}

    .dashboardContent .topFiletr span {
        padding: 0 10px;
    }


.datanotFound {
    /*position: absolute;
    top: 40%;
    left: 0;
    right: 0;*/
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ff0000;
    /*-webkit-animation: blink 1s linear infinite;
    -moz-animation: blink 1s linear infinite;
    animation: blink 1s linear infinite;*/
}

    .datanotFound img {
        display: block;
        text-align: center;
        margin: 0 auto 5px;
    }

.dashboardTabs > li.driver:before, .dpSettingTabs > li.vehicle:before {
    content: '';
    width: 26px;
    height: 28px;
    display: block;
    background: url(images/driver-tab-icon.png) no-repeat !important;
    position: absolute;
    z-index: 9;
    top: 7px;
    left: 22px;
}

.dashboardTabs > li.vehicle:before {
    content: '';
    width: 26px;
    height: 28px;
    display: block;
    background: url(images/vehicle-tab-icon.png) no-repeat;
    position: absolute;
    z-index: 9;
    top: 7px;
    left: 22px;
}

.dashboardTabs > li.driver.active:before, .dashboardTabs.dpSettingTabs > li.vehicle.active:before {
    background: url(images/driver-tab-icon-active.png) no-repeat !important;
}

.dashboardTabs > li.vehicle.active:before {
    background: url(images/vehicle-tab-icon-active.png) no-repeat !important;
}

.vehicleDashboardWrapper {
}

    .vehicleDashboardWrapper *, .dvDriverIntervention *, .behaviorPopupCon *, .agfTbls *, #arVidoWrapper *, #arVidoWrapper1 *, .videoRowWrapper *, .dsPopContent * {
        box-sizing: border-box;
    }

.innerbox {
    position: relative;
    border-radius: 3px;
    background: #ebebeb;
    border-top: 3px solid #d2d6de;
    margin: 0 10px 10px 0;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    border: solid 1px #dfdfdf;
    padding: 0;
    overflow: hidden;
}

.force-overflow-auto {
    overflow: inherit !important;
}

.box-header.with-border {
    border-bottom: 1px solid #f4f4f4;
}

.box-header {
    color: #444;
    display: block;
    padding: 10px 8px;
    position: relative;
}

    .box-header .box-title {
        display: inline-block;
        font-size: 14px;
        color: #404040;
        font-weight: 500;
        margin: 0;
        line-height: 1;
    }

    .box-header > .box-tools {
        position: absolute;
        right: 10px;
        top: 4px;
    }

.boxHeaderAction {
    background: #fff;
    position: absolute;
    z-index: 9;
    top: 35px;
}

.boxHeaderInfoPop {
    position: absolute;
    z-index: 9999;
    display: block;
    left: 858px;
    top: 58px;
    background: #fff;
    height: inherit;
    padding: 10px;
    margin: 0;
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
    box-shadow: 2px 2px 10px #15A959 !important;
}

    .boxHeaderInfoPop ul {
        padding: 0;
        margin: 14px;
    }

        .boxHeaderInfoPop ul li {
            margin: 0 0 5px;
            display: flex;
            justify-content: space-between;
        }
/*CSS for Custom Dropdown*/
/*the container must be positioned relative:*/
.custom-select {
    position: relative;
    border-bottom: solid 1px #182025;
    font-size: 14px;
    margin: 0;
    font-weight: 400;
    /*background: #f2f1f1*/
}

    .custom-select select {
        display: none; /*hide original SELECT element:*/
    }

.select-selected {
    /*background-color: DodgerBlue;*/
}
    /*style the arrow inside the select element:*/
    .select-selected:after {
        position: absolute;
        content: "";
        top: 20px;
        right: 8px;
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-color: #fff transparent transparent transparent;
    }
    /*point the arrow upwards when the select box is open (active):*/
    .select-selected.select-arrow-active:after {
        border-color: transparent transparent #fff transparent;
        top: 7px;
    }

.select-arrow-active {
    background: #081015;
}
/*style the items (options), including the selected item:*/
.select-items div, .select-selected {
    color: #fff;
    padding: 8px;
    /*border: 1px solid transparent;
    border-color: rgba(0, 0, 0, 0.1);*/
    cursor: pointer;
    user-select: none;
    /*height: 30px;*/
    /*overflow: hidden;*/
}

.select-items div {
    /*border-bottom:solid 1px #ccc;*/
    padding: 6px 15px;
    font-size: 13px;
    background: rgb(8, 16, 21) none repeat scroll 0% 0%;
}
/*style items (options):*/
.select-items {
    /*position: absolute;*/
    /*background-color: DodgerBlue;*/
    /*background-color: #fff;*/
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    /*width: 160px;*/
    /*font-size: 12px !important;*/
    /*height:154px;
    overflow:auto*/
}
/*hide the items when the select box is closed:*/
.select-hide {
    display: none;
}

.select-items div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
}

.demo .trainingdp h2.title {
    padding: 0 !important;
    margin: 0 !important;
}

.trainingdp input {
    width: 98%;
    padding: 5px;
    margin: 8px 0 0 0;
}

.trainingdp .marginBot10 {
    margin-bottom: 15px;
}

.demo .modal.right .modal-content .actionBtn {
    margin: 14px 0 10px 0;
}

    .demo .modal.right .modal-content .actionBtn a.clear-btn {
        color: #096f49;
        font-size: 16px;
    }

    .demo .modal.right .modal-content .actionBtn a.save-btn {
        background: #096f49;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
    }

        .demo .modal.right .modal-content .actionBtn a.save-btn:hover {
            text-decoration: none;
            background: #055a3a;
        }

.dvHighRiskDriver, .dvMediumRiskDriver, .dvLowRiskDriver, .dvHighRiskDriverExtenalPoints, .dvLowRiskDriverExtenalPoints, .dvDVIRListD, .dvDVIRListM, .dvDriverMonthMilestones , .dvDriverDistanceMilestones, .dvBehaviorVideo   {
    background: #fff;
    padding: 10px;
}

.dvDVIRListM, .dvDVIRListMtbl, .tblOverflow {
    overflow: auto;
    max-height: 600px;
}

.demo .modal-header .vdDetailClose, .demo .modal-header .ptDetailClose {
    margin: 10px 11px 0 0 !important;
}
/*.dvLowRiskDriver .modal-header {
    background: #388e3c !important;
}
.dvMediumRiskDriver .modal-header {
    background: #ffa000 !important;
}
.dvHighRiskDriver .modal-header {
    background: #cf3531 !important;
}*/
.dvLowRiskDriver .modal-header, .dvLowRiskDriverExtenalPoints .modal-header {
    background: #388e3c !important;
}

.dvMediumRiskDriver .modal-header, .dvMediumRiskDriverExtenalPoints .modal-header {
    background: #ffa000 !important;
}

.dvHighRiskDriver .modal-header, .dvHighRiskDriverExtenalPoints .modal-header {
    background: #cf3531 !important;
}

    .demo .modal-header .vdDetailClose h4, .dvMediumRiskDriver .modal-header h4, .dvHighRiskDriver .modal-header h4 {
        font-size: 16px !important;
    }

.dvDVIRListD .modal-header {
    background: #388e3c !important;
}

.dvDVIRListM .modal-header {
    background: #cf3531 !important;
}

.modal-body {
}

.demo .modal-body h2.title {
    padding: 0;
    margin: 8px 5px 2px 5px;
    color: #666666;
    font-size: 14px;
    font-weight: 500;
}

.demo .modal.right .modal-dialog {
    position: absolute;
    margin: auto;
    width: 246px;
    height: 100%;
    background: rgba(16,23,28, 0.985);
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}

.noFloat {
    float: none;
}

.demo .modal.right .modal-content {
    height: 100%;
    overflow-y: auto;
    background: #fff;
}

.demo .modal-body .numDayVU {
    margin: 10px 0;
    background: #ececec;
    padding: 6px;
}

    .demo .modal-body .numDayVU div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
    }

        .demo .modal-body .numDayVU div input {
            width: auto;
            padding: 0;
            margin: 0;
        }
/*Right*/
.demo .modal.right.fade .modal-dialog {
    right: -320px;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;
}

.demo .modal.right.fade.in .modal-dialog {
    right: 0;
}

/* ----- MODAL STYLE ----- */
.demo .modal-content {
    border-radius: 0;
    border: none;
}

.demo .modal-header {
    border-bottom-color: #EEEEEE;
    background-color: #096f49;
    padding: 5px 10px;
}

    .demo .modal-header .close {
        margin: 0 5px 0 0;
        color: #fff;
        opacity: inherit;
    }

    .demo .modal-header h4 {
        font-size: 14px;
        color: #fff;
        text-shadow: none;
        font-weight: 400;
    }

    .demo .modal-header .filterClose {
        top: 0 !important;
    }
/* ----- v CAN BE DELETED v ----- */
.demo {
    padding: 0;
}

.btn-demo {
    margin: 0 2px;
    padding: 0;
    border-radius: 0;
    background: none;
    opacity: 0.8;
}

    .btn-demo:hover {
        opacity: 1 !important;
    }

    .btn-demo:focus {
        outline: 0;
    }

.actionBtn {
    display: block;
    text-align: center;
    margin: 50px 0 10px 0;
}

    .actionBtn a {
        padding: 6px 25px;
        margin: 0 5px;
    }

.mapWrapper {
    width: 100%;
    height: 308px;
    /*height: 230px;*/
    background: #fff;
}

.vehicleUtilizationDetails {
    height: auto !important;
    /*overflow:hidden !important;*/
    padding-bottom: 15px;
}
.driverBehaviorRiskAnalysisDetails {
    height: auto !important;
    /*overflow:hidden !important;*/
    padding-bottom: 15px;
}
.driverBehaviorVideoDetails {
    height: auto !important;
    /*overflow:hidden !important;*/
    padding-bottom: 15px;
}
/*#PVUD .mapWrapper {
   min-height: 380px !important;
    max-height: 580px !important;
   overflow:auto;
}*/
.vdGraphdetailPopup {
    /*position: absolute;*/
    position: fixed;
    top: 5px;
    right: 0;
    left: 0;
    width: 98%;
    margin: 0 auto;
    z-index: 999999;
    padding: 10px;
    height: 100%;
}

.vdGraphdetailPopup {
    display: none;
}

    .vdGraphdetailPopup thead, .vehicUtilizationTbl thead {
        background: #404040;
        color: #fff;
        /*font-size:14px;*/
        font-size: 11px;
        font-weight: 400;
    }

    .vdGraphdetailPopup tbody tr:nth-child(even), .vehicUtilizationTbl tbody tr:nth-child(even) {
        background: #f2f2f2;
    }

    .vdGraphdetailPopup tbody tr td, .vehicUtilizationTbl tbody tr td {
        /*font-size:14px;*/
        font-size: 11px;
    }

.vdSDToopTipPopup {
    /*position: absolute;*/
    position: fixed;
    top: 62px;
    right: 0;
    left: 0;
    width: 34%;
    margin: 0 auto;
    z-index: 999999;
    padding: 10px;
    height: 400px;
}

.vdSDToopTipPopup, .dashboardInfoPopup {
    display: none;
}

.PerTripDetailPopup {
    /*position: absolute;*/
    position: fixed;
    top: 62px;
    right: 0;
    left: 0;
    width: 34%;
    margin: 0 auto;
    z-index: 999999;
    padding: 10px;
    height: 400px;
}

.PerTripDetailPopup, .dashboardInfoPopup {
    display: none;
}

.ComplianceDetailPopup, .dashboardInfoPopup {
    display: none;
}

.ComplianceDetailPopup {
    /*position: absolute;*/
    position: fixed;
    top: 62px;
    right: 0;
    left: 0;
    width: 34%;
    margin: 0 auto;
    z-index: 999999;
    padding: 10px;
    height: 400px;
}

.UtilizationTripDetailPopup, .dashboardInfoPopup {
    display: none;
}

.UtilizationTripDetailPopup {
    /*position: absolute;*/
    position: fixed;
    top: 62px;
    right: 0;
    left: 0;
    width: 34%;
    margin: 0 auto;
    z-index: 999999;
    padding: 10px;
    height: 400px;
}

.DriverFirstOutDetailPopup, .dashboardInfoPopup {
    display: none;
}

.DriverFirstOutDetailPopup {
    /*position: absolute;*/
    position: fixed;
    top: 62px;
    right: 0;
    left: 0;
    width: 34%;
    margin: 0 auto;
    z-index: 999999;
    padding: 10px;
    height: 400px;
}

.DriverEndTimeDetailPopup, .dashboardInfoPopup {
    display: none;
}

.DriverEndTimeDetailPopup {
    /*position: absolute;*/
    position: fixed;
    top: 62px;
    right: 0;
    left: 0;
    width: 34%;
    margin: 0 auto;
    z-index: 999999;
    padding: 10px;
    height: 400px;
}



.VehicleIdleDetailPopup {
    /*position: absolute;*/
    position: fixed;
    top: 62px;
    right: 0;
    left: 0;
    width: 34%;
    margin: 0 auto;
    z-index: 999999;
    padding: 10px;
    height: 400px;
}

.VehicleIdleDetailPopup, .dashboardInfoPopup {
    display: none;
}

.DriverTurnTimeDetailPopup, .dashboardInfoPopup {
    display: none;
}

.DriverTurnTimeDetailPopup {
    /*position: absolute;*/
    position: fixed;
    top: 62px;
    right: 0;
    left: 0;
    width: 34%;
    margin: 0 auto;
    z-index: 999999;
    padding: 10px;
    height: 400px;
}

.VehicleUtilizationDistanceDetailPopup {
    /*position: absolute;*/
    position: fixed;
    top: 62px;
    right: 0;
    left: 0;
    width: 34%;
    margin: 0 auto;
    z-index: 999999;
    padding: 10px;
    height: 400px;
}

.VehicleUtilizationDistanceDetailPopup, .dashboardInfoPopup {
    display: none;
}

.VehicleUtilizationDistanceDetailPopup {
    /*position: absolute;*/
    position: fixed;
    top: 62px;
    right: 0;
    left: 0;
    width: 34%;
    margin: 0 auto;
    z-index: 999999;
    padding: 10px;
    height: 400px;
}

.VehicleUtilizationDistanceDetailPopup, .dashboardInfoPopup {
    display: none;
}

.VehicleUtilizationEHDetailPopup {
    /*position: absolute;*/
    position: fixed;
    top: 62px;
    right: 0;
    left: 0;
    width: 34%;
    margin: 0 auto;
    z-index: 999999;
    padding: 10px;
    height: 400px;
}

.VehicleUtilizationEHDetailPopup, .dashboardInfoPopup {
    display: none;
}

.topSearchSection {
    padding: 20px 0;
}

.keywordTxt input {
    width: 99%;
    padding: 5px;
    margin: 0;
}

.keywordTxt a {
    position: absolute;
    top: 28px;
    right: 23px;
    background: #fff;
    padding: 0 5px;
}

.noDataAvl {
    font-size: 16px;
    text-align: left;
}
/*****ALERT PAGE CSS****/
.alertWrapper {
    padding: 0;
    margin: 10px;
    overflow: hidden;
}

    .alertWrapper h2 {
        margin: 15px 0 10px 0;
        font-size: 18px;
    }

.alertBox {
}

    .alertBox h3 {
        padding: 0;
        margin: 0;
        color: #404040;
    }

    .alertBox .topHeader {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 0 10px;
    }

        .alertBox .topHeader h3 {
            color: #404040;
            font-weight: 400;
        }

.topHeader br {
    display: none;
}

.alertWrapper .selectedDevice {
    overflow: auto;
    max-height: 280px;
    margin: 0 0 10px;
}

    .alertWrapper .selectedDevice table {
        border: solid 1px #ccc;
    }

    .alertWrapper .selectedDevice th {
        font-size: 12px;
        font-weight: bold;
        background: #404040;
        color: #fff;
        border-right: solid 1px #ccc;
    }

    .alertWrapper .selectedDevice table td {
        border-right: solid 1px #ccc;
    }

        .alertWrapper .selectedDevice table td:last-child, .alertWrapper .selectedDevice th:last-child {
            border: none;
        }

    .alertWrapper .selectedDevice table td, .alertWrapper .selectedDevice th {
        padding: 5px;
    }

.alertWrapper .selectedDevice {
}

.alertTypes {
}

    .alertTypes .slectTypes {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .alertTypes .slectTypes select, .alertTypes .slectTypes input {
            padding: 5px;
            width: 100%;
        }

.notificationWrapper {
}

    .notificationWrapper .section {
        display: flex;
    }

        .notificationWrapper .section div.dvReNotifyDelay {
            width: 49.9%;
        }

        .notificationWrapper .section input {
            width: 100%;
            padding: 5px;
        }

.alertSection {
}

    .alertSection input {
        width: 100%;
        padding: 5px;
    }

.sectionTBMargin {
    margin: 10px 0;
}

.flexSection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

    .flexSection br {
        display: none;
    }

    .flexSection table tr td {
        padding: 0 5px;
    }

.emlMsg textarea, .emlAddress textarea {
    width: 100%;
}

.startTime, .endTime {
    float: left;
    width: 48%;
    margin: 0 2px;
}
/******Setting page CSS*******/
.companySettingWrapper {
    padding: 0;
    margin: 0 10px;
    border: solid 1px #ccc;
    overflow: hidden;
}

    .companySettingWrapper *, .alertWrapper * {
        box-sizing: border-box;
    }

    .companySettingWrapper .tebLeftNav {
        float: left;
        width: 20%;
    }

        .companySettingWrapper .tebLeftNav .nav-tabs {
            border: none;
        }

    .companySettingWrapper .tab-content {
        float: left;
        width: 80%;
        padding: 10px 20px;
        border-left: solid 1px #ccc;
        min-height: 530px;
        overflow: auto;
    }

        .companySettingWrapper .tab-content .logoSetting {
            padding: 0;
            margin: 0;
        }

            .companySettingWrapper .tab-content .logoSetting h2 {
                padding: 0;
                margin: 0 0 10px;
                font-size: 16px;
                color: #009933;
            }

            .companySettingWrapper .tab-content .logoSetting p {
                padding: 0;
                margin: 0;
            }

                .companySettingWrapper .tab-content .logoSetting p span {
                    font-size: 12px;
                }

            .companySettingWrapper .tab-content .logoSetting .browseandUpload, .companySettingWrapper .tab-content .logoSetting .dvi {
                max-width: 1028px;
            }

            .companySettingWrapper .tab-content .logoSetting .dviPrv img {
                padding: 48px;
                border: solid 1px #ccc !important;
                margin: 20px 0 0 0;
            }

    .companySettingWrapper .DVIR, .companySettingWrapper .InspectionLog, .companySettingWrapper .Reports {
        background: #f0f0f0;
    }

    .companySettingWrapper .tebLeftNav .tabs-left > li {
        float: none;
        margin: 0px;
    }

        .companySettingWrapper .tebLeftNav .tabs-left > li.active > a,
        .companySettingWrapper .tebLeftNav .tabs-left > li.active > a:hover,
        .companySettingWrapper .tebLeftNav .tabs-left > li.active > a:focus {
            border-bottom-color: #ddd;
            border-right-color: transparent;
            background: #009933;
            border: none;
            border-radius: 0px;
            margin: 0px;
            color: #fff;
        }

    .companySettingWrapper .tebLeftNav .nav-tabs > li > a {
        color: #009933;
        padding: 6px 10px !important;
    }

        .companySettingWrapper .tebLeftNav .nav-tabs > li > a:hover {
            /* margin-right: 2px; */
            line-height: 1.42857143;
            border: 1px solid transparent;
            /* border-radius: 4px 4px 0 0; */
            color: #009933;
        }

    .companySettingWrapper .tebLeftNav .tabs-left > li.active > a::after {
        content: "";
        position: absolute;
        top: 6px;
        right: -10px;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid #009933;
        display: block;
        width: 0;
    }

    .companySettingWrapper input#txtWeight, .companySettingWrapper #txtUpperIncident, .companySettingWrapper #txthighrisk {
        margin-right: 10px;
    }

.csDarkHead, .extPoints .csDarkHead th {
    background: #404040;
    color: #fff;
}


.companySettingWrapper .MsgPreview {
    width: 600px;
}

/*Setting pages */
.settingddlWrapper {
    margin: 15px 10px 5px 10px;
    /*position: absolute;*/
    position: fixed;
    top: 0;
    right: 0;
    float: right;
    /*width: 343px;*/
    width: 375px;
    z-index: 999;
}

.settingFormRwo {
    margin: 0 0 10px;
    overflow: hidden;
}

.depAction {
    text-align: center;
    margin: 10px 0;
}

    .depAction .mainbutton1 {
        display: inline-block;
    }

.depSuccess {
    color: #009444;
    text-align: center;
}

#vdDBRA.fullscreen, #vdDPRA.fullscreen, #vdSBD.fullscreen, #vdDBEA.fullscreen, #vdCDS.fullscreen, #vdVU.fullscreen, #vdDC.fullscreen, #vdDTDT.fullscreen, #vdIT.fullscreen,#vdITDT.fullscreen, #vdPT.fullscreen, #vdPTDT.fullscreen, #vdFA.fullscreen, #vdFSA.fullscreen, #vdDriverDistanceSinceIncident.fullscreen, #vdDriverCombineMilestoneSinceIncident.fullscreen, #vdDistanceMilestone.fullscreen , #vdDriverMonthSinceIncident.fullscreen, #vdMonthMilestone.fullscreen ,#vdDBVRA.fullscreen ,#vdDVIRTI.fullscreen {
    z-index: 9999;
    width: 99%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 10px auto;
}

    #vdDBRA.fullscreen .mapWrapper, #vdDPRA.fullscreen .mapWrapper, #vdSBD.fullscreen .mapWrapper, #vdDBEA.fullscreen .mapWrapper, #vdCDS.fullscreen .mapWrapper, #vdVU.fullscreen .mapWrapper, #vdDC.fullscreen .mapWrapper, #vdDTDT.fullscreen .mapWrapper, #vdIT.fullscreen .mapWrapper, #vdITDT.fullscreen .mapWrapper, #vdPT.fullscreen .mapWrapper, #vdPTDT.fullscreen .mapWrapper, #vdFA.fullscreen .mapWrapper, #vdFSA.fullscreen .mapWrapper, #vdDriverDistanceSinceIncident.fullscreen .mapWrapper, #vdDriverCombineMilestoneSinceIncident.fullscreen .mapWrapper, #vdDistanceMilestone.fullscreen .mapWrapper, #vdDriverMonthSinceIncident.fullscreen .mapWrapper, #vdMonthMilestone.fullscreen .mapWrapper, #vdDBVRA.fullscreen .mapWrapper ,#vdDVIRTI.fullscreen .mapWrapper {
        height: 95vh;
    }

#fBox {
    /*width: 500px;
    height: 400px;*/
}

a.minmaxBtn {
    margin: 0 2px;
    padding: 0;
    border-radius: 0;
    background: none;
    opacity: 0.8;
    text-decoration: none;
    background: url(images/dashboard_maxmize.png) no-repeat;
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: top;
}

    a.minmaxBtn:hover {
        opacity: 1 !important;
        text-decoration: none;
    }

.fullscreen a.minmaxBtn {
    background: url(images/dashboard_minimize.png) no-repeat;
    width: 28px;
    height: 28px;
    display: inline-block;
    vertical-align: top;
    margin-top: 3px;
}

/*a.minmaxBtn:hover {
        opacity: 1 !important;
        text-decoration: none
    }*/
.vdfc {
    overflow: hidden;
}

.instruction .info {
    background-color: #e7f3fe;
    border-left: 6px solid #2196F3;
    padding: 10px;
    overflow: hidden;
}

    .instruction .info ul {
        padding: 0;
        margin: 0 0 0 15px;
    }

        .instruction .info ul li {
            font-size: 13px;
        }

.removeBtn, .addBtn {
    padding: 5px;
    border-radius: 5px;
    font-size: 12px;
}

.driverDDL {
    width: 100%;
}

    .driverDDL .dropdown-multiselect, .driverDDL button {
        width: 100%;
        text-align: left;
    }

    .driverDDL button {
        overflow: hidden;
    }

        .driverDDL button span.caret {
            right: 9px;
            position: absolute;
            top: 14px;
        }


/*User Perm CSS*/
.upTBL {
    overflow: auto;
}

    .upTBL table {
        border: solid 1px #ccc;
    }

        .upTBL table tr {
            height: auto;
        }

        .upTBL table th {
            font-size: 11px;
            text-align: center;
            padding: 5px !important;
            vertical-align: middle !important;
            border-right: solid 1px #ccc;
            background: #404040;
            color: #fff;
            font-weight: 400;
        }

        .upTBL table tr:nth-child(odd) {
            background-color: #f2f2f2;
        }

        .upTBL table tr td:first-child {
            display: none;
        }

        .upTBL table td {
            font-size: 12px;
            text-align: center;
            border-right: solid 1px #ccc;
            border-bottom: solid 1px #ccc;
            padding: 5px;
        }

            .upTBL table td input {
                border: solid 1px #ccc;
                padding: 5px;
            }

/*VehicleTabulerDashboard CSS*/
.topFilter {
    background: #f5f5f5;
    border: solid 1px #ccc;
    border-radius: 4px;
    margin: 10px 15px;
    padding: 10px;
}

    .topFilter h2 {
        font-size: 13px;
        font-weight: bold;
        color: #404040;
        padding: 0;
        margin: 0 0 6px 15px;
        display: none;
    }

    .topFilter label {
    }

        .topFilter label.filterSelectedVal {
            font-weight: normal;
            color: #ec971f;
        }

        .topFilter label.filterSelectedValError {
            font-weight: normal;
            color: red;
        }

    .topFilter .inputBox {
        /*display: inline-block;
        width: 74%*/
    }

.vtdContent {
}

.vtdtblBoxContent {
    padding: 5px;
}

    .vtdtblBoxContent table, .vtdtblBoxContent td {
        border: none !important;
    }

    .vtdtblBoxContent .table-striped > tbody > tr:nth-of-type(2n+1) {
        background-color: #fff !important;
    }

    .vtdtblBoxContent .table-striped > tbody > tr:nth-of-type(2n+2) {
        background-color: #f9f9f9 !important;
    }

    .vtdtblBoxContent thead {
        background: #e9efed;
        color: #0a8948;
        font-size: 14px;
        font-weight: 500;
    }

        .vtdtblBoxContent thead td {
            font-size: 13px;
        }

    .vtdtblBoxContent td {
        font-size: 12px;
        text-align: right;
        padding: 8px 5px !important;
    }

        .vtdtblBoxContent td:first-child {
            text-align: left;
        }

        .vtdtblBoxContent td.colHeader {
            font-weight: bold;
            background: #fff !important;
            text-align: left;
        }

        .vtdtblBoxContent td a {
            text-decoration: underline;
        }

            .vtdtblBoxContent td a:hover {
                text-decoration: none;
            }

        .vtdtblBoxContent td p {
            padding: 0;
            margin: 0;
        }

.followPopup {
    position: absolute;
    z-index: 9999999999;
    top: 88px;
    background: #fff;
    padding: 10px;
    width: 262px;
    right: 42px;
}

.vTDPops {
    top: 20px;
    /*width: 99%;*/
    width: 60%;
    height: 300px;
}

    .vTDPops tr td {
        border-bottom: 1px !important;
        font-size: 12px;
    }

.vTDPops, .tblOverflow {
    max-height: 80vh;
}

    .vTDPops tbody > tr:nth-of-type(2n+1) {
        background: #fff;
    }

.graphFilters {
    display: flex;
    justify-content: center;
    padding: 15px 0 0 0;
    align-items: center;
}

    .graphFilters select {
        width: 200px;
        margin: 0 10px;
    }

.vTDPops thead tr td {
    background: #e9efed;
    font-size: 13px;
    font-weight: 500;
    color: #0a8948;
}

    .vTDPops thead tr td a {
        color: #0a8948;
    }

    .vTDPops thead tr td i {
        float: right;
    }

.dvDriverIntervention .dvDriverInterventionWht {
    background: #fff;
    padding: 10px;
    max-height: 98vh;
    overflow: auto;
    overflow-x: hidden;
}

a.bkDriverList {
    display: inline-block;
    margin-top: 10px;
    right: 77px;
    top: 25px;
    margin: 0;
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
    font-size: 12px;
}

    a.bkDriverList:hover {
        color: #fff;
        text-decoration: none;
    }

.dashboardInfoPopup {
    position: absolute;
    top: 25px;
    left: 0;
    width: 100%;
    margin: 0 auto;
    z-index: 999999;
    padding: 10px;
    height: 100%;
}

    .dashboardInfoPopup .infoTxt {
        font-size: 14px;
        padding: 10px;
        line-height: 20px;
    }

.infoTxt ul {
    margin: 0 0 0 10px;
}

    .infoTxt ul li {
        margin-bottom: 10px;
    }

.addChkList table {
    width: 100%;
    margin-top: 15px;
}

    .addChkList table tr:nth-child(2n+2) {
        background: #f8f8f8;
    }

    .addChkList table td {
        padding: 10px !important;
    }

.didv input {
    width: 100% !important;
}

.didvAction {
    text-align: right;
}

.didvVubdChk {
    display: flex;
}

    .didvVubdChk div {
        text-align: center;
        border: solid 1px #ccc;
        border-radius: 5px;
        padding: 5px;
        margin: 0 5px;
    }

        .didvVubdChk div label, .didvVubdChk div input {
            padding: 0;
            margin: 2px 0;
        }

.beDateTime {
    padding: 0;
    margin: 0;
}

    .beDateTime #datetimepickerFromBehavior {
        float: left;
        width: 49%;
        margin: 0 5px 0 0;
    }

    .beDateTime #datetimepickerToBehavior {
        float: left;
        width: 49%;
    }

    .beDateTime label {
        display: block !important;
        float: none !important;
    }

    .beDateTime input {
        height: 28px !important;
        width: 100% !important;
    }

.beSearchBtn {
    padding: 15px;
}

    .beSearchBtn #btnSearch {
        float: right;
    }

table#DriverLogdate {
}

    table#DriverLogdate thead {
        background: #404040;
        color: #fff;
        font-size: 12px;
    }

    table#DriverLogdate tbody {
        font-size: 12px;
    }

    table#DriverLogdate > tbody > tr:nth-child(2n+1) {
        background: #fff;
    }

.beTblWrapper {
    height: 300px;
    overflow: auto;
}

input#txbMinSpeedBehavior, input#txbMinViolationBehavior {
    width: 100%;
    margin: 0;
}

.customPadMar .table tr td {
    padding: 4px !important;
}

#dvMultiselectGeoFenceIdList .dropdown-multiselect, #dvMultiselectLocationList .dropdown-multiselect {
    position: absolute;
    width: 16%;
}

#dvMultiselectGeoFenceIdList .dropdown-toggle, #dvMultiselectLocationList .dropdown-toggle {
    width: 260px;
    text-align: left;
    width: 100%;
}

    #dvMultiselectGeoFenceIdList .dropdown-toggle .caret, #dvMultiselectLocationList .dropdown-toggle .caret {
        margin-left: 0;
        position: absolute;
        right: 10px;
        top: 14px;
    }

.agfTblinnerbox {
    position: relative;
    border-radius: 3px;
    background: #fff;
    border-top: 3px solid #d2d6de;
    margin: 0 10px 10px 0;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    border: solid 1px #dfdfdf;
    padding: 10px;
    overflow: hidden;
}

.agfTopFilter {
    margin: 10px 0;
}

.agfTbl table thead td {
    background: #ABABAB;
    color: #404040;
    text-transform: uppercase;
    font-weight: bold !important;
    font-size: 12px !important;
    padding: 8px 5px !important;
}

.agfTbl table thead tr td, .agfTbl table thead tr td a {
    color: #404040 !important;
}

.agfTbl table tr td {
    border-bottom: solid 1px #ccc;
    border-right: solid 1px #ccc;
    padding: 5px;
    font-size: 12px;
    text-transform: none;
    font-weight: normal;
    text-align: center;
}

.agfTbl table tr:nth-child(2n+2) {
    background: #f8f8f8;
}
/***live Alarm Popup CSS***/
.liveAlarmPopup {
    background: #fff;
    top: 20px;
    padding: 10px;
    border: solid 2px #1dc454;
    left: 0;
    right: 0;
    margin: 0 auto;
}

#vidoWrapper {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
}

.liveAlarmPopup h2 {
    background: #029545;
    color: #fff;
    padding: 10px;
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: bold;
}

.liveAlarmPopup .alertvideo {
    width: 49.1%;
    float: left;
    padding: 0 0px;
    position:relative;
}
/*add css*/
#PopUpVideo .list-right-section {
    max-height: 570px;
    overflow: hidden;
    padding: 0 10px;
}

#PopUpVideo .left-video-section {
    background: #fff;
    /*padding:0 15px*/
    padding: 0;
}

.liveAlarmPopup .alertvideo .innerbox {
    /*height: 140px;*/
    height: 185px;
    padding: 0;
    margin: 0;
}

#PopUpVideo .note-section textarea {
    width: 100%;
    display: block;
    margin-top: 5px;
    padding: 5px;
}

.liveAlarmPopup .alertvideo:first-child {
    margin-right: 10px;
}

#PopUpVideo .note-section div {
    margin-bottom: 20px;
    text-align: right;
}

    /*#PopUpVideo .note-section div input[type=button]#btnNotInterested, .submitReviewAdminNI {
        text-decoration: underline;
        border: none;
        margin-right: 10px;
        background: none;
    }*/
#PopUpVideo .note-section .msgAlarmComments{
    display: block;
    /*text-align: center;
    margin-top: 4px;*/
}
.submitReviewAdminNI {
    text-decoration: none;
}

#PopUpVideo .note-section div .submitButton, .note-section div .submitButton {
    text-align: right;
    float: right;
    color: #fff;
    font-size: 15px;
    margin: 0;
    padding: 4px 8px;
    text-transform: none !important;
    text-decoration: none;
    display: inline-block;
    letter-spacing: 0.5px;
    font-weight: 500;
    border: 1px solid #08704a;
    margin-top: 10px;
    border-radius: 4px;
    background: #08704a;
}

#PopUpVideo .note-section div .notInterestedButton, .note-section div .notInterestedButton {
    text-align: right;
    float: left;
    color: #fff;
    font-size: 15px;
    margin: 0;
    padding: 4px 8px;
    text-transform: none !important;
    text-decoration: none;
    display: inline-block;
    letter-spacing: 0.5px;
    font-weight: 500;
    border: 1px solid #08704a;
    margin-top: 10px;
    border-radius: 4px;
    background: #08704a;
}

#PopUpVideo .note-section div .ignoredButton, .note-section div .ignoredButton {    
    border: 1px solid #f0ad4e;   
    background: #f0ad4e;
}

.cRowIgnored {
    background-color: antiquewhite;
    color: #f0ad4e;
}
.note-section span {
    color: #029545;
    /*margin-bottom: 17px;*/
    margin-bottom: 0;
}

.table-alarmList tbody > tr > td {
    vertical-align: middle !important;
}

.table-alarmList tbody > tr > td, .table-alarmList thead > tr > td {
    font-size: 11px;
    padding: 4px !important;
    border-top: none !important;
}

.fqAlarmList {
    display: flex;
    margin: 8px 0;
    align-items: center;
    padding: 0;
}

    .fqAlarmList:hover {
        background-color: #efefef;
        cursor: pointer;
    }

    .fqAlarmList.active {
        background-color: #efefef;
        cursor: pointer;
    }

.table-alarmList tbody > tr:hover {
    background-color: #edebe9;
    cursor: pointer;
}

.fqAlarmList .iNumbers {
    background: #0e8749;
    color: #fff;
    padding: 5px;
    vertical-align: middle;
    border-radius: 100%;
    height: 20px;
    width: 20px;
    text-align: center;
    line-height: 12px;
    margin: 0 10px 0 0;
}

.fqAlarmList .lDescription h2 {
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #3d3c3b;
    font-weight: 400;
    background: none;
}

.fqAlarmList .lDescription p {
    padding: 0;
    margin: 0;
    font-size: 12px;
    color: #3d3c3b;
    font-weight: 300;
}
/*.table>tbody>tr>td span {
    background: #029545;
    color: #fff;
    padding: 5px 8px;
    vertical-align: middle;
    border-radius: 50%;
    height: 20px;
    width: 20px;
}*/
.teble-heading {
    font-size: 12px;
    font-weight: 500;
    margin-top: 5px;
}

table#AlarmList1 .table > tbody > tr > td {
    border-top: none;
    font-size: 12px;
}

div#vidoWrapper .BlockOfVideo .blockOfVideoBg {
    margin-top: 0px;
    /*height: 300px;
    height: 250px;*/
    overflow: auto;
    min-height: 225px;
}

.liveAlarmPopup .alertvideo .innerbox span {
    display: none;
}
/*end*/
.liveAlarmPopup .alertvideo video {
    width: 100%;
}

.liveAlarmPopup .popcloseBtn {
    right: 8px;
    top: 8px;
}

.alertvideo h3 {
    color: #fff;
    /*font-size: 14px;
    font-weight: 500;
    padding: 7px;*/
    font-size: 12px;
    font-weight: 500;
    padding: 6px;
    margin: 0 0 5px 0;
    text-align: left;
    background: rgba(26,26,26,.8);
    display: inline-block;
    position: absolute;
}

#arVidoWrapper .alertvideo .innerbox, #arVidoWrapper1 .alertvideo .innerbox {
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    border: solid 1px #dfdfdf;
    border-radius: 3px;
    padding: 6px;
}

    #arVidoWrapper .alertvideo .innerbox video {
        width: 100%;
        margin-bottom: 5px;
    }

    #arVidoWrapper .alertvideo .innerbox span {
        font-size: 14px;
        display: block;
    }

#arVidoWrapper .blockOfVideoBg, .blockOfVideoBg {
    background: #ebebeb;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 0px;
}
/*#vidoWrapper .blockOfVideoBg {
    padding:10px;
    margin:10px
}*/
.videoLoadMore {
    border: solid 1px #ccc;
    border-radius: 5px;
    width: 260px;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    margin: 6px auto;
    padding: 10px 0;
    color: #404040;
}

    .videoLoadMore:hover {
        background: #009444;
        color: #fff;
        text-decoration: none;
    }

.alertvideo span {
    display: block;
}

#btnNotInterested:hover {
    text-decoration: none;
}

#arVidoWrapper1 .alertvideo .innerbox .evidence-pic {
    margin-bottom: 2px;
}

    #arVidoWrapper1 .alertvideo .innerbox .evidence-pic img {
        max-width: 100%;
        cursor: pointer;
    }

#arVidoWrapper1 .alertvideo .innerbox .evidence-info {
    /*max-height: 80px;*/
    min-height: 80px;
    overflow: auto;
}

    #arVidoWrapper1 .alertvideo .innerbox .evidence-info span {
        margin: 2px 0;
        font-size: 12px;
    }

        #arVidoWrapper1 .alertvideo .innerbox .evidence-info span.evidenceName {
            font-weight: bold;
        }

.submitReviewAdmin {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 8px 0 15px 0;
}

    .submitReviewAdmin .submitButton {
        margin: 0 10px;
    }

#arVidoWrapper1 .BlockOfVideo {
    padding: 1px;
}

    #arVidoWrapper1 .BlockOfVideo .innerbox {
        margin: 0;
    }

.searchFilter {
    /*position: absolute;*/
    z-index: 99;
    box-shadow: 2px 4px 12px rgba(0,0,0,0.18);
    top: 48px;
    left: 0;
    width: 100%;
}

    .searchFilter .form-box1 {
        border: none;
        padding: 10px 24px;
    }

        .searchFilter .form-box1 label {
            font-size: 12px;
            font-weight: 500;
        }

.searchFicon {
    float: right;
    display: block;
}

#arVidoWrapper1 {
    overflow: auto;
    /* height: 75vh;*/
}

.recordTC {
    position: relative;
}

    .recordTC span {
        background: #f27d30;
        border-radius: 100%;
        position: absolute;
        right: -23px;
        top: -3px;
        font-size: 12px;
        padding: 5px;
        color: #fff;
        font-weight: 500;
        width: 14px;
        height: 14px;
        line-height: 14px;
        text-align: center;
    }

.lrComents {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
}

.lrViewComments {
    padding: 0;
    margin: 0;
    width: 49%;
}

    .lrViewComments .overFlowDiv {
        max-height: 118px;
        overflow: auto;
    }

.lrComents .note-section {
    width: 49%;
}

.lrViewComments span {
    display: block;
}

.lrViewComments .cTop {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
}

    .lrViewComments .cTop span.uName {
        font-weight: bold;
        font-size: 14px;
    }

    .lrViewComments .cTop span.cDate {
        font-weight: 400;
        font-size: 10px;
    }

.lrViewComments span.uComments {
    font-weight: 400;
}

.cRow {
    border-bottom: solid 1px #ccc;
    margin: 0 0 5px;
    padding: 0 0 3px;
}

span.lrCtitle {
    color: #029545;
    /*margin-bottom: 17px;*/
    margin-bottom: 0;
    font-size: 12px;
}

.note-section .top {
    display: flex;
    justify-content: space-between;
    margin: 0 !important;
}

    .note-section .top #btnNotInterested {
        text-decoration: underline;
        border: none;
        margin-right: 10px;
        background: none;
    }

#myMapForAlarm {
    max-height: 120px !important;
}

#myMapForAlarmGPS {
    max-height: 180px !important;
}

.videoRowWrapper .note-section {
    margin: 10px 0 0 0;
}

.Processing, .Completed, .Offline, .Communicating, .Queued, .Pending, .Downloading, .MediaDownloaded, .MediaUnavailable, .Failed {
    position: relative;
    padding-left: 18px !important;
}

    .Processing:before, .Completed:before, .Offline:before, .Communicating:before {
        content: '';
        position: absolute;
        left: 5px;
        top: 12px;
        width: 8px;
        height: 8px;
    }

    .Processing:before, .Communicating:before {
        background: #fdb913;
    }

    .Completed:before {
        background: #3597dc;
    }

    .Offline:before {
        background: #7f7f7f;
    }

    .Queued:before {
        background: #c04c31;
    }
    .Pending:before {
        background: #f2c572;
    }
    .Downloading:before {
        background: #81a489;
    }
    .MediaDownloaded:before {
        background: #b2a2c7;
    }
    .MediaUnavailable:before {
        background: #2da179;
    }
    .Failed:before {
        background: #b6b5b1;
    }

.reqVideoListTop {
    overflow: hidden;
    width: 96%;
    margin: 5px auto;
}

    .reqVideoListTop h2.teble-heading {
        float: left;
        text-align: center;
    }

    .reqVideoListTop .refereshBtn {
        float: right;
    }

.video-js{
    max-height: 240px;
    width: 100%;
}
.video-height {
    /*height: 225px;*/
    height: 195px;
    width: 100% !important;
    background:#000
}
.ReuestVideo-height {
    height: 250px; /*height: 275px;*/
    width: 100% !important;
    background:#000
}

.PopupAlarmLiveView {
    top: 5px !important;
    left: 0 !important;
    right: 0 !important;
}


/*CSS for order details popup*/
.od-title {
    padding: 0;
    margin: 0 0 10px;
}

.od-title h4 {
    padding: 0;
    margin: 0;
    color: #009444;
    font-size: 16px;
    font-weight: 600;
}

.od-top-details {
}

.od-top-details .flex-div {
    display: flex;
    justify-content: space-between;
}

.od-top-details .od-row {
    margin-bottom: 5px;
}

.od-top-details .od-row label {
    font-weight: 600;
    font-size: 14px;
    color: #404040;
    padding: 0;
    margin: 0;
}

.od-top-details .od-row p {
    padding: 0;
    margin: 0;
}

.od-status-tracking {
    border-top: solid 1px #b2dcba;
    margin: 10px 0;
    padding-top: 10px;
}


.stepwizard-step p {
    margin-top: 10px;
    color: #009444;
}

.stepwizard-row {
    display: table-row;
}

.stepwizard {
    display: table;
    width: 100%;
    position: relative;
}

.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

.stepwizard-row:before {
    top: 54px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-order: 0;
}

.stepwizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
}

.steps-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 0;
    font-size: 12px;
    line-height: 30px;
    border-radius: 100%;
    display: inline-block;
    background: #404040;
}

.circle-active {
    background: #009444 !important;
    position: relative;
}

.circle-active:before {
    content: '';
    background: url(images/od-checked.png) no-repeat;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 7px;
    left: 7px;
}

.od-status-tracking .od-st-row {
    max-height: 150px;
    overflow: auto;
}

.od-status-tracking .od-st-cell {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background: #ebebcc;
}

.od-st-cell .qty-cell {
    color: #009444;
}

.od-status-tracking .od-st-cell:nth-child(even) {
    background: #ffffdd;
}

.click-on {
    text-decoration: underline;
    color: #009444;
    cursor: pointer;
}

.click-on:hover {
    text-decoration: none;
}
/* End CSS for order details popup*/

@media only screen and (max-width: 768px) {
    .loginWrapper {
        width: 90%;
        padding: 0;
    }

    .loginForm .subHeading {
        text-align: center;
    }

    .loginForm {
        background: rgba(255, 255, 255, 0.9);
    }

        .loginForm .subHeading p {
            line-height: normal;
        }

        .loginForm .formFild input {
            width: 90%;
        }

            .loginForm .formFild input.loginButton, .loginForm .subHeading {
                margin-top: 20px;
            }

    .loginBox {
        width: 98%;
        padding: 5px;
        position: inherit;
        margin: 7% 0;
    }

    .loginForm .formFild span, .loginForm .formFild a {
        float: none;
    }

    .loginForm .formFild a {
        display: block;
        margin: 10px 0 0 0;
    }

    .loginForm .formFild .fild {
        text-align: center;
    }
}

@media only screen and (max-width: 1199px) {
    .companyLogo {
        text-align: center;
        margin: 8px 0 0 0;
    }

    .headerWrapper .companyLogo img {
        float: none;
    }

    .dqNewHeader, .sidebar-header {
        height: auto;
        /*overflow:hidden;*/
        background-repeat: repeat;
        overflow: hidden;
    }

    .headerWrapper .rgt-info .leftUserInfo h4.loginOnly {
        text-align: center;
    }

    .headerWrapper {
        width: 90%;
        padding: 0;
    }

        .headerWrapper .companyLogo h1 {
            float: none;
            text-align: center;
            margin: 10px 0 0 0;
            font-size: 12px;
        }

        .headerWrapper .rgt-info .leftUserInfo {
            width: 288px;
            margin: 0 auto;
            float: none;
        }

            .headerWrapper .rgt-info .leftUserInfo h4 {
                text-align: center;
                float: none;
                margin: 5px 0 10px;
            }
}

@media (min-width: 1200px) and (max-width: 1280px) {
    .headerWrapper {
        width: 86%;
    }
}




.formFild label {
    text-transform: uppercase;
    font-size: 14px;
    margin: 0 0 3px 0;
    display: block;
    color: #000;
}



/*.formFild input {
    border: 1px solid #ccc;
    color: #666666;
    height: 26px;
    width: 100%;
}*/

.formFild select {
    border: 1px solid #ccc;
    color: #666666;
    height: 30px;
    width: 100%;
    padding: 5px;
}

/*.fild {
    margin: 10px 0 0 0;
}*/

.marginNone {
    margin: 0 !important;
}

.loginErrorMSG, .errormsg, .failureNotification {
    color: #a30000 !important;
    display: block;
    font-size: 12px !important;
    margin: 0;
    padding: 0;
}

.loginErrorMSG1 {
    color: #a30000 !important;
    display: block;
    font-size: 12px;
    padding: 1px 0;
}



/*******Master page inpage CSS*****/
tbody tr.Off td {
    background-color: #B5AEB0;
}

tbody tr.Idling td {
    background-color: #FFF0F0;
}

.log a {
    width: 100% !important;
    text-align: left !important;
}

.log .icon-remove:before {
    padding-right: 10px;
}

tbody tr.UNKNOWN td {
    background-color: #fa867b;
}

tbody tr.Unknown td {
    background-color: #fa867b;
}

tbody tr.GARMIN_NOT_POWERED td {
    background-color: #ADFF2F;
}

tbody tr.GARMIN_READY td {
    background-color: #9bcb8f;
}

tbody tr.GARMIN_NOT_SEEN td {
    background-color: #f9de73;
}

tbody tr.Speeding td {
    background-color: #FFFFEA;
}

tbody tr.Stopped td {
    background-color: #FFE1E1;
}

tbody tr.Moving td {
    background-color: #CCFFD9;
}

tbody tr.StartOfDay td {
    background-color: #CCFFD9;
}

tbody tr.NotMoving td {
    background-color: #FFF0F0;
}

tbody tr.UpLoading td {
    background-color: #E6FFE6;
}

tbody tr.EnRoute td {
    background-color: #CCFFD9;
}

tbody tr.Completed td {
    background-color: #CEFFFF;
}

tbody tr.InComplete td {
    background-color: #FFFFEA;
}

/*tbody tr.InActive td {
    background-color: #E5E5E5;
}*/

tbody tr.Returning td {
    background-color: #EAFFFF;
}

tbody tr.Enroute td {
    background-color: #E6FFE6;
}

tbody tr.NewOrder td {
    background-color: #CCFFD9;
}

tbody tr.Delivered td {
    background-color: #CEFFFF;
}

tbody tr.ArrivedForDelivery td {
    background-color: #EAFFFF;
}

tbody tr.namealreadyused td {
    background-color: #FADCDD;
}

tbody tr.nosuchcustomer td {
    background-color: #FADCDD;
}

tbody tr.invaliddata td {
    background-color: #FADCDD;
}

tbody tr.baddata td {
    background-color: #FADCDD;
}

tbody tr.duplicate td {
    background-color: #FADCDD;
}

tbody tr.imported td {
    background-color: #E2FCE3;
}

tbody tr.failed td {
    background-color: #FADCDD;
}

tbody tr.deleteted td {
    background-color: #E2FCE3;
}

tbody tr.Engaged td {
    background-color: #FFFFFF;
}

tbody tr.PTOMoving td {
    background-color: #F6EB1F; /*F7F172  F7EE43*/
}

.LAlign {
    text-align: right;
}

.CtrAlign {
    text-align: center;
}

.hide {
    visibility: hidden;
}

.body {
    min-height: 100%;
}

.DirectoryGridHeader {
    background-image: url('../v2.gif');
}


/***********Css For Main Navigation****************/
#menu-wrapper {
    background: url(images/navMainBg.png) repeat-x;
    height: 38px;
}

    #menu-wrapper .menu1 {
        padding: 0;
        margin: 0;
    }

        #menu-wrapper .menu1 ul {
            margin: 0;
            list-style-type: none;
            position: relative;
            overflow: inherit;
        }

            #menu-wrapper .menu1 ul li {
                position: relative;
                float: left;
                background: none;
            }

                #menu-wrapper .menu1 ul li a {
                    padding: 18px 12px;
                    margin: 0 1px 0 0;
                    font: normal 16px/0 Arial, Helvetica, sans-serif;
                    color: #fff !important;
                    display: inline-block;
                    border-right: solid 1px #565656;
                }

                    #menu-wrapper .menu1 ul li.active a, #menu-wrapper .menu1 ul li a:hover {
                        background: url(images/navHover.png) repeat-x;
                        color: #fff !important;
                        text-decoration: none !important;
                    }
/*#menu-wrapper .menu1 ul li.active li a
{
    color: #dedede;
}*/

.selectnav {
    display: none;
    width: 100%;
    border: none;
    margin: 0 auto;
    padding: 10px;
    cursor: pointer;
    background: url(images/navMainBg.png) repeat-x #00892b;
    color: #fff;
    text-align: center;
    font-weight: bold;
}

#selectnav1 > option {
    line-height: 24px;
    padding: 2px 0 2px 10px;
    text-align: left;
}




/************Css For Sub Navigation***************/
div.tabBox {
    /*float: left;*/
    overflow: visible;
    margin: 15px 0 0 10px;
    margin-bottom: 0;
}

ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    /*height: 32px;*/
    width: 99.9%;
}

    ul.tabs li {
        float: left;
        margin: 0;
        padding: 0;
        line-height: 32px;
        margin-bottom: -1px;
        overflow: hidden;
        position: relative;
    }

        ul.tabs li a {
            display: block;
            padding: 0 10px;
            outline: none;
            background: none;
        }

.tabContainer {
    border-top: none;
    overflow: hidden;
    clear: both;
    float: left;
    width: 99.9%;
    min-height: 300px;
    margin-bottom: 10px;
}

.tabContent {
    padding: 20px;
}

    .tabContent h3 {
        padding: 0px;
    }
/**** TABS STYLES ****/

div.tabBox h3 {
}

ul.tabs {
    border-left: 1px solid #ccc;
    border-top-left-radius: 5px;
    -moz-border-top-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
}

    ul.tabs li {
    }

        ul.tabs li a {
            background: #fff;
            text-decoration: none;
            font-size: 14px;
            font-weight: bold;
            color: #404040;
            outline: none;
            border: 1px solid #ccc;
            border-top-left-radius: 5px;
            -moz-border-top-left-radius: 5px;
            -webkit-border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            -moz-border-top-right-radius: 5px;
            -webkit-border-top-right-radius: 5px;
            margin: 0 1px 0 0;
        }

        ul.tabs li:first-child a {
            border-left: none;
        }

        ul.tabs li a:hover {
            background: #eee;
        }

        ul.tabs li.subactive {
            border-bottom: 1px solid #def5e6;
        }

            ul.tabs li.subactive a, ul.tabs li.subactive a:hover {
                background: #def5e6;
                color: #00882a;
            }

div.tabContainer {
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    background: #fff;
}

@media only screen and (max-width: 767px) {
    .liveAlarmPopup {
        width: 92% !important;
    }

        .liveAlarmPopup .alertvideo {
            margin: 0;
            width: 100%;
        }

    .settingddlWrapper {
        position: inherit;
        padding: 10px 0 !important;
        border: none !important;
        float: none;
        margin: 0 auto !important;
        width: 99%;
        display: flex;
        justify-content: center;
    }

    .SettingHead h2 {
        float: none !important;
    }

    .dashboardTabs.dpSettingTabs {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
    }

    .dpSettingTabs > li > a {
        font-size: 12px;
    }

    .dashboardTabs {
        position: inherit;
        margin: 20px auto 0;
        width: 252px;
    }

    .dashboardContent .topFiletr span {
        display: block;
    }

    div.tabBox {
        border: 1px solid #ccc;
        margin: 15px 10px 0;
    }

    ul.tabs {
        height: auto;
        display: block;
        width: 100%;
        border-left: 0px;
    }

        ul.tabs li {
            width: 100%;
        }

            ul.tabs li a {
                border-top-left-radius: 0px;
                -moz-border-top-left-radius: 0px;
                -webkit-border-top-left-radius: 0px;
                border-top-right-radius: 0px;
                -moz-border-top-right-radius: 0px;
                -webkit-border-top-right-radius: 0px;
                border: 0px;
            }

    div.tabContainer {
        border: 0px;
    }

    .hamburger {
        right: inherit;
    }
}

/*********Css For Footer************/
#push {
    height: 30px;
}

.newFooter {
    height: 28px;
    border-top: solid 2px #009444;
    width: 100%;
    background-color: #f5f5f5;
    padding: 0 !important;
}

.copyRight {
    float: left;
    margin: 5px 0 0 5px;
    font-size: 11px;
    color: #000 !important;
}

.designBy {
    float: right;
    margin: 5px 5px 0 0;
}

    .designBy img {
        vertical-align: middle;
    }

.testWidth table {
    width: 100% !important;
}
/*.testWidth table th, .testWidth table td {
        width:auto !important
    }*/

.newCheckbox {
    padding: 0;
    margin: 0;
}

    .newCheckbox input {
        margin: 0 2px 0 0;
        text-align: center;
    }

    .newCheckbox td {
        display: inline;
        padding: 0 5px;
        text-align: left;
        vertical-align: top;
    }

.selectCustomerTable {
    padding: 0;
    margin: 0;
}

    .selectCustomerTable td {
        padding: 0;
        margin: 0;
    }

.scaloverlay {
    display: none;
    background-color: #000000;
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

.printBtn {
    background: url(images/printIco.png) no-repeat;
    width: 27px;
    height: 27px;
    border: none !important;
    vertical-align: top;
    display: inline-block;
    cursor: pointer;
}


/*form css*/
.form-layout {
    width: 100%;
}

/*.user-info label>span {
    float: left;
    width: 20%;
    text-align: right;
    padding-right: 10px;
    margin-top: 10px;
    color: #333;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
}*/

.user-info1 fieldset {
    margin: 0 !important;
    background: #fff !important;
    border: 0 !important;
    padding: 0 !important;
}

.user-info1 legend {
    font-size: 14px;
    color: #333;
    font-weight: 600;
    background: url("images/navMainBg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
    padding: 5px 8px 5px 8px;
    color: #fff;
}

.user-info legend {
    font-size: 14px;
    color: #333;
    font-weight: 600;
    background: url("images/navMainBg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
    padding: 5px 8px 5px 8px;
    color: #fff;
}

.user-info input[type="text"], .user-info input[type="email"], .user-info textarea, .user-info select, .user-info input[type="checkbox"], .user-info input[type="password"] {
    border: 1px solid #DADADA;
    color: #888;
    height: 22px;
    margin-right: 6px;
    outline: 0 none;
    padding: 3px 3px;
    width: 96%;
    font-size: 12px;
    box-shadow: inset 0px 1px 4px #ECECEC;
    -moz-box-shadow: inset 0px 1px 4px #ECECEC;
    -webkit-box-shadow: inset 0px 1px 4px #ECECEC;
}

    .user-info input[type="text"]:focus, .user-info input[type="email"]:focus, .user-info textarea:focus, .user-info select:focus, .user-info input[type="password"]:focus {
        border: solid 1px #2ea9c5 !important;
        box-shadow: 0 0 3px #999;
        outline: medium none;
    }

.user-info textarea {
    padding: 5px 3px 3px 5px;
}

.user-info select {
    /*-webkit-appearance:none;*/
    /*-moz-appearance: none;*/
    text-indent: 0.01px;
    line-height: 28px;
    height: 28px;
}





.user-info input[type="checkbox"] {
    display: inline-block;
    width: 13px;
    margin: -1px 4px 0 0;
    vertical-align: middle;
    background: transparent;
    cursor: pointer;
    border: none !important;
}

.user-info textarea {
    height: 100px;
}

.user-info td {
    padding: 5px 1px;
}

.user-info fieldset {
    margin: 0 !important;
    background: #f4f4f4 !important;
}

#PopupSelectMap, #PopUpReports, #dvAcceptReject, #DeviceEditPopup {
    padding: 10px !important;
    top: 80px !important;
    color: #404040;
    left: 0 !important;
    margin: 0 auto;
    right: 0 !important;
}
    /*#PopupSelectMap table {
        width:100%
    }*/
    /*#description {       
        height:570px;     
        overflow: hidden;      
       
      }*/
    #PopupSelectMap label, .lbl {
        font-size: 12px !important;
        font-weight: bold !important;
    }

.user-info table td {
}

    .user-info table td:last-child {
    }

.user-info table tr {
    padding: 10px;
}

.close {
    position: absolute;
    right: 4px;
    top: 8px;
    width: 30px;
    height: 30px;
    background: url(../images/close.png) no-repeat;
    z-index: 9999999999 !important;
    cursor: pointer;
}

input.close {
    border: none;
}

/*user Import*/
.statistics {
    width: 250px;
    overflow: hidden;
    margin-left: 20px;
}

    .statistics fieldset {
        border: solid 1px #6ac086;
        background: #fff;
        margin: 0;
    }

    .statistics legend {
        font-size: 20px;
        background: #fff;
        padding: 0px 10px;
    }



.input {
    border: 1px solid #DADADA;
    color: #888;
    line-height: 20px;
    margin-right: 6px;
    outline: 0 none;
    padding: 3px 3px 3px 5px;
    font-size: 12px;
    box-shadow: inset 0px 1px 4px #ECECEC;
    -moz-box-shadow: inset 0px 1px 4px #ECECEC;
    -webkit-box-shadow: inset 0px 1px 4px #ECECEC;
}

.checkbox input[type="checkbox"] {
    border: none;
    color: #888;
    line-height: 20px;
    margin-right: 6px;
    outline: 0 none;
    padding: 3px 3px 3px 0px;
    font-size: 12px;
    -moz-box-shadow: inset 0px 1px 4px #ECECEC;
    -webkit-box-shadow: inset 0px 1px 4px #ECECEC;
}


    .checkbox input[type="checkbox"] + label {
        font-size: 14px;
        padding: 0 24px 0 0;
    }

.user-info .title {
    font-size: 15px;
}

.rgt {
    float: right !important;
}

.lft {
    float: left !important;
}

.modalPopup {
    background-color: #ffffdd;
    border-width: 3px;
    border-style: solid;
    border-color: #1dc454;
    padding: 3px;
    position: fixed;
    display: none;
    z-index: 1005;
}

.marg-rgt-fv {
    margin-right: 5px;
}

.raccordion {
    background: none repeat scroll 0 0 #429C46;
    color: #FFFFFF;
    margin: 1px 0;
    overflow: hidden;
    clear: both;
    width: 100%;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border: 0px solid #000000;
}

.raccordion-title {
    cursor: pointer;
    display: block;
    font-size: 15px;
    font-weight: normal !important;
    height: 20px;
    padding: 0 0 6px 10px;
    color: #fff !important;
    width: 99%;
}

.raccordion-content {
    background: #fff;
    color: #333;
    font-size: 12px;
    padding: 10px;
    clear: both;
    border: solid 1px #ccc;
}

.raccordion-arrow {
    height: 28px;
    width: 29px;
}

.arrow-up {
    background: url("../images/arrow-down.png") no-repeat scroll 99% 4px / 23px auto rgba(0, 0, 0, 0);
}

.arrow-down {
    background: url("../images/arrow-up.png") no-repeat scroll 99% 4px / 23px auto rgba(0, 0, 0, 0);
}

#jquery-script-menu {
    position: fixed;
    height: 90px;
    width: 100%;
    top: 0;
    left: 0;
    border-top: 5px solid #316594;
    background: #fff;
    -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
    z-index: 999999;
    padding: 10px 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.jquery-script-center {
    width: 960px;
    margin: 0 auto;
}

    .jquery-script-center ul {
        width: 212px;
        float: left;
        line-height: 45px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .jquery-script-center a {
        text-decoration: none;
    }

.jquery-script-ads {
    width: 728px;
    height: 90px;
    float: right;
}

.jquery-script-clear {
    clear: both;
    height: 0;
}




/******Style.CSS copy Here*******/


/* CSS Document */
#map_Tracking, #map_position {
    height: 100%;
}


/*#wrapper{
	padding:0;
	margin:2px 0 0 0;
	width:100%;
	}*/
.header {
    padding: 0;
    margin: 0;
    height: 50px;
    width: 100%;
    background-color: #009933;
}

.logo {
    padding: 0;
    margin: 0 5px 0 0;
    text-align: left;
    float: left;
    width: 60px;
}

    .logo img {
        height: 50px;
        width: 60px;
    }

.header span {
    color: #fff;
    font-weight: 200;
    font-size: 1.5em;
    margin: 20px 0 0 0;
    float: left;
    /*font-variant: small-caps;*/
}

.siteContentWrapper {
    padding: 10px 6px;
}

#container {
    background-color: #def5e6;
    border: solid 1px #ccc;
    /*border-radius:5px;*/
    padding: 10px;
    /*margin: 20px 10px;*/
    /*margin: 80px 10px 10px 10px;*/
    padding: 5px 10px;
}

    #container h2 {
        padding: 0;
        margin: 0 0 10px 0;
        font-size: 18px;
        color: #094;
        font-weight: bold;
    }

    #container h3 {
        padding: 0;
        margin: 5px 0 10px 0;
        font-size: 20px;
        color: #333;
        font-weight: 400;
        font-variant: inherit;
        text-transform: nor;
    }

.form-box {
    border: solid 1px #ccc;
    background-color: #fff;
    /*border-radius:5px;*/
    padding: 10px;
}

.form-box1 {
    border: solid 1px #ccc;
    background-color: #fff;
    /*border-radius:5px;*/
    padding: 10px;
}

.grp-loc2 .field td, .grp-loc .field td {
    vertical-align: top;
}


.form-box .field {
    clear: both;
}

.field label {
    /*display: block;
	float: left;
	line-height: 30px;
	width:100%;
	text-align:left;
	padding-right: 15px;
	font-size: 14px;
	padding-left:5px;*/
    padding-right: 5px;
    padding-left: 3px;
}

label.mandatory {
    background-image: url(images/mandatory-field.png);
    background-repeat: no-repeat;
    background-position: right 13px;
}

input.textfield, select.dropdown {
    border: solid 1px #ccc;
    border-radius: 6px;
    padding: 5px 5px 5px 5px;
    margin-bottom: 15px;
    /*line-height: 20px;*/
    /*height: 20px;*/
    color: #666;
    width: 100%;
}

.textarea {
    border: solid 1px #ccc;
    border-radius: 6px;
    margin-bottom: 15px;
    color: #666;
    width: 100%;
    height: 150px;
    padding: 3px 0;
}

    .textarea:focus {
        border: solid 1px #2ea9c5 !important;
        box-shadow: 0 0 3px #999;
        outline: medium none;
        ;
    }

input.textfield:focus, select.dropdown:focus {
    border: solid 1px #2ea9c5 !important;
    box-shadow: 0 0 3px #999;
    outline: medium none;
    ;
}

.buttons {
    padding: 0;
    margin: 10px 0 0 0;
    text-align: right;
    float: right;
}

a.mainbutton, .mainbutton {
    color: #fff;
    font-weight: bold;
    background-color: #009444;
    font-size: 13px;
    text-align: center;
    display: block;
    line-height: 28px;
    height: 30px;
    border: solid 1px #009444;
    border-radius: 5px;
    float: left;
    padding: 0 15px !important;
    box-shadow: 1px 1px 1px #666;
    /*background:#009444 url(images/arrow.png) no-repeat;
	background-position:right 8px;*/
}

input.mainbutton {
    padding: 0 15px 3px 15px;
    cursor: pointer;
}

* + html input.mainbutton {
    line-height: 23px;
}
/* IE7 Hack */
.mainbutton:hover {
    background-color: #00843C;
    text-decoration: none;
}

a.mainbutton {
    padding: 0;
}

.secondary-link {
    float: left;
    line-height: 30px;
    0;
}

    .secondary-link a {
        font-weight: normal;
        color: #094;
    }


/******************** Css for GeoFences Reports ********************/
.reportsMain {
    padding: 0;
    margin: 0;
    border: solid 1px #ccc;
    border-right: none;
    border-bottom: none;
}

.grid-view {
    margin: 20px 0;
}

.grid-head {
    border-right: solid 1px #ccc;
    padding: 5px;
    background-color: #094;
    color: #fff;
    font-weight: bold;
    text-align: center;
    font-size: 13px;
}

.left-align {
    text-align: left !important;
}

.grid-inn {
    border-right: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    background-color: #e8f1f7;
    padding: 7px 5px;
    color: #000;
    font-weight: normal;
    font-size: 13px;
    text-align: center;
}

    .grid-inn img {
        vertical-align: middle;
        margin: 0 0 0 4px;
    }

    .grid-inn a {
        color: #000;
        /*background:url(images/right-arrow.png) no-repeat;*/
        background-position: left;
        /*padding:0 0 0 15px;*/
        display: block;
    }

        .grid-inn a:hover {
            text-decoration: underline;
            color: #094;
        }

.pagination {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #fff;
    margin: 10px 0;
    background-color: #777;
    text-align: right;
}

    .pagination a {
        margin: 0 10px;
        color: #fff;
    }

/****************** PopUp Css *******************/
.title {
    font-size: 18px;
    color: #094;
    margin: 1px 0px;
    font-weight: bold;
}

* + html .title {
    margin: -10px 10px 0 10px;
    z-index: 999;
    position: relative;
    padding: 0;
}

/******* css for Note List Page **************/
.noteLcheck {
    /*margin:0 -20px 0 10px;*/
}

    .noteLcheck span {
        display: block;
        padding: 0;
        margin: 0;
    }

        .noteLcheck span input {
            /*line-height: 20px;*/
            /*height: 20px;*/
            color: #666;
            vertical-align: top;
            margin: 0;
        }

        .noteLcheck span label {
            margin: 0 0 0 3px;
            float: none !important;
            display: inline !important;
            vertical-align: top;
            line-height: 10px;
        }

input.textfield1 {
    border: solid 1px #ccc;
    border-radius: 6px;
    padding: 5px 0;
    /*line-height: 20px;*/
    /*height: 20px;*/
    color: #666;
    margin: 0 5px 0 5px !important;
    float: left;
}

input.textfield2 {
    padding: 0 0 5px 0 !important;
    /*line-height: 20px;*/
    /*height: 20px;*/
    color: #666;
    margin: 0 5px 0 5px !important;
    float: left;
    border-radius: 6px;
}

.igmc_Day {
    font-size: 13px !important;
}

.igmc_DOW {
    font-size: 12px !important;
}

.igmc_Footer {
    font-size: 11px !important;
}

.igmc_MonthYear {
    font-size: 12px !important;
}

.newlabel {
    padding: 0 !important;
    font-size: 12px !important;
}

.dateInput span input {
    margin: 0 !important;
}
/*.buttons {
	padding:0;
	margin:0;
	text-align:right;
}*/
a.mainbutton1, .mainbutton1 {
    color: #fff;
    background-color: #009444;
    font-size: 13px;
    text-align: center;
    display: block;
    line-height: 25px;
    height: 28px;
    border: solid 1px #009444;
    border-radius: 5px;
    padding: 0 8px 0 10px !important;
    cursor: pointer;
}

select.noteddl {
    border: solid 1px #ccc;
    border-radius: 6px;
    padding: 5px 5px 5px 0;
    /*line-height: 20px;*/
    /*height: 20px;*/
    color: #666;
    width: 100%;
}

    select.noteddl option {
        padding: 0 0 0 5px;
        border: 0;
    }

    select.noteddl:focus {
        border: solid 1px #009444 !important;
        box-shadow: 0 0 3px #999;
        outline: medium none;
    }

select.noteddl1 {
    border: solid 1px #ccc;
    border-radius: 6px;
    padding: 5px 5px 5px 0;
    /*line-height: 20px;*/
    /*height: 20px;*/
    color: #666;
    width: 130px;
}

    select.noteddl1 option {
        padding: 0 0 0 5px;
        border: 0;
    }

    select.noteddl1:focus {
        border: solid 1px #009444 !important;
        box-shadow: 0 0 3px #999;
        outline: medium none;
    }

.selectgeo {
    border: none;
    cursor: pointer;
    text-decoration: underline;
    font-size: 14px;
    color: #009444;
}

    .selectgeo:hover {
        text-decoration: none;
    }

input.logintxt {
    border: solid 1px #ccc;
    border-radius: 6px;
    padding: 5px 5px 5px 5px;
    /*line-height: 20px;*/
    /*height: 20px;*/
    color: #666;
    width: 100%;
}

    input.logintxt:focus {
        border: solid 1px #2ea9c5 !important;
        box-shadow: 0 0 3px #999;
        outline: medium none;
    }

tr.annotationTr {
}

    tr.annotationTr td {
        padding: 2px 0;
    }

.btnEdit {
    background: url(images/edit.png) no-repeat;
    border: none;
    background-color: none;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.grid-head1 {
    background-color: #009443;
    background-image: url("images/igg_header.gif");
    background-repeat: repeat-x;
    color: #FFFFFF;
    height: 25px;
    line-height: 28px;
}

.backBtn {
    border: none;
    background: url(images/backBtn.png) no-repeat;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.nxtBtn {
    border: none;
    background: url(images/nextBtn.png) no-repeat;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.dlBookImg {
}

    .dlBookImg img {
        width: 100%;
    }


/*drop down css*/

/* GLOBALS */
/**,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}*/

/*::selection {
    background: transparent; 
}

::-moz-selection {
    background: transparent; 
}
*/


/* dropdown of myaccount */
.weclComeMsg {
    margin-top: 26px;
    padding-right: 20px;
}




/* No CSS3 support: none */

.grp-loc {
    float: left;
    width: 50%;
}

.left-box {
    float: right;
}

.grp-loc2 {
    float: left;
    min-width: 50%;
    max-width: 50%;
}

.grp-loc3 {
    float: left;
    min-width: 65%;
    max-width: 65%;
}

.grp-loc-lft {
    float: left;
}



/*.google-maps {
        position: relative;
        padding-bottom: 75%;
        height: 0;
        overflow: hidden;
    }
    
    .google-maps-fullmap {
        position: relative;
        height: 496px;
        overflow: hidden;
    }
.google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }*/
.testWidth.map {
    /*border: solid 1px #ff0000;*/
    overflow: auto;
    /*height: 100%;*/
}

.map .left-panel {
    width: 20%;
    float: left;
    margin-right: 10px; /*height:inherit !important*/
}

.map .right-panel {
    padding-left: 10px;
    /*width: 78%;
    float: left; /*height:100% !important*/
}

.wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -30px;
}


.rfrsh-btn {
    padding-top: 7px;
    padding-right: 15px;
}

/*space*/
.spce-lft-t {
    margin-left: 10px;
}

.spce-rgt-t {
    margin-right: 10px;
}

/*******CSS FOR GPS Message View*********/
#dvProgress {
    height: 100%;
    position: relative;
}

.loadingContent {
    position: fixed;
    width: 140px;
    height: 140px;
    animation: spin 2s linear infinite;
    background-repeat: no-repeat;
    background-position: center;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto; /* presto! */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.gpsMessageWrapper {
    background-color: #fff;
    border: 1px solid #b3b3b3;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 15px;
    top: 54px;
    width: 652px;
    z-index: 99;
}

    .gpsMessageWrapper h2 {
        background: #c9c9c9;
        color: #fff;
        font-size: 16px;
        text-align: center;
        padding: 6px;
        text-transform: uppercase;
        margin: 0 0 10px 0;
    }

.gpsMessageContent {
    padding: 6px;
}

.gpsSearch {
    width: 248px;
    float: left;
    padding: 10px;
    border: solid 1px #ccc;
}

.gpsMessage {
    width: 338px;
    float: right;
    padding: 10px;
    border: solid 1px #ccc;
}

    .gpsMessage textarea {
        background: #edeef0;
        border: 1px solid #ccc;
        width: 260px;
        padding: 5px;
        float: left;
    }

    .gpsMessage input.msgSubmit {
        float: right;
        padding: 45px 30px;
        width: 29px;
        height: 29px;
        background: url(images/MsgSubmit.png) no-repeat #edeef0;
        cursor: pointer;
        background-position: center;
    }

        .gpsMessage input.msgSubmit:hover {
            background: url(images/MsgSubmit.png) no-repeat #87d4a0;
            background-position: center;
        }

.gpsMessageContent h2 {
    background-color: #fff;
    color: #00882a;
    font-size: 14px;
    font-weight: 600;
    margin: -15px 0 0 4px;
    padding: 0 6px;
    text-align: center;
    text-transform: uppercase;
    width: 74px;
}

.gpsMessageContent input {
    border: solid 1px #ccc;
    width: 236px;
    padding: 5px;
}

.gpsSearchBox {
    margin: 10px 0;
}

ul.ui-autocomplete {
    border-color: -moz-use-text-color #ccc #ccc;
    border-style: none solid solid;
    border-width: medium 1px 1px;
    list-style-type: none;
    width: 246px !important;
    background: #fff;
    height: 200px;
    list-style-type: none;
    overflow-x: hidden;
    overflow-y: auto;
}

    ul.ui-autocomplete li {
        font-size: 14px;
        text-align: left;
        display: block;
        width: 236px;
        padding: 6px;
        cursor: pointer;
    }

        ul.ui-autocomplete li:hover {
            background-color: #ccffd9;
        }

        ul.ui-autocomplete li a {
            font-size: 14px;
            color: #404040;
            cursor: pointer;
        }

            ul.ui-autocomplete li a:hover {
                color: #008628;
                text-decoration: none;
            }

#selectedval {
    padding: 0;
    margin: 0;
}

    #selectedval ul {
        list-style-type: none;
        height: 248px;
        min-height: 248px;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #e1feee;
    }

        #selectedval ul li {
            border-bottom: 1px solid #87d4a0;
            font-family: Arial;
            font-size: 14px;
            line-height: 20px;
            margin: 5px;
            padding: 5px;
        }

            #selectedval ul li span.deviceid {
                display: inline-block;
                margin: 0 5px 0 0;
                color: #008628;
            }

            #selectedval ul li span.truckName {
                display: inline-block;
                color: #727272;
            }

            #selectedval ul li span.driverName {
                display: block;
                font-size: 12px;
                margin: 5px 0 0 0;
                color: #404040;
            }

.wdgVehicleReport .ig_Control, .wdgVehicleReport1 .ig_Control {
    height: 250px !important;
    width: 99% !important;
}

    .wdgVehicleReport1 .ig_Control table {
        width: 100%;
    }

.popcloseBtn {
    cursor: pointer;
    position: absolute;
    right: -16px;
    top: -13px;
    z-index: 999999 !important;
}

/* ============================================================================================================================
== BLOCKQUOTE WITH RIGHT-ANGLED TRIANGLE
** ============================================================================================================================ */

.example-right {
    position: relative;
    padding: 6px;
    margin: 0 0 16px 0 0;
    color: #fff;
    font-size: 15px;
    line-height: 18px;
    background: #87d4a0; /* default background for browsers without gradient support */
    /* css3 */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

    /* display of quote author (alternatively use a class on the element following the blockquote) */
    .example-right + p {
        margin: 15px 0 2em 85px;
        font-style: italic;
    }

    /* creates the triangle */
    .example-right:after {
        content: "";
        position: absolute;
        bottom: -20px;
        left: 50px;
        border-width: 0 20px 20px 0px;
        border-style: solid;
        border-color: transparent #87d4a0;
        /* reduce the damage in FF3.0 */
        display: block;
        width: 0;
    }

/*....................................media queries for admin section...................................*/

@media (min-width: 768px) and (max-width: 1024px) {
    .liveAlarmPopup .alertvideo {
        width: 100%;
    }

    .companySettingWrapper .tebLeftNav .nav-tabs > li > a {
        font-size: 12px;
    }

    .dashboardTabs.dpSettingTabs {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        position: inherit;
        margin: 15px 0 0 0;
    }

    .dashboardTabs {
        margin: 0;
        right: 0;
        left: inherit;
    }

    .device-popup {
        width: auto !important;
        left: 250px !important;
        height: 350px;
        overflow: auto;
    }

    .cross {
        cursor: pointer;
        position: absolute;
        right: 4px !important;
        top: 12px !important;
        z-index: 999999999 !important;
    }

    .edit-device {
        left: 250px !important;
        height: 300px;
        overflow: auto;
    }

    .geofence-popup {
        left: 250px !important;
    }

    .selectcust {
        left: 15% !important;
    }

    .edit-device-img {
        z-index: 99999999;
        position: absolute;
        right: 15px;
        top: 10px;
    }

    #testfeedback {
        top: 220px;
    }

    td.vrLeftCol {
        width: 80%;
    }

    td.vrRightCol {
        width: 20%;
    }

    .veh-truck table {
        width: 100%;
    }

    #PopUpReports .user-info {
        height: 496px !important;
    }

    .outer-panel .panel {
        margin-top: 10px;
    }
    /*.outer-panel .spce-lft {
        margin-left: 0 !important
    }*/
}

/*@media (min-width: 1024px) and (max-width: 1024px) {
    .outer-panel {
        display: block;
        max-width: 62%!important;
    }
}*/


@media (min-width: 768px) and (max-width: 768px) {
    .outer-panel {
        display: block;
        max-width: 82% !important;
    }
}

@media (min-width: 0) and (max-width: 1024px) {
    #sidebar {
        overflow-y: auto;
    }

    .form-box {
        overflow: auto;
    }

    #menu-wrapper {
        background-repeat: repeat;
        height: auto;
    }
    /*table {
		overflow-x: auto;
		display: block;
	}*/

    .outer-panel .header-panel {
        padding: 0 5px !important;
    }

    .truck-rep .print, .truck-rep .print-sum, .truck-rep .change-sett {
        margin-bottom: 5px;
        padding: 0;
    }

    .form-box1 {
    }

    .user-info {
        height: 250px;
        overflow: auto;
    }

    .vehicle-report, #PopUpReports, #dvAcceptReject {
        width: 86% !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
        position: absolute !important;
        max-width: inherit !important;
    }

        .vehicle-report .user-info, #dvAcceptReject .user-info {
            height: auto !important;
        }
}

@media (min-width: 0) and (max-width: 767px) {

    .grp-loc-lft {
        overflow: auto;
        width: 100%;
        padding-bottom: 15px;
    }

    .outer-panel .panel {
        float: none !important;
        margin-top: 10px;
        width: 99% !important;
        min-height: inherit !important;
    }

    .outer-panel .spce-lft {
        margin-left: 0 !important;
    }

    .selectBox {
        width: auto !important;
    }
}


@media (min-width: 0) and (max-width: 768px) {
    .map .left-panel {
        float: left !important;
        margin-right: 15px;
    }

    .grp-loc .raccordion-content {
        overflow: auto;
    }
}



@media (min-width: 320px) and (max-width: 640px) {
    /*space*/
    .spce-top-t {
        margin-top: 10px;
    }

    #wrap .click {
        margin-bottom: 10px;
    }

    .mobile {
        display: none;
    }

    .pdf {
        background: #333 url(../images/pdf.png) no-repeat;
    }

    .excel {
        background: #333 url(../images/excel.png) no-repeat;
    }
}

@media (min-width: 0px) and (max-width:480px) {
    .device-popup {
        overflow: auto;
        height: 300px;
    }

    .user-info-page {
        overflow: auto;
        width: 90%;
    }
}

@media (min-width: 0px) and (max-width:320px) {

    .ddaccount {
        display: inline-block;
        /*height: 100px !important;*/
        /*width: 100%;*/
    }

        .ddaccount > div {
            float: none !important;
            margin: 0 auto;
        }

    .weclComeMsg {
        margin-top: 20px;
        text-align: center;
    }

    .myaccount-dd {
        margin: 20px;
    }
}

@media (min-width: 0px) and (max-width:360px) {
    .selct-btn {
        width: auto;
        float: none;
        margin: 15px auto 0 auto;
        clear: both;
        display: inline-block;
    }

    .selectday {
        width: 100% !important;
        display: table;
        text-align: center;
    }

    .selct-title {
        padding-left: 29px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 240px;
    }

    #page-content-wrapper .is-open {
        margin: 0;
    }

    .sidebar-nav {
        width: 234px;
    }

    .hamburger {
        bottom: 10%;
    }
}




@media (min-width: 361px) and (max-width:480px) {
    .selct-title {
        padding-left: 40px;
    }
}






@media (min-width: 321px) and (max-width:480px) {
    /*.companyLogo {
        display: block;
        float: none;
        margin: 0 20%;
        padding: 4px 4px 0 10px;
        text-align: center;
        width: 100%;
    }*/


    /*Ends*/


    .grp-loc-lft {
        width: 100%;
    }

    .grp-loc .raccordion-title {
        width: 95%;
    }

    /*.dqNewHeader {
        height: 140px !important;
        background: #f5f5f5;
    }*/
}

/*toggle container*/
#wrap {
    position: relative;
}

.wrap-panel {
    position: relative;
}

.showup {
    width: auto;
    background: #efefef;
    display: none;
    z-index: 9999;
    position: absolute;
    top: 35px;
    border: solid 2px #1dc454;
    padding-bottom: 10px;
}

.showup-vehicle {
    width: auto;
    background: #efefef;
    display: none;
    z-index: 9999;
    position: absolute;
    top: 35px;
    border: solid 2px #1dc454;
    padding-bottom: 10px;
}

.showup-settings {
    width: auto;
    background: #efefef;
    display: none;
    z-index: 9999;
    position: absolute;
    top: 35px;
    border: solid 2px #1dc454;
    padding-bottom: 10px;
}

.showup-legend {
    width: auto;
    background: #efefef;
    display: none;
    z-index: 9999;
    position: absolute;
    top: 35px;
    border: solid 2px #1dc454;
    padding-bottom: 10px;
}

.dynamic-checkbox {
    display: inline-block;
    padding-right: 15px;
    white-space: nowrap;
}

.sv-btn {
    margin-left: 12px;
    margin-top: 10px;
}

.scrollbar {
    float: left;
    /*height: 300px;	
	overflow-y: scroll;
	margin-bottom: 25px;*/
    width: 100%;
    padding-bottom: 18px;
}

#style-4::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border: 2px solid #555555;
}

#style-5::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border: 2px solid #555555;
}

.force-overflow {
    /*min-height: 300px;*/
    position: relative;
}

.click {
    cursor: pointer;
}

.click-status {
    cursor: pointer;
}

.checkbox-vt td {
    padding: 0 14px;
}

.checkbox-vt input[type=checkbox] {
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    top: 3px;
    vertical-align: bottom;
}

.checkbox-vt {
    padding: 5px;
}

    .checkbox-vt label {
        padding-left: 5px;
        color: #787878;
    }

.trig {
    padding-top: 3px;
    float: left;
}

.grploc-title {
    font-size: 14px;
    font-weight: bold;
    padding: 2px 10px;
    color: #009346;
    width: 100%;
}

@media (min-width: 0px) and (max-width:480px) {
    .showup {
        width: 250px;
        overflow: scroll;
    }

    .showup-vehicle {
        width: 250px;
        overflow: scroll;
    }

    .showup-settings {
        width: 250px;
        overflow: scroll;
    }

    .checkbox-vt {
        padding: 0px;
    }

        .checkbox-vt label {
            font-size: 9px;
        }
}

@media (min-width: 481px) and (max-width:767px) {
    .showup {
        width: 300px;
        overflow: scroll;
    }

    .showup-vehicle {
        width: 300px;
        overflow: scroll;
    }

    .showup-settings {
        width: 300px;
        overflow: scroll;
    }

    .checkbox-vt {
        padding: 0px;
    }

        .checkbox-vt label {
            font-size: 9px;
        }
}

@media (min-width: 768px) and (max-width:1024px) {
    .showup {
        width: auto;
    }

    .showup-vehicle {
        width: auto;
    }

    .showup-settings {
        width: auto;
    }

    .checkbox-vt {
        padding: 0px;
    }
}

/*menu drop down maker*/


#menu-wrapper .menu1 ul ul {
    display: none;
}

#menu-wrapper .menu1 ul li:hover > ul {
    display: block;
}


#menu-wrapper .menu1 ul {
}

    #menu-wrapper .menu1 ul:after {
        content: "";
        clear: both;
        display: block;
    }

    #menu-wrapper .menu1 ul li {
    }

        #menu-wrapper .menu1 ul li:hover {
        }

            #menu-wrapper .menu1 ul li:hover a {
            }

        #menu-wrapper .menu1 ul li a {
        }


    #menu-wrapper .menu1 ul ul {
        /*background: #333 url(images/navHover.png) repeat-x!important; border-radius: 0px; padding: 0;*/
        position: absolute;
        top: 100%;
        z-index: 999999;
    }

        #menu-wrapper .menu1 ul ul li {
            float: none;
            border-top: 1px solid #666;
            border-bottom: 1px solid #666;
            position: relative;
            background: #333;
            /*background: url(/images/navHover.png) repeat-x!important;*/
        }

            #menu-wrapper .menu1 ul ul li a {
                padding: 8px 17px;
                color: #fff;
                font-size: 14px;
                border: none !important;
                display: inline-block;
                line-height: 18px;
                text-align: left;
                width: 180px;
            }

                #menu-wrapper .menu1 ul ul li a:hover {
                    background: #009444;
                }

        #menu-wrapper .menu1 ul ul ul {
        }

        #menu-wrapper .menu1 ul ul li.active a, #menu-wrapper .menu1 ul li li a:hover {
            background: tranparent !important;
            color: #fff !important;
            text-decoration: none !important;
        }

        #menu-wrapper .menu1 ul ul li a {
        }

/*Ends*/



.lft.go-map {
    padding-left: 10px;
    padding-top: 6px;
}

/*vehicle report pop up*/
.vehicle-report {
    width: 375px;
    top: 20px;
    left: 50px;
}

.mCSB_container {
    overflow: auto !important;
}


/*report panels*/

.outer-panel {
    display: block;
    height: auto;
    margin: 50px auto;
    overflow: hidden;
    padding: 12px 0;
    /*width: 800px;
    max-width: 85%;*/
}

    .outer-panel .panel {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        border: solid 1px #ccc;
        float: left;
        min-height: 320px;
        width: 31.7%;
        min-width: 282px;
    }

    .outer-panel .spce-lft {
        margin-left: 2%;
    }

    .outer-panel .panel h2 {
        background: #333;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        /*height: 35px;*/
        padding: 6px 0px;
        font-size: 18px;
        color: #fff;
        text-align: center;
        margin: 0;
        line-height: 32px;
        text-transform: uppercase;
        font-weight: 500;
    }

    .outer-panel .panel ul {
        margin: 0;
        padding: 5px;
    }

        .outer-panel .panel ul li {
            display: block;
            list-style: none;
            line-height: 24px;
            background: url(images/arrow.png) no-repeat 5px 6px;
            margin: 10px;
        }

            .outer-panel .panel ul li a {
                font-size: 16px;
                color: #333;
                text-decoration: none;
                padding-left: 22px;
            }

                .outer-panel .panel ul li a:hover {
                    color: #0c8748;
                }
/*for modal pop ups*/
.modalGridUpdatePopup, .selectcust, .box {
    /*position: absolute!important;
    top: 50%!important;
    left: 50% !important;  
   width: 50%!important;
    margin: -15% 0 0 -25%;*/
}

.modalPopup {
    /*position: absolute!important;
   top: 50%!important;
   left: 50% !important;  
   width: 50%!important;
    margin: -15% 0 0 -25%;
    border: 3px solid #1dc454;*/
}


.modalPopup {
    width: 55%;
}

.message-box {
    background: #e6ffeb !important;
    border: #1dc454 2px solid;
    padding: 5px;
    position: fixed;
    display: none;
    z-index: 1005;
}




.header-right {
    display: none;
}

.header-btn {
}

.toggle-bar {
    display: none;
}

.header-btn {
    float: right;
}



@media (min-width:0px) and (max-width: 900px) {

    .header-right {
        background: none repeat scroll 0 0 #fff;
        border: 1px solid #1abc9c;
        padding: 10px;
        position: absolute;
        right: 21px;
        text-align: center;
        top: 47px;
        width: 56%;
        z-index: 99999;
        display: none;
    }

    .header-btn {
        display: none;
    }

    .toggle {
        display: block;
        position: absolute;
        right: 20px;
    }

    .toggle-bar {
        width: 40px;
        float: left;
        display: block;
    }
}


.selectday {
    overflow: hidden;
    padding: 10px 0;
    font-weight: bold;
    width: 440px;
}

.selct-title {
    float: left;
    padding-top: 9px;
    padding-right: 15px;
}

.selct-dd {
    float: left;
    padding-right: 15px;
}

.selct-btn {
    padding-top: 2px;
}


/*#ctl00_MainContent_UpdatePanel5 {
    display: inline-block;
    line-height: 31px;
    margin-right: 5px;
    vertical-align: middle;
}*/
#ctl00_MainContent_UpdatePanel5 {
    display: inline-block;
    line-height: 15px;
    margin-right: 5px;
    vertical-align: top;
}


.pop-icon {
    display: inline-block;
    float: right;
    padding-top: 23px;
    vertical-align: middle;
    cursor: pointer;
}


@media (max-width:480px) {
    /*.rgt-info {
        float: none;
        margin: 0 13%;
    }*/

    .buttons1 {
        margin-bottom: 5px;
        margin-top: 5px;
    }
}






.igg_Control {
    /*height:480px !important;*/
    /*  overflow: auto !important;*/
}

div#ctl00_MainContent_map_Tracking_Map {
    /*height:402px !important*/
}

.margin-top {
    margin-top: 5px;
}

.MicrosoftMap .Infobox .infobox-info {
    font-size: 12px !important;
}

a#infoboxDescription {
    font-size: 12px !important;
}
/*added by nilesh */
/****Feedback****/
#testfeedback1 {
    position: fixed;
    top: 90px;
    /*left: -266px;*/
    left: -390px;
    /*height: calc(100% - 50px);*/
    z-index: 99;
    height: 96% !important;
}

    #testfeedback1 .mainfBox1 {
        padding: 0;
        border-radius: 0 5px 5px 0;
        /*width: 255px;*/
        width: 388px;
        height: 90%;
        /*max-height:70%;*/
        border: 1px solid #009444;
        background: #fff;
    }

.panel-group {
    margin: 0;
}

.mCSB_scrollTools .mCSB_draggerContainer {
    right: -8px !important;
}
/*#testfeedback1 .mainfBox .panel-group {
    height: 100%;
    overflow: auto;
}*/

#testfeedback1 h2 {
    background: #e3ebe8;
    color: #08704a;
    font-size: 15px;
    text-transform: uppercase;
    padding: 0;
    margin: 5px;
    font-variant: inherit;
    text-align: center;
    padding: 9px;
}

#fpi_feedback1 {
    z-index: 999999;
    position: fixed;
    width: 60px;
    height: 422px;
    bottom: 0px;
    top: 250px;
    right: 0px;
    font-size: 15px;
    color: white;
}

#fpi_title1 a {
    color: #08704a;
    font-size: 15px;
    margin: 0;
    padding: 4px 8px;
    text-transform: none !important;
    text-decoration: none;
    display: block;
    letter-spacing: 0.5px;
    font-weight: 500;
}

#fpi_title1 {
    background-color: #e3ebe8;
    cursor: pointer;
    display: block;
    width: 88px;
    height: 32px;
    position: absolute;
    top: 10%;
    right: -60px;
    border: solid 1px rgb(0, 148, 68);
    border-radius: 0 0 4px 4px;
}

.legendsShow1 {
    overflow: auto;
    height: 280px;
    /*width: 86%;*/
    padding: 10px 18px;
}
/*Added by Tarun*/

#testfeedback1 #accordion .panel-default {
    border: none;
    border-radius: 0;
    padding: 10px;
}

    #testfeedback1 #accordion .panel-default > .panel-heading h4 a {
        display: block;
        color: #08704a;
        text-decoration: none;
        font-weight: 500;
        text-transform: uppercase;
        font-size: 15px;
    }

    #testfeedback1 #accordion .panel-default > .panel-heading {
        background: none;
        padding: 10px 0;
        /*border-top:solid 1px #ccc;*/
    }

#collapseLocation {
    padding: 0;
}


.panel-heading h4.panel-title a.collapsed::after {
    /* symbol for "opening" panels */
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f105"; /* adjust as needed, taken from bootstrap.css */
    float: right; /* adjust as needed */
    color: #08704a; /* adjust as needed */
}


.panel-heading h4.panel-title a:after {
    /* symbol for "collapsed" panels */
    content: "\f107"; /* adjust as needed, taken from bootstrap.css */
    font: normal normal normal 14px/1 FontAwesome;
    float: right; /* adjust as needed */
    color: #08704a; /* adjust as needed */
}


#collapseLocation .selectionHeader, .collapseSetting .selectionHeader {
    border-top: dashed 1px #ccc;
    border-bottom: dashed 1px #ccc;
    padding: 5px 0;
    overflow: hidden;
    margin: 0 0 10px;
}

    #collapseLocation .selectionHeader h2, #testfeedback1 .collapseSetting .selectionHeader h2 {
        padding: 3px 0;
        margin: 0;
        background: none;
        font-size: 14px !important;
        color: #404040 !important;
        text-transform: uppercase;
        float: left;
        background: none !important;
    }

    #collapseLocation .selectionHeader span.selectAll, .collapseSetting .selectionHeader span.selectAll {
        display: block;
        float: right;
        margin: 3px 0 0 0;
    }

        #collapseLocation .selectionHeader span.selectAll input, .collapseSetting .selectionHeader span.selectAll input {
            vertical-align: top;
            margin: 2px 5px 0 0;
        }

        #collapseLocation .selectionHeader span.selectAll label, .collapseSetting .selectionHeader span.selectAll label {
            margin: 0;
        }

.setMapOption div {
    overflow: hidden;
    margin: 0 0 14px 0;
}

.setMapOption label {
    float: left;
    padding: 0;
    margin: 0;
}

.setMapOption input, .setMapOption select {
    float: right;
    top: 0 !important;
}

.panel-collapse .selectGroup {
    padding: 0;
    margin: 10px 10px 10px 0;
    /*max-height:140px;*/
    /* max-height:44vh;*/
    overflow: auto;
}

.vehicleLeftpan .igg_Control {
    overflow: inherit !important;
    height: 85vh !important;
    width: 99% !important;
}


.panel-collapse .selectGroup table {
    margin: 0 auto !important;
    width: 100% !important;
}

    .panel-collapse .selectGroup table tr td {
        display: block;
        padding: 0;
        margin: 0 0 5px;
        width: 50%;
        float: left;
    }

    .panel-collapse .selectGroup table.oneColList tr td {
        width: 100%;
        float: none;
    }

    .panel-collapse .selectGroup table tr td input.chkboxeS {
        margin: 0;
        padding: 0;
    }

    .panel-collapse .selectGroup table tr td input[type="checkbox"] {
        float: left;
    }

    .panel-collapse .selectGroup table tr td label {
        padding: 0;
        margin: 0 3px 0 3px;
        font-weight: normal;
        font-size: 13px;
        float: right;
        width: 82%;
    }

.panel-collapse .actionBtn a.save, .panel-collapse .actionBtn input.save {
    display: block;
    background: #08704a;
    padding: 8px 0 !important;
    margin: 0;
    color: #fff;
    font-size: 14px !important;
    font-weight: bold;
    text-transform: uppercase;
}

.panel-collapse .actionBtn input.save {
    border: none;
    width: 96%;
}

    .panel-collapse .actionBtn a.save:hover, .panel-collapse .actionBtn input.save:hover {
        background: #0F602B;
        text-decoration: none;
    }


/***CSS For Vehicle Tracking Page***/
#testfeedback2 {
    position: fixed;
    /*top: 180px;*/
    /*height:-282px;*/
    bottom: 0;
    width: 100%;
    /* width:100%;*/
    z-index: 100;
}

    #testfeedback2 .mainfBox2 {
        padding: 0;
        height: auto;
        border: 1px solid #009444;
        background: #fff;
        width: 100%;
        height: 0px;
        overflow: auto;
        position: relative;
    }

    #testfeedback2 h2 {
        text-align: center;
        color: #08704a;
        font-size: 16px;
        text-transform: uppercase;
        padding: 0;
        margin: 8px 0 8px 0;
        font-variant: inherit;
        display: none;
    }

#fpi_title2 a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    display: block;
    font-weight: 500;
}

#fpi_title2 {
    cursor: pointer;
    display: block;
    width: 76px;
    height: 25px;
    position: absolute;
    margin: 0 auto;
    bottom: 100%;
    right: 0;
    left: 0;
}

.mainfBox2 table tr .igg_Header, .vehicleLeftpan table tr .igg_Header {
    background-position: 0% 0%;
    background-image: inherit !important;
    background-color: #e3ebe8 !important;
    background-repeat: repeat !important;
    background-attachment: scroll !important;
}

    .mainfBox2 table tr .igg_Header td {
        /*padding:0 5px;*/
    }

.mainfBox2 table td th.igg_HeaderCaption, .vehicleLeftpan table td th.igg_HeaderCaption, #RequestedVideoList thead td {
    background: #ABABAB !important;
    font-size: 11px;
    font-weight: 600;
    color: #222222;
    padding: 6px 5px;
    /*padding:6px 8px 0px 2px;*/
    border: solid 1px #d9d9d9;
    border-collapse: collapse;
}

#RequestedVideoList thead td {
    color: #fff;
}

#RequestedVideoList td {
    font-size: 12px;
}

.mainfBox2 table tr .igg_Header table, .mainfBox2 table tr table {
    width: 99.9% !important;
}
/*.mainfBox2 .ig_Item table tr td {
    background:#fff !important;
}*/
/*Start Added by nilesh 28-02-2018*/
.mainfBox2 .ig_Item tbody tr.InActive {
    background: #f8f8f8 !important;
}

.mainfBox tbody > tr.igg_Alt > td {
    background-color: #f8f8f8 !important;
}
/*Added by nilesh 28-02-2018*/
.mainfBox2 table tbody > tr.igg_Alt > td {
    background: #f8f8f8 !important;
}

.mainfBox2 table tbody tr.InActive:nth-child(2n+1) td {
    background: #f8f8f8 !important;
}

.mainfBox2 table tbody tr td, .mainfBox table tbody tr td {
    /*border:solid 1px #d9d9d9;*/
    border-collapse: collapse;
    /*   padding-top: 3px;
    padding-bottom: 3px;*/
}
/*commented by nilesh*/
/*.mainfBox2 table tbody tr.InActive td{
    border:solid 1px #d9d9d9;
    border-collapse:collapse;
    padding-top: 3px;
    padding-bottom: 3px;
}*/
.pull_feedback2:before {
    content: url(images/BotTopTriger.png);
    /*background:url(images/BotTopTriger.png) no-repeat;*/
}

.test:before {
    content: url(images/TopTriger.png) !important;
}

#VehiclePlot .pull_feedback3:before {
    content: url(images/BotTopTriger1.png);
    /*background:url(images/BotTopTriger.png) no-repeat;*/
}


.test1:before {
    content: url(images/TopTriger1.png) !important;
}

TBODY > TR > TD.ighg_ExpandableArea {
    padding: 5px 8px 5px 8px !important;
    border: none !important;
}

/******CSS For Vehicle Report Popup*******/
.popVrGridWrapper {
    padding: 0;
    margin: 10px 0 0 0;
    overflow: hidden;
}

    .popVrGridWrapper .vRLeftDataGrid {
        width: 68%;
        float: left;
        border: solid 1px #ccc;
        padding: 5px;
        background: #ededed;
    }

    .popVrGridWrapper .vrRightDataGrid {
        float: right;
        width: 28%;
        border: solid 1px #ccc;
        padding: 5px;
        background: #ededed;
    }

    .popVrGridWrapper td {
        padding: 0;
    }

    .popVrGridWrapper .topHead {
        padding: 0;
        margin: 0 0 5px;
        overflow: hidden;
    }

        .popVrGridWrapper .topHead h2 {
            padding: 0;
            margin: 5px 0 0 0;
            font-size: 16px;
            color: #08704a;
            text-align: left;
            text-transform: none;
            float: left;
        }

        .popVrGridWrapper .topHead input.mainbutton1 {
            float: right;
        }

    .popVrGridWrapper .vrRightDataGrid .ig_Control {
        width: 99% !important;
        height: 218px !important;
        border: none;
    }

    .popVrGridWrapper .vrRightDataGrid table {
        width: 100%;
    }

    .popVrGridWrapper .vRLeftDataGrid .igg_Control {
        overflow: inherit !important;
        height: auto !important;
        border: none !important;
    }

        .popVrGridWrapper .vRLeftDataGrid .igg_Control table {
            width: 100% !important;
        }

label#lblPopupMessage {
    margin: 0 !important;
}

.popVrGridWrapper .igg_Header {
    background-image: none;
    background: #ABABAB;
    color: #222222 !important;
}

.popVrGridWrapper .igg_HeaderCaption {
    color: #222222 !important;
}

@media only screen and (max-width: 767px) {
    .popVrGridWrapper .vRLeftDataGrid, .popVrGridWrapper .vrRightDataGrid {
        float: none;
        width: 100%;
    }
}


span.tooltip {
    position: absolute;
    width: 128px;
    height: 48px;
    line-height: 48px;
    padding: 0px 16px 0px 8px;
    font-size: 22px;
    text-align: center;
    color: rgb(255, 255, 255);
    background: rgb(96, 172, 57);
    border: 0px 0px 0px 0px none none none none rgb(255, 255, 255) rgb(70, 126, 42) rgb(255, 255, 255) rgb(255, 255, 255);
    border-radius: 0px 3.2px 3.2px 0px;
    text-shadow: rgba(0, 0, 0, 0.6) 1px 1px 1px;
    box-shadow: rgb(85, 153, 51) -4px 0px 4px 0px inset;
}

    span.tooltip:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-width: 24px;
        border-style: solid;
        border-color: transparent #60AC39 transparent transparent;
        top: 0px;
        left: -48px;
    }

#testfeedbackLanguage {
    position: fixed;
    top: 90px;
    /*left: -405px;*/
    left: -456px;
    z-index: 99;
    height: 90% !important;
}

#testfeedbackLanguage .mainfBox {
    padding: 5px;
    border-radius: 0 5px 5px 0;
    /*width: 388px;*/
    width: 440px;
    border: 1px solid #009444;
    background: #fff;
    height: 95% !important;
}

#testfeedbackLanguage h2 {
    background: #e3ebe8;
    color: #08704a;
    font-size: 15px;
    text-transform: uppercase;
    padding: 0;
    margin: 0 0 10px;
    font-variant: inherit;
    text-align: center;
    padding: 9px;
}

#fpi_titleL a {
    color: #08704a;
    font-size: 15px;
    margin: 0;
    padding: 8px;
    text-transform: none !important;
    text-decoration: none;
    display: block;
    letter-spacing: 0.5px;
    font-weight: 500;
}

#fpi_titleL {
    background-color: #e3ebe8;
    cursor: pointer;
    display: block;
    width: 76px;
    height: 36px;
    position: absolute;
    top: 28%;
    right: -57px;
    border: solid 1px rgb(0, 148, 68);
    border-radius: 0 0 4px 4px;
}

/****Devices left Small list****/
#testfeedback3 {
    position: fixed;
    top: 90px;
    /*left: -405px;*/
    left: -456px;
    z-index: 99;
    height: 90% !important;
}

    #testfeedback3 .mainfBox {
        padding: 5px;
        border-radius: 0 5px 5px 0;
        /*width: 388px;*/
        width: 440px;
        border: 1px solid #009444;
        background: #fff;
        height: 95% !important;
    }

    #testfeedback3 h2 {
        background: #e3ebe8;
        color: #08704a;
        font-size: 15px;
        text-transform: uppercase;
        padding: 0;
        margin: 0 0 10px;
        font-variant: inherit;
        text-align: center;
        padding: 9px;
    }

#fpi_feedback3 {
    z-index: 999999;
    position: fixed;
    width: 93px;
    height: 422px;
    bottom: 0px;
    top: 250px;
    right: -66px;
    font-size: 15px;
    color: white;
}

#fpi_title3 a {
    color: #08704a;
    font-size: 15px;
    margin: 0;
    padding: 8px;
    text-transform: none !important;
    text-decoration: none;
    display: block;
    letter-spacing: 0.5px;
    font-weight: 500;
}

#fpi_title3 {
    background-color: #e3ebe8;
    cursor: pointer;
    display: block;
    width: 78px;
    height: 36px;
    position: absolute;
    top: 28%;
    right: -57px;
    border: solid 1px rgb(0, 148, 68);
    border-radius: 0 0 4px 4px;
}
/****Legeneds button****/
#testfeedback4 {
    position: fixed;
    top: 66px;
    /*left: -266px;*/
    left: -257px;
    /*height: calc(100% - 50px);*/
    z-index: 99;
    height: 99% !important;
}

    #testfeedback4 .mainfBox {
        padding: 0;
        border-radius: 0 5px 5px 0;
        width: 255px;
        height: 98%;
        /*max-height:70%;*/
        border: 1px solid #009444;
        background: #fff;
    }

    #testfeedback4 h2 {
        background: #e3ebe8;
        color: #08704a;
        font-size: 15px;
        text-transform: uppercase;
        margin: 5px;
        font-variant: inherit;
        text-align: center;
        padding: 9px;
    }

#fpi_feedback4 {
    z-index: 999999;
    position: fixed;
    width: 60px;
    height: 422px;
    bottom: 0px;
    top: 446px;
    right: 0px;
    font-size: 15px;
    color: white;
}

#fpi_title4 a {
    color: #08704a;
    font-size: 15px;
    margin: 0;
    padding: 6px;
    text-transform: none !important;
    text-decoration: none;
    display: block;
    letter-spacing: 0.5px;
    font-weight: 500;
}

#fpi_title4 {
    background-color: #e3ebe8;
    cursor: pointer;
    display: block;
    width: 72px;
    height: 34px;
    position: absolute;
    top: 27%;
    right: -53px;
    border: solid 1px rgb(0, 148, 68);
    border-radius: 0 0 4px 4px;
}

#testfeedback4 .selectionHeader {
    border-top: dashed 1px #ccc;
    border-bottom: dashed 1px #ccc;
    padding: 5px 0;
    overflow: hidden;
    margin: 0 0 10px;
}

    #testfeedback4 .selectionHeader h2 {
        padding: 3px 0;
        margin: 0;
        background: none;
        font-size: 14px;
        color: #404040;
        text-transform: uppercase;
        float: left;
        background: none !important;
    }

#testfeedback4 .location {
    padding: 10px;
}

    #testfeedback4 .location .selectGroup div {
        padding: 10px 4px;
        margin: 0 0 2px 0;
    }

        #testfeedback4 .location .selectGroup div:nth-child(2n+1) {
            background: #f6f6f6;
        }

        #testfeedback4 .location .selectGroup div input {
            margin: 5px 0 0 0;
            padding: 2px;
        }

        #testfeedback4 .location .selectGroup div.brHeight br {
            margin: 0 0 10px;
        }

.bottomDevicesDetails {
    padding: 0;
    margin: 0;
}

    .bottomDevicesDetails tr td.ColDeviceID, .bottomDevicesDetails tr th.ColDeviceID {
        width: 5%;
    }

    .bottomDevicesDetails tr td.ColEquipment, .bottomDevicesDetails tr th.ColEquipment {
        width: 10%;
    }

    .bottomDevicesDetails tr td.ColDriverName, .bottomDevicesDetails tr th.ColDriverName {
        width: 9%;
    }

    .bottomDevicesDetails tr td.ColLocationName, .bottomDevicesDetails tr th.ColLocationName {
        width: 9%;
    }

    .bottomDevicesDetails tr td.ColAddress, .bottomDevicesDetails tr th.ColAddress {
        width: 18%;
    }

    .bottomDevicesDetails tr td.Colstatus, .bottomDevicesDetails tr th.Colstatus {
        width: 9%;
    }

    .bottomDevicesDetails tr td.ColDuration, .bottomDevicesDetails tr th.ColDuration {
        width: 6%;
    }

    .bottomDevicesDetails tr td.ColTime, .bottomDevicesDetails tr th.ColTime {
        width: 9%;
    }

    .bottomDevicesDetails tr td.ColSpeed, .bottomDevicesDetails tr th.ColSpeed {
        width: 5%;
    }

    .bottomDevicesDetails tr td.ColDirectionNWSE, .bottomDevicesDetails tr th.ColDirectionNWSE {
        width: 5%;
    }

    .bottomDevicesDetails tr td.ColTotalDistance, .bottomDevicesDetails tr th.ColTotalDistance {
        width: 5%;
    }

    .bottomDevicesDetails tr td.ColbtnShowIt, .bottomDevicesDetails tr th.ColbtnShowIt {
        width: 3%;
    }

    .bottomDevicesDetails tr td.ColbtnShowIt, .vehicleLeftpan tr td.ColbtnShowIt {
        text-align: center;
    }

    .bottomDevicesDetails tr td.editAction {
        width: 2%;
        text-align: center;
    }

        .bottomDevicesDetails tr td.editAction a {
            background: #08704a;
            border-radius: 100%;
            display: block;
            text-align: center;
            color: #fff;
            width: 20px;
            height: 20px;
            line-height: 20px;
            margin: 0 auto;
        }

    .bottomDevicesDetails tr th.ColAlert, .bottomDevicesDetails tr th.ColShowIt, .bottomDevicesDetails tr th.ColStatusIcon, .bottomDevicesDetails tr th.ColLatitude, .bottomDevicesDetails tr th.ColLongitude {
        width: 0%;
        display: none;
    }

.vehicleLeftpan tr td.ColbtnShowItLeftGrid, .vehicleLeftpan tr th.ColbtnShowItLeftGrid {
    width: 4% !important;
}

.vehicleLeftpan tr td.ColbtnShowItOnMapLeftGrid, .vehicleLeftpan tr th.ColbtnShowItOnMapLeftGrid {
    width: 10% !important;
    padding: 2px 0px 0px 2px;
}


.vehicleLeftpan tbody.igg_Item > tr > td, .bottomDevicesDetails tbody.igg_Item > tr > td {
    padding: 2px 0px 0px 2px;
    /*padding:5px 8px 5px 8px;*/
}

.vehicleLeftpan tbody > tr.igg_Alt > td, .bottomDevicesDetails tbody > tr.igg_Alt > td {
    padding: 2px 0px 0px 2px;
    /*padding:5px 8px 5px 8px;*/
}

.bottomDevicesDetails .ighg_ExpansionColumn, .bottomDevicesDetails .ighg_ExpansionColumnHeader {
    width: 1%;
}

.bottomDevicesDetails tr td.ColbtnEditItBottomGrid, .bottomDevicesDetails tr th.ColbtnEditItBottomGrid, .bottomDevicesDetails table td th.igg_HeaderCaption.ig2d28170e {
    width: 2%;
}

.positionChange {
    position: fixed;
    /*width: 98%;*/
    z-index: 999;
    margin: 0 auto;
    right: 0;
}

.actionBtn input {
    display: inline-block;
    width: 80px;
    padding: 8px !important;
    box-shadow: none;
    line-height: normal !important;
    height: auto;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    height: inherit !important;
}

/*CSS For Pagination*/
.adhrPagin {
    text-align: center;
}

    .adhrPagin ul.pagination {
        background-color: inherit !important;
        margin: 10px 0 0 0;
    }

.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    background-color: #00892b !important;
    border-color: #00892b !important;
    color: #fff !important;
}

.pagination > li > a, .pagination > li > span {
    color: #00892b !important;
}

.pagination > .disabled > a, .pagination > .disabled > a:focus, .pagination > .disabled > a:hover, .pagination > .disabled > span, .pagination > .disabled > span:focus, .pagination > .disabled > span:hover {
    color: #777 !important;
}

/*Dashboard Page CSS*/
.driverGrid {
    width: 48%;
    float: left;
    border: solid 1px #ccc;
    padding: 5px;
}

.driverGraph {
    width: 49%;
    float: right;
    border: solid 1px #ccc;
    padding: 5px;
}


.dashboardTitle span {
    font-size: 12px;
}

#container .whiteWrapper {
    background: #fff;
    border: solid 1px #cccccc;
    padding: 5px;
    margin: 6px 0;
}

    #container .whiteWrapper h2 {
        font-size: 20px;
        font-weight: 600;
        /*text-transform: uppercase;*/
        color: #1fad63;
        padding: 0;
        margin: 8px 15px;
    }

        #container .whiteWrapper h2 img {
            margin: 0 5px 0 0;
        }

.whiteWrapper .row {
    margin: 0;
}

.graphBox {
    border: solid 1px #ccc;
    padding: 5px;
    position: relative;
    overflow: hidden;
}

#container .whiteWrapper .graphBox h2 {
    padding: 6px;
    margin: 0 0 4px;
    color: #404040;
    text-transform: none;
    font-weight: 400;
    font-size: 14px;
    border-bottom: solid 1px #ccc;
    position: absolute;
    top: 0;
    z-index: 99;
    width: 100%;
    left: 0;
    text-align: center;
}

.whiteWrapper .row .col-md-4 {
    /*width: 31.34%;*/
    /*padding-top:15px;*/
    padding-bottom: 15px;
    float: left;
}

.whiteWrapper .row .col-md-2 {
    /*width: 14.67%;*/
}



.alignCenter {
    text-align: center;
}

#container .notification {
    text-align: left;
    padding: 10px;
    position: relative;
}

    #container .notification a {
        text-decoration: none;
        color: #404040;
        text-transform: uppercase;
        font-size: 13px;
    }

    #container .notification span {
        display: block;
    }

        #container .notification span.articleImg {
            margin: 0 0 7px;
        }

            #container .notification span.articleImg img {
                margin: 5px auto;
            }

.ndbnotWrapper .articleImg img {
    width: 41px;
}

#container .notification span .articleTitle {
}

.hrsRemaining .head {
    overflow: hidden;
    position: relative;
}

    .hrsRemaining .head h2 {
        width: 45%;
        float: left;
    }

.driverName {
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0 0 5px;
}

.hrsRemaining .head h2 span {
    font-weight: normal;
    display: block;
    margin-left: 32px;
    font-size: 14px;
    color: #404040;
}

.graphLegend {
    position: absolute;
    top: 0;
    font-size: 12px;
    float: right;
    max-width: 65%;
    right: 0;
    text-align: right;
}

    .graphLegend div {
        display: inline-block;
        margin: 0 0 0 4px;
    }

    .graphLegend span {
        width: 12px;
        height: 8px;
        border-radius: 3px;
        display: inline-block;
        margin-right: 3px;
    }
        /*grey colour*/
        .graphLegend span.consumed {
            background: #404041;
        }
        /*gren colour*/
        .graphLegend span.remaining {
            background: #00a651;
        }
        /*Yellow colour*/
        .graphLegend span.nearby {
            background: #fccb23;
        }
        /*Yellow colour*/
        .graphLegend span.voilation {
            background: #f0141c;
        }


        .graphLegend span.iv {
            background: #ff8c7c;
        }

        .graphLegend span.nv {
            background: #f3dfbf;
        }

        .graphLegend span.odnd {
            background: #fccb23;
        }

        .graphLegend span.od {
            background: #818182;
        }

        .graphLegend span.driving {
            background: #00a651;
        }
/* Dropdown Button */
/* Dropdown Button */
.dropdown {
    margin: 4px 0;
}

.dropbtn {
    background-color: #fff;
    color: #404040;
    border: solid 1px rgb(204, 204, 204);
    border-radius: 4px 4px 0 0;
    padding: 6px 40px 6px 10px;
    font-size: 15px;
    line-height: 22px;
    font-weight: bold;
    cursor: pointer;
    display: inline-block;
    background-image: url(../../Images/dropdownArrow.png);
    background-position: right;
    background-repeat: no-repeat;
}

    .dropbtn:hover {
        background-color: #fff !important;
        color: #1fad63;
        background-image: url(../../Images/dropdownArrowHover.png);
    }

    .dropbtn img.rbImg {
        padding: 0 0 0 10px;
    }

    .dropbtn img.exportBtnIcon {
        margin: 0 3px 0 0;
        vertical-align: top !important;
        padding: 0;
    }

/*.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}*/

.dropdown {
    float: right;
    position: relative;
    display: inline-block;
}

.RefreshButton {
    float: right;
    position: relative;
    display: inline-block;
    margin: 4px 4px;
}

    .RefreshButton .refbtn {
        background-color: #fff;
        color: #404040;
        border: solid 1px rgb(204, 204, 204);
        border-radius: 4px 4px 0 0;
        padding: 6px 10px 6px 10px;
        font-size: 15px;
        line-height: 22px;
        font-weight: bold;
        cursor: pointer;
        display: inline-block;
        /* background-image: url(../../Images/dropdownArrow.png);*/
        background-position: right;
        background-repeat: no-repeat;
    }

.refbtn:hover {
    background-color: #fff !important;
    color: #1fad63;
    /*background-image: url(../../Images/dropdownArrowHover.png);*/
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 228px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    right: 0;
    top: 35px;
    border: solid 1px rgb(204, 204, 204);
    z-index: 99999;
}

    .dropdown-content a {
        color: black;
        padding: 10px;
        font-weight: bold;
        color: #404040;
        text-decoration: none;
        display: block;
        border-bottom: solid 1px #ccc;
        font-size: 15px;
        font-weight: 400;
        line-height: 22px;
    }

        .dropdown-content a img {
            margin-right: 5px;
        }

.dropdown a:hover {
    background-color: #ebfaec;
    text-decoration: none;
    color: #459d48;
}

.show {
    display: block;
}

.dropdown-content a img.rightActionBtn {
    text-align: right;
    float: right;
}

.dropdown-content a:last-child {
    border: none;
}

.topMargin26 {
    margin-top: 26px;
}

.topMargin18 {
    margin-top: 18px;
}

.dashboardlegends {
    /*border:dotted 1px #ccc;*/
    padding: 28px 5px 5px 0;
    font-size: 12px;
    font-weight: bold;
    color: #404040;
    line-height: 18px;
    text-align: right;
    margin-right: 15px;
}

    .dashboardlegends span {
        display: inline-block;
        border-radius: 100%;
        width: 18px;
        height: 18px;
        vertical-align: middle;
        margin-left: 10px;
        margin-right: 2px;
    }

        .dashboardlegends span.inviolation {
            background: #ff8c7c;
        }

        .dashboardlegends span.nearingViolation {
            background: #f3dfbf;
        }

.hosReport table thead td {
    background: #ABABAB;
    color: #404040;
    text-transform: uppercase;
    font-weight: bold !important;
    font-size: 14px !important;
    padding: 12px 5px !important;
}

.hosReport table thead tr td, .hosReport table thead tr td a {
    color: #404040 !important;
}

.hosReport table tr td {
    border-bottom: solid 1px #ccc;
    border-right: solid 1px #ccc;
    padding: 5px;
    font-size: 13px;
    text-transform: none;
    font-weight: normal;
    text-align: center;
}

.hosReport table tr:nth-child(2n+2) {
    background: #f8f8f8;
}
/*.GrayColorRecordCss span {
    background: #59595A;
    border-radius: 2px;
    padding: 5px 10px;
    color: #fff;
}
.GreenColorRecordCss span {
    background: #d0e7d8;
    border-radius: 2px;
    padding: 5px 10px;
    color: #009444;
}*/

@media (min-width: 0px) and (max-width:767px) {
    .whiteWrapper .row .col-md-4, .whiteWrapper .row .col-md-2 {
        width: 100%;
        float: none;
        padding: 0;
        margin: 0 0 10px;
    }
}

@media (min-width: 768px) and (max-width:962px) {
    .whiteWrapper .row .col-md-4, .whiteWrapper .row .col-md-2 {
        width: 29%;
    }
}

@media (min-width: 963px) and (max-width:1575px) {
    .whiteWrapper .row .col-md-4, .whiteWrapper .row .col-md-2 {
        width: 30%;
    }
}

@media (max-width:1500px) {
    /*.graphLegend {
        width: 85%;
        bottom: 5px;
    }*/

    /*.graphLegend div {
            display: block;
            float: left;
            width: 50%;
        }*/
}






.blink {
    animation: blink 2s linear infinite;
}


@keyframes blink {
    0% {
        opacity: 0;
    }

    50% {
        opacity: .5;
    }

    100% {
        opacity: 1;
    }
}

div > .status {
    cursor: pointer;
}

.status.GrayColorRecordCss, .status.RedColorRecordCss, .status.YellowColorRecordCss, .status.GreenColorRecordCss {
    display: inline-block;
    color: #fff;
    padding: 1px 5px;
    border-radius: 0;
}

.RedColorRecordCss {
    background: #f0141c;
}

.GrayColorRecordCss {
    background-color: #818182;
}

.YellowColorRecordCss {
    background: #fccb23;
}

.GreenColorRecordCss {
    background: #00a651;
}

    .GrayColorRecordCss label, .RedColorRecordCss label, .YellowColorRecordCss label, .GreenColorRecordCss label {
        margin: 0;
        font-size: 12px;
    }

.YellowColorRecordCss label {
    color: #bb3d1d;
}

td.GrayColorRecordCss, td.RedColorRecordCss, td.YellowColorRecordCss, td.GreenColorRecordCss {
    display: block;
    text-align: center;
    color: #fff;
}

td.YellowColorRecordCss {
    color: #bb3d1d;
}

.hoursRemaining {
    overflow: hidden;
}

    .hoursRemaining .col-md-4 {
        padding: 0;
    }

    .hoursRemaining .graphLegend {
        text-align: center;
    }

        .hoursRemaining .graphLegend div {
            display: inline-block;
        }

    .hoursRemaining .graphBox h2 {
        position: absolute;
        z-index: 999;
    }

    .hoursRemaining #BreakHours-wrapper, .hoursRemaining #DrivingAndShiftHours-wrapper, .hoursRemaining #CycleHours-wrapper {
        position: inherit !important;
    }

.ddfaNotifications {
    margin: 21px 0 0 0;
    overflow: hidden;
}

    .ddfaNotifications a {
        cursor: default;
    }

    .ddfaNotifications .col-md-2 {
        padding: 0;
    }

        .ddfaNotifications .col-md-2 .graphBox {
            padding: 10px !important;
        }

            .ddfaNotifications .col-md-2 .graphBox .articleImg {
                margin: 0 !important;
                /*height: 50px;*/
            }

                .ddfaNotifications .col-md-2 .graphBox .articleImg img {
                    width: 50px;
                }

            .ddfaNotifications .col-md-2 .graphBox .articleTitle {
                font-size: 13px;
                padding: 0;
                text-align: center;
            }

                .ddfaNotifications .col-md-2 .graphBox .articleTitle img {
                    display: block;
                    margin: 0 auto;
                    /*float:left*/
                    position: absolute;
                    top: 2px;
                    right: 2px;
                }

.w76 {
    width: 76px;
}

.hosReport .driverName {
    width: 220px;
}

.activeRow td {
    border: solid 2px #094 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

#testfeedbackMaster {
    position: fixed;
    top: 90px;
    /*left: -266px;*/
    left: -390px;
    /*height: calc(100% - 50px);*/
    z-index: 99;
    height: 96% !important;
}

    #testfeedbackMaster .mainfBox1 {
        padding: 0;
        border-radius: 0 5px 5px 0;
        width: 388px;
        height: 90%;
        /*max-height:70%;*/
        border: 1px solid #009444;
        background: #fff;
    }

    #testfeedbackMaster h2 {
        background: #e3ebe8;
        color: #08704a;
        font-size: 15px;
        text-transform: uppercase;
        padding: 0;
        margin: 5px;
        font-variant: inherit;
        text-align: center;
        padding: 9px;
    }

    #testfeedbackMaster #accordion .panel-default {
        border: none;
        border-radius: 0;
        padding: 10px;
    }

        #testfeedbackMaster #accordion .panel-default > .panel-heading h4 a {
            display: block;
            color: #08704a;
            text-decoration: none;
            font-weight: 500;
            text-transform: uppercase;
            font-size: 15px;
        }

        #testfeedbackMaster #accordion .panel-default > .panel-heading {
            background: none;
            padding: 10px 0;
            /*border-top:solid 1px #ccc;*/
        }

    #collapseLocation .selectionHeader h2, #testfeedbackMaster .collapseSetting .selectionHeader h2 {
        padding: 3px 0;
        margin: 0;
        background: none;
        font-size: 14px !important;
        color: #404040 !important;
        text-transform: uppercase;
        float: left;
        background: none !important;
    }

#testfeedbackMaster {
    /*  display: none !important;*/
}

#testfeed1 {
    display: none !important;
}

#testfeedback4 .location1 .selectGroup div {
    padding: 10px 4px;
    margin: 0 0 2px 0;
}

    #testfeedback4 .location1 .selectGroup div:nth-child(2n+1) {
        background: #f6f6f6;
    }

    #testfeedback4 .location1 .selectGroup div input {
        margin: 5px 0 0 0;
        padding: 2px;
    }

    #testfeedback4 .location1 .selectGroup div.brHeight br {
        margin: 0 0 10px;
    }



/*vehicle device for*/

#VehiclePlot {
    position: fixed;
    /*top: 180px;*/
    /*height:-282px;*/
    bottom: 0;
    width: 100%;
    /* width:100%;*/
    z-index: 99;
}

    #VehiclePlot .mainfBox2 {
        padding: 0;
        height: auto;
        border: 1px solid #009444;
        background: #fff;
        width: 100%;
        height: 0px;
        overflow: auto;
        position: relative;
    }

    #VehiclePlot h2 {
        text-align: center;
        color: #08704a;
        font-size: 16px;
        text-transform: uppercase;
        padding: 0;
        margin: 8px 0 8px 0;
        font-variant: inherit;
        display: none;
    }

.collapse.in {
    height: inherit !important;
}

@media (min-device-width:768px) and (max-device-width:1024px) {
    .driverGrid {
        width: 98%;
        float: none;
        margin: 0 auto 10px;
    }

    .driverGraph {
        width: 98%;
        float: none;
        margin: 0 auto 10px;
    }
}

@media (min-device-width:1025px) and (max-device-width:1292px) {
}


.Search-close {
    display: none;
}

.sNavSearch {
    float: right;
}

#searchBoxContainer {
    width: 400px;
    right: 6px !important;
}

.MicrosoftMap {
    top: 39px;
    right: 40px;
    width: 400px;
    margin-right: 20px;
    position: absolute;
}

.sNavSearch .SearchTxtbox {
    float: left;
    width: 200px;
    /*overflow: hidden;*/
    background: #fff;
    padding: 4px 8px;
    position: absolute;
    z-index: -9;
    border: solid 2px #404040;
    right: 40px;
    margin: 0;
    border-radius: 16px;
}

    .sNavSearch .SearchTxtbox input {
        width: 92%;
        float: left;
        padding: 3px 5px;
        text-align: left;
        border: solid 1px #ccc;
        border-radius: 6px;
    }

    .sNavSearch .SearchTxtbox a#btnSaveSpeed {
        float: none !important;
        width: 15px;
        background: #0F602B;
        padding: 5px;
        color: #fff;
        margin: 0 5px !important;
        position: inherit;
        border-radius: 100%;
        height: 15px;
        text-align: center;
        line-height: 15px;
    }

.sNavSearch a {
    float: right !important;
}



.ndbHrWrapper {
    width: 60%;
    float: left;
}

.ndbnotWrapper {
    float: right;
    width: 39%;
}

#container .whiteWrapper .newdbHead {
    overflow: hidden;
    margin: 0 0 10px;
}

    #container .whiteWrapper .newdbHead h2 {
        font-size: 20px;
        font-weight: 600;
        color: #1fad63;
        padding: 0;
        margin: 0;
        float: left;
        padding: 0;
    }

    #container .whiteWrapper .newdbHead .graphLegend {
        position: inherit;
        float: right;
        margin: 0 10px;
    }

.notficationCol, .newhrCol {
    width: 33%;
    float: left;
}

.notRow {
    overflow: hidden;
}

.newDbDlBookImg {
    background: #fff;
    border: solid 1px #ccc;
    padding: 0;
    text-align: center;
}

    .newDbDlBookImg img {
        width: 99%;
        margin: 0 auto;
    }

.testmap {
    font-size: 100px !important;
}

@media (min-width: 0) and (max-width: 767px) {
    .ndbHrWrapper {
        width: 100%;
        float: none;
    }

    .ndbnotWrapper {
        float: none;
        width: 100%;
        margin: 15px 0;
    }

        .ndbnotWrapper .articleImg img {
            width: 40px;
        }

        .ndbnotWrapper .articleTitle img {
            display: block;
            margin: 0 auto;
        }

        .ndbnotWrapper .articleTitle {
            font-size: 11px;
        }

    #container .ndbnotWrapper .notification {
        padding: 10px 5px;
    }

    .newhrCol {
        width: 100%;
    }

    #container .whiteWrapper .newdbHead h2, #container .whiteWrapper .newdbHead .graphLegend {
        float: none;
    }

    #container .whiteWrapper .newdbHead .graphLegend {
        width: 100%;
        text-align: left;
        max-width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .ndbHrWrapper {
        width: 100%;
        float: none;
    }

    .ndbnotWrapper {
        float: none;
        width: 100%;
        margin: 15px 0;
    }
}
/*@media (min-width: 1025px) and (max-width: 1651px) {
    .ndbnotWrapper .articleImg img {
        width: 48px
    }
    #container .ndbnotWrapper .notification {
        height:114px;
    }
}*/

/*Auto Referesh Functionality*/
.mapActionsWrapper .sidePanelforAutorefresh p span {
    display: inline-block;
    font-size: 1px !important;
    vertical-align: middle;
    color: #929293;
    cursor: pointer;
}

    .mapActionsWrapper .sidePanelforAutorefresh p span.on {
        background: url(images/refereshOn.png) no-repeat;
        height: 36px;
        width: 66px;
        text-indent: 0;
    }

    .mapActionsWrapper .sidePanelforAutorefresh p span.off {
        background: url(images/refereshOff.png) no-repeat;
        height: 36px;
        width: 66px;
    }

.mapActionsWrapper .SettingBtn {
    position: absolute;
    right: -22px;
    top: 9px;
    background: rgba(0, 148, 68, 0.99);
    padding: 8px;
    border-radius: 50%;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}

.setTime {
    display: none;
}

.mapActionsWrapper .setTime {
    position: absolute;
    right: 0;
    left: 5px;
    top: -110px;
    padding: 8px;
    border-radius: 5px;
    color: #fff;
    font-size: 22px;
    background: #ffffff;
    border: 2px solid #039546;
    width: 200px;
    /*display:none;*/
}

    .mapActionsWrapper .setTime:after, .mapActionsWrapper .setTime:before {
        top: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .mapActionsWrapper .setTime:after {
        border-color: rgba(255, 255, 255, 0);
        border-top-color: #ffffff;
        border-width: 12px;
        margin-left: -12px;
    }

    .mapActionsWrapper .setTime:before {
        border-color: rgba(3, 149, 70, 0);
        border-top-color: #039546;
        border-width: 14px;
        margin-left: -14px;
    }




    .mapActionsWrapper .setTime p {
        color: #404040;
        font-size: 14px;
        padding: 0;
        margin: 0 0 5px 0;
        text-align: center;
        font-weight: 500;
    }

.mapActionsWrapper .setRTbox {
    overflow: hidden;
    /*padding: 4px 8px;*/
    padding: 0px 8px;
    margin: 0;
}

    .mapActionsWrapper .setRTbox input {
        width: 60px;
        float: left;
        padding: 6px;
        text-align: center;
        border: solid 1px #ccc;
        border-radius: 6px;
        font-size: 18px;
        color: #404040;
    }

    .mapActionsWrapper .setRTbox a {
        float: left;
        width: 22px;
        background: #0F602B;
        padding: 5px;
        color: #fff;
        margin: 3px 5px !important;
        position: inherit;
        border-radius: 100%;
        height: 22px;
        text-align: center;
        line-height: 22px;
    }

.setRTbox .clockIcon {
    float: left;
    color: #404040;
    font-size: 32px;
    margin: 5px 5px 5px 22px;
}

.clslblMessageForUpdate {
    font-size: 10px;
    color: rgba(2, 149, 69, 1);
    text-align: center;
    padding: 0;
    margin: 0;
}

.bm_bottomRightOverlay {
    right: 12% !important;
}

@media (min-width: 0) and (max-width: 599px) {

    /*added by nilesh */
    .bm_bottomRightOverlay {
        right: 30% !important;
    }
}

@media (min-width: 600px) and (max-width: 1024px) {

    /*added by nilesh */
    .bm_bottomRightOverlay {
        right: 20% !important;
    }
}


/*CSS For Setting Navigations*/
.select_sec_btn {
    width: 250px;
    font-family: 'Roboto', sans-serif;
    border-radius: 10px;
    border-color: #404040;
    text-align: left;
    background: #fff;
    color: #404040;
    font-weight: 600;
    letter-spacing: 1px;
}

    .select_sec_btn:hover {
        background-color: #fff;
        color: #00882a;
    }

    .open > .dropdown-toggle.select_sec_btn, .open > .dropdown-toggle.select_sec_btn:hover, .select_sec_btn:active:focus, .select_sec_btn:active:hover, .select_sec_btn:active {
        color: #00882a;
        background-color: #fff;
        border-color: #00882a;
        box-shadow: none;
        outline: none;
    }

    .select_sec_btn .caret {
        float: right;
        font-size: 69px;
        color: #404040;
        border-top: 6px dashed;
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        margin-top: 7px;
    }

.setting_option li .active {
    color: #00882a;
    background: #e9efed;
}

.setting_option {
    border-radius: 0px;
    width: 250px;
    padding: 0px;
    border: none;
    box-shadow: none;
    height: 300px;
    overflow: auto;
}

    .setting_option > li > a:hover {
        background: #e9efed;
        color: #00882a;
    }

    .setting_option li a {
        background: #dedede;
        font-family: 'Roboto', sans-serif;
        font-weight: 600;
        border-bottom: 1px #fff solid;
        padding: 8px 20px;
    }

.SettingHead {
}

    .SettingHead h2 {
        padding: 0;
        margin: 8px 8px 0 0;
        font-size: 20px;
        color: #333;
        font-weight: 400;
        font-variant: inherit;
    }

.ivHead {
    padding: 5px 0;
}

    .ivHead h3.dashboardTitle {
        padding: 0 !important;
        margin: 0 !important;
    }

.ivRightButtons, .ivRightButtons input.mainbutton1 {
    display: inline-block;
    text-align: right;
}

.ivFilter {
    width: 100%;
    padding: 0;
    margin: 0 0 10px;
    overflow: hidden;
}

    .ivFilter .evgt, .ivFilter .tlt, .ivFilter .location, .ivFilter .action {
        float: left;
        margin: 0 15px 0 0;
        /*width:20%*/
        width: 16%;
    }

    .ivFilter label {
        margin: 0 0 5px;
    }

    .ivFilter .form-control {
        height: inherit !important;
    }
    /*.ivFilter .form-control {
    width:100%
}*/
    .ivFilter .form-control {
        padding: 5px;
        width: 99%;
    }

@media only screen and (max-width: 767px) {
    .ivFilter .evgt, .ivFilter .tlt, .ivFilter .location, .ivFilter .action {
        width: 96%;
        margin: 0 0 10px;
        float: none;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .ivFilter .evgt, .ivFilter .tlt, .ivFilter .location, .ivFilter .action {
        width: 26%;
    }
}

.getLocationBtn {
    color: #fff !important;
    margin-bottom: 5px !important;
    display: block !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
}

.resetLocationBtn {
    background-color: #d9534f !important;
}

.botmargin {
    margin-bottom: 5px !important;
}

.maxHeight {
    max-height: 22vh;
    min-height: 100px;
}

.ErrorMsz {
    color: red;
}

.SuccessMsz {
    color: forestgreen;
}

#txtInterventionNote {
    max-width: 99% !important;
}

.textellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tagIgnored {
    background: #ee9e2d;
    color: #000000;
    padding: 4px 7px;
    border-radius: 13px;
    font-weight: 500;
    font-size: 8px;
    float: right;
    margin-right: 5px;
}
.tagWatched {
    background: #019444;
    color: #ffffff;
    padding: 4px 7px;
    border-radius: 13px;
    font-weight: 500;
    font-size: 8px;
    float: right;
    margin-right: 5px;
}
.tagWrapper{
    position: absolute; margin-top: -23px; width: 94%;
}