html { overflow-y: scroll }
html table { border-top: none; border-bottom: none }

.w100p { width: 100% !important; max-width: 100% !important; }
.w75p { width: 75% !important }
.w66p { width: 66% !important }
.w50p { width: 50% !important }
.w33p { width: 33% !important }
.w25p { width: 25% !important }
.w15p { width: 15% !important }
.w59p { width: 59% !important }
.w10p  { width: 10% !important }
.w5p  { width: 5% !important }

.ar { text-align: right !important }
.al { text-align: left !important }
.ac { text-align: center !important }

.mr05em { margin-right: 0.5em !important }
.mr1em { margin-right: 1em !important }
.ml05em { margin-left: 0.5em !important }
.ml1em { margin-left: 1em !important }

.pTop, .pBottom, .pLeft, .pRight {position: absolute}
.pTop {top: 0}
.pBottom {bottom: 0}
.pLeft {left: 0}
.pRight {right: 0}

.SiteContainer { margin-top: 10px }

#tableCon * {
    font-family: Arial;
}

    #tableCon i.fa {font-family: "FontAwesome" }

#eproc #Navigationbar.fixed + .SiteContainer {
    margin-top: 80px
}

#eproc #Navigationbar {
    margin-bottom: 0;
}

    #Navigationbar .level_1 > #mainNavEprocure.active {
        border-right: none;
        margin-left: -1px;
    }

    #Navigationbar .level_1 > #mainNavEprocure.active > a {
        background: #000;
        text-shadow: none;
    }

#eprocMainNavCon {
    background: #6d6d6d;
}

#eprocMainNav {
    max-width: 1200px;
    margin: auto;
    display: block;
    height: 40px;
    padding-left: 10px;
    padding-right: 10px;
}

    #eprocMainNav > li {
        float: left;
        position: relative;
    }
    
        #eprocMainNav li.last {
            float: right
        }
    
        #eprocMainNav a,
        #eprocMainNav span {
            display: block;
            height: 40px;
            line-height: 40px;
            color: #fff;
            padding: 0 1.5em;
            font-size: 14px; font-weight: 500;
        }
            #eprocMainNav a.active,
            #eprocMainNav a:hover {
                background: #323232;
            }
            
        /* Navi zweite Ebene */
       #eprocMainNav li ul {
           display: none;
           position: absolute;
           top: 40px;
           background: #6d6d6d;
           box-shadow: 3px 4px 10px -2px #999;
           z-index: 1
        }
            
            #eprocMainNav li:hover ul {
                display: block;
            }
            
            #eprocMainNav .subNav a {
                white-space: nowrap;
            }

#tableCon {
    position: relative;
    margin-top: 0 !important;
}
    #tableCon table tr th.ar, #tableCon table tr td.ar { text-align: right !important }
    #tableCon table tr th.al, #tableCon table tr td.al { text-align: left !important }
    #tableCon table tr th.ac, #tableCon table tr td.ac { text-align: center !important }
    
    #tableCon .resp-tabs-content { border-top: 1px solid #ccc; padding-top: 1em }
    #tableCon .resp-tab-content { padding: 1em 0 0 0 }
    
    #tableCon .resp-tab-item { padding: 0 }
        #tableCon .resp-tab-item a { display: block; padding: 10px 30px }    

#ContentTable td { position: relative }

