/* BASE */
.f-left {
  float: left !important; }

.f-right {
  float: right !important; }
.wrap-step{
  position: relative;
  width: 100%;
  height: 30px;
  background-color: transparent !important;
  /*-50% de la medida de los circulos con sombra*/
  -webkit-transform: translateX(-15px);
  -ms-transform: translateX(-15px);
  -o-transform: translateX(-15px);
  transform: translateX(-15px);
}
.step-line, .step-line2{
  position: absolute;
  width: 100%;
  height: 10px;
  border-radius: 10px;
  -webkit-transform: translate(15px, 10px);
  -ms-transform: translate(15px, 10px);
  -o-transform: translate(15px, 10px);
  transform: translate(15px, 10px);
  background-color: #fff;
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
  z-index: -1;
}
.step-line2{
  box-shadow: none;
  z-index: 2;
}
.step1, .step2, .step3, .step4, .step5{
  position: absolute;
  display: inline-block;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
}
.step1{left: 0;} .step2{left: 25%;} .step3{left: 50%;} .step4{left: 75%;} .step5{left: 100%;}
.step.on{
  border:5px solid white;
  width: 30px;/* aumente 10px por estilos de calendario */
  height: 30px;
  transition:.2s;
  }
  .step.off{
    width: 25px;/* aumente 10px por estilos de calendario */
    height: 25px;
    background-color: #fff;
    border: 5px solid white;
    top: 3px;
    transition:.2s;
  }
.step .pasito span{
  display: none;
}
.step.on .pasito span{
  display: inline-block;
  color: #fff;
  font-size: 16px;
  font-weight: 100;
  opacity: 1;
  transition:.1s;
}
.step.off .pasito span{
  opacity: 0;
  transition:.1s;
}

/*PASITO A PASITO*/
/*.step1 .pasito{background-color: #30C4EF;}
.step2 .pasito{background-color: #43C8EB;}
.step3 .pasito{background-color: #61CAE0;}
.step4 .pasito{background-color: #7FCFD0;}
.step5 .pasito{background-color: #9ED5BA;}*/
.pasito{
  position: relative;
  border-radius: 50%;
  color: white;
  z-index: 10;
  background-color: #199919;
  margin: 0 auto;
  box-shadow: 0 0 5px rgba(159,213,89,0.9);
}
  .pasito.done{box-shadow: 0 0 5px rgba(159,213,89,0.9);}
  .pasito.error{box-shadow: 0 0 5px rgba(255,50,70,0.9) !important;}

  .step.on .pasito{
    width: 20px;
    height: 20px;
    transition:.55s;
  }
  .step.off .pasito{
    width: 15px;
    height: 15px;
    opacity: 1;
    transition:.55s;
  }

/*  LINEAS  */
.pasito-line{
  position: absolute;
  width: 0;
  height: 4px;
  -webkit-transform: translate(15px, 13px);
  -ms-transform: translate(15px, 13px);
  -o-transform: translate(15px, 13px);
  transform: translate(15px, 13px);
  background-color: #199919;
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
  z-index: 3;
}

  /* Animacion lineas */
    .line1{
      background-color: #199919;
      box-shadow:0 0 8px rgba(0, 255, 21, 0.7);
      -webkit-animation-name:primero;
      -ms-animation-name:primero;
      -o-animation-name:primero;
      animation-name:primero;
      -webkit-animation-duration:.5s;
      -ms-animation-duration:.5s;
      -o-animation-duration:.5s;
      animation-duration:.5s;
      -webkit-animation-fill-mode:forwards;
      -ms-animation-fill-mode:forwards;
      -o-animation-fill-mode:forwards;
      animation-fill-mode:forwards;
    }

@keyframes primero{
  0% {left:0;width: 0;}
  50% {left:0;width: 25%;}
  100% {left:25%;width: 0;}
}
@-webkit-keyframes primero{
  0% {left:0;width: 0;}
  50% {left:0;width: 25%;}
  100% {left:25%;width: 0;}
}

      .line2{
        background-color: #199919;
      -webkit-animation-name:segundo;
      -ms-animation-name:segundo;
      -o-animation-name:segundo;
      animation-name:segundo;
      -webkit-animation-duration:.5s;
      -ms-animation-duration:.5s;
      -o-animation-duration:.5s;
      animation-duration:.5s;
      -webkit-animation-fill-mode:forwards;
      -ms-animation-fill-mode:forwards;
      -o-animation-fill-mode:forwards;
      animation-fill-mode:forwards;
    }

