* {
    padding: 0;
    margin: 0;
}

a{
    text-decoration:none;
    font-weight:bold;
    color: #2b4393;
}
a:hover{
    text-decoration:underline;
}


body {
    background: #f0f0f0;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    line-height: 18px;
    color: #404656;
    padding-top: 90px;
}

@media print {
    .noprint, #navbar, #footer, .headline {
        display: none;
    }
    body {
        background: none !important;
        -webkit-print-color-adjust:exact;
    }
}

.clear {
    display: table;
    width: 100%;
}

img {
    border: none;
}

.header {
    position: absolute;
    width: 100%;
    top: 0px;
    height: 115px;
    background: #fff;
    border-bottom:1px solid #404656;
}

.header .line{
    position: relative;
    top: 89px;
    height:2px;
    width: 100%;
    z-index: 10;
}

.header .logo{
    position: relative;
    top: 18px;
    right: 60px;
    float: right;
    z-index: 100;

}

#navBar{
    font-size: 14px;
    font-weight: 100;
    padding: 10px 0 0 65px;
    color: #fff;
}

#navBar li{
    padding: 5px 10px 5px 10px;
    float:left;	
    list-style: none;
}

#header h1, .headline h1, .headline .topic {
    font-size: 20px;
    color: #404656;
    font-weight: 100;
    margin:0px;
}

h2, h3{
    color: #404656;
}

#header h1 a {
    color: #0A6380;
    text-decoration: none;
}

#header h1 a:hover {
    color: #222;
    text-decoration: none;
}

h2, h2 a {
    color: #000;
    font-size: 19px;
    font-weight: 100;
    padding: 0 0 20px 0;
    letter-spacing: -1px;
    line-height: 12px;
}

.left {
    width: 1500px;
    min-height:400px;
    margin-left: auto;
    margin-right: auto;
}

.headline, .headlineBottom{
    width: 1460px;
    min-height: 30px;
    background:#fff;
    padding:20px;
    border-bottom: 5px solid #1cbae6;
    -moz-box-shadow: 0px 0px 10px #ccc;
    -webkit-box-shadow: 0px 0px 10px #ccc;
}

.headlineBottom{
    border-top: 5px solid #1cbae6;
    border-bottom: none !important;
}


.mainContent{
    /*width: 1160px;*/
    background:#fff;
    padding:20px;
    border-bottom: 5px solid #1cbae6;
    -moz-box-shadow: 0px 0px 10px #ccc;
    -webkit-box-shadow: 0px 0px 10px #ccc;
}



.leftSide{
    width:580px;
    padding:20px;
    margin:0px;
}

.rightSide{
    width:580px;
    padding:20px;
    margin:0px;
}



ul#twoRows, ul#threeRows {
    list-style-type: none;
    width: 100%;
}

ul#twoRows li{
    width: 50%;
}

ul#threeRows li:first-child{
    width: 20% !important;
}

ul#threeRows li{
    width: 40%;
}

ul#twoRows li, ul#threeRows li {
    display: block;
    float:left;
    margin:0px 0 75px 0;
}

table{
    margin:0px;
}

.left h2, .left h2 a {
    color: #000;
    font-size: 22px;
    letter-spacing: -1px;
    font-weight: 100;
    padding: 15px 0 15px 0;
}

.right {
    width: 160px;
    float: left;
    margin:60px 0 0 40px;
    padding: 0px;

}


.right h2 {
    color: #404656;
    line-height: 30px;
    font-size: 19px;
    font-weight: 100;
    letter-spacing: -1px;
}



#footer {
    text-align: center;
    color: #fff;
    background: #2b4393;
    font-size: 11px;
    padding: 5px;
    border-top:1px solid #BCBCBC;
    width:100%;
    position:fixed;
    bottom:0px;
    z-index: 10;
}

#footer p {
    width: 100%;
    margin-left: 30px;
}

#footer a {
    color: white;
    font-weight: normal;
    position: absolute;
    right: 30px;
}

* html #main { height: 100%; }

#main{
    padding: 0px 0 50px 0;
    min-height: 100%;
}

.list{
    padding:10px;
}

.toggle{
    width:1173px;
    background:#fff;
    padding:25px 0 25px 0;
    margin: 10px 0 10px 0;
    -moz-box-shadow: 0px 0px 20px #ccc;
    -webkit-box-shadow: 0px 0px 20px #ccc;
}

.date{
    text-align: center;
    min-width: 175px; 
    display:inline-block; 
    font-size:14px; 
    font-weight:bold;
}

.date_calendar{
    text-align: right;
    min-width: 100px; 
    margin-right: 5px;
    display:inline-block; 
    font-size:14px; 
    font-weight:bold;
}

.mute {
    color: #bbb;
}

.ui-state-default {
	background: #e3e3e3;
	box-shadow: none;
}

.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

.ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield {
    background: #fff;
    box-shadow: none;
}

.ui-widget-header, .ui-widget-header .ui-state-default, .ui-datepicker .ui-datepicker-header, .ui-selectonemenu .ui-selectonemenu-trigger,
button.ui-widget.ui-state-default {
	background: #e3e3e3;
}

.ui-datepicker .ui-datepicker-current-day .ui-state-highlight, .ui-datepicker .ui-datepicker-current-day .ui-state-default {
	background: #2b4393;
}

.ui-datepicker {
	padding: 0;
}

.ui-datepicker .ui-datepicker-calendar .ui-state-default {
	color: #4085C2;
	text-align: center;
}

