@font-face {
    font-family: "MyriadPro";
    src: url(../fonts/MyriadPro-Regular.eot); /* IE */
    src: local("MyriadPro"), url(../fonts/MyriadPro-Regular.ttf) format("truetype"); /* resto de navegadores */
}

*{
  font-family: 'MyriadPro';
  text-transform:uppercase;
}

.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

.done-true {
    text-decoration: line-through;
    color: #ddd;
}
.form-control[disabled], .form-control[readonly], .fieldset[disabled], .form-control {
    cursor: pointer;
    background-color: white;
}
/* Custom Programarte */
.borde-gris{
  /* border:1px solid rgba(0,0,0,0.4); */
}
.altura-a-pantalla{
  height: 100vh;
  width:100vw;
}
.mensaje-usuarios{
  /* width:605px; */
  height:100%;
}
.contenedor-slider{
  height: 68.5%;
  padding: 0px;
}
.contenedor-cajitas{
  height: 31.5%;
  padding: 0px;
}
.cajita-item{
  height: 100%;
  padding:0;
}
.footer-rotativo{
   /* margin-top: 1%; */
   height: 31.5%;
}
.contenedor-principal-modulo{
  height: 100%;
  display: flex;
}
.no-padding{
  padding: 0px !important;
}
.no-margin{
  margin: 0px !important;
}

/********* Modulo Slider *********/
.container-panel-slider{
  display: flex;
  flex-flow: row;
  width: 100%;
  height: 100%;
}
.contenido-carrusel{
  height: 100%;
  width: 100%;
}
.contenido-carrusel div{
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
  /* width: 100%; */
}
.main-image{
  margin: auto;
  display: flex;
  width: 100%;
  max-width: 100%;
  height: 100%;
}


/********* Modulo Sesiones *********/
@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}
.container-global{
  display: flex;
  flex-flow: column;
  height:100%;
}
.container-sesiones{
  width: 100%;
  height:100%;
  border-radius: 0px;
  border:0px;
  background-image: url('../images/fondo_lista.png');
  background-size: 100% auto;
  margin: 0
}
.panel-header{
  border-radius: 0px !important;
  border: 0 !important;
  background:#4d4d4d !important;
  height:100px;
}
.panel-header h3{
  font-size:28px;
  margin-top:25px;
  height:25px;
  font-weight:bold;
}
/* .panel-sesion{
  display: flex;
  flex-flow: column;
  align-content: center;
  height: 100%;
  width: 100%;
} */

/********* Modulo Cajitas *********/
.fecha{
  background-color: #eee;
  height: 100%;
  display: flex;
  flex-flow: row;
  align-content: center;
}
.formato{
  width: 100%;
  height: 100%;
}
.nombreday, .month, .day, .year, .datetime{
  color: #333;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
    font-size: 28px;
}

 .month{
  background: #65c623;
  height: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 40px;
}
.day{
  height: 40%;
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: 60px;
}
.nombreday{
  height: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: 30px;
}

/*

.year{
  font-size: 20px;
}
.datetime{
  font-size: 28px;
  height: 42px;
}
*/
.hora{
  background-color: #4d4d4d;
  height: 100%;
  display: flex;
  flex-flow: row;
  align-content: center;
}


/********* Modulo Texto Rotativo *********/
@keyframes moverTextoRotativo {
  from { left: 120%; }
  to { left: -120% }
}
.moverTextoRotativo{
  position:relative;
  width: 1000px;
  left:100%;
  display:inline-block;
  animation: moverTextoRotativo 10s infinite;
  animation-timing-function: linear;
}
.item-texto{
  position:relative;
  width: 1000px;
  left:120%;
  display:inline-block;
}
.contenedor-principal-modulo-footer{
  width: 100%;
  height: 100%;
  background-color:#1f2d42;
}
.texto-container{
  position: relative;
  z-index: 10;
  padding-top: 20px;
  text-align: center;
  width:100%;
  height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  overflow:hidden;
}
.texto-container p span{
  font-weight:bold;
  font-size: 30px;
}
.blanco{
  color:#fff;
}
.con_datos{
  width:100%;
  height:100%;
}
.con_datos .carousel-inner{
  height:100%;
}
.con_datos .text-center{
  height:100%;
}
/*  MODULO DE RELOJ */
/*-------------------------
     IMAGE ALARMA
--------------------------*/

