/* General styles for the modal */

.md-open {
  overflow: hidden;
}
.md-perspective,
.md-perspective body {
  height: 100%;
  overflow: hidden;
}
.md-perspective body {
  background: #000;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  perspective: 600px;
}
.md-container {
  position: fixed;
  /*top: 0;
  left: 0;*/
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 100%;
  z-index: 2000;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;

}
.md-show {
  visibility: visible;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 9997;
}
.md-overlay {

  position: fixed;
  width: 100%;
  height: 100%;
  visibility: hidden;
  top: 0;
  left: 0;
  z-index: 9996;
  opacity: 0;
  background: rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.md-show ~ .md-overlay {
  opacity: 1;
  visibility: visible;
}
.md-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}
/* Content styles */
.md-content {
  color: #fff;
  background: transparent;
  position: relative;
  border-radius: 3px;
  margin: 20px auto 0px auto;
  max-width: 990px;
  min-width: 320px;
  
}
.md-content h3 {
  margin: 2px 0 0 0;
  padding: 0.1em;
  text-align: center;
  font-size: 1.3em;
  font-weight: 400;
  opacity: 0.8;
  background: rgba(109, 188, 112, 1);
  text-transform: uppercase;
}
.md-content > div {
  padding: 15px 0px;
  margin: 0;
  font-weight: 300;
  font-size: 1.15em;
}
/*.md-content > div p {
  margin: 0;
  padding: 10px 0;
}
.md-content > div ul {
  margin: 0;
  padding: 0 0 30px 20px;
}
.md-content > div ul li {
  padding: 5px 0;
}*/
.md-content button {
  display: block;
  margin: 0 auto;
  font-size: 0.8em;
}

/* Effect 16:  Blur */
.md-show.md-effect-16 ~ .md-overlay {

  background: rgba(0, 0, 0, 0.7);
}

/*.md-show.md-effect-16 ~ .wrapper {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  filter: blur(3px);
} */
.md-effect-16 .md-content {
  -webkit-transform: translateY(-5%);
  -moz-transform: translateY(-5%);
  -ms-transform: translateY(-5%);
  transform: translateY(-5%);
  opacity: 0;
}
.md-show.md-effect-16 ~ .wrapper,
.md-effect-16 .md-content {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.md-show.md-effect-16 .md-content {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
/* //////////////////////////// MAQUETACION PARA EL AUTOCOMPLETADO */
#sugerencia-rfc{
  position: absolute;
  width: 85%;
  z-index: 200;
  background-color: white;
  box-shadow: 0 10px 20px 0 rgba(23, 23, 23, 0.15),
                0 3px 1px -2px rgba(23, 23, 23, 0.2),
                0 10px 20px 0 rgba(23, 23, 23, 0.15);
}
/*#lista-rfc{
  float:right;
  list-style:none;
  margin:0;
  padding:0;
  width: 100%;
}
*/


#sugerencia-pacientes,#sugerencia-pacientes-cita-bus,#sugerencia-pacientes-pagos{
  position: absolute;width: 100%;
  z-index: 200;
  background-color: white;
  box-shadow: 0 10px 20px 0 rgba(23, 23, 23, 0.15),
                0 3px 1px -2px rgba(23, 23, 23, 0.2),
                0 10px 20px 0 rgba(23, 23, 23, 0.15);
}
#lista-pacientes, #lista-rfc,#lista-pacientes-cita-bus{
  float:left;
  list-style:none;
  margin:0;
  padding:0;
  width: 100%;
}
#sugerencia-pacientes-cita-bus{
  max-height: 300px;
  overflow: scroll;
}
#sugerencia-pacientes-pagos{
  max-height: 300px;
  overflow: scroll;
}


#lista-pacientes, #lista-rfc,#lista-pacientes-cita-bus{
  padding: 7px 10px;
  border-bottom:#F0F0F0 1px solid;
  cursor: pointer;
}
#lista-pacientes:hover, #lista-rfc:hover,#lista-pacientes-cita-bus:hover{
  background:#1d7aff;
  color: #ffffff;
}