/* Farben */
.bg-ec1 { background-color: #eee !important }
.bg-ec2 { background-color: #eee !important }
.bg-ec3 { background-color: #eee !important }
.bg-ec4 { background-color: #eee !important }
.fg-ec1 { color: #222 !important }
.fg-ec2 { color: #222 !important }
.fg-ec3 { color: #222 !important }
.fg-ec4 { color: #222 !important } 

/* Besteller */
.orderUser a {
        display: inline-block;
        padding: 0;
        white-space: nowrap;
    }
    
    .editedByAdmin {
        display: inline-block;
        cursor: help;
        margin-right: 10px;
    }
    
      
        td.amount .editedByAdmin {
            height: 30px;
            line-height: 30px;
            position: absolute;
            left: 10px;
        }
        
        .editedByAdmin i {
            color: #0075BC;
        }
         
        body .ui-tooltip,      
        body .ui-tooltip-content {
            font-family: Arial, Helvetica, sans-serif !important;
            font-size: 12px !important;
        }
        
        body .ui-tooltip {
            max-width: 200px;
            border-radius: 2px;
            border: 1px solid #aaa;
            box-shadow: 3px 3px 3px 0px #aaa;
        }

        .hasTooltip {
            cursor: help;
        }
        
        .wideTooltip {
            
            max-width: 400px !important;
        }
        
        .wideTooltip .ui-tooltip-content {
            width: 99% !important;
            max-width: 99% !important;
            /*white-space: nowrap;*/
        }

        
/* Betrag / Positionen */
.orderAmount,
.orderPositions {
    text-align: right
}


/* Status */
#tableCon th.orderStatus,
#tableCon td.orderStatus,
#tableCon th.status,
#tableCon td.status {
    text-align: center;
    padding: 8px 0;
}
    .orderStatus span,
    span.status {
        display: inline-block;
        color: #fff;
        width: 70px;
        height: 26px;
        border-radius: 3px;
        font-size: .85em;
        line-height: 26px;
        display: inline-block;
        text-align: center;
            text-shadow: 0 0 1px #000;
    }
        .orderStatus .offen,
        span.status-green,
        .status-green,
        .status-green i { color: #fff !important; background-color: #3e8600 !important }

        .orderStatus .abgelehnt,
        span.status-red,
        .status-red,
        .status-red i { color: #fff !important; background-color: #7f0000 !important }

        span.status-orange,
        .status-orange,
        .status-orange i { color: #fff !important; background-color: orange !important }


#eproc h3 {
    margin: 1.5em 0 .5em 0;
}
    #eproc h3.first {
        margin: .5em 0 .75em 0;
    }

/* Panels Startseite */

#eprocPanels a {
    display:block;
    position: relative;
    padding: .5em;
    height: 5em;
    font-size: 1.85em;
    letter-spacing: -.05em;
    line-height: 1.2;
    border-radius: 3px;
    transition: margin ease 0.2s;
}
    #eprocPanels a:hover {
        box-shadow: 3px 4px 10px -2px #999;
        margin-top: -3px;
        margin-bottom: 3px;
        background: #0075bc !important;
        color: #fff !important;
    }

    #eprocPanels a i {
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        color: #ccc;
        font-size: 1.5em
    }
        #eprocPanels a:hover i {
            color: #fff !important
        }
    
        #eprocPanels a i.c1 { right: 4rem; bottom: .75rem; font-size: 1.2em; color: rgba(204,204,204,1); }
        #eprocPanels a i.c2 { right: 2.3rem; bottom: 2rem; font-size: 1em; color: rgba(204,204,204,.75); }
        #eprocPanels a i.c3 { right: 1rem; bottom: 3.1rem; font-size: .75em; color: rgba(204,204,204,.5); }
            #eprocPanels a:hover i.c1 { color: rgba(255,255,255,1) !important }
            #eprocPanels a:hover i.c2 { color: rgba(255,255,255,.75) !important }
            #eprocPanels a:hover i.c3 { color: rgba(255,255,255,.5) !important }

/* Startseite Bestellungen */

td.dCostCenter span:after {
    display: inline-block;
    content: "/";
    padding: 0 .25em;
}
    td.dCostCenter span:last-child:after {
        content: "";
        padding: 0;
    }


#eproc table {
    border: none;
}

    #eproc #ContentTable thead th:first-child { border-top-left-radius: 3px }
    #eproc #ContentTable thead th:last-child { border-top-right-radius: 3px }
    #eproc #ContentTable tr:last-child td:first-child { border-bottom-left-radius: 3px }
    #eproc #ContentTable tr:last-child td:last-child { border-bottom-right-radius: 3px }


/* Bearbeiten */
.tableTools {
    width: 180px;
    min-width: 180px !important;
    text-align: right;
}
    .tableTools i {
        color: inherit
    }

    .tableTools a {
        display: inline-block;
        margin: 0;
        padding: 0;
        font-size: 20px;
        border-radius: 3px;
        width: 26px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        background: #ccc;
        color: #333;
    }
    
        .tableTools a:hover {
            color: #ccc;
            background: #333;
        }
        
        .tableTools a.disabled,
        .tableTools a.disabled:hover {
            color: #bfbfbf;
            background: #dadada;
            cursor:default;
        }


/* Abgeschlossene Bestellungen */
.orderValueAll {
    font-weight: bold;
    text-align: right;
}


/* Kostenstellen - Import */
pre#importLog {
    height: 20em;
    overflow-x: hidden;
}

/* Kostenstellen Übersicht/Bearbeitung */
td.ccmode.dateMode {
    display: block;
    font-size: 0.85em;
    line-height: 23.4375px;
}


/* Forms */

input[readonly="readonly"] {
    border: none;
    box-shadow: none;
    cursor: not-allowed;
}

#eproc label { position: relative }

#eproc .required {
    font-weight: bold;
    color: #f00;
}

    #userform .form-group {
        display: block;
        margin: 0 0 2em 0;
        padding: 0 0 2em 0;
        border-bottom: 1px solid #ccc;
    }
    
        #userform .form-group.last {
            margin: 0 0 2em 0;
            padding: 0 0 2em 0;
            border-bottom: none;
        }
        
        /* auto form-row clearfix */
        #userform .form-row:before,
        #userform .form-row:after {
            content: " ";
            display: table;
        }

        #userform .form-row:after {
            clear: both;
        }

        #userform .form-row {
         *zoom: 1;
        }
        /* auto form-row clearfix */
    
        #userform .form-row:last-child {
            margin-bottom: 0;
        }

        #userform h2 {
            margin: 0;
            padding: 0;
            font-size: 1em;
            font-weight: bold;
        }   

        #userform select,
        #userform input {
           font-size: 0.875em;
        }
            #userform input.lplz,
            #userform input.pplz,
            #userform input.rplz {
                width: 85px;
            }
            #userform input.lort,
            #userform input.port,
            #userform input.rort {
                width: 210px;
            }
    
        #userform label,
        #userform label.w100p span {
            display: inline-block;
            width: 120px;
            margin-bottom: 0.35714em;
            color: #717c8e;
        }
            #userform.userParams label, #userform.userParams label.w100p span {
                float: left;
                display: block;
                width: 180px;
                height: 32px;
                line-height: 32px;
                margin-bottom: 0;
            }
            
            .main-content .userParams input, .main-content .userParams textarea, .main-content .userParams select, .main-content .userParams fieldset {
                float: right;
                width: 63%;
                height: 32px;
            }
        
            #userform label.w100p span,
            #userform label.w100p input {
                font-size: 1em;
            }
                
            #userform label.mandatory:after {
                content: "!";
                float: right;
                color: #f00;
                font-weight: bold;
            }
            
            #userform label i.inner-icon {
                right: 20px;
                top: 7px;
            }
        
        #userform .form-group.display .form-row {
            margin-top: 0;
            margin-bottom: 0;
        }
        
        #userform .form-group.display h2+.form-row {
            margin-top: 1.125em;
        }

        #userform .form-row > span {
            padding: 3px;
            box-sizing: border-box;
            color: #000 !important;
            padding: 0.5em;
            font-size: 0.875em;
            line-height: normal;
        }
        
        #userform .button span.count {
            display: block;
            margin: .25em auto;
            font-weight: bold;
        }
        
        #userform .optional .form-row {
            display: none
        }
        
        #userform .optional h2 {
            cursor: pointer
        }
        
        #userform .optional h2:after {
            font-family: "FontAwesome";
            content: "\f063";
            float: right;
            margin-right: 14px;
            color: #aaa;
        }
        #userform .optional.open h2:after {
            content: "\f062";
        }
        
            #userform .optional h2:hover:after {
                color: inherit
            }
        
        #userform .datepickerCon {
            position: relative;
        }
            
            #userform .datepickerCon:after {
                font-family: "FontAwesome";
                content: "\f073";
                position: absolute;
                top: 4px;
                right: 25px;
            }

