html, body {
    font-family: 'Khand', sans-serif;
    color: #736b6b;
    font-weight: 300;
    min-height: 101%;
}

header {
    //background: #ebe9e9 url('../images/header_bg.png');
    background: #222;
    //margin: 75px 0;
    padding: 25px 0 60px 0;
}

footer {
    background: #ebe9e9;
    padding: 25px 0 60px 0;
}

h1 {
    text-align: center;
    padding-bottom: 15px;
}

.break {
    clear: both;
}

.spacer25 {
    height: 25px;
}

.spacer50 {
    height: 50px;
}

.logo {
    text-align: center;
    padding-bottom: 10px;
    max-width: 75%;
    margin: auto;
}

.logo img {
    max-width: 50%;
}

.toggleForm form {
    display: none;
}

.dashboard {
    text-align: center;
}

.dashboard.dashboardTeam {
    text-align: left;
}

.dashboard.dashboardTeam .teamItem {
    height: 130px;
    padding: 5px;
    margin-bottom: 5px;
}

.dashboard.dashboardTeam .teamItem .inner {
    background: #8E8F94;
    height: 120px;
    margin: 5px
}

.dashboard.dashboardTeam .avatar {
    height: 120px;
    width: 120px;
    float: left;
}
.dashboard.dashboardTeam .data {
    height: 120px;
    float: left;
    padding: 5px 5px 5px 15px;
    color: #fff;
}

.dashboard.dashboardTeam .avatar .available {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    position: absolute;
    margin-left: 110px;
    top: -0px;
}

.availableNot {
    background: #f00;
}

.availableYes {
    background: #0f0;
}

.availableOutside {
    background: #FFCC33;
}

.dashboard.dashboardTeam .heuteGeburtstag {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 10px;
    top: 10px;
    text-align: center;
    font-size: 36px;
    font-size: 36px;
}

.blink_me {
    animation: blinker 2s linear infinite;
}

@keyframes blinker {
    50% { opacity: 0; }
}

.dashboard .summary {
    background: url('../images/circle.png') no-repeat center;
    width: 200px;
    height: 200px;
    padding-top: 55px;
    font-size: 70px;
    margin: 15px auto;
}

a .news {
    color: #f00;
}

#uploadzone {
    width: 100%;
    height: 50px;
    text-align: center;
    background: #ebe9e9;
}

.avatar {
    background: #666666;
    width: 100%;
    height: 250px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.form-group img {
    max-width: 280px;
}

.icon {
    font-size: 20px;
    padding: 5px;
}

textarea {
    width: 100%;
    min-height: 100px;
}

input.dropzone {
    width: 100%;
    background: #e9ecef;
}

.ticketCol {
    padding: 20px;
    box-sizing: border-box;
}
.ticketColInner {
    background: #aaaaaa;
    padding: 20px;
    box-sizing: border-box;
}

.ticketColInner .deadline {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 0px solid;
    right: 40px;
    color: #fff;
    border-radius: 30px;
    padding-top: 4px;
}

.ticketColInner .deadlineGreen {
    background: #00CC00;
}

.ticketColInner .deadlineRed {
    background: #ff0000;
}

.ticketColInner .zuweisung {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 0px solid;
    left: 40px;
    color: #fff;
    border-radius: 30px;
    padding-top: 4px;
    border: 1px solid #ccc;
    background-size: cover;
    background-position: center center;
}

.overlay {
    display: none;
}

.overlay.buchungsform {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.overlay.buchungsform .overlayInner {
    background-color: #fff;
    width: 320px;
    height: 75%;
    margin: 50px auto;
    padding: 25px;
}

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

.buchen-buttons a {
    display: inline-block;
    width: 140px;
    height: 120px;
    text-align: center;
    margin: 15px;
    color: #000;
}

#auftrag-buchen {
    background: url("/images/button_auftrag-buchen.png") no-repeat;
}

#gehen {
    background: url("/images/button_gehen.png") no-repeat;
}

#raucherpause-beginn {
    background: url("/images/button_raucherpause-beginn.png") no-repeat;
}

#raucherpause-ende {
    background: url("/images/button_raucherpause-ende.png") no-repeat;
}

#pause-beginn {
    background: url("/images/button_pause-beginn.png") no-repeat;
}

