@import "shared.css";

/* http://stackoverflow.com/questions/9141249/twitter-bootstrap-css-affecting-google-maps */
#map img {
    max-width: none;
}

#map label {
    width: auto;
    display: inline;
}

#footer {
    width: auto;
    height: 100px;
    overflow: hidden;
    padding: 0;
    background: #181818 url("https://cdn.openitemapp.com/Content/images/tray-bg.png");
    color: white;
    padding-top: 10px;
    padding-bottom: 0px;
}

#footer1 ul {
    list-style: disc;
    color: gray;
}

#footer a {
    color: White;
    margin-top: 20px;
}

#footer1 {
    width: auto;
    overflow: hidden;
    padding-top: 20px;
    background: #E0E0E0 url("https://cdn.openitemapp.com/Content/images/dark_bg.jpg");
    border-top: 1px solid #DADADA;
    margin-top: 10px;
}

#footer span.ui-corner-all {
    background: #E0E0E0 url("https://cdn.openitemapp.com/Content/images/dark_bg.jpg");
}

#footer1 .span-one-third {
    width: 280px;
    margin-right: 20px;
}

#activity {
    position: absolute;
    margin-left: -10px;
    width: 100%;
    height: 100%;
    padding: 0px;
    color: #000;
    font-family: Helvetica, Arial, Sans-Serif;
    z-index: 100;
    background-color: white;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    opacity: .4;
    filter: alpha(opacity=40);
}

.row > [class*="span"] {
    display: inline;
    float: left;
    margin-left: 20px;
}

.icon-wrench.glyphicons, .icon-search.glyphicons, icon-edit.glyphicons {
    background-image: url("/Content/img/glyphicons-halflings.png") !important;
}

.icon-script {
    background-image: url("https://cdn.openitemapp.com/content/images/silk/script.png") !important;
    background-repeat: no-repeat;
    background-position-x: 0px;
    background-position-y: 0px;
    width: 16px;
    height: 16px;
}

.glyphicons.icon-white {
    background-image: url("/Content/img/glyphicons-halflings-white.png") !important;
}

.clear-background-image {
    background-image: none !important;
}

.help-link {
    display: none;
}

.icon-soti {
    background-image: url("https://cdn.openitemapp.com/Content/images/SOTI_16x16.png") !important;
    background-repeat: no-repeat;
    background-position-x: 0px;
    background-position-y: 0px;
    width: 16px;
    height: 16px;
}

i small {
    font-size: 8px;
    color: gray;
}

meter {
    min-height: 16px;
}

label {
    display: inline;
}

.required:after {
    content: " * ";
    font-weight: bold;
    color: red;
}

.nowrap {
    white-space: nowrap !important;
}

.wrap {
    white-space: normal !important;
}

.width-auto {
    width: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.no-margin {
    margin: 0px 0px 0px 0px !important;
}

.no-vertical-padding {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.color-black {
    color: black;
}

.fontsize-40px, .page-header {
    font-size: 40px;
}

.strike-through {
    text-decoration: line-through;
}

.breadcrumb {
    margin-top: 10px;
}

.navbar-inner .nav {
    /*  margin-top : 20px; */
}

.page-header-top {
    background: whiteSmoke;
    padding: 20px 20px 10px;
    padding-top: 60px;
    margin-bottom: 0px;
    border-bottom: 1px solid #DDD;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.5);
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.5);
    box-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

    .page-header-top h3 {
        color: #444;
    }

    .page-header-top ul.sub-menu {
        float: right;
    }

body.collapsed .page-header-top {
    padding-top: 20px;
}

    body.collapsed .page-header-top > div.container-fluid, body.collapsed .page-header-top > div.container {
        display: none;
    }

body.collapsed > div.container-fluid > div.row-fluid > div.span2, body.collapsed > div.container > div.row-fluid > div.span2 {
    display: none;
}

body.collapsed > div.container-fluid > div.row-fluid > div.span10, body.collapsed > div.container
{
    width: 100%;
    margin-left: 0px;
    padding-left: 0px;
}

.reports-timeframe {
    margin-top: 20px;
}

body.fullscreen .page-header-top, body.fullscreen .navbar, body.fullscreen #footer, body.fullscreen #footer1 {
    display: none;
    margin: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    line-height: 0px !important;
}

body.fullscreen .reports-timeframe {
    margin-top: 0px;
}

div.sidebar-nav ul li {
    white-space: nowrap;
}

div.sidebar-nav.well, #grid {
    /* this is so everything lines up nicely in fluid layout */
    margin-top: 10px;
}
/*
div.sidebar-nav
{
    min-width : 200px;
}
*/
div.container-fluid > div.row-fluid {
    padding-top: 10px;
}

[class^="icon-status"], [class*=" icon-status"] {
    background-position: 0px 0px;
    background-repeat: no-repeat;
    width: auto;
}

.x-menu-item-icon, .x-grid-panel span[class^="icon-"], .x-grid-panel span[class*=" icon-"], #grid span[class^="icon-"], #grid span[class*=" icon-"], .grid span[class^="icon-"], .grid span[class*=" icon-"], .buttonbar[class*=" icon-"], .buttonbar[class^="icon-"], .buttonbar.icon-edit {
    background-position-x: 0px;
    background-position-y: 0px;
    height: 16px;
    width: 16px;
}

.fbutton span[class^="icon-"] {
    width: auto;
}

.x-menu-item-icon {
    border: 0 none;
    height: 16px;
    width: 16px;
    padding: 0;
    vertical-align: top;
    position: absolute;
    left: 3px;
    top: 3px;
    margin: 0;
    background-position: center;
}

.grid label, .editor-label label, .editform label {
    display: inline;
}
/*
.form-horizontal label.radio
{
    display : block;
}
*/
.grid select, .grid input[type=text] {
    margin-bottom: 0px;
    padding: 0px;
    height: 18px;
}

