.calendar-wrapper {
    width: 95%;
    max-width: none;
    position: absolute;
}

.calendar {
    width: 100%;
    position: absolute;
    line-height: 1.0;
}

.calendar-bg {
    min-height: 820px;
    min-width:720px;
}
.calendar-xl-bg {
    min-height: 1320px;
    min-width:740px;
}

.month-header {
    height: 35px;
    width: 98%;
    font-weight: bold;
    background: darkgrey;
    color: black;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 1px solid #b2b2b2;
	padding: 5px 0;
}

.month-header .glyphicon {
    margin-left: 30px;
    margin-right: 30px;
}

.month-header .month {
    display: inline-block;
    width: 120px;
    text-align: center;
}


.day {
    width: 14%;
    border-left: 1px solid #b2b2b2;
    border-bottom: 1px solid #b2b2b2;
    float: left;
    position: relative;
    overflow: hidden;
    height: 120px;
}
.day-xl {
    height: 200px;
}

.day.last {
    border-right: 1px solid #b2b2b2;
}

.day.header {
    height: 25px;
    background: darkgrey;
    color: white;
	padding: 2px 6px;
	font-size:12px;
	text-transform:lowercase;
}

.day-header {
    background: black;
	color: white;
	padding: 2px 6px;
	font-size:12px;
}

.day.today {
    background: #ccecf1;
}
.closed {
    background-image: repeating-linear-gradient(45deg, lightgrey 0px, lightgrey 3px, transparent 3px, transparent 6px, lightgrey 6px) !important;
}
.day.today.closed {
    background: none;
    background-image: repeating-linear-gradient(45deg, #ccecf1 0px, #ccecf1 3px, transparent 3px, transparent 6px, #ccecf1 6px) !important;
}

.c-content-label.closed {
    background-color: white;
    border: solid 1px #808080 !important;
    border-radius: 5px;
}

.c-content-label.reservation {
    border-radius: 5px;
}


.day-not-in-month {
    background: rgba(178,178,178,0.2);
    z-index : 101;
	color: black;
}

.day .show {
    font-size: smaller;
    border: solid 1px black;
    display: block;
    border-radius: 4px;
    margin: 5px;
    margin-bottom: 10px;
    color: white;
    padding: 2px;
}

.show-tickets-available {
    background: #c8d046;
    border: solid 1px #9aa129 !important;
}
.show-tickets-still-available {
    background: #fbb630;
    cursor: pointer;
    border: solid 1px #af7f21 !important;
}
.show-tickets-not-available {
    background: #de0c22;
    border: solid 1px #940817 !important;
	color: black !important;
}

.show-reservable {
    cursor: pointer;
}

.show-not-public {
    background: white;
	color: black !important;
}

.show-in-past {
    background: lightgrey;
    border: solid 1px #808080 !important;
}

#employeeInfoContainer {
    background-color: white;
    padding-top: 30px;
}

#employeeInfoContainer .displayModeControl {
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 20px;
}

.displayModeControl input {
    margin-left: 20px;
}

.displayModeControl input:first-child {
    margin-left: 0;
}

#employeeInfoContainer .calendar-wrapper {
    margin-left: 30px;
    margin-right: 30px;
}

#employeeInfoContainer h2 {
    margin-top: 0px;
}

.employee-show-info {
    margin-bottom: 20px;
    padding: 10px;
}

.employee-show-info.booking-block {
    background: rgba(178,178,178,0.2);
}
.employee-show-info.show-block {

}
.employee-show-info.noshow-block {
    background: darkgray;
}

.employee-show-info h4 {
    margin-bottom: 5px;
}

.employee-show-info .assistants-info {
    font-weight: 500;
    font-style: italic;
    color: #fbb630;
    display:block;
}

.employee-show-info .assistants-remarks {
    font-weight: 500;
    font-style: italic;
    color: #fbb630;
    display:block;
}


#employeeInfoContainer .calendar-wrapper h2 {
    text-align: center;
    margin-top: 780px;
}

.employee-info-show-popover {
  width: 450px;
  max-width: 450px;
}

.show-option-suffix {
    display: inline;
    font-style: italic;
}

.employee-show-info .show-option-suffix {
    color: #fbb630;
}

#employeeInfoContainer .calendar-wrapper {
    width: 700px !important;
    max-width: 700px !important;
}

#employeeInfoContainer .calendar {
    width: 700px !important;
}

#employeeInfoContainer .calendar-bg {
    min-width:740px !important;
}


#employeeInfoContainer .show.appointment {
    background-color: #9f50b3;
}