/* Inline-Hilfe */
div.help {
    display: none;
    clear: both;
    width: 63%;
    float: right;
    margin: 0;
    font-size: 0.875em;
    padding-top: 1.125em;
    position: relative;
}
    div.help * {
        font-size: 1em;
    }
    
    span.helpTrigger,
    span.noHelp {
        float: left;
    }
    
    span.helpTrigger i {
        color: #999
    }
    span.helpTrigger:hover i {
        color: inherit
    }
    
    span.helpTrigger {
        cursor: pointer
    }


/* Bestellung bearbeiten - Bestellinformationen */

#orderInfo * { font-size: 12px }

#orderInfo th:not(:first-child),
#orderInfo td:not(:first-child) {
        border-left: 1px solid #ccc;
        padding-left: 2em;
}

    #orderInfoMisc {
        padding-right: 2em;
    }

        #orderInfoMisc > span {
            display: block;
            text-align: right
        }
        
           #orderInfoMisc > span strong {
                float: left
           }

form.dataEdit {}


    .toggleEdit .fa,
    .editComment .fa,
    .saveComment .fa {
        display: inline-block;
        line-height: 1.5625em;
        height: 1.5625em;
        width: 1.5625em;
        margin-left: .5em;
        border: 1px solid #ccc;
        border-radius: 4px;
        color: #222;
        background: #f3f3f3;
        text-align: center;
        cursor: pointer;
    }

        .toggleEdit.view .cancel,
        .toggleEdit.view .save { display: none }
        .toggleEdit.view .edit { display: inline-block }
        
        .toggleEdit.edit .cancel,
        .toggleEdit.edit .save { display: inline-block }
        .toggleEdit.edit .edit { display: none }
    
    form.dataEdit.view label span {
        display: none;
    }
    
    form.dataEdit.view input {
        line-height: 1.5625;
        border: none;
        box-shadow: none;
        padding: 0;
        color: #000 !important;
    }
    
        form.dataEdit.view input.ib {
            display: inline-block
        }
        
        /*form.dataEdit.view input[value=""] {
            display: none
        }*/

    form.dataEdit.edit label span {
        display: inline-block;
        line-height: 28px;
        width: 25%;
        margin-bottom: 3px;
    }
    form.dataEdit.edit input {
        margin-bottom: 3px
    }
    

    