.ui-paginator .ui-paginator-rpp-options {
    background: #fff;
    padding: 4px 3px;
}

.ui-paginator .ui-paginator-page {
    background: #fff;
}

.terminal-info #toggle-details {
    color: #fff;
}

.ui-datatable-odd {
	background: none repeat scroll 0 0 #f2f2f2;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
	border: 1px solid #fff;
	background: #2b4393;
}

.ui-datatable .ui-datatable-data tr.ui-state-hover {
    border-color: #fff;
    color: #fff;
    text-shadow: 1px 1px 1px #333;
    background: #2b4393;
}

.ungelesen.ui-state-hover {
    font-weight: bold !important;
}

.ui-chkbox-icon.ui-icon {
	background-color: #fff;
}

.ui-inputfield.ui-state-focus {
	box-shadow: 1px 1px 2px #404656;
}

.ui-selectonemenu-panel .ui-state-hover {
	box-shadow: none;
	color: #fff;
	background: #2b4393;
}

/****************************************************************************
 *                      			 ICONS   			 	                *
 ****************************************************************************/

.icons{
    font-size: 1.33em !important;
    color: #747474;
}

.fa-times.icons{
    font-size: 1.5em !important;
}

.fa-caret-down.icons, .fa-caret-up.icons{
    font-size: 2em !important;
}

.add { background-image: url(../resources/images/add2.png) !important;
}

.delete  { 
    background: url(../resources/images/delete.png) no-repeat  !important;
    margin-left:50px;
}
.delete a:hover { 
    background: url(../resources/images/delete2.png) !important;

}
.reset  { 
    background: url(../resources/images/reset.png) no-repeat  !important;
    border: 0;
    position: relative;
    top: 1px;
    right: 25px;
}
.reset:hover  { 
    background: url(../resources/images/reset_hover.png) no-repeat  !important;
}
.edit { background-image: url(../resources/images/edit.png) !important;
}
.change { background-image: url(../resources/images/change.png) !important;
}
.user {
    background: url(../resources/images/user.png) no-repeat !important;
    height:16px;
    width:16px;
    padding-right:5px;
}
.user_w {
    background: url(../resources/images/user_w.png) no-repeat !important;
    height:16px;
    width:16px;
    padding-right:5px;
}
.clock { 
    background: url(../resources/images/clock.png) no-repeat !important;
    height:16px;
    width:16px;
    padding-right:5px;
}
.clock_w { 
    background: url(../resources/images/clock_w.png) no-repeat !important;
    height:16px;
    width:16px;
    padding-right:5px;
}
.job {
    background: url(../resources/images/job.png) no-repeat !important;
    height:16px;
    width:16px;
    padding-right:5px;
}
.job_w {
    background: url(../resources/images/job_w.png) no-repeat !important;
    height:16px;
    width:16px;
    padding-right:5px;
}
.options {
    background: url(../resources/images/options.png) no-repeat !important;
    height:16px;
    width:16px;
    padding-right:5px;
}
.options_w {
    background: url(../resources/images/options_w.png) no-repeat !important;
    height:16px;
    width:16px;
    padding-right:5px;
}
.save { background-image: url(../resources/images/save.png) !important;
}

.ask { background-image: url(../resources/images/question.png) !important;
}

.search { background-image: url(../resources/images/search.png) !important;
}
.accept {
    background: url(../resources/images/accept.png) no-repeat !important;
    padding-right:5px;
}
.remove {
    background: url(../resources/images/remove.png) no-repeat !important;
    height:16px;
    width:16px;
    padding-right:5px;
}

.pause { background-image: url(../resources/images/pause.png) !important;
}

.kommen { background-image: url(../resources/images/kommen.png) !important;
}

.gehen { background-image: url(../resources/images/gehen.png) !important;
}

.arrowLeft { background-image: url(../resources/images/arrow_left.png) !important;
}
.arrowRight { background-image: url(../resources/images/arrow_right.png) !important;
}
.printIcon{background-image: url(../resources/images/print.png) !important;
           background-size: 16px 16px;
}
.users { background-image: url(../resources/images/users.png) !important;
}
.users_w { background-image: url(../resources/images/users_w.png) !important;
}
.role { background-image: url(../resources/images/role.png) !important;
}
.role_w { background-image: url(../resources/images/role_w.png) !important;
}
.mail { background-image: url(../resources/images/mail.png) !important;
}
.mail_w { background-image: url(../resources/images/mail_w.png) !important;
}
.answer { background-image: url(../resources/images/answer.png) !important;
}
.forward { background-image: url(../resources/images/forward.png) !important;
}
.input{
    margin:0;
    padding:4px;
}

@-moz-document url-prefix() { 
    .input {
        font-size:14px;
        padding: 4px 4px 6px 4px;
    }
}

/****************************************************************************
 *                       Primefaces Komponenten			                   *
 ****************************************************************************/

.ui-icon.fa {
    text-indent:0px;
    background-image:none;
    top: 57%;
    font-size: 13px !important;
}

.ui-icon.fa.fa-lg {
    text-indent:0px;
    background-image:none;
    top: 55%;
    font-size: 20px !important;
}

.ui-chkbox, label{
    margin-right: 5px;
    vertical-align: middle;
}

.ui-button-text{
    font-size:12px;
}
.ui-message-error{
    font-size: 12px;
    line-height: 18px;
}

.ui-datatable{
    font-size:0.8em;
}

