.calendarioHtml {
    max-width: 780px;
    margin-bottom: 40px;
  }
  .calendarioHtml .table-container{
      text-align:center;
  }
  .calendarioHtml .actualizado {
      font-size:12px;
      width:100%;
      text-align:center;
      margin:10px 0 30px;
  }
  .calendarioHtml table {
    display: table;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 2px;
    width:100%;
    position:relative;
    top:-37px;
    z-index:77;
  }
  #mes-siguiente, #mes-anterior {
      position:relative;
      top:-10px;
      z-index:80;
      width:30px;
      height: 30px;
      background: url(../../img/temp1/ico-flecha-data-picker-izq.png) no-repeat left center;
    background-size:cover;
  }
  #mes-siguiente {
    background: url(../../img/temp1/ico-flecha-data-picker-der.png) no-repeat left center;
    background-size:cover;
  }
  .mesAnho{
    padding: 0;
    color: #000 !important; 
    font-weight: 700 !important;
    font-size: 16px !important;
  }
  /* Styling for the column headers (days of the week) */
  .calendarioHtml table thead th {
    padding: 0 0.5em;
    color: #9b9b9b;
    font-size: 11px;
    text-align: center;
  }
  /* Styling for the individual cells (days) */
  .calendarioHtml td {
    position: relative;
    width: 14%;
    min-width:100px;
    height: 68px;
    padding: 0;
    text-align: center;
    vertical-align: top;
    background-color: #e4e7d8;
    border-bottom: 5px solid #6e8823;
  }
  /* Styling for the date numbers */
  .calendarioHtml .precio {
    display: block;
    padding: 0.10em 0.25em 0;
    font-size: 14px!important;
    text-align: center;
    font-weight: 400;
    vertical-align: middle;
    word-break: break-all;
    hyphens: auto;
    height:20px;
  }
  .calendarioHtml .dispo {
    display: block;
    padding: 0 0.25em 0.30em;
    font-size: 9px!important;
    line-height: 9px;
    text-align: center;
    vertical-align: middle;
    height:30px;
  }
  .calendarioHtml .dia {
    display: block;
    min-width: 100%;
    padding: 2px 0;
    color: #202020;
    font-weight: 600;
    font-size: 11px;
    text-align: center;
    border-top: 2px solid #fff;
    position:absolute;
    height:15px;
    bottom:5px;
  }
  
  .calendarioHtml .diaPasado {
    background-color: #f8f8f8;
    border-color: #ccc;
  }
  .calendarioHtml .diaPasado .dia { color: #9d9d9d; }
  
  .calendarioHtml .diaActual {
    background-color: #506615;
    border-color: #e4e7d8;
  }
  
  .calendarioHtml .ocupado {
      background-color: #e74c3c;
      border-color: #c0392b;
  }
  /*  .calendarioHtml .ocupado.entradaCalendarioFront, .calendarioHtml .salidaCalendarioFront {
    background:url(../../img/temp1/fondo-entrada.jpg) no-repeat #e74c3c;
    background-size:50% 100%;
  }
  
 .calendarioHtml .ocupado.entradaCalendarioFront:before {
    overflow: hidden;
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 50%;
    height: 5px;
    background: #6e8823;
  }
  .calendarioHtml .salidaCalendarioFront {
    background-position: right;
    background-size:70% 100%;
  }
  .calendarioHtml .salidaCalendarioFront:before {
    content: '';
    overflow: hidden;
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 30%;
    height: 5px;
    background: #c0392b;
  }*/
  .calendarioHtml .ocupado .precio {
      color:#202020!important;
      vertical-align:top;
      height:45px;
      display:inherit;
      font-weight:normal!important;
      font-size:12px!important;
      display:block;
    text-align:center;
    display: none;
  }
  .cuadrados div {
    width:200px;
    font-size:12px;
    font-weight: bold;
    margin:0 auto 6px;
    text-align: left;
    position: relative;
    padding-left: 25px;
  }
  .cuadrados div.preciopersona:before {
    background: #6e8823;
  }
  .cuadrados div:before {
    content:'';
    width:15px;
    height: 15px;
    background: #c0392b;
   position:absolute;
   left:0;
  }
  .cuadrados div.preciopersona:before {
    background: #6e8823;
  }
  .calendarioHtml .ocupado .dispo, .calendarioHtml .ocupado .preciomov {
      display:none;
  }
  #modalCalendario h2{
      margin:0 0 10px;
      text-align:center;
  }
  .ocupacion .marcar {float:right;background:url(../img/ico-click.png) no-repeat left center;background-size:15px;padding-left:20px;font-size:13px;font-weight:bold;margin:1em 0;text-align:right;}
  #modalCalendario p{
      margin:0;
  }
  @media only screen and (max-width: 1040px) {
  .calendarioHtml td {min-width:90px}
  }
  @media only screen and (max-width: 970px) {
  .calendarioHtml .dispo {font-size:11px!important;}
  }
  @media only screen and (max-width: 930px) {
      .calendarioHtml td {min-width:80px}
      .calendarioHtml .dispo {font-size:10px!important;}
  }
  @media only screen and (max-width: 840px) {
      #modalCalendario	{width:100%;}
      
  }
  @media only screen and (min-width: 771px) {
  
  }
  @media only screen and (max-width: 768px) {
      #modalCalendario	{width:100%;padding:30px 10px;}
      .calendarioHtml .precio {font-size:13px!important;}
      .calendarioHtml .dispo {font-size:10px!important;}
    .calendarioHtml .ocupado .precio {height:46px;font-size:12px!important;font-weight:normal;}
    #mes-siguiente, #mes-anterior {top:-5px}
      
  }
  @media only screen and (max-width: 680px) {
      .calendarioHtml td {min-width:60px}
      #modalCalendario h2 {width:calc(100% - 50px);}
  }
  @media only screen and (max-width: 580px) {
    .calendarioHtml td {height: 55px;}
      .calendarioHtml .dispo {padding:0 0.25em 2.3em;display: none;}
      
  }
  @media only screen and (max-width: 550px) {
    #modalCalendario {padding:30px 10px;}
   
      .calendarioHtml .ocupado .precio {height:47px;font-size:10px!important;display:none;}
      .calendarioHtml .ocupado .preciomov {display:none;font-size:10px!important;padding:10px 0;}
      #modalCalendario	{top:20px;}
      .calendarioHtml .precio {font-size: 12px !important;}
      
  }
  @media only screen and (max-width: 450px) {
  .calendarioHtml .ocupado .precio {color:#e74c3c!important;}
  .calendarioHtml td {min-width:50px}
  }
  
  @media only screen and (max-width: 380px) {
  .calendarioHtml .dispo {font-size:10px!important;}
  .calendarioHtml td {min-width:40px}
  }