/* Bestellung bearbeiten - gekürzte Bemerkung */
#emCon th, #emCon td { padding-bottom: 30px }
em { max-width: 600px }
em.open { display: block; cursor: pointer }
em.collapsed { display: block; position: absolute; height: 45px; overflow: hidden; cursor: pointer; }
em.collapsed:after {
    content: "";
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 45px;
    display: block;
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 20%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 20%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 20%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}

/* Bestellung bearbeiten - Toolbar */

#userform.toolbar {
    margin: 2em 0;
}
    #userform.toolbar .form-group {
        padding: 0;
    }

    #userform.toolbar .button {
        padding: 0.64286em 1.42857em;
    }
    
    #userform.toolbar.medium .button {
        font-size: 0.875em
    }
        #userform.toolbar.medium .button i {
            font-size: 1.125em;
        }

    #userform.toolbar .button.status-green:hover {
        border: 1px solid #1f4300;
    }

    #userform.toolbar .button.status-red:hover {
        border: 1px solid #3f0000;
    }
 
/* Bestellung bearbeiten - Kommentar */

.editable.disabled { position: relative }
.editable.disabled:after {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff url(/tradepro/layout/wait.gif) center no-repeat;
    opacity: .5;
}

#comment[readonly="readonly"],
#comment.readOnly {
    border: none;
    padding: 0;
    box-shadow: none;
}
    
/* Bestellung bearbeiten - Direktbestellung */

.addProduct #FFqueryDO {
    width: 330px;
}

.addProduct select#directorder {
    width: 100%;
}

.addProduct #MengeWert {
    width: 50px;
}

.addProduct button {
    margin: 0;
}

span.suggestTextQuery,
span.suggestTextQueryTyped {
    font-size: 12px;
    font-weight: normal
}

/* Bestellung bearbeiten - Tabelle */

#orderInfo td.orderStatus {
    padding: 0.375em 0.625em 
}

td.artPos {
    color: #888;
}

td.rowPriceline {
    white-space: nowrap;
}

table.dataTable tbody td.select-checkbox:before, 
table.dataTable tbody th.select-checkbox:before {
    margin-top: 0;
    border: 1px solid #666;
    border-radius: 2px;
}
table.dataTable tr.selected td.select-checkbox:after,
table.dataTable tr.selected th.select-checkbox:after {
    margin-top: -8px;
    color: #0075BC;
}


table.dataTable.cell-border tbody tr.tfoot th,
table.dataTable.cell-border tbody tr.tfoot td {
    border: none;
    background: none;
}

table.dataTable.stripe tbody tr.tfoot.even,
table.dataTable.display tbody tr.tfoot.even,
table.dataTable.stripe tbody tr.tfoot.odd,
table.dataTable.display tbody tr.tfoot.odd {
    background-color: #fff
}

