.input-time {
    width: 5pc;
    height: 1.5pc;
    display: inline-block;
    border: 1px solid black;
    margin: 5px;
    padding: 1px;
  
        
  }

.keyboard-focus {
    /*width: 5.8em;
    height: 2.3em;
    display: inline-block;
    margin-bottom: -11px;*/
}


.input-time:active {
    background: yellow;
}


.my-container {
    display: inline-block;
    padding: 5px;
    background: gray;
}

.my-button {
    padding: 5px;
    margin: 5px;
    border: 1px solid darkgray;
}

/* impide seleccionar el texto */
.no-select {
  user-select: none;          /* evita selección de texto */
  pointer-events: none;       /* bloquea clics y foco */
  opacity: 0.8;               /* opcional: aspecto de campo bloqueado */
}

div#my-keyboard-container {
  width: 100%;
  background: #000000bd;
  border-top: 2px solid #0000003b;
  padding: 4px;
  position: fixed;
  z-index: 10000;
  text-align: center;
  bottom: 0;
  border-radius: 0px;
}

div#my-keyboard-container > [id*="button"] {
    font-weight: 700;
    border-radius: 5px;
    box-shadow: 1px 1px 1px #c7c7c7;
    min-width: 39px;
    border: 1px solid #fcfcfc;
    background: #ffffff;
    font-size: 17px;
}


.text {
    font-size:28px;
    font-family:helvetica;
    font-weight:bold;
    color:#71d90b;
    text-transform:uppercase;
  }
  
.keyboard-focus {
    border: none;
    caret-color: transparent;
    animation-name: parpadeo;
    animation-duration: 0.6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  
    -webkit-animation-name:parpadeo;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

input[keyboard="custom"] {
  caret-color: transparent;
}

  
  @-moz-keyframes parpadeo{  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
  }
  
  @-webkit-keyframes parpadeo {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
  }
  
  @keyframes parpadeo {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
  }


  /*CALENDAR*/

  .my-calendar  .table td, .my-calendar  .table th {
    padding: 3px;
    vertical-align: top;
    border: none;
}

.my-calendar {
    font-weight: 500;
    padding: 0;
    margin: 6px;
    font-family: arial;
}

.my-calendar  td, .my-calendar  th {
  text-align: center;
}

.my-calendar table {
    border: 0px;
}

.button-calendar-active {
  color: blue;
  font-weight: 800;
}

/*.button-calendar:focus {
  color: blue;
  font-weight: 600;
  border: none;
  background: none;
}*/

.button-calendar {
  border: none;
  background: none;
}

.my-calendar .header {
  display: inline-block;
}

button#button-12, button#button-13 {
  width: 4em;
}