.ui-datatable.ui-datatable-resizable table{
    width: 100% !important;
}

.ui-datatable thead th, .ui-datatable tbody td, .ui-datatable tfoot td{
    text-overflow: ellipsis;
}

.ui-dt-c{
    width: 100% !important;
}

#dialog .ui-dialog {
    width: auto !important;
    max-width: 100%;
}

.ui-dialog-content{
    width: 100%;
}

.ui-picklist .ui-picklist-list{
    width: auto !important;
}

.monatsAnsicht{
    text-align: center;
    font-size: 0.9em !important;
}


.monatsAnsicht .tableColumn{
    min-width: 50px !important;
}

.monatsAnsicht td{
    padding: 0px !important;
}

.monatsAnsicht th{
    line-height: 1.5em;
    padding: 2px 0px !important;
}

.monatsAnsicht .ui-inputfield{
    -moz-box-shadow:  none !important;
    -webkit-box-shadow:  none !important;
    box-shadow: none !important;
    width: 40px;
}

.editierteBuchung{
    color: #5097f2 !important;
}

.buchungskorrektur{
    font-weight: bold;
    text-decoration: underline;
    color: #5cb85c !important;
}

.monatsAnsicht .ui-state-disabled{
    opacity: 1;
    filter: Alpha(Opacity=100);
}

.monatsAnsicht a{
    text-decoration: underline;
}

/* BUG FIX - should be checked and removed with 3.0 Production */
.ui-dialog .ui-dialog-titlebar {
    height: auto !important;
}

.fc-button-prev{
    background-image: url(../resources/images/arrow_left.png) 10 0 no-repeat !important;
}
.fc-button-next { 
    background-image: url(../resources/images/arrow_right.png) 0 0 no-repeat !important;
}

.noheader table thead tr th.ui-state-default {
    display: none;
}

.norecords tbody tr {
    display: none;
}

table th .taetigkeit{
    width:150px;
    text-align: center;
}

.tableIcon{
    padding: 4px 3px !important;
    width: 20px !important;
    text-align: center;
}

.seperator{
    margin:15px 0 15px 0;
    border: 1px solid #1cbae6;
}


.ui-icon-pencil {
    position:relative;
    font-family: FontAwesome;
    top:0;
    left:-5px;
    content: "\25AE";
}

.red{
    color:#fff;
    background:#e40f0f !important;
}

.green{
    color:#fff;
    background:#18b80c;
    text-shadow: none !important;
}

.grey{
    color:#c0c0c0;
    background:#e1e0e0;
    text-shadow: none !important;
}

.feiertag, .feiertag a{
    color:#fff !important;
    background:#18b80c !important;
}

.weekend{
    background:#efefef;
}

.noWeekend{
    background:#fff;
}

.greenImg {
    background: url(../resources/images/green.png) no-repeat !important;
    padding:7px 8px 0 0px;
    margin:0 0 8px 8px;
}
.redImg {
    background: url(../resources/images/red.png) no-repeat !important;
    padding:7px 8px 8px 0px;
    margin:0 0 8px 8px;
}

separator-line {
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1px dashed black;
}

.datatable th div.ui-dt-c, .datatable .ui-datatable-data td div.ui-dt-c, .datatable .ui-datatable-data-empty td div.ui-dt-c, .datatable tfoot td div.ui-dt-c{
    padding: 4px 0px !important;
}

.datatable .cell{
    height: 100%; 
    padding: 4px 0 !important;
    width: 100%; 
}

.datatable th{
    padding: 4px 0px !important;
}
.datatable th.tableIcon{
    padding: 4px 7px !important;
}
.datatable th.stammdatenActions {
    width: 60px;
}

.stammdaten-dropdown {
    min-width: 177px;
}

.stammdaten-dropdown label {
    min-width: 195px;
}

.datatable .ui-corner-top{
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

.mitarbeiterZeitplan .ui-chkbox{
    margin: 0px auto !important;
}


.selectedRow{
    color: #fff;
    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));
}

/****************************************************************************
 *                       CSS für Arbeitszeit				                    *
 ****************************************************************************/

.arbeitszeit .cell{
    height: 100%; width: 50%; font-weight: bold; 
    padding: 4px 0 !important;
    font-size: 13px; float: left;
}
.arbeitszeit .ui-widget-header{

}

/****************************************************************************
 *                       CSS für Tageswerte				                    *
 ****************************************************************************/

.tageswerte{
    text-align: center;
    font-size: 10px;
}

.tageswerte thead td{
    color: #4f4f4f !important;
    white-space: nowrap;
}

.tageswerte .cell{
    height: 100%; width: 50%; font-weight: bold; 
    padding: 4px 0 !important;
    font-size: 13px; float: left;
}
.tageswerte tbody td{
    padding: 0px !important;
}


/****************************************************************************
 *                       CSS für das Modul Urlaubsplaner                    *
 ****************************************************************************/

.urlaubsplaner{
    font-size: 0.8em;
    text-align: center;
}


.urlaubsplaner .tableColumn{
    width: 30px !important;
}

.urlaubsplaner td{
    padding: 0px !important;
}

.urlaubsplaner th{
    line-height: 1.5em;
    padding: 2px 0px !important;
}


.urlaubsplaner .cell{
    font-size: 0.8em;
    line-height: 30px;
    font-weight: bold; 
}

.urlaubsplaner .cell .beantragt{
    border: 1px dashed #fff;
    padding: 5px;
    background-image: url(../resources/images/schraffur_w.png);
}

