/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/

/**
 * CONTENTS............You're reading it!
 * CONVENTIONS.........Style guide for this stylesheet
 * VARIABLES...........Candidates for variables if we switch to SASS, LESS etc.
 * OVERRIDES...........PrimeFaces overrides
 * SHARED..............Related rules
 * BASE................Base elements
 * LAYOUT..............Layout units
 * HEADER..............Header-specific styling
 * FOOTER..............Footer-specific stying
 * LISTS...............
 * NAVIGATION..........Nav abstractions
 * DIALOG-TABS.........Tabbed dialog views
 * FORMS...............
 * BUTTONS.............
 * DASHBOARD...........Simple dashboard elements
 * NOTIFICATIONS.......A more detailed dashboard component to show notifications
 * TILES...............Tiles
 * TREES...............Data trees
 * PAGINATOR...........Pagination widget
 * MISC................
 */





/*------------------------------------*\
    $CONVENTIONS
\*------------------------------------*/

/**
 * Style rules are based on
     https://github.com/csswizardry/CSS-Guidelines
 *
 * The conventions to be used in this stylesheet are as follows:
 *   - Multi-line rules
 *   - Comma-separated selectors on new lines
 *   - Semicolons are always required
 *   - 4-space indents
 *   - Indent vendor prefixed declarations so that their values are aligned
 *   - Class names are in English, lowercase and hyphen-separated
 *   - Colors are lowercase 6-digit hex codes unless transparency is required,
 *     in which case they are written as rgba.
 *   - BEM notation used where it makes sense (
         http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
 *     )
 *
 * Rules are grouped in the following order:
 *
 *   1. Box
 *   2. Border
 *   3. Background
 *   4. Text
 *   5. Other
 *
 * with whitespace between the groups encouraged where it aids readability.
 *
 */





/*------------------------------------*\
    $VARIABLES
\*------------------------------------*/

/**
 * Colors
 *
 * Grays
 *     Default text:     #555555
 *     Various others:   #4f4f4f
 *                       #a8a8a8
 *                       #bbbbbb
 *                       #e3e3e3
 *
 * Oranges
 *     STILL:            #e36800
 *     Paler:            #ff7a00
 *     Almost-white:     #f8dfcd
 *     Gradient-top:     #ff9c02
 *     Gradient-bottom:  #fa6001
 *
 * Other
 *     Errors/Forbidden: #ff0000
 *     Good/OK:        : #00ff00
 *
 */

/**
 * Shadows

.top-shadow {
    box-shadow: inset 0 5px 5px rgba(255,255,255,0.5),
                inset -5px 0 5px rgba(0,0,0,0.1);
}
.bottom-shadow {
    box-shadow: inset -5px -5px 5px rgba(0,0,0,0.1);
}
.top-bottom-outside-shadow {
    box-shadow: 2px 3px 1px 0 #a1a1a1,
                inset 0 5px 5px rgba(255,255,255,0.5),
                inset -5px 0 5px rgba(0,0,0,0.1),
                inset -5px -5px 5px rgba(0,0,0,0.1);
}
 *
 */





/*------------------------------------*\
    $OVERRIDES
\*------------------------------------*/

/**
 * Remove border from main content (which looked like horizontal lines).
 */
.ui-layout-center.ui-layout-pane.ui-layout-pane-center.ui-widget-content {
    border: none;
}

.ui-icon,
.ui-state-default .ui-icon{
    background-image: url("/fleetmanager/javax.faces.resource/images/ui-icons_616161_256x240.png.xhtml?ln=primefaces-aristo");
}
/**
 * No rounded corners on buttons and input fields.
 */
input, textarea, button,
input.ui-corner-all, input.ui-corner-left, input.ui-corner-right,
textarea.ui-corner-all, textarea.ui-corner-left, textarea.ui-corner-right,
button.ui-corner-all, button.ui-corner-left, button.ui-corner-right,
.ui-chkbox .ui-chkbox-box {
    border: thin solid #555555;
    /*-webkit-border-radius: 0;*/
       /*-moz-border-radius: 0;*/
            /*border-radius: 0;*/
    text-shadow: none;
}

.ui-state-default, 
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default {
    /*-webkit-border-radius: 0;*/
       /*-moz-border-radius: 0;*/
            /*border-radius: 0;*/
    text-shadow: none;
}

.ui-inputfield,
.ui-widget-content .ui-inputfield,
.ui-widget-header .ui-inputfield,
.ui-selectonemenu .ui-selectonemenu-trigger {
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}

.ui-selectonemenu > .ui-selectonemenu-label {
    /*border-radius: 0;*/
    text-shadow: none;

    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}
.ui-selectonemenu .ui-selectonemenu-trigger {
    border-right: none;
    border-top: none;
    border-bottom: none;
}
.ui-selectonemenu.darkmenu label {
    background-color: #555;
    color: white;
}

/**
 * Remove highlighting.
 */
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-inputfield.ui-state-focus,
.ui-button.ui-state-focus,
.ui-widget-content .ui-inputfield.ui-state-focus,
.ui-widget-header .ui-inputfield.ui-state-focus {
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
    border: 1px solid #a8a8a8;
}