.chromedocument fieldset > legend, .box fieldset > legend, .editform fieldset > legend {
    width: auto;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    margin-bottom: 0px;
}

.chromedocument fieldset, .box fieldset {
    margin-bottom: 5px;
}

.chromeheader form {
    display: inline;
}

.chromeheader > div.container > span.pull-right {
    /* fix issue with buttons outside the header */
    margin-right: 20px;
}

button {
    -moz-outline: 0 none;
    outline: 0 none;
}

.error {
    color: Red;
}

.columns-2 {
    -moz-column-count: 2;
    -webkit-columns: 2;
    -o-columns: 2;
    columns: 2;
}
/*
.inline-chrome-form legend
{
    margin-bottom : 0px;    
    border : 0px;    
    position: relative;      
    left: -7px;  
}
*/
legend.chromeheader {
    background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#CCC), color-stop(0.8, #EEE));
    background: -moz-linear-gradient(center bottom, #CCCCCC 0%, #EEEEEE 80%) repeat scroll 0 0 transparent; /*     -webkit-box-shadow: rgba(0, 0, 0, 0.0898438) 0px 0px 10px;     -moz-box-shadow: rgba(0, 0, 0, 0.0898438) 0px 0px 10px;     box-shadow : rgba(0, 0, 0, 0.0898438) 0px 0px 10px;     */
    border: 1px solid #BBB;
    display: block;
    font-weight: bold;
    font-size: 12px;
    height: 20px;
    margin: 0px;
    margin-left: -1px;
    margin-right: -1px;
    padding: 0px;
    width: 100%;
}

.page-header-top > div.container > div.ui-state-error, .page-header-top > div.container > div.ui-state-highlight {
    padding: 5px;
    width: 300px;
    font-size: 10px;
    margin-right: 5px;
}

    .page-header-top > div.container > div.ui-state-highlight span.ui-icon, .page-header-top > div.container > div.ui-state-error span.ui-icon {
        float: left;
    }
/* begin selectable */
ol.selectable .ui-selecting {
    border-color: #356635;
    -webkit-box-shadow: 0 0 6px #7aba7b;
    -moz-box-shadow: 0 0 6px #7aba7b;
    box-shadow: 0 0 6px #7aba7b;
    /*danie added this to be more visisible*/
    background-color: #7aba7b;
}

    ol.selectable .ui-selecting h3 {
        color: #356635;
    }

ol.selectable .ui-selected {
    color: #468847;
    border-color: #468847;
}

    ol.selectable .ui-selected h3 {
        color: #468847;
    }

    ol.selectable .ui-selected, ol.selectable .ui-selected div.search-item {
        /*danie added this to be more visisible*/
        background-color: #B4E6A2;
    }

ol.selectable {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

    ol.selectable > li {
        margin: 3px;
    }

    ol.selectable li span.assignedto {
        float: right;
    }

    ol.selectable li.disabled span.assignedto {
        background-color: Yellow;
    }
/* end selectable */

fieldset {
    padding: 10px;
    border: 1px solid silver;
    -webkit-box-shadow: rgba(0, 0, 0, 0.0898438) 0px 0px 10px;
}

    fieldset legend {
        padding: 5px;
        border: 1px solid silver;
    }

    fieldset ul.list abbr, fieldset ul.list span.date {
        color: gray;
    }

    fieldset ul.list strong {
        font-weight: bold;
    }

#filter-by-principal /*fieldset */ {
    background-color: transparent;
    width: auto !important;
    float: left;
}

fieldset#filter-by-principal input[type=checkbox] {
    margin-left: 10px;
    margin-right: 3px;
}
/* Edit Form */
fieldset div.editor-field:not(div.input-append) input[type=text], fieldset div.editor-field input[type=password], fieldset div.editor-field textarea {
    width: 240px;
}

fieldset div.editor-field select {
    width: 250px;
}

fieldset div.editor-field:not(div.input-append) input[type=text], fieldset div.editor-field input[type=password], .controls input[type=password] {
    height: 25px;
}

fieldset div.editor-field select {
    /*height : 20px;*/
}

fieldset div.editor-field textarea {
    /*height : 100px;*/
    font-family: Tahoma, Sans-Serif;
    font-size: 9pt;
}

fieldset div.editor-field, fieldset div.editor-label {
    margin: 3px;
}

.field-validation-error {
    color: Red;
}

fieldset div.buttonbar {
    margin: 5px;
    width: 250px;
    text-align: right;
}

div.buttonbar .icon-error, div.buttonbar.icon-error {
    cursor: help;
}

.icon-contact {
    background-image: url(https://cdn.openitemapp.com/content/images/Contact.png);
}
/* end edit form */
ul, ol {
    list-style-type: none;
}

a > img, a:visited img {
    border: 0px;
}

#termsandconditions ol {
    list-style-type: decimal;
}

.modified {
    /* form editing      background-color: #FFFFCC;     */
}

#DefaultMainContent {
    padding: 20px;
}

#div_main {
    clear: none;
    margin-top: 0px;
    margin: auto;
    min-width: 940px;
    background-color: white; /*-webkit-box-shadow: #E4E4E4 0px 0px 10px;*/
}

#div_heading {
    border-left: solid 1px #a7bf8f;
    border-right: solid 1px #a7bf8f;
    clear: both;
    width: 100%;
    height: 60px; /*background-image: url(https://cdn.openitemapp.com/content/images/header_bg.jpg);*/
}

#div_menubar, ul.ui-widget-header, ul.sf-menu.ui-widget-header {
    /*Danie Fix Menu for jQuery UI */
    border: 0px !important;
    border-left: 0px !important;
    border-right: 0px !important;
}