@keyframes segundo{
  0% {left:25%;width: 0;}
  50% {left:25%;width: 25%;}
  100% {left:50%;width: 0;}
}
@-webkit-keyframes segundo{
  0% {left:25%;width: 0;}
  50% {left:25%;width: 25%;}
  100% {left:50%;width: 0;}
}

.line3{
  background-color: #199919;
      -webkit-animation-name:tercero;
      -ms-animation-name:tercero;
      -o-animation-name:tercero;
      animation-name:tercero;
      -webkit-animation-duration:.5s;
      -ms-animation-duration:.5s;
      -o-animation-duration:.5s;
      animation-duration:.5s;
      -webkit-animation-fill-mode:forwards;
      -ms-animation-fill-mode:forwards;
      -o-animation-fill-mode:forwards;
      animation-fill-mode:forwards;
    }

@keyframes tercero{
  0% {left:50%;width: 0;}
  50% {left:50%;width: 25%;}
  100% {left:75%;width: 0;}
}
@-webkit-keyframes tercero{
  0% {left:50%;width: 0;}
  50% {left:50%;width: 25%;}
  100% {left:75%;width: 0;}
}

      .line4{
        background-color: #199919;
      -webkit-animation-name:cuarto;
      -ms-animation-name:cuarto;
      -o-animation-name:cuarto;
      animation-name:cuarto;
      -webkit-animation-duration:.5s;
      -ms-animation-duration:.5s;
      -o-animation-duration:.5s;
      animation-duration:.5s;
      -webkit-animation-fill-mode:forwards;
      -ms-animation-fill-mode:forwards;
      -o-animation-fill-mode:forwards;
      animation-fill-mode:forwards;
    }

@keyframes cuarto{
  0% {left:75%;width: 0;}
  50% {left:75%;width: 25%;}
  100% {left:100%;width: 0;}
}
@-webkit-keyframes cuarto{
  0% {left:75%;width: 0;}
  50% {left:75%;width: 25%;}
  100% {left:100%;width: 0;}
}

.rline1{
      background-color: #FF0000;
      -webkit-animation-name:r-primero;
      -ms-animation-name:r-primero;
      -o-animation-name:r-primero;
      animation-name:r-primero;
      -webkit-animation-duration:.5s;
      -ms-animation-duration:.5s;
      -o-animation-duration:.5s;
      animation-duration:.5s;
      -webkit-animation-fill-mode:forwards;
      -ms-animation-fill-mode:forwards;
      -o-animation-fill-mode:forwards;
      animation-fill-mode:forwards;
    }

@keyframes r-primero{
  0% {left:25%;width: 0;}
  50% {left:0;width: 25%;}
  100% {left:0;width: 0;}
}
@-webkit-keyframes r-primero{
  0% {left:25%;width: 0;}
  50% {left:0;width: 25%;}
  100% {left:0;width: 0;}
}

.rline2{
      background-color: #FF0000;
      -webkit-animation-name:r-segundo;
      -ms-animation-name:r-segundo;
      -o-animation-name:r-segundo;
      animation-name:r-segundo;
      -webkit-animation-duration:.5s;
      -ms-animation-duration:.5s;
      -o-animation-duration:.5s;
      animation-duration:.5s;
      -webkit-animation-fill-mode:forwards;
      -ms-animation-fill-mode:forwards;
      -o-animation-fill-mode:forwards;
      animation-fill-mode:forwards;
    }

@keyframes r-segundo{
  0% {left:50%;width: 0;}
  50% {left:25%;width: 25%;}
  100% {left:25%;width: 0;}
}
@-webkit-keyframes r-segundo{
  0% {left:50%;width: 0;}
  50% {left:25%;width: 25%;}
  100% {left:25%;width: 0;}
}

.rline3{
      background-color: #FF0000;
      -webkit-animation-name:r-tercero;
      -ms-animation-name:r-tercero;
      -o-animation-name:r-tercero;
      animation-name:r-tercero;
      -webkit-animation-duration:.5s;
      -ms-animation-duration:.5s;
      -o-animation-duration:.5s;
      animation-duration:.5s;
      -webkit-animation-fill-mode:forwards;
      -ms-animation-fill-mode:forwards;
      -o-animation-fill-mode:forwards;
      animation-fill-mode:forwards;
    }

