body {
    background-color: #ffffff;
    font-size: 12px;
    font-family: Verdana, "Verdana CE",  Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;
    color: #000000;  
    margin: 10px;
}

h1 {
    font-family: Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;
    border-bottom: 1px solid #AFAFAF; 
    font-size:  16px;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
    color: #D20005;
}

select, .zupDropDown, .hubDropDown {
    font-size: 12px;
    height: 19px;
}

input {
    font-family: 'MS Shell Dlg'!important;
    font-size: 12px;
}

button {
    font-size: 12px!important;
}

label {
    padding-right: 4px;
}

.zupDropDown {
    width: 185px;
}

.hubDropDown {
    width: 145px;
}

.zupNoDropDown {
    width: 50px;
}

.alignTop { vertical-align: top; }

.highlightRow {
    background-color: #D20005 !important;
    background-image: none !important;
}

.normalRow {

}

.calendar {
    width: 80px; font-size: 12px;
}

div.ui-dt-c{overflow:visible!important;}

/* Used to slim the button for opening the list. This prevents collisions with text. */

.ui-selectonemenu .ui-selectonemenu-trigger {
    width: 10px !important;
}

.ui-selectonemenu .ui-selectonemenu-trigger .ui-icon {
    margin-left: -3px;
}

.ui-selectmanymenu {
    -moz-user-select: none;
}

/* 
 * Instead of applying the background effect individually to each header in the table(sometimes directly above each other) we create a smooth
 * plane by moving the efect up to the thead and tfoot. The thead needs to adjust the background position since the column header are part
 * of thead but not part of the background effect.
 * The paginator parts will loose the border line that would cut through the shared background effect.
 */
/*.ui-datatable .ui-widget-header {
    background-image: none;
}*/
/*.ui-datatable .ui-widget-header {
    background: none;
}

.ui-datatable thead {
    background: #5c9ccc url("/MailAlliance/faces/javax.faces.resource/images/ui-bg_gloss-wave_55_5c9ccc_500x100.png?ln=primefaces-redmond") 50% 50% repeat-x;
    background-position: 50% 400%;
}

.ui-datatable tfoot {
    background: #5c9ccc;
}

.ui-paginator-top {
    border-top-width: 0px;
}

.ui-paginator-bottom {
    border-bottom-width: 0px;
}*/

/* decreasing the bulky buttons in height so they match other elements */
.ui-button-text {
    padding-top: 4px!important;
    padding-bottom: 4px!important;
    line-height: 100%!important;
}
/*
    decreasing the wasted border area on inputfield
    colorcoding the input fields
*/
.ui-inputfield {
    padding: 1px!important;
    background-color: #d8e7f3!important;
}
.ui-selectlistbox-item {
    white-space: nowrap!important;
    /*background-color: transparent!important;*/
    background-image: none!important;
}

/* creating a straight edge on the right side of the spinner input */
.ui-spinner-input {
    border-right-width: 0px!important; 
    border-top-right-radius: 0px!important; 
    border-bottom-right-radius: 0px!important;
    padding-right: 0px; padding-left: 0px;
}

/*
 * Utility to remove bg images from classes
 */
.ui-nobgimage {
    background-image: none!important;
}

.panel-corner-all, .grouping1 { -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; -khtml-border-top-left-radius: 2px; border-top-left-radius: 2px;
        -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; -khtml-border-top-right-radius: 2px; border-top-right-radius: 2px;
        -moz-border-radius-bottomleft: 2px; -webkit-border-bottom-left-radius: 2px; -khtml-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px;
        -moz-border-radius-bottomright: 2px; -webkit-border-bottom-right-radius: 2px; -khtml-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px;
        border-width: 1px; background: #E5E9ED;
        border-style: solid;
        border-color: #EDEDED #C7C7C7 #C7C7C7 #EDEDED}

.grouping1 {
     padding-left: 3px; padding-top: 3px; padding-bottom: 5px; padding-right: 2px; margin-right: 5px;
     border-style: solid; border-width: 1px; background: #36586F; color: #FFFFFF; font-weight: bold;
     background-image: none!important; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.7);
}