#clock .alarm{
  width:16px;
  height:16px;
  bottom:20px;
  background:url('../assets/images/alarma.jpg');
  position:absolute;
}
/*-------------------------
     TEXTO AM/PM
--------------------------*/
#clock .ampm{
  position: absolute;
  right: 20px;
  top: 95px;
  font-size: 25px;
  text-align: center;
  color:#fff;
}
/*-------------------------
     pantalla
--------------------------*/
#clock{
  width: 100%;
  height: 50%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#clock .display{
}
#clock.light .digits div span{
  background-color:#fff;
  border-color:#fff;
}
#clock.light .digits div.dots:before,
#clock.light .digits div.dots:after{
  background-color:#fff;
}


/*-------------------------
  The Digits
--------------------------*/

#clock .digits{
  width: auto;
  display: block;
  margin: 0 auto;
  text-align: center;
}
#clock .digits div{
  text-align:left;
  position:relative;
  width: 28px;
  height:50px;
  display:inline-block;
  margin:0 4px;
}

#clock .digits div span{
  opacity:0;
  position:absolute;
  -webkit-transition:0.25s;
  -moz-transition:0.25s;
  transition:0.25s;
}

#clock .digits div span:before,
#clock .digits div span:after{
  content:'';
  position:absolute;
  width:0;
  height:0;
  border:5px solid transparent;
}

#clock .digits .d1{            height:5px;width:16px;top:0;left:6px;}
#clock .digits .d1:before{    border-width:0 5px 5px 0;border-right-color:inherit;left:-5px;}
#clock .digits .d1:after{    border-width:0 0 5px 5px;border-left-color:inherit;right:-5px;}

#clock .digits .d2{            height:5px;width:16px;top:24px;left:6px;}
#clock .digits .d2:before{    border-width:3px 4px 2px;border-right-color:inherit;left:-8px;}
#clock .digits .d2:after{    border-width:3px 4px 2px;border-left-color:inherit;right:-8px;}

#clock .digits .d3{            height:5px;width:16px;top:48px;left:6px;}
#clock .digits .d3:before{    border-width:5px 5px 0 0;border-right-color:inherit;left:-5px;}
#clock .digits .d3:after{    border-width:5px 0 0 5px;border-left-color:inherit;right:-5px;}

#clock .digits .d4{            width:5px;height:14px;top:7px;left:0;}
#clock .digits .d4:before{    border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;}
#clock .digits .d4:after{    border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;}

#clock .digits .d5{            width:5px;height:14px;top:7px;right:0;}
#clock .digits .d5:before{    border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;}
#clock .digits .d5:after{    border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;}

#clock .digits .d6{            width:5px;height:14px;top:32px;left:0;}
#clock .digits .d6:before{    border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;}
#clock .digits .d6:after{    border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;}

#clock .digits .d7{            width:5px;height:14px;top:32px;right:0;}
#clock .digits .d7:before{    border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;}
#clock .digits .d7:after{    border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;}


/* 1 */

#clock .digits div.one .d5,
#clock .digits div.one .d7{
  opacity:1;
}

/* 2 */

#clock .digits div.two .d1,
#clock .digits div.two .d5,
#clock .digits div.two .d2,
#clock .digits div.two .d6,
#clock .digits div.two .d3{
  opacity:1;
}

/* 3 */

#clock .digits div.three .d1,
#clock .digits div.three .d5,
#clock .digits div.three .d2,
#clock .digits div.three .d7,
#clock .digits div.three .d3{
  opacity:1;
}

/* 4 */

#clock .digits div.four .d5,
#clock .digits div.four .d2,
#clock .digits div.four .d4,
#clock .digits div.four .d7{
  opacity:1;
}

/* 5 */

#clock .digits div.five .d1,
#clock .digits div.five .d2,
#clock .digits div.five .d4,
#clock .digits div.five .d3,
#clock .digits div.five .d7{
  opacity:1;
}

/* 6 */

#clock .digits div.six .d1,
#clock .digits div.six .d2,
#clock .digits div.six .d4,
#clock .digits div.six .d3,
#clock .digits div.six .d6,
#clock .digits div.six .d7{
  opacity:1;
}


/* 7 */

#clock .digits div.seven .d1,
#clock .digits div.seven .d5,
#clock .digits div.seven .d7{
  opacity:1;
}

/* 8 */

#clock .digits div.eight .d1,
#clock .digits div.eight .d2,
#clock .digits div.eight .d3,
#clock .digits div.eight .d4,
#clock .digits div.eight .d5,
#clock .digits div.eight .d6,
#clock .digits div.eight .d7{
  opacity:1;
}

/* 9 */