/* //////////////////////////// MAQUETACION PARA EL SISTEMA EN GENERAL */

.bug-select{padding-top: 12px}
.conborde{border: solid 1px #1984f9; border-radius: 5px;}
.conbordepurple{border: solid 1px #9c27b0; border-radius: 5px;}
.buscar_codigo{cursor: pointer; margin-top: 20px}
#close{color: #000;font-size: 25px;}

.salir{text-transform: none;}
.texto-izquierda{text-align: left;}
.foto-circulo{
  border-radius: 10%;max-height: 100%; max-width: 100%;}
  /*.foto-circulo img{height: 100%; width: 100%;}*/
.nuevomensaje {
    /* current page */
    box-shadow: inset 3px 0 0 #1984f9;
    
  }
.esp{padding: 10px 0;}
.textoPreloader{margin-top: 20px;font-size: 10px;color: #fff}
.preload {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10000;

opacity: 0;
  visibility: hidden;

  background: rgba(255, 255, 255, 0.7);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.loader {
  font-size: 20px;
  position: relative;
  width: 2em;
  height: .7em;
  margin: 25% auto;
}

.dot {
  width: .7em;
  height: .7em;
  border-radius: 0.5em;
  background: #107BDE;
  position: absolute;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

.dot1, .dot2 {
  left: 0;
}

.dot3 { left: 1.5em; }

.dot4 { left: 3em; }

@keyframes reveal {
  from { transform: scale(0.001); }
  to { transform: scale(1); }
}

@keyframes slide {
  to { transform: translateX(1.5em) }
}


.dot1 {
  animation-name: reveal;
}

.dot2, .dot3 {
  animation-name: slide;
}

.dot4 {
  animation-name: reveal;
  animation-direction: reverse; /* thx @HugoGiraudel */
}



.cajacodigo{
  text-align:center;
  font-weight: bold; 
  font-size: 60px; 
  margin: 30px 0; 
  height: 20px;
}



.blanco{
  color: #ffffff;
}

.labinput-war {
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    background-color: #ffa21a;
    box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4);
}


.labinput {
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    background-color: #1984f9;
    box-shadow: 0 2px 2px 0 rgba(25, 132, 249, 0.14), 0 3px 1px -2px rgba(25, 132, 249, 0.2), 0 1px 5px 0 rgba(25, 132, 249, 0.12);
}


.imagen-redonda{
  border-radius: 10%;
  box-shadow:0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);

}

















.wrap_loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.text_loader {
  color: #107BDE;
  display: inline-block;
  margin-left: 10px;
  font-weight: 400;
}

.bounceball_loader {
  position: relative;
  display: inline-block;
  height: 37px;
  width: 20px;
}
.bounceball_loader:before {
    position: absolute;
    content: '';
    display: block;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #107BDE;
    transform-origin: 50%;
    animation: bounce 500ms alternate infinite ease;
  
}

@keyframes bounce {
  0% {
    top: 30px;
    height: 5px;
    border-radius: 60px 60px 20px 20px;
    transform: scaleX(2);
  }
  35% {
    height: 20px;
    border-radius: 50%;
    transform: scaleX(1);
  }
  100% {
    top: 0;
  }
}











.loader_pag {
  position: relative;
  margin: 17% auto;
  width: 100px;
}
.loader_pag:before {
    content: 'PROCESANDO DATOS...';
    display: block;
    padding-top: 100%;
  width: 120px;
  text-align: left;
  font-size: 11px;
  font-weight: bold;
}

.circular_pag {
  animation: rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.path_pag {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

@keyframes color {
  100%,
  0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: $#008744;
  }
  80%,
  90% {
    stroke: #ffa700;
  }
}

.showbox_pag {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5%;
}












tr:nth-child(even) {background-color: rgba(0, 0, 0,.01);}
.linkNuevaCita{
  cursor: pointer;
  height: 35px;
}

/*.linkNuevaCita:hover{
  border: 1px solid rgb(233, 30, 99);
  cursor: pointer;
}*/


.linkNuevaCita-amarillo:hover{
border: 1px solid #FF9400;
cursor: pointer;
}
.linkNuevaCita-verde:hover{
border: 1px solid #4caf50;
cursor: pointer;
}
.linkNuevaCita-morado:hover{
border: 1px solid #9c27b0;
cursor: pointer;
}
.linkNuevaCita-rosa:hover{
border: 1px solid #e91e63;
cursor: pointer;
}
.linkNuevaCita-rojo:hover{
border: 1px solid #f44336;
cursor: pointer;
}
.linkNuevaCita-azul:hover{
border: 1px solid #1984f9;
cursor: pointer;
}
.linkNuevaCita-negro:hover{
border: 1px solid #131313;
cursor: pointer;
}
.linkNuevaCita-cyan:hover{
border: 1px solid #00bcd4;
cursor: pointer;
}
.linkNuevaCita-marino:hover{
border: 1px solid #000ABB;
cursor: pointer;
}
.linkNuevaCita-verdeclaro:hover{
border: 1px solid #00A89F;
cursor: pointer;
}
















.tituloListaCitas{
  text-transform: uppercase;
}
.tituloListaCitas-amarillo{
background-color: #FF9400;
color: #FFFFFF;
}
.tituloListaCitas-verde{
background-color: #4caf50;
color: #FFFFFF;
}
.tituloListaCitas-morado{
background-color: #9c27b0;
color: #FFFFFF;
}
.tituloListaCitas-rosa{
background-color: #e91e63;
color: #FFFFFF;
}
.tituloListaCitas-rojo{
background-color: #f44336;
color: #FFFFFF;
}
.tituloListaCitas-azul{
/*background-color: #1984f9;*/
background-color: #0C6FD8;
color: #FFFFFF;
}
.tituloListaCitas-negro{
background-color: #131313;
color: #FFFFFF;
}
.tituloListaCitas-cyan{
/*background-color: #00bcd4;*/
background-color: #1AB4C5;
color: #FFFFFF;
}
.tituloListaCitas-marino{
background-color: #000ABB;
color: #FFFFFF;
}
.tituloListaCitas-verdeclaro{
background-color: #00A89F;
color: #FFFFFF;
}


/*.bgcolorCitas{
display: inline-block;
padding: 4px;
margin-bottom: 0;
font-size: 12px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}*/
/*AMARILLO*/

.bgcolor-amarillo {
    box-shadow: 0 2px 2px 0 rgba(255, 152, 0, 0.14), 0 3px 1px -2px rgba(255, 152, 0, 0.2), 0 1px 5px 0 rgba(255, 152, 0, 0.12);
}

.bgcolor-amarillo,
.bgcolor-amarillo:hover,
.bgcolor-amarillo:focus,
.bgcolor-amarillo:active,
.bgcolor-amarillo.active,
.bgcolor-amarillo:active:focus,
.bgcolor-amarillo:active:hover,
.bgcolor-amarillo.active:focus,
.bgcolor-amarillo.active:hover {
    background-color: #FF9400;
    color: #FFFFFF;
}

.bgcolor-amarillo:focus,
.bgcolor-amarillo:active,
.bgcolor-amarillo:hover {
    box-shadow: 0 14px 26px -12px rgba(255, 152, 0, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(255, 152, 0, 0.2);
}

/*VERDE*/

.bgcolor-verde {
    box-shadow: 0 2px 2px 0 rgba(76, 175, 80, 0.14), 0 3px 1px -2px rgba(76, 175, 80, 0.2), 0 1px 5px 0 rgba(76, 175, 80, 0.12);
}

.bgcolor-verde,
.bgcolor-verde:hover,
.bgcolor-verde:focus,
.bgcolor-verde:active,
.bgcolor-verde.active,
.bgcolor-verde:active:focus,
.bgcolor-verde:active:hover,
.bgcolor-verde.active:focus,
.bgcolor-verde.active:hover {
    background-color: #4caf50;
    color: #FFFFFF;
}

.bgcolor-verde:focus,
.bgcolor-verde:active,
.bgcolor-verde:hover {
    box-shadow: 0 14px 26px -12px rgba(76, 175, 80, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(76, 175, 80, 0.2);
}


/*MORADO*/

.bgcolor-morado {
    box-shadow:0 2px 2px 0 rgba(156,39,176,.14),0 3px 1px -2px rgba(156,39,176,.2),0 1px 5px 0 rgba(156,39,176,.12);
}

.bgcolor-morado,
.bgcolor-morado:hover,
.bgcolor-morado:focus,
.bgcolor-morado:active,
.bgcolor-morado.active,
.bgcolor-morado:active:focus,
.bgcolor-morado:active:hover,
.bgcolor-morado.active:focus,
.bgcolor-morado.active:hover {
    background-color: #9c27b0;
    color: #FFFFFF;
}

.bgcolor-morado:focus,
.bgcolor-morado:active,
.bgcolor-morado:hover {
    box-shadow:0 2px 2px 0 rgba(156,39,176,.14),0 3px 1px -2px rgba(156,39,176,.2),0 1px 5px 0 rgba(156,39,176,.12);
}



/*ROSA*/

.bgcolor-rosa {
    box-shadow: 0 2px 2px 0 rgba(233, 30, 99, 0.14), 0 3px 1px -2px rgba(233, 30, 99, 0.2), 0 1px 5px 0 rgba(233, 30, 99, 0.12);
}

.bgcolor-rosa,
.bgcolor-rosa:hover,
.bgcolor-rosa:focus,
.bgcolor-rosa:active,
.bgcolor-rosa.active,
.bgcolor-rosa:active:focus,
.bgcolor-rosa:active:hover,
.bgcolor-rosa.active:focus,
.bgcolor-rosa.active:hover {
    background-color: #e91e63;
    color: #FFFFFF;
}

.bgcolor-rosa:focus,
.bgcolor-rosa:active,
.bgcolor-rosa:hover {
    box-shadow: 0 14px 26px -12px rgba(233, 30, 99, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(233, 30, 99, 0.2);
}





/*ROJO*/

.bgcolor-rojo {
    box-shadow: 0 2px 2px 0 rgba(244, 67, 54, 0.14), 0 3px 1px -2px rgba(244, 67, 54, 0.2), 0 1px 5px 0 rgba(244, 67, 54, 0.12);
}

.bgcolor-rojo,
.bgcolor-rojo:hover,
.bgcolor-rojo:focus,
.bgcolor-rojo:active,
.bgcolor-rojo.active,
.bgcolor-rojo:active:focus,
.bgcolor-rojo:active:hover,
.bgcolor-rojo.active:focus,
.bgcolor-rojo.active:hover {
    background-color: #f44336;
    color: #FFFFFF;
}

.bgcolor-rojo:focus,
.bgcolor-rojo:active,
.bgcolor-rojo:hover {
    box-shadow: 0 14px 26px -12px rgba(244, 67, 54, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(244, 67, 54, 0.2);
}





/*AZUL*/

.bgcolor-azul {
    box-shadow: 0 2px 2px 0 rgba(25, 132, 249, 0.14), 0 3px 1px -2px rgba(25, 132, 249, 0.2), 0 1px 5px 0 rgba(25, 132, 249, 0.12);
}

.bgcolor-azul,
.bgcolor-azul:hover,
.bgcolor-azul:focus,
.bgcolor-azul:active,
.bgcolor-azul.active,
.bgcolor-azul:active:focus,
.bgcolor-azul:active:hover,
.bgcolor-azul.active:focus,
.bgcolor-azul.active:hover {
    background-color: #1984f9;
    color: #FFFFFF;
}

.bgcolor-azul:focus,
.bgcolor-azul:active,
.bgcolor-azul:hover {
    cursor: pointer;
    box-shadow: 0 14px 26px -12px rgba(25, 132, 249, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(25, 132, 249, 0.2);
}





/*NEGRO*/

.bgcolor-negro {
    box-shadow: 0 2px 2px 0 rgba(19, 19, 19, 0.14), 0 3px 1px -2px rgba(19, 19, 19, 0.2), 0 1px 5px 0 rgba(19, 19, 19, 0.12);
}

.bgcolor-negro,
.bgcolor-negro:hover,
.bgcolor-negro:focus,
.bgcolor-negro:active,
.bgcolor-negro.active,
.bgcolor-negro:active:focus,
.bgcolor-negro:active:hover,
.bgcolor-negro.active:focus,
.bgcolor-negro.active:hover {
    background-color: #131313;
    color: #FFFFFF;
}

.bgcolor-negro:focus,
.bgcolor-negro:active,
.bgcolor-negro:hover {
    box-shadow: 0 14px 26px -12px rgba(19, 19, 19, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(19, 19, 19, 0.2);
}




/*CYAN*/

.bgcolor-cyan {
    box-shadow: 0 2px 2px 0 rgba(0, 188, 212, 0.14), 0 3px 1px -2px rgba(0, 188, 212, 0.2), 0 1px 5px 0 rgba(0, 188, 212, 0.12);
}

.bgcolor-cyan,
.bgcolor-cyan:hover,
.bgcolor-cyan:focus,
.bgcolor-cyan:active,
.bgcolor-cyan.active,
.bgcolor-cyan:active:focus,
.bgcolor-cyan:active:hover,
.bgcolor-cyan.active:focus,
.bgcolor-cyan.active:hover {
    background-color: #00bcd4;
    color: #FFFFFF;

}

.bgcolor-cyan:focus,
.bgcolor-cyan:active,
.bgcolor-cyan:hover {
  cursor: pointer;
    box-shadow: 0 14px 26px -12px rgba(0, 188, 212, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 188, 212, 0.2);
}


/*MARINO*/

.bgcolor-marino {
    box-shadow: 0 2px 2px 0 rgba(16, 0, 187, 0.14), 0 3px 1px -2px rgba(16, 0, 187, 0.2), 0 1px 5px 0 rgba(16, 0, 187, 0.12);
}

.bgcolor-marino,
.bgcolor-marino:hover,
.bgcolor-marino:focus,
.bgcolor-marino:active,
.bgcolor-marino.active,
.bgcolor-marino:active:focus,
.bgcolor-marino:active:hover,
.bgcolor-marino.active:focus,
.bgcolor-marino.active:hover {
    background-color: #000ABB;
    color: #FFFFFF;
}

.bgcolor-marino:focus,
.bgcolor-marino:active,
.bgcolor-marino:hover {
    box-shadow: 0 14px 26px -12px rgba(16, 0, 187, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(16, 0, 187, 0.2);
}




/*verdeclaro*/

.bgcolor-verdeclaro {
    box-shadow: 0 2px 2px 0 rgba(0, 168, 159, 0.14), 0 3px 1px -2px rgba(0, 168, 159, 0.2), 0 1px 5px 0 rgba(0, 168, 159, 0.12);
}

.bgcolor-verdeclaro,
.bgcolor-verdeclaro:hover,
.bgcolor-verdeclaro:focus,
.bgcolor-verdeclaro:active,
.bgcolor-verdeclaro.active,
.bgcolor-verdeclaro:active:focus,
.bgcolor-verdeclaro:active:hover,
.bgcolor-verdeclaro.active:focus,
.bgcolor-verdeclaro.active:hover {
    background-color: #00A89F;
    color: #FFFFFF;
}

.bgcolor-verdeclaro:focus,
.bgcolor-verdeclaro:active,
.bgcolor-verdeclaro:hover {
    box-shadow: 0 14px 26px -12px rgba(0, 168, 159, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 168, 159, 0.2);
}


.txtTool{
  font-size: 15px;
}







.hr_nomina {

    margin-top: 5px;
    margin-bottom: 5px;
    border: 0;
        border-top-color: currentcolor;
        border-top-style: none;
        border-top-width: 0px;
    border-top: 1px solid #eee;
  height: 1px;
}