@import url(https://fonts.googleapis.com/css?family=Play&subset=latin,cyrillic-ext);


body{
  font-family:'Play', sans-serif;
}
/* DISPOSITIVOS MOVILES */
@media screen and (max-width: 400px) {
  #formularioDatos{
    position:absolute;
    left:2%;
    width:250px;
    display:inline-block;
    margin:auto;  
  }
  #Cargando {
    width: .01em;
    height: .01em;
    background: white;
    position: absolute;
    z-index: 2;
    left: 12%;
    top: 15%;
    border:2em solid #aaa;
    Border-bottom-color:white;
    transform: translate(-50%,-50%) rotate(0deg);
    border-radius: 100%;
            animation: cargando 1.5s infinite linear;
      -webkit-animation: cargando 1.5s infinite linear;
      box-shadow:0 0 0 1em #aaa;
  }
  @keyframes cargando {
    from {
      transform:translate(-50%,-50%) rotate(-360deg);
    }
  }
  #calendario{
    position:relative;
    left:center;
    width:250px;
    display:inline-block;
    margin:auto;
  }
  #div01 {
    position: relative; /* Utiliza relative en lugar de absolute */
    top: -50px; /* Ajusta este valor para el espacio entre calendario y div01 */
    width: 250px;
    margin: auto;
    background: #ECF0F1;
    font-size: 14px;
    text-align: left;
    line-height: 110%;
  }
  #formularioDatos {
    position: relative; /* Utiliza relative en lugar de absolute */
    top: 10px; /* Ajusta este valor para el espacio entre calendario y div01 */
    width: 250px;
    margin: auto;
    font-size: 14px;
    text-align: left;
    line-height: 110%;
  }
  #div03{
    position:absolute;
    top:410px;
    display:inline-block;
    width:250px;
    left: 2%;
    
    margin:auto;
    font-size:14px;
    text-align:left;
    line-height:110%;
  }
  #div02{
    position:absolute;
    top:410px;
    display:inline-block;
    width:250px;
    left: 2%;
    height:100px;
    margin:auto;
    font-size:14px;
    text-align:left;
    line-height:110%;
  }
  #mesname{
    position:relative;
    top:-20px;
    display:inline-block;
    width:245px;
    height:25px;
    margin:auto;
    background:#96ac61;
    border-radius:4px;
    margin:0.3px;
    font-size:20px;
    text-align:center;
    line-height:110%;
    z-index:-5;
  }
  #dianame{
    position:relative;
    display:inline-block;
    margin:auto;
  }
  .semana{
    position:relative;
    top:-18px;
    display:inline-block;
    width:31px;
    height:25px;
    background:#ECF0F1;
    border:1px solid #ECF0F1;
    border-radius:4px;
    margin:2px;
    font-size:11px;
    text-align:center;
    line-height:150%;
  }
  .off {
    visibility:hidden;
  }
  .pasado{
    position:relative;
    top:-16px;
    display:inline-block;
    width:31px;
    height:50px;
    background:#eef2f5;
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }
  .pasado:hover{
    cursor: default;
  }
  .dia{
    position:relative;
    top:-16px;
    display:inline-block;
    width:31px;
    height:50px;
    background:#ced8db;
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }
  .precio{
    position:relative;
    top:+30px;
    left:-12px;
  }
  .diahoy{
    position:relative;
    top:-16px;
    display:inline-block;
    width:31px;
    height:50px;
    background:#565758;
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }
  .dia:hover{
    border: 2px solid #0a0505;
    cursor: pointer;
  }
  .ocupado{
    position:relative;
    top:-16px;
    display:inline-block;
    width:31px;
    height:50px;
    background:#e29198;
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }
  .ocupado:hover{
    border: 2px solid #0a0505;
    cursor: pointer;
  }
  
  .ocupado2{
    position:relative;
    top:-16px;
    display:inline-block;
    width:31px;
    height:50px;
    background:#e29198;
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }.ocupado2:hover{
    border: 2px solid #0a0505;
    cursor: pointer;
  }
  .ocupadoEntradaSalida:hover{
    border: 2px solid #0a0505;
    cursor: pointer;
  }
  .ocupadoEntrada:hover{
    border: 2px solid #0a0505;
    cursor: pointer;
  }
  .ocupadoSalida:hover{
    border: 2px solid #0a0505;
    cursor: pointer;
  }
  .ocupadoEntradaServicio:hover{
    border: 2px solid #0a0505;
    cursor: pointer;
  }
  .ocupadoEntradaSalidaServicio:hover{
    border: 2px solid #0a0505;
    cursor: pointer;
  }
  .ocupadoEntradaServicio{
    position:relative;
    top:-16px;
    display:inline-block;
    width:31px;
    height:50px;
    background: linear-gradient(to bottom right, #ced8db 0%, #ced8db 50%, #c9ee22 50%, #e29198 100%);
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }
  .ocupadoEntrada{
    position:relative;
    top:-16px;
    display:inline-block;
    width:31px;
    height:50px;
    background: linear-gradient(to bottom right, #ced8db 0%, #ced8db 50%, #e29198 50%, #e29198 100%);
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }.ocupadoSalida{
    position:relative;
    top:-16px;
    display:inline-block;
    width:31px;
    height:50px;
    background: linear-gradient(to bottom right, #e29198 0%, #e29198 50%, #ced8db 50%, #ced8db 100%);
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }
  .ocupadoEntradaSalidaServicio{
    position:relative;
    top:-16px;
    display:inline-block;
    width:31px;
    height:50px;
    background: rgb(226,145,152);
    background: linear-gradient(130deg, rgba(226,145,152,1) 0%, rgba(226,145,152,1) 44%, rgba(0,0,0,1) 46%, rgba(4,0,0,1) 50%, #c9ee22 51%, rgba(226,145,152,1) 100%);
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }.ocupadoEntradaSalida{
    position:relative;
    top:-16px;
    display:inline-block;
    width:31px;
    height:50px;
    background: rgb(226,145,152);
    background: linear-gradient(130deg, rgba(226,145,152,1) 0%, rgba(226,145,152,1) 44%, rgba(0,0,0,1) 46%, rgba(4,0,0,1) 50%, rgba(226,145,152,1) 51%, rgba(226,145,152,1) 100%);
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }
  .selectSalida{
    position:relative;
    top:-16px;
    display:inline-block;
    width:31px;
    height:50px;
    background: linear-gradient(to bottom right, #49c5eb 0%, #49c5eb 50%, #ced8db 50%, #ced8db 100%);
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }
  .selectEntradaOcupado{
    position:relative;
    top:-16px;
    display:inline-block;
    width:31px;
    height:50px;
    background: linear-gradient(to bottom right, #e29198 0%, #e29198 50%, #49c5eb 50%, #49c5eb 100%);
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }.selectSalidaOcupado{
    position:relative;
    top:-16px;
    display:inline-block;
    width:31px;
    height:50px;
    background: linear-gradient(to bottom right, #49c5eb 0%, #49c5eb 50%, #e29198 50%, #e29198 100%);
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }
  .selectEntrada{
    position:relative;
    top:-16px;
    display:inline-block;
    width:31px;
    height:50px;
    background: linear-gradient(to bottom right, #ced8db 0%, #ced8db 50%, #49c5eb 50%, #49c5eb 100%);
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }
  .select{
    position:relative;
    top:-16px;
    display:inline-block;
    width:31px;
    height:50px;
    background:#49c5eb;
    border:1px solid #49c5eb;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }
  #anterior {
    position:relative;
    left:12px;
    top:27px;
    width:20px;
    height:22px;
    line-height:140%;
    cursor:pointer;
  }
  
  #posterior {
    position:relative;
    left:220px;
    top:5px;
    width:20px;
    height:22px;
    line-height:140%;
    cursor:pointer;
  }
  #divGestion {
    position: relative;
    top: -80px;
    width: 250px;
    margin: auto;
    font-size: 14px;
    text-align: left;
    line-height: 110%;
  }
}
/* DISPOSITIVOS PC */
@media screen and (min-width: 401px) {

  #divGestion {
    position: relative;
    top: -80px;
    width: 350px;
    margin: auto;
    font-size: 14px;
    text-align: left;
    line-height: 110%;
  }
  #formularioDatos{
    position:absolute;
    left:2%;
    width:250px;
    display:inline-block;
    margin:auto;  
  }
  #Cargando {
    width: .01em;
    height: .01em;
    background: white;
    position: absolute;
    z-index: 2;
    left: 12%;
    top: 15%;
    border:2em solid #aaa;
    Border-bottom-color:white;
    transform: translate(-50%,-50%) rotate(0deg);
    border-radius: 100%;
            animation: cargando 1.5s infinite linear;
      -webkit-animation: cargando 1.5s infinite linear;
      box-shadow:0 0 0 1em #aaa;
  }
  @keyframes cargando {
    from {
      transform:translate(-50%,-50%) rotate(-360deg);
    }
  }

  #calendario{
    position:relative;
    left:center;
    width:350px;
    display:inline-block;
    margin:auto;
  }
  .dia {
    position: relative;
    top: -16px;
    display: inline-block;
    width: 45px; /* Ajusta el ancho en px para pantallas grandes */
    height: 65px; /* Ajusta la altura en px para pantallas grandes */
    background: #ced8db;
    border: 1px solid #ECF0F1;
    border-radius: 6px;
    margin: 2px;
    font-size: 14px; /* Ajusta el tamaño de fuente en px para pantallas grandes */
    text-align: center;
    line-height: 150%;
  }
  #div01 {
    position: relative;
    top: -10px;
    width: 350px;
    margin: auto;
    background: #ECF0F1;
    font-size: 14px;
    text-align: left;
    line-height: 110%;
  }
  #formularioDatos {
    position: relative; /* Utiliza relative en lugar de absolute */
    top: 10px; /* Ajusta este valor para el espacio entre calendario y div01 */
    width: 350px;
    margin: auto;
    font-size: 14px;
    text-align: left;
    line-height: 110%;
  }
  #div03{
    position:absolute;
    top:410px;
    display:inline-block;
    width:350px;
    left: 2%;
    margin:auto;
    font-size:14px;
    text-align:left;
    line-height:110%;
  }
  #div02{
    position:absolute;
    top:410px;
    display:inline-block;
    width:350px;
    left: 2%;
    height:100px;
    margin:auto;
    font-size:14px;
    text-align:left;
    line-height:110%;
  }
  #mesname{
    position:relative;
    top:-20px;
    display:inline-block;
    width:350px;
    height:25px;
    margin:auto;
    background:#96ac61;
    border-radius:4px;
    margin:0.3px;
    font-size:20px;
    text-align:center;
    line-height:110%;
    z-index:-5;
  }
  #dianame{
    position:relative;
    display:inline-block;
    margin:auto;
  }
  .semana{
    position:relative;
    top:-18px;
    display:inline-block;
    width:46px;
    height:35px;
    background:#ECF0F1;
    border:1px solid #ECF0F1;
    border-radius:4px;
    margin:2px;
    font-size:11px;
    text-align:center;
    line-height:150%;
  }
  .off {
    visibility:hidden;
  }
  .pasado{
    position:relative;
    top:-16px;
    display:inline-block;
    width:45px;
    height:65px;
    background:#eef2f5;
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }
  .pasado:hover{
    cursor: default;
  }

  .precio{
    position:absolute;
    top:+30px;
    left:4px;
  }
  .diahoy{
    position:relative;
    top:-16px;
    display:inline-block;
    width:45px;
    height:64px;
    background:#565758;
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }
  .dia:hover{
    border: 2px solid #0a0505;
    cursor: pointer;
  }
  .ocupado{
    position:relative;
    top:-16px;
    display:inline-block;
    width:45px;
    height:65px;
    background:#e29198;
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }
  .ocupado:hover{
    border: 2px solid #0a0505;
    cursor: pointer;
  }

  .ocupado2{
    position:relative;
    top:-16px;
    display:inline-block;
    width:45px;
    height:65px;
    background:#e29198;
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }.ocupado2:hover{
    border: 2px solid #0a0505;
    cursor: pointer;
  }
  .ocupadoEntradaSalida:hover{
    border: 2px solid #0a0505;
    cursor: pointer;
  }
  .ocupadoEntrada:hover{
    border: 2px solid #0a0505;
    cursor: pointer;
  }
  .ocupadoSalida:hover{
    border: 2px solid #0a0505;
    cursor: pointer;
  }
  .ocupadoEntradaServicio:hover{
    border: 2px solid #0a0505;
    cursor: pointer;
  }
  .ocupadoEntradaSalidaServicio:hover{
    border: 2px solid #0a0505;
    cursor: pointer;
  }
  .ocupadoEntradaServicio{
    position:relative;
    top:-16px;
    display:inline-block;
    width:45px;
    height:65px;
    background: linear-gradient(to bottom right, #ced8db 0%, #ced8db 50%, #c9ee22 50%, #e29198 100%);
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }
  .ocupadoEntrada{
    position:relative;
    top:-16px;
    display:inline-block;
    width:45px;
    height:65px;
    background: linear-gradient(to bottom right, #ced8db 0%, #ced8db 50%, #e29198 50%, #e29198 100%);
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }.ocupadoSalida{
    position:relative;
    top:-16px;
    display:inline-block;
    width:45px;
    height:65px;
    background: linear-gradient(to bottom right, #e29198 0%, #e29198 50%, #ced8db 50%, #ced8db 100%);
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }
  .ocupadoEntradaSalidaServicio{
    position:relative;
    top:-16px;
    display:inline-block;
    width:45px;
    height:65px;
    background: rgb(226,145,152);
    background: linear-gradient(130deg, rgba(226,145,152,1) 0%, rgba(226,145,152,1) 44%, rgba(0,0,0,1) 46%, rgba(4,0,0,1) 50%, #c9ee22 51%, rgba(226,145,152,1) 100%);
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }.ocupadoEntradaSalida{
    position:relative;
    top:-16px;
    display:inline-block;
    width:45px;
    height:65px;
    background: rgb(226,145,152);
    background: linear-gradient(130deg, rgba(226,145,152,1) 0%, rgba(226,145,152,1) 44%, rgba(0,0,0,1) 46%, rgba(4,0,0,1) 50%, rgba(226,145,152,1) 51%, rgba(226,145,152,1) 100%);
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }
  .selectSalida{
    position:relative;
    top:-16px;
    display:inline-block;
    width:45px;
    height:65px;
    background: linear-gradient(to bottom right, #49c5eb 0%, #49c5eb 50%, #ced8db 50%, #ced8db 100%);
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }
  .selectEntradaOcupado{
    position:relative;
    top:-16px;
    display:inline-block;
    width:45px;
    height:65px;
    background: linear-gradient(to bottom right, #e29198 0%, #e29198 50%, #49c5eb 50%, #49c5eb 100%);
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }.selectSalidaOcupado{
    position:relative;
    top:-16px;
    display:inline-block;
    width:45px;
    height:65px;
    background: linear-gradient(to bottom right, #49c5eb 0%, #49c5eb 50%, #e29198 50%, #e29198 100%);
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }
  .selectEntrada{
    position:relative;
    top:-16px;
    display:inline-block;
    width:45px;
    height:65px;
    background: linear-gradient(to bottom right, #ced8db 0%, #ced8db 50%, #49c5eb 50%, #49c5eb 100%);
    border:1px solid #ECF0F1;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }
  .select{
    position:relative;
    top:-16px;
    display:inline-block;
    width:45px;
    height:65px;
    background:#49c5eb;
    border:1px solid #49c5eb;
    border-radius:6px;
    margin:2px;
    font-size:11px;
    text-align: center;
    line-height:150%;
  }
  #anterior {
    position:relative;
    left:12px;
    top:27px;
    width:20px;
    height:22px;
    line-height:140%;
    cursor:pointer;
  }

  #posterior {
    color:#030303;
    position:relative;
    left:320px;
    top:5px;
    width:20px;
    height:22px;
    line-height:140%;
    cursor:pointer;
  }
}