#clock .digits div.nine .d1,
#clock .digits div.nine .d2,
#clock .digits div.nine .d3,
#clock .digits div.nine .d4,
#clock .digits div.nine .d5,
#clock .digits div.nine .d7{
  opacity:1;
}

/* 0 */

#clock .digits div.zero .d1,
#clock .digits div.zero .d3,
#clock .digits div.zero .d4,
#clock .digits div.zero .d5,
#clock .digits div.zero .d6,
#clock .digits div.zero .d7{
  opacity:1;
}

/* The  puntos */

#clock .digits div.dots{
  width:2px;
}
#clock .digits div.dots:before,
#clock .digits div.dots:after{
  width:5px;
  height:5px;
  content:'';
  position:absolute;
  left:0;
  top:14px;
}
#clock .digits div.dots:after{
  top:34px;
}


/* estados   */

.titulo-estados{
  background-color: #662d91;
  color:#FFF;
  width:100%;
  display:flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size:24px;
  height:60px;
}

.contenedor-estados{
  height:calc(100% - 60px);
}

.estado1{
  background-color: #b3b3b3;
  color:#254369;
  width:100%;
  height:25%;
  display:flex;
  align-items: center;
  justify-content: center;
  font-size:24px;
  text-transform:none;
}

.estado-azul{
  background-color: #b3b3b3;
  color:#254369;
  border:0;
  border-radius:0px !important;
}

.estado2{
  background-color: #254369;
  color:#fff;
  width:100%;
  height:25%;
  display:flex;
  align-items: center;
  justify-content: center;
  font-size:24px;
  text-transform:none;
}

.estado-morado{
  background-color: #254369;
  color:#fff;
  border:0;
  border-radius:0px !important;
}

.estado3{
  background-color: #4bb1e0;
  color:#fff;
  width:100%;
  height:25%;
  display:flex;
  align-items: center;
  justify-content: center;
  font-size:24px;
  text-transform:none;
}

.estado-amarillo{
  background-color: #4bb1e0;
  color:#fff;
  border:0;
  border-radius:0px !important;
}

.estado4{
  background-color: #00a99d;
  color:#fff;
  width:100%;
  height:25%;
  display:flex;
  align-items: center;
  justify-content: center;
  font-size:24px;
  text-transform:none;
}

.estado-verde{
  background-color: #00a99d;
  color:#fff;
  border:0;
  border-radius:0px !important;
}

.estado5{
  background-color: #000;
  color:#fff;
  width:100%;
  height:25%;
  display:flex;
  align-items: center;
  justify-content: center;
  font-size:24px;
  text-transform:none;
}

.estado-negro{
  background-color: #000;
  color:#fff;
  border:0;
  border-radius:0px !important;
}
.panel-title{
  text-transform: uppercase;
  text-align:center;
  font-size:18px;
  font-weight:bold;
}
.carousel-control, .carousel-indicators{
  display:none;
}
.list-group-item-heading{
  text-transform: uppercase;
  text-align:center;
  font-weight:normal;
  margin:0;
}
.sin_datos{
    width: 100%;
    height:100%;
    font-size: 20px;
    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
}
.instrucciones{
  background:url(../images/imagen_estados.jpg) no-repeat center center;
  background-size:cover;
  display:block;
  width:100%;
  height:100%;
}
.contenedor-principal-lista{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  width:100%;
  height:100%;
}
.contenedor-lista{
  display: block;
  width:100%;
  height: 100%;
}
.listado-pacientes{
  height:calc(100% - 100px);
  overflow: hidden;
}
.item-listado{
  height:14.28%;
  display: flex;
  align-items: center;
  align-content: center;
  margin:0;
  padding:0;
  border:0;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3) inset;
}
.item-listado h4{
  width:100%;
  font-size:2em;
  font-weight:normal;
}
.link-app{
  height:181px;
  background: url('../images/ingresa.jpg') no-repeat center center;;
  width:100%;
  background-size:contain;
  background-color: #666;
}
.contenedor-interno{
  height:100%;
  margin-bottom:0;
}
.link-app-interno{
  display:block;
  width:100%;
  height:100%;
}
.formato2{
  position:absolute;
  color:#fff;
  font-size:35px;
  width: 100%;
  height: 50%;
  top:50%;
  padding-top: 10%;
  display:flex;
  align-items: flex-start;
  justify-content: center;
}
.contenedor-texto-rotativo{
  background:#1f2d42;
  height:100%;
}
.explicacion-estados{
  height:100%;
  background:#fff;
  margin:0;
  padding:0;
}