.urlaubsplaner .cell .genehmigt{
    border: 1px dashed #18b80c;
    padding: 5px;
}

.urlaubsplaner .cell .abgelehnt{
    border: 1px dashed #f890b2;
    padding: 5px;
}

.urlaubsplaner .cell .loeschen{
    border: 1px dashed #f890b2;
    padding: 5px;
    background-image: url(../resources/images/schraffur_rot.png);
}

.urlaubsplaner .woende{
    background: #f1f1f1;
}

.urlaubsplaner .heute{
    background: #fff;
    color:  #0088cc;
}

.schraffur{
    background-image: url(../resources/images/schraffur.gif);
    border: 1px dashed #f890b2;
}

#cal_input{
    font-weight: bold !important;
}

/****************************************************************************
 *                       CSS für das Modul Terminal                         *
 ****************************************************************************/

.jqclock {
    margin-bottom: 25px;
}

.clockdate {
    float:left;	
}

.clocktime {
    float: right;
}

.terminal-button-group {
    margin:0px auto;
    width: 700px;

}

.terminal-button-group .ui-button-text-icon-left .ui-button-text{
    padding: 0px !important;
}

.terminal-button-group .ui-widget-content{
    border: none !important;
}

.terminal-button {
    width: 86%;
    min-height: 100px;
    margin: 15px 0;
    padding: 25px 5px !important;
}

.terminal-button .ui-button-text {
    font-size: 18px;
}

.terminal-info {
    border-color: #bce8f1;
    color: #fff;
    background-color: #1cbae6;
    padding: 8px 35px 8px 14px;
}

/*
.terminal-button-kommen {
        border: 1px solid #a8a8a8 !important;
        background: #c4c4c4 url("/zmi-webclient/javax.faces.resource/images/ui-bg_highlight-hard_80_c4c4c4_1x100.png.jsf?ln=primefaces-aristo") 50% 50% repeat-x !important;
        background: #c4c4c4 linear-gradient(top, rgba(255,255,255,0.8), rgba(255,255,255,0)) !important;
        background: #c4c4c4 -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0))) !important;
        background: #c4c4c4 -moz-linear-gradient(top, rgba(255,255,255,0.8), rgba(255,255,255,0)) !important;
        font-weight: bold !important;
        color: #4f4f4f !important;
        text-shadow: 0px 1px 0px rgba(255,255,255,0.7) 
}

.terminal-button-gehen {
        border: 1px solid #a8a8a8 !important;
        background: #c4c4c4 url("/zmi-webclient/javax.faces.resource/images/ui-bg_highlight-hard_80_c4c4c4_1x100.png.jsf?ln=primefaces-aristo") 50% 50% repeat-x !important;
        background: #c4c4c4 linear-gradient(top, rgba(255,255,255,0.8), rgba(255,255,255,0)) !important;
        background: #c4c4c4 -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0))) !important;
        background: #c4c4c4 -moz-linear-gradient(top, rgba(255,255,255,0.8), rgba(255,255,255,0)) !important;
        font-weight: bold !important;
        color: #4f4f4f !important;
        text-shadow: 0px 1px 0px rgba(255,255,255,0.7) 
}
*/

.terminal-button-icon-kommen {
    position: absolute !important;
    top: 50% !important;
    margin-top: -12px !important;
    margin-left: 30px !important;
    width: 24px !important;
    height: 24px !important;
    background-image: url("/zmi-webclient/javax.faces.resource/button_kommen.png.jsf?ln=images")  !important;
}

.terminal-button-icon-gehen {
    position: absolute !important;
    top: 50% !important;
    margin-top: -12px !important;
    margin-left: 30px !important;
    width: 24px !important;
    height: 24px !important;
    background-image: url("/zmi-webclient/javax.faces.resource/button_gehen.png.jsf?ln=images")  !important;
}

.terminal-button-icon-loading {
    position: absolute !important;
    top: 50% !important;
    margin-top: -12px !important;
    margin-left: 30px !important;
    width: 24px !important;
    height: 24px !important;
    background-image: url("/zmi-webclient/javax.faces.resource/ajaxloading.gif.jsf?ln=images")  !important;
}

.terminal-button-no-icon {
    width: 24px !important;
    height: 24px !important;
    background-image: url("/zmi-webclient/javax.faces.resource/button_no-icon.png.jsf?ln=images")  !important;
}

.terminal-bottom-info {
    text-align: center;
    margin-top: 20px;
}


.footnote{
    font-size: 10px;
    line-height: 1em;
    font-weight: normal;
}

/****************************************************************************
 *                       CSS für Mitarbeiter                                *
 ****************************************************************************/
.panelColumns td {
    vertical-align: top; 
}

.labelRight {
    color: #666;
    text-align: right;
}

.labelRight .legend{
    font-weight: bold;
    font-size: 1.1em;
}

#mitarbeiter-form label {
    color: #666;
}

.mitarbeiterDatum input {
	width: 160px;	
}

/****************************************************************************
 *                       CSS für die Anzahl neuer Nachrichten               *
 ****************************************************************************/
.badge {
    position: relative; 
    top: -3px !important; 
    background-color: #f89406 !important;
    margin-right: 5px;
    padding: 1px 9px 2px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    font-size: 11.844px;
    font-weight: bold;
    line-height: 14px;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    vertical-align: baseline;
}