@keyframes r-tercero{
  0% {left:75%;width: 0;}
  50% {left:50%;width: 25%;}
  100% {left:50%;width: 0;}
}
@-webkit-keyframes r-tercero{
  0% {left:70%;width: 0;}
  50% {left:50%;width: 25%;}
  100% {left:50%;width: 0;}
}

.rline4{
      background-color: #FF0000;
      -webkit-animation-name:r-cuarto;
      -ms-animation-name:r-cuarto;
      -o-animation-name:r-cuarto;
      animation-name:r-cuarto;
      -webkit-animation-duration:.5s;
      -ms-animation-duration:.5s;
      -o-animation-duration:.5s;
      animation-duration:.5s;
      -webkit-animation-fill-mode:forwards;
      -ms-animation-fill-mode:forwards;
      -o-animation-fill-mode:forwards;
      animation-fill-mode:forwards;
    }

@keyframes r-cuarto{
  0% {left:100%;width: 0;}
  50% {left:75%;width: 25%;}
  100% {left:75%;width: 0;}
}
@-webkit-keyframes r-cuarto{
  0% {left:100%;width: 0;}
  50% {left:75%;width: 25%;}
  100% {left:75%;width: 0;}
}

/*ANIMAR SECCIONES*/
.hidden2{
    display: none;
  }
.entrar{
  animation-name: entrar;
  -webkit-animation-name: entrar;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
}
@keyframes entrar{
  0% {transform: translateX(-300%);}
  50% {transform: translateX(8%);}
  65% {transform: translateX(-4%);}
  80% {transform: translateX(4%);}
  95% {transform: translateX(-2%);}
  100% {transform: translateX(0%);}
}
@-webkit-keyframes entrar{
  0% {-webkit-transform: translateX(-300%);}
  50% {-webkit-transform: translateX(8%);}
  65% {-webkit-transform: translateX(-4%);}
  80% {-webkit-transform: translateX(4%);}
  95% {-webkit-transform: translateX(-2%);}
  100% {-webkit-transform: translateX(0%);}
}

.regresar{
  animation-name: regresar;
  -webkit-animation-name: regresar;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
}
@keyframes regresar{
  0% {transform: translateX(300%);}
  50% {transform: translateX(-8%);}
  65% {transform: translateX(4%);}
  80% {transform: translateX(-4%);}
  95% {transform: translateX(2%);}
  100% {transform: translateX(0%);}
}
@-webkit-keyframes regresar{
  0% {-webkit-transform: translateX(300%);}
  50% {-webkit-transform: translateX(-8%);}
  65% {-webkit-transform: translateX(4%);}
  80% {-webkit-transform: translateX(-4%);}
  95% {-webkit-transform: translateX(2%);}
  100% {-webkit-transform: translateX(0%);}
}

/*DOCTORES*/
.caja{
  width: 100%;
  padding: 5px 15px;
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  background-color: white;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  behavior: url(../border.htc);
  border-radius: 6px;
  border: 1px solid #30C4EF;
  box-shadow:0 0 8px rgba(0, 0, 0, 0.2);
}
  .caja .col{
    padding: 0 5px;
  }
.doc{
  width: 100%;
  color: #999999;
  font-size: 16px;
  font-weight: 300;
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  background-color: white;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  behavior: url(../border.htc);
  padding-top: 15px;
  padding-bottom: 15px;
  border-radius: 6px;
  border: 1px solid #999999;
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: center;
}
.doc.on{
  background-color: #30C4EF;
  color: white;
  border-color: #30C4EF;
}

/*.radio-button {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      margin: 0;
      cursor: pointer;
    }*/
    .radio-button{
      visibility: hidden;
    }

    /* estilos iniciales */
    .radio-tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      border: 2px solid #b2b2b2;
      border-radius: 5px;
      padding: 1.5rem;
      transition: transform 300ms ease;
      color: #999;
    }
    
    .radio-tile-label {
      text-align: center;
      font-size: 0.75rem;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-top: 0;
    }

    .doc-marg-bot{padding-bottom: 18px;}

    /* estilos activos */
    .radio-button:checked + .radio-tile {
      background-color: #30C4EF;
      border: 2px solid #30C4EF;
      color: white !important;}
      .radio-button:checked .radio-tile-label {
      color: white !important;}