#div_menubar {
    /*     border-left: solid 1px #a7bf8f;     border-right: solid 1px #a7bf8f;     background-image: url(http://cdn.openitemapp.com/content/images/menu_bg.jpg);     */
    float: left;
    clear: both;
    min-width: 100%;
    background-repeat: repeat-x;
    height: 25px;
    z-index: 1000;
    color: White; /*vertical-align : middle;*/
}

    #div_menubar div.LogOnUserControl {
        float: right;
        white-space: nowrap;
        padding-top: 5px;
        padding-right: 3px;
    }

        #div_menubar div.LogOnUserControl a {
            color: White;
        }

#div_map {
    clear: both;
    background-color: White;
    min-height: 500px;
    height: 500px;
}

#playbackslidercontainer, #playbackslider {
    width: 620px;
    display: block;
}

div.CustomerVisit {
    border: solid 1px silver;
    margin-bottom: 16px;
    background-color: #EEE; /*width: 617px;*/
}

#div_visits {
    font: left;
}

#UserStatusDashBoard, #div_visits {
    /* for some reason we need to add this */
    margin-top: -10px;
}

#div_internal_frame {
    background-color: White;
    clear: both;
    width: 1168px;
    border-bottom: solid 1px #a7bf8f;
    border-left: solid 1px #a7bf8f;
    border-right: solid 1px #a7bf8f;
}

#div_result {
    padding-bottom: 32px;
    background-color: White;
    margin: 0px;
    z-index: 0;
    float: left;
    width: 100%;
}

#div_map_footer {
    /*padding-left: 8px;*/
    clear: both;
}

#div_map_contents {
    margin: 0px;
    height: 500px;
    width: 960px;
    float: left;
}

#div_main, #div_map, #div_internal_frame {
    min-width: 1000px;
}

#map {
    width: 100%;
    height: 100%;
    z-index: 0;
}

#dialog-map div.chromecontainer {
    width: 402px;
}

#dialog-map div.chromecontainer, #dialog-map div.chromedocument {
    margin: 0px;
    padding: 0px;
}

#dialog-map-legend {
    padding: 5px;
    padding-bottom: 50px;
    margin-bottom: 10px;
}

    #dialog-map-legend > div.legend {
        clear: both;
        height: 30px;
        padding: 5px;
    }

        #dialog-map-legend > div.legend:nth-child(even) {
            background-color: #f8f7f7;
        }

#div_search {
    background-color: White;
    width: 210px;
    height: 100%;
}

    #div_search label {
        font-size: 8pt;
        color: black;
    }

#div_search_results .result_item {
    width: 100%;
    clear: both;
    float: none;
    height: 18px;
    margin: 0px;
    padding: 0px;
    line-height: 18px;
    color: rgb(13, 122, 64);
}

#div_search_results .result_item_column {
    float: left;
    width: 100px;
}


#div_search_results .result_item:hover {
    cursor: pointer;
}

#div_search_results .result_item_selected {
    font-weight: bold;
    cursor: pointer;
}

#div_search_contents {
}

    #div_search_contents input {
        border: solid 1px gray;
    }

#image_header_left {
    float: left;
}

#image_header_right {
    padding-top: 16px;
    margin-right: 16px;
    float: right;
}

#div_defect_info {
    width: 100%;
    height: 100%;
}

    #div_defect_info table {
        margin: 0px;
        margin-top: 16px;
        border: none;
    }

    #div_defect_info .column_description {
        font-weight: bold;
        width: 110px;
        color: #0087B4;
    }