/****************************************************************************
 *                       CSS für die Anmeldung                              *
 ****************************************************************************/
li a:hover .abmelden{
    text-decoration: underline;
}

#login{
    padding: 50px 0 50px 0;
    min-height: 100%;
}
.loginForm {
    padding: 25px;
    margin: 0 auto;
    width: 400px;
    background-color: white;
    -moz-box-shadow: 0px 0px 10px #ccc;
    -webkit-box-shadow: 0px 0px 10px #ccc;
}

.loginForm h1 {
    color: #4D9EE5;
    font-weight: 700;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #4085C2;
}

.loginForm input[type="text"],
.loginForm input[type="password"] {
    padding:4px; 
    font-size:12px;
    margin: 5px 0;
}

.loginForm input[type="submit"] {
    margin-top: 15px;
    padding: 3px 6px;
}

.smallFont {
    font-size: 85%;
    font-weight: normal;	
}

.errorMessage {
    color: red;
    font-size: 85%;
    font-weight: normal;	
}

.infoMessage {
    color: #395AA9;
    font-size: 85%;
    font-weight: normal;	
}

.leereVertreter{
    background: #fff url(../resources/images/user_48.png) no-repeat center center;
    min-height:220px;
    margin:0px 0 0 0px;
    text-align:center;
    font-size:18px;
    color:#ccc;  
    -moz-box-shadow: 0px 0px 10px #ccc;
    -webkit-box-shadow: 0px 0px 10px #ccc;
}

.leererAntrag{
    background: #fff url(../resources/images/workflow_48.png) no-repeat center center;
    min-height:220px;
    margin:0px 0 0 0px;
    text-align:center;
    font-size:18px;
    color:#ccc;  
    -moz-box-shadow: 0px 0px 10px #ccc;
    -webkit-box-shadow: 0px 0px 10px #ccc;
}

.leereNachricht{
    background: #fff url(../resources/images/mail_48.png) no-repeat center center;
    min-height:220px;
    margin:0px 0 0 0px;
    text-align:center;
    font-size:18px;
    color:#ccc;  
    -moz-box-shadow: 0px 0px 10px #ccc;
    -webkit-box-shadow: 0px 0px 10px #ccc;
}

.selectedNone{
    background: #fff ;
    min-height:220px;
    margin:0px 0 0 0px;
    text-align:center;
    font-size:18px;
    color:#ccc;  
}

.nachricht{
    min-height:220px;
    margin:0px 0 0 0px; 
    background:#fff;
    -moz-box-shadow: 0px 0px 10px #ccc;
    -webkit-box-shadow: 0px 0px 10px #ccc;
}

.ungelesen{
    background-color: #f89406;
    font-weight: bold;
    color: #fff;
}

.nachricht table{
    width: 100%;
    table-layout: fixed;
}

.nachricht .subtext{
    margin-left: 5px;
    font-size: 9px;
    font-weight: bold;
    color: #ccc;
    font-style: italic;
}

.nachricht td.titleCol1{
    font-size: 0.9em;
    color: #8b8b8b;
    font-weight: bold;
    text-align: right;
    width: 200px;
}

.nachricht td.titleCol1 {
    white-space: nowrap; 
    overflow: hidden; 
    -o-text-overflow: ellipsis; 
    -ms-text-overflow: ellipsis; 
    text-overflow: ellipsis; /* or "clip" */ 
}


.nachricht .titleCol2{
    width: 70%;
    padding-left:20px;
    white-space: nowrap; 
    overflow: hidden; 
    -o-text-overflow: ellipsis; 
    -ms-text-overflow: ellipsis; 
    text-overflow: ellipsis; /* or "clip" */ 
}

.nachricht .titleCol2:hover {
    text-overflow: clip;
    white-space: normal;
    word-break: break-all;
}

.nachricht .von{
    color: #8b8b8b;
    font-weight: bold;
}

.no-report-available,
.zmi-service-unavailable {
    font-size:13px;
    border: 1px solid;
    color: #00529B;
    background-color: #BDE5F8;
    padding:15px 10px 15px 10px;
}


/****************************************************************************
 *                       CSS für Datatables                           *
 ****************************************************************************/

.col40{
    width: 40%;
}

.col30{
    width: 30%;
}
.col20{
    width: 20%;
}

