body {
    font-family: Arial;
    font-size: 14px;
}
body > span,
body > h1 {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
}
span {
    color: #888888;
}
span > b {
    color: black;
}
.border-box {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
calendar {
    float: left;
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background: white;
    /*width: 300px;*/
    border: solid 1px #CCC;
    margin-bottom: 10px;
}
calendar > div.header {
    float: left;
    width: 100%;
    background: #2875C7;
    height: 40px;
    color: white;
    position: relative;
}
calendar > div.header > * {
    height: 40px;
    line-height: 40px !important;
    display: inline-block;
    vertical-align: middle;
}
calendar > div.header > i {
    float: left;
    font-size: 1.125em;
    font-weight: bold;
    position: relative;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    cursor: pointer;
}
calendar > div.header > i.fa-angle-left {
    text-align: left;
}
calendar > div.header > i.fa-angle-right {
    text-align: right;
    margin-left: -40px;
}
calendar > div.header > span {
    float: left;
    width: 100%;
    font-weight: bold;
    text-transform: uppercase;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-left: 50px;
    margin-left: -40px;
    text-align: center;
    padding-right: 40px;
    color: inherit;
}
calendar > div.week {
    float: left;
    width: 100%;
}
calendar > div.week:first-child {
    border-top: none;
}
calendar > div.week > span.day {
    float: left;
    width: 14.28571429%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-size: 1 em;
    text-align: center;
    height: 40px;
    line-height: 30px !important;
    display: inline-block;
    vertical-align: middle;
    background: white;
    cursor: pointer;
    color: black;
}
calendar > div.week > span.day:first-child {
    border-left: none;
}
calendar > div.week > span.day.today {
    background: none;
}
calendar > div.week > span.day.today > .roundSpan {
    background: #badaf5;
    color:#000;
}
calendar > div.week > span.day.available > .roundSpan {
    color: #000;
}
calendar > div.week > span.day.today.unavailable > .roundSpan {
    color: #f1f1f1;
}
calendar > div.week > span.day.different-month.available > .roundSpan{
    color: #bbbbbb;
}
calendar > div.week > span.day.different-month.unavailable > .roundSpan{
    background: #f1f1f1;
    color: #C0C0C0;
}
calendar > div.week > span.day.selected {
    background: none !important;
}
calendar > div.week > span.day.selected > .roundSpan {
    background: #2875C7;
    color: #fff !important;
}
calendar > div.week > span.day.available > .roundSpan{
    /*background-color: #fafad2;*/
    background: #e1ffe1;
}
calendar > div.week > span.day.available.selected > .roundSpan {
    background-color: #2875C7;
}
calendar > div.week > span.day.available.today > .roundSpan {
    background-color: #2875C7;
}
calendar > div.week.names > span {
    color: #2875C7;
    font-weight: bold;
}

.unavailable {
    text-decoration: none !important;
}
.roundSpan{
    padding: 7px;
    border-radius: 50%;
    cursor: pointer;
}
.unavailable .roundSpan {
    color: #f1f1f1 ;
    background: #ccc;
}
.noDecoration{
    text-decoration: none !important;
}

#calendar .list-group-item{
    position: relative;
    display: block !important;
    padding: 10px 15px !important;
    margin: 0 0 5px 0  !important;
    border: 1px solid #ddd;
    cursor: pointer;
}
calendar > div.week > span.day.available.optionalDate > .roundSpan{
    background: #ffece1;
}
calendar > div.week > span.day.available.selected.optionalDate > .roundSpan {
    background-color: #2875C7;
}
calendar > div.week > span.day.available.today.optionalDate > .roundSpan {
    background-color: #2875C7;
}