.area_heading {
    background-image: url(https://cdn.openitemapp.com/content/images/area_heading_bg.jpg);
    background-repeat: repeat-x;
    font-size: 10pt;
    font-weight: bold;
    line-height: 27px;
    color: #f2f2f2;
    height: 27px;
    text-indent: 16px;
    width: 100%;
}

table.popup_display_table {
    vertical-align: top;
}

.popup_display_table_bold_column {
    font-weight: bold;
    padding-right: 8px;
    vertical-align: top;
}

.field_label {
    font-weight: bold;
}
/*
table
{
    border-spacing: 0px;
}
table td
{
    padding: 3px;
    margin: 0px;
}
*/

.table_header {
    font-weight: bold;
}


.table_field {
    border: 1px solid #DBDBDB;
}

.underline {
    border-bottom: 1px solid #808080;
}

.float_right {
    float: right;
}

.right_aligned {
    text-align: right;
}

.centre_aligned, text-align-center {
    text-align: center !important;
}

.report_date_range {
    background-color: #EEE;
    float: left;
    margin: 0px;
    clear: both;
    padding-bottom: 5px;
    width: 100%;
}

a.expired-true, a.expired-true:hover, a.expired-true:visited {
    color: red !important;
}

    a.expired-true:after {
        content: ' Expired';
    }

div.timespan {
}

div.level a.zoom {
    float: right;
}

a.image-link, a.image-link:visited, a.image-link:hover {
    display: inline-block !important;
    text-decoration: none;
}

    a.image-link span.icon {
    }

a.zoomuser, a.zoomuser:visited, a.zoomcustomer, a.zoomcustomer:visited, a.zoomdocument, a.zoomdocument:visited, a.zoomvehicle, a.zoomvehicle:visited, a.zoomzone, a.zoomzone:visited {
    font-size: 10px;
    color: #0D7A40 !important;
    text-decoration: none;
}

.ui-accordion-content {
    padding-top: 0px !important;
    padding-left: 10px !important;
}

div.accordion-menu ul, div.accordion-menu ol /*div.divusers ul, div.divusers ol, div.divcustomers ul, div.divcustomers ol, div.divdocuments ol, div.divvehicles ol*/ {
    list-style-type: none;
    margin: 0px;
}

    div.accordion-menu ul, div.accordion-menu ul li /*div.divusers ul, div.divusers ul li, div.divcustomers ul, div.divdocuments ul,div.divvehicles ul*/ {
        width: 170px;
        padding-left: 0px;
        margin-left: 0px !important;
    }

div.accordion-menu > ul > li > a > span {
    width: 170px;
    display: block;
}

div.accordion-menu ol /*div.divusers ol, div.divcustomers ol, div.divdocuments ol, div.divvehicles ol*/ {
    display: inline;
}

    div.accordion-menu ol.ui-helper-hidden /*div.divusers ol.ui-helper-hidden, div.divcustomers ol.ui-helper-hidden, div.divdocuments ol.ui-helper-hidden, div.divvehicles ol.ui-helper-hidden*/ {
        display: none;
    }

div.accordion-menu ul li /*div.divusers ul li, div.divcustomers ul li, div.divdocuments ul li, div.divvehicles ul li*/ {
    clear: both;
    display: block;
}

div.accordion-menu ol li, ol.toolbar li /*div.divusers ol li, div.divcustomers ol li, div.divdocuments ol li, div.divvehicles ol li*/ {
    float: right;
    clear: none;
    width: auto;
}

div.accordion-menu label {
    padding-top: 5px; /*Margin Doesn't work */
    float: right;
}

div.divcustomers ul li img, div.divzones ul li img {
    float: left;
    margin-top: -2px;
    margin-right: 2px;
}

div.divcustomers ul li a.zoomcustomer {
    display: block;
    height: 24px;
}

div.divzones ul li a.zoomzone {
    display: block;
    height: 36px; /*margin-left : 22px;*/
}

div.divzones ul li span.colorlegend {
    padding-left: 12px !important;
    padding-bottom: 12px !important; /*display :block;*/
    width: 18px !important;
    float: left;
}

div.accordion-menu ul li:hover /*div.divusers ul li:hover, div.divcustomers ul li:hover, div.divdocuments ul li:hover, div.divvehicles ul li:hover*/ {
    background-repeat: no-repeat;
    background-image: url(https://cdn.openitemapp.com/content/images/green_arrow_down.png);
    background-position: 155px 5px;
}

div.accordion-menu ul li.ui-state-default:hover /*div.divusers ul li.ui-state-default:hover, div.divcustomers ul li.ui-state-default:hover, div.divdocuments ul li.ui-state-default:hover, div.divvehicles ul li.ui-state-default:hover */ {
    background-image: url(https://cdn.openitemapp.com/content/images/green_arrow_up.png);
}

div.accordion-menu ul li ol li:hover /*div.divusers ul li ol li:hover, div.divcustomers ul li ol li:hover, div.divdocuments ul li ol li:hover, div.divvehicles ul li ol li:hover*/ {
    background-image: none;
}

#driversgrid th.row img {
    margin-top: 2px;
}

#driversgrid th.Driver input.text {
    margin: 0px;
    float: left;
    width: 100px;
}

#driversgrid th.Driver {
    padding: 0px;
    background-color: White !important;
    background-image: none !important;
}

    #driversgrid th.Driver img.magnifier {
        float: right;
    }

#accordion input.txtsearch /*#txtSearchUser, #txtSearchCustomer, #txtSearchDocument*/ {
    background-color: White !important;
    width: 170px; /*border : solid 1px silver;*/
}

#driversgrid {
    position: absolute;
    width: 180px;
}

#showTime {
    font-weight: bold;
    font-size: 13px;
}

#driversgrid tbody tr.ui-selecting {
    background-color: #B7FFB7;
}

#driversgrid tbody tr.ui-selected, #driversgrid tbody tr.ui-selected a {
    background-color: #0C793F;
    color: white;
}

#playbackslidertime {
    border: 0;
    color: #f6931f;
    font-weight: bold;
    float: left;
    margin-left: 200px;
    width: 300px;
}

#accordioncontainer {
    width: 208px;
    height: 496px;
    float: right;
}

#accordion {
}

    #accordion p {
        margin-bottom: 5px;
    }

    #accordion h3 {
        font-size: 11px;
        margin: 0px;
    }

        #accordion h3 a span {
            padding-left: 18px;
            padding-top: 2px;
            padding-bottom: 2px;
        }

    #accordion span.DeliveryTruckGreen {
        /*background-position : -10px -10px;*/
        background-position: left -5px;
    }

    #accordion span.invoice {
        /*background-position : -10px -10px;*/ /*background-position : left -2px;*/
    }

#specifytimespan {
    padding-top: 5px;
    padding-bottom: 5px;
    padding: 10px;
}

    #specifytimespan table {
        width: auto;
    }

        #specifytimespan table tr.other td {
            min-width: 50px;
        }

            #specifytimespan table tr.other td.btnseparator {
                min-width: 5px;
            }

        #specifytimespan table td div {
            padding-right: 2px;
            border: solid 1px transparent;
        }

            #specifytimespan table td div:hover {
                border: solid 1px silver;
            }

p.showall {
    clear: both;
}
/*
#specifytimespan table td:hover
{
    border : solid 1px silver;
}
#specifytimespan td.btnseparator div
{
    border-top : 0px;
    border-bottom : 0px;
    border-left : 0px;
    border-right : solid 1px silver;
}
#specifytimespan table td, #specifytimespan table td.btnseparator:hover
{
    border : solid 1px transparent;
}
*/
table.reports, table.reportResultsGrid {
    width: 100%;
    background-color: white;
}

    table.reports caption {
        text-align: left;
        font-size: large;
        background-color: White;
    }

table.Event_Refueling_Partial caption {
    text-align: left;
    font-size: 8pt;
    padding-bottom: 2px;
    background-color: White;
}