.nav li a {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

.topHeader{
    position: relative;
    background: #f2f5f9; 
    width: 100%;
    padding: 7px 9px;
    border: 1px solid #a8a8a8;
    min-height:  25px;
}

.topHeader .text{
    color: #666; 
    display: inline; 
    font-size: 1.17em; 
    font-weight: bold
}



/****************************************************************************
 *                       CSS für Labels                           *
 ****************************************************************************/

.labels{
    font-size:14px; 
    font-weight:bold;
    margin-bottom: 15px;
}

.labels input, .labels div{
    margin-bottom: 15px;
}

.labels form{
    display: inline !important;
}

.control-label {
    float: left;
    width: 100px;
    padding-top: 5px;
    text-align: right;
    margin-right: 25px;
}

.control-input{
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}

.headline .tip{
    font-size:14px; 
    color: red; 
    font-weight:bold;
    margin-right: 15px;
}

/****************************************************************************
 *                       CSS für Tooltip                           *
 ****************************************************************************/

.tooltip .bold{
    color: #8b8b8b;
    font-weight: bold;
    margin-right:10px;
    float: right;
}

.info{
    position: relative;
    top: 2px;
    left: 5px;
    cursor: help;
    font-weight: bold;
    padding: 1px 5px 0px 5px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #666;
    color: #666;
}

.infoUrlaub{
    top: 2px;
    left: 5px;
    cursor: pointer;
    font-weight: bold;
    padding: 1px 5px 0px 5px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #666;
    color: #666;
}


.scrollup{
    position: fixed;
    width:40px;
    height:40px;
    bottom:50px;
    right:50px;
    font-weight: bold;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #666;
    color: #666;
    background: #fff;
    opacity:0.3;
    display: none;
    background-image: url(../resources/images/scrollup.png);
    background-size: 40px 40px;
    background-repeat:no-repeat;
}

/****************************************************************************
 *                       CSS für Rollenkonfig                           *
 ****************************************************************************/

.rolle .ui-selectonemenu-label{
    line-height: 1em !important;
}

.rolle table tbody tr{
    line-height:25px;
}

.colStyle1 { 
    width: 25px;
}
.colStyle2 { 
    width: 160px;
    font-weight:bold;
}
.colStyle3 { 
    width: 280px;
}
.colStyle4 { 
    width: auto;
}

.colStyle4fix { 
    width: 200px;
}

.colStyle4 .ui-checkbox .ui-checkbox-box{
    padding:0px;
}

.colStyle5 { 
    width: 300px;
    font-weight:bold;
}
.colStyleEigeneDaten { 
    width: 300px;
    padding-left: 100px;
    font-weight:bold;
}


/****************************************************************************
 *                       CSS für Auftragsbuchung                           *
 ****************************************************************************/

.buchungsWizard{
    width: 100%;	
}

.buchungsWizard td, th {
    display: table-cell;
    vertical-align: top;
}

.leftElements{
    width: 60%;
    padding-right: 25px;
}

.rightElements{
    width: 40%;
}

.auftrag{
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 25px;
}

.online{
    position: relative;
    display: block;
    width: 100%;
}

.auftrag .ueberschrift{
    font-size: 0.8em;
    font-weight: bold; 
    text-align: right;
    width: 30%;
}

.auftrag .text{
    text-align: left;
    width: 70%;
}


.ui-autocomplete.antragMitarbeitersuche input{
    width: 350px !important;
}

.korrektur, .monatsAnsicht td.tableColumn.korrektur{
    background-color: #fff;
    background-image: url(../resources/images/schraffur_grau.png);
}

/****************************************************************************
 *                       CSS für Wochenplanung                           *
 ****************************************************************************/


.wochenplanung td.tableColumn{
    padding: 0px !important;
}


/****************************************************************************
 *                       CSS für Fixed Headline                           *
 ****************************************************************************/


.stickem-container {
    position: relative;
}

.stickit {
    position: fixed;
    top: 0;
    z-index: 100;
}


.stickit-end {
    bottom: 0;
    position: absolute;
    right: 0;
}

/****************************************************************************
 *                       CSS für Korrekturassistent                         *
 ****************************************************************************/
#korrekturassistent {
    color: red;
    margin-bottom: 25px;
}

#korrekturassistent p {
}

#korrekturassistent ul li {
    margin-left: 25px;
}

.rot {
    background-color: #fff;
    background-image: url(../resources/images/schraffur_rot.png);
}

/****************************************************************************
 *                       CSS für Schichtplaner                         *
 ****************************************************************************/


.schichtplaner th {
    border: 1px solid #a8a8a8;
    background: #e3e3e3;
    /*background: #c4c4c4 url("/zmi-webclient/javax.faces.resource/images/ui-bg_highlight-hard_80_c4c4c4_1x100.png.jsf?ln=primefaces-aristo") 50% 50% repeat-x;
    background: #c4c4c4 linear-gradient(top, rgba(255,255,255,0.8), rgba(255,255,255,0));
    background: #c4c4c4 -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0)));
    background: #c4c4c4 -moz-linear-gradient(top, rgba(255,255,255,0.8), rgba(255,255,255,0));*/
    font-weight: bold;
    color: #4f4f4f;
    text-shadow: 0px 1px 0px rgba(255,255,255,0.7);
}

.schichtplaner th, .schichtplaner td, .schichtplaner td {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.5em;
    padding: 2px 0px !important;
    border-width: 1px;
    border-style: solid;
}

.schichtplaner td{
    border: 1px solid #a8a8a8;
    background: #fff;
}

.schichtplaner a{
    color: #4f4f4f !important;
}

.schichtplaner{
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    font-size: 8px;
    border-spacing: 0px;
    border-collapse: collapse; 
    text-align: center;
}



.schichtplaner td{
    padding: 0px !important;
}


.schichtplaner .cell{
    line-height: 30px;
    font-weight: bold; 
}

.schichtplaner .cell .beantragt{
    border: 1px dashed #fff;
    padding: 5px;
    background-image: url(../resources/images/schraffur_w.png);
}

.schichtplaner .cell .genehmigt{
    border: 1px dashed #18b80c;
    padding: 5px;
}

.schichtplaner .cell .abgelehnt{
    border: 1px dashed #f890b2;
    padding: 5px;
}

.schichtplaner .cell .loeschen{
    border: 1px dashed #f890b2;
    padding: 5px;
    background-image: url(../resources/images/schraffur_rot.png);
}

.schichtplaner .woende{
    background: #f1f1f1;
}

.schichtplaner .heute{
    background: #fff;
    color:  #0088cc;
}

.schichtplaner .tagesplanZuordnen{
    padding: 4px 3px !important;
    text-align: center;
}

