/*************************************************/

#av_calendar .ui-datepicker .ui-datepicker-prev, #av_calendar .ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 3px;
    width: 1.8em;
    height: 1.8em;
    cursor: pointer;
    line-height: normal;
    border-top: none;
    border-right: none;
    border-bottom: none;
}

*[id^="av_calendar"] .ui-datepicker td {
    border: 0;
    padding: 1px;
    text-align: center;
}

*[id^="av_calendar"] .ui-datepicker.ui-datepicker-multi {
    width: 100% !important;
}

*[id^="av_calendar"] .dp-highlight .ui-state-default {
  border: 3px solid #ff8f00;
}

*[id^="av_calendar"] .ui-datepicker-calendar td a[data-custom] {
  position: relative;
}
*[id^="av_calendar"] .ui-datepicker-calendar td a[data-custom]::after {
  /*STYLE THE CUSTOME DATA HERE*/
  content: attr(data-custom);
  display: block;
  font-size: small;
  font-style: italic;
}

*[id^="av_calendar"] .ui-datepicker.ui-datepicker-multi  {
          width: 100% !important;
        }
        
*[id^="av_calendar"] .ui-widget { font-size: 100% }

*[id^="av_calendar"] .ui-state-active, *[id^="av_calendar"] .ui-widget-content .ui-state-active, *[id^="av_calendar"] .ui-widget-header .ui-state-active, *[id^="av_calendar"] a.ui-button:active, *[id^="av_calendar"] .ui-button:active, *[id^="av_calendar"] .ui-button.ui-state-active:hover {
    background: #f6f6f6;
    font-weight: normal;
    color: #454545;
}

*[id^="av_calendar"] td.not_available.ui-datepicker-unselectable.ui-state-disabled, *[id^="av_calendar"] td.not_available4.ui-datepicker-unselectable.ui-state-disabled{
    opacity: 1;
    filter: Alpha(Opacity=100);
}

*[id^="av_calendar"] td.not_available.ui-datepicker-unselectable.ui-state-disabled > a{
    font-weight: normal;
    color: #fee;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M0 0 H100 V100 H0' stroke='#e44' fill='#e44' stroke-width='3'/></svg>"); 
    background-repeat:no-repeat;
    background-position:center center;
    background-size: 100% 100%, auto;
    background-color: #e44;
}
/* <path d='M100 0 L0 100 ' stroke='white' fill='white' stroke-width='3'/> <path d='M0 0 L100 100 ' stroke='white' stroke-width='3'/> */

*[id^="av_calendar"] td.not_available4.ui-datepicker-unselectable.ui-state-disabled > a{
    font-weight: normal;
    color: #fee;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M100 0 L0 100 ' stroke='white' fill='white' stroke-width='5'/></svg>");
    background-repeat:no-repeat;
    background-position:center center;
    background-size: 100% 100%, auto;
    background-color: #e44;
}

*[id^="av_calendar"] td.not_available2 > a.ui-state-default, *[id^="av_calendar"] .ui-widget-content td.not_available2 > a.ui-state-default{
    font-weight: normal;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M0 0 H100 L0 100 Z' stroke='#e44' fill='#e44' stroke-width='3'/></svg>");
    background-repeat:no-repeat;
    background-position:center center;
    background-size: 100% 100%, auto;
}

*[id^="av_calendar"] td.not_available1 > a.ui-state-default, *[id^="av_calendar"] .ui-widget-content td.not_available1 > a.ui-state-default{
    font-weight: normal;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M0 100 H100 L100 0' stroke='#e44' fill='#e44' stroke-width='3'/></svg>");
    background-repeat:no-repeat;
    background-position:center center;
    background-size: 100% 100%, auto;
}

/* ---------------------- */

#av_calendar3{
  margin: 20px 0;
}

#cro_footer {
    display: table;
    width: 100%;
    margin-bottom: 30px;
}

#cro_footer_right{
  display: inline-block;
  vertical-align: baseline;
  float: right;
  margin-right: 50px;
}

#cro_footer_right span{
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 10px 10px 10px 30px;
  vertical-align: middle;
  border: 1px solid #999;
}

#cro_footer_right span.available{
  background-color: #f5f5f5;
}

#cro_footer_right span.booked{
  background-color: #e44;
}