div > ul > li.ui-selectonemenu-list-item.ui-state-hover
{
    color: white;
    text-shadow: 1px 1px 1px #333333;
    background: #aaaaaa;
    background: #aaaaaa linear-gradient(top, rgba(0,0,0,0.25), rgba(0,0,0,0));
    background: #aaaaaa -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.25)), to(rgba(0,0,0,0)));
    background: #aaaaaa -moz-linear-gradient(top, rgba(0,0,0,0.25), rgba(0,0,0,0));
    border: 0;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,   /* End hover classes */
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus    /* End focus classes */ {
    background-image: none; /* Clears fallback .png from IE8 */
    /*background-color: #f8dfcd;*/
    color: #4f4f4f;
}

textarea.ui-inputfield.ui-state-hover,
textarea.ui-inputfield.ui-state-active,
textarea.ui-inputfield.ui-state-focus,
input.ui-inputfield.ui-state-hover,
input.ui-inputfield.ui-state-active,
input.ui-inputfield.ui-state-focus {
    background-color: #ffffff;
}

.ui-chkbox .ui-chkbox-box.ui-state-default,
.ui-chkbox .ui-chkbox-box.ui-state-hover,
.ui-chkbox .ui-chkbox-box.ui-state-active,
.ui-chkbox .ui-chkbox-box.ui-state-focus {
    border-color: #555555;

    background-color: #f6f6f6;

    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}

div.ui-selectonemenu.ui-state-focus,
div.ui-selectonemenu.ui-state-hover,
div.ui-selectonemenu.ui-state-active,
label.ui-selectonemenu-label.ui-state-hover,
label.ui-selectonemenu-label.ui-state-active,
label.ui-selectonemenu-label.ui-state-focus,
input.hasDatepicker.ui-state-hover,
input.hasDatepicker.ui-state-active,
input.hasDatepicker.ui-state-focus,
input.ui-autocomplete-input.ui-state-hover,
input.ui-autocomplete-input.ui-state-active,
input.ui-autocomplete-input.ui-state-focus {
    border: 1px solid #a8a8a8;
}

label.ui-selectonemenu-label.ui-state-hover.ui-state-error,
label.ui-selectonemenu-label.ui-state-active.ui-state-error,
label.ui-selectonemenu-label.ui-state-focus.ui-state-error,
input.hasDatepicker.ui-state-hover.ui-state-error,
input.hasDatepicker.ui-state-active.ui-state-error,
input.hasDatepicker.ui-state-focus.ui-state-error,
input.ui-autocomplete-input.ui-state-hover.ui-state-error,
input.ui-autocomplete-input.ui-state-active.ui-state-error,
input.ui-autocomplete-input.ui-state-focus.ui-state-error,
textarea.ui-inputfield.ui-state-error,
input.ui-inputfield.ui-state-error
{
    border: 1px solid #cd0a0a;
}


/**
 * Buttons
 */
.ui-button.ui-state-default {
    border-color: #555555;
    box-shadow: none;
}

.ui-button.ui-state-hover,
.ui-button.ui-state-focus {
    background: -moz-linear-gradient(center top , rgba(255, 255, 255, 1), rgba(209, 209, 209, 1));
    background: -webkit-gradient(linear, center top , rgba(255, 255, 255, 1), rgba(209, 209, 209, 1));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(209,209,209,1) 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(209,209,209,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(209,209,209,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d1d1d1',GradientType=0 );
}

.ui-selectonemenu.ui-state-hover,
.ui-selectonemenu-trigger.ui-state-hover,
.ui-selectonemenu-trigger.ui-state-focus,
.ui-button.ui-datepicker-trigger.ui-state-hover,
.ui-button.ui-datepicker-trigger.ui-state-focus,
.ui-button.ui-autocomplete-dropdown.ui-state-hover,
.ui-button.ui-autocomplete-dropdown.ui-state-focus,
.ui-autocomplete > input.ui-autocomplete-input + button.ui-autocomplete-dropdown.ui-state-hover,
.ui-autocomplete > input.ui-autocomplete-input + button.ui-autocomplete-dropdown.ui-state-focus
{
    background: -moz-linear-gradient(center top , rgba(255, 255, 255, 1), rgba(209, 209, 209, 1));
    background: -webkit-gradient(linear, center top , rgba(255, 255, 255, 1), rgba(209, 209, 209, 1));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(209,209,209,1) 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(209,209,209,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(209,209,209,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d1d1d1',GradientType=0 );
}

.ui-button.ui-state-active,
.ui-selectonemenu.ui-state-active,
.ui-selectonemenu-trigger.ui-state-active,
.ui-button.ui-datepicker-trigger.ui-state-active,
.ui-button.ui-autocomplete-dropdown.ui-state-active,
.ui-autocomplete > input.ui-autocomplete-input + button.ui-autocomplete-dropdown.ui-state-active
{
    background: -moz-linear-gradient(center top , rgba(190, 190, 190, 1), rgba(243, 243, 243, 1));
    background: -webkit-gradient(linear, center top , rgba(190, 190, 190, 1), rgba(243, 243, 243, 1));
    background: -webkit-linear-gradient(top,  rgba(190,190,190,1) 0%,rgba(243,243,243,1) 100%);
    background: -o-linear-gradient(top,  rgba(190,190,190,1) 0%,rgba(243,243,243,1) 100%);
    background: linear-gradient(to bottom,  rgba(190,190,190,1) 0%,rgba(243,243,243,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bebebe', endColorstr='#929394',GradientType=0 );
}

/*.ui-selectonemenu.ui-state-focus {*/
    /*border-color: #a8a8a8;*/
    /*background: #F0F0F0;*/
    /*box-shadow: none;*/
/*}*/

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default{
    /*background-color: #ffffff;*/
}


/**
 * Dialogs and Login
 */
.ui-panel.login-panel .ui-panel-title {
    display: inline-block;
}

.ui-dialog-titlebar,
.ui-dialog .ui-dialog-titlebar,
.ui-panel.login-panel .ui-panel-titlebar,
.ui-panel.login-panel .ui-panel-title {
    height: 18px;
    padding: 1px 5px 3px 12px;
}

.ui-panel.login-panel .ui-panel-title {
    padding-left: 0;
}

/**
 * Dialog headers are 22px high, and orange with white text and controls.
 */
.ui-dialog-titlebar,
.ui-dialog .ui-dialog-titlebar,
.ui-panel.login-panel .ui-panel-titlebar {
    background-color: #E36800;
    background-image: url(/fleetmanager/javax.faces.resource/img/mainnavigation/navigation-bar-complete.png.xhtml);
    background-repeat: no-repeat;
    background-position: right;
    color: white;
    text-shadow: none;
}
.ui-dialog-titlebar .ui-state-hover {
    border-color: #ff7a00;
    background-image: none; /* Clears fallback PNG from IE8 */
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}
.ui-dialog-titlebar .ui-icon-closethick {
    border: none;
    background-image: url("/fleetmanager/javax.faces.resource/images/ui-icons_ffffff_256x240.png.xhtml?ln=primefaces-aristo");
}
.ui-dialog-titlebar .ui-dialog-titlebar-close.ui-state-default,
.ui-dialog-titlebar .ui-dialog-titlebar-close.ui-state-hover,
.ui-dialog-titlebar .ui-dialog-titlebar-close.ui-state-active,
.ui-dialog-titlebar .ui-dialog-titlebar-close.ui-state-focus {
    padding: 1px;
    border: none;
    background-color: transparent;
    box-shadow: none;
}

/**
 * No highlighting for treenodes, just text
 */
.ui-treenode .ui-treenode-label.ui-state-highlight,
.ui-treenode .ui-treenode-label.ui-state-active,
.ui-treenode .ui-treenode-label.ui-state-hover,
.ui-treenode .ui-treenode-label.ui-state-focus {
    border: none;
    background: none;
    color: #555555;
    text-shadow: none;
}
.ui-treenode .ui-treenode-label.ui-state-highlight,
.ui-treenode .ui-treenode-label.ui-state-active,
.ui-treenode .ui-treenode-label.ui-state-hover,
.ui-treenode .ui-treenode-label.ui-state-focus {
    color: #fd6921;
    text-decoration: underline;
}

.ui-dialog.report-tree .ui-treenode .ui-treenode-label.ui-state-highlight{
     color: #555555;
     text-decoration: none;
}


.ui-chkbox .ui-chkbox-box {
    height: 12px;
    width: 12px;
}

.ui-chkbox .ui-chkbox-box .ui-icon-check {
    background-position: -66px -146px;
}

.ui-tree .ui-chkbox-box .ui-icon-stop {
    background-position: -98px -162px;
}

/**
 * Text should be standard size.
 */
.ui-widget {
    font-size: 1em;
}

/**
 * Headers don't have a border
 */
.ui-widget-header {
    border: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: #555555;
}


/**
 * Disabled controls should be a bit darker than the default.
 */
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
    opacity: .6;
    filter: None;
}

/**
 * Disable padding on layout
 */
.ui-layout-unit {
    padding: 0;
}
.ui-layout-unit .ui-layout-unit-content {
    padding: 0;
    height: inherit;
}

.ui-layout-unit .ui-layout-west .ui-layout-pane-west{
    margin-left: 10px;
}

/**
 * Growl notifications
 */
.ui-growl-item-container{
    top: 63px;
    right: -10px;
    border-color: #ff7a00;
    border-width: 3px;
    background-color: #ffffff;
    color: #4f4f4f;
    text-shadow: none;
    opacity: 0.95;
}

/*http://stackoverflow.com/questions/15710079/how-to-close-growl-message-on-click-anywhere-on-the-message-jsf-primefaces*/
.ui-growl-icon-close {
    width: 100%;
    height: 100%;
    background-image: none!important;
}


/**
 * Dashboard
 */
.ui-dashboard-column {
    float:none;
}

.ui-dashboard .ui-widget-content{
    background-color: #fbfbfb;
}

/**
 * Panels
 */
.ui-panel-content.ui-widget-content {
    padding: 0;
    border: none;
}

/**
 * Button bar
 */
.button-bar > .ui-panel-content.ui-widget-content > .ui-commandlink + .ui-commandlink {
    margin-left: 8px;
}

/**
 * Tooltips
 */
.ui-tooltip {
     padding: 7px;
     border: 1px solid #E5973E;
     /*border-radius: 0;*/
     background-color: #FAE6B0;
     font-size: 11px;
     -webkit-box-shadow: none;
        -moz-box-shadow: none;
             box-shadow: none;
 }


/*------------------------------------*\
    $SHARED
\*------------------------------------*/

h1,
.page-header-navigation-status {
    margin: 15px;
}

fieldset,
.save-button,
.back-button,
.batch-button {
    margin-left: 10px;
    margin-right: 10px;
}

.main-navigation-menu__end-img,
.main-navigation-menu__locale-selector,
.nav-bg-img {
    float: right;
}

.main-navigation-menu__locale-selector{
    margin-top: 1px;
}

.main-navigation-menu__locale-selector .ui-selectonemenu{
    height: 18px;
}
.main-navigation-menu__locale-selector label{
    line-height: 17px;
}

.main-navigation-menu__locale-selector .ui-icon.ui-icon-triangle-1-s{
    top: 1px;
    position: relative;

}

/*------------------------------------*\
    $BASE
\*------------------------------------*/

body {
    margin: 0;
    font-family: Arial, Verdana Helvetica, sans-serif;
    font-size: 12px;
    color: #555555;
}

h1 {
    font-size: 18px;
}

h3 {
    margin: 0;
    padding: 5px;
    background-color: #E6EAEE;
    font-size: 1em;
}

img {
    border: none;
}





/*------------------------------------*\
    $LAYOUT
\*------------------------------------*/

body,
.body-content,
.body-content > .ui-layout-unit-content.ui-widget-content,
.button-bar {
    background-color: #eeeeee;
}


.header,
.footer {
    padding: 0;
    border: 0;
}





/*------------------------------------*\
    $HEADER
\*------------------------------------*/

/**
 * Header layout
 */
.page-header-container {
    text-align: center;
}
.page-header-title {
    float: left;
}
.page-header-site-logo {
    float: right;
    margin-top: 7px;
    margin-right: 33px;
}

.header .ui-layout-unit-content.ui-widget-content{
    background-color: #eeeeee;
}

#header{
    background-color: #ffffff;
}

/**
 * Top navigation
 */
.page-header-navigation-status {
    display: inline-block;
    font-size: x-small;
}
.page-header-navigation-status > li {
    line-height: 21px;
}

/**
 * ErrorLoginMessages
 */
.login-error-message,
.browser-error-message {
    padding: 3px;
    margin-bottom: 2px;
    font-weight: bold;
    background-color: white;
    border: 2px solid red;
    margin-left: 10px;
    margin-right: 5px;
}

/**
 * Main navigation
 */
.main-navigation-menu {
    margin: 0;
    background-repeat: repeat-x;
    background-image: url("../img/mainnavigation/navigation-bar-complete.png.xhtml");
    background-position: right;
}

.main-navigation-menu img{
    margin-left: 6px;
}

.login.main-navigation-menu > li {
    padding-top: 0;
    padding-right: 0;
    padding-left: 15px;
    padding-bottom: 0;
    line-height: 22px;
}

.loggedin.main-navigation-menu.inline-list > li {
    padding: 0;
    line-height: 22px;
    width: 130px;
    display: inline-block;
    text-align: center;
    border-right: 1px solid whitesmoke;
}

.loggedin.main-navigation-menu.inline-list > li.main-navigation-menu__end-img {
    padding: 0;
    width: 57px;
}
.main-navigation-menu,
.main-navigation-menu a {
    color: #f8dfcd;
    color: rgba(255, 255, 255, 0.85);
}

.main-navigation-menu .active,
.main-navigation-menu a:hover,
.main-navigation-menu a:focus,
.main-navigation-menu a:active,
.main-navigation-menu-item-active {
    color: #ffffff;
    font-weight: bold;
}
.main-navigation-menu h2 {
    display: inline;
    font-size: 12px;
    color: #ffffff;
}


/*------------------------------------*\
    $LOGIN
\*------------------------------------*/

.ui-panel.login-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 430px;
    margin-left: -225px;
    margin-top: -140px;
    padding: 0;
}
.ui-panel.login-panel li{
    margin: 0;
    padding-top: 8px;
    padding-bottom: 8px;
}

.ui-panel.login-panel .loginline li{
    padding-bottom: 0px;
}

.ui-panel.login-panel .ui-panel-content { 
    padding: 0;
    background-color: #e3e3e3;
}

.login-label {
    width: 120px;
}



/*------------------------------------*\
    $LISTS
\*------------------------------------*/

/**
 * To remove list-specific browser styling.
 */
.undecorated-list,
.inline-list {
    padding: 0;
    list-style: none;
}

/**
 * Sets a list to inline, removes underlines from links.
 */
.inline-list > li {
    display: inline;
}
.inline-list a {
    text-decoration: none;
}

/**
 * Lists showing status (represented by red/yellow/green images)
 */
.status-list {
    display: table;
    padding-bottom: 5px;
    padding-top: 5px;
    border-bottom: 1px solid #a8a8a8;
    margin: 0;
    width: 100%;
}
.status-list > li {
    display: table-cell;
    height: 59px; /* The height of the status images */
    float: none;
    vertical-align: middle;
}




/*------------------------------------*\
    $NAVIGATION
\*------------------------------------*/

/**
 * Abstraction for a nav list with a separator symbol
 */
.separated-nav > li + li:before {
    content: "\00A0\00A0|\00A0\00A0";
}
.separated-nav > li.nav-bg-img:before {
    content: "";
}


/**
 * Footer nav
 */
.footer-navigation {
    margin: 0;
    padding-left: 15px;
    line-height: 30px;

    border: 1px solid #bbbbbb;

    background:	url("../img/footer/footer-bg.png.xhtml") repeat-x;

    font-size: x-small;
}


/**
 * Sidebar nav
 */
.sidebar-nav {
    padding: 0;
    margin: 0;
    list-style: none;
}
.sidebar-nav > li {
    margin: 5px;
    border:	1px solid #bbbbbb;
    background: url("/fleetmanager/javax.faces.resource/img/subnavigation/button.png.xhtml") repeat-x;

    font-weight: bold;
    vertical-align:	middle;
    cursor:	pointer;
}
.sidebar-nav a {
    display: block;
    padding: 15px 0 15px 50px;
    text-decoration: none;
}


/**
 * Backgrounds images for sidebar navigation.
 */
.sidebar-nav .assignment {
    background: url("/fleetmanager/javax.faces.resource/img/subnavigation/assignment-default.png.xhtml") transparent no-repeat;
}
.sidebar-nav .assignment:hover,
.sidebar-nav .assignment:focus,
.sidebar-nav .assignment:active,
.sidebar-nav .assignment.is-active {
    background: url("/fleetmanager/javax.faces.resource/img/subnavigation/assignment-hover.png.xhtml") no-repeat;
}

.sidebar-nav .factory {
    background: url("/fleetmanager/javax.faces.resource/img/subnavigation/factory-default.png.xhtml") transparent no-repeat;
}
.sidebar-nav .factory:hover,
.sidebar-nav .factory:focus,
.sidebar-nav .factory:active,
.sidebar-nav .factory.is-active {
    background: url("/fleetmanager/javax.faces.resource/img/subnavigation/factory-hover.png.xhtml") no-repeat;
}

.sidebar-nav .vehicle {
    background: url("/fleetmanager/javax.faces.resource/img/subnavigation/vehicle-default.png.xhtml") transparent no-repeat;
}
.sidebar-nav .vehicle:hover,
.sidebar-nav .vehicle:focus,
.sidebar-nav .vehicle:active,
.sidebar-nav .vehicle.is-active {
    background: url("/fleetmanager/javax.faces.resource/img/subnavigation/vehicle-hover.png.xhtml") no-repeat;
}

.sidebar-nav .workshop {
    background: url("/fleetmanager/javax.faces.resource/img/subnavigation/maintenance-default.png.xhtml") transparent no-repeat;
}
.sidebar-nav .workshop:hover,
.sidebar-nav .workshop:focus,
.sidebar-nav .workshop:active,
.sidebar-nav .workshop.is-active {
    background: url("/fleetmanager/javax.faces.resource/img/subnavigation/maintenance-hover.png.xhtml") no-repeat;
}

.sidebar-nav .monitor {
    background: url("/fleetmanager/javax.faces.resource/img/subnavigation/fleet-monitor-default.png.xhtml") transparent no-repeat;
}
.sidebar-nav .monitor:hover,
.sidebar-nav .monitor:focus,
.sidebar-nav .monitor:active,
.sidebar-nav .monitor.is-active {
    background: url("/fleetmanager/javax.faces.resource/img/subnavigation/fleet-monitor-hover.png.xhtml") no-repeat;
}

.sidebar-nav .driver {
    background: url("/fleetmanager/javax.faces.resource/img/subnavigation/driver-default.png.xhtml") no-repeat;
}
.sidebar-nav .driver:hover,
.sidebar-nav .driver:focus,
.sidebar-nav .driver:active,
.sidebar-nav .driver.is-active {
    background: url("/fleetmanager/javax.faces.resource/img/subnavigation/driver-hover.png.xhtml") no-repeat;
}

.sidebar-nav .device {
    background: url("/fleetmanager/javax.faces.resource/img/subnavigation/vehicle-default.png.xhtml") transparent no-repeat;
}
.sidebar-nav .device:hover,
.sidebar-nav .device:focus,
.sidebar-nav .device:active,
.sidebar-nav .device.is-active {
    background: url("/fleetmanager/javax.faces.resource/img/subnavigation/vehicle-hover.png.xhtml") no-repeat;
}

/**
 * Background images for menu bar.
 */
.planning-menu {
    padding: 0;
    margin-right: 0;
    border: 0;
    border: 1px solid #a8a8a8;
}

.ui-menuitem .ui-icon-department,
.ui-menuitem .ui-icon-vehicle,
.ui-menuitem .ui-icon-driver,
.ui-menuitem .ui-icon-battery,
.ui-menuitem .ui-icon-attachment,
.ui-menuitem .ui-icon-charger,
.ui-menuitem .ui-icon-accesstoken,
.ui-menuitem .ui-icon-sync {
    width: 50px;
    height: 30px;
    background-size: 100% auto;
}

.ui-menuitem .ui-icon-department {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/structure-select-default.png.xhtml");
}
.ui-menubar.active-0 .ui-icon-department,
.ui-menuitem .ui-icon-department:hover,
.ui-menuitem .ui-icon-department:focus,
.ui-menuitem .ui-icon-department:active,
.ui-menuitem.ui-state-active .ui-icon-department {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/structure-select-hover.png.xhtml");
}

.ui-menuitem .ui-icon-vehicle {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/vehicle-select-default.png.xhtml");
}
.ui-menubar.active-1 .ui-icon-vehicle,
.ui-menuitem .ui-icon-vehicle:hover,
.ui-menuitem .ui-icon-vehicle:focus,
.ui-menuitem .ui-icon-vehicle:active,
.ui-menuitem.ui-state-active .ui-icon-vehicle {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/vehicle-select-hover.png.xhtml");
}

.ui-menuitem .ui-icon-driver {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/driver-select-default.png.xhtml");
}
.ui-menubar.active-2 .ui-icon-driver,
.ui-menuitem .ui-icon-driver:hover,
.ui-menuitem .ui-icon-driver:focus,
.ui-menuitem .ui-icon-driver:active,
.ui-menuitem.ui-state-active .ui-icon-driver {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/driver-select-hover.png.xhtml");
}

.ui-menuitem .ui-icon-battery {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/battery-select-default.png.xhtml");
}
.ui-menubar.active-3 .ui-icon-battery,
.ui-menuitem .ui-icon-battery:hover,
.ui-menuitem .ui-icon-battery:focus,
.ui-menuitem .ui-icon-battery:active,
.ui-menuitem.ui-state-active .ui-icon-battery {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/battery-select-hover.png.xhtml");
}

.ui-menuitem .ui-icon-attachment {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/attachment-select-default.png.xhtml");
}
.ui-menubar.active-4 .ui-icon-attachment,
.ui-menuitem .ui-icon-attachment:hover,
.ui-menuitem .ui-icon-attachment:focus,
.ui-menuitem .ui-icon-attachment:active,
.ui-menuitem.ui-state-active .ui-icon-attachment {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/attachment-select-hover.png.xhtml");
}

.ui-menuitem .ui-icon-charger {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/charger-select-default.png.xhtml");
}
.ui-menubar.active-5 .ui-icon-charger,
.ui-menuitem .ui-icon-charger:hover,
.ui-menuitem .ui-icon-charger:focus,
.ui-menuitem .ui-icon-charger:active,
.ui-menuitem.ui-state-active .ui-icon-charger {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/charger-select-hover.png.xhtml");
}

.ui-menuitem .ui-icon-accesstoken {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/accesstoken-select-default.png.xhtml");
}
.ui-menubar.active-6 .ui-icon-accesstoken,
.ui-menuitem .ui-icon-accesstoken:hover,
.ui-menuitem .ui-icon-accesstoken:focus,
.ui-menuitem .ui-icon-accesstoken:active,
.ui-menuitem.ui-state-active .ui-icon-accesstoken {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/accesstoken-select-hover.png.xhtml");
}

.ui-menuitem .ui-icon-sync {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/sync/sync-default.png.xhtml");
}
.ui-menubar.active-7 .ui-icon-sync,
.ui-menuitem .ui-icon-sync:hover,
.ui-menuitem .ui-icon-sync:focus,
.ui-menuitem .ui-icon-sync:active,
.ui-menuitem.ui-state-active .ui-icon-sync {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/sync/sync-hover.png.xhtml");
}

/**
 * Planning menu.
 */
.planning-menu {
    background: rgb(251,251,251); /* Old browsers */
    background:    -moz-linear-gradient(top,  rgba(251,251,251,1) 0%, rgba(196,196,196,1) 100%); /* FF3.6+ */
    background:        -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(251,251,251,1)), color-stop(100%,rgba(196,196,196,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(251,251,251,1) 0%,rgba(196,196,196,1) 100%); /* Chrome10+,Safari5.1+ */
    background:      -o-linear-gradient(top,  rgba(251,251,251,1) 0%,rgba(196,196,196,1) 100%); /* Opera 11.10+ */
    background:     -ms-linear-gradient(top,  rgba(251,251,251,1) 0%,rgba(196,196,196,1) 100%); /* IE10+ */
    background:         linear-gradient(to bottom,  rgba(251,251,251,1) 0%,rgba(196,196,196,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
}

.planning-menu .ui-menu-list .ui-menuitem {
    height: 30px;
}

.planning-menu .ui-menu-list .ui-menuitem:last-child {
    /**
     * Targets the Sync button. We can't set a class name on it, so we have to
     * use the :last-child pseudo-selector. This doesn't work in IE8, so under
     * IE8 the button appears floated left with the others.
     */
    float: right;
}
.planning-menu .ui-menu-list .ui-menuitem + .ui-menuitem:before,
.planning-menu .ui-menu-list .ui-menuitem:nth-last-child(2):after {
    content: ' ';
    display: inline-block;
    float: left;
    width: 3px;
    height: 30px;
    background: url('/fleetmanager/javax.faces.resource/img/planning/separator.png.xhtml');
}

.ui-menubar .ui-menuitem-link {
    padding: 0;
    border: none;
}
.ui-menu .ui-menu-list .ui-menuitem {
    margin: 0;
}
.ui-menuitem > .ui-state-hover {
    background: none;
}





/*------------------------------------*\
    $DIALOGS
\*------------------------------------*/


.ui-dialog .ui-dialog-content,
.ui-dialog.useradmin-tree > .ui-dialog-content > form > .ui-tree,
.ui-dialog.report-tree > .ui-dialog-content > form > .ui-tree {
    background-color: #E6E9EE;
}

/**
 * Set correct scrolling on report tree dialogs (driver, vehicle).
 */
.ui-dialog.useradmin-tree > .ui-dialog-content > form,
.ui-dialog.report-tree > .ui-dialog-content > form {
    height: 100%;
}

.ui-dialog.useradmin-tree > .ui-dialog-content > form > .ui-tree,
.ui-dialog.report-tree > .ui-dialog-content > form > .ui-tree {
    height: 85%;
    border: none;
    overflow-y: auto;
}

.select-template-form {
    margin: -6px -12px 10px;
    padding: 10px 12px;
    background-color: #D0D2D6;
}

.dialog-buttons-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 34px; /* .5 em + .dialog-buttons height + .5em */
    background-color: #D0D2D6;
}

.dialog-buttons {
    position: absolute;
    right: 1em;
    top: .7em;
}

.dialog-buttons > button {
    margin-left: 10px;
}

.dialog-save-template-form.input-list.input-list--inline input {
    margin-left: 0;
}





/*------------------------------------*\
    $DIALOG-TABS
\*------------------------------------*/

/**
 * Light gray background.
 */
.ui-tabs .ui-tabs-nav,
.ui-tabs.ui-tabs-right,
.ui-tabs-right > .ui-tabs-nav > li.ui-state-default {
    background: #E6E9EE;
}

/**
 * Darker gray for the tab panel content and selected tab.
 */
.ui-tabs .ui-tabs-panels,
.ui-tabs-right > .ui-tabs-nav > li.ui-state-active.ui-tabs-selected {
    background: #D0D2D6;
}

/**
 * No borders, padding or anything like that.
 */
.ui-tabs.ui-tabs-right,
.ui-tabs .ui-tabs-nav li.ui-state-default,
.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
    border: none;
}
.ui-tabs-right,
.ui-tabs-right.ui-tabs.ui-tabs-right > .ui-tabs-nav {
    padding: 0;
    border-radius: 0;
}

/**
 * We have to set a minimum height on the tab panel (where the content is) or
 * else the content might not be tall enough to reach the selected tab.
 * PrimeFaces sets the height of the tabs to 300px, so we'll make sure the
 * content is at least that height.
 */
.ui-tabs.ui-tabs-right > .ui-tabs-panels {
    min-height: 338px;
}

/**
 * Set the width of the tabs to 25% to ensure no gap between the tabs and the
 * tab panel content (75% width).
 */
.ui-tabs-right.ui-tabs.ui-tabs-right > .ui-tabs-nav {
    width: 140px;
}

.ui-tabs-right.ui-tabs.ui-tabs-right > .ui-tabs-nav li{
    height: 65px;
}

.ui-tabs-right.ui-tabs.ui-tabs-right > .ui-tabs-nav li a{
    padding: 0;
    width: 105px;
    position: relative;
    top: 17px;
}

/**
 * Styling for the individual tabs themselves.
 */
.ui-tabs-right.ui-tabs.ui-tabs-right .ui-state-default.ui-corner-right {
    font-weight: normal;
}
.ui-tabs-right.ui-tabs.ui-tabs-right .ui-state-default.ui-corner-right.ui-tabs-selected {
    font-weight: bold;
}
.ui-tabs.ui-tabs-right > .ui-tabs-nav li a {
    color: #555555;
    text-shadow: none;
}
.ui-tabs.ui-tabs-right,
.ui-tabs-right > .ui-tabs-nav > li.ui-state-default {
    box-shadow: none;
}

.ui-tabs.ui-tabs-right a{
    text-align: center;
    width: 100%;
}

.ui-tabs.ui-tabs-right > .ui-tabs-panels{
    min-width: 766px;
}

.departmentEditForm .ui-tabs.ui-tabs-right > .ui-tabs-panels{
    min-width: 456px;
}

.driverEditForm .ui-tabs.ui-tabs-right > .ui-tabs-panels{
    min-width: 806px;
}

.batteryEditForm .ui-tabs.ui-tabs-right > .ui-tabs-panels{
    min-width: 690px;
}

.attachmentEditForm .ui-tabs.ui-tabs-right > .ui-tabs-panels{
    min-width: 686px;
}

.chargerEditForm .ui-tabs.ui-tabs-right > .ui-tabs-panels{
    min-width: 686px;
}

.accessCollectionEditForm .ui-tabs.ui-tabs-right > .ui-tabs-panels{
    min-width: 496px;
}

.driverGroupDialogForm .ui-tabs.ui-tabs-right > .ui-tabs-panels{
    min-width: 496px;
}

#editVehicleDialogId .phoneNumber{
    padding: 0;
    border: 0;
}

#editVehicleDialogId .phoneNumber,
#editVehicleDialogId .phoneNumber .ui-panel-content.ui-widget-content{
    background-color: transparent;
}
#editVehicleDialogId .phoneNumber .ui-panel-content.ui-widget-content label{
    padding-right: 6px;
}

.editDriverLicenseDialogMonthField {
    width: 20px !important;
    margin-right: 5px;
}

/*------------------------------------*\
    $FORMS
\*------------------------------------*/

.ui-button{
    /*height: 20px;*/
}
.ui-button .ui-button-text{
    padding: 0 6px;
    font-weight: normal;
    color: #555555;
    font-size: 12px;
}

fieldset {
    margin-top: 20px;
    margin-bottom: 20px;
}

fieldset.singleton {
    border: none;
    margin-top: 0;
    margin-bottom: 0;
    width: 600px;
}

fieldset.singleton li label{
    vertical-align: middle;
}

legend {
    font-weight: bold;
    color: #ff7a00;
}

.form-field-required {
    color: red;
}

/**
 * Input Lists
 */
.input-list {
    padding: 0;
    list-style: none;
    margin: 0;
}
.input-list > li {
    margin: 8px 0;
}
.input-list label {
    font-weight: bold;
}

li.smaller-padding {
    margin: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
}

li.smaller-padding-larger-text {
    margin: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 14px;
}

/**
 * Inputs: Labels top-aligned
 */
.input-list--top,
.input-list--top > li {
    clear: both;
}
.input-list--top > li + li {
    padding-top: 5px;
}
.input-list--top label,
.input-list--top .input-hint {
    display: block;
}
.input-list--top label {
    margin: 10px 0 3px;
}
.input-list--top input,
.input-list--top textarea {
    clear: both;
}
.input-list--top .input-suffix,
.input-list--top .input-hint {
    margin-bottom: 15px;
    line-height: 25px;
}
.input-list--top .input-hint {
    margin-top: -3px;
    clear: both;
}


/**
 * Inputs: Tabular
 */
.input-list--tabular label {
    display: inline-block;
    width: 40%;
    padding-right: 5px;
}
.input-list--tabular .input-hint {
    display: block;
    margin-left: 40%;
    padding-left: 7px;
}
.input-list--tabular input,
.input-list--tabular textarea {
    width: 50%;
}
.input-list--tabular input.x-small {
    width: 10%;
}
.input-list--tabular input.small {
    width: 25%;
}

/* use smallabel to reduce label width */
.input-list--tabular.smalllabel label{
    width: 30%;
}

.input-list--tabular.smalllabel input,
.input-list--tabular.smalllabel textarea {
    width: 60%;
}

/**
 * Inputs: Inline
 */
.input-list--inline > li {
    display: inline-block;
    padding-left: 10px;
}
.input-list--inline > li + li {
    margin-left: 30px;
}
.input-list--inline input,
.input-list--inline textarea {
    margin-left: 10px;
}


/**
 * Inputs: Tables
 */
/*table*/.form-table li {
    list-style: none;
}
.form-table label,
.form label {
    font-weight: bold;
}
.form-table td {
    vertical-align: top;
}


/**
 * Other forms
 */
.form {
    margin: 5px 10px;
}
.form > li {
    display: table;
    list-style: none;
}
.form > li > label {
    display: table-cell;
    width: 40%;
    line-height: 23px;
    vertical-align: middle;
}

/** 
 * Forms in columns
 */
.form--left,
.form--right {
    width: 49.9%;
    max-width: 350px;
}
.form--left {
    float: left;
}
.form--right {
    float: right;
}
.form--left .input-list--tabular input,
.form--left .input-list--tabular textarea,
.form--right .input-list--tabular input,
.form--right .input-list--tabular textarea {
    width: auto;
}

.dialog-save-template-form {
    margin-left: 5px;
}

.dialog-save-template-form li{
    padding-left: 0;
}

input[type="checkbox"]{
    width: auto;
}

.ui-inputfield,
.ui-inputtext{
    padding: 1px;
}

.ui-selectonemenu.ui-widget.ui-state-focus,
.ui-selectonemenu.ui-widget.ui-state-hover{
    /*border: 1px solid #555555;*/
}
.ui-selectonemenu-trigger.ui-state-focus,
.ui-selectonemenu-trigger.ui-state-hover{
    border: 0;
    border-left: 1px solid #a8a8a8;
}

.ui-autocomplete .ui-autocomplete-dropdown.ui-state-default{
    width: 20px;
    border: 1px solid #a8a8a8;
    border-left: 0;
}


.ui-autocomplete-input.ui-inputfield.ui-state-hover,
.ui-autocomplete-input.ui-inputfield.ui-state-focus{
    /*border: 1px solid #555555;*/
}

.ui-autocomplete .ui-autocomplete-dropdown.ui-state-focus,
.ui-autocomplete .ui-autocomplete-dropdown.ui-state-hover{
    /*border: 1px solid #555555;*/
}


.ui-selectonemenu-trigger{
    border-left: none;
    border-bottom: thin solid #c4c4c4;
    border-top: thin solid #c4c4c4;
    border-right: thin solid #c4c4c4;
}

.ui-selectonemenu-trigger{
    border: 1px solid #a8a8a8;
}

.ui-selectonemenu .ui-selectonemenu-trigger{
    width: 17px;
    padding: 0;
}
.ui-selectonemenu .ui-selectonemenu-trigger .ui-icon{
    margin-top: 0;
}

/* Datepicker */
.ui-datepicker-trigger.ui-button.ui-widget.ui-state-default{
    padding: 0;
    width: 19px;
    height: 18px;
    top: 4px;
    border: 1px solid #a8a8a8;
    margin-left: 5px;
}

.ui-datepicker .ui-datepicker-buttonpane button{
    padding: 0.1em;
    font-size: 1em;
    font-weight: normal;
}

.ui-datepicker .ui-datepicker-buttonpane button:hover{
    border-color: #555555;
}

.ui-datepicker td a {
    color: #FF8200 !important;
}

.ui-datepicker-current-day a {
    background-color: #FF8200 !important;
}

.ui-datepicker-current.ui-state-hover {
    background: -moz-linear-gradient(center top , rgba(255, 255, 255, 1), rgba(209, 209, 209, 1));
    background: -webkit-gradient(linear, center top , rgba(255, 255, 255, 1), rgba(209, 209, 209, 1));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(209,209,209,1) 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(209,209,209,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(209,209,209,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d1d1d1',GradientType=0 );
}

.ui-datepicker-close.ui-state-hover {
    background: -moz-linear-gradient(center top , rgba(255, 255, 255, 1), rgba(209, 209, 209, 1));
    background: -webkit-gradient(linear, center top , rgba(255, 255, 255, 1), rgba(209, 209, 209, 1));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(209,209,209,1) 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(209,209,209,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(209,209,209,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d1d1d1',GradientType=0 );
}

.ui-datepicker-prev.ui-datepicker-prev-hover {
    /*background-image: url("/fleetmanager/javax.faces.resource/images/ui-icons_626262_256x240.png.xhtml?ln=primefaces-aristo");*/
}


.form-table.restrictions input.ui-inputfield {
    width: 60px;
}

.ui-selectmanycheckbox.ui-widget label{
    font-weight: normal;
}

.ui-panel.dataunitPanel,
.dataunitPanel{
    background-color: #d0d2d6;
    border: none;
    padding-left: 0px !important;
}

/* Input Field with Commandlink (Icon) */
.ui-inputfield.ui-inputtext + a.ui-commandlink {
    position: relative;
    top: 5px;
    margin-left: 2px;
}

.vehicleEditForm .ui-inputtext,
.vehicleEditForm .ui-selectonemenu{
    width: 146px !important;
}

/*------------------------------------*\
    $BUTTONS
\*------------------------------------*/

.save-button,
.back-button {
    margin-top: 2px;
    margin-bottom: 2px;
}
.save-button,
.batch-button {
    float: left;
}
.back-button {
    float: right;
}

.order-by-date,
.order-by-priority {
    position: absolute;
    top: 13px;
}
.order-by-date {
    right: 17px;
}
.order-by-priority {
    right: 37px;
}

.buttonfooter{
    height: 30px;
    padding-top: 10px;
}



/*------------------------------------*\
    $DASHBOARD
\*------------------------------------*/

/**
 * Unfortunately we have to use fixed column heights to get
 * scrolling etc. working as expected, cross-browser.
 */
.ui-dashboard {
    display: table;
    width: 100%;
    height: 700px;
}

.ui-dashboard-column {
    display: table-cell;
    width: 350px;
    padding-bottom: 0;
    vertical-align: top;
}

/**
 * The first and last columns are fixed width,
 * while the middle column stretches to fit.
 * IE8 doesn't support the :nth-child selector,
 * so just has each column at 33%.
 */
.ui-dashboard-column:nth-child(2) {
    width: auto;
}

.ui-dashboard .ui-panel {
    height: 350px; /* 50% */
    margin: 10px 5px;
    padding: 0;
    overflow-y: hidden;
}
.ui-dashboard .rightpanel.ui-panel {
    margin-right: 10px;
}
.ui-dashboard .leftpanel.ui-panel {
    margin-left: 10px;
}


.ui-dashboard .ui-panel-titlebar {
    position: relative;
    padding: 8px 0 8px 8px;

    background-color: #ededed;
    -webkit-box-shadow: inset 0 5px 5px rgba(255,255,255,0.5), inset -5px 0 5px rgba(0,0,0,0.1);
       -moz-box-shadow: inset 0 5px 5px rgba(255,255,255,0.5), inset -5px 0 5px rgba(0,0,0,0.1);
            box-shadow: inset 0 5px 5px rgba(255,255,255,0.5), inset -5px 0 5px rgba(0,0,0,0.1);

    border-bottom: 1px solid #a8a8a8;
}

.ui-dashboard .ui-panel-title {
    font-size: 21px;
}

.ui-dashboard .ui-panel-content.ui-widget-content {
    height: 91%; /* Approximation for IE8 (which doesn't support calc) */
    height: calc(100% - 38px); /* 100% - titlebar height */

    overflow-y: auto;

    -webkit-box-shadow: inset -5px -5px 5px rgba(0,0,0,0.1);
       -moz-box-shadow: inset -5px -5px 5px rgba(0,0,0,0.1);
            box-shadow: inset -5px -5px 5px rgba(0,0,0,0.1);
}

/**
 * Common
 */
.ui-dashboard h4,
.driverstate .undecorated-list {
    margin: 2px 6px;
}
.ui-dashboard h4 {
    font-size: 19px;    
}
.ui-widget.fleetstate,
.ui-widget.driverstate {
    font-size: 16px;
}


/**
 * Fleet status
 */
.ui-panel.fleetstate {
    height: 420px;  /* 60% */
}

img.fleet-status {
    max-width: 100%;
    margin-top: 15px;
}


/**
 * Driver status
 */
.ui-panel.driverstate {
    width: auto;
    height: 280px; /* 40% */
}

/**
 * Clock
 */
.ui-panel.clock {
    text-align: center;
    height: 175px;  /* 25% */
    position: relative;
}

.ui-panel.batterymode.rightpanel {
    height:256px;
}

.ui-panel.clock > .ui-panel-titlebar {
    background-color: #e3e3e3;
    height: 110px;
}
.ui-panel.clock .ui-panel-content.ui-widget-content {
    height: 57px;
}
.ui-panel.clock .ui-panel-content.ui-widget-content > .ui-widget {
    display: block;
    padding: 0;
    background: none;
    font-size: 16px;
}
.ui-panel.clock .ui-panel-content.ui-widget-content > .ui-widget:first-child {
    font-size: 21px;
}


/**
 * Tasks
 */
.ui-panel.tasks {
    height: 525px; /* 75% */
}
.tasks .ui-panel-content.ui-widget-content {
    background-color: #f4f4f4;
}
.tasks-panel {
    border: 0;
    margin: 0;
}

.tasks-panel > div{
    padding-top: 5px;
    padding-right: 5px;
    padding-left: 5px;
}

.tasks-panel .ui-scrollpanel-content {
    padding: 5px 10px;
}
.messages {
    padding: 5px 0;
    font-weight: bold;
}
.messages ~ .messages {
    border-top: 1px solid #a8a8a8;
    margin-top: 10px;
}





/*------------------------------------*\
    $NOTIFICATIONS
\*------------------------------------*/

/**
 * Notifications are part of the Dashboard, but there's enough code for them to
 * have their own section.
 */
.notifications .ui-panel-title { /* Fixes IE8 issue */
    display: block;
    margin: 0;
}
.notification-panel {
    border: 0;
    overflow-x: hidden;
}

ul.notifications-list{
    list-style: none;
    padding: 0;
    margin: 0;
}

.notifications-list li{
    border-bottom: 1px solid #a8a8a8;
    display: table;
    width: 100%;
}

.notifications-list li span.msg-short,
.notifications-list li span.timestamp{
    display: block;
    font-size: 13px;
    font-weight: bold;
    width: 90%;
    padding-top: 3px;
    padding-left: 5px;
}
.notifications-list li .msg-detailed{
    display: block;
    width: 90%;
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
}

.notifications-list li a img{
    margin-right: 20px;
}


.notifications-list li .timestamp.read {
    padding: 5px;
    font-weight: normal;
}


.notifications-list li .msg-detailed.read,
.notifications-list li .msg-short.read{
    padding-top: 0;
    padding-bottom: 5px;
    font-weight: normal;
}

.notifications-list .msg-detailed,
.notifications-list .status {
    display: table-cell;
}

.notifications-list .status {
    text-align: right;
    vertical-align: middle;
}

.notificationSettingsTable tr.ui-datatable-even:HOVER,
.notificationSettingsTable tr.ui-datatable-odd:HOVER{
    background-color: #f1eee9;
}

/*------------------------------------*\
    $TILES
\*------------------------------------*/

/**
 * Tiles are used on the Settings and Reports pages to provide links to the
 * various subsections.
 */

.tiles {
    margin: 0;
    padding: 0;
    list-style: none;
}
.tiles:after {
    content: "";
    display: table;
    clear: both;
}
.tile {
    float: left;
    position: relative;
    width: 250px;
    height: 250px;
    margin: 5px 7px 10px;
    
    border: 1px solid #bbbbbb;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;

    background-color: #eee;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffffff, endColorstr=#c7c7c7)";
    background-image: -webkit-gradient(linear, left top, from(white), to(#c7c7c7));
    background-image: -webkit-linear-gradient(top, white, #c7c7c7);
    background-image:    -moz-linear-gradient(top, white, #c7c7c7);
    background-image:      -o-linear-gradient(top, white, #c7c7c7);
    background-image: linear-gradient(to bottom right, white, #c7c7c7);

    -webkit-box-shadow: 2px 3px 1px 0 #a1a1a1,
                    inset 0 5px 5px rgba(255,255,255,0.5),
                    inset -5px 0 5px rgba(0,0,0,0.1),
                    inset -5px -5px 5px rgba(0,0,0,0.1);
    -moz-box-shadow: 2px 3px 1px 0 #a1a1a1,
                inset 0 5px 5px rgba(255,255,255,0.5),
                inset -5px 0 5px rgba(0,0,0,0.1),
                inset -5px -5px 5px rgba(0,0,0,0.1);
    box-shadow: 2px 3px 1px 0 #a1a1a1,
                inset 0 5px 5px rgba(255,255,255,0.5),
                inset -5px 0 5px rgba(0,0,0,0.1),
                inset -5px -5px 5px rgba(0,0,0,0.1);
}

.tile a {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    text-decoration: none;
}

.tile .head > img {
    float: left;
}

.tile .head{
    height: 90px;
}

.tile .head > h4 {
    padding-top: 30px;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}





/*------------------------------------*\
    $SETTINGS
\*------------------------------------*/

.user-details {
    float: left;
    width: 40%;
}
.user-roles {
    float: right;
    width: 55%;
    margin-top: 15px;
}

.ui-chkbox.weekdays {
    margin-right: 1em;
}

.settings-header {
    border: 0;
    font-size: 12px;
    font-weight: bold;

    margin: 0;
    padding: 8px;

    border-top-left-radius: 3px;
    border-top-right-radius: 3px;

    background: -moz-linear-gradient(center top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)) repeat scroll 0 0 #c4c4c4;
    color: #333;
}

#orgUnitDialogId ul.ui-treenode-children .ui-treenode{
    margin-bottom: 3px;
    margin-top: 3px;
}

#orgUnitDialogId ul.ui-treenode-children .ui-treenode .ui-state-highlight{
    text-decoration: underline;
    color: #FF8200 !important;
}

.syncDialog .ui-state-highlight{
    border: 1px solid #a8a8a8;
    background: #ffffff;
    color: #4f4f4f;
    text-shadow: none;
}

.syncDialog .ui-datatable-odd {
    border: 1px solid #a8a8a8;
    background: #ffffff;
    color: #4f4f4f;
    text-shadow: none;
}

.syncDialog .ui-state-hover {
    border: 1px solid #a8a8a8;
    background: #ffffff !important;
    color: #4f4f4f;
    text-shadow: none;
}

/*------------------------------------*\
    $REPORTS
\*------------------------------------*/

.reportForm label {

}

.report-col-1 {
    width: 265px;
}
.report-col-2 {
    width: 300px;
}

.report-col-3 {
    width: 250px;
}

/* Problem only occurring in Chrome, not FF or IE8 so remove "fix" for now */
/*.select-vehicles {*/
    /*position: relative;*/
    /*top: 11px;*/
/*}*/

.selection-label {
    float: right;
    width: 210px;
}

.selection-label {
    position: relative;
    top: 3px; /* Chrome: 8px */
}

.timespan-select {
    position: relative;
    top: 8px;
}

.preview-links {
    text-align: center;
}
.preview-links .inline-list > li + li {
    margin-left: 10px;
}

.report-fixed-width {
    min-width: 925px;
}



/*------------------------------------*\
    $ADMINISTRATION
\*------------------------------------*/

/**
 * Page layout
 */
.planning-form,
.planning-form > .panel {

}

.planning-form{
    height: 100%;
    display: block;
}

.planning-form-wrapper{
    top: 38px;
    bottom: 0px;
    position: absolute;
    left:0;
    right:0;
}

table.paneltree{
    width: 100%;
}

table.paneltree td,
table.paneltree tr,
table.paneltree{
    height: 100%;
}


table.paneltree td{
    padding: 0;
    width: 50%;
}

table.paneltree td.spacer{
    width: 8px;
    border: 0;
}

.panel {
    box-sizing: border-box;
    /*float: left;*/
    /*width: 100%;*/
    margin: 0;
    padding: 0;
    position: relative;
    height: 100%;
    display: block;
    border: 1px solid #a8a8a8;
    border-radius: 3px;
}

table.paneltree .tdleft{
    padding-right: 3px;
}
table.paneltree .tdright{
    padding-left: 3px;
}

.panel--left{

}

.panel--right {
}

.panel--single {
    border: 1px solid #a8a8a8;
    border-radius: 3px;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.admin-filter {
    float: left;
    padding: 5px;
}

.admin-filter .ui-selectonemenu.darkmenu label {
    background-color: #eeeeee;
    color: #4f4f4f;
}

.button-bar {
    padding: 0;
    margin: 4px 8px;
    border: none;
    float: right;
}
.planning-tree,
.planning-details {
    border: none;
    border-radius: 0;
    overflow: auto;
}
.planning-tree {
    position: absolute;
    top: 30px;
    bottom: 120px;
}
.planning-details {
    display: block;
    width: 99%; /* IE8 fallback */
    width: calc(100% - 5px);
    height: 120px;
    padding-left: 5px;
    border-top: 1px solid #a8a8a8;
    background-color: white;

    position: absolute;
    bottom: 0;
}

.planning-details-list .ui-datalist-data {
    padding-left: 0;
}

.planning-details-top .top {
    vertical-align: top;
}

.admin-details {
    margin-top: 10px;
}
.admin-details__heading {
    margin: 0;
}
.admin-details .ui-widget-content {
    border: none;
}
.admin-details > .vehicles {
    margin-top: 10px;
}

.admin-details > .vehicles ul{
    padding: 0;
    margin-top: 0;
}


.ui-dialog.ui-widget.ui-widget-content .ui-dialog-content.ui-widget-content{
    overflow: hidden;
}



/*------------------------------------*\
    $TREES
\*------------------------------------*/

.ui-tree {
    width: 100%;
    clear: both;
    overflow: auto;
}

.useradmin-tree .report-tree .ui-tree .ui-treenode {
    margin: 8px 0;
}

.useradmin-tree .report-tree .ui-tree .ui-treenode-icon {
    margin-left: 7px;
}
.useradmin-tree .report-tree .ui-tree .ui-treenode-label {
    margin-left: 5px;
}

/** for IE 8-10 **/
.ui-treenode-droppable {
    display: block;
}

.ui-tree-draghelper.ui-state-highlight {
    line-height: 20px;
    background: #eee;
    color: #555555;
    text-shadow: none;
    max-width: 200px;
    border-width: 2px;
    border-style: solid;
}

.ui-tree-draghelper.ui-state-highlight:before {
    content: '\21C6';
    padding: 2px 5px 2px 2px;
    margin-right: 5px;
    font-size: 18px;
}

.tree-accept {
    border-color: green;
}
.tree-deny {
    border-color: #cd0a0a;
}
.tree-accept:before,
.tree-deny:before {
    padding: 2px 5px 2px 2px;
    margin-right: 5px;
    font-size: 18px;
    color: white;
}
.tree-accept.ui-tree-draghelper.ui-state-highlight:before {
    content: '\2713';
    background-color: green;
}
.tree-deny.ui-tree-draghelper.ui-state-highlight:before {
    content: '\2717';
    background-color: #cd0a0a;
}

/**
 * We don't want any drop points (points between nodes), just drop nodes. PF
 * writes drop point elements at the Java level (in TreeRenderer) so instead of
 * mucking around with JavaScript we'll just do the simplest thing and hide them
 * in the DOM.
 */
.ui-tree-droppoint {
    display: none;
}

.ui-treenode .ui-icon {
    border-radius: 0;
}

.ui-treenode-content .ui-icon-vehicle {
    background-image: url("/fleetmanager/javax.faces.resource/img/vehicle-online-16px.png.xhtml");
}
.ui-treenode-content .ui-icon-vehicle-offline {
    background-image: url("/fleetmanager/javax.faces.resource/img/vehicle-offline-16px.png.xhtml");
}
.ui-treenode-content .ui-icon-department {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/structure-tree-icon.png.xhtml");
}
.ui-treenode-content .ui-icon-department-optitruck {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/structure-tree-icon-optitruck.png.xhtml");
}
.ui-treenode-content .ui-icon-driver {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/driver-tree-icon.png.xhtml");
}
.ui-treenode-content .ui-icon-driver-indirect {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/driver-tree-indirect-icon.png.xhtml");
}
.ui-treenode-content .ui-icon-driver-optitruck {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/driver-tree-opti-icon.png.xhtml");
}
.ui-treenode-content .ui-icon-driver-indirect-optitruck {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/driver-tree-indirect-opti-icon.png.xhtml");
}
.ui-treenode-content .ui-icon-battery {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/battery-tree-icon.png.xhtml");
}
.ui-treenode-content .ui-icon-access-collection {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/access-collection-tree-icon.png.xhtml");
}
.ui-treenode-content .ui-icon-access-collection-indirect {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/access-collection-tree-icon-indirect.png.xhtml");
}
.ui-treenode-content .ui-icon-access-collection-optitruck {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/access-collection-tree-icon-opti.png.xhtml");
}
.ui-treenode-content .ui-icon-access-collection-indirect-optitruck {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/access-collection-tree-icon-indirect-opti.png.xhtml");
}
.ui-treenode-content .ui-icon-access-collection-assignment {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/access-collection-assignment-tree-icon.png.xhtml");
}
.ui-treenode-content .ui-icon-attachment {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/attachment-tree-icon.png.xhtml");
}
.ui-treenode-content .ui-icon-card {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/card-tree-icon.png.xhtml");
}
.ui-treenode-content .ui-icon-charger {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/charger-tree-icon.png.xhtml");
}
.ui-treenode-content .ui-icon-pin {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/pin-tree-icon.png.xhtml");
}
.ui-treenode-content .ui-icon-rfid {
    background-image: url("/fleetmanager/javax.faces.resource/img/planning/rfid-tree-icon.png.xhtml");
}






/*------------------------------------*\
    $DATATABLES
\*------------------------------------*/

.ui-datatable th.ui-state-default,
.ui-datatable th.ui-state-active,
.ui-datatable th.ui-state-hover,
.ui-datatable th.ui-state-focus,
.ui-datatable tr.ui-state-default,
.ui-datatable tr.ui-state-active,
.ui-datatable tr.ui-state-hover,
.ui-datatable tr.ui-state-focus {
    border: 1px solid #a8a8a8;
    background: #f1eee9;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}
.ui-datatable .ui-datatable-header {
    padding-bottom: 7px;
}
.ui-datatable-header > .ui-commandlink {
    float: left;
}

.assignment-dialog-warn-red,
.assignment-dialog-warn-green {
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 3px;
}

.assignment-dialog-warn-green {
    background-image: url("/fleetmanager/javax.faces.resource/img/overview/warn-green-10px.png.xhtml");
}
.assignment-dialog-warn-red {
    background-image: url("/fleetmanager/javax.faces.resource/img/overview/warn-red-10px.png.xhtml");
}
.assignment-dialog-warn-line-text {
    padding-left: 10px;
}





/*------------------------------------*\
    $PAGINATOR
\*------------------------------------*/

.ui-paginator .ui-state-default {
    text-shadow: none;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}
.ui-paginator-first.ui-state-active,
.ui-paginator-first.ui-state-hover,
.ui-paginator-first.ui-state-focus,
.ui-paginator-prev.ui-state-active,
.ui-paginator-prev.ui-state-hover,
.ui-paginator-prev.ui-state-focus,
.ui-paginator-next.ui-state-active,
.ui-paginator-next.ui-state-hover,
.ui-paginator-next.ui-state-focus,
.ui-paginator-last.ui-state-active,
.ui-paginator-last.ui-state-hover,
.ui-paginator-last.ui-state-focus,
.ui-paginator-page.ui-state-active,
.ui-paginator-page.ui-state-hover,
.ui-paginator-page.ui-state-focus,
.ui-paginator-rpp-options.ui-state-active,
.ui-paginator-rpp-options.ui-state-hover,
.ui-paginator-rpp-options.ui-state-focus {
    border-color: #a8a8a8;
    background-image: none;
    background-color: #c4c4c4;
    color: #555555;
}





/*------------------------------------*\
    $MISC
\*------------------------------------*/

.float--left {
    float: left;
}

.float--right {
    float: right;
}

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


.cf:after {
    content: "";
    display: table;
    clear: both;
}

.helpLink {
    float: right;
}


#overviewsettings{

}

.wrapper,
.settingsContainer{
    background-color: #ffffff;
    min-height: 100%;
    border: 1px solid #a8a8a8;
    border-radius: 3px;
    box-sizing: border-box;

}

.settingsContainer .ui-datatable th{
    /*border:0;*/
}

.importUpload .ui-button-text{
    padding-left: 25px;
}

button.simulButtons{
    width: 50px;
    height: 20px;

    margin-bottom: 2px;
    margin-top: 2px;

    border-radius: 3px;
    border: 1px solid #a8a8a8;
}

button.simulButtons.ui-button.ui-state-default{
    border-color: #a8a8a8;
}


button.simulButtons:HOVER{
    background: -moz-linear-gradient(center top , rgba(255, 255, 255, 1), rgba(209, 209, 209, 1));
    background: -webkit-gradient(linear, center top , rgba(255, 255, 255, 1), rgba(209, 209, 209, 1));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(209,209,209,1) 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(209,209,209,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(209,209,209,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d1d1d1',GradientType=0 );
}

.simulDataList div.ui-datalist-footer.ui-widget-header.ui-corner-bottom{
    background: #c4c4c4;
}

.ui-confirm-dialog .dialog-buttons{
    top: 3px;
}

.assginmentFailureConfirmationDialog.ui-dialog.ui-widget.ui-widget-content .ui-dialog-content.ui-widget-content{
    overflow: scroll;
}

/** Sidebar **/
.sidebar-menu{
    background-color: #EEEEEE;
    border: 0;
}

.sidebar-menu div.ui-widget-content{
    background-color: #EEEEEE;
}

.sidebar-menu .sidebarwrapper{
    background-color: #ffffff;
    border: 1px solid #a8a8a8;
    border-radius: 3px;
    box-sizing: border-box;
    height: 100%;
    margin-left: 5px;
}


.driverLicenceTable{
    position: relative;
    width: 804px;
    left: -15px;
    top: -12px;
    height: 290px;
    overflow: auto;
}

.driverLicenceTable th.ui-state-default{
    background: #D0D2D6;
    border: 1px solid #D0D2D6;
}

.emptyList tbody,
.driverLicenceTable tr.ui-widget-content.ui-datatable-empty-message td,
.driverLicenceTable tr.ui-widget-content.ui-datatable-empty-message{
    background-color: #D0D2D6;
    border: 1px solid #D0D2D6;
}
.tableInsideTable table thead tr {
    display: none;
    
}
.tableInsideTable table tbody{
    border: none;
    text-shadow: none;
}
.optitruckToolTip{
	background-color:#FFFFFF;
	border:1px solid #D0D2D6;
}
.calendarTime.ui-inputfield {
	width:50px !important;
}


#blockUiBody{
    z-index: 9999;
}

.ui-slider .ui-slider-handle{
	background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)) repeat scroll 0 0 #ff7a00;

}

.centerImage {
    display: block;
    margin: 0 auto;
    margin-top: 5%
}

.nowrap {
    white-space: nowrap;
}

.defectList .ui-chkbox{
	padding:5px;
}

.ui-datatable .ui-column-filter {
    width: 80%;
}