.schichtplaner .ui-widget{
    font-size: 1em !important;
}

/****************************************************************************
 *                       CSS für Dienstplaner                         *
 ****************************************************************************/

.noDienstplaner{
    color: #3a87ad !important;
    background-color: #d9edf7;
    border-color: #bce8f1;
    padding: 8px 35px 8px 14px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); 
    text-align: center !important;
    font-size: 18px !important;
    line-height: 200px !important;
    min-height: 200px !important;
    border-bottom: 5px solid #1cbae6;
}

.dienstplaner th, .dienstplaner .grey {
    border: 1px solid #a8a8a8;
    background: #e3e3e3;
    /*background: #c4c4c4 url("/zmi-webclient/javax.faces.resource/images/ui-bg_highlight-hard_80_c4c4c4_1x100.png.jsf?ln=primefaces-aristo") 50% 50% repeat-x;
    background: #c4c4c4 linear-gradient(top, rgba(255,255,255,0.8), rgba(255,255,255,0));
    background: #c4c4c4 -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0)));
    background: #c4c4c4 -moz-linear-gradient(top, rgba(255,255,255,0.8), rgba(255,255,255,0));*/
    font-weight: bold;
    color: #4f4f4f;
    text-shadow: 0px 1px 0px rgba(255,255,255,0.7);
}

.dienstplaner th, .dienstplaner td, .dienstplaner td {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.5em;
    padding: 2px 0px !important;
    border-width: 1px;
    border-style: solid;
}

.dienstplaner th.white{
    background: #fff !important;
}

.dienstplaner td{
    border: 1px solid #a8a8a8;
    background: #fff;
}

.dienstplaner a{
    color: #4f4f4f !important;
}

.dienstplaner{
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    font-size: 9px;
    border-spacing: 0px;
    border-collapse: collapse; 
    text-align: center;
}



.dienstplaner td{
    padding: 0px !important;
}


.dienstplaner .cell{
    line-height: 17px;
    font-weight: bold; 
    min-height: 17px;
}

.dienstplaner .cell .beantragt{
    border: 1px dashed #fff;
    padding: 5px;
    background-image: url(../resources/images/schraffur_w.png);
}

.dienstplaner .cell .genehmigt{
    border: 1px dashed #18b80c;
    padding: 5px;
}

.dienstplaner .cell .abgelehnt{
    border: 1px dashed #f890b2;
    padding: 5px;
}

.dienstplaner .cell .loeschen{
    border: 1px dashed #f890b2;
    padding: 5px;
    background-image: url(../resources/images/schraffur_rot.png);
}

.dienstplaner .woende{
    background: #f1f1f1;
}

.dienstplaner .heute{
    background: #fff;
    color:  #0088cc;
}

.dienstplaner .tagesplanZuordnen{
    padding: 4px 3px !important;
    text-align: center;
}

.dienstplaner .ui-widget{
    font-size: 1em !important;
}

/****************************************************************************
 *                       CSS für Jahresübersicht                         *
 ****************************************************************************/


.jahresuebersicht th {
    border: 1px solid #a8a8a8;
    background: #e3e3e3;
    /*background: #c4c4c4 url("/zmi-webclient/javax.faces.resource/images/ui-bg_highlight-hard_80_c4c4c4_1x100.png.jsf?ln=primefaces-aristo") 50% 50% repeat-x;
    background: #c4c4c4 linear-gradient(top, rgba(255,255,255,0.8), rgba(255,255,255,0));
    background: #c4c4c4 -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0)));
    background: #c4c4c4 -moz-linear-gradient(top, rgba(255,255,255,0.8), rgba(255,255,255,0));*/
    font-weight: bold;
    color: #4f4f4f;
    text-shadow: 0px 1px 0px rgba(255,255,255,0.7);
}

.jahresuebersicht th, .jahresuebersicht td, .jahresuebersicht td {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.5em;
    padding: 2px 0px !important;
    border-width: 1px;
    border-style: solid;
}

.jahresuebersicht td{
    border: 1px solid #a8a8a8;
    background: #fff;
}

.jahresuebersicht a{
    color: #4f4f4f !important;
}

.jahresuebersicht{
    font-family: 'Open Sans', Helvetica Arial, sans-serif;
    font-size: 8px;
    border-spacing: 0px;
    border-collapse: collapse; 
    text-align: center;
}



.jahresuebersicht td{
    padding: 0px !important;
}


.jahresuebersicht .cell{
    line-height: 17px;
    font-weight: bold; 
    min-width: 34px;
}

.jahresuebersicht .cell .beantragt{
    border: 1px dashed #fff;
    padding: 5px;
    background-image: url(../resources/images/schraffur_w.png);
}

.jahresuebersicht .cell .genehmigt{
    border: 1px dashed #18b80c;
    padding: 5px;
}

.jahresuebersicht .cell .abgelehnt{
    border: 1px dashed #f890b2;
    padding: 5px;
}

.jahresuebersicht .cell .loeschen{
    border: 1px dashed #f890b2;
    padding: 5px;
    background-image: url(../resources/images/schraffur_rot.png);
}

.jahresuebersicht .woende{
    background: #f1f1f1;
}

.jahresuebersicht .heute{
    background: #fff;
    color:  #0088cc;
}


.jahresuebersicht .ui-widget{
    font-size: 1em !important;
}

.jahresuebersicht .cell .cellHeader{
    font-size: 9px;
    color: #000;
}