table.reportResultsGrid {
    border-left: solid 1px rgb(222, 222, 222);
}

    table.reportResultsGrid th {
        white-space: nowrap !important;
        padding-left: 5px;
        padding-right: 5px;
        text-align: left;
        background-color: rgb(222, 222, 222) !important;
        border-right: 1px solid rgb(204, 204, 204) !important;
        padding: 5px 7px 5px 7px;
    }

.reportResultsGrid td.UserGuid {
    cursor: pointer;
}

.reportResultsGrid th.NumberOfInstances, .reportResultsGrid th.AverageCost, .reportResultsGrid th.AverageVolume, .reportResultsGrid th.Types {
    width: 25px;
}

.reportResultsGrid th.TotalCost, .reportResultsGrid th.TotalVolume, .reportResultsGrid th.Branch, .reportResultsGrid th.VehicleReg, .reportResultsGrid th.TotalTime, .reportResultsGrid th.AverageDuration {
    width: 75px;
}

.Events_Default th.AverageDuration, .Events_Default_Types th.Types, .Events_Default_TotalVolume_AverageVolume th.AverageVolume, .Events_Default_TotalCost_AverageCost th.AverageCost {
    width: auto;
}

.reportResultsGrid th.Driver {
    width: 150px;
}

table.reports > tbody th {
    font-weight: normal;
    text-align: left;
}

/*
table.reports td.reportDateRange
{
    border-width: 0px;
    background-color : #F0F0F0;    
}
table.reports td.reportDateRange input[type=checkbox]
{
    margin-top : 5px;
    margin-bottom : 5px;
    margin-right : 5px;
}
table.reports td.reportDateRange label
{
    
}
*/
table.reports td.reportSearch {
    vertical-align: top;
    width: 210px;
}



div.reports fieldset, table.reports fieldset {
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

    div.reports fieldset legend, table.reports fieldset legend {
        padding-left: 2px;
        padding-bottom: 5px;
    }

    div.reports fieldset legend {
        font-size: large;
    }


table.reports td.reportResults div {
    padding-left: 5px;
    font-weight: bold;
}

table.reportResultsGrid td {
    vertical-align: top;
    padding-left: 5px;
    border-bottom: 1px solid rgb(222, 222, 222);
    border-right: 1px solid rgb(222, 222, 222);
}

ol.toolbar li span {
    margin: 2px; /* this is important to ensure the event is not lost */
    cursor: pointer;
}

td.customerVisitEarly {
    background-color: Green;
}

td.customerVisitLate, td.customerVisitEndorsed {
    background-color: Red;
}

td.customerVisitAcceptable {
    background-color: Orange;
}

fieldset.RouteNumbers {
    padding-left: 20px;
    padding-bottom: 20px;
}

table.CVisitDetail th.Driver {
    width: 120px;
}

table.CVisitDetail th.Documents, table.CVisitDetail td.Documents {
    width: 160px;
    background-image: none;
}

table.CVisitDetail th.ETA, table.CVisitDetail th.TA, table.CVisitDetail th.TC {
    /*width: 80px;*/
}

a > div.wfo_number > strong {
    /* Clearly Indicate Links on info */
    text-decoration: underline;
}

div.wfo_number {
    float: left;
    width: 120px;
    margin: 10px;
}

    div.wfo_number i, div.wfo_number i abbr {
        font-size: 7px !important;
        color: gray !important;
    }

        div.wfo_number i abbr {
            float: right;
        }

#workitemscontainer {
    margin-left: 20px;
    margin-right: 20px;
}

table.reporttable td.WorkItemName, table.reporttable th.WorkItemName {
    width: 200px;
}

table.reporttable td.WorkItemDescription, table.reporttable th.WorkItemDescription {
    width: 235px;
}

table.reporttable th.percent {
    width: 200px;
}

table.reporttable td.Status, table.reporttable th.Status {
    width: 100px;
}

table.reporttable td.WorkItemStatusName, table.reporttable th.WorkItemStatusName, table.reporttable th.WorkItemStatusName div {
    width: 100px !important;
    white-space: nowrap;
}

table.reporttable td.Date, table.reporttable th.Date {
    width: 120px;
}

#workitemscontainer div.wfo_number {
    float: left;
    width: 120px;
    margin: 10px;
}

#workitemdetaildiv > div.chromecontainer {
    margin: 0px;
    padding: 0px;
}

#zoneinfo div.wfo_number {
    float: left;
    width: 140px;
    height: 70px;
    margin: 10px;
}