/*
.DataTable #ContentTable_info { float:left; }
.DataTable #ContentTable_filter { position: absolute; right: 0; top: 10px;}
.DataTable #ContentTable_length { clear:both; text-align:right; margin:5px 0; }
*/
.DataTable #ContentTable thead th.sorting { background:url(/tradepro/shop/buttons/bt_sortboth.gif) right center no-repeat; }
.DataTable #ContentTable thead th.sorting_asc { background:url(/tradepro/shop/buttons/bt_sorta2.gif) right center no-repeat; }
.DataTable #ContentTable thead th.sorting_desc { background:url(/tradepro/shop/buttons/bt_sortd2.gif) right center no-repeat; }
.DataTable #ContentTable thead th { background-color: #ff0000 !important; color: #fff; font-size: 14px; font-weight: 500; }

table.dataTable thead th,
table.dataTable thead td {
  padding: 8px 10px;
}
#tableCon {
    opacity: 0;
}
/*
.DataTable #ContentTable_paginate { margin:10px 0 0 0; padding:0; position:relative; text-align:center; width:100%; }
.DataTable #ContentTable_paginate #ContentTable_first { display:none; }
.DataTable #ContentTable_paginate #ContentTable_last { display:none; }
.DataTable #ContentTable_paginate #ContentTable_previous { position:absolute; left:0; top:0; }
.DataTable #ContentTable_paginate #ContentTable_next { position:absolute; right:0; top:0; }
.DataTable #ContentTable_paginate .paginate_active { margin:0 2px; color:black; }
.DataTable #ContentTable_paginate .paginate_button { margin:0 2px; color:#006BBB; }
.DataTable #ContentTable_paginate .paginate_button:hover { color:black; text-decoration:underline; cursor:pointer; }
*/
.dataTables_wrapper .dataTables_length, 
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_filter {
    display: block;
    height: 40px;
    line-height: 40px;
    margin-bottom: 1em;
}

/*.dataTables_wrapper .dataTables_length {
    width: 6%;
}*/

.dataTables_wrapper .dataTables_paginate {
  float: left;
  text-align: left;
  padding-top: 0;
}
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 0 1em;
        height: 40px;
    }
        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
            visibility: hidden;
        }

    .dataTables_paginate span {
        height: 40px;
        line-height: 40px;
        display: inline-block;
    }

.dataTables_wrapper .dataTables_info {
    display: block;
    clear: none;
    float: left;
    height: 40px;
    line-height: 40px;
    margin-bottom: 1em;
    padding: 0;
}
.dataTables_wrapper .dataTables_filter {
    float: right;
}

.dataTables_wrapper .dt-buttons {
    margin-top: 1em;
}
    .dataTables_wrapper .dt-buttons:before {
        content: "Daten exportieren:";
        position: relative;
        display: block;
        float: left;
        box-sizing: border-box;
        margin-right: 0.333em;
        padding: 0.5em 1em;
        font-size: 1em;
        background-color: #e9e9e9;
        border: 1px solid #e9e9e9;
        top: -1px;
    }  
 
/* Export */

table.ContentTable.ExportTable th {
    font-weight: normal
}

/* ************************************
 * Statistik
 * ********************************** */
 
    canvas{
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    #chartjs-tooltip {
        opacity: 1;
        position: absolute;
        background: rgba(0, 0, 0, .7);
        color: white;
        border-radius: 3px;
        -webkit-transition: all .1s ease;
        transition: all .1s ease;
        pointer-events: none;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        z-index: 20000;
    }

    .chartjs-tooltip-key {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-right: 10px;
    }
        
    #sGen .rs-column label {
        position: absolute; 
        display: block;
        width: 100%;
        font-weight: bold;
        line-height: 2em;
    }
    
    .fixedHeight .rs-column {
        position: relative;
        display: block;
        height: 9em;
    }
    
    #chartCon { 
        position: relative;
        padding: 0 0 3em 0;
        min-height: 400px;
    }
        #chartCon p {
            margin: 0;
        }
    
    #chartTools {
        display: none;
        clear: both;
        margin: 0; 
        padding-top: 3em
    }
    
        #nullLabels .fa-eye-slash, #shortLabels .fa-minus-square { display: inline-block }    
        #nullLabels .fa-eye, #shortLabels .fa-plus-square { display: none }
        #nullLabels.hideLabels .fa-eye-slash, #shortLabels.hideLabels .fa-minus-square { display: none }    
        #nullLabels.hideLabels .fa-eye, #shortLabels.hideLabels .fa-plus-square { display: inline-block }
        
    #loader {
        background: #ffffff7f url(/tradepro/shop/layout/wait.gif) center center no-repeat;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }

    #sGenTableCon div.dt-buttons {
        clear: both;
    }