.circle {
    border-radius: 50%;
    width: 20px;
    height: 20px; 
    float: left;
    margin: 3px 5px 3px 0;
}

.ampel {
    background-color: transparent;
    padding: 3px 6px 2px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    white-space: nowrap;
    vertical-align: baseline;
}

.corner{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 14px 14px 0;
    position: absolute;
    top: 0px;
    right: 0px;
    border-color: transparent transparent transparent;
}

.message{
    color: red; 
    position: absolute; 
    right: 30px; 
    cursor: pointer;
}

/****************************************************************************
 *                       CSS für Statustableau                         *
 ****************************************************************************/

.statustableau table {
    border-collapse: collapse;
}

.statustableau .hidden{
    display:none;
}

.statustableau .blockelement{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #d4d4d4;
    margin: 5px 0;
    padding: 3px;
    height: 50px;
    line-height: 40px;
    -webkit-box-shadow: 0 3px 3px -1px #cccccc;
    -moz-box-shadow: 0 3px 3px -1px #cccccc;
    box-shadow: 0 3px 3px -1px #cccccc;
    text-overflow: ellipsis;
    overflow: hidden; 
    white-space: nowrap;
}

.statustableau .blockelement > span{
    margin-left: 15px;
    vertical-align: middle;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.48);
}

.statustableau .blockelement > img{
    margin-left: 15px;
    vertical-align: top;
    height: 100%;
    border: 1px solid #d4d4d4;
    float: right;
}

.statustableau .legende{
    -webkit-box-shadow: 0 2px 2px -2px #cccccc;
    -moz-box-shadow: 0 2px 2px -2px #cccccc;
    box-shadow: 0 2px 2px -2px #cccccc;
    background: #fbfbfb;
    border: 1px solid #ddd;
    margin: 6px 0;
    font-size: 10px;
}

.statustableau .legende .legendeHeader{
    background: #e3e3e3;
    background-size: 100%;
    /*background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #fdfdfd),
        color-stop(100%, #eaeaea));
    background-image: -webkit-linear-gradient(top, #fdfdfd, #eaeaea);
    background-image: -moz-linear-gradient(top, #fdfdfd, #eaeaea);
    background-image: -o-linear-gradient(top, #fdfdfd, #eaeaea);
    background-image: linear-gradient(top, #fdfdfd, #eaeaea);*/
    text-shadow: 0 1px white;
    border-bottom: 1px solid #CDCDCD;
    color: #636363;
    font-weight: 600;
    font-size: 12px;
    padding: 10px;
}

.statustableau .legende ul{
    list-style: none;
    margin: 5px;
}

.statustableau .legende ul li{
    padding: 4px 8px;
    margin: 5px 3px;
    border: 1px solid #d4d4d4;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-overflow: ellipsis; 
    display: block; 
    overflow: hidden; 
    white-space: nowrap;
    -webkit-box-shadow: 0 3px 3px -1px #cccccc;
    -moz-box-shadow: 0 3px 3px -1px #cccccc;
    box-shadow: 0 3px 3px -1px #cccccc;
}

.statustableau .legende ul li .ui-chkbox { 
    margin-right: 5px;
}

.statustableau table{
    font-size: 10px;
}

.statustableau table th{
    text-align: left !important;
    padding: 2px 5px !important;
}

.statustableau table td{
    text-align: left !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break:break-all;
    word-wrap:break-word

}

.statustableau table .cell{
    padding: 2px 5px !important;
}

/**
 * Tooltip Styles
 */

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
    position: relative;
    z-index: 2;
    cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-bottom: 5px;
    margin-left: -80px;
    padding: 7px;
    width: 160px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #000;
    background-color: hsla(0, 0%, 20%, 0.9);
    color: #fff;
    content: attr(data-tooltip);
    text-align: center;
    font-size: 14px;
    line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-left: -5px;
    width: 0;
    border-top: 5px solid #000;
    border-top: 5px solid hsla(0, 0%, 20%, 0.9);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: " ";
    font-size: 0;
    line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1
}

.gestern {
    color: #0088cc
}

.morgen {
    color: #18b80c
}

.m-x-5{
    margin-left: 5px !important;
    margin-right: 5px !important;
}

.m-l-5{
    margin-left: 5px !important;
}

.ellipsis{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
@font-face {
    font-family: 'FontAwesome';
    src: url('../font-awesome-4.2.0/fonts/fontawesome-webfont.eot?v=4.2.0');
    src: url('../font-awesome-4.2.0/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../font-awesome-4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../font-awesome-4.2.0/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../font-awesome-4.2.0/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal
}

.ui-state-default .ui-icon.ui-icon-calendar{
    background: transparent !important;
    text-indent: 0px !important;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.ui-state-default .ui-icon.ui-icon-calendar:before{
    content: "\f073" !important;
}

.ui-autocomplete .ui-button{
	padding-top: 2px;
}

.ui-autocomplete .ui-button-text{
	padding-top: 3px !important;
	padding-bottom: 3px !important;
}

.letzte-auftraege-button .ui-button-text{
	padding-bottom: 3px !important;
}

/****************************************************************************
 *                       CSS für Administration                             *
 ****************************************************************************/

 .logo-upload td {
 	vertical-align: top;
 }
 
 /****************************************************************************
 *                       CSS für Upload                                     *
 ****************************************************************************/
.ui-messages-error, .ui-message-error {
 	height: 85px;
 }