.grouping2 {
    -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; -khtml-border-top-left-radius: 2px; border-top-left-radius: 2px;
    -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; -khtml-border-top-right-radius: 2px; border-top-right-radius: 2px;
    -moz-border-radius-bottomleft: 2px; -webkit-border-bottom-left-radius: 2px; -khtml-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px;
    -moz-border-radius-bottomright: 2px; -webkit-border-bottom-right-radius: 2px; -khtml-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px;
    border-width: 1px; background: #E5E9ED;
    border-style: solid;
    border-color: #EDEDED #C7C7C7 #C7C7C7 #EDEDED;
    padding-left: 3px; padding-top: 3px; padding-bottom: 5px; padding-right: 2px; margin-right: 5px;
    border-style: solid; border-width: 1px; background: #36586F; color: #FFFFFF; font-weight: bold;
    background-image: none!important; text-shadow: none;
}

.ui-datatable-header {
    background: #36586F; color: #FFFFFF; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.7);
}

/*
 * modifying the corners to be less round - we remove one pixel 3px -> 2px
 */
.ui-corner-tl
{
    -moz-border-radius-topleft: 2px;
    -webkit-border-top-left-radius: 2px;
    border-top-left-radius: 2px;
}
.ui-corner-tr
{
    -moz-border-radius-topright: 2px;
    -webkit-border-top-right-radius: 2px;
    border-top-right-radius: 2px;
}
.ui-corner-bl
{
    -moz-border-radius-bottomleft: 2px;
    -webkit-border-bottom-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
.ui-corner-br
{
    -moz-border-radius-bottomright: 2px;
    -webkit-border-bottom-right-radius: 2px;
    border-bottom-right-radius: 2px;
}
.ui-corner-top
{
    -moz-border-radius-topleft: 2px;
    -webkit-border-top-left-radius: 2px;
    border-top-left-radius: 2px;
    -moz-border-radius-topright: 2px;
    -webkit-border-top-right-radius: 2px;
    border-top-right-radius: 2px;
}
.ui-corner-bottom
{
    -moz-border-radius-bottomleft: 2px;
    -webkit-border-bottom-left-radius: 2px;
    border-bottom-left-radius: 2px;
    -moz-border-radius-bottomright: 2px;
    -webkit-border-bottom-right-radius: 2px;
    border-bottom-right-radius: 2px;
}
.ui-corner-right
{
    -moz-border-radius-topright: 2px;
    -webkit-border-top-right-radius: 2px;
    border-top-right-radius: 2px;
    -moz-border-radius-bottomright: 2px;
    -webkit-border-bottom-right-radius: 2px;
    border-bottom-right-radius: 2px;
}
.ui-corner-left
{
    -moz-border-radius-topleft: 2px;
    -webkit-border-top-left-radius: 2px;
    border-top-left-radius: 2px;
    -moz-border-radius-bottomleft: 2px;
    -webkit-border-bottom-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
.ui-corner-all
{
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
/*
 * hmmm we change it from 10px to 2px, but where is this in use anyway?
 */
.ui-round-all
{
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
.ui-icon {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

.ui-state-disabled {
    opacity: 0.5;
    filter: Alpha(Opacity=50);
}

/*
 * Dunkles blau: #36586F
 * Helleres Blau: #5985A2
 * Backlay Grau: #E5E9ED
 */

.misroute-reason-selector .misroute-comment {
    display: none;
}

.misroute-reason-selector .misroute-comment,
.lifetime-exceeded-dialog .lifetime-exceeded-comment {
    width: 100%;
    height: 28px;
    margin-bottom:10px;
    font-size: 200%;
}

.main-container {
    margin: 0 auto;
    max-width: var(--inner-content-width);
}