#pause-ende {
    background: url("/images/button_pause-ende.png") no-repeat;
}

.buchungFehler {
    display: none;
}

.buchungEdit {
    display: none;
}

.myStatus-9 {
    color: #f00 !important;
}

.myStatus-10 {
    color: #ff00cc !important;
}

.buchung-row button,
.buchungEdit button,
.buchungFehler button{
    width: 100%;
}

.arbeitszeitAdd {
    display: none;
}

.container.monatsleiste {
    padding: 0px !important;
    background: #d0e9c6;
    z-index: 10;
}

.container.monatsleiste.sticky {
    position: fixed;
    top:0px;
    max-width: 1110px;
}

.jbi2020 .container.monatsleiste.sticky {
    position: fixed;
    top:90px;
    max-width: 1110px;
}

.sidebar {
    display: none;
}

@media (min-width: 1710px) {
    .sidebar {
        display: block;
        position: fixed;
        right: 0px;
        top: 300px;
        width: 300px;
        border: 1px solid #000;
        padding: 15px;
    }
}

.kalendertag {
    display: inline-block;
    width: 25px;
    height: 25px;
    text-align: center;
    border: 2px solid #ccc;
    margin: 1px;
}

.kalendertagOverview {
    height: 0px;
}

.kalenderName {
    font-size: 12px;
}

.kalendertagSat {
    background: #444;
}

.kalendertagSun {
    background: #222;
}

.urlaubstag {
    border-color: #00AA88;
    color: #00AA88;
}

.urlaubstagBlack {
    border-color: #d0e9c6;
    color: #d0e9c6;
}

.urlaubstagUnbezahlt {
    border-color: #00ff00;
    color: #00ff00;
}

.urlaubstagKurzarbeit {
    border-color: #0000ff;
    color: #00ff00;
}

.urlaubstagBeantragt {
    border-color: #cc9600;
    color: #cc9600;
}

.urlaubstagAbgelehnt {
    border-color: #f00;
    color: #f00;
}

.feiertag {
    background: #002a80;
}

.KalenderRow {
    height: 15px;
    padding: 2px 0;
    box-sizing: content-box;
}

.KalenderRow:hover {
    background: #c4e3f3;
}

.urlaubAlleMitarbeiter {
    padding-top: 7px;
}

.urlaubAlleMitarbeiter .col-md-11 {
    #background: #000000;
}

.nav-item a {
    font-size: 1.1em;
}

.menu-mitarbeiter,
.header-mitarbeiter {
    padding: 0px;
}

.header-mitarbeiter li {
    display: inline-block;
}

.menu-mitarbeiter li {
    width: 100%;
    list-style-type: none;
    margin: 2px 0;
}

.menu-mitarbeiter li a {
    width: 100%;
}

@media (max-width: 768px) {
    .menu-mitarbeiter {
        display: none;
    }
}




.kalenderHeute {
    -webkit-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.72);
    -moz-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.72);
    box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.72);
}

.dayContainer {
    border: 1px dotted #000;
    padding: 15px;
    margin: 15px 0 0 0;
}

.buchungsTyp-2 {
    color: #0000FF;
}

.buchungsTyp-3 {
    color: #cc9600;
}

.dayTimeError {
    background: #FF0000;
}

.dayTimeOK {
    background: #00ff00;
}

.essenplanOverview {
    background: #F5F5F5;
}

.essenplanOverview ul {
    padding: 0px;
    margin: 0px;
}

.essenplanOverview li {
    list-style-type: none;
    margin-bottom: 2px;
}

.essenplan .inner {
    margin: 5px;
    padding: 5px;
    background: #F5F5F5;
    min-height: 200px;
}
.essenplan .inner.active {
    margin: 5px;
    padding: 5px;
    background: #7aba7b;
    min-height: 200px;
}

.essen {
    min-height: 100px;
}


