.calendar_modern {
  padding: 50px; /* position the top */
}
.calendar_modern .calendar {
  margin: auto;
  width: 238px;
  height: 290px; /* to position the footer below the calendar */
}
/* === navigation buttons ===
.calendar_modern .calendar .nav {
  height: 0;
  position: relative;
}
.calendar_modern .calendar .nav i, .calendar_modern .calendar .nav b {
  display: block;
  font-style: normal;
  position: absolute;
  cursor: pointer;
  width: 30px;
  height: 30px;
  z-index: 100;
  top: 0;
}
.calendar_modern .calendar .nav i {
  left: 0;
  border-right: 1px solid #423a37;
  background: url(http://cs4399.userapi.com/u49225742/docs/58f03726ea27/lft.png) no-repeat center center transparent;
}
.calendar_modern .calendar .nav b {
  right: 0;
  border-left: 1px solid #423a37;
  background: url(http://cs4399.userapi.com/u49225742/docs/5fd2e9dd3a9f/rgt.png) no-repeat center center transparent; 
}
*/
.calendar_modern .calendar .month .header {
  height: 30px;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  color: navy;
  line-height: 30px;
  font-weight: bold;
  font-size: 1.4em;
  text-align: right;
  /*background: #372f2c;
  border-radius: 3px;*/
  transform: rotate(-90deg);
  left: -135px;
}
.calendar_modern .calendar .month .body {
  background: #e4e4e4; /* day_names background */
}
.calendar_modern .calendar .month .body .day_names {
  height: 25px; /* day_names background block */
}
.calendar_modern .calendar .month .body .day_names i {
  font-family: Arial, Helvetica, sans-serif;
  display: block;
  height: 25px;
  line-height: 25px;
  text-align: center;
  font-style: normal;
  float: left;
  width: 34px;
}
/* day cell */
.calendar_modern .calendar .month .body .days i, .calendar_modern .calendar .month .body .days b, .calendar_modern .calendar .month .body .days s, .calendar_modern .calendar .month .body .days a {
  font-family: Arial, Helvetica, sans-serif;
  display: block;
  float: left;
  width: 34px!important;
  height: 33px;
  color: #8d8d8d;
  font-size: 1.5em;
  /*font-weight: bold;*/
  line-height: 34px;
  text-align: center;
  font-style: normal;
  /*background: #e4e4e4;*/ /* default background color */
  text-decoration: none;
  /* table like borders */
  border-right: 1px solid #aaaaaa;
  border-bottom: 1px solid #aaaaaa;
  /* table like borders */
}
.calendar_modern .calendar .month .body .days i.weekend, .calendar_modern .calendar .month .body .days b.weekend, .calendar_modern .calendar .month .body .days s.weekend, .calendar_modern .calendar .month .body .days a.weekend {
  color: #444; 
  /*background: InactiveCaption;*/ /* weekend background color */
}
.calendar_modern .calendar .month .body .days i:nth-child(7n + 1), .calendar_modern .calendar .month .body .days b:nth-child(7n + 1), .calendar_modern .calendar .month .body .days s:nth-child(7n + 1), .calendar_modern .calendar .month .body .days a:nth-child(7n + 1) {
  border-left: 1px solid #aaaaaa;
}
.calendar_modern .calendar .month .body .days i:nth-child(n+1):nth-child(-n+7), .calendar_modern .calendar .month .body .days b:nth-child(n+1):nth-child(-n+7), .calendar_modern .calendar .month .body .days s:nth-child(n+1):nth-child(-n+7), .calendar_modern .calendar .month .body .days a:nth-child(n+1):nth-child(-n+7) {
  border-top: 1px solid #aaaaaa;
}
.calendar_modern .calendar .month .body .days i:nth-child(n+1):nth-child(-n+7).empty, .calendar_modern .calendar .month .body .days b:nth-child(n+1):nth-child(-n+7).empty, .calendar_modern .calendar .month .body .days s:nth-child(n+1):nth-child(-n+7).empty, .calendar_modern .calendar .month .body .days a:nth-child(n+1):nth-child(-n+7).empty {
  border-top: 1px solid #d5d5d5;
  border-bottom: 1px solid #aaaaaa;
}
.calendar_modern .calendar .month .body .days s:nth-child(7n + 1) {
  border-left: 1px solid #d5d5d5;
}
/* clickable day with status */
.calendar_modern .calendar .month .body .days a {
  color: #372f2d;
  background: #fffffa;
}
.calendar_modern .calendar .month .body .days a.alarm {
    background-color:red;
}
/* ================= day stauses ============= */
.calendar_modern .calendar .month .body .days a.blocked {
    background-color: darkgrey;
}
.calendar_modern .calendar .month .body .days a.blocked-blocked {
    background: linear-gradient(120deg,darkgrey, darkgrey 30%, white 35%, white 65%, darkgrey 70%);
}
.calendar_modern .calendar .month .body .days a.blocked-reserved {
    background: linear-gradient(120deg,darkgrey, darkgrey 30%, white 35%, white 65%, lightgreen 70%);
}
.calendar_modern .calendar .month .body .days a.blocked-paid {
    background: linear-gradient(120deg,darkgrey, darkgrey 30%, white 35%, white 65%, green 70%);
}
.calendar_modern .calendar .month .body .days a.blocked-tentative {
    background: linear-gradient(120deg,darkgrey, darkgrey 30%, white 35%, white 65%, yellow 70%);
}
.calendar_modern .calendar .month .body .days a.blocked-free {
    background: linear-gradient(120deg,darkgrey, darkgrey 30%, white 35%, white );
}
.calendar_modern .calendar .month .body .days a.free-blocked {
    background: linear-gradient(120deg, white, white 65%, darkgrey 70%);
}
/* --------- reserved ----------------- */
.calendar_modern .calendar .month .body .days a.reserved {
    background-color:lightgreen;
}
.calendar_modern .calendar .month .body .days a.reserved-blocked {
    background: linear-gradient(120deg,lightgreen, lightgreen 30%, white 35%, white 65%, darkgrey 70%);
}
.calendar_modern .calendar .month .body .days a.reserved-reserved {
    background: linear-gradient(120deg,lightgreen, lightgreen 30%, white 35%, white 65%, lightgreen 70%);
}
.calendar_modern .calendar .month .body .days a.reserved-paid {
    background: linear-gradient(120deg,lightgreen, lightgreen 30%, white 35%, white 65%, green 70%);
}
.calendar_modern .calendar .month .body .days a.reserved-tentative {
    background: linear-gradient(120deg,lightgreen, lightgreen 30%, white 35%, white 65%, yellow 70%);
}
.calendar_modern .calendar .month .body .days a.reserved-free {
    background: linear-gradient(120deg,lightgreen, lightgreen 30%, white 35%, white );
}
.calendar_modern .calendar .month .body .days a.free-reserved {
    background: linear-gradient(120deg, white, white 65%, lightgreen 70%);
}
/* -------------- paid ----------------*/
.calendar_modern .calendar .month .body .days a.paid {
    background-color:green;
}
.calendar_modern .calendar .month .body .days a.paid-blocked {
    background: linear-gradient(120deg, green, green 30%, white 35%, white 65%, darkgrey 70%);
}
.calendar_modern .calendar .month .body .days a.paid-reserved {
    background: linear-gradient(120deg, green, green 30%, white 35%, white 65%, lightgreen 70%);
}
.calendar_modern .calendar .month .body .days a.paid-paid {
    background: linear-gradient(120deg, green, green 30%, white 35%, white 65%, green 70%);
}
.calendar_modern .calendar .month .body .days a.paid-tentative {
    background: linear-gradient(120deg, green, green 30%, white 35%, white 65%, yellow 70%);
}
.calendar_modern .calendar .month .body .days a.paid-free {
    background: linear-gradient(120deg, green, green 30%, white 35%, white );
}
.calendar_modern .calendar .month .body .days a.free-paid {
    background: linear-gradient(120deg, white, white 65%, green 70%);
}
/* ------------------------- tentative ------------------- */
.calendar_modern .calendar .month .body .days a.tentative {
    background-color:yellow;
}
.calendar_modern .calendar .month .body .days a.tentative-blocked {
    background: linear-gradient(120deg, yellow, yellow 30%, white 35%, white 65%, darkgrey 70%);
}
.calendar_modern .calendar .month .body .days a.tentative-reserved {
    background: linear-gradient(120deg, yellow, yellow 30%, white 35%, white 65%, lightgreen 70%);
}
.calendar_modern .calendar .month .body .days a.tentative-paid {
    background: linear-gradient(120deg, yellow, yellow 30%, white 35%, white 65%, green 70%);
}
.calendar_modern .calendar .month .body .days a.tentative-tentative {
    background: linear-gradient(120deg, yellow, yellow 30%, white 35%, white 65%, yellow 70%);
}
.calendar_modern .calendar .month .body .days a.tentative-free {
    background: linear-gradient(120deg, yellow, yellow 30%, white 35%, white );
}
.calendar_modern .calendar .month .body .days a.free-tentative {
    background: linear-gradient(120deg, white, white 65%, yellow 70%);
}
/* ================ end split day styles ======== */
.calendar_modern .calendar .month .body .days a.today {
  color: dodgerblue;
}
.calendar_modern .calendar .month .body .days a.selected {
  color: white;
  text-shadow: 1px 1px 2px blue;
}
.calendar_modern .calendar .month .body .days a.available:hover {
    color: white;
    transition-property: text-shadow;
    transition-property: box-shadow;
    transition-duration: 0.2s;
    text-shadow: 1px 1px 2px green;
    box-shadow: 0 0 18px yellow inset;
    cursor: pointer;
}
.calendar_modern .calendar .month .body .days b, .calendar_modern .calendar .month .body .days i, .calendar_modern .calendar .month .body .days s {
  color: #ccc;
}
.calendar_modern .calendar .month .body .days b, .calendar_modern .calendar .month .body .days s {
  background: #eee;
  border-color: #d5d5d5;
}
.calendar_modern .calendar .month .body .days b {
  border-top: 1px solid #d5d5d5 !important;
  border-bottom: 1px solid #aaaaaa !important;
}
.calendar_modern .calendar .month .body .days b:first-child {
  border-left: 1px solid #d5d5d5 !important;
}
.calendar_modern .calendar .month .body .days b:last-of-type{
  border-right: 1px solid #aaaaaa !important;
}