span.windowfullscreen {
    background-image: url(https://cdn.openitemapp.com/content/images/WindowFullScreen.png);
}

span.gridview {
    background-image: url(https://cdn.openitemapp.com/content/images/application_view_columns.png);
}

span.windowstandardscreen {
    background-image: url(https://cdn.openitemapp.com/content/images/Window.png);
}

.loading, .ui-icon-refresh.loading {
    background-image: url(https://cdn.openitemapp.com/content/images/load.gif);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

.ui-icon-pdf, .ui-icon.ui-icon-pdf {
    background-image: url(https://cdn.openitemapp.com/content/images/pdf.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

.icon-barcode {
    background-image: url(https://cdn.openitemapp.com/content/images/barcode.png) !important;
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

.icon-sort-ascending {
    background-image: url(https://cdn.openitemapp.com/content/images/SortAscending.png) !important;
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

#item_detail {
    display: none;
    float: left;
    width: 208px;
}

#item_detail_content {
    padding: 4px 4px 4px 4px;
    margin: 4px 4px 4px 4px;
    border: dotted 1px #cccccc;
    width: 192px;
}

li.time.strong {
    font-weight: bold;
}

#detaillocations li .WorkItemDisplayName {
    width: 100px;
    overflow: hidden;
    overflow-x: hidden;
    white-space: nowrap; /*font-weight : bold; */
    margin-left: 10px;
}

#detaillocations li {
    cursor: pointer;
}

    #detaillocations li.time:hover, #detaillocations li.active {
        background-color: #068a45;
        color: White;
    }

    #detaillocations li.customer h5 {
        margin: 0px;
        padding: 0px;
    }

.speed.Speeding {
    background-color: Red;
    color: White;
}

#zoneinfo table.reporttable th.Zone {
    width: 150px;
}

#zoneinfo table.reporttable th.VehicleCode, #zoneinfo table.reporttable th.SpeedKmph {
    width: 50px;
}

#zoneinfo table.reporttable th.VehicleRegNo, #zoneinfo table.reporttable th.Heading {
    width: 100px;
}

span.colorlegend {
    padding-left: 12px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    opacity: .4;
    filter: alpha(opacity=40);
}

.opaque, .opaque-online-false {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    opacity: .4;
    filter: alpha(opacity=40);
}

a.zoomuser span.icon-status-online-true, a.zoomuser span.icon-status-online-false, a.zoomvehicle span.icon-vehicle-status-online-true, a.zoomvehicle span.icon-vehicle-status-online-false {
    padding-bottom: 8px;
    text-align: left;
}

[class^="icon-pda-online"], [class*="icon-pda-online"] {
    background-repeat: no-repeat;
    padding-left: 16px;
    line-height: 16px;
    min-height: 16px;
    display: inline-block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

[class^="icon-status-online"], [class*=" icon-status-online"] {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

[class^="icon-pda-online-true"], [class*="icon-pda-online-true"], [class^="icon-pda-online-1"], [class*="icon-pda-online-1"] {
    background-image: url(https://cdn.openitemapp.com/content/images/PDA16_left.png) !important;
}

[class^="icon-pda-online-false"], [class*="icon-pda-online-false"], [class^="icon-pda-online-0"], [class*="icon-pda-online-0"] {
    background-image: url(https://cdn.openitemapp.com/content/images/PDA16_disabled.png) !important;
}

[class^="icon-pda-online-false-warning"], [class*="icon-pda-online-false-warning"], [class^="icon-pda-online-0-warning"], [class*="icon-pda-online-0-warning"] {
    background-image: url(https://cdn.openitemapp.com/content/images/PDA16_warning_disabled.png) !important;
}

[class^="icon-pda-online-null"], [class*="icon-pda-online-null"] {
    background-image: url(https://cdn.openitemapp.com/content/images/PDA16_notfound.png) !important;
}

[class^="icon-pda-online-warning"], [class*="icon-pda-online-warning"], [class^="icon-pda-online-1-warning"], [class*="icon-pda-online-1-warning"] {
    background-image: url(https://cdn.openitemapp.com/content/images/PDA16_warning.png) !important;
}

li > a.zoomvehicle span.icon-vehicle-status-online-true, li > a.zoomvehicle span.icon-vehicle-status-online-false {
    background-position: left -5px;
}

span.icon-vehicle-status-online-false.icon-vehicle-status-tracked-false {
    background-image: url(https://cdn.openitemapp.com/content/images/DeliveryTruckRed.png) !important;
}
/* Route
#div_main , #div_internal_frame
{
    width : 900px !important;
}
 */
#txtRouteNumber, #txtVehicleRecoveryID {
    width: 200px;
    padding-left: 10px;
    margin-right: 10px;
    z-index: 50; /*we have to increase this to ensure we don't clash with Chosen  */
}
/*
ul.ui-autocomplete
{ we have to increase this to ensure we don't clash with Chosen 
    z-index : 50;
}
*/
#select-vehicle-recoveries {
    width: 400px;
}

div.routenumber-search label {
    margin-top: 2px;
}

#routelist {
    clear: both;
}

#tabs select.charttype {
    float: right;
}
/* Dialog */
div.editor-field dl {
    margin: 0px;
    height: 30px;
}

    div.editor-field dl dt {
        float: left;
        width: 60px;
        padding-top: 2px;
    }

    div.editor-field dl dd {
        float: left;
    }

div.editor-field {
    clear: both;
}

div.ui-dialog-content > div.chromeheader, div.ui-dialog-content > h2 {
    margin-top: 0px;
}

div.ui-dialog-content > form.editform {
    padding: 0px;
}
/* End Dialog */

/* validation

span.field-validation-valid
{
    background-image : url( "/Content/Images/Tick.png");
    background-repeat : no-repeat;
    padding-left : 18px;
    padding-bottom : 4px;
    height : 18px;
    
}
 */

/* from Harvest */
div.wfo_number {
    -webkit-box-shadow: rgba(0, 0, 0, 0.0898438) 0px 0px 10px;
    -moz-box-shadow: rgba(0, 0, 0, 0.0898438) 0px 0px 10px;
    box-shadow: rgba(0, 0, 0, 0.0898438) 0px 0px 10px;
}

/*
div.chromecontainer
{
    margin: 10px;
    margin-top: 10px !important;
}
form.editform, div.chromecontainer
{
    padding: 20px;
}
*/
form.editform table > tbody > tr > td {
    vertical-align: top;
}

div.chromecontainer h1 {
    color: Black;
    background: none;
}

form.editform > h2, div.chromecontainer > h2, div.chromeheader {
    background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#CCC), color-stop(0.8, #EEE));
    background: -moz-linear-gradient(center bottom, #CCCCCC 0%, #EEEEEE 80%) repeat scroll 0 0 transparent;
    -webkit-box-shadow: rgba(0, 0, 0, 0.0898438) 0px 0px 10px;
    -moz-box-shadow: rgba(0, 0, 0, 0.0898438) 0px 0px 10px;
    box-shadow: rgba(0, 0, 0, 0.0898438) 0px 0px 10px;
    border: 1px solid #BBB;
    border-top-left-radius: 6px 6px;
    border-top-right-radius: 6px 6px;
    padding: 10px;
    margin-top: 10px;
    display: block;
    font-weight: bold;
}

div.chromefooter {
    background: #eeeeee;
    background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#CCC), color-stop(0.8, #EEE));
    background: -moz-linear-gradient(center bottom, #EEEEEE 0%, #CCCCCC 80%) repeat scroll 0 0 transparent;
    border: 1px solid #BBB;
    -webkit-box-shadow: rgba(0, 0, 0, 0.0898438) 0px 0px 10px;
    -moz-box-shadow: rgba(0, 0, 0, 0.0898438) 0px 0px 10px;
    box-shadow: rgba(0, 0, 0, 0.0898438) 0px 0px 10px;
    border-bottom-left-radius: 2px 2px;
    border-bottom-right-radius: 2px 2px;
    padding-top: 5px;
    padding-bottom: 5px;
    height: 30px;
}

    div.chromefooter.chromeheader {
        border-top-left-radius: 0px 0px;
        border-top-right-radius: 0px 0px;
        border-bottom-left-radius: 0px 0px;
        border-bottom-right-radius: 0px 0px;
        padding-bottom: 5px;
    }

div.buttonbar {
    background-repeat: no-repeat;
}

    div.buttonbar span.message {
        margin-left: 16px;
    }

div.chromefooter div.buttonbar, .form-actions > div.buttonbar {
    display: inline;
    width: auto !important;
    height: 20px;
    margin-bottom: 10px;
    line-height: 20px;
    padding: 5px;
    background-position: 0px 5px;
}

    div.chromefooter div.buttonbar.saving {
        background-position: 0px 1px;
    }

div.chromefooter span.ui-state-highlight {
    line-height: 20px;
    margin-top: 10px;
    margin-left: 10px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px; /*padding-top : 3px;     padding-bottom : 3px;*/
}
/*
.chrome
{   
    background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#CCC), color-stop(0.8, #EEE));
    background: -moz-linear-gradient(center bottom , #CCCCCC 0%, #EEEEEE 80%) repeat scroll 0 0 transparent; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.0898438) 0px 0px 10px;
    border: 1px solid #BBB;
    border-top-left-radius: 6px 6px;
    border-top-right-radius: 6px 6px;
    display: block;
    padding: 10px;
    margin-top: 10px;
}
*/
form.editform fieldset, div.chromecontainer fieldset, .chromedocument {
    -webkit-box-shadow: rgba(0, 0, 0, 0.0898438) 0px 0px 10px;
    -moz-box-shadow: rgba(0, 0, 0, 0.0898438) 0px 0px 10px;
    box-shadow: rgba(0, 0, 0, 0.0898438) 0px 0px 10px;
    background: white;
    border: 1px solid #D7D7D7;
    color: #333;
    font-family: Helvetica, Arial, sans-serif;
    padding: 20px 20px;
    z-index: 1;
}

td.reportDateRange > div.chromecontainer > fieldset, div.chromecontainer.mapcontainer > .chromedocument {
    padding: 0px;
}

/* */
div.chromecontainer > div > div > div.ui-tabs.ui-corner-all {
    /* this will ensure that we don't have double rounded */
    border-top-left-radius: 0px 0px !important;
    border-top-right-radius: 0px 0px !important;
}




.inline-chrome-form {
    background: #EEE !important;
    border: solid #D7D7D7;
    border-width: 0;
}

.btn-chrome /*, form.editform button*/ {
    -webkit-box-shadow: #E4E4E4 0px 1px 0px;
    -moz-box-shadow: #E4E4E4 0px 1px 0px;
    box-shadow: #E4E4E4 0px 1px 0px;
    background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#CCC), color-stop(0.6, #F8F8F8));
    border: 1px solid #AAA;
    font-weight: bold;
    color: #666;
    text-shadow: 0 1px 0 white;
}

.btn-action, .icon-button {
    background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#DDD), color-stop(0.4, white));
    border: 1px solid #BBB;
    border-bottom-left-radius: 4px 4px;
    border-bottom-right-radius: 4px 4px;
    border-top-left-radius: 4px 4px;
    border-top-right-radius: 4px 4px;
    color: #222;
    cursor: pointer;
    display: inline-block;
    font-family: Helvetica, Arial, 'Helvetica Neue', 'Nimbus Sans L', Verdana, sans-serif;
    font-size: 11px;
    height: 24px;
    line-height: 25px;
    margin: 0px 3px 0px 0px;
    padding-right: 12px;
    padding-left: 12px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    width: auto;
    -moz-outline: 0 none;
    outline: 0 none;
    font-weight: bold;
    color: #666;
    text-shadow: 0 1px 0 white;
}

.x-btn-text {
    font-weight: bold !important;
    color: #666;
    text-shadow: 0 1px 0 white;
}

#trackuser {
    background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#DDD), color-stop(0.4, white));
    border: 1px solid #BBB;
    border-top: 0px;
    border-bottom-left-radius: 4px 4px;
    border-bottom-right-radius: 4px 4px;
    border-top-left-radius: 0px 0px;
    border-top-right-radius: 0px 0px;
    color: #222;
    cursor: pointer;
    display: inline-block;
    font-family: Helvetica, Arial, 'Helvetica Neue', 'Nimbus Sans L', Verdana, sans-serif;
    font-size: 11px;
    height: 24px;
    line-height: 25px;
    padding-right: 12px;
    padding-left: 12px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    width: auto;
    -moz-outline: 0 none;
    outline: 0 none;
    font-weight: bold;
    color: #666;
    text-shadow: 0 1px 0 white;
    white-space: nowrap;
    position: absolute;
    z-index: 10; /*must be less than the main menu */
    float: left;
    margin-left: 70px; /*margin-top : -20px;*/ /*width: 300px;*/
    padding: 10px;
}

    #trackuser span {
        float: left;
    }

        #trackuser span.ui-icon-close {
            float: right;
            margin-top: 20px;
        }

.icon-button > span.ui-icon, .btn-action > span.ui-icon {
    float: left;
    margin-left: -7px;
}

.icon-button {
    vertical-align: middle;
}

a.icon-button {
    padding-left: 3px;
    padding-top: 5px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
}

.btn-action > span.text {
    float: left;
}

.btn-action > span.ui-icon {
    margin-top: 2px;
}
/*
.btn-action > span
{
    float: left;
    margin-left: 2px;
}
*/

.btn-action:hover, .icon-button:hover {
    background: #eaeaea;
    background: -webkit-gradient(linear, 0% 100%, 0% 0%, color-stop(0, #eaeaea), color-stop(0.5, white));
    background: -moz-linear-gradient(center bottom, #eaeaea 0%, white 50%) repeat scroll 0 0;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#eaeaea');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#eaeaea')";
    text-decoration: none;
}

.icon-button {
    height: 24px;
    width: 24px;
    padding-left: 7px;
    padding-right: 0px;
}

a.icon-button {
    display: block;
    padding-left: 0px;
    padding-right: 0px;
}

.btn-action.pressed, .icon-button.pressed {
    background: #d4d4d4;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#dddddd', endColorstr='#dddddd');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#dddddd', endColorstr='#dddddd')";
    color: #444;
}

.btn-action:active, .icon-button:active {
    background: #e4e4e4 !important;
}

.btn-list-right {
    margin-left: 5px;
}

.btn-small {
    font-size: 11px;
    height: 20px;
    line-height: 21px;
    padding: 0px 10px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.btn-big {
    font-size: 14px;
    height: 40px;
    line-height: 40px !important;
}

div.btn-action {
    margin-top: 0px;
    float: left;
}

div.chromecontainer:not(div.input-append) input[type=text], div.chromecontainer input[type=password], form.editform input[type=text]:not(.search-query), div.editform input[type=password], form.editform textarea {
    background: #FFF;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
    background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
    border: 1px solid #aaa;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    /*color: #444;*/
    padding: 0px 0px 0px 8px;
}

    div.chromecontainer:not(div.input-append) input[type=text].search-query, form.editform input[type=text].search-query {
        padding-right: 14px;
        padding-right: 4px \9;
        padding-left: 14px;
        padding-left: 4px \9;
        /* IE7-8 doesn't have border-radius, so don't indent the padding */
        margin-bottom: 0;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }

div.chromecontainer:not(div.input-append) input[type=text], div.chromecontainer input[type=password], form.editform input[type=text], div.editform input[type=password] {
    height: 24px;
    padding-left: 4px;
}

form.editform textarea {
    overflow: auto; /* hide scrollbar */
}

    form.editform textarea:focus, form.editform input[type=text]:focus {
        border-color: #058cf5;
        -moz-box-shadow: 0px 0px 3px #aaa;
        -webkit-box-shadow: 0px 0px 3px #aaa;
        box-shadow: 0px 0px 3px #aaa;
    }

form.editform .chzn-container textarea:focus, form.editform .chzn-container input[type=text]:focus {
    border-color: transparent;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    box-shadow: none;
}


.validation-summary-errors {
    padding: 8px 35px 8px 14px;
    margin-bottom: 20px;
    color: #c09853;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    background-color: #fcf8e3;
    border: 1px solid #fbeed5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
}



span.badge.icon-ok {
    padding-left: 3px;
    padding-right: 3px;
}

span.badge.icon-remove {
    padding-left: 2px;
    padding-right: 3px;
}

div.reports-timeframe input[type="text"].input-small {
    height: 16px;
    line-height: 16px;
}

div.reports-timeframe h6, div.reports-timeframe h6 label {
    font-size: 20px;
    font-weight: bold;
    margin-left: 10px;
    line-height: 25px;
    white-space: nowrap;
}

div.reports-timeframe h6 {
    min-height: 30px;
}

    div.reports-timeframe h6 span {
        /*font-weight : normal;*/
        color: darkgray;
    }

#timeframe-dropdown ul.dropdown-menu /*, #timeframe-dropdown*/ /*, div.reports-timeframe ul.dropdown-menu li, div.reports-timeframe ul.dropdown-menu li a*/ {
    min-width: 100px;
    width: 100px !important;
    text-align: left;
}

.icon-20px::before {
    font-size: 20px !important;
}

.icon-25px::before {
    font-size: 25px !important;
}

.icon-35px::before {
    font-size: 35px !important;
}

.icon-40px::before {
    font-size: 40px !important;
}

.icon-45px::before {
    font-size: 45px !important;
}

.icon-50px::before {
    font-size: 50px !important;
}


div.summary .img-rounded {
    border: solid silver 1px;
    min-width: 100px;
    padding: 20px;
    padding-bottom: 10px;
    margin-right: 15px;
    margin-bottom: 10px;
    text-align: center;
}


    div.summary .img-rounded h6 {
        font-size: 40px;
        line-height: 10px;
    }

#grid-summary div.img-rounded[title] {
    position: relative;
}

    #grid-summary div.img-rounded[title]:before {
        content: "\f05a"; /* this is your text. You can also use UTF-8 character codes as I do here */
        font-family: FontAwesome;
        left: 5px;
        position: absolute;
        top: 0;
    }

button.btn-multiselect-filter {
    border-style: none;
    background-color: white;
}


[class^='flaticon-']::before, [class*=' flaticon-']::before, [class^='flaticon-']::after, [class*=' flaticon-']::after {
    margin-left: 0px;
    font-size: 16px;
}