.overlayFehlbuchungen {
    position: fixed; /* Sit on top of the page content */
    display: block; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

.textFehlbuchungen{
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 50px;
    color: white;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    background: #000;
    border: 1px solid #f00;
    padding: 100px;
    text-align: center;
}

/******** DATETIMEPICKER
*/
.cursorily{ cursor: pointer;}
.hov:hover{ color: #000;}
.ico-size{font-size: 16px;}
.ico-size-month{font-size: 26px!important; line-height: 26px!important;}
.ico-size-large{ font-size: 40px!important; line-height: 30px;}
.dtp_main{ border: solid 1px #eee; border-radius: 3px; background-color: #fff; padding: 8px 0 8px 8px;}
.dtp_main span, .dtp_main i{ display: inline-block; padding-right: 8px;}
.dtp_modal-win{position: fixed;left: 0; top: 0; width: 100%; height: 100%;
    z-index: 999; background-color: #eeeeee; opacity: 0.6;}
.dtp_modal-content{ background-color: #fff; border-radius: 10px; width: 624px;
    position: absolute; z-index: 1000; top: 100px; left: 100px; font-size: 16px;font-weight: normal;}
.dtp_modal-content-no-time{ background-color: #fff; border-radius: 10px; width: 312px;
    position: absolute; z-index: 1000; top: 100px; left: 100px; font-size: 16px;font-weight: normal;}
.dtp_modal-title{ border-bottom: solid 3px #01adff; padding: 16px 36px; margin-bottom: 16px;  font-size: 22px; }
.dtp_modal-cell-date{ width: 312px;  float: right; margin-bottom: 22px; margin-top: 6px;}
.dtp_modal-cell-time{width: 311px; float: left; direction: ltr; border-right: solid 1px #000;}
.dtp_modal-months{ color: #7d7d7d; text-align: center; font-size: 20px; padding: 0 20px;}
.dtp_modal-months span{ display: inline-block; padding: 10px 20px; width: 182px;}
.dtp_modal-calendar{ width: 266px; margin-left: 22px; }
.dtp_modal-calendar-cell{ width: 38px; padding: 7px 0; display: inline-block; text-align: center;}
.dtp_modal-colored{ color: #01adff; }
.dtp_modal-grey{ color: #7d7d7d; }
.dtp_modal-cell-selected{ background-color: #01adff; border-radius: 48%;  transition: background-color 1s ease-out;}
.dtp_modal-time-block{ height: 212px; width: 310px; }
.dpt_modal-button{ background-color: #01adff; color: #fff; font-size: 24px; padding: 8px 40px; float: left;
    text-align: center; display: inline-block; margin-left: 22px; cursor: pointer; border: solid 1px #fff;
border-radius: 3px;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.dtp_modal-time-line{ text-align: center; color: #7d7d7d; font-size: 20px; padding-top: 15px;  }
.dtp_modal-time-mechanic{ padding-top: 16px;}
.dtp_modal-append{ color: #7d7d7d; padding-left: 108px; font-weight: normal; }
.dtp_modal-midle{ display: inline-block; width: 40px; }
.dtp_modal-midle-dig{display: inline-block; width: 16px; text-align: center; }
.dtp_modal-digits{ font-size: 50px; padding-left: 96px;}
.dtp_modal-digit{  }

/******** DATETIMEPICKER
*/


.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }

.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { background: none; color: inherit; border: none; outline: none; border-bottom: solid 1px #555; width: 95%; }
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus { border-bottom-color: #aaa; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }

/* Shortened version style */
.ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time,
.ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }
.ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd,
.ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }


.accordion:after {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    content: "\f0d7";
    display: block;
}

.accordion3 .toggler {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    content: "\f0d7";
    display: block;
    height: 25px;
}

.accordionContent {
    display: none;
}

@media (min-width: 768px){
    .seven-cols .col-md-1,
    .seven-cols .col-sm-1,
    .seven-cols .col-lg-1  {
        width: 100%;
        *width: 100%;
    }
}

@media (min-width: 992px) {
    .seven-cols .col-md-1,
    .seven-cols .col-sm-1,
    .seven-cols .col-lg-1 {
        width: 14.285714285714285714285714285714%;
        max-width: 14.285714285714285714285714285714%;
        *width: 14.285714285714285714285714285714%;
        flex: auto;
    }
}

.kalender .col-md-1 {
    background: #F5F5F5;
    padding: 0px;
    border: 1px solid #fff;
    min-height: 100px;
}

.wochentag {
    background: #343a40;
    color: #fff;
    padding: 3px;
}