@font-face { 

  src: url(../web/open-sans/regular.ttf); 

  font-family: 'Open-Sans-Regular';

}



html {

  font-family: 'Open-Sans-Regular';

  font-size: 15px;

  line-height: 1.4;

  color: #444;

}



body {

  margin: 0;

  font-size: 1em;

}



.wrapper {

  margin: 15px auto;

  max-width: 1100px;

}



.container-calendar {

  max-width: 485px;

  margin: 0 auto;

  overflow: auto;
  border:1px solid #E8ECF1;
    border-radius: 4px;
    margin-bottom: 53px;

}



.button-container-calendar button {

  position: relative;

  cursor: pointer;

  display: inline-block;

  zoom: 1.5;

  color: #fff;
    padding: 0 15px;
    top: 10px;

  outline: none;
    border: none;
    background: none;

}



.table-calendar {

  border-collapse: collapse;

  width: 100%;

  padding: 0;

  border-top: 1px solid lightblue;

}



.table-calendar td, .table-calendar th {

  padding: 15px 18px;

  text-align: center;

  vertical-align: top;
    text-transform: uppercase;
    font-family: 'robotomedium';
    font-size: 16px;
    color: #4B93D2;
    border: 1px solid #E8ECF1;

}
#thead-month {
    background: #F5F7F9;
}
.table-calendar th {
    font-size: 14px;
    color: #5E6772;
    padding: 10px 20px;
}

#monthHeader {

  text-transform: capitalize;

  color: #fff;

  margin: 0;

  font-size: 18px;
  font-family: 'Segoe UI Bold';
    display: inline-block;
}
.month_year {
    padding: 12px 0;
}


#yearHeader {

    font-size: 18px;

  color: #fff;
  font-family: 'Segoe UI Bold';
    display: inline-block;

}



.date-picker {

  cursor: pointer;

}



.date-picker.selected {

  background: #4B93D2;

}



.date-picker.selected span {

  color: #fff;

}




.date-picker:nth-child(1), .red-text {
    border-left: none;
}
.date-picker:nth-child(7) {
    border-right: none;
}




/* friday */

.date-picker:nth-child(6) {



}



#monthAndYear {

  text-align: center;

  margin-top: 0;

}



.button-container-calendar {

  position: relative;

  overflow: hidden;

  clear: both;

  text-align: center;
  background: #4B93D2;

}



#previous {

  float: left;

}



#next {

  float: right;

}



.footer-container-calendar {

  margin-top: 1em;

  border-top: 1px solid #dadada;

  padding: 10px 0;

  display: none;

}



.footer-container-calendar select {

  cursor: pointer;

  display: inline-block;

  zoom: 1;

  background: #ffffff;

  color: #585858;

  border: 1px solid #bfc5c5;

  border-radius: 3px;

  padding: 5px 1em;

}



#date-picked {

  text-align: center;

  color: #999;

  border-top: 1px solid lightblue;

  padding-top: 15px;

  font-size: 11pt;

  font-weight: bold;

}
@media only screen and (max-width: 990px) {
        #monthHeader, #yearHeader {
        font-size: 13px;
    }
    .button-container-calendar button {
        zoom: 1;
    }
    .table-calendar td {
        font-size: 12px;
        padding: 10px;
    }
    .table-calendar th {
        font-size: 8px;
        padding: 8px 6px;
    }
    .container-calendar {
        max-width: 300px;
    }
}
@media only screen and (max-width: 767px) {
    .btn-green {
        background: #E8ECF1;
        border: 1px solid #B6C2D0;
        color: #515F6E;
    }
    .btn-green:after {
        background-image: url(../img/right-arrow-grey-icon.png);
        width: 19px;
        height: 12px;
    }
}