

.barra-progreso{
	padding: 2.5%;
}

.smallFont{
	font-size: 11px;
}

.mediumFont{
  font-size: 12px;
  line-height: 13px;
}


.title{
  font-weight: bolder;
  font-size: 18px;
  text-decoration: underline;

}


.negritas{
  font-weight: bold;
}

.pointer{
	cursor: pointer;
}

.FontRed{
  color: red;
}

#myProgress {
  width: 100%;
  background-color: #666666;
  
 
}

.foto{
  width: 200px;
}

#myBar {

  width: 10%;
  height: 30px;
  
  text-align: center;
  line-height: 30px;
  color: black;
  font-weight: bolder;


  background: rgb(255, 0, 0,0.5);
  background: -webkit-linear-gradient(left, rgb(255, 0, 0,0.5), rgb(255, 255, 0,0.5), rgb(204, 255, 102,0.5), rgb(51, 204, 51,0.5));
  background: -o-linear-gradient(left, rgb(255, 0, 0,0.5), rgb(255, 255, 0,0.5), rgb(204, 255, 102,0.5), rgb(51, 204, 51,0.5));
  background: -moz-linear-gradient(left, rgb(255, 0, 0,0.5), rgb(255, 255, 0,0.5), rgb(204, 255, 102,0.5), rgb(51, 204, 51,0.5));
  background: linear-gradient(left, rgb(255, 0, 0,0.5), rgb(255, 255, 0,0.5), rgb(204, 255, 102,0.5), rgb(51, 204, 51,0.5));
}

.FontPagado{
  background-color: rgb(0, 153, 0,0.1)

}

.FontPendiente{
  background-color: rgb(255, 255, 128,0.3)

}

.AlignRight{
  text-align: right;
}

.centrado{
  text-align: center;
}


.padding{
  padding: 2%;
}

.leyenda{
  text-align: justify;
  opacity: 0.7;
}

.leyendaSmall{
  text-align: justify;
  opacity: 0.7;
  font-size: 12px;

}

.ProcesoPago{
  margin-top: 3%;
}

.link{
  color: #404040;
  font-size: 17px;
  cursor: pointer;
  padding: 2%;
}



.link:hover{
  color: black;
  cursor: pointer;
}

.DefaultLink{
  color: blue;
  cursor: pointer;
  font-size: 13px;

}

.DefaultLink:hover{
  color: black;
  cursor: pointer;
}

.ContainerEtapaActual{
  padding-left: 10%;
  padding-right: 10%;
  padding-bottom: 10%;
  padding-top: 5%;
}

.subtitulos{
  font-size: 15px;
  text-align: center;
}

.mediumSubtitulos{
  font-size: 18px;
  font-weight: bolder;
  text-align: center;
}

.center{
  text-align: center;
}



.InicioTramite{
  text-align: center;
  width: 100%;
  opacity: 0.7;
  margin-top: 8%;
}

.InicioTramite:hover{
  cursor: pointer;
  opacity: 0.9;
  
}

.right{
  text-align: right;
}


.contenedorEtapa{
  padding: 1.5%;
  margin: 1%;
  background: #f2f2f2;
}

.opacity{

  opacity: 0.7;
}


.arrow{
  opacity: 0.3;
  margin-top: 2%;
  text-align: center;
  
}

.tituloEtapa{
  font-size: 22px;
  text-align: center;
}



.tabla-tramites{
  overflow-y: auto;
  overflow-x: hidden;
  height: 600px;
}


/*********Scroll bar*********/

::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #d9d9d9; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #b2b2b2; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #808080; 
}


.tituloFase{
  margin-top: 1.5%;
  font-weight: bolder;
  font-size: 18px;
  text-align: center;

}

.containerFase{
  background-color: #d9d9d9;
  border-radius: 10px;
  padding: 3%;
  opacity: 0.6;

}

.FaseConfirmada{

  background-color: rgb(51, 204, 51,0.2);
  border-radius: 10px;
  padding: 3%;

}

.avance-barra{
 
  background-color: #fff;
  margin-top: 2%;
  margin-bottom: 2%;

}

.points{
  text-align: center;
  font-weight: bolder;
  font-size: 22px;
  padding: 0;
  margin: 0;
}

.image{
  opacity: 0.5;
  text-align: center;

}

.puntos{
  text-align: center;
  font-weight: bolder;
  font-size: 50px;
  opacity: 0.2;
}

.puntosActivos{

  text-align: center;
  font-weight: bolder;
  font-size: 50px;
  opacity: 0.9;

}


.blackPoints{
  color: black;
  text-align: center;
  font-weight: bolder;
  font-size: 50px;
  opacity: 0.9;

}



.line{
  line-height: 1px;
}

.containerConfirmacionPago{

  background-color: #f2f2f2;
  padding: 3.5%;
}

.barra-etapas{
  padding: 1%;
  text-align: center;
}




@media (max-width: 990px) {
  .metaFinal{
  text-align: center;
}
}


@media (min-width: 990px) {
  .metaFinal{
  text-align: right;
}
}